:root {
  /* == Colors == */
  --c-primary: #bd1d1d;
  --c-secondary: #000;
  --c-white: #ffffff;
  --c-white-transparent: #FFFFFFCC;
  --c-white-35: #ffffff59;
  --c-black: #000000;
  --c-grey: #f2f2f2;  
  
  /* == 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: "PT Sans Narrow", sans-serif;
  --fw-h1: 700;
  --lh-h1: 1;
  
  --fs-h2: 28px;
  --ff-h2: "PT Sans Narrow", sans-serif;
  --fw-h2: 700;
  --lh-h2: 1;
  
  --fs-h3: 24px;
  --ff-h3: "PT Sans Narrow", sans-serif;
  --fw-h3: 700;
  --lh-h3: 1;
  
  --fs-h4: 20px;
  --ff-h4: "PT Sans Narrow", sans-serif;
  --fw-h4: 700;
  --lh-h4: 1;
  
  /* == Navigation == */
  --nav-h: 55px;
  --nav-p: 0 16px;
  --nav-bb: 3px solid var(--c-secondary);
  --nav-bg-c: var(--c-white);
  --nav--logo-w: 70px;
  --nav--logo-h: 70px;
  --nav--logo-mt: 20px;
  --nav--sticky-logo-w: 100px;
  --nav--sticky-logo-h: 84px;
  --nav--sticky-logo-mt: 30px;
  --nav--menu--active-bg-c: transparent;
  --nav--menu--active-c: var(--c-primary);
  --nav--menu--hover-c: var(--c-primary);
  --nav--menu--active-td: underline;
  --nav--menu--active-td-offset: 3px;
  --nav--menu--desktop-breakpoint: 1120px;
  
  /* == Footer == */
  --footer-bg-c: var(--c-secondary);
  --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: left;
  
    /* Text-Bild */
    --header-slider--text-image-w: 200px;
    --header-slider--text-image-top: 5%;
    --header-slider--text-image-right: 45%;
    --header-slider--text-image-left: 15%;
    
    /* Produkt-Bild */
    --header-slider--product-image-max-w: 500px;
    --header-slider--product-image-bottom: 0;
    --header-slider--product-image-left: -150px;
    
    /* Content */
    --header-slider--content-min-w: 250px;
    --header-slider--content-max-w: 350px;
    --header-slider--content-min-h: 90px;
    --header-slider--content-top: 50%;
    --header-slider--content-left: 50%;
    --header-slider--content-bg: var(--c-white);
    --header-slider--content-bs: 10px 10px 0 0 var(--c-primary);
    --header-slider--content-c: var(--c-white);
    
    /* Content mit Hintergrundbild */
    --header-slider--content--bg-min-h: 210px;
    
    /* Beschreibung */
    --header-slider--description-max-w: 220px;
    --header-slider--description--title-c: var(--c-white);
    --header-slider--description--title-fs: var(--fs-h2);
    
    /* Button */
    --header-slider--button-top: 75%;
    --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--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: var(--c-white-35);
  --three-tiles--text-max-w: 300px;
  
  /* == 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-fs: "PT Sans Narrow", sans-serif;
  --button-primary-border: 3px solid var(--c-white);
  --button-primary-border-radius: 5px;
  --button-primary--hover-c: var(--c-primary);
  --button-primary--hover-bg-c: var(--c-white);
  --button-primary--hover-border: 3px solid var(--c-primary);
}

@media (min-width: 768px) {
  :root {
    /* == 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%;
      
      /* Produkt-Bild */
      --header-slider--product-image-max-w: 540px;
      --header-slider--product-image-bottom: 0;
      --header-slider--product-image-left: -75px;
    
    /* == 3-Kachel-Element == */
    --three-tiles--tiles-border-w: 0 4px 0 4px;
    --three-tiles--tiles-min-h: 300px;
  }
}

@media (min-width: 1024px) {
  :root {
    /* == Typography == */
    --fs-base: 16px;
    --lh-base: 1;
    
    --fs-h1: 36px;
    --lh-h1: 1;
    
    --fs-h2: 32px;
    --lh-h2: 1;
    
    --fs-h3: 28px;
    --lh-h3: 1;
    
    --fs-h4: 24px;
    --lh-h4: 1;
    
    /* == Navigation == */
    --nav-h: 78px;
    --nav-p: 8px 30px 8px 20px;
    --nav-bb: 5px solid var(--c-secondary);
    --nav--logo-w: 130px;
    --nav--logo-h: 110px;
    --nav--logo-mt: 55px;
    
    /* == Header-Slider == */
    --header-slider-h: 550px;
    
      /* Text-Bild */
      --header-slider--text-image-w: 305px;
      
      /* Produkt-Bild */
      --header-slider--product-image-max-w: 900px;
      --header-slider--product-image-bottom: -100px;
      --header-slider--product-image-left: -250px;
      
      /* Content */
      --header-slider--content-max-w: 900px;
      --header-slider--conent-left: 35%;
      --header-slider--content-top: 60%;
      
      /* Content mit Hintergrundbild */
      --header-slider--content--bg-min-h: 220px;
      
      /* Beschreibung */
      --header-slider--description-max-w: 250px;

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

@media (min-width: 1200px) {
  :root {
    /* == Header-Slider == */
    --header-slider-h: 700px;
    
      /* Text-Bild */
      --header-slider--text-image-w: 400px;
      --header-slider--text-image-left: 25%;
      --header-slider--text-image-top: 15%;
      
      /* Produkt-Bild */
      --header-slider--product-image-max-w: 1000px;
      --header-slider--product-image-left: -145px;
      --header-slider--product-image-bottom: -70px;
      
      /* Content */
      --header-slider--content-max-w: 500px;
      --header-slider--content-left: 58%;
      --header-slider--content-top: 60%;
      
      /* Content mit Hintergrundbild */
      --header-slider--content--bg-min-h: 200px;
      
      /* Beschreibung */
      --header-slider--description-max-w: 257px;
      
      /* Button */
      --header-slider--button-top: 80%;
      --header-slider--button-left: 65%;
      
    /* == 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-secondary);
    --nav--logo-w: 225px;
    --nav--logo-h: 225px;
    --nav--sticky-logo-w: 140px;
    --nav--sticky-logo-h: 140px;
    --nav--logo-mt: 138px;
    --nav--sticky-logo-mt: 52px;
    
    /* == Content-Header == */
    --content-header--bg-h: 400px;
  }
}

@media (min-width: 1600px) {
  :root {
    /* == Header-Slider == */
    --header-slider-h: 700px;
    
      /* Text-Bild */
      --header-slider--text-image-w: 745px;
      --header-slider--text-image-left: 28%;
      --header-slider--text-image-top: 15%;
      
      /* Produkt-Bild */
      --header-slider--product-image-bottom: -50px;
      --header-slider--product-image-left: 150px;
      
      /* Content */
      --header-slider--content-max-w: 550px;
      --header-slider--content-top: 58%;
      --header-slider--content-left: 76%;
      
      /* Content mit Hintergrundbild */
      --header-slider--content--bg-min-h: 225px;
      
      /* Button */
      --header-slider--button-top: 80%;
      --header-slider--button-left: 65%;
  }
}