/* 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
                                    o0                                                                                                                          o0
                      o0            00           o0                                      o0              o8            o0         o0                            00
									00           00                                      88              00                                                     00
     .od88bo. ,o888o, 8o  .od88bo.	00.o88bo. o000000o ,o888o,   .od88bo.  80oooooo.  o088008o .od88bo.  00  .od88bo.  88 ,o888o, 8o  .od88bo.		  .od88bo.	00.o88bo.		
     .od88bo. ,o888o, 88  .od88bo.	00.o88bo. o000000o ,o888o,   .od88bo.  00o888bo.  o088008o .od88bo.  00  .od88bo.  88 ,o888o, 88  .od88bo. 		  .od88bo.	00.o88bo.		
	dOO' `888 88    " 00 dOO'   `8o	00	   00	 00	   88    "  dOO'   `88 00      00    00	  dOO' `888  00 dOO'   `88 00 88    " 00  d00` `888      dOO'   `8o 00     00
	888   888 ooOOo,  88 888   		00	   00    88     ooOOo,  888ooooo88 00      00    88   888   888  88 888ooooo88 00  ooOOo, 00  d00   888      888        00     00
	8O0, ,0O8 o    88 00 8O0,    8o	00	   00    88    o    88  8O0,       00      00    00	  8O0, ,0O8  00 8O0,       88 o    88 00  000, ,008  0o  8O0,    8o	00     00
	`o8888888 `oo888P 8o  `o88880`	00     0o    8o    `oo888P   `o88880P  00      0o    0o   `o8888888  88  `o88880P  00 `0oo88P 0o  `o0oo0000  0o   `o88880`  00     0o
           88                                                                                        88                                      88
		   88                                                                                        88                                      88
     o 000 88                                                                                  o 000 88                                o 000 88
      00000P                                                                                    00000P                                  00000P

																			
*/


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


/*css variablen*/
:root {
			/*farbdefinitionen gesamte website*/
			--hell:#cfdbda;
			--dunkel100:#0a0a0d;
            --halbdunkel:#141C1E;
			--dunkelgruen:rgba(24, 35, 34,0.9);
			--rotbraun:rgba(70,25,20);
			--rotbrauntp:rgba(70,25,20,0.7);
			--akzent:#008B8B;
			--fabel:#003530;
			--fabeltp:rgba(00,35,30,0.9);
			--rost:#804E49;
			--lavendel:rgba(230,230,250); 
	
			--abrunden:0.4rem;
	
	        --wcart:rgba(20,28,30,0.8);
			
	
	
	
      }

/*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(--fabel);*/
	background:var(--halbdunkel);
   /*  color:var(--hell);*/
    font-family: "Barriecito", serif;
    font-weight: 400;
    font-style: normal;	
	cursor:url("/bilder/icons/cursor_feder.svg") , pointer  ;
   /* overflow-y:hidden;*/
}

/*html, body {
/*	scroll-behavior: smooth;
	height: 100%;
	overflow: hidden;
		}*/



* {
  box-sizing: border-box;  /*lightbox galerie, fireflies*/
}



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;
	font-size:2rem; /*clamp(1rem, 3vw + 1rem, 4rem);*/
  	position: relative;
 /* font-family: "Barriecito, serif";*/
      width: max-content;
}

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

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


/*links-------------------------------------------------------*/

a {
		color:var(--hell);
		text-decoration:none; 
        font-weight:bold;
        letter-spacing: 0.02rem;
}

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

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

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

video {
    display:block;
	margin:auto;
	width:auto;
	padding:1rem;
    
}



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: left;
	padding: 1rem;
}

/* Hauptcontainer */
#container {
    margin:0px 10px 10px 20px;
	max-width:1300px;
	height:auto;
   /*	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;
    background-color: var(--dunkel100);

}

/*border container...............................*/
.boxcontainer{
 	margin:0px 0px 0 0px;
	padding:0 0px 0px 0px;
  	width:98%;
  	height:90%;
 /* background:#fff;*/
  	border:20px solid var(--hell);
 /* float:left; */
}
.box3container{
	  border-width: 1px 5px 1px 5px;
	  border-radius:70% .9% 95% .9%/1.2% 85% .9% 80%;
	  transform: rotate(deg);
}
.oddboxinnercontainer{
	  margin:5px;
	  transform: rotate(-4deg);
}


.evenboxinnercontainer{
	  transform: rotate(0deg);
	  margin:5px;
	  padding:0 5px;
	  float:right;
	background:var(--wcart);
	  border:1px solid #222;
	  box-shadow:3px 3px 0 var(--fabel);
	}


header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	max-width: 1300px;
	margin:0 auto;
    position: relative; /* wichtig für absolute Zentrierung */
}

.header-title {
	position: absolute;
	left: 50%;
	bottom: 0;              /* sitzt optisch im Header */
	transform: translateX(-50%);
	pointer-events: none;  /* Navigation bleibt klickbar */
    animation: headerFadeIn 0.6s ease-out;
    
}
@keyframes headerFadeIn {
	from {
		opacity: 0;
		transform: translate(-50%, 10px);
	}
	to {
		opacity: 1;
		transform: translate(-50%, 0);
	}  
}
    
    

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

form {
    color:var(--lavendel);
}

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

nav{ 
	/*border:1px solid var(--hell);*/
	border-radius:.5rem;
	background-color:var(--fabel);
	width:auto;
	padding:5px;
    display:flex;
    flex-direction: column;
    margin: 2px;
	/*position:absolute;
	top:4%;
	right:9%;
	z-index:42; */
}
	/*spricht einzeln link an. nicht im nav, da sonst alle links angesprochen werden*/
nav a {
	border-radius: var(--abrunden);
	padding:10 0.5rem;
	font-weight: bold;	
	transform:scale(1);
	transition: ease-in-out .7s all;
	cursor:url("/bilder/icons/cursor_hand.svg") , pointer  ;
	
}
		
nav a:hover {
	/*border:1px solid var(--hell);*/
	background:var(--hell);
	color: var(--dunkel100);
	transition:0.3s ease-in-out color;
	filter:brightness(1.2);
	transform:scale(1.05);
}


/*border navigation...........................................*/
.boxnav{
 	margin:10px 20px 15px 0;
	padding:0 0px 3px 0px;
  	width:auto;
  	height:100%;
 /* background:#fff;*/
  	border:5.2px solid var(--hell);
 /* float:left; */
}
.box3nav{
	  border-width: 1px 5px 1px 5px;
	  border-radius:70% .9% 95% .9%/1.2% 85% .9% 80%;
	  transform: rotate(deg);
}
.oddboxinnernav{
	  margin:2px;
	  transform: rotate(-4deg);
}


.evenboxinnernav{
	  transform: rotate(0deg);
	  margin:5px;
	  padding:0 5px;
	  float:right;
	  background-color: var(--wcart);
	  border:1px solid #222;
	  box-shadow:3px 3px 0 var(--fabel);
	}

/*cover...........................................*/
/*#coverOverlay{
     width: 100%;
}*/
   

.cover-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  cursor: pointer;
  display: flex;
  /*align-items: center;
  justify-content: flex-start;*/
 padding: 6vh 20vw;
  overflow: hidden;
  /* Coverbild: Pfad anpassen! */
  /*background: url("../bilder/moi_ballon.png") center center / cover no-repeat;*/
  opacity: 1;
  visibility: visible;
  transition: opacity .45s ease, visibility .45s ease;
}

.cover-overlay.is-hidden{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.cover-dim{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35); /* Abdunklung fürs Lesen */
  z-index: 1;
    
    
}
.cover-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.cover-hint{
  position: absolute;
  left: 50%;
  bottom: 24px;   /* oder 5px wenn du es ganz unten willst */
  transform: translateX(-50%);
  z-index: 2;
  color: #fff;
  font-size: 14px;
  opacity: .85;
  text-shadow: 0 2px 10px rgba(0,0,0,.7);
    
 
}

/*#typewriter,
.cover-hint{
  position: relative;
  z-index: 2;
}*/


#typewriter{
  position: relative;
  z-index: 2;
  max-width: 900px;
  font-size: clamp(18px, 2.2vw, 34px);
  line-height: 1.35;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
  white-space: pre-line; /* wichtig für &#10; Zeilenumbrüche */
}

#tw-cursor{
  animation: twblink 1s step-end infinite;
}

@keyframes twblink{
  50% { opacity: 0; }
}




#siteContent {
   /*background: url("../bilder/moi_ballon.png");*/
    background-color: var(--wcart); 
}
.site-content.is-hidden{
  display: none;
}


.comment {
	color:darkslategray;
	font-style: italic;
}

.fa, .fas, .fab {
	color:var(--color_03);
}



/*welt========================================================================================*/
/*
#welt {
	width:100%;
	height:100%;
	max-width:1400px;
	max-height:580px;
	/*border:2px ridge var(--fabeltp);*/
	/*border-radius: 2rem; 
    /*border:10px solid green;*/
	/*position:relative;
	top:0vh;
	left:0rem;
	right:0rem;
	bottom:0rem;
	margin:0 auto;
    /*background: url("../bilder/moi_ballon.png");
      border:1px solid yellow;
}*/



/*border welt.........................
.boxwelt{        /*verschiebung box/container mit inhalt
 	margin:0px 0 0 10px;
	padding:50px 50px 50px 50px;
  	/*width:98%;
  	height:88%;*/
 /* background:#fff;
  	border:20px solid green;
 /* float:left; 
     grid-template-columns: 60px 60px;
    grid-template-rows: auto;
}
.box3welt{
	  border-width: 1px 5px 1px 5px;
	  border-radius:70% .9% 95% .9%/1.2% 85% .9% 80%;
	  transform: rotate(deg);
}
.oddboxinnerwelt{
	  margin:5px;
	  transform: rotate(-4deg);
}


.evenboxinnerwelt{
	  transform: rotate(0deg);
	  margin:5px;
	  padding:0 5px;
	  float:right;
	 /* background:var(--fabel);
	  border:1px solid #222;
	  box-shadow:3px 3px 0 var(--fabel);
	}*/

.overflow_hidden {
	overflow:hidden;
}

/*==============startseite==================================================================================*/

/* ===== Gsichtsentgleisig Grid-Galerie ===== */
.gg-gallery{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
  grid-auto-flow: dense;
}

/* Basis-Item */
.gg-item{
  display:block;
  border-radius: 10px;
  overflow:hidden;
  background: rgba(255,255,255,0.06);
  position: relative;
  grid-column: span 4;   /* default: 3 Items pro Reihe (12/4) */
  grid-row: span 8;      /* default Höhe */
}

.gg-item img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transition: transform .35s ease, opacity .25s ease;
}

.gg-item:hover img{
  transform: scale(1.03);
  opacity: .9;
}

/* Variationen (wie „Masonry“) */
.gg-wide{ grid-column: span 8; grid-row: span 7; }
.gg-tall{ grid-column: span 4; grid-row: span 12; }
.gg-big { grid-column: span 8; grid-row: span 12; }
.gg-wide{ grid-column: span 8; grid-row: span 7; }
.gg-tall{ grid-column: span 4; grid-row: span 12; }
.gg-big { grid-column: span 8; grid-row: span 12; }

/* Responsive */
@media (max-width: 1000px){
  .gg-gallery{ grid-template-columns: repeat(8, 1fr); }
  .gg-item{ grid-column: span 4; }   /* 2 pro Reihe */
  .gg-wide, .gg-big{ grid-column: span 8; } /* volle Breite */
}
@media (max-width: 600px){
  .gg-gallery{ grid-template-columns: repeat(4, 1fr); }
  .gg-item, .gg-wide, .gg-tall, .gg-big{
    grid-column: span 4;  /* 1 pro Reihe */
    grid-row: span 10;
  }
}





/* fancybox css anpassen (überschreiben)=======================================*/
.fancybox__backdrop {
		background-color:var(--dunkelgruen);
}

/*text fancybox*/
.fancybox__caption {
		color:var(--hell);
		font-size:1rem;
		text-transform:uppercase;
		position:relative;
}
.fancybox__caption .fancycaption_text{
		color:var(--hell);
		font-size:1.5rem;
		/*background:rgba(33,33,33,0.1);
		border:3px dashed green;*/
		text-transform:uppercase;
		text-align: center;
		text-shadow:3px 3px 4px rgba(22,22,22,0.8);
		z-index:888;
		position:absolute;
		bottom:20vh;
		width:40vw;
		left:-20vw;
}

.fancybox__caption:after {
		content:" | © foto by Fabienne Haas";
}

.fancybox__nav .is-next {
	background:none;
	background-image:url("bilder/pfeil_rechts.png");
	background-size:4rem;
	background-repeat: no-repeat;
	background-position:-0.5rem;
	width:5rem;
	height:5rem;
}

.fancybox__nav .is-next svg {
	display:none;
}

.fancybox__nav .is-next:hover {
	background-position:.5rem;
}

.fancybox__nav .is-prev{
	background:none;
	background-image:url("bilder/pfeil_links.png");
	background-size:4rem;
	background-repeat: no-repeat;
	background-position:-0.5rem;
	width:5rem;
	height:5rem;
}

.fancybox__nav .is-prev svg {
	display:none;
}

.fancybox__nav .is-prev:hover {
	background-position:.5rem;
}

/*filter bilder, text usw.*/
.drop-shadow {
    -webkit-filter: drop-shadow(5px 5px 3px rgba(0,0,0,0.7));
    filter: drop-shadow(5px 5px 3px rgba(0,0,0,0.7));
}

/*===========================================*/


/*schneeflöckli------------------------------------------------------------------------------*/
.intro,
.intro a{
  color:#003530;
}
/*snowflake styling */
.snowflake {
  color:var(--hell);
  font-size: 0.6em;
  font-family: Arial;
  text-shadow: 0 0 1px #000;
}
@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%{-webkit-transform:translateX(0px);transform:translateX(0px)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}100%{-webkit-transform:translateX(0px);transform:translateX(0px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%{transform:translateX(0px)}50%{transform:translateX(80px)}100%{transform:translateX(0px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}
/* Demo Purpose Only*/
.demo {
  font-family: 'Raleway', sans-serif;
	color:var(--hell);
    display: block;
    margin: 0 auto;
    padding: 15px 0;
    text-align: center;
}
.demo a{
  font-family: 'Raleway', sans-serif;
color: #000;		
}
	

/*gif..animationen.................................................................*/

#logo_gsicht { 
	width: 80px;
	height: 80px;
	z-index:1000;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	max-width: 1300px;
	margin:5px 5px 5px 5px;
    padding:5px;
	/*position: absolute;
	top:2%;
	left:9%;*/
}
#logo_cam { 
	width: 15%;
	z-index:1000;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	max-width: 1300px;
	margin:0px;
    padding:15px 0 0 0;
	/*position: absolute;
	top:2%;
	left:9%;*/
}

/*text animation*/
.home_text_animation {
    /*position:absolute;
    right:28%;
    bottom:35%;*/
    text-align: left;
    justify-content: center;
    size:100px;
    text-shadow:3px 3px 4px rgba(22,22,22,0.8);
    padding:0 0 0px 0;
}

.fade-in-out {
    opacity: 0;
    animation: fadeIn 3s forwards, fadeOut 15s 2s forwards;
}
@keyframes fadeIn {
  to { opacity: 3; }
}
@keyframes fadeOut {
  to { opacity: 0; }
}

/*#home_titelbild {
		background-color:var(--dunkel100);
		position:absolute;
		bottom:-4.5%;
		left:11.9%; 
		width:auto;
		height:103%;
        z-index:7;
} */

/*#home_schliess_button {
		width:auto;
		height:270px; 
		margin:0 auto;
		position:absolute; 
		bottom:0%;
		right:0%;
	
}*/


/*------===============================================================================================================================
MEDIATHEK=================================================================================================================================
------=============================================================================================================================-*/

/* ================= BILDERGALERIE =============== */
/* ================= BILDERGALERIE =============== */
.bildergalerie {
	display:flex;
	flex-wrap:wrap;
	justify-content: space-between;
    border:2px solid var(--background_02);
    border-radius:var(--border-radius);
}

.bildergalerie a {
	width:33%;
	aspect-ratio:3/2;
}
.bildergalerie img {
    object-fit: cover;
	width:100%;
	height:100%;
    opacity: 1;
    transition:all ease-in-out 0.5s;
    border-radius:var(--border-radius);
}
.bildergalerie img:hover {
    opacity: 0.8;
    transition:all ease-in-out 0.3s;
}





/*sparkling stars cursor==============================================*/
.star {
	position: fixed;
	pointer-events: none;
}

.star:before, .star:after {
	position: absolute;
	top: 0;
	left: 0;
	content: '\2726';
	font-size: 9px;
}

.star:before {
	color: transparent;
	text-shadow: 0 0 3px var(--lavendel);
}

.star:after {
	background-color: var(--lavendel);		/*#717EC3*/
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}



/* ================= fehlermeldung =============== */
/* Fehlermeldung ausgeben */
.fehlermeldung {
	display:block;
	background:red;
	color:yellow;
	margin:1rem 0rem;
	padding:0.5rem;
}


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














/*========================================================================================================================*/
/*=======================================================================================================================*/
/*======================================================================================================================*/
		                                           /*RESPONSIV*/
/*=====================================================================================================================*/
/*======================================================================================================================*/
/*=====================================================================================================================*/

/*=====MOBILE 600PX======================================*/
    @media screen and (max-width: 600px) {
        h1, h2, h3 {
            font-size: clamp(1.5rem, 6vw, 2.5rem);
            padding: 0.5rem 0;
        }
        .container, .main, .footer {
            padding: 0.5rem;
        }
        nav, .menumobile {
            width: 100vw;
        }
        header {
            flex-direction: column;
            align-items: center;
	    }
        .header-title {
            position: static;
            transform: none;
            margin: 0.5rem 0;
            animation: mobileFadeIn 0.5s ease-out;  
	     }
      @keyframes mobileFadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
	    .header-title h1 {
		    font-size: clamp(1.3rem, 6vw, 2rem);
		    letter-spacing: 0.25rem;
	     } 
    }
    

/*=====MOBILE 800PX========================================*/
		
		@media screen and (max-width:800px){
            .row {
            flex-direction: column;
                    display: flex;
                    flex-wrap: wrap;
                    padding: 5px;
            }

            .column {
                flex: 100%;
                max-width: 100%;
              }
			
			body {
				/*border:10px dotted white;*/
			}

            nav { 
                /*border:1px solid var(--hell);*/
                border-radius:.5rem;
                background-color:var(--fabel);
                width:auto;
                padding:1px;
                align-items: flex-start;
                display:flex;
                flex-direction: column;
                /*position:absolute;
                top:4%;
                right:9%;
                z-index:42; */                          
}
			    
            #home_welt {
                position:absolute;
                top:4270px;
                left:3300px;
                background:var(--dunkel100); 
                transform:scale(0.6) translateY(9rem)
}
           #miniwelt_home {
		        display: none;
		        backdrop-filter:blur(2px);
	 	        transform:scale(0.6) translateY(9rem)
}
			
			footer {
				/*border:10px dotted orange;*/
                font-size: 0.9rem;
				height:auto;
				
			}
			
			footer div {
				width: 100%;
				margin:2rem 0rem;
				padding:2rem 0rem;
				
			}
			
			
			#menu_mobile {
				display:flex;
			}
			
		}

/*=====MOBILE 1200PX==========================================================*/
    @media screen and (max-width: 1200px) {
      .container, .main, .footer {
        max-width: 90vw;
        font-size: 1.1rem;
        padding: 1rem;
      }
    }
        
/*tabletbildschirm=================================================================*/
    @media screen and (max-width: 1000px) {
      .grid {
        grid-template-columns: repeat(4, 1fr);
        grid-template-areas:
          "hero   hero   hero   hero"
          "hero   hero   hero   hero"
          "aside2 aside2 aside2 aside3"
          "aside4 aside4 aside5 aside5";
      }
        .header-title {
		bottom: -1.2rem;
       
	    }
        .header-title h1 {
		font-size: clamp(1.4rem, 4vw, 2rem);
		letter-spacing: 0.4rem;
        
        }
        
        
        
        
        
  /* Bei Bedarf Hamburger-Menü aktivieren */
} /*ende media 600PX*/


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