html *{font-size:100%} /* Default Font Size, 16px */


:root {
--main-ci-color: #2694c7;
--main-hover-color: #2c7fa5;
--second-ci-color: #FFDD00;
--third-ci-color: #BAD5F0;
--light-ci-color: ;
--gray-ci-color: ;
}




* {margin:0; padding:0;}
.ym-grid{display:table; width:100%; table-layout:fixed; list-style-type:none; padding-left:0; padding-right:0;margin-left:0;margin-right:0}
.ym-gl{float:left;margin:0}
.ym-gr{float:right;margin:0}
.ym-center{float:left;margin: 0;padding:0;}
.ym-g10{width:10%}
.ym-g12{width:12.5%}
.ym-g20{width:20%}
.ym-g25{width:25%}
.ym-g30{width:30%}
.ym-g33{width:33.333%}
.ym-g37{width:37.5%}
.ym-g40{width:40%}
.ym-g45{width:45%}
.ym-g50{width:50%}
.ym-g55{width:55%}
.ym-g60{width:60%}
.ym-g66{width:66.666%}
.ym-g70{width:70%}
.ym-g75{width:75%}
.ym-g80{width:80%}
.ym-g90{width:90%}

.ym-gbox{padding:0 10px}
.ym-gbox-left{padding:0 20px 0 0; }
.ym-gbox-right{padding:0 0 0 20px;}

.ym-gbox-0 {padding:0; border-top: solid 0px #f90;}
.ym-gbox-1 {padding:0 15px 0 15px; border-top: solid 0px #f90;}
.ym-gbox-2 {padding:0 15px 0 15px; border-top: solid 0px #ffcc00;}
.ym-gbox-3 {padding:0 15px 0 15px; border-top: solid 0px #ffcc00;}

.ym-gbox-index-links{padding:0 100px 0 10px}

.ym-innen-g25 {width:25%}
.ym-innen-g75 {width:75%}
.ym-innen-left-box{padding: 0 50px 0 0;}
.ym-innen-right-box{padding: 0 0 0 75px;}



/* #####################   WRAPPER UND WBOX ############################################## */
.ym-wrapper{text-align:left; margin:0 auto; padding: 0 10px; max-width:1200px; border: solid 0px #0f0;}

@media (min-width: 1600px) {  
.ym-wrapper{text-align:left; margin:0 auto; max-width:1100px;}
.ym-wrapper-footer{text-align:left;margin:0 auto; padding:25px 10px 0px 10px;  max-width:1300px}
}


.ym-wbox{padding:35px 0 0 0; border: solid 0px #f90;}
@media screen and (max-width:1024px){.ym-wbox{padding: 15px 0 50px 0;}}
@media screen and (max-width:740px){.ym-wbox{padding: 5px 0 50px 0;}}
@media screen and (max-width:600px){.ym-wbox{padding: 0px 0 50px 0;}}


.ym-wbox:first-child{padding:0px 0 0 0; border: solid 0px #f90;}
@media screen and (max-width:1024px){.ym-wbox:first-child{padding: 0px 0 50px 0;}}
@media screen and (max-width:740px){.ym-wbox:first-child{padding: 0px 0 50px 0;}}
@media screen and (max-width:600px){.ym-wbox:first-child{padding: 0px 0 50px 0;}}



body{font-family:'Open Sans','Arial', sans-serif; font-display: swap; color:#435264; -webkit-text-size-adjust:100%; margin: 0; padding: 0; }

/* ##################   Silbentrennung aktiv   ###################################### */

body { -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }
.nonehyphens { -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; }


/* ##################   M A I N   Einheitlicher Abstand nach Bild oder Slider   ###################################### */

#main {border-top: solid 3px #eee; padding-top:25px; border: solid 0px #f90;}
@media screen and (max-width:1400px){#main {border-top: solid 0px #eee; padding-top:20px;}}
@media screen and (max-width:1024px){#main {border-top: solid 0px #eee;}}
@media screen and (max-width:740px){#main {border-top: solid 0px #eee;}}
@media screen and (max-width:600px){#main {border-top: solid 0px #eee;}}
@media screen and (max-width:480px){#main {border-top: solid 0px #eee;}}

ul,ol,dl{margin:0;padding:0;}

h1,h2,h3,h4,h5,h6{font-family: 'Open Sans', Arial,Helvetica,sans-serif; font-display: swap;
	font-weight:300;
	color:#435264;
	margin:0;
	letter-spacing:0.0em;
	border-top: solid 0px #f90;
	border-bottom: solid 0px #0000CD;	
	}
	


h1 { font-size: 40px; font-size: 2rem;	 line-height: 1.3; margin: 3rem 0 1.2rem 0;   /* 2.5rem */} /* 40/16 = 2.5 */ 
h2 { font-size: 32px; font-size: 1.8rem; line-height: 1.3; margin: 2.5rem 0 1.2rem 0;  /* 2rem */} /* 32/16 = 2 */
h3 { font-size: 24px; font-size: 1.5rem; line-height: 1.3; margin: 2rem 0 1.2rem 0;  /* 1.5rem */} /* 24/16 = 1.5 */
h4 { font-size: 22px; font-size: 1.4rem; line-height: 1.3; margin: 1.8rem 0 1.2rem 0; /* 1.4rem */} /* 22,4/16 = 1.4 */
h5 { font-size: 19px; font-size: 1.2rem; line-height: 1.3; margin: 1.7rem 0 1.2rem 0;  /* 1.2rem */} /* 19,2/16 = 1.2 */
h6 { font-size: 18px; font-size: 1.1rem; line-height: 1.3; margin: 1.6rem 0 1.2rem 0;  /* 1.1rem */} /* 17,6/16 = 1.1 */

p  { font-size: 17.6px; font-size: 1.1rem; line-height: 1.55; margin:0 0 1.2rem 0;} /* 16/16 = 1 */

hr{color:#fff;background:transparent;margin:0 0 .75em 0;padding:0 0 .75em 0;border:0;border-bottom:1px #e7e7e7 solid}

* h1 div, h1 div{ font-size: 0.73em; line-height:130%; margin:15px 0 0 0;}  * h1 span, h1 span{ font-size: 0.73em; line-height:130%; margin:15px 0 0 0;}

/* Reduzierung nur der ersten H1 Überschrift im Abstand nach oben. Farbe f90 nur um das zu symbolisieren */
h1:first-child { margin:0 0 2rem 0; padding-top:2rem; border-top: 0px solid #000;/*background-color: lime;*/ }
h2.nachhzeile, h3.nachhzeile {margin:0 0 1.2rem 0;  /* Margin-top auf Null gesetzt für Kombi mit H1 */} 
.textcenter-600left {text-align:center}
@media screen and (max-width:600px){.textcenter-600left{text-align:left; padding:0 0.6rem 0 0.6rem!important;}}

@media screen and (max-width:1024px){h1{font-size: 32px; font-size: 2rem; line-height:1.25;} h1:first-child { padding:0.7rem 0 0.7rem 0; } h2,h3,h4,h5,h6{font-size: 1.6rem; line-height:1.25;} p{font-size: 18px; font-size: 1.1rem;}}
@media screen and (max-width:740px){h1{font-size: 27px; font-size: 1.7rem; line-height:1.25; margin: 2rem 0 0.5rem 0;} h1:first-child { margin-top:0rem; padding:0 0 0.7rem 0; /*color:#f90; background-color: lime;*/ } h2{font-size: 1.5rem; line-height:1.25; margin:2.5rem 0 0.5rem 0;} h3,h4,h5,h6{font-size: 1.35rem; line-height:1.34; margin:2.5rem 0 0.5rem 0;} p{font-size: 17px; font-size: 1.05rem; line-height: 1.65; } }
@media screen and (max-width:600px){h1{font-size: 27px; font-size: 1.7rem; line-height:1.25; margin: 2rem 0 0.5rem 0;} h1:first-child { margin-top:0.3rem; margin-bottom:0.5rem; padding:0 0 0.7rem 0; /*color:#f90; background-color: lime;*/ } h2{font-size: 1.5rem; line-height:1.25; margin:2.5rem 0 0.5rem 0;} h3,h4,h5,h6{font-size: 1.35rem; line-height:1.34; margin:2.5rem 0 0.5rem 0;} p{font-size: 17px; font-size: 1.05rem; line-height: 1.65; } }
@media screen and (max-width:480px){h1{font-size: 24px; font-size: 1.5rem; line-height:1.25; margin: 3rem 0 0.5rem 0;} h1:first-child { margin-top:0.3rem; padding:0rem; /* color:#f90; background-color: lime;*/ } h2{font-size: 1.45rem; line-height:1.25; margin:2.5rem 0 0.5rem 0;} h3,h4,h5,h6{font-size: 1.3rem; line-height:1.34; margin:2.5rem 0 0.5rem 0;} p{font-size: 16px; font-size: 1rem; line-height: 1.6; }}


small {font-size: 0.7rem;}
small2 {font-size: 1.7rem;}

a {color: #666; text-decoration: none}
a:hover {color: #333}

img {display: block}
.bordered {border: solid 1px #999999}


.flexible {max-width: 100%; height: auto}
.flexible2, .flexible100 {width: 100%; height: auto}


.ym-clearfix:before{content:"";display:table}
.ym-clearfix:after{clear:both;content:".";display:block;font-size:0;height:0;visibility:hidden}

.bigger {font-size: 180%!important}

/* ###################### HEADER UND LOGO PC und HEADER PC SMALLER ######################### */

header {width: 100%;
	height: 120px;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99999;
	background-color: #fff;
	-webkit-transition: height 0.5s;
	-moz-transition: height 0.5s;
	-ms-transition: height 0.5s;
	-o-transition: height 0.5s;
	transition: all 0.5s;
	border: solid 0px #f90;
	box-shadow: 0 3px 11px 2px rgba(0,0,0,0.3);
	border: solid 0px #f90;
	}

header .logo-header {background-image: url("../bilderpfad/logo/bruno-groening-now.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: auto;
	height: 57px; 
	padding: 5px 0 0 0;
	transition: all 0.5s;
	border: solid 0px #f90;
	}

header.smaller .logo-header {
	height: 0;
	margin: 0;
	padding: 0;
	transition: all 0.5s;
	}
	
header.smaller {height: 40px; border: solid 0px #f90;}




.header-login {
	position: absolute;
	top: 0;
	right: 10px;
	border: solid 0px #f90;
	transition: all 0.5s;
	}
.header-login a {color: var(--main-ci-color); font-size: 0.9rem;}
.header-login a:hover {color: var(--main-hover-color); font-size: 0.9rem; text-decoration: underline;}
.header-login a span {color: var(--main-ci-color);font-size: 1.1rem;}

header.smaller .header-login {
	top: -150px;
	}



/* ###################### HEADER UND LOGO M O B I L ####################################### */

.logo-header-mobile {margin: 0px auto 10px auto}

@media screen and (max-width:1024px) {
#mobil-header {height: 85px; background: #fff; z-index: 999999; box-shadow: 0 3px 11px 2px rgba(0,0,0,0.4); position: relative;}
.logo-header-mobile {margin: 5px auto 10px auto;}
}

@media screen and (max-width:640px) {
.logo-header-mobile {width: 400px; height:auto; margin: 5px 0 10px 1%;}
}

@media screen and (max-width:470px) {
.logo-header-mobile {width: 300px; height:auto; margin: 15px 0 10px 1%;}
}

@media screen and (max-width:370px) {
.logo-header-mobile {width: 250px; height:auto; margin: 15px 0 10px 0;}
}

@media screen and (max-width:320px) {
.logo-header-mobile {width: 240px; height:auto;}
}





















































/* ###################### E N D E HEADER ######################### */



/* ###################### ABSTAND SLIDER ZUM BILDANFANG IM HEADER ######################### */

.index-slider-abstand, .kopf-bild {padding:120px 0 0 0;}
/*
@media screen and (max-width:1400px){.index-slider-abstand {padding: 160px 0 0 0;}}
@media screen and (max-width:1100px){.index-slider-abstand {padding: 150px 0 0 0;}}
*/
@media screen and (max-width:1024px){.index-slider-abstand {padding: 0;}}



/*  WIRD BEI GEÄNDERTER TABLE1 nicht mehr benötigt
.kopf-bild {margin: 190px 0 0 0; width: 100%; border: solid 1px #f90;}
.no-kopf-bild {margin-top: 190px; border-bottom: solid 1px #eee;}

@media screen and (max-width:1400px){.kopf-bild {margin: 180px 0 0 0; z-index:1} .no-kopf-bild {margin-top: 180px; border-bottom: solid 1px #eee;}}
@media screen and (max-width:1300px){.kopf-bild {margin: 180px 0 0 0; z-index:1}}
@media screen and (max-width:1200px){.kopf-bild {margin: 150px 0 0 0; z-index:1} .no-kopf-bild {margin-top: 150px; border-bottom: solid 1px #eee;}}
@media screen and (max-width:1024px){.kopf-bild {margin: 0; z-index:1} .no-kopf-bild {margin-top: 0px; border-bottom: solid 1px #eee;} }
*/




/* ######################     DISPLAY UND DISPLAY NONE     ################################# */

.displaynone1024 {display: block}
.display1024 {display: none}

@media screen and (max-width:1024px){
.displaynone1024 {display: none}
.display1024 {display: block}
}


.displaynone1400 {display: block}
.display1400 {display: none}

@media screen and (max-width:1400px){
.displaynone1400 {display: none}
.display1400 {display: block}
}


.displaynone1150 {display: block}
.display1150 {display: none}

@media screen and (max-width:1150px){
.displaynone1150 {display: none}
.display1150 {display: block}
}


.displaynone960 {display: block}
.display960 {display: none}

@media screen and (max-width:960px){
.displaynone960 {display: none}
.display960 {display: block}
}


.displaynone780 {display: block}
.display780 {display: none}

@media screen and (max-width:780px){
.displaynone780 {display: none}
.display780 {display: block}
}


.displaynone740 {display: block}
.display740 {display: none}

@media screen and (max-width:740px){
.displaynone740 {display: none}
.display740 {display: block}
}


.displaynone740l {display: block}
.display740l {display: none}
@media only screen and (max-width:740px) and (orientation:landscape){
.displaynone740l {display: block; border:10px solid #f90}
.display740l {display: block}
}


.displaynone600 {display: block}
.display600 {display: none}

@media screen and (max-width:600px){
.displaynone600 {display: none}
.display600 {display: block}
}

.displaynone480 {display: block}
.display480 {display: none}

@media screen and (max-width:480px){
.displaynone480 {display: none}
.display480 {display: block}
}


.displaynone360 {display: block}
.display360 {display: none}

@media screen and (max-width:360px){
.displaynone360 {display: none}
.display360 {display: block}
}


.displaynone320-inline {display: inline-block}
.display320-inline {display: none}

@media screen and (max-width:320px){
.displaynone320-inline {display: none}
.display320-inline {display: inline-block}
}




/* ######################    F O O T E R    ######################### */


footer{color: #fff!important; 
	background: #444;
	padding: 35px 0 20px 0;
	margin: 0;
	position: relative;
	z-index:5;
	}


footer p {color: #fff!important}
footer p a{color: #fff!important}
footer a{color: #fff!important}
footer a:hover{color: #1D8FA9!important}


.ym-wrapper-footer{text-align:left;margin:0 auto; padding:0px 10px 0px 10px;  max-width:1600px}
.ym-wbox-footer{padding:0px}



/* ######################    L I N E A R I S A T I O N    ######################### */


@media screen and (max-width:1400px){
.linearize-level-1400,.linearize-level-1400>[class*="ym-g"],.linearize-level-1400>[class*="ym-col"]{display:block;float:none;margin-left:0;margin-right:0;width:100%!important}
.linearize-level-1400>[class*="ym-g"]>[class*="ym-gbox"],.linearize-level-1400>[class*="ym-col"]>[class*="ym-cbox"]{overflow:hidden;padding:0}
}

@media screen and (max-width:1024px){
.linearize-level-0,.linearize-level-0>[class*="ym-g"],.linearize-level-0>[class*="ym-col"]{display:block;float:none;margin-left:0;margin-right:0;width:100%!important}
.linearize-level-0>[class*="ym-g"]>[class*="ym-gbox"],.linearize-level-0>[class*="ym-col"]>[class*="ym-cbox"]{overflow:hidden;padding:0}
}

@media screen and (max-width:960px){
.linearize-level-1,.linearize-level-1>[class*="ym-g"],.linearize-level-1>[class*="ym-col"]{display:block;float:none;margin-left:0;margin-right:0;width:100%!important}
.linearize-level-1>[class*="ym-g"]>[class*="ym-gbox"],.linearize-level-1>[class*="ym-col"]>[class*="ym-cbox"]{overflow:hidden;padding:0}
}

@media screen and (max-width:740px){
.linearize-level-2,.linearize-level-2>[class*="ym-g"],.linearize-level-2>[class*="ym-col"]{display:block;float:none;margin-left:0;margin-right:0;width:100%!important}
.linearize-level-2>[class*="ym-g"]>[class*="ym-gbox"],.linearize-level-2>[class*="ym-col"]>[class*="ym-cbox"]{overflow:hidden;padding:0}
}

@media screen and (max-width:600px){
.linearize-level-3,.linearize-level-3>[class*="ym-g"],.linearize-level-3>[class*="ym-col"]{display:block;float:none;margin-left:0;margin-right:0;width:100%!important}
.linearize-level-3>[class*="ym-g"]>[class*="ym-gbox"],.linearize-level-3>[class*="ym-col"]>[class*="ym-cbox"]{overflow:hidden;padding:0}
}

@media screen and (max-width:480px){
.linearize-level-4,.linearize-level-4>[class*="ym-g"],.linearize-level-4>[class*="ym-col"]{display:block;float:none;margin-left:0;margin-right:0;width:100%!important}
.linearize-level-4>[class*="ym-g"]>[class*="ym-gbox"],.linearize-level-4>[class*="ym-col"]>[class*="ym-cbox"]{overflow:hidden;padding:0}
}