/* Farbdefinition */
@media (prefers-color-scheme: light) {
	:root {
		--text-color: black;
		--background-color: white;
		
		--menu-text-color: white;
		--menu-background-color: #303030;
		--menu-accent-color: #C0C0C0;
		
/*		--info-background-color: #EBEBEB;
		--info-background-accent-color: #D4D4D4; */
		--info-background-color: rgb(225 225 225 / 0.5);
		--info-background-accent-color: rgb(180 180 180 / 0.5);
		--info-border-color: #CCCCCC;
		--info-hover-color: #007700;
		--info-fade-in-color: darkgreen;

		--link-color: #0066D3;
		--link-visited-color: #551A8F;
	}
	
	.dark {
		display: none;
	}
}

@media (prefers-color-scheme: dark) {

	:root {
		--text-color: white;
		--background-color: #252120;
		
		--menu-text-color: white;
		--menu-background-color: #505050;
		--menu-accent-color: #C0C0C0;

		/*--info-background-color: #2B2726;*/
		--info-background-color: rgb(50 46 45 / 0.5);
		/*--info-background-accent-color: #332F2E;*/
		--info-background-accent-color: rgb(75 71 70 / 0.5);
		--info-border-color: #555555;
		--info-hover-color: #AAFFAA;
		--info-fade-in-color: #EEEE88;
		
		--link-color: skyblue;
		--link-visited-color: #FF80FF;
	}
	
	.light {
		display: none;
	}	
}


body {
	color: var(--text-color);
	background: var(--background-color);
}

img.background {
	position: fixed;
	top: 13em;
	left: 50%;
	margin-left: -20vh;
	height: 70vh;
	opacity: 0.2;
	z-index:-1;
	transition: all .5s ease-in-out;
	visibility: hidden;
}
@media (prefers-color-scheme: dark) {
	img.background {
		filter: invert(1);
	}
}
.nodisplay {
	display: none;
}


header {
	position: fixed;
	top: 0;
    width: 100%;
	height: 12.5em;
	background: var(--background-color);
	z-index: 1;
}

content > h3 {
	margin-top: 12em;
}

@media not (min-width: 40em), not (min-height: 35em){
	body img.background{
		top: 8em;
	}
	header {
		height: 7.5em;
		transition: all .5s ease-in-out;
	}
	body.scroll img.background {
		top: 5.5em;
	}
	body.scroll header {
		height: 5em;
		transition: all .5s ease-in-out;
	}	
	content > h3 {
		margin-top: 7em;
	}
}

table.top {
	width: 90vw;
}
table.menu {
	width: 96vw;
	padding-left: 1vw;
}
table.menu td {
	width: 20%;
}
table.menu a, table.menu a:visited {
	display: block;
	padding: 0.2em;
	text-decoration: none;
	font-weight: bold;
	font-size: 1.4em;
	text-align: center;
	border: thin solid var(--menu-background-color);
	border-radius: 0.3em;
	color: var(--menu-text-color);
	background-color: var(--menu-background-color);
	transition: all .4s ease-in;
	position: relative;
}
table.menu a:focus, table.menu a:hover {
	color: var(--menu-background-color);
	background-color: var(--menu-accent-color);
}

.title, .abteilung {
	vertical-align: middle;
	text-align: center;
	transition: all .5s ease-in-out;
} 

/* change text size of header accoring to viewport with. */
@media (min-width: 70em) and (min-height: 35em) {
	.title { font-size: 2em }
	.abteilung { font-size: 1.25em }
}

@media not (min-width: 40em), (not (min-width: 50em)) and (not (min-height: 35em)) {
	.title { font-size: 1.2em }
	.abteilung { font-size: 1em }
}

@media not (min-width: 40em), not (min-height: 35em) {
	body.scroll .title { font-size: 1em }
	body.scroll .abteilung { font-size: 0.8em }
	header {
		border-bottom: solid;
		border-width:1;
		border-color: var(--info-border-color)
	}
}

details.info {
  background-color: var(--info-background-color);
  border: 1px solid var(--info-border-color);
  border-radius: 1em;
  padding: 0.5em 0.5em 0;
  margin-top: 0.5em;
  margin-left: 2.5vw;
  margin-right: 2.5vw;
}

details.info summary {
  list-style-type:'ᐅ  ';
  font-weight: bold;
  font-size:1.1em;
  margin: -0.5em -0.5em 0;
  padding: 0.5em;
}

details.info:hover {
	background: var(--info-background-accent-color);
	transition: all .3s ease-in;
}

@keyframes fade-in {
	0% {
		opacity: 0;
		background: var(--background-color);
		color: var(--info-fade-in-color);
		translate: -1.2vw 0
	}
	100% {
		opacity: 1;
		background: var(--info-background-color);
		color: var(--text-color);
		translate: 0 0
	}
}
details[open].info {
	background: var(--info-background-color);
	animation: fade-in 1s ease-in-out;
}
	
details[open].info summary {
	list-style-type:'ᐁ  ';
	font-size: 1.2em;
    transition: all 0.3s ease-in;
}

details.info summary:hover {
  color: var(--info-hover-color);
} 

a {
	color: var(--link-color);
}

a:visited {
	color: var(--link-visited-color);
}

html {
  font-family: arial;
  font-size: 1.2em;
}

table {
	width: 100%;
}

td {
	padding: 5;
}

nav li {
	margin: 0.1em 0.1em 0.1em 0.1em;
	padding: 0;
	font-size: 1.2em;
	flex: 1 1 20%;
}

@media (min-width: 40em) and (min-height: 35em) {
	.small {
		display: none;
	}
}

@media (min-width: 40em) {
	.short {
		display: none;
	}
}

@media not (min-width: 40em) {
	.long {
		display: none;
	}
}

@media not (min-width: 40em), not (min-height: 35em){
	
	@keyframes slide-in {
      0%    {translate: 0 -17.2em }
      100%  {translate: 0 -7.2em }
    }
	
	@keyframes slide-in-small {
      0%    {translate: 0 -14.8em }
      100%  {translate: 0 -4.8em }
    }
	
	nav > details[open] {
		background: var(--info-background-color);
		animation: slide-in .3s ease-out;
		z-index: 2;
	} 
	
	body.scroll nav > details[open] {
		animation: slide-in-small .3s ease-out;
	} 

    nav summary {
        list-style-type: "☰";
        font-size: 1.5rem;
        position: absolute;
		right: 0.5em;
		top: 0;
        cursor: pointer;
    }

	nav summary:hover {
		font-size: 1.6em;
		text-shadow: 2px 2px 5px white;
	}

	nav summary span {
		display: none;
	}

	nav [open] summary {
		/*list-style-type: "✖";*/
		list-style-type: " ";
	}
	
	table.small {
        position: absolute;
        right: .8em;
		top: .4em;
		width: 35vw;
        border: 1px solid var(--info-border-color);
        border-radius: 1em;
		background-color: var(--info-background-color);
	}
	
	table.small td {
		padding-top: 2;
		padding-bottom: 2;
	}

	.big {
		display: none;
	}
	
	nav a, nav a:visited {
		line-height: 1.2em;
		display: inline;
		padding: 0.2em;
		padding-left: 1em;
		padding-right: 1em;
		text-decoration: none;
		font-weight: bold;
		text-align: center;
		border: thin solid var(--menu-background-color);
		border-radius: .3em;
		color: white;
		background-color: var(--menu-background-color);		
    }

}

nav a:focus, nav a:hover {
	color: var(--menu-background-color);
	background-color: var(--menu-accent-color);
}

body h3 {
	margin-left: 1.25vw;
}

body p {
  margin-left: 2.5vw;
}

ul.termine, ul.halle, ul.kontakt, ul.training, ul.beitraege, ul.unterlagen, ul.kontakt-tennis {
    list-style: none;
    display: flex;
	flex-direction: column;
	position: relative;
}

ul.termine li, ul.halle li, ul.kontakt li, ul.training li, ul.beitraege li, ul.unterlagen li, ul.kontakt-tennis li {
	margin:0.5em 0.5em 0.5em 0.5em;
	padding: 0;
	flex-grow: 1;
}

@media (min-width: 40em) {
    ul.termine, ul.unterlagen {
        flex-direction: row;
    }
}

@media (min-width: 50em) {
    ul.kontakt, ul.beitraege {
        flex-direction: row;
    }
}

@media (min-width: 70em) {
    ul.halle, ul.training, ul.kontakt-tennis {
        flex-direction: row;
    }
}

table.icons td {
	text-align: center;
	vertical-align: bottom;
}

td.logo, td.logo img {
    width: 175px;
	height: 175px;
	transition: all .5s ease-in-out;
}

@keyframes logo-rotate {
   0%    { rotate: y 0deg }
   50%   { rotate: y 0deg }
   55%   { rotate: y 360deg }
   100%  { rotate: y 360deg }
}

td.logo img {
	animation: logo-rotate 60s infinite;
}

img.standort {
    width: 1.5em;
	height: 1.5em;	
}

img.standort:hover {
	--angel: 300deg;
    -webkit-transform: rotate(var(--angel));
    -moz-transform: rotate(var(--angel));
    -o-transform: rotate(var(--angel));
    -ms-transform: rotate(var(--angel));
    transform: rotate(var(--angel));
	transition: all 1s linear;
}

@media not (min-width: 40em), not (min-height: 35em){
	
	table.icons img {
		width: 70%;
		height: 70%;
	}
	
	td.logo, td.logo img {
		width: 125px;
		height: 125px;
		transition: all .5s ease-in-out;
	}
	
	body.scroll td.logo, body.scroll td.logo img {
		width: 70px;
		height: 70px;
		transition: all .5s ease-in-out;
	}
}

.U6 {
	color: white;
	background: #8D6DAD;
	padding-left: 0.3em;
	padding-right: 0.3em;
} 

@keyframes ball-translate {
   0%    { translate: 0px; rotate: 0deg }
   100%  { translate: 120vw; rotate: 800deg }
}

.volleyball-ball {
	position: fixed;
	bottom:0;
	left:-100px;
	animation: ball-translate 10s linear;
	animation-delay: 15s;
}

@media not (min-width: 50em) {
	@keyframes ball-translate {
		0%    { translate: 0px; rotate: 0deg }
		100%  { translate: 130vw; rotate: 400deg }
	}
	
	.volleyball-ball {
		animation: ball-translate 6s linear;
		animation-delay: 15s;
	}
}