/* latin */
@font-face {
  font-family: 'karla';
  font-style: normal;
  font-weight: 400;
  src: url('Karla-VariableFont_wght.ttf') format('truetype');

}   


@font-face {
  font-family: 'MomoSignature';
  font-style: normal;
  font-weight: 400;
  src: url('MomoSignature-Regular.ttf') format('truetype');

}  


@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url('material-icons.woff2') format('woff2');

}  



*
{
margin: 0;
padding: 0;
border: none;
outline: none;
}

body {
background-color: rgba(255, 255, 255, 1);
font-family: 'Noto Sans'; font-weight: normal; font-style:normal; hyphens: auto;
}



h1,h2,h3 {font-family: 'MomoSignature'; font-weight: normal; font-style:normal; hyphens: auto;}
p,li,a,td, label {font-family: 'Karla'; font-weight: normal; font-style:normal; hyphens: auto;}

header {background:#942c2d; width:100vw; height:40px; }
header img {height:30px;}



.headerbild img { width:100vw; object-fit:cover; }
.headerbild {z-index:1; background:#fff; }

/* ~~~~~~ table - deklaration ~~~~~~~ */
table{width:100%; margin:10px 5px 10px 5px;}
table td { padding:2px;}
table, th, td {  border: 1px dotted silver;}
tr:nth-child(even) {background: rgba(220,160,140,0.5);}
tr:hover {background-color: coral;}

#slideshow {position:relative;}



footer {z-index:21; width:100vw; min-height:40px; background:#f3ebdb; display:flex; justify-content:center; align-items:center; }




/* ~~~~~~~~ Datenschutz und Impressum ~~~~~~~~ */

#datenschutztext,#impressumtext{
	position:fixed;
	overflow:auto;
	background: rgba(0,0,0,0.6);
	color:#ebba8a;
	border-radius:10px;
	border: 1px solid #000055;
	position:fixed;
	top:-20px;
	padding:0px;
	left:50%;
	right:50%;
	width:0%;
	height:0%;
	z-index:100000006;
	transition: all 2.5s;
}

 


#datenschutztext p,#impressumtext p{color:#fefefe;}
#datenschutztext h1,#impressumtext h1{color:#fefefe;}
#datenschutztext h2,#impressumtext h2{color:#fefefe;}
#datenschutztext a, #impressumtext a{text-decoration:none; color:#fefefe;}
#datenschutztext:hover,#impressumtext:hover{background: rgba(0,0,0,0.95);}
#datenschutztext:target,#impressumtext:target{top:100px; width:50%; height:75%; 	padding:10px; margin-left:-25%;}

@media screen and (max-width: 800px) {
	#datenschutztext:target,#impressumtext:target{top:90px; width:90%; height:75%; 	padding:10px; margin-left:-49%;}
}


/* Material Icons */
.materialfest {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 60px;
  color: #e3e3e3;
  text-decoraion:none;
  position:sticky;
  top:32px;
  margin-right:10px;
  float:right;
  transition: 2s all; 
}

.materialfest:hover {transition: 2s all; color:rgba(200,200,200,0.5); transform: rotate(360deg);}


.material {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 60px;
  color: #e3e3e3;
}



main.hell{
	display:block; position:relative; width:100%;
z-index:20;
color:#942c2d; position:relative; 
  background-image: url('hintergrund-textur.png');
  background-position: center top; 
  background-repeat: no-repeat;      /* Verhindert die Wiederholung des Bildes */
  background-size: 100% auto;
margin-top: -25vh;
}


main.hell a {color:#942c2d; background:#f3ebdb; transition: all 0.5s; padding:1px;}
main.hell a:hover{background-color: #942c2d; color:#fff;}


@media only screen and (min-width: 1000px) {main.hell{margin-top: -24vh;}}
@media only screen and (max-width: 999px) {main.hell{margin-top: -16vh;}}






main.dunkel {background:#942c2d;}
main.dunkel article {color:#fff;}
main.dunkel a {color:#942c2d; background:#fff; transition: all 0.5s;}
main.dunkel a:hover{background-color: #942c2d; color:#fff;}


@media screen and (min-width: 901px) {
	section.heller {display:flex; justify-content:center; align-items:center;  width:80vw; padding:0 10vw 30px 10vw;}
	section.dunkler {display:flex; justify-content:center; align-items:center;  width:80vw; padding:20px 10vw 30vh 10vw;}
	aside { width:45vw;}
	h1 {font-size:28px;}
	p,li,td {font-size:22px;}
	iframe {margin-left:30px;}
	#logo {position:fixed; top:40%; right:10px; width:350px; z-index:9999999999999999999999999999;}
}
@media screen and (max-width: 900px) {
	section.heller { display:flex; flex-direction: column; justify-content:center; align-items:center;  width:92vw; padding:0 4vw 30px 4vw; }
	section.dunkler {display:flex; flex-direction: column; justify-content:center; align-items:center;  width:92vw; padding:20px 4vw 30vh 4vw;}
	aside { width:100%;}
	h1 {font-size:18px;}
	p,li,td {font-size:16px;}
	iframe {margin-left:0px;}
	#logo {position:fixed; top:40%; right:10px; width:31vw; z-index:9999999999999999999999999999;}
}


.davor {clear:both; display:block;}