/* CSS Document */

/* 

  	oOo                               								    do                                    
	000																   dO
	OOO.o888bo.	  .od88bo.  .od88bo. ,o888o,   	                      888        
	888`    `88o d88' `888 d88' `888 88    "               		     888            .
	OOO      OOO OOO   OOO OOO   OOO  ooOOo,    	         	    88 o 	       d0. 
	000	     000 888, ,888 888, ,888 o    88					   d0 0b          d88o.
	oOO 	 OOo `o888888b.`o888888b.`oo88o`			           d0 0b	     o`00`o
															        d0 0b      d8 P  d .
	 .od88bo. d8888o.o8888888o 								         d8 8b	  d8 b   d .
	dOO' `888 88   88   888								              00 0   d0 b    8O.
	888   888 88ooo8`   888	  (\(\			                           o8 o  o8 o    db
	8O0, ,0O8 88"0.     888  =(o.O)=			                       o88odbo88o    o  
	`o888888b.08  "0b.  d8b  c(")(")							      (0O00art00O0)
																     0o``do888bo``o0
	    				                                           (0o    o8O8o    o0)
        											              (888o..ob8O8do..o888)
                                                      =========== <O0000000OyO000000O> ===========
                                                           ======== <O88800OyO00888O> =========
                                                                      8OO0 O0O 0OO8
                                                                        d8 888 b
                                                                          od|bo	
																			
*/

/*css reset*/
* {	padding:0;
	margin:0;
	box-sizing: border-box;
	scroll-behavior: smooth;
  }


/*css variablen*/
:root {
			/*farbdefinitionen gesamte website*/
			--hell:#cfdbda;
			--dunkel100:black; 
			--rotbraun:rgba(70,25,20);
			--rotbrauntp:rgba(70,25,20,0.7);
			--akzent:darkcyan;
			--fabel:#003530;
			--fabeltp:#00353004;
			--rost:#804E49;
			--lavendel:rgba(230,230,250); 
			--abrunden:0.4rem;
      }



/*elemente-------------------------------------------------------------------*/

body {
	background-repeat: no-repeat;
	background-size:cover;
	background-attachment:fixed;
	background-image: url("bilder/rabbithole_dunkel_struktur.png");
	padding:0;
	border:5px solid var(--dunkel100);
	 
	background-color:var(--fabel);
  /*  color:var(--hell);*/
    font-family: "Barriecito", serif;
    font-weight: 400;
    font-style: normal;		
}

html, body {
	scroll-behavior: smooth;
		}

main {
	padding:3%;
}

h1 {
	text-transform: uppercase;
	text-align: center;
	color:var(--hell);
	font-family: "Barrio", serif;
 	font-size:50px;
    padding:0rem;
	padding-top:0rem;
	letter-spacing: 0.8rem;
	margin:0rem;
	font-style: normal;
}


h2 {
	font-family: "Barriecito", serif;
	text-align: center;
	font-size:50px;
	color:var(--hell);
	font-style: normal;
}

h3 {
	font-family: "Barriecito", serif;
	text-align: center;
	color:var(--lavendel);
	font-style: normal;
}

h4 {
	font-family: "Barriecito", serif;
	text-align: center;
	color:var(--hell);
	font-style: normal;
}
/*links----------------------------------*/

a {
		color:var(--hell);
		text-decoration:none;
}

a:link {
    	font-weight:bold;
    	text-decoration:none;
}

a:visited {
   		color:var(--hell);
    	font-weight:bold;
    	text-decoration:none;
}




#logogif {
  width:90%;
}

#hasegif {
	width:150%;
	
}

/*schriften------------------------------------------------------*/



.shadows-into-light-regular {
  font-family: "Shadows Into Light", serif;
  font-weight: 400;
  font-style: normal;
}


/*font absätze*/
.shadows-into-light-two-regular {
  font-family: "Shadows Into Light Two", serif;
  font-weight: 400;
  font-style: normal;
}

.covered-by-your-grace-regular {
  font-family: "Covered By Your Grace", serif;
  font-weight: 400;
  font-style: normal;
}

/*font überschrift h2 und h3*/
.barriecito-regular {
  font-family: "Barriecito", serif;
  font-weight: 400;
  font-style: normal;
}


/*font überschrift h1 - alles gross*/
.barrio-regular {
  font-family: "Barrio", serif;
  font-weight: 400;
  font-style: normal;
}

/*class--------------------------------------------------------------------*/

.grossbuchstaben { 
		text-transform: uppercase;
		}
.kleinbuchstaben { 
		text-transform: lowercase;
		}
.kleineschrift {
		font-size: 0.7rem;
		}
.zeichenabstand {
		letter-spacing:10px;
}




.zentriert {
	display:flex;
	justify-content: center;
	align-items: center;
}
.img_zentriert {
	display:block;
	margin:auto;
	width:auto;
	padding:1rem;
	}





.text_inhalt {
	
}


.flex { 
    display: flex; 
    justify-content: center; 
    align-items: center;
}







div {
	/*border:3px dashed red;*/
}

p {
    display: block;
    margin-block-start:0.5rem;
    margin-block-end: 0.5rem;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    unicode-bidi: isolate;
	color:var(--hell);
	font-family:"Shadows Into Light Two", serif;
	text-align: center;
	padding: 1rem;
}

/* Hauptcontainer */
#container {
    margin:0 auto;
	max-width: 1600px;
	min-height: 100vh;
   /* border:3px solid rgba(255,22,255,1);
    box-shadow:0px 0px 3px 4px rgba(33,33,33,0.2);
    border-radius: 0.4rem;*/
	display: flex;
	
	position:relative;
}


header {
	
	

}

section { 
		  
	
   
}



/*navigation----------------------------------*/

nav{ 
	border:10px solid var(--fabel);
	border-radius:1rem;
	background-color:var(--fabel);
	position:absolute;
	top:1rem;
	right:1rem;
	z-index:42; 
}

		/*spricht einzeln link an. nicht im nav, da sonst alle links angesprochen werden*/
nav a {
	border-radius: var(--abrunden);
	padding:0 0.5rem;
	
	font-weight: bold;	
		
		}
		
nav a:hover {
	border:1px solid var(--hell);
	background:var(--hell);
	color: var(--dunkel100);
	transition:0.3s ease-in-out color;
		}

/* Aktiver Menüpunkt hervorheben (eigene Klasse) */
.aktiv {
    background:black;
    color:white !important;
}

/*nav a:visited {
   color:cadetblue;
}*/

/*nav a:active {
   color:blue;
}*/


/*welt------------------------------------------------------*/

#welt {
	width:100%;
	height:100%;
	max-width:1300px;
	max-height:700px;
	/**/border:3px solid white;
	border-radius: 1rem; 
	position:relative;
	top:10vh;
	left:0rem;
	right:0rem;
	bottom:0rem;
	margin:0 auto;
	
}


/*footer--------------------------------------------------*/

.animation_aktivieren {
	/*border:1px solid rgba(255,255,255,0.7);*/
	position:absolute;
	cursor:pointer;
	opacity:1;
	transition:all ease-in-out 0.3s;
}
.animation_aktivieren:hover {
	opacity:1;
	transform:scale(1.02);
	transition:all ease-in-out 0.2s;
}

.animation_aktivieren img {
	width:100%;
	height:100%;
}
/*footer--------------------------------------------------*/
	
footer {
	
	/*border:2px solid yellow;*/
	color:var(--hell);
	
	font-size:16px;
	
	box-sizing:border-box; /*damit die breite ohne border gerechnet wird*/
	position:fixed; /*absolut zum ganzen Dokument*/
	left:0;
	bottom:0rem;		
	height:5rem;
	width:100%; /*breite wieder auf 100%*/
	
	/*background-image:url("bilder/footer_neu.png");*/
	background-size:1600px 150px;
	background-position:bottom;
	background-repeat: no-repeat;
	
	z-index:100;
		
}


/*================================*/
		/*RESPONSIV*/
/*================================*/
		
		@media screen and (max-width:800px){
			
			body {
				/*border:10px dotted white;*/
			}
			
			
			.kacheln article {
				width:100%;
			}
			
			
			.panels article {
				width:100%;
			}
			
			
			footer {
				/*border:10px dotted orange;*/
				height:auto;
				
			}
			
			footer div {
				width: 100%;
				margin:2rem 0rem;
				padding:2rem 0rem;
				border-top:1px solid yellow;
				border-bottom:1px solid yellow;
				
			}
			
			
			/*navigation normal desktop verstecken*/
			/*nav {
				display:none; 
			}
			*/
			
			#menu_mobile {
				display:flex;
			}
			/*ende media 800px*/
		}
		
		/*=====HAMBURGER MENU MOBILE=====*/
		
			#menu_mobile {
			/*display:none;*/
			flex-direction:column; 
			background: rgb(00,35,30);
			display:flex; /*nebeneinander*/
			width:100vw;
			height:100vh;
				
			position:fixed; 
			left:100vw; 
			top:0;
			z-index:555; 
			transition: all ease-in-out 0.4s;
				
		}
		
		#menu_toggle {
			display:none;
			}
		
		label [for="menu_toggle"] {
			border:1px solid red;
		}
		
		/*zustand wenn das menu angeklickt wurde*/
		#menu_toggle:checked +#menu_mobile {
			background: rgb(0,0,0,0.5);
			display:flex;
			position:absolute;
			top:4rem;
			left:0;
			z-index:333;
			transition: all ease-in-out 0.3s;
			
		}