@charset "UTF-8";

/*********************************/
/* HEADERBILDTEXT */
/*********************************/

.textover-container {
  position: relative;
  text-align: center;
  color: #FFF;
	font-size: 35px; font-size: 3.5rem;
	text-transform: uppercase; 
	letter-spacing: 0.05px;
}
.bottom-right {
  position: absolute;
  bottom: 10px;
  right: 18px;
  text-shadow: 3px 5px 10px rgba(79,67,52, 0.5);
}

@media screen and (max-width: 768px) { /* einspaltig */
	.textover-container {
		font-size: 30px; font-size: 3.0rem;
		}
	}
@media screen and (max-width: 450px) { /* linksbuendig */
	.textover-container {
		font-size: 25px; font-size: 2.5rem;
	}
}

@media screen and (max-width: 300px) { /* klein */
	.textover-container {
		font-size: 20px; font-size: 2.0rem;
	}
}



/*********************************/
/* Breadcrumb */
/*********************************/

.breadcrumb {
	  position: fixed;
	  top: 135px;
	
      width: 100%;      
      padding: 5px 18px;
  	  font-size: 13px;
	  background: #fff;
    }

    .breadcrumb a {
      text-decoration: none;
  	  color: #717376; 
	  font-weight: 400;
    }

    .breadcrumb a:hover {
		color: #000; 
        text-decoration: underline;
		text-underline-offset: 0.2em; 
		text-decoration-thickness: 1px;
    } 
	.breadcrumb .active {
  	  color: #717376; 
	  margin: 0;
    } 
    .breadcrumb .icon1 {
      font-size: 12px;
	  vertical-align: 6%;
      }  
 	.breadcrumb .icon2 {
      font-size: 10px;
      }  
    .breadcrumb span {
      color: #737373; 
	  margin: 0 -4px;
      }

@media screen and (max-width: 1024px) { /* Hamburger */
	.breadcrumb { top: 80px; }
	}
@media screen and (max-width: 300px) { /* Hamburger */
	.breadcrumb { top: 62px; }
	}


/*********************************/
/* Produkte Beschreibúng */
/*********************************/
.headline-left-container { 
	display: grid;
	width: 100%;
	max-width: 1270px;
	margin: 25px auto 25px auto;
	padding: 0 18px;
}

	.product-container { 
      max-width: 1270px;
      margin: 0 auto 60px auto;
      padding: 0 18px;
      column-count: 2;
      column-gap: 50px;
		
	  -moz-hyphens: auto;
  	  -o-hyphens: auto;
	  -webkit-hyphens: auto;
	  -ms-hyphens: auto;
	  hyphens: auto;
	  orphans: 3;
	  widows: 3;
	 }

	.cta-block { 
	  display: flex;
	  align-items: flex-start;
	  gap: 10px;
	  margin: 10px 0;
	  break-inside: avoid; /* verhindert Umbruch über Spalten */
	}

	.product-container .cta {
		padding-top: 14px;
		padding-bottom: 0;

		font-size: 26px; font-size: 2.6rem;
		font-weight: 400;
		color: #313e99;
		
	  -moz-hyphens: none;
	  -o-hyphens: none;
	  -webkit-hyphens: none;
	  -ms-hyphens: none;
	  hyphens: none;
		}

	.product-container p {  
		margin-bottom: 10px;
	 }
	


@media screen and (max-width: 1024px) {
	.headline-left-container h2 { 
	padding-bottom: 0;
}

	.product-container { 
      margin: 0 auto;
	}
}

@media screen and (max-width: 768px) {
	.headline-left-container {
	max-width: none;
	}	
	.product-container {
        column-count: 1;
      }	
	.product-container .cta {
		font-size: 24px; font-size: 2.4rem;
		max-width: none;		
		}
    }

@media screen and (max-width: 450px) {
	.headline-left-container { 
		padding: 10px 18px;
		margin: 9px auto;
		}
	.product-container { 
		padding: 0 18px;
		}
    }

@media screen and (max-width: 300px) {
	 .product-container .cta {
		padding-top: 10px;
		-moz-hyphens: auto;
		-o-hyphens: auto;
		-webkit-hyphens: auto;
		-ms-hyphens: auto;
		hyphens: auto;
		}
    }


/*********************************/
/*** Produktgalerie ***/
/*********************************/

.flex_spacebetween {
	max-width: none;  /* 1400px */
	margin: 0 18px; /* 0 auto */
	display: -ms-flexbox; /* IE10 */
	display: flex;
	-ms-flex-wrap: wrap; /* IE10 */
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 25px;
}

/* 3 Spalten nebeneinander */
.column {
 -ms-flex: 32%; /* IE10 */
  flex: 32%;
  max-width: 100%;
  text-align: center;
  font-size: 15px; font-size: 1.5rem;
  color: black;
	
}

.column picture {
  width: 100%;
  height: 100%;
  grid-area: overlay;
}

.column picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: middle;
}


figure.marke {
	text-align: left;
	}
	.marke figcaption {
		padding: 5px;
		display: inline-block;
		color: #717376;
		text-size: 14px; text-size: 1.4rem;
		}


@media screen and (max-width: 1440px) {
.flex_spacebetween { 
	max-width: none; 
	}
}

/* 2 Spalten nebeneinander  1024px */
@media screen and (max-width: 1440px) {
	.flex_spacebetween { 
	gap: 20px 5px;
	}
  .column {
    -ms-flex: 49%;
    flex: 49%;
    max-width: 49%;
  }
}

/* 1 Spalte */
@media screen and (max-width: 768px) {
   .column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}


/*********************************/
/*** MARKENBEKLEIDUNG ***/
/*********************************/
.brand-wrapper { 
	display: flex;
	margin: 20px auto;
	background-color: #E5E5E5; /* mittel grau E5E5E5 */
}

.brandbox {
	display: flex;
	flex-wrap: nowrap;
	width: 100%; 
	max-width: 1440px; 
	margin: 0 auto -5px auto;
	align-content: stretch;	
	align-items: center;
	padding: 0 18px; 
	}

.abb1, .abb2  {
	width: 50%;
	height: auto;
	margin: 0;
	padding: 0;
	}

.wortlaut1, .wortlaut2  {  
	width: 50%; height: auto;
	padding: 0 18px;
	color: #1D255B;
	}

.brandname {
	margin: 10px 0; 
	width: 150px;
	height: 65px; 
	}

@media screen and (max-width: 1440px) { /* maxwidth */
	.brandbox {
	padding: 0; 
	}
}

@media screen and (max-width: 1024px) { /* Hamburger */
	.brandbox {
	align-content: stretch;	
	align-items: flex-start;
	}
	.brandname {
	margin: 7px 0 5px 0; 
		width: 120px;
		height: 52px; 
	}
}

@media only screen and (max-width: 929px) { /* 768px */
	.brandbox {
	flex-wrap: wrap;
	width: 100%; 
	margin: 0 auto;
	}
	.abb1, .wortlaut1 {
	width: 100%;
	}
	.abb2 {
		order: 1;
	    width: 100%;
  	}
	.wortlaut2 {
		order: 2;
    	width: 100%;
  		}
	.wortlaut1, .wortlaut2 {
		padding-bottom: 10px;
		}
	.brandname {
		margin: 18px 0 10px 0; 
		width: 120px;
		height: 52px; 
		}
	}

/*********************************/
/*** Normen und Vorgaben ***/
/*********************************/

.sidenav {
  width: auto;
}
    #myDIV1, #myDIV2 {
      width: 100%;
      text-align: left;
      top: 2px;
      display: none;
      position: relative;
	  background: rgba(255,235,153, 0.5);
	  padding: 10px 25px;
	  color: #1d255b;
	  margin-bottom: 10px;
    }

 #myDIV1 h2, #myDIV2 h2 {
		font-size: 26px; font-size: 2.6rem;
	 	margin-bottom: 10px;
	 	color: #1d255b;
    }

@media screen and (max-width: 768px) {
    #myDIV1, #myDIV2 {
	  padding: 8px 15px;
	  }
	}

@media screen and (max-width: 655px) {
    #myDIV1, #myDIV2 {
	}
}