html, body{
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
-webkit-font-smoothing:antialiased;
color:   rgb(30,44,61); /* rgb(38,55,77) #26374D #58646f*/ 
/*background-color: rgb(245, 248,250);*/
height: 100%;
background-color: rgb(49,58,69); /* #313a45 rgb(49,58,69)  wie footer*/
font:15px/140% "Open Sans",sans-serif;    
}
body{}

a{
text-decoration:none;
}

input,button{
font-weight:normal;font-family:"Open Sans";
}

strong,b{
font-weight:600;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 1.9rem;
  margin-bottom: 0.4rem;
}

/*h1{  font-size: 2.0rem; line-height: 1.2em; margin-top: 5.0rem;  margin-bottom: 1.7rem;}*/
h1{  font-size: 4.0rem; line-height: 1.2em; margin-top: 0rem;  margin-bottom: 0rem; font-weight:200;}
h2{  font-size: 1.6rem; line-height: 1.2em; margin-top: 4.0rem;  margin-bottom: 1.5rem; font-weight: 400;}
h3{  font-size: 1.3rem; line-height: 1.2em; margin-top: 3.0rem;  margin-bottom: 0.4rem; font-weight: 400;}
h4{  font-size: 1.1rem; line-height: 1.2em; margin-top: 2.0rem;  margin-bottom: 0.4rem; font-weight: 600;}
h5{  font-size: 1.0rem; line-height: 1.2em; margin-top: 2.5rem;  margin-bottom: 0.4rem; font-weight: 600;}
h6{  font-size: 0.9rem; line-height: 1.2em; margin-top: 1.0rem;  margin-bottom: 0.4rem;}


div>h2:first-child {margin-top: 0px;}

/* //////////////////////////////////////////////////////////////////////////////// */
.gridwrap{
margin:auto;
min-width: 600px;
max-width:1200px; /*max-width:1285px;*/
padding:0;
overflow: hidden; /* prevents background coming through when margin a element */
}
body>.gridwrapper:first-of-type{
margin-top:0;
}
/* //////////////////////////////////////////////////////////////////////////////// */



#page{}
#topbar{}
#siteheader{}
#contentsection{}
#footer{}

#topbar {background-color: rgba(0,30,50, 1.0); color: rgba(255,255,255, 0.7);}
#topbar .gridwrap{ min-height: 20px; }
#topbar { display: none; }


/* //////////////////////////////////////////////////////////////////////////////// */

#siteheader{
    padding:0;
    background-image: url("img/siteheader.jpg") ;
	background-repeat: no-repeat;
	background-position:  50% 65%; 
	background-size: cover;	
	/*background-attachment: fixed;*/
}

/* /////////////////////////////// */
#siteheader div.gridwrap{ position: relative; height: 30vh; min-height: 220px; overflow:visible;}


#sitetitlearea { 
    position: absolute;  top: calc(50% - 110px); left: 0px; transform-origin: top left;
} 
    

#sitelogo{ margin-bottom: 10px;}
#sitelogo img { height: 80px; position: relative; left: -10px;  filter: drop-shadow(00px 2px 4px rgb(0 100 140 / 0.5));}



#titletext{ font-weight: 800;   text-transform: uppercase;  text-shadow: 0px 0px 20px rgb(0,100,140);}
#titletext div { color: rgba(255,255,255,1); line-height: 100%;}
#titletext div:nth-child(1) { /*color:red;*/ font-size: 36px; }
#titletext div:nth-child(2) { /*color: green;*/ font-size: 62px;}
#titletext div:nth-child(3) { /*color: blue;*/ font-size: 22px;}



#sitemenuarea { background-color: rgba(0,0,0,0.5);}
#sitemenuarea .gridwrap{ }
.sitemenu { color: rgba(255,255,255, 0.8); /*text-align: center;*/}
.sitemenu a { color: rgba(255,255,255, 0.8); display: inline-block; padding: 5px 10px; margin: 10px;}
.sitemenu a:first-of-type { padding: 5px 10px 5px 0px; margin: 10px 0px 10px 0px;}

.sitemenu a.languageselect{ display: inline-block; float: right;}

/* //////////////////////////////////////////////////////////////////////////////// */
#footer {background-color: rgb(49,58,69); }
#footer .gridwrap{ /*min-height: 100px;*/ padding: 20px 0px 20px 0px;}

.footercontent{ 
    min-height: 50px; color: white; text-align: center;
}
.footercontent .siteinfo{
  color: rgb(167,174,179);
	/*float: left;*/
	display: none;
}
.footercontent .footermenu{
  color: rgb(167,174,179);
	/*float: right;*/
}
.footermenu { color: rgba(255,255,255, 0.8); }
.footermenu a { color: rgba(255,255,255, 0.8);color: rgb(167,174,179); display: inline-block; padding: 5px 10px; margin: 10px 0px 10px 0px;}
.footermenu a:first-of-type { padding: 5px 10px; margin: 10px 0px 10px 0px;}



/* //////////////////////////////////////////////////////////////////////////////// */




#topbar, #siteheader, #sitemenuarea, .content, #footer{ padding-left:30px; padding-right: 30px;}




#contentsection{ clear: both;}
.content{ overflow: hidden; /*border: 1px solid red;*/}
/* content-1, content-2, ... */
content .gridwrap{ min-height: 200px; } /* tmp */
content.content-1{  } /* start */



.content.bgcolor-1{ background-color: rgb(255,255,255);  }
.content.bgcolor-2{ background-color: rgb(235, 240, 243);  }
.content.bgcolor-3{ background-color: rgb(251, 251, 251);  }
.content.bgcolor-4{ background-color: rgb(130, 170, 197);  }




div.highlight, p.highlight { padding: 20px; background-color: white;}	
.einschub{ padding:20px 50px;}	
span.bigger{ font-size: 1.7em;}	
.einrueckung { margin-left: 30px;}


	
	
.small{ font-size: 0.8em; line-height: 1.4em;}
	


ul, ol {
    padding-left: 25px;
    margin-left: 0px;
}



ol.largenumbers li{
    font-size: 20px;
    font-weight: 600;
    margin-top: 0.5em;
}
ol.largenumbers li span{
    font-size: 15px;
    font-weight: 400;
}






.gridwrap.bgimage-rb{
    background-image: url("img/portrait-einleitung.png");
    background-repeat: no-repeat;
    background-position: bottom right;
}

.footerbg{
    background-image: url("img/footerarch.png");
    background-repeat: no-repeat;
    background-position: bottom center;
}


/* /////////////////////////////// */










/* /////////////////////////////// */
.flex-container.intro{ display: flex;  flex-direction: row; margin: 50px 0px;}	
.flex-container.intro > div { 
	background-color: white;
	width: 320px;
	margin: 5px;
	padding: 15px 10px 50px 10px;;
	position: relative; /* mn wegen abs */
    box-shadow: 0 2px 14px -12px rgba(0,0,0, 1.0);
}	
.flex-container.intro > div div.c1{ font-size: 1.4rem; font-weight: 400;}
.flex-container.intro > div div.c2{ font-weight: 400; margin-top: 20px;}
/*.flex-container.intro > div div.c3{ margin-top: 0px; }
.flex-container.intro > div div.c4{ margin-top: 10px; position: absolute; bottom: 10px; }*/
	
.small{ font-size: 0.8em; line-height: 1.4em;}
	
/* /////////////////////////////// */


div.multicol {
  width: 100%;
  column-count: 1;
  column-gap: 30px;
  column-rule-color: silver;
  column-rule-width: 1px;
  column-rule-style: dotted;
}

div.multicol.cols2 {
  column-count: 2;
}
div.multicol.cols3 {
  column-count: 3;
}
div.multicol.cols4 {
  column-count: 4;
}

div.multicol h3, div.multicol h3{
    margin: 0px 0px 0.5rem 0px;
    font-weight: 600;
    font-size: 1.0rem;
    /*column-break-before: column;*/
		/*break-before: column;*/ /* hides after h3 everything*/
}

div.multicol.cols3.einleitung div {
    break-inside: avoid;
}

.multicol>h5:first-child{
    margin-top: 0px;
}


hr.section {
	column-span: all; margin: 50px 00px 50px 00px;
	border: 0px; border-bottom: 1px solid rgb(200,200,200);
}


/* ////////////////////////////// */

.faqlist h2{ 
	font-size: 1.2rem; font-weight: 600; margin: 6.0rem 0px 1.0rem 0px; padding: 0px 0px 0.5rem 0px; 
	border-bottom: 2px solid;
}

.faqlist div.multicol h3{ 
	font-size: 1.0rem; font-weight: 600; margin: 2.0rem 0px 0.5rem 0px;}

.faqlist div.multicol h4{ 
	font-size: 1.0rem; font-weight: 400; margin: 2.0rem 0px 0.5rem 0px; text-decoration: underline;}

.faqlist>h2:first-child  { margin: 3.0rem 0px 0.5rem 0px; }
div.multicol>h3:first-child  { margin: 0.0rem 0px 0.5rem 0px; }
.faqlist div.multicol h3+h4 { margin: 1.0rem 0px 0.5rem 0px; }
.faqlist div.multicol hr.section+h3 { margin: 0.0rem 0px 0.5rem 0px; }


.glossar {line-height: 1em; font-size: 0.9rem;}
/* ///////////////////////////// */



/* ///////////////////////////// */
ul#videolist{ list-style-type: none; margin: 0px; padding: 0px;}
ul#videolist li { margin: 0px 0px; border-top: 1px solid rgb(200,200,200); /*border-bottom: 1px solid rgb(100,100,100)*/;}
ul#videolist li div.videotitle { 
	cursor: pointer; padding: 18px 10px; background-color: none;
	padding-left: 60px; 
	background-image: url("img/playicon2.svg");
	background-repeat: no-repeat;
	background-position: 10px center; 
	line-height: 120%;
}
ul#videolist li div.videotitle:hover { background-color: rgba(235,235,235,1.00);}
ul#videolist li.li-active div.videotitle { 
	background-color: rgba(200,236,255,1.00); font-weight: 600;
	background-image: none;
}
ul#videolist li div.video { 
    overflow:hidden; 
    transition: height  ease-in-out 0.35s;
    height: 0px;
    /*visibility: hidden;*/
}
ul#videolist li div.video.showvideo { 
    visibility: visible;
    height: 500px;
	 	/*height: calc((100vw / 1.75) - 20px);*/
}
.showvideo iframe{
		height: 500px;
		/*height: calc((100vw / 1.75) - 20px);*/
}
span.videonumber{ display: inline-block; min-width: 60px;}
.videotitletext{}
.videospeaker{font-size: 0.8rem; opacity: 0.8;}
/* ///////////////////////////// */






table.tarife{ width: 100%; }
table.tarife td{ vertical-align: bottom; /*border: 1px solid green;*/ padding:10px 0px;}
table.tarife p{ margin: 0px;}
table.tarife td:nth-child(2){ font-style: italic; width: 150px; text-align: right;}
table.tarife tr td  h2 { font-size: 1rem; margin: 0; font-weight: 600;}
table.tarife tr {border-bottom: 1px solid rgb(200,200,200);}

.agb ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}
.agb li {
  display: table;
  counter-increment: item;
  margin-bottom: 1.6em;
}
.agb li:before {
    content: counters(item, ".") ". ";
    display: table-cell;
    padding-right: 0.6em;  
    font-weight: 600;
}

.agb li li {
    margin: 2px 0px;
}

.agb li li:before {
    content: counters(item, ".") " ";
}
.agb>ol>li { font-weight: 600; /*color: red;*/}
.agb>ol>li * { font-weight: 400; /*color: rgb(30,44,61);*/ }






/*  ////// three icons  ////////////    */
.boxlist{ 
	display: flex;
	flex-direction: row;
	flex-wrap: wrap; 
	justify-content: center;
	align-items: center;
	gap:50px;
}
.boxlist > a{
	/*flex:auto;*/
	width: 200px; background-color: white; 
	align-self: stretch;
	border-radius: 10px;
	box-shadow: 0 6px 6px 0px rgb(0 0 0 / 0.05);
	color: inherit;
	text-decoration: none;
	hyphens: auto;
	text-align: center;
}
.boxlist > a > div{ padding: 12px 15px 0px 15px; 	text-align: left;}
.boxlist h2 {	margin: 0px; }
.boxlist p {	line-height: 1.2em; font-size: 0.9em; margin: 0px;}
.boxlist img {  margin: 10px 0px;}

.boxlist > a:hover{
	box-shadow: 0 6px 14px 0px rgb(0 0 0 / 0.2);
}
/*  ///////////////////////    */





.xxxback-to-top {
 color: rgba(30,44,61, 1.0);   
 background-color: white;
 position: fixed;
 bottom:30px;
 right:20px;
 padding:1em;
 z-index: 100;
 border: 1px solid rgba(30,44,61, 1.0);
 border-radius: 6px;
 box-shadow: 0 2px 8px rgba(0,0,0, 0.5);
}
.back-to-top {
  display: block;
  width: 100px;
  height: 100px;
  background-image: url(img/circlearrow.svg);
  background-repeat: no-repeat;
  position: fixed;
  bottom: 30px;
  right: 20px;
  z-index: 100;
}






.maphero {	background-image: url("img/maphero.png"); background-repeat: no-repeat;	background-position: calc((100vw / 2) - 2400px);}
.maphero .gridwrap{	min-height: 500px;}



@keyframes landing{
  0%   {/*background-color:red; left:0px; top:0px;*/ opacity: 0; padding-left:150px;}
  100% {/*background-color:green; left:0px; top:0px;*/ opacity: 1; padding-left:0px;}
}
.anim-landing{
	/*background-color: red;*/
  animation-name: landing;
  animation-duration: 2s;
	animation-fill-mode: forwards; 
	animation-timing-function: cubic-bezier(0.15, 0.32, 0.13, 0.89);

}



/*.faqlist h2 + div {
	max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}*/





	/*///// collapse faq //////*/
			.faqlist.smallclient h2 {
			cursor: pointer;
			margin-top: 2rem;
		}
		.faqlist.smallclient h2.active {
			margin-top: 4rem;
		}
		.faqlist.smallclient h2:after {
			content: '\002b'; /* (+) */ 
			font-size: 1.8rem;
			font-weight: 400;
			float: right;
			margin-left: 15px;
		}

		.faqlist.smallclient .active:after {
			content: "\002d"; /*  (-) */
			font-size: 1.8rem;
				font-weight: 400;
		}
  /*///////    ////////*/




/* ///////////////////////  Media Query  //////////////////////////////////////////////////////// */

.gridwrap{
box-sizing: border-box;
margin:auto;
min-width: 350px; /*900*/
max-width:1200px; /*1200*/
}

@media (max-width: 600px) {
    /*.sitemenu br.sitemenuebreak { display:inherit;}
    #topbar {    position: relative; }
    #contentsection{ }*/
    .shorten { display:none;}
    
}
@media (min-width: 0px) and (max-width: 1200px) { 
	.maphero {	background-position: -1720px;}
}

@media (min-width: 0px) and (max-width: 900px) { 
    #sitetitlemain{ font-size: 25px;}
    #topbar, #siteheader, #sitemenuarea, .content, #footer{ padding-left:20px; padding-right: 20px;  }
    ol.largenumbers li{ font-size: 15px;}
    .gridwrap.bgimage-rb{ 
        background-size: 300px auto;
        background-position: bottom 0px right -10px;
    }
    .optionalbreak { display: none;   }
    h2{  font-size: 1.4rem; }
    div.multicol.cols2, div.multicol.cols3{  
      column-count: 1;
      columns: initial;
    }
    div.multicol.cols4 {  
			columns: initial;
      column-count: 2;
    }
	
    .leistungen ul {break-after: auto;}
    .multicol h3 {break-before: auto;}
    .datumsliste ul>li {break-inside: auto;}
    div.multicol.cols2 h3{ margin-top: 2em;}
 
    .sitemenu a span:nth-child(1){ display: none;} 
    .sitemenu a span:nth-child(2){ display: inline;}
    /*.sitemenu a {padding: 0px 10px;} */
    .sitemenu a {padding: 5px 5px; /*margin: initial 5px;*/ margin-right: 0px}
    .sitemenu a:first-of-type { padding: 5px 5px 5px 0px; /*margin: 10px 0px 10px 0px;*/}
    
    .content.titleimg{
        /*background-image: url('img/heroimage-smalldisplay.png'); */
    }
    
    #sitetitlearea {transform: scale(0.95);}
	  span.videonumber{ display: none;}
    
		ul#videolist li div.video.showvideo, .showvideo iframe { 		 height: calc((100vw / 1.75) - 30px);	}
	
		/*.maphero {	background-position: -1700px;}
		.maphero .gridwrap{	min-height: 500px;}*/
	
	
	
	/*///// collapse faq //////*/
	/*
			.faqlist h2 {
			cursor: pointer;
			margin-top: 2rem;
		}
		.faqlist h2.active {
			margin-top: 6rem;
		}
		.faqlist h2:after {
			content: '\002b'; 
			font-size: 1.8rem;
			font-weight: 400;
			float: right;
			margin-left: 5px;
		}

		.faqlist .active:after {
			content: "\002d";
			font-size: 1.8rem;
				font-weight: 400;
		}
*/
  /*///////    ////////*/
	
	
	
	
	
	
	
}


@media only screen and (orientation:portrait) {
    .content.titleimg{
      /* height: auto;
        min-height:300px; 
        */
    }
}

@media (min-resolution: 200dpi) { 
}

/* For IE10 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    div.multicol, div.multicol {  
        column-count: auto;
        columns: initial;
    }
}


@media (min-width: 0px) and (max-width: 630px) { 
	 #sitetitlearea {transform: scale(0.7);}
	#siteheader{
		background-image: url("img/siteheader-small.jpg"); 
	}
	.back-to-top {
		visibility: hidden;
		height: 0px; width: 0px;
		font-size: 0px;
	} 

	
}