:root{
--blauton: rgba(12,84,160,0.7);
--blauton-leicht: rgba(40,40,40,.5);
--grauton: #cecece;
--weisston: rgba(10,10,100);
}
body{
color: white; //var(--grauton);
font-family: Calibri, sans-serif;
font-size: 14px;
	max-width: 100vw;
	max-height: 100vh;
background-color: black; //var(--blauton);
    display:grid;
    grid-template-rows: 16vmax 1fr;
	
    background-image: url("img/hintergrund_s.jpg");
	background-size: cover;
	
	background-repeat: no-repeat;
	-webkit-background-size: 100vmax;
	background-size: 100vmax;
	-webkitbackground-attechment: local;
	background-attachment: fixed;
	 
	animation: anime-bg 150s infinite;
	background-size:cover;
	background-attachment: fixed;
}

hr{
	width:100%;	
}

table td{
	border: 1px solid white;
	border-collapse: collapse;
}

@keyframes anime-bg{
	
	 0%{background-image: url("img/hintergrund_s.jpg");} 
	 7%{background-image: url("img/hintergrund_s.jpg");} 
	10%{background-image: url("img/Hinter1.jpg");}
	17%{background-image: url("img/Hinter1.jpg");}
	20%{background-image: url("img/Hinter2.jpg");}
	27%{background-image: url("img/Hinter2.jpg");}
	30%{background-image: url("img/Hinter6.jpg");}
	37%{background-image: url("img/Hinter6.jpg");}
	40%{background-image: url("img/Hinter7.jpg");}
	47%{background-image: url("img/Hinter7.jpg");}
	50%{background-image: url("img/Hinter8.jpg");}
	57%{background-image: url("img/Hinter8.jpg");}
	60%{background-image: url("img/Hinter10.jpg");}
	67%{background-image: url("img/Hinter10.jpg");}
	70%{background-image: url("img/Hinter11.jpg");}
	77%{background-image: url("img/Hinter11.jpg");}
	80%{background-image: url("img/Hinter12.jpg");}
	87%{background-image: url("img/Hinter12.jpg");}
	90%{background-image: url("img/Hinter13.jpg");}
	97%{background-image: url("img/Hinter13.jpg");}
	//100%{background-image: url("img/hintergrund_s.jpg");}
	
	
}
a, a:hover, a:visited{color:#99ccff;
}
h2{
font-size: 140%;
color: white;
margin-top: 1.5em;
}
h3{
font-size: 120%;
text-decoration: underline;
}
#hintergrund{
position: fixed;
top:0;
left: 0;
//right:0;
//bottom:0;
width:110vw;
height:110vh:
border:0;
overflow: hidden;
z-index:-1;
}
#hintergrund img
{
height: 101vh;
min-width: 101vw;
margin:auto;
	}
#oben{
    display: grid;
    grid-template-columns: auto max-content;
    grid-template-rows: 16vmax;
}


.buton{

background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.16, rgb(207, 207, 207)), color-stop(0.79, rgb(252, 252, 252)));
  background-image: -moz-linear-gradient(center bottom, rgb(207, 207, 207) 16%, rgb(252, 252, 252) 79%);
  background-image: linear-gradient(to top, rgb(207, 207, 207) 16%, rgb(252, 252, 252) 79%); 
  padding: 3px;
  //border: 1px solid #000;
  border-style: groove;
  color: black !important;
  text-decoration: none;
  font-weight: normal;
  border-radius: 10px;
  font-size: 0.8em;
  text-align: center;
	cursor: pointer;
	border-color: white;
	

}

#logo{
display: inline;
height: calc(14vmax - 4vw);
margin: 2vh;
    float:left;
}
#pfanne{
	width: 22vw; 
	//float: left;	
	//margin: 1em;
}
	
#navi{
margin-left: 2vw;
margin-right: 2vw;
font-size: 140%;
font-weight: bold;
border:0;
color: white;
text-decoration: none;
display:grid;
grid-template-rows: repeat(4, 4vmax);
    
}
.nav-eintrag{
    display:block;
    text-align: right;
    text-shadow: 0px 0px 7px white;
    
}
.nav-eintrag a{
    text-decoration: none;
    color: white;
}
#seite{
margin: 2vw;
background-color: var(--blauton-leicht);
}
.seite{
margin: 2vw;
background-color: var(--blauton-leicht);
}
.spalten{
max-width: 96vw;
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.spalte{
//max-width: 90%;
}
#home{
display: grid;
grid-template-columns: 150px 1fr;
}
#bar{
position: relative;
grid-column: 1/2;
background-color: var(--blauton);
margin-left: 2vw;
margin-top: 2vw;
padding: 1vw;
overflow-x:hidden;
}
#bar b{
display: block;
}
#pfeil{
position: absolute;
width:3em;
	height: auto;
right: 1em;
bottom: 2em;
}
#main{
padding: 1vw;
grid-column: 2/3;
margin: 2vw;
background-color: var(--blauton-leicht);
overflow-x: hidden;
}
#video{
//display:none;}
#kommentare{
}

.datum{
	color:lightgray;
}

#kommentare input, #kommentare textarea{
width: 90%;
font-size: 100%;
}
#kommentare-alt{
background-color: var(--blauton);
color: white
}
#main td{
font-size: 0.8em;
border: solid 2px;
background-color: var(--blauton-leicht);
}
#mitbring tr:hover, #mliste tr:hover{
    background-color: var(--blauton);
}

#mliste input{
	text-align: center;
	font-weight: bold; 
	background-color: rgba(150,150,150, .5);
	color: white; 
	border: none;
}
#mliste{
color:var(--grauton);
//background-color: var(--blauton);
}
#mliste td{
//font-size: 3vw;
border: solid 2px;
text-align: center;
background-color: var(--blauton-leicht);
}
#mitbring td{
//font-size: 2vw;}
#mliste td:first-child{
text-align: left;
}

.offen{
	border-color: red !important;
}

.frage{
	border-color: sandybrown !important;
}

#liste_gross{
min-width: 95vw;
margin: 2vw;
font-size: 20px;
overflow: scroll;
}




#rundenplaner td{
border: 1px solid white;
width: 16vw;
height: 2em;
text-align: center;

}


#rundenplaner tr{
    display: none;
}
    
    
#rundenplaner tr:nth-child(1){
    height:5em;
    display: table-row;
}
#rundenplaner tr:nth-child(2){
    display: table-row;
}


#rundenplaner td:nth-child(1){
width: 3em;

}

#rundenplaner td:nth-child(5){
border: none;
    text-align: left;

}


#rundenplaner input{
width: 80%;
}


#dropzone{
	border: 1px solid white;
	width: 90vw;
	min-height: 5em;
	background-color: rgba(255,255,255,.7);
   
}

#dropzone img{
    max-width: 3em;
    max-height: 3em;
}

#fortschritt{background-color: yellow;
	display: none;
width: 100%;
height: 1em;
}

#fortschritt_innen{background-color: black;
	height: 100%;}

#status_aktualisieren, #status_loeschen{
    display: inline-block;
}

#s_status_body form{
	display: inline-block;
	border: 1px solid white;
	padding: 1rem;
	
}


#teams{
margin-left: 2vw;
}
.img_t{
	max-width: 22vw;
	//height: auto;
//	max-height: 20vw;
}
#bilder{
max-width: 96vw;
    text-align:justify;
//flex-direction: space-between;
}
.galerie{
max-width: 20vw;
max-height: 120px;
}
#planung span{
writing-mode: vertical-lr;
}
#planung{
background-color: var(--blauton-leicht);
}
#planung td{
border: 1px solid;
text-align: center;
vertical-align: center;
min-width: 1.5em;
}
#planung tr:last-child td{
background-color: rgba(260, 260,260,.15);
}
#planung_2020{
width: 100%;
overflow: auto;
}
#planung_aendern{
font-size: 1.3em;
}
#planung_aendern label{
min-width: 14em;
display: inline-block;
}
#planung_aendern input[type=checkbox]{
size: 4em;
}
@media screen and (orientation: landscape){
    body{
        font-size: 14px;
    }
}
@media (min-width: 600px), (min-width:1000px){
    body{
        grid-template-rows: calc(14vmax + 3em) 1fr;
		background-image: url("img/hintergrund.jpg");
    
    }
       
    #oben{
        grid-template-columns: auto;
        grid-template-rows: 14vmax 3em;
    }
    
    #navi{
    	background-color: #0C54A0;
        width: 95vw;
        grid-template-columns: repeat(4, 25%);
        grid-template-rows: auto;
        justify-content: center;
        align-content: center;
    }
    
    .nav-eintrag{
    	text-align: inherit;
        //margin-left: auto;
        text-shadow: none;//0px 0px 0px white;
    }
    
    #logo {
        margin-left: 0;
        display: block;
        margin-left: auto;
        margin-right: auto;
        float:none;
    }
    
 .spalten{
    flex-direction: row;
    }
}     
@media screen and (max-width: 420px)
{
#cont_7b0ebf684b8b077e78b1e9d84b5337e7{display: none;}
}
@media screen and (min-width: 1000px)
{
    body{
        font-size: 18px;
    }
    
    #home{
        grid-template-columns: 350px 1fr;
    }
    
    #main td{
        font-size: 1em;
    }
    
}