html {
	width: 100%;
	height:100%;
}

body {
	font-family:'Roboto';
	margin:0px;
	padding:0px;
	width: 100%;

	/*overflow-y:auto;*/
}
/*
:root {
  --alfarbe: #3D99D4;
   
    --alfarbe: rgb(61,153,212);
}
*/
/*

rgb(47,153.211)

* {
	margin:0px;
	padding:0px;	
}*/
.hg {
	position:relative;
	text-align: left;
	margin-right: auto;
	margin-left: auto;	
    z-index:1;
    /*
    overflow:hidden;
    */
    /*
    background-color: #FFF;
    background-color: rgba(255,255,255,0.2);
    */
}
.header { /*height:calc(100vw / 9);*/ /*margin-top:calc(100vw * -0.02);*/}

.fixed {
	position:fixed;
	z-index:100;
	top:0px;
	left:0px;
	width: 100%;
	background-color: rgba(255,255,255,0.2);
	height:10px;
}

.hedertext1 {
	fill: var(--alfarbe);
	font-size:31px;
	font-weight:600;		
}
.hedertext1m {
	fill: var(--alfarbe);
	font-size:76px;
	font-weight:600;		
}
.hedertext2 {
	fill: var(--alfarbe,#3D99D4);
	font-size:76px;
	font-weight:600;
	display:none;	/**/
}
.temp1 .hedertext2 { display:block;}



.claim { 
	/*border:solid 1px pink;*/
	position:relative;
	bottom:16px;
	left:45%;
}


.demo-slidebar {
    background-color:var(--alfarbe);
    text-align: left;
    margin-top: 0px;
    width: 455px;
    width:calc(100vw / 9*3);
    height: calc(100vh - 0px);
    min-height: 400px;
}
.scrollbox {
    height: calc(100vh - 20px);
    overflow: auto;
    display: block;
    margin-top: 30px;
    padding-top: 0px;
    /*border:solid 1px red;*/
}
.closebox {
	cursor:pointer;
	position:absolute;
	z-index:2000;
	top:0px;
	right:0px;
	width:calc(100vw / 9);
	/*height:calc(100vw / 9);
	background-color:#FFF;
	*/
}

.menubox {
	cursor:pointer;
	position:absolute;
	top:0px;top:-1%;
	right:calc(100vw / 9 *-1);
	width:calc(100vw / 9);
	/*height:calc(100vw / 9);*/
	background-color:#FFF;
}

.logobox {
	position:absolute;
	top:0px;
	left:calc(100vw / 9 *-1);
	width:calc(100vw / 9);
	/*height:calc(100vw / 9);*/
	background-color:#FFF;
}
.logo {
	/*
	position:relative;
	display:block;
	width: 90%;	margin:0px;
	padding:0%;
	*/

	/*background-color:pink;*/
}

.logo img {
	width:95%;
	height:auto;
}

.menubox img{
	width:95%;
	height:auto;
}

.menu {
    background-image: url(../userfiles/images/meta/menu.svg);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: 40px auto;
    height: 42px;
    width: 42px;
    margin-top: -16px;
    margin-top: 36px;
    left: 10px;
    margin-right: 0px;
    /*border: solid 2px #ccF;*/
    cursor: pointer;
    display: none;
}


.main {

}
.themen {
	min-height: calc(100vw /9*2);
	/*margin-left: calc(2% /7*-1);*/
	/*margin-left: -0.5%; */
}
.kachelbox:hover .kachelblack {opacity:0.5;}
.kachelbox {
	float:left;
	width: calc(96% /7*1);
	margin-left: calc(4% /7*1);
	margin-bottom: calc(1vw /9*1);
	padding:0px;	
}

.kachelbox1:hover .kachelblack {opacity:0.5;}
.kachelbox1 {
	float:left;
	width: calc(100% /7*1);
	width: 14.285%;
	height:calc(100vw/9);
	margin:0px;
	margin-bottom:0px;
	padding:0px;	
	background-color:pink;/**/
	fill:pink;
}
.kachelbox1 a{
	/*display:block;*/
	
}
.kachelbox1 svg{
	width: 100%;
	margin:0px;
	padding:0px;
	/*display:none;*/	
}



.kachelbox2:hover .kachelblack {opacity:0.5;}
.kachelbox2 {
	float:left;
	width: calc(100% /7*1);
	width: 14.285%;
	/**/height:calc(100vw/9);
	margin:0px;
	margin-bottom:0px;
	padding:0px;	
	/*background-color:pink;*/
}
.kachelbox2 a{
	/*display:block;*/
	
}
.kachelbox2 svg{
	width: 100%;
	margin:0px;
	padding:0px;
	/*display:none;*/	
}

.svgwhite {fill:#FFF;}
.svgblue {fill:var(--alfarbe);}
.svgblack {fill:#000;}
.kachelwhite {fill:red;fill:white;}
.kachelgrau {fill:red;fill:#ccc; fill:#FFF;fill:transparent;}
.kachelgrau2 {fill:#ccc; fill:transparent; /**/}
.kachelblack {opacity:0;}
.temp2 .dreieck, .temp3 .dreieck {display:none;}
.dreieck {display:none;}
.dreieck2 {display:none;}

.kacheltext {
	fill:#FFFFFF;
	font-weight:600;
	font-size:23px;
	/*text-shadow: 2px 2px 5px #000;*/
	text-shadow: 0px 0px 20px rgba(0,0,0,0.6);
	/*text-shadow: 0 0 10px #000, 0 0 25px #000;*/
}
.kacheltext1 {
	fill:#FFFFFF;
	font-weight:600;
	font-size:33px;
	text-shadow: 0px 0px 20px rgba(0,0,0,0.6);
}
.kacheltext2 {
	fill:#FFFFFF;
	font-weight:300;
	font-size:23px;
	text-shadow: 2px 2px 5px #000;
	text-shadow: 0px 0px 20px rgba(0,0,0,0.6);
}


.newsbox:hover .kachelblack {opacity:0.5;}


.l2 div {
	
}
.geschichte {
		height:calc(100vw *0.382);
		/*background-color: rgba(255,255,0,0.2); */
}
.geschichten {
	margin:0px 0px 0px 0px; 
	width: calc(100% /7*3); 
	width: calc(100vw /9*3); 
	width: 43%;
	background-color: rgba(255,255,0,0.2); 
	float:left;

	
}
.geschichten svg{
	width: 100%; margin:0px;
	
}
.geschichten:hover .kachelblack {opacity:0.5;}


.storybox {
	position:absolute;
	top:0px;
	left:0px;
	z-index:100;
	width:100%;
	/*height:100%;*/	
	background-color: rgba(0,0,255,0.2);
	display:none;
}
.storybox img {
	width:100%;
	width:99.5305164%;
	height:auto;
	/*display:none;*/
}
.legende {
	position:absolute;
	top:calc(100vw /9*3.6); 
	left:0px;
	z-index:100;
	width:calc(100% /7*2); 
	height:calc(100vw /9); 
	background-color: rgba(255,0,255,0.2);
}

.zitat1 {
	background-image: url(../userfiles/images/meta/zitat_oben.svg), url(../userfiles/images/meta/zitat_unten.svg);
    background-repeat: no-repeat;
    background-position: 0px 0px, 0px bottom;
    background-size: 100% auto;
	padding:0px 10%;
	/*background: rgba(0,0,0,0.05);*/
}
.zitat1 h2, .zitat1 h3{
	font-size: clamp(20px, 1.3vw, 1.3vw);
	margin-top:0;
	margin-bottom:0.5em;
}

.play {
	background-image: url(../userfiles/images/meta/videoplay2.svg);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: 100% auto;

	position:absolute;
	top:calc(50%);
	left:50%;
	width:18%;	
	height:38%;
	margin-left:-9%;
	margin-top:-9%;
	/*
	margin-left:-50%
	border:solid 1px red;
	*/
}
.playi {
	background-image: url(../userfiles/images/meta/animationstarten2.svg);
	background-image: url(../userfiles/images/meta/animationstarten3.svg);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: 50% auto;

	position:absolute;
	top:calc(70%);
	left:20%;
	width:26%;	
	height:38%;
	margin-left:-13%;
	margin-top:-13%;
	/*
	margin-left:-50%
	border:solid 1px red;
	*/
}
.storyleft {
	margin:0px 0px 0px 0px; 
	
	width: calc(100% /7*3); 
	width: 22.22%; 
	width: calc(100vw / 9*2); 
	width: 22.22vw; 
	background-color: rgba(255,0,255,0.2); 
	float:left;
	/*min-height:10vw;*/
	
}
.storytext {
	margin:0px 0px 0px 0px; 
	width:54.44%; 
	width: calc(100% /7*3); 
	width: calc(100vw /9*5);
	width:53.44vw;  
	background-color: rgba(255,255,0,0.2); 
	float:left;
	padding-left:3%;
}
.portraitbox {
	margin:0px 0px 1% -1%;
}
.portrait {
	position:relative;
	z-index:1;
	width:49%;
	margin:0px 0px 1% 1%;
	float:left;
	/*border:solid 1px lightgrey;*/
}
.portrait img{
	width:100%;
	width:99.5305164%;
	width:100%;
	height:auto;
}
.portrait .legende h3 {
	font-size: calc(100%*1.1);
	font-size: clamp(11px, 1.1vw, 15px);
	color:#FFF;
	font-weight:600;
	margin-bottom:0.5em;
}
.portrait .legende a {
	color:#FFF;
}
.portrait .legende p {
	font-size: calc(100%*0.9);
	font-size: clamp(12px, 1.1vw, 15px);
}
.portrait .legende {
	color:#FFF;
	position:absolute;
	top:50%; 
	left:0px;
	z-index:100;
	width:100%; 
	height:calc(100% *0.50); 
	background-color: rgba(255,0,255,0.2);
	background-color: var(--alfarbe);
	padding:4%;
	display:none;/**/
}
.portrait:hover .legende {
	display:block;
}


.kundenbox {
	margin:0px 0px 1% -1%;
}
.kunden {
	position:relative;
	z-index:1;
	width:32%;
	margin:0px 0px 1% 1%;
	float:left;
	/*border:solid 1px red;*/
	background-color:#F2F2F2;
}
.kunden img{
	width:100%;
	height:auto;
	/*border:solid 1px red;*/
}
.kunden .legende h3 {
	font-size: calc(100%*1.1);
	color:#FFF;
	font-weight:600;
	margin-bottom:0.5em;
}
.kunden .legende a {
	color:#FFF;
}
.kunden .legende p {
		font-size: calc(100%*0.9);
		margin:0px;
}
.kunden .legende {
	color:#FFF;
	position:absolute;
	top:0px; 
	left:0px;
	z-index:100;
	width:100%; 
	height:calc(100% *1); 
	background-color: rgba(255,0,255,0.2);
	background-color: var(--alfarbe);
	padding:4%;
	display:none;/**/
}
.kunden:hover .legende {
	display:block;
}

.liste{
	cursor:pointer;
}
.liste h2{ 
    background-image: url(../userfiles/images/meta/icon_plus.svg);
    background-repeat: no-repeat;
    background-position: 0px -20px;
    background-size: 20px auto;
    padding-top:2px;
    padding-left:25px;
    margin-left:-25px;
    min-height:20px;
	color:var(--alfarbe);
}
.liste h2.collapsed { 
	background-position: 0px 0px;
	color:pink;
	color:var(--alfarbe);
}
.liste:hover h2 {
	color:var(--alfarbe);
	color:#000;
}

.prev {
	background-color: rgba(255,255,0,0.2); 
	position:absolute;	
	z-index:200;
	left:calc(100vw /-9);	
	width: calc(100vw /9); 
	
}
.next {
	background-color: rgba(255,255,0,0.2); 
	position:absolute;	
	z-index:200;
	width: calc(100vw /9); 
	right:calc(100vw /-9);	
	
}
.stor {
	/*position:fixed;*/
	top:calc(100vw /9); 
	top:calc(100vw /5); 
	/*border:solid 1px red;*/
	
}
.pic {
	cursor:pointer;
	top:calc(100vw /9*2.4); 
	/*border:solid 1px blue;*/
	
}
.stortext{fill:var(--alfarbe);font-size:24px;font-weight:600;}

.hometext {

	margin:0px; 
	width: calc(100% /7*2); 
	width: 27.333%; 

	background-color: rgba(255,0,255,0.2);  
	background-color: #FFF; 
	float:left;
	
}
.leadboxX {
	position:absolute;
		position:relative; 
	top:-10px
	left:-100px;
	width:98%;
	background-color: rgba(255,255,0,0.2); 
	 
}
.hometext p {
	color:#012C3A;	
	font-size: clamp(0.8vw, 1vw, 1.05vw);/**/
	font-weight:300;
	line-height:1.16em;
	padding:0.5% 1% 0.5% 0.5%;
}

.news {
		position:absolute;

	top:0px;
	left:71.333%;
	margin:0px; 
	width: calc(100% /7*2); 
	background-color: rgba(0,255,255,0.2); 
	/*float:left;*/
	
}

.footer .weiss2 {
	width: 96%;
	margin:0px 2%;
	background-color: pink;
}
.main .footer .rechts, .main .footer .content {
	padding: 10px 2%;
	margin:0px;
}
.footer {
	/*
	position:absolute;
	bottom:0px;
		width: calc(100vw); 
*/
	margin-top:10%;
	margin-top:5vw;
}
.footer2 {
	position:relative;
	z-index:10;
	text-align:right;
	padding-top:5px;
	margin-bottom:10px;
	color:#999;
	min-height:40px;
}
footer2 a{
	
}
.footer1 {
	position:relative;
	z-index:10;
	background-color: var(--alfarbe);
	color: #FFF;

}
.footer1 a {
	color: #FFF;
	font-family:'Roboto';
	/*
	font-weight:600;
	font-size:15px;
	*/
	font-size: clamp(14px, 1.1vw, 1.1vw);
}
.footer1 a:hover {
	color:var(--lauftext);
}
.adressboxXX span {
	display:block;
	margin:1.5% 0px 0px 0px;
	padding:0px;
	float:left;
}
.adressbox .adr {
	/*display:block;*/
	display:inline-block;
	margin:1.5% 0px 0px 0px;
	padding:0px;
	/*float:left;*/
}
.adressbox .left {
	/*background-color: yellow;*/
	width:38%; 	width:98%;
}
.adressbox .center {
	text-align:center;
	/*background-color: gold;*/
	width:32%;
}
.adressbox .right {
	text-align:right;
	/*background-color: pink;*/
	width:30%;
}
.footer1 div {
	margin-top:1%;
	margin-bottom:1%;
}
.footer1 t {
	display:inline;
	padding:0px 1px;
}

.adressbox { margin:0px; width: calc(100% /7*5); float:left;/**/ 	/**/}
.iconbox { margin:0px; width: calc(100% /7*2); background-color: pink; text-align:right; float:left;/**/}
.iconbox img { width:12%; height:auto; float:right; margin-left:10%; min-height:40px;}

.trenn {
	/*background-color: pink;*/
	margin: 0px 0.5em 0px 0.8em;
}

.adressbox .trenn:last-child(-1) {
  /*background: red;*/
}


bo {
	/*background-color: gold;*/
	white-space: nowrap;
}
.adressbox .left {
	/*border:solid 1px red;*/
	
}
.trenner {
	background-color: #A8CBDF;
	margin: 0px 2% 40px 2%;
	clear:left;
	height:1px;
	
}
.trenner2 {
	background-color: #C95B40;
	margin: 10px 2% 30px 0%;
	margin: 0.5em 2% 2em 0%;
	clear:left;
	height:1px;
	
}
.t1.trenner2 {
	background-color: #C95B40;
	margin: 0.5em 4% 2em 0%;
	clear:left;
	height:1px;
	
}


.anker, .anker1, .anker2 {
	height:10px;
	width: 10px;
	z-index:8000;
	font-size:10px;	
	left:-5250px;
	position: relative;
	position: absolute;
	background-color: #FFC;
}
.anker {background-color: #ccF;}
.anker1 { top:-130px; background-color: #ccF;}
.anker2 { top:540px; background-color: gold;}



.controll {
	position: fixed;
	top:50px;
	left:-5310px;
	height:auto;
	width: 500px;
	z-index:7400;
	/*border:solid 2px red;*/
	
}
.controll input {
	width: 90%;
}
.clr {
	clear:both;
	height:0px;
	font-size: 0px;
	line-height:0px;
	min-height:1px;
}

body { background-color: orange; font-size: 18px; line-height: 22px;/**/}
.hg, .breite  { width:77.778%; /**/  }
.smart {display:none;}
.desk {display:block;}
.smart2 {display:none;}
.desk2 {display:block;}


@media only screen and (max-width: 1919px) {
	body { background-color: gold; }
	.hg, .breite  { /*width:1600px;*/  }	
	.header { /*height:243px;*/ }

}
@media only screen and (max-width: 1599px) {
	body { background-color: orange; /*font-size: 18px; line-height: 24px;*/}
	.hg, .breite  { /*width:1280px;*/  }
	.header { /*height:208px;*/ }

}




@media only screen and (max-width: 1279px) { /* Desktop */

	body {  background-color: grey; /*font-size: clamp(1.3vw, 1.4vw, 2vw); */}
	h1 {font-size: 1.2em ;}
	h2 {font-size: 1.1em ;}
	p, h1.lead, h2, h3, td, li { font-size: clamp(1.3vw, 1.4vw, 2vw);font-size: clamp(14px, 1.4vw, 2vw);}
	/*
	.hometext p { font-size: clamp(1.3vw, 1.4vw, 2vw); padding:0.5%;}
	*/
	.hg, .breite { /*width:1024px;*/ }
	
	.header { /*height:160px;*/  }


}
@media only screen and (max-width: 1119px) {
		.adressbox .adr { margin:0% 0px 0px 0px;}
		.storytext { 	width:54vw;  background-color: yellow; }

}
@media only screen and (max-width: 1024px) { /* Tablet quer*/
	body { background-color: blue; font-size: clamp(16px, 1.9vw, 2vw); line-height: 18px;	}	
	.demo-slidebar { width:calc(100vw / 9*4); }

	p, h1.lead, h2, h3, td {/*font-size: clamp(1.8vw, 1.9vw, 2vw);*/}
	
	h1.lead {font-size: clamp(1.8vw, 1.9vw, 2vw);}
	.geschichte {/*border-bottom:solid 5px blue;*/}
	.hometext p { font-size: clamp(1em, 1.4vw, 2vw); padding:0.5%;}
	
	.stortext {font-size:28px; font-size:32px;}
	.storytext { 	width:54vw; background-color: gold; }




	.geschichten { width: calc(100vw /9*4.2);	}
	.hometext { width: calc(100% /7*7); }
	.news { width: calc(100% /7*2.8); }
	    
	.smart {display:block;}
	.desk {display:none;}	
	
	.portrait .legende {top:40%;  height:calc(100% *0.60); }

	.adressbox .adr {
		display:block;/**/
		margin:0.5% 0px 0px 0px;
		padding:0px;
		/*float:left;*/
	}
	.adressbox .trenn:last-child(-1) {
	  /*background: red;*/
	}
	.adr1 .trenn {
		/*background: gold;*/
	}
	.adr1 .trenn:nth-of-type(2n+1) {
		/*background: red;*/
		display:none;
	}
	 
	/*
	font-size: clamp(1.0vw, 1.1vw, 1.2vw);
	
	.hg, .breite { width:768px; }
	.header {   }
	*/
	
	
}

@media only screen and (max-width: 768px) { /* Tablet hoch*/
	
	body { background-color: red; font-size: 16px; line-height: 20px; 	overflow:auto;	}
	/*h2 {font-size: 1.1em ;}*/
	p, td, h1.lead, h2, h3 { font-size: clamp(1em, 1.9vw, 2vw);}

	h1 { }
	.demo-slidebar {  width:calc(100vw); }
	.demo-slidebar { width:calc(100vw *0.42); }

	.scrollbox { }
	
	.themen { clear:left;/* padding-top:2em; border-bottom:solid 5px red;*/}
	/*
	.themen { width: calc(100% /7*2.8); float:right;}
	.hometext {width: calc(100vw /9*4.2);float:right; padding-right:4%;}

	.themen { width: calc(100vw /9*4.2); float:right;}
	.hometext {width: calc(100% /7*2.8); float:right; padding-right:4%;}
	*/
	.hometext p	{font-size: 16px; font-size: clamp(16px, 1.6vw, 2vw); }
	.kachelbox2 {  width: calc(100%/5);  height:auto;  margin-bottom:-1%; }	
	
	
	.closebox  { width:calc(100vw / 5); }

	
	
	.geschichte {/*border-bottom:solid 5px red;*/ margin-bottom:calc(100vw *0.1);}
	.temp2 .geschichte {/*border-bottom:solid 5px red;*/ margin-bottom:calc(100vw *0.15);}
	

	.legende { width:calc(100%); max-width:400px;  height:calc(100vw /9); /*border:solid 1px red;*/}
	.portrait .legende {top:50%; height:calc(100% *0.50); }	
	
	.stortext { font-size: 34px; display:none;}
	.storyleft { width: 78vw; /*min-height:10px; width: calc(100vw); height:calc(100vw *0.6);*/ }
	.storytext { width: calc(100vw / 9 * 7); padding-left: 0%; background-color: rgba(255,100,0,0.2); }
	.adressbox bo { display:block;}
	.adressbox .trenn { display:none;}

	.iconbox img { width: 35px;margin-left: 5px; margin-bottom: 0px;}
	
	.next { }
	.headerbox { background-color:#FFF;}
	.playi { background-size: 110% auto; top:calc(60%); left:25%; }
	.demo-slidebar { width:calc(100vw / 9*6); }


}

@media only screen and (max-width: 512px) {
	
	body { background-color: gold; }
	.hg, .breite  { width:97%; margin-left:2%;/**/  }
	.demo-slidebar {  width:calc(100vw); }
	td {line-height:1.2em; padding-right:0px;}
	td:first-of-type { padding-right:10px; }
	.geschichte.ge3 {/*border-bottom:solid 5px gold;*/ height:calc(100vw *0.86);}
	
	
	.storyleft { width: calc(100vw); height:calc(100vw *0.14); }
	.temp2	.storyleft { width: calc(100vw); height:calc(100vw *0.3); }
	.dreieck2 {display:block;}
	.stor {display:none;}
	
	.hometext p	{font-size: 16px; font-size: clamp(16px, 1.6vw, 2vw); }
	
	.kachelbox2 {width: calc(100%/2);height:auto;margin-bottom:-1%;}	
	.temp2 .geschichte { margin-bottom:8em;}
	.temp3 .geschichte { margin-bottom:3em;}
	
	.temp2 .storyleft { width: calc(100vw); height: calc(100vw *0.1); }
	.temp3 .storyleft { width: calc(100vw); height: calc(100vw *0.1); }
	.storytext, .sp50 { width:100%; }

	.smart2 {display:block;/*border-bottom:solid 5px red;*/padding-bottom:10px;}
	h1.smart2 {margin-top:10%;}
	.desk2 {display:none;}	

	.logobox, .menubox { display:none; }
	.portrait .legende { width:100%; }
	.portrait .legende p, .portrait .legende h3 { font-size: clamp(16px, 1.2vw, 18px); }
	
	.legende {/*position:static;*/ top:calc(105%); left:10%; width:calc(80%);  height:auto;  }
	
	.temp2 .legende { top:calc(125%); left:0%; width:calc(100%);  height:auto;  }
	.temp2 .ge3 .legende { top:calc(110%);  }
	.temp3 .ge3 .legende { top:calc(102%); /**/ }
	
	td { padding: 0px 20px 0px 0px;}
	
	.pic { top: calc(100vw *0.49);  /*top: auto;  */  margin-top:-4%; }
	.ge3 .pic { top: calc(100vw *0.98);  /*top: auto;  */  margin-top:-4%; }
		
	.playi { background-size: 100% auto; top:calc(50%); left:50%; width:40%; height:38%; margin-left:-20%; margin-top:-13%;}
	.play { top:calc(50%);left:50%;width:40%;	height:38%;margin-left:-20%;margin-top:-20%;}
	
	.kunden { 	width:49%; margin:0px 0px 1% 1%; }
	.liste h2{  padding-left:25px;  margin-left:0px;}
	
	.prev { left:-3%; width: calc(100vw /9);  }
	.next { right:-2%; width: calc(100vw /9);  }
	.portrait {width:98%; 	margin:0% 1% 4% 1%;}

	.iconbox {padding:1% 2% 1% 0px;}

	.kacheltext1 { font-size:16px; text-shadow: 0px 0px 20px rgba(0,0,0,0.6); display:none;}

}