@charset "utf-8";
/* RESET ==> Ränder auf Null* * * * * * * * */
*{
		margin: 0;  
	 	padding: 0; 	  
	  	box-sizing: border-box;/*Breite = content und padding und border (idm für Höhe)*/	  
}
/*HTML*/
html {
	  	 min-height: 100%;/* min-height: 100% = /*Unser Inhaltsbereich soll die komplette Browserhöhe mindestens nutzen, damit es funktioniert muss man die Anweisung position: relative geben*/
	 	 position: relative;/* das Element wird relativ zu seiner ursprünglichen Position auf der Seite verschoben.*/
	  	 font-size: 100%;/* Browserstandard: 16px = 1rem */		
}
/*BODY*/
body{
		font: 400 15px/24px 'Lato', sans-serif;		
		background-color: #000;		
}

/*noscript-Fallback*/
#oben noscript p {
        color: red;
        font-size: 1.2em;
        text-align: center;
        margin: 20px;
}
/*HEADER*/
.site-header {
		background-color : #060606;
}
/*HEADER -Hamburger rechts - vorher .site-header span*/
#oben .site-header .hauptbutton {
		float : right;
		
		margin:9px 24px 0 0;
		border-radius : 4px;
		padding : 1px 8px 3px 8px;
		
		background: #f66; /* Fallback */
		background : linear-gradient(to bottom, #f66, white);
	  	border-top: thin solid #000;      /* Für den oberen Rand */
		border-left: thin solid #000;     /* Für den linken Rand */
		border-right: thin solid #000;    /* Für den rechten Rand */

}
/*HEADER-LOGO*/
.logo{
		display: block;      /*Siehe HTML*/
	  	height: 108px;        /*Siehe HTML*/
		margin: 15px 0 10px 15px;
}

/*NAVIGATION - Klick Hamburger ==> Ganze Seite*/
#oben .site-header #nav{
		height: calc(100% - 30px);  /* Höhe des Viewports minus das Padding */
    	padding-top: 30px;           /* Padding wird normal angewendet */ 
	 	width: 0; 				/* 0 width - change this with JavaScript */
		
	  	position: fixed; 		/* Stay in place */
	  	z-index: 3; 			/* Stay on top */
	  	top: 0; 				/* Stay at the top */
	  	left: 0;
	  	overflow-x: hidden; 	/* Disable horizontal scroll */
		
	  	transition: width 0.5s; 		/* 0.5 second transition effect to slide in the navigation */
	  	text-align: center;
	  	background-color: #000;/*#262626;*/
}
/* NAVIGATION - Klick Hamburger ==> Listenpunkte*/
.nav__list li{
		margin-top:24px;
  		position:relative;  /* Elternelement */
}
/* NAVIGATION - Klick Hamburger ==>  Links*/
.nav__list li a {
		padding: 8px 8px 8px 32px;
		text-decoration: none;
		font : 500 1.5625rem/2.25rem 'Lato', sans-serif;
		color:#f66; /*#F00;*/	
		display: block;
		transition: 0.3s;  	
}
.nav__list li a:hover,
.nav__list li a:focus {
		color: #000;
		background-color: #fff;
}

/* NAVIGATION - Klick Hamburger ==> schiefes Kreuz X -Button*/
#oben .site-header #nav .nav__list li .closebtn{
		padding: 0 16px 0 16px;
		color: #f66;
		font-size: 1.9em;
		background-color: #000;

		border-top-color: #000;
		border-right-color: #000;
		border-bottom-color: #000;
		border-left-color: #000;
}
#oben .site-header #nav .nav__list li .closebtn:hover, 
#oben .site-header #nav .nav__list li .closebtn:focus {
		color : #000;
		background-color : #fff;

}
/*MAIN*/ 
main{/*-Lsg des Problems*/
		overflow-x : hidden;
		margin : 0 auto;	
}
/*SECTUIN EINS ZWEI DREI*/
.eins, .zwei, .drei { /*Parallax Effect */
 		background-attachment: fixed;
  		background-position: center;	
		background-size: cover;
		background-repeat: no-repeat; /*Hg-bilder, die kleiner als die verfügbare Größe sind, werden normalerweise gekachelt. Deshalb wird background-repeat auf no-repeat gesetzt, falls die obere Einstellung von background-size einmal geändert wird.*/
}
/*SECTION EINS*/
.eins { /*Oberster Teil: Welcome to my Website.... */
		min-height : 300px;
		
		padding-top : 35px;
		margin-bottom : 45px;
		animation : textwelle 9s;
		
		font-size : 3.125rem;/*50px;*/
		line-height : 9.375rem; /*150px;*/
		
		font-family : 'Lato', sans-serif;
		text-align : center;
				
		text-shadow : -7px -3px 0 #fff;
		word-spacing : 3px;
		text-indent : 500px;
}
#oben main .eins h1{
		font-size : 150%;
}
.eins h1::first-letter {/*Oberster Teil: Erster Buchstabe.... */
		font-size : 150%;
		font-family : 'Dancing Script', cursive;		
}
.eins h1 b {/*Farbe von Digital Art and Photography */
		color : #F66;
}
/*SECTION ZWEI*/
.zwei { /*Mittlerer Teil - Digital Art - Bild*/
		min-height: 1000px;	/*-Lsg des Problems*/
		background-image: url(../images/titel/tanz-titel.avif), url(../images/titel/tanz-titel.jpg); /* AVIF als erstes Bild, JPEG als Fallback */	
}
/*SECTION DREI*/
.drei {/*Unterer  Teil - Photography- Bild*/
		min-height: 1000px;/*-Lsg des Problems -feste Breite*/
		background-image: url(../images/titel/wild-tulip-titel.avif), url(../images/titel/wild-tulip-titel.jpg); /* AVIF als erstes Bild, JPEG als Fallback*/		
}
/* ANIMATIONS*/
@keyframes textwelle {/*Textwelle*/
0% {
		transform : scale(0.1);
		opacity : 0;
}
70% {
		transform : scale(1.6);
		opacity : 1;
}
100% {
		transform : scale(1);
		opacity : 1;
}
}
@keyframes leuchten {/* Leuchten der Strasse = Animationsname -- Balken ---  digital Art und Photography */
0% {
		background-color : #fff;
		box-shadow : 0 0 8px rgb(51, 51, 51, 0.6);
}
50% {
		background-color : #ff6666;
		box-shadow : 0 0 20px rgb(255, 102, 102, 0.6);
}
100% {
		background-color : #fff;
		box-shadow : 0 0 8px rgb(51, 51, 51, 0.6);
}
}
@keyframes rennen {/* Laufende Schrift = Animationsname  bei digital Art und Photography */
0% {
		transform : translate(0);/* Wegpunkt */
}
100% {
		transform : translate(980px);/* Wertangaben */
}
}
/*HORIZONTALE BALKEN*/
.balken1, .balken2 {/*Digital Art und Photography- Text -- Balken*/
		height : 80px;
		animation : leuchten 3s infinite;
}
.balken1:hover, .balken2:hover, .balken1:hover, .balken2:focus {/*Balken plus laufender Titel*/
		height : 80px;
		animation : leuchten 3s infinite;
}
.balken1 h2, .balken2 h2 {/*Balken plus laufender Titel*/
		position : relative;
		animation : rennen linear infinite;/*animation-name, animation-timing-function, animation-itration-count*/
}
.balken1 h2 a, .balken2 h2 a {
		font-size : 4rem;/*64px;*/
		line-height : 4.625rem;/*74px;*/
		font-family : 'Dancing Script', cursive;
		color : #000;
		text-decoration : none;
		font-weight : 600;
}
.balken1 h2 a:hover, .balken2 h2 a:hover, .balken1 h2 a:hover, .balken2 h2 a:focus {
		color : #F66;
		text-decoration : none;
		font-weight : 600;
}
.balken1 h2:nth-of-type(1), .balken2 h2:nth-of-type(1) {
		animation-duration : 6s;
		animation-delay : -2s;
}
/*FOOTER*/
.site-footer p {/*COPYRIGHT*/
		font-size : 1rem;/*16px;*/
		font-weight : 500;
		text-align:center;	
		color : #fff;
		padding-top: 1.5rem;
}
/*Haupt -Navigation für Screanreader*/
.visually-hidden {
    	position: absolute !important;
    	width: 1px !important;
    	height: 1px !important;
    	padding: 0 !important;
		margin: -1px !important;
    	overflow: hidden !important;
    	clip-path: inset(50%) !important;
    	white-space: nowrap !important;
    	border: 0 !important;
}
@media screen and (max-width: 1420px) {
/*SECTION EINS*/
.eins {
		min-height : 270px;
		padding-top : 27px;
		margin-bottom : 40px;
		
		font-size : 2.813rem;/* 45px;*/
		line-height : 9.375rem; /*150px*/
		
		text-indent : 413px;
}
}
/* ANIMATIONS*/
@keyframes rennen {
0% {
		transform : translate(0);
}
100% {
		transform : translate(1600px);
}
}

@media screen and (max-width: 1260px) {
/*SECTION EINS*/	
.eins {		
		font-size : 2.5rem;/* 40px;*/
		line-height : 8.75rem;/* 140px;*/
}
}
/* ANIMATIONS*/
@keyframes rennen {
0% {
		transform : translate(0);
}
100% {
		transform : translate(1260px);
}
}
@media screen and (max-width: 1000px) {
/*SECTION EINS*/
.eins {
		font-size : 2.188rem;/* 35px;*/
		line-height : 8.125rem;/* 130px;*/
}
/*HORIZONTALE BALKEN*/
.balken1 h2 a, .balken2 h2 a {
		font-size : 3.938rem;/*63px;*/
		line-height : 4.563rem;/*73px;*/
}
}
/* ANIMATIONS*/
@keyframes rennen {
0% {
		transform : translate(0);
}
100% {
		transform : translate(1000px);
}
}

@media screen and (max-width: 945px) {
/*SECTION EINS*/
.eins {
		min-height : 180px;
		padding-top : 24px;
		margin-bottom : 36px;
		
		font-size : 1.81rem;/*29px;*/
		line-height : 8.125rem;;/*130px;px;*/
		text-shadow : -8px -4px 0 #fff;
		
		text-shadow : -6px -3px 0 #fff;
		word-spacing : 3px;
		text-indent : 243px;
}
/*SECTION ZWEI und DREI*/
.zwei, .drei {
		min-height : 880px;
}
/*HORIZONTALE BALKEN*/
.balken1, .balken2 {
		height : 77px;
}
.balken1:hover, .balken2:hover, .balken1:hover, .balken2:focus {
		height : 77px;
}
.balken1 h2 a, .balken2 h2 a {
		font-size : 3.813rem;/*61px;*/
		line-height : 4.438rem;/*71px;*/
}
}
/* ANIMATIONS*/
@keyframes rennen {
0% {
		transform : translate(0);
}
100% {
		transform : translate(945px);
}
}

@media screen and (max-width: 769px) {
/*HEADER -Hamburger rechts*/
#oben .site-header .hauptbutton {
		margin:9px 16px 0px 0px;
}
/*SECTION EINS*/
.eins {
		min-height : 170px;
		padding-top : 24px;
		margin-bottom : 36px;
		
		font-size : 1.563rem;/*25px;*/
		line-height : 6.25rem;/*100px;*/
		
		text-shadow: -4px 2px 0 #fff;
		word-spacing : 3px;
		text-indent : 228px;
}
/*SECTION ZWEI und DREI*/
.zwei, .drei {
		min-height : 800px;
}
/*HORIZONTALE BALKEN*/
.balken1, .balken2 {
		height : 66px;
}
.balken1:hover, .balken2:hover {
		height : 66px;
}
.balken1 h2 a, .balken2 h2 a {
		font-size : 3.125rem;/*50px*/
		line-height : 3.75rem;/*60px*/
}
.site-footer  p  {/*COPYRIGHT*/
		font-size : 1rem;/*16px*/
}
}
/* ANIMATIONS*/
@keyframes rennen {
0% {
		transform : translate(0);
}
100% {
		transform : translate(769px);
}
}

@media screen and (max-width: 667px) {
/*SECTION EINS*/	
.eins {
		font-size : 1.438em;/*23px*/
		line-height : 6.25rem;/*100px*/
		
		text-shadow: -3px 1px 0 #fff;
		word-spacing : 3px;
		text-indent : 200px;
}
/*SECTION ZWEI und DREI*/
.zwei, .drei {
		background-position : center center;
		background-attachment : scroll;
}
}
/* ANIMATIONS*/
@keyframes rennen {
0% {
		transform : translate(0);
}
100% {
	transform : translate(667px);
}
}

@media screen and (max-width: 570px) {
/*SECTION EINS*/	
.eins {
		font-size : 1.25em;/*20px*/
		line-height : 5.5rem;/*88px*/

}
/*SECTION ZWEI und DREI*/
.zwei, .drei {
		min-height : 700px;
}
}
/* ANIMATIONS*/
@keyframes rennen {
0% {
		transform : translate(0);
}
100% {
		transform : translate(570px);
}
}
@media screen and (max-width: 545px) {
/*SECTION EINS*/
.eins {
		font-size : 1.25em;/*20px*/
		line-height : 5.5rem;/*88px*/
		
		text-shadow: -3px 1px 0 #fff;
		word-spacing : 3px;
		text-indent : 160px;
}
/*FOOTER*/
.site-footer  p  {/*COPYRIGHT*/
		font-weight : 400;
}
}
/* ANIMATIONS*/
@keyframes rennen {
0% {
		transform : translate(0);
}
100% {
		transform : translate(545px);
}
}

@media screen and (max-width: 480px) {
/*SECTION Eins*/	
.eins {
		text-indent : 146px;
}
/*SECTION ZWEI und DREI*/
.zwei, .drei {
		min-height : 600px;
}
/*HORIZONTALE BALKEN*/
.balken1, .balken2 {
		height : 57px;
}
.balken1:hover, .balken2:hover, .balken1:hover, .balken2:focus {
		height : 57px;
}
.balken1 h2 a, .balken2 h2 a {
		font-size : 2.75rem;/*44px*/
		line-height : 3.438rem;/*55px*/
}
}
/* ANIMATIONS*/
@keyframes rennen {
0% {
		transform : translate(0);
}
100% {
		transform : translate(480px);
}
}

@media screen and (max-width: 450px) {
/*SECTION EINS*/	
.eins {
		padding-top : 20px;
		margin-bottom : 30px;
		
		font-size : 1.188rem;/*19px*/
		line-height : 5rem;/*80px*/
		
		text-shadow: -3px 1px 0 #fff;
		word-spacing : 2.5px;
		text-indent : 130px;
}
/*SECTION ZWEI und DREI*/
.zwei, .drei {
		min-height : 600px;
}
}
/* ANIMATIONS*/
@keyframes rennen {
0% {
		transform : translate(0);
}
100% {
		transform : translate(450px);
}
}

@media screen and (max-width: 418px) {
/*SECTION EINS*/
.eins {
		font-size : 1.313rem;/*21px*/
		line-height : 5rem;/*80px*/
		
		word-spacing : 3px;
		text-indent : 0;
}
/*SECTION ZWEI und DREI*/
.zwei, .drei {
		min-height : 550px;
}
}
/* ANIMATIONS*/
@keyframes rennen {
0% {
		transform : translate(0);
}
100% {
		transform : translate(418px);
}
}

@media screen and (max-width: 370px) {
/*SECTION EINS*/	
.eins {
		text-shadow : -3px 0px 0 #fff;
}
/*SECTION ZWEI und DREI*/
.zwei, .drei {
		min-height : 500px;
}
}
/* ANIMATIONS*/
@keyframes rennen {
0% {
		transform : translate(0);
}
100% {
		transform : translate(370px);
}
}

@media screen and (max-width: 360px) {
/*SECTION EINS*/
.eins {
		min-height : 188px;
}
}
/* ANIMATIONS*/
@keyframes rennen {
0% {
		transform : translate(0);
}
100% {
		transform : translate(360px);
}
}
@media screen and (max-width: 350px) {
/*SECTION EINS*/
.eins {
		padding-top : 19px;
		margin-bottom : 29px;

		word-spacing : 3px;
		text-indent : 0;
}
}
/* ANIMATIONS*/
@keyframes rennen {
0% {
		transform : translate(0);
}
100% {
		transform : translate(350px);
}
}

@media screen and (max-width: 320px) {
/*SECTION ZWEI und DREI*/
.zwei, .drei {
		min-height : 480px;
}
/*HORIZONTALE BALKEN*/
.balken1, .balken2 {
		height : 51px;
}
.balken1:hover, .balken2:hover, .balken1:hover, .balken2:focus {
		height : 51px;
}
.balken1 h2 a, .balken2 h2 a {
		font-size : 2.5rem;/*40px;*/
		line-height : 3.125rem;/*50px;*/
}
}
/* ANIMATIONS*/
@keyframes rennen {
0% {
		transform : translate(0);
}
100% {
		transform : translate(320px);
}
}

@media screen and (max-width: 300px) {
/*SECTION EINS*/
.eins {
		font-size : 1.188rem;/*19px*/
		line-height : 3.75rem;/*60px*/
}
}
/* ANIMATIONS*/
@keyframes rennen {
0% {
		transform : translate(0);
}
100% {
		transform : translate(320px);
}
}

@media screen and (max-width: 270px) {
/*SECTION EINS*/
.eins {
		padding-top : 18px;
		margin-bottom : 28px;
		
		font-size : 1rem;/*18px*/
		line-height : 3.75rem;/*60px*/
		
		text-shadow : -2px 0 0 #fff;
}
}