@charset "utf-8";

:root {
	--primary: rgba(26,68,154,1); 
	--secondary: rgba(111,116,119,1);
}

*{
	margin: 0px;
	padding: 0px;
	 -webkit-font-smoothing: antialiased;
	box-sizing: border-box;
	font-family: 'Open Sans';
}
html {
	scroll-behavior: smooth;
}
body{
	font-weight: 300;
	hyphens: auto;
	hyphenate-limit-chars: auto 6;
	hyphenate-limit-lines: 3;
	-webkit-hyphens: auto;
	-webkit-hyphenate-limit-chars: auto 8;
	-webkit-hyphenate-limit-lines: 3;
	-ms-hyphens: auto;
	-ms-hyphenate-limit-chars: auto 8;
	-ms-hyphenate-limit-lines: 3;
	overflow-x: hidden;
	min-width: 395px;
}
h1, h2, h3, h4, h5, h6, .head1, .head2, .head3, .head4, .head5, .head6, .head1 span,  h1 span, .head2 span,  h2 span, .head3 span,  h3 span, .head4 span,  h4 span, .head5 span,  h5 span, .head6 span,  h6 span{
	line-height: 110%;
	font-weight: 800;
	color: var(--primary);
	text-transform: uppercase;
}
h1, .head1, .head1 span, h1 span {
	font-size: 3.2rem;
	letter-spacing: 2px;
}
h2, .head2, .head2 span, h2 span {
	font-size: 2.6rem;
	letter-spacing: 1px;
	margin-bottom: 15px;
}
h3, .head3, .head3 span, h3 span {
	font-size: 2rem;
	margin-bottom: 10px;
	letter-spacing: 1px;
}
h4, .head4, .head4 span, h4 span {
	font-size: 1.6rem;
	margin-bottom: 5px;
	letter-spacing: 1px;
}
h5, .head5, .head5 span, h5 span {
	font-size: 1.2rem;
	margin-bottom: 5px;
	letter-spacing: 1px;
}
h6, .head6, .head6 span, h6 span {
	font-size: 0.9rem;
}
p, table, tr, td, div, ul, li, ol, input, textarea, div, select, option, span, button{
	font-size: 1.1rem;
	line-height: 170%;
	font-weight: 300;
	color: rgba(0,0,0,0.75);
}
a:link, a:visited{
	text-decoration: none;
	color: #000;
}
a:active, a:hover{
	color:  var(--primary);
}
strong, b{
	font-weight: 600;
}
em, i{
	font-style: italic;
}
img{
	height: auto;
	vertical-align: top;
}
hr{
	color: rgba(0,0,0,0.2);
	background:  rgba(0,0,0,0.2);
	height: 1px;
	border: none;
	margin-bottom: 25px;
	margin-top: 30px;
}

/*Banner*/
#banner{
	position: relative;
}
#banner_small{
	background:rgba(78,157,205,0.5);
	min-height: 250px;
}
.banner_pic{
	vertical-align: top;
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 0;
}
#overlay_text{
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 99;
	margin-bottom: 10%;
	margin-left: 8%;
	padding-left: 25px;
	flex-flow: column;
	width: 100%;
	max-width: 950px;
}
.line{
	border-left: 4px solid rgba(255,255,255,1);
}
.overlay_head, .overlay_text{
	color: rgba(255,255,255,1);
}
.overlay_fancy{
	color: rgba(255,255,255,1);
	/*background: var(--primary);*/
	padding: 2px 0px;
	font-style: italic;
	font-size: 1.4rem;
	font-weight: 400;
	margin-bottom: 5px;
	letter-spacing: 1px;
	display: block;
	width: max-content;
}
.overlay_head{
	font-weight: 700;
	font-size: 3.2rem;
	line-height: 110%;
	margin-bottom: 15px;
	text-shadow: 2px 3px 10px rgba(0,0,0,0.65);
	letter-spacing: 2px;
}
.overlay_text{
	font-size: 1.4rem;
	line-height: 140%;
	font-weight: 400;
	margin: auto;
	font-style:italic;
	text-shadow: 2px 3px 10px rgba(0,0,0,0.95);
}
.overlay_button{
	background: var(--primary);
	border:none;
	border-radius: 25px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 25px;
	padding: 0px;
	max-width: 350px;
	transition: 0.3s;
}
.overlay_button:hover{
	transform: scale(0.9);
}
.overlay_button a{
	padding: 8px 25px 8px 25px;
	color: rgba(255,255,255,1);
	display: block;
	font-size: 1rem;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 3px;
}
.overlay_button:hover a{
	color: rgba(255,255,255,1) !important;
}
#overlay_text::after {
    content: "";
    position: absolute;
    top: -25px;
    left: -150px; /* optionaler Überstand */
    width: calc(100% + 150px); /* Breite etwas größer als Text */
    height: calc(100% + 50px); /* Höhe entspricht Text */
    background-color: rgb(26,68,154,0.8);
    z-index: -1; /* hinter den Text legen */
}
.line {
    padding-left: 20px;
}
#logo_wrap{
	margin: 20px auto;
	max-width: 400px;
}

/*Allgemeiner Aufbau*/
main{
	Padding-Top: 9%;
}
main#subnavigation{
	Padding-Top: 20% !important;
}
.wrapper, .wrapper_small{
	width: 90%;
	margin: 3rem auto;
}
.wrapper_small{
	max-width: 1400px;
}
.content{
	padding-bottom: 0px;
	padding-top: 0px;
}
.content_medium{
	padding-bottom: 60px;
	padding-top: 60px;
}
.content_small{
	padding-bottom: 30px;
	padding-top: 30px;
}
.content_big{
	padding-bottom: 180px;
	padding-top: 180px;
}
.content-fachlexikon{
	padding-top: 5%;
}
.content-literatur{
	padding-top: 5%;
}
.content-normen{
	padding-top: 4%;
}

/*Scrollbar*/
.progress-container {
	z-index: 999;
	width: 100%;
	height: 2px;
	background: rgba(0,0,0,0.8);
}
.progress-bar {
  	height: 2px;
	background: #E30613;
	background: -webkit-linear-gradient(90deg, rgba(0,123,52,1) 0%, rgba(75,163,82,1) 100%);
	background: -moz-linear-gradient(90deg, rgba(0,123,52,1) 0%, rgba(75,163,82,1) 100%);
	background: linear-gradient(90deg, rgba(0,123,52,1) 0%, rgba(75,163,82,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFFFFF", endColorstr="#666666", GradientType=1);
  	width: 0%;
} 

/*Flex Layout*/
.flex_wrap, .flex_wrap_left, .flex_position_center, .flex_wrap_center{
	display: flex;
	flex-wrap: wrap;
}
.flex_wrap{
	justify-content: space-between;
}
.flex_wrap_left{
	justify-content: flex-start;
}
.flex_wrap_center{
	justify-content:center;
}
.flex_position_center{
	align-items: center;
	height: 100%;
}
.col1, .col2, .col3, .col4, .col5, .col6, .col30, .col35, .col65, .col70{
	position: relative;
}
.col1{
	width: 100%;
}
.col2{
	width: 50%;
}
.col3{
	width: 33.333%;
}
.col4{
	width: 25%;
}
.col5{
	width: 20%;
}
.col6{
	width: 16%;
}
.col30{
	width: 30%;
}
.col35{
	width: 35%;
}
.col40{
	width: 40%;
}
.col60{
	width: 60%;
}
.col65{
	width: 65%;
}
.col70{
	width: 70%;
}
.inner_wrap_small{
	padding: 10px;
}
.inner_wrap{
	padding: 25px;
}
.inner_wrap_md{
	padding: 45px;
}
.inner_wrap_big{
	padding: 85px;
}
.inner_wrap_large{
	padding: 100px;
}
.wrapper_small ul, .wrapper_small ol {
  list-style-position: inside;
  margin: 0;
  padding: 0;
}
.wrapper_small ul li, .wrapper_small ol li {
    text-indent: -1.2em;
    padding-left: 1.2em;
}



/*Allgemeine Klassen*/
.relative{ /*Wichtig wenn mit Position: absolute gearbeitet wird! Diese Klasse fuer das Bezugselement, also das aeussere!*/
	position: relative;
}
.no-margin{
	margin:0px;
}
ul.none{
	list-style: none;
	margin-top: 5px;
}
ul.none li{
	margin-bottom: 15px;
}
ul.regular{
	margin-bottom: 10px;
	margin-top: 10px;
}
ul.regular li{
	margin-left: 20px;
	margin-bottom: 10px;
}
ul.fa-list {
	list-style: none;
	padding-left: 0;
}
ul.fa-list li {
	position: relative;
	padding-left: 1.7em; /* Abstand zum Icon */
	margin-bottom: 15px;
}
ul.fa-list li::before {
	content: "\f061"; /* Unicode für fa-arrow-right */
	font-family: "Font Awesome 6 Pro"; /* ggf. anpassen */
	font-weight: 300; /* light */
	font-size: 1.2rem;
	color: var(--primary);
	position: absolute;
	left: 0;
	top: 0;
}
.inner_wrap ul, .faq_inner ul, .inner_wrap ol {
  margin-left: 0;
  padding-left: 0;
  list-style-position: inside; /* optional: sorgt dafür, dass die Punkte im Textbereich bleiben */
}
.inner_wrap ul li, .inner_wrap ol li {
  text-indent: -1.2em; /* negative Einrückung für zweite Zeile */
  padding-left: 1.2em; /* gleiche Breite wie Bullet */
}

  table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    text-align: left;
  }

  th, td {
    padding: 12px 15px;
  }
  tbody tr {
    border-bottom: 1px solid #ddd;
  }
  tbody tr:last-child {
    border-bottom: none; /* letzte Zeile ohne Linie */
  }
  tr:nth-child(even) {
    background-color: #f5f8ff;
  }
  /* Linien zwischen Spalten */
  td + td, th + th {
    border-left: 1px solid #ddd;
  }
  th {
    padding-bottom: 15px;
    border-bottom: 2px solid #4CAF50; /* Linie unter der Kopfzeile */
    color: #333;
  }

button, button_wh{
	margin:30px auto;
	transition: 0.2s;
}
button{
	background: rgba(255,255,255,1);
	border:2px solid var(--primary);
}
button_wh{
	border: 2px solid #FFF;
	background: none;
}
button a, button p{
	display: block;
	padding: 8px 30px;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 16px;
	letter-spacing: 2px;
	transition: 0.3s;
}
button a i, button p i{
	color: rgba(0,0,0,0.7);
}
button_wh a{
	color: rgba(255,255,255,1);
	padding: 5px 25px;
	display: block;
	font-weight: 400;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-size: 1rem;
}
button:hover, button_wh:hover{
	transform: scale(0.9);
}
button a, button p{
	color:var(--primary);
}
.trenner{
	width: 90px;
	margin-bottom: 20px;
	margin-left: -30px;
	margin-top: 20px;
	height: 4px;
	background: var(--primary); 
}
.border_box{
	border-radius: 25px;
	overflow: hidden;
}
.center{
	text-align: center;
}
.justify{
	text-align: justify;
}
.right_text{
	text-align: right;
}
.uppercase{
	text-transform: uppercase;
}
.white-text{
	color: rgba(255,255,255,1);
}
.lt_gr_bg{
	background: rgba(0,0,0,0.05);
}
.wh_bg{
	background: rgba(255,255,255,0.8)
}
.green-box{
	background: var(--primary);
    color: rgba(255, 255, 255, 1) !important;
}
.border-box{
	padding: 45px 35px;
    border-radius: 30px;
}
.video {
    width: 100%;
    text-align: center;
}
.video video {
    width: 100%;
    max-width: 800px;
}
.gr_bg{
	background: #007B34;
	background: -webkit-linear-gradient(315deg, rgba(0, 123, 52, 1) 0%, rgba(75, 163, 82, 1) 100%);
	background: -moz-linear-gradient(315deg, rgba(0, 123, 52, 1) 0%, rgba(75, 163, 82, 1) 100%);
	background: linear-gradient(315deg, rgba(0, 123, 52, 1) 0%, rgba(75, 163, 82, 1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#007B34", endColorstr="#4BA352", GradientType=0);
}
.einleitung{
	font-size: 1.4rem;
	line-height: 150%;
	font-style: italic;
	margin-bottom: 20px;
}
.einleitung02{
	font-size: 1.6rem;
	line-height: 150%;
	margin-bottom: 20px;
}
.fancy_head{
	font-weight: 400;
	letter-spacing: 4px;
	font-style: italic;
	margin-bottom: 10px;
	padding: 2px 20px;
    text-transform: none;
	width: max-content;
	color: rgba(255,255,255,1);
	background: var(--secondary);
}
.gr_head{
	font-weight: 600;
	font-size: 2rem;
	margin-bottom: 10px;
	color: rgba(0,0,0,0.5);
	text-transform: uppercase;
	letter-spacing: 2px;
}
.collapse:hover{
	cursor: pointer;
}
p.smalltext {
	font-size: 13px;
	line-height: 120%;
}
.spacing{
	letter-spacing: 4px;
}
.info_box{
	background: rgba(0,0,0,0.05);
	border-radius: 20px;
	padding: 30px 25px;
}
.no_transform{
	text-transform: none;
}
.versal {
	color: var(--primary);
	font-weight: 600;
	font-size: 4rem;
	margin-bottom: -10px;
	margin-right: 5px;
	float: left;
	line-height: 90%;
}
.datenschutz p{
	margin-bottom: 15px;
}
.datenschutz h3, .datenschutz h5, .datenschutz h4{
	margin-top: 20px;
}
.regular_text{
	font-weight: 400;
}

/*Bilder allg.*/
.image_container{
	overflow: hidden;
	transition: 0.5s;
}
.image_container img{
	transition: 0.5s;
}
.image_container:hover img{
	transform: scale(1.2);
}
.img_full{
	width: 100%;
	vertical-align: top;
	height: auto;
	object-fit: cover;
}
.img_gr{
	transition: 0.3s;
	filter: grayscale(0.8);
}
.img_wrap{
	width: 95%;
}
.img_gr:hover{
	filter: grayscale(0);
}
.logo_partner{
	width: 100%;
	max-width: 300px;
	margin: 15px;
}
.history_img{
	padding: 10px;
	border-radius: 20px;
}
.lt_gr_bg{
	background: rgba(0,0,0,0.05);
	padding: 20px 0px;
}


/*Trenner Banner*/
.trenner_banner{
	min-height: 450px;
}
.trenner_banner.trenner01{
	background: url("../img/trenner01.webp") left bottom;
	background-size: cover;
}

/*Teaser*/
.gr_box{
	background: rgba(0,0,0,0.07);
	padding: 20px 35px;
	margin-bottom: 25px;
}
.teaser_head{
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: 600;
	font-size: 1.1rem;
	line-height: 120%;
	width:max-content;
	border-bottom: 2px solid var(--primary);
	padding-bottom: 5px;
	margin-bottom: 10px;
}
.teaser_icon{
	font-size: 4.5rem;
	background: var(--primary);
	color: rgba(255,255,255,1);
	padding: 15px;
	min-height: 120px;
	min-width: 120px;
	line-height: 90px !important;
	display: block !important;
	margin: 10px auto 25px auto;
}
.teaser_link a {
	text-transform: uppercase;
	font-size: 0.9rem;
	font-weight: 400;
	letter-spacing: 1px;
}
.teaser_small i{
	background: var(--primary);
	color: rgba(255,255,255,1);
	margin-right: 3px;
	padding: 2px;
	height: 45px;
	width: 45px;
	line-height: 40px;
	text-align: center;
	font-size: 1.5rem;
}
.teaser_small{
	font-weight: 400;
	font-size: 1.3rem;	
	margin-bottom: 20px;
}

/*Bewerbung / Kontakt*/
.honey{
	display: none;
}
form.termin{
	background: rgba(255,255,255,1);
	padding: 35px;
	border-radius: 20px;
}
input.invalid {
	background: rgba(250,20,30,0.4);
	color: rgb(250, 20, 30);
}
.label_wrap{
	margin-bottom: 15px;
	display: flex;
	justify-content: space-between;
	align-items:flex-end;
}
.label_wrap p{
	width: 25%;
}
.label_wrap p, .label_p{
	font-size: 1.1rem;
	font-weight: 600;
}
.form{
	padding: 3px;
	background: none;
	border: none;
	border-bottom: 2px dotted rgba(0,0,0,0.3);
	width: 100%;
}
.form2{
	width: 100%;
	border:  2px dotted rgba(0,0,0,0.3);
	height: 170px;
}
select{
	width: 100%;
	border: 1px solid rgba(0,0,0,0.4);
	background: #fff;
	padding: 10px;
}
.small_wrap{
	max-width: 500px;
	margin: 10px auto;
}
p.smalltext{
	font-size: 14px;
	font-weight: 300;
}
.error_box, .success_box{
	padding: 20px;
	margin: 15px;
}
.error_box p, .success_box p{
	color: var(--white);
}
.error_box{
	background: #870002;
}
.success_box{
	background: #008d31;
}

.faq_outer{
	padding: 20px 15px;
	border-bottom: 1px solid rgba(0,0,0,0.4);
}
.faq_head{
	font-size: 1.7rem;
	font-weight: 500;
}
.faq_inner{
	padding: 5px 0px;
}
.faq_inner p{
	font-size: 1.2rem;
}

.left{
	float: left;
	width: 48%;
}
.right{
	float: right;
	width: 48%;
}
#contact{
	width: 100%;
}
#contact td{
	padding-bottom: 10px;
}
#contact td.first{
	width: 30%;
}
#contact td.sec{
	width: 70%;
}



@media(max-width:1350px){
	main {
	Padding-Top: 0%;
		}
	.inner_wrap{
		padding: 20px;
	}
	.inner_wrap_md{
		padding: 35px;
	}
	.inner_wrap_big{
		padding: 65px;
	}
	.inner_wrap_large{
		padding: 85px;
	}
	.col30, .col35, .col65, .col70{
		width: 50%;
	}

}
@media(min-width:1650px){
	.col30 {
	  width: 35%;
	}
	.col70 {
		width: 65%;
	}
}
@media(min-width:1500px){
	.col30 {
	  width: 40%;
	}
	.col70 {
		width: 60%;
	}
}
@media(max-width:1400px){
	#footer_box{
		width: 95%;
	}
	#overlay_text{
		width: 85%;
	}
	.overlay_head{
		font-size: 3.1rem;
	}
}
@media(max-width:1300px){
	.wrapper, .wrapper_small{
		width: 90%;
	}
}
@media(max-width:1200px){
	.col3{
	  width: 50%;
	} 
	.col40, .col60, .col70{
		width: 50%;
	}
	.logo_mobil {
		width: auto;
		/*max-width: 180px;*/
		right: 0;
		top: 0;
		margin-bottom: 0px;
		margin-right: 3%;
		margin-top: 0px;
	}
	.col4{
		width: 50%;
	}
	.teaser_col{
		width: 100%;
		margin-bottom: 50px;
		margin-left: 0;
		margin-right: 0;
	}
	.no_mobile{
		display: none;
	}
	#overlay_box{
		position: relative;
		width: 100%;
		padding-bottom: 35px;
		padding-top: 35px;
	}
	#overlay_text{
		width: 90%;
	}
}

@media(max-width:1024px){
	h1, .head1{
		font-size: 45px;
		width: 100%;
	}
	h2, .head2{
		font-size: 35px;
		margin-bottom: 20px;
	}
	h3, .head3{
		font-size: 30px;
		margin-bottom: 10px;
	}
	h4, .head4{
		font-size: 25px;
		margin-bottom: 5px;
	}
	.wrapper{
		width: 95%;
	}
	/*.content{
		padding-bottom: 50px;
		padding-top: 50px;
	}*/
	.flex_wrap.no_wrap{
		flex-wrap: wrap;
	}
	.col2{
		width: 100%;
	}
	.col5{
		width: 33.33%;
	}
	.col6 {
	  width: 30%;
	}
	.inner_wrap_small{
		padding: 5px;
	}
	.inner_wrap{
		padding: 15px;
	}
	.inner_wrap_md{
		padding: 30px;
	}
	.inner_wrap_big{
		padding: 45px;
	}
	.inner_wrap_large{
		padding: 65px;
	}
	.image_wrap{
		padding: 2px;
	}
	.wrapper_small {
	  margin-left: auto;
	}
	#map_wrap{
		height: 500px;
	}
	.img_mob{
		display: block;
	}
}
@media(max-width:856px){
	.trenner{
		margin-left: -20px;
	}
	.col30, .col35, .col65, .col70, .col40, .col60{
		width: 100%;
	}
}
@media(max-width:756px){
	.spacing{
		letter-spacing: 2px;
	}
	#banner_logo img{
		max-width: 300px;
	}
	.banner_text p{
		font-size: 3rem;
	}
	.left, .right{
		width: 100%;
		float: none;
	}
	.left{
		margin-bottom: 15px;
	}
	.col5{
		width: 50%;
	}
	.col6 {
	  width: 50%;
	}
	.border-right, .border-left{
		border:none;
	}
	.inner_wrap_big {
		padding: 30px;
	}
	.inner_wrap{
		padding: 10px;
	}
	.inner_wrap_md{
		padding: 25px;
	}
	.inner_wrap_big{
		padding: 35px;
	}
	.inner_wrap_large{
		padding: 55px;
	}
	.flex_wrap.flex_reverse, .flex_produkte.flex_reverse{
		flex-direction: column-reverse;
	}	
	#map_wrap{
		height: 450px;
	}
	#overlay_text{
		margin-left: 2%;
	}
	table {
    display: block;
    overflow-x: auto;
    white-space: break-spaces;
  }
	main#subnavigation {
    Padding-Top: 0% !important; 
}
}
@media(max-width:656px){
	.col3, .col30, .col35, .col65, .col70{
		width: 100%;
	}
	.trenner{
		margin-left: 0px;
	}
	.logo_mobil{
		max-height: 200px;
	}
	.trenner{
		border-top: 4px dotted var(--primary);
	}
	.einleitung02{
		font-size: 1.3rem;
	}
}

@media(max-width:556px){
	.banner_text p{
		display: none;
	}
	.col3, .col4, .col5{
		width: 100%;
	}
	.col2{
		width: 100%;
	}
	h1, .head1, h1 span, .head1 span{
		font-size: 34px;
		width: 100%;
	}
	h2, .head2, h2 span, .head2 span{
		font-size: 28px;
		margin-bottom: 20px;
	}
	h3, .head3, h3 span, .head3 span{
		font-size: 26px;
		margin-bottom: 10px;
	}
	h4, .head4, h4 span, .head4 span{
		font-size: 22px;
		margin-bottom: 10px;
	}
	h6, .head6, .head6 span, h6 span {
	  font-size: 16px;
	}
	.box_col1 div{
		padding: 40px;
	}
	#overlay_text{
		border: none;
	}
	.overlay_fancy{
		font-size: 0.9rem;
		width: 90%;
	}
	.overlay_head, .overlay_head span{
		font-size: 1.8rem;
	}
	.overlay_text{
		font-size: 1rem;
	}
	.overlay_button a, .overlay_button_wh a{
		font-size: 0.8rem;
		padding: 5px 15px 5px 15px;
	}
	.fancy_head{
		max-width: 100%;
	}
}

@media(max-width:456px){
	.inner_wrap_large {
		padding: 25px;
	}
}
@media(max-width:356px){
	.col6 {
		width: 100%;
	}
}