@charset "utf-8";
/* EIGENE CSS Document */

*{box-sizing: border-box;}

/*CI Farbenwelten
Textfarbe: #474747
dunkelgrau: #4c4c4c
hellgrau: #d8d8d8
rot: #e4032e
blau: #003170

Font: DIN Pro*/

/* ------------ Fade-In ------------ */

     .fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
  }
  @keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
  } 

/* ------------ Fade-In left------------ */

      .fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes fadeInLeft {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  }
  @keyframes fadeInLeft {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  } 

/* ------------ Fade-In ------------ */

.hidden-div {
  opacity: 0;
  transition: opacity 1.5s ease-out;
}

.fadeIn {
	opacity: 1;}



/* ------------ Slide-In ------------ */

  .slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  }
  @keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  } 

/* ------------ Eigene Fonts ------------ */


@font-face {
  font-family: 'DIN Pro Regular';
  src: url("../fonts/dinpro.otf");
}
	
@font-face {
  font-family: 'DIN Pro Bold';
  src: url("../fonts/dinpro_bold.otf");
}

@font-face {
  font-family: 'Oregano';
  src: url("../fonts/Oregano-Regular.ttf");
}

/* ------------ NL POPUP ------------ */

.h2-newsletter {margin-top: 3rem;
	margin-bottom: 2rem;
	color: #fff;
}

#newsletterPopup {
	background-image: url('../img/newsletter-hg.jpg');
    background-size: cover; /* Stellt sicher, dass das Bild den gesamten Hintergrund abdeckt */
    background-position: center; /* Zentriert das Bild */
	display: none;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 40%;
	height: 400px;
	padding: 20px;
	/*background: linear-gradient(to  bottom right, #3680df , #140070);*/
	border: 3px solid #fff;
	z-index: 10;}

#closeBtn {
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 20px;
	z-index: 10;
	cursor: pointer;
	width: 30px;
	height: 30px;
	background-color: #fff;
	color: #4c4c4c;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;}

.nl-container {display: flex;
	flex-direction: column;
}

.email {width: 70%; 
		padding: 10px; 
	    margin: 10px 0;
align-self: center;}

.submit {width: 100%; padding: 10px;}




/* ------------ BUTTONS ------------ */

/* + Button  */

.icon-plus svg {
  transition: fill 0.3s;
}

.icon-plus:hover svg,
.icon-plus.expanded svg {
  fill: #003170;
}

.load-map-button {                  
          
  background-color: #474747;
  font-family: "DIN Pro Regular", verdana, arial;
  border-radius: 0px;
  border: 0;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inherit;
  font-size: 18px;
  white-space: nowrap;
  line-height: 24px;
  min-height: 56px;
  min-width: 120px;
  padding: 16px 20px;
  text-align: center;
  margin: auto;
  margin-top: 5rem;
  margin-bottom: -15rem;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: baseline;
  transition: all .2s cubic-bezier(.22, .61, .36, 1);}
        
.load-map-button:hover {
  background-color: #001463;
  }

@media (min-width: 768px) {
  .load-map-button {
    padding: 16px 44px;
    min-width: 150px;
	    }
}







.map-footer {
  display: none;
  width: 100%;
  height: 450px;}



/* MEHR ERFAHREN 1 */

.button-1 {
  background-color: #474747;
  font-family: "DIN Pro Regular", verdana, arial;
  border-radius: 0px;
  border: 0;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inherit;
  font-size: 18px;
	white-space: nowrap;
  line-height: 24px;
   min-height: 56px;
  min-width: 120px;
  padding: 16px 20px;
  text-align: center;
    margin: auto;
	margin-top: 5rem;
	margin-bottom: 6rem;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: baseline;
  transition: all .2s cubic-bezier(.22, .61, .36, 1);
}

.button-1:hover {
  background-color: #001463;
  }

@media (min-width: 768px) {
  .button-1 {
    padding: 16px 44px;
    min-width: 150px;
	    }
}

/* MEHR ERFAHREN RECHTS */

.button-rechts {
	white-space: nowrap;
  background-color: #474747;
  font-family: "DIN Pro Regular", verdana, arial;  
  border: 0;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inherit;
  font-size: 18px;
  line-height: 24px;
  margin: 0;
  min-height: 56px;
  min-width: 120px;
  padding: 16px 20px;
  text-align: center;   
  margin-top: 5rem;
  margin-bottom: 5rem;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: baseline;
  transition: all .2s cubic-bezier(.22, .61, .36, 1);
}

.button-1:hover {
  background-color: #001463;
  }

@media (min-width: 768px) {
  .button-1 {
    padding: 16px 44px;
    min-width: 150px;
  }
}

/* WEITERE INFOS */

.button-2 {
	white-space: nowrap;
  background-color: #474747; 
  font-family: "DIN Pro Regular", verdana, arial;
  border: 0;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inherit;
  font-size: 18px;
  line-height: 24px;
   min-height: 56px;
  min-width: 120px;
  padding: 16px 20px;
  text-align: center;
    margin: auto;
	margin-top: 3rem;
	margin-bottom: 3rem;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: baseline;
  transition: all .2s cubic-bezier(.22, .61, .36, 1);
}

.button-2:hover {
  background-color: #001463;
  }



@media (min-width: 768px) {
	
	
	
	
  .button-2 {
    padding: 16px 30px;
    min-width: 150px;
  }
}


.button-3 {
	white-space: nowrap;
	background-color: #fff; 
	font-family: "DIN Pro Regular", verdana, arial;
	border: 0;
	box-sizing: border-box;
	color: #4c4c4c;
	cursor: pointer;
	display: inherit;
	font-size: 18px;
	line-height: 24px;
    min-height: 56px;
    min-width: 120px;
    padding: 16px 20px;
    text-align: center;
    margin: auto;
	margin-top: 1rem;
	margin-bottom: 3rem;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: baseline;
    transition: all .2s cubic-bezier(.22, .61, .36, 1);
}

.button-3:hover {	
  background-color: #d8d8d8;
  }


.button-newsletter {
  white-space: nowrap;
  background-color: #003170; 
  font-family: "DIN Pro Regular", verdana, arial;
  border: 0;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inherit;
  font-size: 18px;
  line-height: 24px;
  min-height: 56px;
  min-width: 120px;
  padding: 16px 20px;
  text-align: center;
  margin: auto;
  margin-top: 1rem;
  margin-bottom: 3rem;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: baseline;
  transition: all .2s cubic-bezier(.22, .61, .36, 1);
}

.button-newsletter:hover {
	
  background-color: #d8d8d8;
  }


.button-container  {
	
  display: flex;
  justify-content: center;
  gap: 2rem; /* Abstand zwischen den Buttons */
  
}

.button-container .button-1  {
	white-space: nowrap;
  margin: 1rem;
	margin-top: 5rem;
	margin-bottom: 4rem;
  
}


@media (min-width: 768px) {
  .button-2 {
    padding: 16px 30px;
    min-width: 150px;
  }
}


/* ------------ Font für Body, H1, H2, usw.------------ */



.plus-texte {display: none;}

.text-zentriert {
	font-size: 1.125rem;
	font-family: 'DIN Pro Regular';
	line-height: 1.5rem;
	color: #4c4c4c;
	text-align: center;
	margin-bottom: 1.5rem;}



.align-left {text-align:left;}

body {
letter-spacing: 0.03125rem;
font-family: 'DIN Pro Regular';
	
}


h2 {
	font-size: 2.1875rem;
	font-family: 'DIN Pro Bold';
	line-height: 4.0625rem;
	color: #4c4c4c;
	text-align: center;
	margin-bottom: 3rem;
	margin-top: 2rem;
	}

h3 {position: relative;
	
	font-size: 1.6rem;
	line-height: 1.9rem;
	font-family: 'DIN Pro Regular';
	font-weight: 500;
	color: #4c4c4c;
	text-align: center;
text-transform: uppercase;
margin-bottom: 2rem;
margin-top: 2rem;}



/* ------------ Navbar CSS ------------ */

.bg-dark {
	
	background-color: #fff !important; 
}

.fixed-top {
	position: sticky;
	top: 0;
	right: 0;
	left: 0;
	z-index: 1030;
}

.nav-link {
  --a: -45deg; /* control the angle */
  --t: .23em; /* thickness of the underline */
  --i: 0%; /* initial value for the underline length */
  color: #4c4c4c;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, .3s;
  font-size: 16px;
  cursor: pointer;
  
}

.nav-link span {
  --_s: calc(var(--t) * cos(var(--a)));
  background:
    linear-gradient(var(--a), #0000 var(--_s), currentColor 0 calc(100% - var(--_s)), #0000 0)
    bottom / var(--i, 100%) var(--t) no-repeat;
  padding: 0 .25em calc(var(--t) + .1em);
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  transition: .2s;
}

.nav-link:hover, .nav-link:focus {
  color: #e4032e;
  font-family: 'DIN Pro Bold';
  letter-spacing: 1px;
}

.nav-link:hover span {
  --i: 100%;
}

.navbar-nav .show > .nav-link, .navbar-nav .nav-link.active {
  --i: 100%;
  color: #e4032e;
}

.navbar-nav .show > .nav-link span, .navbar-nav .nav-link.active span {
  background:
    linear-gradient(var(--a), #0000 var(--_s), currentColor 0 calc(100% - var(--_s)), #0000 0)
    bottom / 100% var(--t) no-repeat;
}

.navbar-expand-sm .navbar-nav .nav-link {
    padding-right: 20px;
    padding-left: 20px;
}

.navbar-expand-lg .navbar-nav .nav-link {
	padding-right: 20px;
	padding-left: 20px;
}

/* ------------ Slider ------------ */


#carouselExampleIndicators.carousel-fade .carousel-item {
    opacity: 1; /* Opazität leicht reduziert während des Übergangs */
    transition: opacity 0.5s ease-in-out;
}
#carouselExampleIndicators.carousel-fade .carousel-item.active {
    opacity: 1; /* Opazität auf 100%, wenn aktiv */
}
	
.carousel-indicators {	
	bottom: -60px;
	gap: 0.5rem;
}
	
.carousel-indicators [data-bs-target] {
	background-color: #000;
	width: 13px;
	height: 13px;
	border-radius: 50%;
}
	
.carousel-indicators .active {background-color: #e4032f;}
	
.carousel-control-prev-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23818283' stroke='%23818283' stroke-width='2'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}	

.carousel-control-next-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23818283' stroke='%23818283' stroke-width='2'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* ------------ Weisses Fläche header ------------ */

.weisseck {
    display: flex;
    flex-direction: column;
    justify-content: left;
	position: absolute;
    align-items: left;
    padding: 1% 2.5% 1% 11%;	
    background-color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Optional: füge einen Schatten hinzu */
    box-sizing: border-box; /* Inklusive Padding in der Größe */
    width: auto; /* Automatische Breite an den Inhalt anpassen */
    height: auto; /* Automatische Höhe an den Inhalt anpassen */
    max-width: 100%; /* Begrenze die maximale Breite */
	max-height: 100%;
	z-index: 10;
	margin-top: 10%;}

.h1-weiss {
	padding-top: 10px;
	font-size: 3.75rem;
	font-family: 'DIN Pro Bold';
	line-height: 4.0625rem;
	color: #4c4c4c;
	text-align: left;}

.subheadline-weiss {
	font-size: 1.875rem;
	font-family: 'DIN Pro Regular';
	color: #e4032e;
	text-align: left;
	white-space: nowrap;}

	  
/* ------------ Header Bild ------------ */


.bg-primary {
background-image: url("../img/teaser_kontakt_01.jpg");
width: 100%;
height: 550px; /* optional: passt die Höhe an den gesamten Viewport an */
background-size: cover; /* skaliert das Bild, um den gesamten Container abzudecken */
background-position: top; /* zentriert das Bild */
background-repeat: no-repeat; /* verhindert das Wiederholen des Bildes */
}


/* ------------ 1. BODYFORCE  ------------ */


#bodyforce {margin-top: 3rem;
margin-bottom: 3rem;}


/* ------------ 2. DESIGN FUNKTIONS VORTEILE  ------------ */


section {
	padding-top: 0rem;
	padding-bottom: 0rem;
}

.custom-img {
      height: 500px;
      object-fit: cover;
      width: 100%;
    }
.overlay-container {
      position: relative;
    }
  
.overlay-left {
      position: absolute;
      top: 50%;
      left: 5%;
      transform: translateY(-50%);
      width: 65%;
      height: 90%;
      background-color: white;
      opacity: 0.8;
      clip-path: polygon(0 0, 90% 0, 100% 100%, 0 100%);
    }   

.overlay-right {
      position: absolute;
      top: 50%;
      right: 5%;
      transform: translateY(-50%);
      width: 65%;
      height: 90%;
      background-color: white;
      opacity: 0.8;
      clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
	    }
   

/* ------------ 2. DESIGN FUNKTIONS VORTEILE - CONATINER RECHTS ------------ */


.overlay-headline-rechts {
	position: absolute;
      top: 10%;
      right: 17%;      
      padding: 10px;
	font-size: 2.2rem;
	line-height: 2.5rem;
      }

.icontext-container-rechts{
	width: 320px;
	height:auto;
    position: absolute;	
    top: 38%;
    right: 15%;
    display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
    padding: 10px;
	border-radius: 5px;
    }

.icons-und-texte-rechts {
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	text-align: right;
	flex-wrap: nowrap;
}

.icontexte-rechts {
font-family: "Oregano", verdana, sans-serif;
	color: #4c4c4c;
font-size: 1.6875rem;
margin-right: 20px;
	
}

/* ------------ 2. DESIGN FUNKTIONS VORTEILE - CONATINER LINKS ------------ */

.overlay-headline-links {position: absolute;
      top: 10%;
      left: 17%;
      padding: 10px;
	font-size: 2.2rem;
	line-height: 2.5rem;
      }

.icontext-container-links{
	width: 320px;
	height:auto;
    position: absolute;
	top: 38%;
    left: 15%;
    display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
    padding: 10px;
	border-radius: 5px;
    }

.icons-und-texte-links {
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	text-align: left;
	flex-wrap: nowrap;
}

.icontexte-links {
font-family: "Oregano", verdana, sans-serif;
	color: #4c4c4c;
font-size: 1.6875rem;
margin-left: 20px;
	
}

.icons-links {opacity: 0.8;}


/* ------------ 3. TECHNOLOGIE COMFORT ------------ */


.tech-text-zentriert {
	font-size: 1.125rem;
	font-family: 'DIN Pro Regular';
	line-height: 1.5rem;
	color: #4c4c4c;
	text-align: center;
	margin-bottom: 1.5rem;}


.tech-text-zentriert-768 {
	font-size: 1.125rem;
	font-family: 'DIN Pro Regular';
	line-height: 1.5rem;
	color: #4c4c4c;
	text-align: center;
	margin-bottom: 1.5rem;}

.tech-text {
  --a: -45deg; /* control the angle */
  --t: .23em; /* thickness of the underline */ 
  color: #e4032e;}

.tech-text span {
  --_s: calc(var(--t)*cos(var(--a)));
  background:
    linear-gradient(var(--a),#0000 var(--_s),currentColor 0 calc(100% - var(--_s)),#0000 0) 
    bottom/var(--i,90%) var(--t) no-repeat;
  padding: 0 .25em calc(var(--t) + .1em);
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  transition: .3s;
  cursor: pointer;}

.tech-text:hover span {
  --i: 100%;}


.h2-techcomfort {margin-top: 4rem;
	color: #474747;
}

.h2-beste-materialien {margin-top: 3rem;
	color: #fff;
}

.parallax {
    background-image: url("../img/blue-overall.jpg"); /* Pfad zu deinem Hintergrundbild */
    background-size: cover; /* Deckt den gesamten Container ab */
    background-position: center; /* Zentriert das Hintergrundbild */
    padding: 20px; /* Optional: fügt etwas Innenabstand hinzu, damit der Text nicht direkt am Rand klebt */
	height: 1000px;
	overflow: hidden;
	
  /* Create the parallax scrolling effect */
  background-attachment: fixed;  
  background-repeat: no-repeat; 
}

.zwischenraum {height: 40px;}


/* ------------ 4. BESTE MATERIAL ------------ */

.h3-weiss {color: #fff;
}

.text-zentriert-weiss {font-size: 1.125rem;
	font-family: 'DIN Pro Regular';
	line-height: 1.6rem;
	color: #fff;
	text-align: center;
	margin-bottom: 1.5rem;}

.glow {text-shadow: 0 0 30px #7ca2ff,
             0 0 30px #9831ff,
             0 0 30px #ac59ff;}


/* ------------ 5. DIE KOLLEKTION ------------ */


.h-100 p-5 text-white bg-dark rounded-3 {align-content: center;}

.bg-light {

  background-color: #fff !important;
}
.p-5 {
  padding: 3rem !important;
}
.h-100 {
  height: 100% !important;
}
.border {
	border: none !important;
text-align: center;}

.kollektion {font-size: 1.6rem;
	line-height: 1.9rem;
	font-family: 'DIN Pro Regular';
	font-weight: 500;
	color: #4c4c4c;
	text-align: center;
text-transform: uppercase;
margin-bottom: 2rem;
margin-top: 4rem;}

/* ------------ 5. FOOTER ------------ */

.map-footer {display: flex;
	flex-direction: column;}

.py-5  {background-color: #00326f;
}

.footer-links {
    color: #fff;
    text-align: center;
	text-transform: uppercase;}

.footer-links a {
    margin: 0 10px;
    color: #fff;
    text-decoration: none;
    font-family: "DIN Pro Regular", verdana, sans-serif;}

.footer-icons {
    margin-top: 10px;
    display: flex;
    justify-content: center;}

.footer-icons img {
    height: 40px; /* Höhe der Icons festgelegt */
    margin: 1rem 0.5rem;
    opacity: 0.8;}

.footer-icons img:hover {
	opacity: 1;}

.footer-links a:hover {font-weight: 700;}

/* ------------ FORM ------------ */

form .button-1 {margin-top: 4rem;}


.form-check {margin-top: 2rem;}



.form-label {
font-size: 0.8rem;
margin-bottom: 0.3rem;
}

form { margin: auto;
}
 
.formula {padding: 0 10% 0 10%}

.form-control {
            border: 1px solid #4c4c4c;
            padding: 10px;}

.form-control:hover {
            border-color: #e4032e;
			border-width: 2px;
			transition: border-color 0.2s ease;}

        
/* ------------ MEDIEN QUERIES ------------ */


@media (max-width: 1440px) {
	
	#newsletterPopup {
            display: none;
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 60%;
            height: 400px;
            padding: 20px;
            border: 3px solid #fff;
            z-index: 10;	
        }	
	
    .h1-weiss {
        font-size: 2.75rem;
		line-height: 3.0625rem;
    }
	.subheadline-weiss {
        font-size: 1.75rem;
		line-height: 2.0625rem;
		margin-top: 0px; }
	
	.overlay-left {
	position: absolute;
	top: 50%;
	left: 5%;
	transform: translateY(-50%);
	width: 70%;
	height: 90%;
	background-color: white;
	opacity: 0.8;
	clip-path: polygon(0 0, 90% 0, 100% 100%, 0 100%);}
	
	.overlay-right {
	position: absolute;
	top: 50%;
	right: 5%;
	transform: translateY(-50%);
	width: 70%;
	height: 90%;
	background-color: white;
	opacity: 0.8;
	clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);}
}

@media (max-width:1280px) {
	
	.formula {padding: 0 10% 0 10%}
	
		#newsletterPopup {
            display: none;
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 50%;
            height: 450px;
            padding: 20px;
            border: 3px solid #fff;
            z-index: 10;	
        }	
	
    .h1-weiss {
        font-size: 2.75rem;
		line-height: 3.0625rem;}
	
	 .subheadline-weiss {
        font-size: 1.75rem;
		line-height: 1.7rem;
		margin-top: 5px;}
	
.overlay-left {
	position: absolute;
	top: 50%;
	left: 5%;
	transform: translateY(-50%);
	width: 75%;
	height: 90%;
	background-color: white;
	opacity: 0.8;
	clip-path: polygon(0 0, 90% 0, 100% 100%, 0 100%);}
	
	.overlay-right {
	position: absolute;
	top: 50%;
	right: 5%;
	transform: translateY(-50%);
	width: 75%;
	height: 90%;
	background-color: white;
	opacity: 0.8;
	clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);}
	
	
	.carousel-indicators [data-bs-target] {
	width: 11px;
	height: 11px;}
	
	h2 {
	font-size: 2.1875rem;
	font-family: 'DIN Pro Bold';
	line-height: 2.7rem;
	color: #4c4c4c;
	text-align: center;
	margin-bottom: 3rem;
	margin-top: 1.4rem;}
	
}

@media (max-width: 1024px) {
	
	
	
	#newsletterPopup {
            display: none;
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 70%;
            height: 450px;
            padding: 20px;
            border: 3px solid #fff;
            z-index: 10;	
        }	
	
	
    .h1-weiss {
        font-size: 2.35rem;
		line-height: 2.5rem;  }
	
	 .subheadline-weiss {
        font-size: 1.5rem;
		line-height: 1.3rem;
		margin-top: 5px;  }
	
	.nav-link {		
	padding-top: 0;
	text-align: center;	}
	
	.overlay-left {
	position: absolute;
	top: 50%;
	left: 7%;
	transform: translateY(-50%);
	width: 55%;
	height: 90%;
	background-color: white;
	opacity: 0.8;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}
	
	.overlay-right {
	position: absolute;
	top: 50%;
	right: 7%;
	transform: translateY(-50%);
	width: 55%;
	height: 90%;
	background-color: white;
	opacity: 0.8;
	clip-path: polygon(0% 0, 100% 0, 100% 100%, 0 100%);}
	
	.overlay-headline-links {
	position: absolute;
	top: 10%;
	left: 15%;
	padding: 10px;
	font-size: 2.2rem;
	line-height: 2.5rem;
	text-align: left;
}
	
	.icontext-container-rechts {
	width: 320px;
	height: auto;
	position: absolute;
	top: 38%;
	right: 15%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	padding: 10px;
	border-radius: 5px;
}
.overlay-headline-rechts {
	position: absolute;
	top: 10%;
	right: 15%;
   	padding: 10px;
	font-size: 2.2rem;
	line-height: 2.5rem;
	text-align: right;}
	
		.parallax {
	height: auto;}
	
.zwischenraum {
	height:0;}
	
.button-1 {	
	margin-top: 2rem; 
	margin-bottom: 4rem;}
	
.kollektion {	
	margin-top: 0rem;}
	
.p-5 {
	padding: 2rem 3rem !important;
}
	
}

@media (max-width: 980px) {
	
		
	#newsletterPopup {
            display: none;
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 70%;
            height: 450px;
            padding: 20px;
            border: 3px solid #fff;
            z-index: 10;	
        }	
	
	.col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
	}}
	
@media  (max-width: 768px) {

.formula {padding: 0 5% 0 5%}

#newsletterPopup {
            display: none;
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 80%;
            height: 450px;
            padding: 20px;
            border: 3px solid #fff;
            z-index: 10;	
        }	
	
	
.logo {	
	width: 50%;}
	
.subheadline-weiss {
        font-size: 1.2rem;
		line-height: 1.2rem;
		margin-top: 5px; }
	
.weisseck {        
		margin-top: 5%;
		padding: 1% 2.5% 1% 9%; }
	
.h1-weiss {
        font-size: 2.1rem;
		line-height: 2.2rem; }
	
.nav-link {		
	padding-top: 0;
	text-align: center;	}
	
.carousel-indicators [data-bs-target] {
	width: 10px;
	height: 10px;}
	
.carousel-indicators {
	bottom: -50px;}	
	
.overlay-left {
	position: absolute;
	top: 50%;
	left: 7%;
	transform: translateY(-50%);
	width: 85%;
	height: 90%;
	background-color: white;
	opacity: 0.8;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}
	
	
.overlay-right {
	position: absolute;
	top: 50%;
	right: 8%;
	transform: translateY(-50%);
	width: 85%;
	height: 90%;
	background-color: white;
	opacity: 0.8;
	clip-path: polygon(0% 0, 100% 0, 100% 100%, 0 100%);}
	
		
.p-5 {
	padding: 2rem !important;}
	
.parallax {
	height: auto;}
	
.zwischenraum {
	height:0;}
	
	.button-1 {	
	margin-top: 2rem; 
	margin-bottom: 4rem;}
	
}


@media  (max-width: 600px) {
	
	.button-container {
		margin-top: -2rem;
}
	
.plus-texte {display: block;}
.kein-plus {display: none;}
.icon-plus svg {
	margin-bottom: 1rem;
}
	
#newsletterPopup {
            display: none;
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 80%;
            height: 500px;
            padding: 20px;
            border: 3px solid #fff;
            z-index: 10;	
        }		
	
.weisseck {       
		margin-top: 1%;
		padding: 1% 2.5% 1% 6%;
    }
	
.nav-link {		
	padding-top: 0;
	text-align: center;
	}
	
.subheadline-weiss {
        font-size: 1.0rem;
		line-height: 1.2rem;
		margin-top: 0px;
    }
	
.h1-weiss {
        font-size: 1.6rem;
		line-height: 1.7rem;
    }
	
.icontext-container-links {
	width: 320px;
	height: auto;
	position: absolute;
	top: 38%;
	left: 15%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	padding: 10px;
	border-radius: 5px;}
	
.icontext-container-rechts {
	width: 320px;
	height: auto;
	position: absolute;
	top: 38%;
	right: 15%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	padding: 10px;
	border-radius: 5px;
}
	
h3 {
	margin-top: 0rem;}
	

		.parallax {
	height: auto;
	margin-top: 3rem;}
	
	.zwischenraum {
	height:0;
}
	
}