@font-face {
   font-family: 'OpenSans';
   src: url(../font/OpenSans-Light.ttf) format('truetype'); 
   font-style: lighter;
  font-weight: lighter;
}
@font-face {
   font-family: 'OpenSans';
   src: url(../font/OpenSans-Regular.ttf) format('truetype'); 
   font-style: normal;
  font-weight: normal;
}
@font-face {
   font-family: 'OpenSans';
   src: url(../font/OpenSans-Bold.ttf) format('truetype'); 
   font-style: bold;
  font-weight: bold;
}


body {
	display: -ms-grid;
	display: grid;
	text-align:center;
	align-items: center;
	justify-content: center;
	align-content:top;	
	margin:0;
	padding:0;
	height:auto;
	min-height: 100vh;
	background-color: rgb(0,0,0);  
	color:rgb(250,250,250);
	overflow:scroll;
	/*overflow-x:auto;*/ 
	overflow-x:hidden;
	line-height:1.4em;
	font-size:1em;
	font-family: 'OpenSans', 'Arial', 'Helvetica', sans-serif;
	grid-template-rows:auto auto auto auto auto auto;
	grid-template-columns:auto auto auto auto auto;
	

}


poorist{
margin: 0 auto;
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 4;
padding:0;
z-index:2;
position:relative;
max-width:1300px;
}

h1 img{
	width:100%;
}
/***************************************************************************/

.naviicon{
	margin:0 auto;
	position:fixed;
	right:1.5em;
	top:1.5em;
	text-align:center;
	display:table;
	z-index:100;
}


.naviicon a{
	margin:0 auto;
	display:table;
	text-decoration:none;
	padding:0.8em;
}

.naviicon a i{
	margin:0 auto;
	display:block;
	border-top:0.1em solid rgb(255,255,255);
	border-bottom:0.1em solid rgb(60,60,60);
	line-height:0.2em;
	height:0em;
	padding:0;
	margin-bottom:0.6em;
	
	width:3em;
}

.naviicon:hover a i{
	border-bottom:0.1em solid rgb(255,255,255);
	border-top:0.1em solid rgb(60,60,60);	
}

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

navigation{
margin: 0 auto;
top:0;
right:0;
bottom:0;
position:fixed;
text-align:left;
height:100%;
z-index:1001;
background-color:rgba(0,0,0,1.0);
overflow:scroll;
overflow-x:hidden;
font-size:120%;
}

navigation innernavi{
margin: 0 auto;
display:table;
text-align:left;
margin:2em;
height:auto;

}

navigation innernavi a{
margin: 0 auto;
display:block;
margin-left:0;
text-align:left;
text-decoration: none;
color:rgba(255,255,255,0.8);
padding:0.2em;
margin-top:0.5em;
border-bottom: 1px solid rgba(255,255,255,0.2);
-webkit-transition: -webkit-transform 0.2s;
transition: -webkit-transform 0.2s;
transition: transform 0.2s;
transition: transform 0.2s, -webkit-transform 0.2s;
}


navigation innernavi a:hover, navigation innernavi a.aktiv{
border-bottom: 1px solid rgba(255,255,255,1.0);
color:rgba(255,255,255,1.0);
-webkit-transform: scale(1.05);
 transform: scale(1.05);
}

navigation .naviclose{
margin: 0 auto;
display:table;
text-align:left;
text-decoration: none;
color:rgba(255,255,255,0.8);
padding:0.4em;
margin-bottom:0.5em;
font-size:170%;
margin-left:0em;
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
}

navigation .naviclose:hover{
color:rgba(255,255,255,1.0);
-webkit-transform: scale(1.2);
 transform: scale(1.2);
}

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

breadcrumb{
margin: 0 auto;
margin-top:1.5em;
display:block;
text-align:left;
width:96%;
padding:2%;
font-size:90%;
}

breadcrumb a{
margin: 0 auto;
text-decoration:none;
color:rgba(255,255,255,0.55);
margin-right: 1em;
}

breadcrumb a:hover{
color:rgba(255,255,255,1.0);
text-decoration:underline;
}

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

stolzref{
margin: 0 auto;
display:block;
background:linear-gradient(110deg,rgba(222,222,222,0.3), rgba(60,60,60,0.4) 30%,rgba(60,60,60,0.4) 90%, rgba(222,222,222,0.2));
margin-bottom:2em;
}

stolzref p{
text-align:left;
}

.stolz div{
/**/
}

.stolz bild{
display:block;
overflow:hidden;
width:100%;
}

.stolz img{
width:100%;
}

.web .togg{
background:linear-gradient(110deg,rgba(222,222,222,0.3), rgba(60,60,60,0.4) 30%,rgba(60,60,60,0.4) 90%, rgba(222,222,222,0.2));
margin-bottom:2em;
}

/********************KAROU**************************************************/
.karouPH{
margin: 0 auto;
overflow:hidden;
}

.karou{
margin: 0 auto;
text-align:center;
}

/*.karou .backstretch{
opacity:0.8;
}*/

.karouitem{
margin: 0 auto;
text-align:center;
display:table;
padding:0;
overflow:hidden;
width:auto;
content-visibility:auto;
}
.karouinfo{
margin: 0 auto;
display: -ms-grid;
display:grid;
grid-template-rows:2em 1fr auto 2em;
grid-template-columns:2em 1fr auto 2em;
}

.karouinfo slickinfo{
margin:0 auto;
padding:1em;
color:rgb(255,255,255);
text-align:left;
display:table;
max-width:650px;
width:auto;
}

.karouitem .toany{
margin: 0 auto;
display:table;
border:1px solid rgba(255,255,255,1);
color:rgb(255,255,255);
text-decoration:none;
margin-right:0;
margin-top:0.9em;
background-color:none;
float:right;
}

.karouitem .toany:hover, .karouitem .toany.anyaktiv{
background-color:rgba(255,255,255,1);
color:rgba(60,60,60,1);
}
/*************************KAROU ENDE*********************************************/
outerbg{
margin: 0 auto;
position:fixed;
height: 100vh;
  width:100vw;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
}

.background {
	position: absolute;
  height: 100vh;
  width:100vw;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
}



/*************************************************************************/
.info{
	margin:0 auto;
	color:white;
	text-align:justify;
	line-height:1.7em;
	font-size:1.2em;
	
	
}

.info p a{
    text-decoration: none;
    color: rgba(255,255,255,0.8);
    font-size: 105%;
    padding-bottom: 0.2em;
    border-bottom: 1px solid rgba(255,255,255,0.8);
    white-space: nowrap;
}

.info p a:hover{
color: rgba(255,255,255,1.0);
border-bottom: 1px solid rgba(255,255,255,1.0);
}

.info bild{
display:block;
overflow:hidden;
width:100%;
}


.info img{
-webkit-transition: -webkit-transform 1.0s;
transition: -webkit-transform 1.0s;
transition: transform 1.0s;
transition: transform 1.0s, -webkit-transform 1.0s;
}

.info img:hover{
-webkit-transform: scale(1.13);
 transform: scale(1.13);
}

.info bildunter{
line-height:1.35em;
}

.grande .info linkliste{
text-align:left;
}

.info linkliste a{
margin: 0 auto;
display:table;
text-decoration:none;
padding:0.3em;
margin:0.3em;
color:rgb(230,230,230);
background-color:none;
border-bottom: 1px solid;
white-space:nowrap;
float:left;
}

.info linkliste a:hover{
background-color: rgb(230,230,230);
color:#000000;
-webkit-transition: background-color 1000ms linear;
-ms-transition: background-color 1000ms linear;
transition: background-color 1000ms linear;
-webkit-transition: olor 1000ms linear;
-ms-transition: color 1000ms linear;
transition: color 1000ms linear;
}

.info logoblock{
margin:0 auto;
display:block;
}


.togg{
margin: 0 auto;
display:none;
}

.totogg{
text-decoration:none;
}

.web li {
list-style-type:none;
}

.web .togg li {
list-style-type:disc;

}

.web .totogg h6{
font-weight:bold;
text-decoration:none;
}
.web .totogg h6::after{
margin: 0 auto;
right:1em;
position:absolute;
float:right;
font-size:2em;
font-family: "Font Awesome 5 Free";
font-weight: 900;
color:rgba(255,255,255,0.9);
}

.web .totogg h6.zu::after{
content: "\f107";
}
.web .totogg h6.offen::after{
content: "\f106";
}

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

footer{
margin: 0 auto;
width:100%;
padding:0;
color:rgb(100,100,100);
/*font-size:110%;*/
text-align:center;
grid-column-start: 2;
grid-column-end: 5;
grid-row-start: 4;
grid-row-end: 5;
z-index:2;
position:relative;
margin-top:3em;
margin-bottom:6em;
max-width: 2000px;
}

.tofkontorm{
font-size:125%;
text-transform:uppercase;
}

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

.pulse {
	margin:0 auto;
	background-color: rgba(255,255,255,1.0);
	border-radius: 100%;
	position: relative;
}

.ring {
	position: absolute;
	background-color: inherit;
	height: 100%;
	width: 100%;
	border-radius: 100%;
	opacity: 0.8;
	animation: pulsing 2s ease-out infinite;
}

  .ring:nth-of-type(2) {
    animation-delay: -1s;
  }


@keyframes pulsing {
  100% {
	transform: scale(1.75);
	opacity: 0;
  }
}

.pulse a{
position: relative;
display:table-cell;	
vertical-align:middle;
text-align:center;
color:rgb(0,0,0);
text-decoration:none;
opacity:1.0;
align-content:center;
-webkit-transition: -webkit-transform 0.4s;
transition: -webkit-transform 0.4s;
transition: transform 0.4s;
transition: transform 0.4s, -webkit-transform 0.4s;
}

.pulse a i{
font-size:300%;
}

.pulse:hover {
	background-color: grey;

}
.pulse:hover a{
color:rgb(255,255,255);
-webkit-transform: scale(1.5);
 transform: scale(1.5);
}


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

formular div{
color:white;

}

formular p{
line-height:1.55em;
}

formular div a{
text-decoration:none;
padding-bottom:0.2em;
color:rgb(255,255,255);
border-bottom:1px solid rgb(255,255,255);

}

formular div .closeform{
font-size:3em;
color:white;
border:none;
opacity:0.6;
}

formular div .closeform:hover{
opacity:1.0;
}
/************************************************************************/

lageplan{
margin: 0 auto;
position:relative;
display:block;
padding:0;
width:100vw;
/*height:25vh;*/
background:transparent;
max-width:100%;
margin-left:0;
margin-right:0;
text-align:center;
grid-column-start: 2;
grid-column-end: 5;
grid-row-start: 5;
grid-row-end: 6;
z-index:2;
overflow:hidden;
left:0;
right:0;

 
max-width: 2000px;
}

lageplan a{
margin: 0 auto;
display:flex;
justify-content:center;
width:100vw;
left:0;
right:0;
}

lageplan a img{
opacity:0.5;
-webkit-transition: -webkit-opacity 0.4s, -webkit-transform 0.9s, -webkit-filter 0.4s;
transition: -webkit-opacity 0.4s, -webkit-transform 0.9s, -webkit-filter 0.4s;
transition: opacity 0.4s,  transform 0.9s,  filter 0.4s;
transition: opacity 0.4s, -webkit-opacity 0.4s,  transform 0.9s, -webkit-transform 0.9s,  filter 0.4s, -webkit-filter 0.4s;

-webkit-filter: grayscale(1);
filter: grayscale(1);
}

lageplan a:hover img{
opacity:1.0;
 -webkit-transform: scale(2.4);
 transform: scale(2.4);
 
 -webkit-filter: grayscale(0);
  filter: none;
}

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

ende{
margin: 0 auto;
font-size:90%;
position:relative;
padding:0;
padding-bottom:2em;
width:100vw;
max-width:100%;
margin-left:0;
margin-right:0;
text-align:center;
grid-column-start: 1;
grid-column-end: 6;
grid-row-start: 6;
grid-row-end: 7;
z-index:2;
overflow:hidden;
left:0;
right:0;
}

ende a{
text-decoration:none;
padding-bottom:0.2em;
color:rgb(255,255,255);
border-bottom:1px solid rgb(255,255,255);

}


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

a.totop{
margin: 0 auto;
position:fixed;
right:0.3em;
bottom:0.3em;
padding:0.3em;
text-decoration:none;
z-index:20000;
opacity:0.65;
font-size:230%;
color:white;
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
}


a.totop:hover{
opacity:1.0;
-webkit-transform: scale(1.3);
transform: scale(1.3);
}

keinumbruch{
white-space:nowrap;
}

.CL{
clear:left;
line-height:0;
}
.CR{
clear:right;
line-height:0;
}
.CB{
clear:both;
line-height:0;
}


cookieinfo{
margin: 0 auto;
background-color:rgba(0,0,0,0.9);
border:0.1em solid rgb(255,255,255);
display:block;
position:fixed;
bottom:2em;
left:2em;
right:2em;
z-index:1200;
padding:1em;
text-align:center;
color:rgb(255,255,255);
max-width:1300px;


}
cookieinfo p{
line-height:1.5em;
font-weight: normal;
font-size:90%;
}
cookieinfo p i{
font-size:250%;
margin-right:0.8em;
margin-bottom:0.5em;
}

cookieinfo a{
color:rgb(255,255,255);
font-weight:bold;
text-decoration:underline;
}

.Cclose{
margin: 0 auto;
font-size:170%;
padding:0.4em;
display:table;
right:0.2em;
top:0.2em;
z-index:1202;
position:absolute;
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
}



.Cclose:hover{
color:rgba(255,255,255,1.0);
-webkit-transform: scale(1.2);
 transform: scale(1.2);
}

/****ScrollTrigger****************************/
/* Now in your CSS add the following classes, this fades the [data-trigger] elements in and out*/
.visible, .invisible { 
 position:relative;
 top:1em;
}

.visible {
    top:-1em;
    transition: top 1.5s ease-in-out; 
    -moz-transition: top 1.5s ease-in-out;
}