/* Variables */
:root {
  /* BENANA */
  --benana-max-width: calc(1280px + 2 * var(--gutter-x));
  --benana-max-width-2: 1280px;
  --benana-base: 1.8rem;          /* 18px bei 62.5% */
  --benana-lh: 1.5;

  --benana-mono: pressura--mono, ui-monospace, monospace;
  --benana-bold: pressura--bold, ui-monospace, monospace;

  --benana-body-weight: 400;
  --benana-head-weight: 600;

  --benana-head-transform: uppercase;
  --benana-head-ls: 0.025em;
  --benana-head-lh: 1.05;
  --benana-transition: .15s cubic-bezier(.21,.62,.35,1);

  /* BENANA-Header */
  --benana-header-height: 10rem;
  --benana-background-nav: var(--benana-background-light);
  --benana-color-nav: var(--benana-black);
  --benana-nav-hover: var(--benana-color-blue);
  

  /* BENANA Typo */
  --default-text-font: Pressura--Mono, ui-monospace, monospace;
  --default-text-size: 18px;
  --default-line-height: 1.5rem;
  --default-text-color: var(--benana-black);
  --light-text-color: var(--benana-white);



  --benana-h2-desktop: 5rem;
  --benana-h3-desktop: 3rem;
  --benana-h2-mobile: 4.4rem;
  --benana-h3-mobile: 2.4rem;
  --benana-ui-text: 1rem;

    /* scale */
  --fs-xxl: 5rem;
  --fs-xl: clamp(3rem, 7vw, 4rem);
  --fs-l: 3rem;
  --fs-m: 2rem;
  --fs-s: 1.5rem;
  --fs-xs: 1.4rem;
  --fs-xxs: 1.2rem;

    /* special */
  --fs-untertitel: clamp(1rem, 4vw, 2.5rem);
  --fs-hero: clamp(2rem, 7.2vw, 9rem);
  --fs-quote: 6cqi;
  --fs-button: clamp(2rem, 6vw, 2.8rem);
  --fs-button-small: 2rem;
  --fs-logo: 4.4rem;
  --fs-nav: 2.05rem;
  --fs-nav-mob: 4rem;
  --fs-input: 1.6rem;
  --fs-copy: clamp(var(--fs-xxs), 1.5vw, var(--fs-s));

    /* BENANA-Colors */
  --benana-background-dark: var(--benana-black);
  --benana-background-light: var(--benana-white);
  --benana-text-dark: var(--benana-black);
  --benana-text-light: var(--benana-white);
  --benana-black: #1d1d1b;
  --benana-white: #dfdfd7;
  --benana-blue: #417AC7;
  --benana-highlight-red: #aa0000;
  --benana-color-lightblue: #75aad3;
  --benana-color-lighticeblue: #8ABBFF;
  --benana-color-lightgray: #DAD9D6;
  --benana-color-gray: #7D7773;    
  --benana-color-darkgray: #4C4E56;
  --benana-color-hovergray: #eaebef;
  --benana-color-blue: #568BDA;
  --benana-color-yellow: #efc766;
  --benana-color-orange: #d59351;
  --benana-color-red: #b13406;
  --benana-color-green: #8bb275;
  --benana-color-softblack: #1d1d1b;
  --benana-color-softwhite: #dfdfd7;

      /* BENANA-Button */
  --benana-button-background: var(--benana-color-blue);
  --benana-button-text: var(--benana-text-dark);
  --benana-button-hover: var(--benana-color-blue);
  --buy-button: #417ac7;
  --buy-button-hover: #deded6;
  --ls-button: 0.04em;
  --button-padding: .24em .26em;


 /* LITECART */
  --menu-ease: cubic-bezier(.35,0,.2,1);
  --menu-dur: 560ms;
  --menu-delay: 80ms;

  --menu-fade-dur: 560ms;     /* Logo/Icons/Glyphen */
  --menu-fade-delay: 80ms;

  /* General */
  --border-radius: 4px;
  --gutter-x: 2rem;
  --gutter-2x: calc(var(--gutter-x) * 2);
  --gutter-y: 2rem;
  --gutter-2y: calc(var(--gutter-y) * 2);
  --gutter-3y: calc(var(--gutter-y) * 3);
  --gutter-y-half: calc(var(--gutter-y) * 0.5);
  --gutter-y-small: 0.8rem;
  --link-text-color: var(--benana-color-blue);
  --shadow-color: rgba(0, 0, 0, 0.3);
  --whitespace-color: #fff;
  --site-background-color: #dfdfd7;
  --sidebar-width: 300px;

  /* Important Notice */
  --important-notice-background-color: #222;
  --important-notice-text-color: #fff;
  --header-background-color: transparent;
  --header-text-color: var(--default-text-color);

  /* Cookie Notice */
  --cookie-notice-background-color: rgba(45, 45, 56, 0.75);
  --cookie-notice-text-color: #fff;

  /* Navigation */
  --navigation-background-color: #d7dae3;
  --navigation-background-color-hover: var(--benana-color-lightblue);
  --navigation-background-color-active: rgba(0, 0, 0, 0.15);
  --navigation-text-color: #222;
  --navigation-text-color-hover: var(--navigation-text-color);
  --navigation-text-color-active: var(--navigation-text-color);

  /* Offcanvas */
  --offcanvas-background-color: var(--navigation-background-color);
  --offcanvas-text-color: var(--navigation-text-color);

  /* Defaults (BENANA überschreibt hier) */
  --default-background-color: #edeff3;
  --default-border-color: var(--benana-text-dark);

  /* Buttons */
  --default-button-background-color: var(--benana-color-yellow);
  --default-button-background-color-hover: var(--benana-color-blue);
  --default-button-background-color-active: var(--benana-color-blue);
  --default-button-border-color: rgba(0, 0, 0, 0.075);
  --default-button-text-color: var(--benana-black);

  --primary-button-background-color: #2e9cd4;
  --primary-button-background-color-hover: var(--benana-color-lightblue);
  --primary-button-background-color-active: #bdbdbd;
  --primary-button-border-color: rgba(0, 0, 0, 0.075);
  --primary-button-text-color: #fff;

  --success-button-background-color: var(--benana-color-blue);
  --success-button-background-color-hover: var(--benana-button-hover);
  --success-button-background-color-active: #417ac1;
  --success-button-border-color: rgba(0, 0, 0, 0.075);
  --success-button-text-color: var(--benana-button-text);

  --warning-button-background-color: #f0ad4e;
  --warning-button-background-color-hover: #f2b866;
  --warning-button-background-color-active: #f1b25a;
  --warning-button-border-color: rgba(0, 0, 0, 0.1);
  --warning-button-text-color: #aa0000;

  --danger-button-background-color: #d9534f;
  --danger-button-background-color-hover: #de6764;
  --danger-button-background-color-active: #db5d59;
  --danger-button-border-color: rgba(0, 0, 0, 0.1);
  --danger-button-text-color: #fff;

  /* Notices */
  --default-notice-background-color: var(--benana-color-yellow);
  --default-notice-text-color: var(--benana-text-dark);
  --default-notice-border-color: var(--benana-color-yellow);

  --primary-notice-background-color: #3ba5c6;
  --primary-notice-text-color: #1d1d1b;
  --primary-notice-border-color: #3ba5c6;

  --success-notice-background-color: var(--benana-color-blue);
  --success-notice-text-color: var(--benana-text-light);
  --success-notice-border-color: var(--benana-color-blue);

  --warning-notice-background-color: var(--benana-color-yellow);
  --warning-notice-text-color: var(--benana-text-dark);
  --warning-notice-border-color: var(--benana-color-yellow);

  --danger-notice-background-color: #d9534f;
  --danger-notice-text-color: #fff;
  --danger-notice-border-color: #d9534f;

  /* Breadcrumbs */
  --breadcrumbs-background-color: var(--benana-color-lightgray);
  --breadcrumbs-text-color: var(--default-text-color);
  --breadcrumbs-border-color: none;

  /* Cards */
  --card-background-color: none;
  --card-text-color: var(--default-text-color);
  --card-border-color: var(--default-border-color);
  --card-header-background-color: none;
  --card-header-text-color: var(--card-text-color);
  --card-body-background-color: none;
  --card-footer-background-color: none;

  /* Input */
  --input-background-color: none;
  --input-padding-x: 1em;
  --input-padding-y: 0.6em;
  --input-text-color: var(--benana-text-dark);
  --input-border-radius: .125em;

  /* Pills */
  --pills-background-color: transparent;
  --pills-background-color-active: #d7dae3;
  --pills-background-color-hover: #f1f3f7;
  --pills-text-color: var(--default-text-color);
  --pills-text-color-active: #222;

  /* Tabs */
  --tabs-pane-background-color: #eff2f5;
  --tabs-pane-border-color: var(--tabs-pane-background-color);
  --tabs-background-color: #e8e8eb;
  --tabs-background-color-active: #fff;
  --tabs-text-color: #333;
  --tabs-text-color-active: var(--tabs-text-color);
  --tabs-border-color: var(--tabs-background-color);
  --tabs-border-color-active: var(--tabs-background-color-active);
  --tabs-content-background-color: #fff;

  /* Dropdowns */
  --dropdown-menu-background-color: #fff;
  --dropdown-menu-item-background-color: var(--dropdown-menu-background-color);
  --dropdown-menu-item-text-color: var(--default-text-color);

  /* Tables */
  --table-striped-row-background-odd: none;
  --table-striped-row-background-even: none;
  --table-row-hover-background: none;

  /* Pagination */
  --pagination-background-color: var(--default-background-color);
  --pagination-background-color-active: #d7dae3;
  --pagination-background-color-hover: #e7e8ed;
  --pagination-text-color: var(--default-text-color);
  --pagination-text-color-active: var(--default-text-color);
  --pagination-text-color-hover: var(--default-text-color);
  --pagination-border-color: var(--default-border-color);

  /* Footer */
  --footer-background-color: #ededf1;
  --footer-title-color: var(--default-text-color);
  --footer-text-color: var(--default-text-color);

  /* Copyright */
  --copyright-background-color: #e2e2e7;
  --copyright-text-color: var(--default-text-color);
}

@media (min-width: 768px) {
  :root {
    --gutter-x: 2.5rem;
    --gutter-y: 2.5rem;
  }
}
@media (min-width: 992px) {
  :root {
    --gutter-x: 3rem;
    --gutter-y: 3rem;
  }
}
@media (min-width: 1200px) {
  :root {
    --gutter-x: 4rem;
    --gutter-y: 4rem;
  }
}