/*_______________________________________________ALLGEMEIN_________*/

@font-face {
    
font-family: 'Average';
    
src:url('font/Average-Regular.woff') format('woff'),
        
url('font/Average-Regular.svg#Average-Regular') format('svg'),
url('font/Average-Regular.eot'),
url('font/Average-Regular.eot?#iefix') format('embedded-opentype'); 
    
font-weight: normal;
font-style: normal;
}

html,body{
width:95vw;
height:101vh;
margin:0;
padding:0;
font-family:"Average", "Modern No. 20", "Times New Roman", "Times", "Georgia", serif; 
font-size:1.5vw;
-webkit-text-size-adjust: 100%;
}

/*_______________________________________________VERLAUF____________*/

#background{
background-image:url("img/Verlauf.png");
background-repeat:repeat-x;
background-position:top 0 left 0;
background-size:5px 90vh;
position:fixed;
top:0;
left:0;
width:100vw;
height:100vh;
}

/*_______________________________________________LOGO_________________*/

#logo{
background-image:url("img/Logo.png");
background-repeat:no-repeat;
background-size:12vh;
position:fixed;
width:34vw;
height:8vh;
left:0.5vw;
top:0.5vw;
}

/*_______________________________________________ANREISSER___________*/

#anreisser{
background-image:url("img/Anreisser2.png");
background-repeat:no-repeat;
background-size:35vh;
background-position-x:25vw;
background-position-y:0vw;
position:fixed;
width:100vw;
height:8vh;
}

/* _______________________________________________BACKBUTTON__________ */

#back{
background-color: black;
border-radius: 15px;    
position:fixed;
width:20vw;
height:10vw;
left:75vw;
top:14vh;
display: flex;
justify-content: center;
align-items: center;
font-size:5vw;
z-index: 9999;
box-shadow: 0 10px 25px rgba(0,0,0,1);
}

/* _______________________________________________Trennlinie___________ */

#trennung{
position:fixed;
top:7.5vh;
width:100vw;
height:1vw;
border-top:0.3vw solid white;
border-bottom:0.2vw solid white;
}

/* _____________________________________________NAV 1_________________ */

#navigation1{
position:fixed;
top:9.5vh;
right:2vw;
height:8vw;
}

#navigation1 *{
width:8vw;
height:8vw;
margin-right:5vw;
float:left;
background-repeat:no-repeat;
text-indent:-9999px;
}

#start{
background-image:url("img/Start.png");
background-size:4.05vh;
}

#termine{
background-image:url("img/Termine.png");
background-size:4.05vh;
}

#galerie{
background-image:url("img/Galerie.png");
background-size:4.05vh;
}


#chronik{
background-image:url("img/Chronik.png");
background-size:4.05vh;
}

#downloads{
background-image:url("img/Downloads.png");
background-size:4.05vh;
}

#infos{
background-image:url("img/Info.png");
background-size:4.05vh;
}

#facebook{
background-image:url("img/Facebook.png");
background-size:4.05vh;
}

#navigation1 a:hover, #navigation1 a:focus {
border-bottom:0.15vw solid white;

}

/* _____________________________________________NAV 2________________ */

#navigation2{
position:fixed;
top:50vh;
left:0;
}

#navigation2 ul{
padding-left:0;
list-style:none;
width:35vw;
margin-top:3vh;
}

#navigation2 ul li{
margin-bottom:0.3vh;
height:4vh;
width:35vw;
margin-bottom:0.5vh;
}

#navigation2 ul li a{
display:block;
color:white;
text-decoration:none;
padding-right:5vw;
padding-top:1vw;
padding-bottom:1vw;
background:black;
border-top-right-radius:5vw;
border-bottom-right-radius:5vw;
font-size:2.5vh;
text-align:right;
height:2.8vh;
width:40vw;
padding-top:1vh;
paddin-bottom:1vh;

}



/*_____________________________________________KATZE________________ 

#katze{
position:fixed;
width:10vw;
height:10vw;
top:80vw;
left:3vw;
background-image:url("img/Katze.png");
background-repeat:no-repeat;
background-size:10vw;
}
*/

/*_____________________________________________CONTENT HEADLINE______ */

#content_headline{
position:fixed;
top:17vh;
left:2vw;
width:96vw;
height:4vh;
font-size:3vh;
display:block;
background-color:FireBrick;
text-align:center;
border-top-left-radius:2vw;
border-top-right-radius:2vw;
color:white;
opacity:0.8;
border-top:0.05vw solid pink;
border-left:0.05vw solid pink;
border-right:0.05vw solid firebrick;
}

#content_headline_figures{
position:fixed;
top:10vh;
left:0vw;
width:99.8vw;
height:4vh;
font-size:3vh;
display:block;
background-color:FireBrick;
text-align:center;
border-top-left-radius:2vw;
border-top-right-radius:2vw;
color:white;
opacity:0.8;
border-top:0.05vw solid pink;
border-left:0.05vw solid pink;
border-right:0.05vw solid firebrick;
}

/*_____________________________________________CONTENT________________ */

#content{
position:fixed;
top:21vh;
left:2vw;
width:96vw;
height:31vh;
border-bottom:0.05vw solid FireBrick;
border-left:0.05vw solid pink;
border-right:0.05vw solid firebrick;
}

#content_bottom{
position:absolute;
width:96vw;
height:31vh;
background-color:darkred;
opacity:0.1;
}

#content_top{
position:absolute;
left:0vw;
top:0vw;
width:92vw;
height:28vh;
background-color:transparent;
font-size:3.5vw;
overflow-y:auto;
color:black;
white-space:pre-wrap;
padding:2vw;
}

#content_top h1{
font-size:3vw;
margin:0;
}

#content_figures{
position:fixed;
top:14vh;
left:0vw;
width:99.8vw;
height:77vh;
border-bottom:0.05vw solid FireBrick;
border-left:0.05vw solid pink;
border-right:0.05vw solid firebrick;
}

#content_bottom_figures{
position:absolute;
width:99.8vw;
height:77vh;
background-color:darkred;
opacity:0.1;
}

#content_top_figures{
position:absolute;
left:0vw;
top:0vw;
width:99.8vw;
height:76vh;
background-color:transparent;
color:black;
white-space:pre-wrap;
padding:0.5vw;
overflow-y:auto;
overflow-x: hidden;
}

.figure:first-of-type {
  margin-top: 0;
}

.figure:not(:first-of-type) {
  margin-top: 1vh;
}

.figure{
font-size:6vw;
}

.figure-link{
position: relative;
display:block;
left:3vw;
font-size:5vw;
text-indent: -2vw;
}

a {
text-decoration:none;
color:white;
}

.download{
background-image:url("img/pdf.png");
background-size:15vw;
background-repeat:no-repeat;
background-position:center;
display:block;
margin-left:5vw;
margin-bottom:1vw;
width:22vw;
color:white;
text-decoration:none;
text-align:center;
padding-top:20vw;
font-size:3.5vw;
float:left;
}


#zitat{
font-style:italic;
width:45vw;
color:white;
font-size:3vh;
float:left;
margin-right:2vw;
}

.start{
max-width:30vw;
max-height:45vw;
min-width:30vw;
}

#content_top .termine{
width:25vw;
height:25vw;
margin-left:4vw;
margin-bottom:2vw;
float:left;
}

#content_top .termine div{
text-align:center;
width:30vw;
color:white;
margin-left:-5vw;
font-size:4vw;
}

#content_top .frameholder{
width:22vw;
height:20vw;
overflow-y:scroll;
-webkit-overflow-scrolling:touch;
}

#content_top iframe{
width:22vw;
height:20vw;
border:none;
}

#kontakt{
position:absolute;
font-size:3.5vw;
left:2vw;
top:0vw;
}

#impressum{
position:absolute;
font-size:3.5vw;
margin-left:50vw;
top:0vw;
}

#website{
position:absolute;
font-size:3.5vw;
left:2vw;
top:65vw;
}

#ort{
position:absolute;
font-size:3.5vw;
left:2vw;
top:35vw;
}

.video-box{
float:left;
margin-left:5vw;
margin-bottom:3vw;

}

.video{
width:70vw;
height:40vw;
}

.galerie img{
display:block;
margin:1vw auto;
max-height:50vw;
max-width:70vw;
}

.center-img{
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  height: auto;
}

/* _____________________________________________SIDEBAR HEADLINE______ */

#sidebar_headline{
position:fixed;
top:53vh;
right:2vw;
width:50vw;
height:4vh;
font-size:2.5vh;
display:block;
background-color:FireBrick;
text-align:center;
border-top-left-radius:2vw;
border-top-right-radius:2vw;
color:white;
opacity:0.8;
border-top:0.05vw solid pink;
border-left:0.05vw solid pink;
border-right:0.05vw solid firebrick;
}

#sidebar_headline *{
margin:0.5vw;
}      

/* _____________________________________________SIDEBAR________________ */

#sidebar{
position:fixed;
top:57vh;
right:2vw;
width:50vw;
height:32.5vh;
border-bottom:0.05vw solid FireBrick;
border-left:0.05vw solid pink;
border-right:0.05vw solid firebrick;
}

#sidebar_bottom{
position:absolute;
width:50vw;
height:32.5vh;
background-color:darkred;
opacity:0.1;
}

#sidebar_top{
position:absolute;
width:46vw;
height:29.5vh;
background-color:transparent;
color:black;
font-size:4vw;
overflow-y:auto;
white-space:pre-wrap;
padding:2vw;
}

#sidebar_top ul{
white-space:normal;
list-style:none;
padding:0;
margin-top:0;
}

#sidebar_top ul li a{
text-decoration:none;
color:black;
margin-left:2vw;
}

#sidebar_top ul li a:hover{
text-decoration:underline;
color:white;
}

#sidebar_top iframe{
border:none;
white-space:pre-line;
width:22vw;
height:25vw;
margin-left:12vw;

}

#sidebar_top img{
max-width:25vw;
display:block;
margin:0 auto;
}

#figuren {
  background-color: black;
  border-radius: 15px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 4vw;
  padding: 0.2em 0.8em;
  color: white;
  text-decoration: none;
  height: 3.5vw;
  width: 5vw;
}

/* _____________________________________________MELDUNG________________ */


#notice {
  display: flex;              
  position: fixed;
  width:100vw;
  height:100vh;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  top:0;
}

#notice > div {
  background-image: url("img/Verlauf.png");
  background-repeat: repeat-x;
  background-size: 5px 100%;
  background-position: top left;
  padding: 20px;
  width: 50vw;
  height: 30vh;
  flex-direction: column;
  align-items: center;   /* horizontal zentrieren */
  text-align: center; 
  border-radius: 12px;
  color: black;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  animation: fadeIn 0.3s ease;
  font-size: 5vw;
}

#notice button {
  padding: 8px 15px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 5vw;
  width:30vw;
  height:15vw;
}

/* OK Button */
#notice button:first-of-type {
  background: red;
  color: white;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}