@font-face {
 font-family: 'ptsans-bold';
  font-style: normal;
 src: url(PTSans-Bold.ttf) format('truetype');
 font-display:swap;
}

@font-face {
 font-family: 'ptsans';
  font-style: normal;
 src: url(PTSans-Regular.ttf) format('truetype');
 font-display:swap;
}

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

}  


body {

background-image: linear-gradient(to right, #00682d 40%, #4c0901 60%);
margin:0 auto;
font-family: 'ptsans';
font-size:16px;
}

.startbox {
width:100vw; height:80vh; overflow:hidden;
 display:flex; justify-content: center; align-items: center; align-content : space-around;
}


.bildbox {
transition:all 1s;
border-radius: 25%;
width:45vw;
height:70vh;

border:10px solid #fff;

text-decoration:none; 

 background-repeat: no-repeat;
 background-size:cover;
 background-position: center;
 display:flex; justify-content: center; align-items: center;
 
}

.gruen {background-image: url("landmarkt.jpg");}
.braun {background-image: url("weihnachten.jpg"); cursor:pointer; }


.bildbox:hover {
transition:all 1s; filter: grayscale(1); border-radius: 25% 10% 25% 10%;
}




.streifen {}
.streifenw {background:#fff; font-size:44px; color:#00682d; text-align:center; text-transform: uppercase; position:relative; padding:6px; font-family: 'ptsans-bold';letter-spacing: 0.1em;}
.streifeng {background:#00682d; font-size:22px; color:#fff; text-align:center; padding:6px;}

.streifenwb {background:#fff; font-size:44px; color:#4c0901; text-align:center; text-transform: uppercase; position:relative;  padding:6px; font-family: 'ptsans-bold';letter-spacing: 0.1em;}
.streifenb {background:#4c0901; font-size:22px; color:#fff; text-align:center;   padding:6px;}

hr {
  border: 2px solid #fff;
  border-radius: 50%;
  display:block;

}


.unterschrift {
width:80vw;
margin-left:10vw;
margin-right:10vw;
text-align: center;
	position: fixed;
	color:#fff;
	bottom:10px;
	z-index:10;
	font-size:14px;
}

.unterschrift span {font-size:44px; font-family: 'ptsans-bold';  text-shadow: 0 0 10px #000;}

@media (width <= 800px) {
	.unterschrift {font-size:12px;}
	.streifenw, .streifenwb, .unterschrift span  {font-size:26px; transition: all 1s; letter-spacing: 0em;}
	.streifeng, .streifenb {font-size:17px;}
	 
}

@media (width <= 600px) {
.bildbox {
border-radius: 10px;
border:2px solid #fff;
height:60vh;
}


/* ~~~~~~~~ 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%;}
}


/* ~~~~~~~~~~~~~~ BildSlider Section ~~~~~~~~~~~~~ */

.textbox,main {width:50vw; padding:20px; text-align:justify; }
.textbox p, main p {margin-bottom:16px;}


.bildbox img {display:flex; justify-content:center; align-items: center; width: calc(36vw - 40px); height: 24vw;	position: relative; overflow: hidden; object-fit:cover;}
.bildslider {
	width: 20vw;
	height: 14vw;

	position: relative;
	overflow: hidden;
background:#eee;

}


/* ~~~~~~~~~~~ section ~~~~~~~~~~~ */
section {display:flex; justify-content:space-around; align-items: center; padding:0 5vw 0 5vw; padding-left:15vw; padding-right:15vw; }
section:nth-child(even) {background:#fff4f2; }
section:nth-child(odd) {background:#fff;}






@media(max-width: 800px)
{
.bildslider, .bildbox, .bildbox img {display:block; margin:15px; width:calc(100vw - 60px); height: calc(66.66vw - 40px);}
.textbox,main {width:calc(100vw - 40px); }
section {flex-direction: column; padding-left:1vw; padding-right:1vw;} 
}

.bildslider > * {
	position: absolute; 
	top:0%; left:0; right:0; opacity:0;
	width:100%;
	height:100%;
	object-fit:cover;
	animation: 12s slider infinite ease-in-out;
}

@keyframes slider {
	/*
	0%   { top: 100%; }
	5%   { top: 0% }
	33.4%   { top: 0% }
	38.4%   { top: -100% }
	100% { top: -100%;}
	*/
	0%   { opacity: 0%; }
	5%   { opacity: 100%; }
	33.4%   { opacity: 100% }
	38.4%   { opacity: 0% }
	100% { opacity: 0%;}
}

.bildslider > *:nth-child(1) { animation-delay: 0s }
.bildslider > *:nth-child(2) { animation-delay: 4s }
.bildslider > *:nth-child(3) { animation-delay: 8s }