:root {
  /* == Colors == */
  --c-primary: #B1BA2A;
  --c-secondary: #A60008;
  --c-white: #ffffff;
  --c-white-transparent: #FFFFFFCC;
  --c-white-35: #ffffff59;
  --c-black: #000000;
  --c-grey: #1D2224;
  --c-green: #07B750;
  
  /* == Layout == */
  --max-w-container: 940px;
  
  /* == Typography == */
  --fs-base: 16px;
  --ff-base: "Open Sans", sans-serif;
  --fw-base: 400;
  --lh-base: 1;
  
  --fs-h1: 32px;
  --ff-h1: "Eraser Dust", sans-serif;
  --fw-h1: 700;
  --lh-h1: 1;
  
  --fs-h2: 25px;
  --ff-h2: "Eraser Dust", sans-serif;
  --fw-h2: 700;
  --lh-h2: 1;
  
  --fs-h3: 18px;
  --ff-h3: "Eraser Dust", sans-serif;
  --fw-h3: 700;
  --lh-h3: 1;
  
  --fs-h4: 18px;
  --ff-h4: "Eraser Dust", sans-serif;
  --fw-h4: 700;
  --lh-h4: 1;
  
  /* == Navigation == */
  --nav-h: 55px;
  --nav-p: 0 16px;
  --nav-bb: 3px solid var(--c-black);
  --nav-bg-c: var(--c-white);
  --nav--logo-w: auto;
  --nav--logo-h: 75px;
  --nav--logo-mt: 15px;
  --nav--logo-bg-c: #27362B;
  --nav--logo-bs: none;
  --nav--logo-p: 10px 28px;
  --nav--logo-border-r: 0 0 20px 20px;
  --nav--logo--hover-bg-c: var(--c-grey);
  --nav--sticky-logo-w: 100px;
  --nav--sticky-logo-h: 84px;
  --nav--sticky-logo-mt: 30px;
  --nav--menu-c: var(--c-black);
  --nav--menu-fw: 400;
  --nav--menu-bg-c: var(--c-white);
  --nav--menu--divider-c: var(--c-black);
  --nav--menu--dropdown-border-b: 3px solid var(--c-black);
  --nav--menu--hover-c: var(--c-black);
  --nav--menu--hover-underline-c: var(--c-black);
  --nav--menu--hover-underline-h: 2px;
  --nav--menu--active-bg-c: transparent;
  --nav--menu--active-c: var(--c-primary);
  --nav--menu--active-td: underline;
  --nav--menu--active-td-offset: 3px;
  --nav--menu--active-fw: 900;
  --nav--menu--burger-c: #27362B;
  --nav--menu--button-c: var(--c-primary);
  --nav--button-c: var(--c-white);
  --nav--button-bg-c: var(--c-primary);
  --nav--button-border: 3px solid var(--c-white);
  --nav--button--hover-c: var(--c-primary);
  --nav--button--hover-bg-c: var(--c-white);
  --nav--button--hover-border: 3px solid var(--c-primary);
  
  /* == Footer == */
  --footer-bg-c: var(--c-grey);
  --footer--text-c: var(--c-primary);
  --footer--link-c: var(--c-white);
  --footer--link-fw: 400;
  --footer--link-tf: uppercase;
  --footer--link--active-c: var(--c-white);
  --footer--link--active-tf: uppercase;
  --footer--social-fill: var(--c-white);
  --footer--social--hover-bg-c: var(--c-white);
  --footer--social--hover-border: 2px solid var(--c-white);
  --footer--social--hover-fill: var(--c-primary);
  
  /* == Header-Slider == */
  --header-slider-h: 400px;
  --header-slider--bg-mobil-object-fit: cover;
  --header-slider--bg-mobil-object-position: unset;
  --header-slider--bg-desktop-object-position: center;
  
    /* Headline */
    --header-slider--headline-top: 12%;
    --header-slider--headline-left: 50%;
    --header-slider--headline-tf: unset;
    --header-slider--headline-fs: 30px;
    --header-slider--headline-fw: 700;
    --header-slider--headline-c: var(--c-white);
    --header-slider--headline-ts: 0px 3px 6px #0000008C;
  
    /* Text-Bild */
    --header-slider--text-image-display: none;
    --header-slider--text-image-w: 225px;
    --header-slider--text-image-top: 5%;
    --header-slider--text-image-right: 45%;
    --header-slider--text-image-left: 5%;
    
    /* Produkt-Bild */
    --header-slider--product-image-display: none;
    --header-slider--product-image-max-w: 432px;
    --header-slider--product-image-bottom: -20px;
    --header-slider--product-image-left: -55px;
    
    /* Content */
    --header-slider--content-min-w: 288px;
    --header-slider--content-max-w: 350;
    --header-slider--content-min-h: 288px;
    --header-slider--content-top: 40%;
    --header-slider--content-left: 50%;
    --header-slider--content-bg: #1D2224;
    --header-slider--content-bs: none;
    --header-slider--content-c: var(--c-black);
    --header-slider--content-p: 24px 16px;
    --header-slider--content-d: flex;
    --header-slider--content-border-r: 150px;
    --header-slider--content-border: 5px solid var(--c-white);
    
    /* Content mit Hintergrundbild */
    --header-slider--content--bg-min-h: 210px;
    
    /* Beschreibung */
    --header-slider--description-max-w: 200px;
    --header-slider--description--title-c: var(--c-primary);
    --header-slider--description--title-fs: var(--fs-h2);
    
    /* Button */
    --header-slider--button-top: 78%;
    --header-slider--button-left: 50%;
    
  /* == Content-Header == */
  --content-header--bg-h: 240px;
  --content-header--bg-bg-p: center;
  --content-header--title-bg-c: var(--c-white-transparent);
  --content-header--title-c: var(--c-primary);
  --content-header--title-fs: var(--fs-h1);
  --content-header--title-tf: uppercase;
  
  /* == 3-Kachel-Element == */
  --three-tiles-border-t: 4px solid var(--c-white);
  --three-tiles-border-b: 4px solid var(--c-white);
  --three-tiles--tiles-min-h: 235px;
  --three-tiles--tiles-border-w: 2px 0 2px 0;
  --three-tiles--tiles-border-c: var(--c-white);
  --three-tiles--text-bg-c: transparent;
  --three-tiles--text-max-w: 350px;
  --three-tiles--title-fs: 25px;
  
  /* == Text-Vier-Bilder-Kacheln == */
  --text-four-images--bottom-max-w: 1355px;
  --text-four-images--image-max-h: 275px;
  --text-four-images--title-fs: var(--fs-h1);
  --text-four-images--title-fw: var(--fw-h1);
  --text-four-images--title-c: var(--c-primary);
  
  /* == Button Primary == */
  --button-primary-c: var(--c-white);
  --button-primary-bg-c: var(--c-primary);
  --button-primary-ff: "Open Sans", sans-serif;
  --button-primary-border: 3px solid var(--c-white);
  --button-primary-border-radius: 0;
  --button-primary--hover-c: var(--c-primary);
  --button-primary--hover-bg-c: var(--c-white);
  --button-primary--hover-border: 3px solid var(--c-primary);
  
  /* == Promotion-Banner (App-Banner) == */
  --promotion-banner--phones-h: 391px;
  
  /* == Content-Text == */
  --content-text--title-tf: uppercase;
}

@media (min-width: 768px) {
  :root {
    /* == Navigation == */
    --nav--logo-h: 90px;
    --nav--logo-mt: 18px;
    --nav-h: 60px;
    
    /* == Header-Slider == */
    
      /* Text-Bild */
      --header-slider--text-image-w: 300px;
      --header-slider--text-image-top: 10%;
      --header-slider--text-image-right: unset;
      --header-slider--text-image-left: 15%;
      
      /* Content */
      --header-slider--content-left: 50%;
      --header-slider--content-top: 38%;
      
      /* Produkt-Bild */
      --header-slider--product-image-max-w: 640px;
      --header-slider--product-image-bottom: -22px;
      --header-slider--product-image-left: 0;
    
    /* == 3-Kachel-Element == */
    --three-tiles--tiles-border-w: 0 4px 0 4px;
    --three-tiles--tiles-min-h: 200px;
  }
}

@media (min-width: 1024px) {
  :root {
    /* == Typography == */
    --fs-base: 18px;
    --lh-base: 1;
    
    --fs-h1: 36px;
    --lh-h1: 1;
    
    --fs-h2: 25px;
    --lh-h2: 1;
    
    --fs-h3: 20px;
    --lh-h3: 1;
    
    --fs-h4: 20px;
    --lh-h4: 1;
    
    /* == Navigation == */
    --nav-h: 78px;
    --nav-p: 8px 30px 8px 20px;
    --nav-bb: 5px solid var(--c-black);
    --nav--logo-h: 100px;
    --nav--logo-mt: 26px;
    --nav--sticky-logo-p: 10px 28px;
    --nav--sticky-logo-w: auto;
    --nav--sticky-logo-h: 90px;
    --nav--sticky-logo-mt: 16px;
    
    /* == Header-Slider == */
    --header-slider-h: 550px;
    
      /* Headline */
      --header-slider--headline-fs: 55px;
    
      /* Text-Bild */
      --header-slider--text-image-w: 375px;
      
      /* Produkt-Bild */
      --header-slider--product-image-max-w: 722px;
      --header-slider--product-image-bottom: 20px;
      --header-slider--product-image-left: -165px;
      
      /* Content */
      --header-slider--content-max-w: 900px;
      --header-slider--content-top: 50%;
      --header-slider--content-left: 70%;
      
      /* Content mit Hintergrundbild */
      --header-slider--content--bg-min-h: 260px;
      
      /* Beschreibung */
      --header-slider--description--title-fs: var(--fs-h2);

      /* Button */
      --header-slider--button-top: 80%;
    
    /* == Content-Header == */
    --content-header--bg-h: 300px;
    
    /* == 3-Kachel-Element == */
    --three-tiles--text-max-h: 450px;
    --three-tiles--tiles-min-h: 280px;
  }
}

@media (min-width: 1120px) {
  :root {
    /* == Navigation == */
    --nav--menu-fw: 700;
    --nav--menu--active-fw: 700;
    --nav--menu--active-c: var(--c-white);
    --nav--menu--active-bg-c: var(--c-primary);
    --nav--menu--active-border-r: 6px;
    --nav--menu--active-td: none;
    --nav--menu--active-p: 4px 4px;
  }
  
}

@media (min-width: 1200px) {
  :root {
    /* == Header-Slider == */
    --header-slider-h: 700px;
    
      /* Text-Bild */
      --header-slider--text-image-w: 480px;
      --header-slider--text-image-left: 46%;
      --header-slider--text-image-top: 5%;
      
      /* Produkt-Bild */
      
      /* Content */
      --header-slider--content-max-w: 500px;
      
      /* Content mit Hintergrundbild */
      --header-slider--content--bg-min-h: 265px;
      
      /* Beschreibung */
      --header-slider--product-image-left: -160px;
      
      /* Button */
      --header-slider--button-left: 50%;
      
    /* == Content-Header == */
    --content-header--bg-h: 360px;
  }
}

@media (min-width: 1440px) {
  :root {
    /* == Navigation == */
    --nav-h: 96px;
    --nav-p: 11px 125px 11px 85px;
    --nav-bb: 8px solid var(--c-black);
    --nav--logo-w: auto;
    --nav--logo-h: 106px;
    --nav--sticky-logo-w: auto;
    --nav--sticky-logo-h: 96px;
    --nav--logo-mt: 18px;
    --nav--sticky-logo-mt: 8px;
    
    /* == Header-Slider == */
    
      /* Text-Bild */
      --header-slider--text-image-display: block;
      
      /* Produkt-Bild */
      --header-slider--product-image-display: block;
    
    /* == Content-Header == */
    --content-header--bg-h: 400px;
      
  }
}

@media (min-width: 1600px) {
  :root {
    /* == Navigation == */
    --nav--logo-h: 151px;
    --nav--logo-mt: 60px;
    --nav--sticky-logo-h: 106px;
    --nav--sticky-logo-mt: 17px;
    /* == Header-Slider == */
    --header-slider-h: 700px;
    
      /* Text-Bild */
      --header-slider--text-image-w: 475px;
      --header-slider--text-image-left: 50%;
      --header-slider--text-image-top: 8%;
      
      /* Produkt-Bild */
      --header-slider--product-image-bottom: 30px;
      --header-slider--product-image-left: 85px;
      
      /* Content */
      --header-slider--content-max-w: 550px;
      --header-slider--content-top: 55%;
      --header-slider--content-left: 65%;
      
      /* Content mit Hintergrundbild */
      --header-slider--content--bg-min-h: 265px;
      
      /* Button */
      --header-slider--button-top: 82%;
      
    /* == 3-Kacheln == */
    --three-tiles--tiles-min-h: 355px;
    --three-tiles--text-max-w: 550px;
  }
}