/* 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	
  00000000           00                    00             00           00              00     00
  00000000			 00                    00             00           00			   00     00
  00       .od88bo.  00         .od88bo.   00  ,o888o,     00         00    .od88bo.   00  00000000
  00000   dOO' `888  000000.   dOO' `888.  00  88    "     00         00   dOO' `888.  00     00
  00      888   888  00    00  888oooo888  00  ooOOo,       00  000  00    888oooo888  00     00
  00      8O0, ,0O8  00    00  00          00  o    88      00 00 00 00    00          00     00
  00      `o888888b. 00000P`    0000000`   00  `oo88o	     000   000      0000000`   00     00
																			
*/

/* CSS Document - von Fabienne Haas */

/* ================= SCHRIFTARTEN HOLEN =============== */
@import "https://fonts.googleapis.com/css?family=Open+Sans|Slabo+27px";


/* ================= VARIABLEN =============== */
/* Farben */
:root {
	--background_01: rgba(14,62,57,1.00); /* allgemeiner hintergrund */
	--background_02: rgba(26,159,148,1.00); /* titel dunkelgrau */
	--background_03: rgba(16,98,124,0.80); /* akzentfarbe hintergrund */
	--background_04: rgba(2,2,2,0.90); /* akzentfarbe dunkel */

	--color_01: rgba(255,255,250,1); /* Schrift */
	--color_02: var(--background_03); /* Links */
	--color_03: rgba(255,255,255,0.8); /* Weiss */
	
	--hell:#cfdbda;
	--fabel:#003530;
	--dunkel100:#0a0a0d;
	

	--border-radius:0.5rem; /* abrunden */
}


/* ================= STANDARD DEFINITIONEN =============== */
/* CSS reset */
* {
	padding:0px;
	margin:0px;
	box-sizing:border-box;	
}

html,body {
    height:100%;
    min-height:100%;
	padding:0.5rem 1rem;
    scroll-behavior: smooth;
}
/*  hier die hintergrundfarbe */
body {
    background:var(--background_04);
   /*font-weight: 400;
    font-style: normal;	
    font-size:1rem;
    color:var(--color_01);*/
    font-family: "Barrio", system-ui;
}

/* Hauptcontainer */
#container {
    margin:0 auto;
    padding: 0px 0px 0px 0px;
	max-width: 1080px;
	height:800px;
   /*	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;
}

h1, h2, h3, h4{
	
	font-family: "Barrio", system-ui;
    /*font-family:"Slabo 27px", Calbri, Tahoma, sans-serif;*/
    background:var(--background_04);
    padding:0.5rem;
    margin:0rem 0rem 1rem 0rem;
    border-radius:var(--border-radius);
	border: 2px;
}

h1{
    font-size:1.3rem;
	text-transform:uppercase;
	max-width:1200px;
	margin:0rem auto;
	border: 2px;
}
h2{
    font-size:1.2rem;
    margin-top:1rem;
}
h3{
    background:var(--background_03);
    font-size:1.1rem;
    margin-bottom:1rem;
}
h4{
    font-size:1rem;
}

/*SCHRIFTEN------------------------------------*/
.barrio-regular {
  font-family: "Barrio", system-ui;
  font-weight: 400;
  font-style: normal;
}

.barriecito-regular {
  font-family: "Barriecito", system-ui;
  font-weight: 400;
  font-style: normal;
}
/*-------------------------------------------*/

p {
    padding:1rem 0rem;
	font-family: "Barrio", system-ui;
}


a {
	color:var(--color_02);
    font-weight:bold;
	transition:all ease-in-out 0.5s;
	text-decoration: none;
    font-family: "Barrio", system-ui;
}
a:hover {
	color:black;
    font-weight:bold;
	transition:all ease-in-out 0.3s;
}
/*NAVIGATION-----------------------------------------*/
nav {
	background:var(--background_03);
    /*box-sizing:border-box;*/
	margin:0rem auto;	
	max-width:600px;
    border-radius:var(--border-radius);
	border:2px solid black;
	box-shadow:0px 0px 3px 2px rgba(33,33,33,0.2);
	padding:1rem;
	transition:border ease-in-out 0.5s;
}


nav a {
	border-radius: var(--border-radius);
	color:var(--color_03);
	padding:0 0.5rem;
    font-weight:bold;
	transform:scale(1);
	transition:all ease-in-out 0.7s all;
	font-family: "Barrio", serif;
	cursor:url("/bilder/icons/cursor_hand.svg") , pointer    ;
}

nav a:link {
	text-decoration: none;
}
nav a:hover {
	background:var(--hell);
	color: var(--dunkel100);
	/*text-decoration: underline;*/
	transition:0.3s ease-in-out color;
	filter:brightness(1.2);
	transform:scale(1.05);
}
/*border navigation*/
.boxnav{
 	margin:0 0 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:var(--fabel);
	  border:1px solid #222;
	  box-shadow:3px 3px 0 var(--fabel);
	}
/*---------------------------------------------------*/

img {
	max-width:100%;
	width:100%;
	/*border: 5px double var(--background_01);*/
}

hr {
	border-top:none;
	border-bottom:1px dotted var(--color_02);
	margin:1rem 0rem;
}

input, textarea, select {
	background:rgba(222,222,222,0.8);
    border-radius:var(--border-radius);
	padding:0.5rem;
	font-family: "Barriecito", sans-serif;
	font-size:1rem;
	color:black;
	width:80%;
}

/* nur Checkboxen weniger breit */
input[type=checkbox]{
    width:20%;
}

/* nur radio-buttons weniger breit */
input[type=radio]{
    width:3rem;
}

input[type=color]{
    height:3rem;
}

/* Listen stylen */

ul {
    padding-left:1.5rem;
}
ul li{
   	color:var(--color_01);
	list-style: none;
}
ul li:before{ /* For a round bullet */
  	content: '\2022';
   	color:var(--color_01);
    padding-right:.5rem;
}

/* ================= ELEMENTE STRUKTUR =============== */
/* ================= ELEMENTE STRUKTUR ===============main, nav */
header, footer {
	box-sizing:border-box;
	margin:0.2rem auto;	
	max-width:1400px;
    border-radius:var(--border-radius);
	/*border:2px solid black;*/
	box-shadow:0px 0px 3px 2px rgba(33,33,33,0.2);
	padding:1rem;
	transition:border ease-in-out 0.5s;
    font-family: "Barrio", system-ui;
    color:var(--color_01);
    align-items: center;
	/*background:var(--background_03);*/
}

header:hover, nav:hover, main:hover, footer:hover {
	border:1px solid rgba(255,255,255,0.3);
	box-shadow:0px 0px 3px 2px rgba(33,33,33,0.7);
	transition:all ease-in-out 0.3s;
}
header  {
    font-size:1.4rem;
	font-weight:bold;
	text-transform: uppercase;
}

footer a {
	color:var(--color_01);
	transition:all ease-in-out 0.5s;
}
footer a:hover {
	color:black;
	transition:all ease-in-out 0.3s;
}


main {
	min-height:70vh;
	/*background:var(--background_02);*/
}
main p{
        padding:0.5rem;
}


/* ================= EIGENE KLASSENDEFINITIONEN =============== */
/* ================= EIGENE KLASSENDEFINITIONEN =============== */


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

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

.flex {
    display:flex;
    justify-content: space-between;
}

.weine_links {
	width:65%;
}

.weine_rechts {
	width:35%;
}

.klein {
    font-size:0.6rem;
}
/* Fehlermeldung ausgeben */
.fehlermeldung {
	display:block;
	background:red;
	color:yellow;
	margin:1rem 0rem;
	padding:0.5rem;
}

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

/*------===============================================================================================================================
START=================================================================================================================================
------=============================================================================================================================.-*/
/*#start_titelbild {
    max-width:100%;
	width:100%;
	border: 5px double var(--background_01);
}*/

/*welt========================================================================================*/

#welt {
	width:100%;
	height:100%;
	max-width:1000px;
	max-height:600px;
	/*border:2px ridge var(--fabeltp);*/
	border-radius: 2rem; 
	position:relative;
	top:2vh;
	left:0rem;
	right:0rem;
	bottom:0rem;
	margin:0 auto;
   
}

/*border welt...............................*/
.boxwelt{
 	margin:5px 0 0 0;
	padding:0 0px 0px 0px;
  	width:104%;
  	height:88%;
 /* background:#fff;*/
  	border:10px solid var(--hell);
 /* float:left; */
}
.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);
	}


/* betrifft alle mini welten===============================================================================*/
.miniwelt {
	/*border:2px dotted green;
	border-radius:3rem; */
	flex-wrap:wrap;	
	/*max-width: 800px; max. breite definieren*/
	margin:0 auto;     /*0 auto; zentriert*/	
	overflow:hidden; /*damit man element ausserhalb rahmen nicht sieht*/			
	width: 90%;
	height:90%;
	display:flex;
	/*align-items: center;*/
}

.miniwelt_inhalt {
	/*border:1px dashed white;*/
	
	display:flex;
	margin:0rem;
	width:100%;
	height:100%;
	/*overflow:hidden;*/
	position: relative;			
	flex-grow:0.5; 
	/*border-radius: var(--abrunden);*/
}

.overflow_hidden {
	overflow:hidden;
}

/*miniwelt layout.............................*/
.miniwelt_titelbild {
		/*border:1px dashed orange;*/
		width:100%;
		height:100%;
		position:center; 
		/*damit elemente innendrin im hero absolute position..*/
		background-size:cover;
		transition:all ease-in-out 0.3s;
}

/*cover mit animation.. klick = wechselt auf hauptseite................*/
.show_element {
	display:block !important;
}
.schalter_gif_cover {
	width:auto;
	height:500px;
	position: absolute;
	right:10%;
	bottom:-2%;
	
}

.toggle_button {
	transform:scale(1);
	transition: ease-in-out .5s all;
	cursor:url("bilder/cursor_hand.svg") , pointer  ;
	
}
.toggle_button:hover {
	filter:brightness(1.2);
	transform:scale(1.03);
	transition: ease-in-out .4s all;
}

.toggle_button span {
	pointer-events: none; 
}

/* The Close Button Kreuz */
.closebutton{
	color:var(--hell);
	background:var(--fabel);
	font-size: 25px;
	position: absolute;
	right:1%;
	top:1%;
	border:0px;
	border-radius:.2rem;
	padding:.5rem;
    cursor:url("bilder/cursor_hand.svg") , pointer  ;
    z-index:900;
}

/*------===============================================================================================================================
HOME=================================================================================================================================
------=============================================================================================================================.-*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Fullscreen Titelbild */
.hero {
    height: 100vh;
    background-image: url("../bilder/moi_ballon.png");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
}

/* dunkles Overlay */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
   
    display: flex;
    flex-direction: column;
    justify-content:flex-start;
    align-items: center;
    color: white;
    text-align: center;
}

.hero-overlay h1 {
    font-size: 2rem;
    margin-bottom: 20px;
     margin: 20px;
}

.hero-button {
    padding: 12px 25px;
    background: white;
    color: black;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: 0.3s;
}

.hero-button:hover {
    background: #ddd;
}

/* Galerie-Bereich */
.gallery {
    padding: 10px;
}




#home_welt {
        position:absolute;
        top:0px;
        left:0px;
        background:var(--dunkel100); 
}

#miniwelt_name_cover_home{
		color:var(--hell);
		text-shadow:3px 3px 4px rgba(22,22,22,0.8);
		padding:0px 10px;
		position:absolute; 
		bottom:1%;
		left:55%;
		font-size: 3rem;
		border-radius:var(--abrunden);	
        opacity: 0.9;
		z-index:100;
}

/*cover mit animation.. klick = wechselt auf hauptseite*/
#miniwelt_home {
		display: none;
		backdrop-filter:blur(2px);
}

#home_cover {
		width:auto;
		height:600px; 
		margin:0 auto;
		position:absolute; /*absolut nimmt es aus dem fluss heraus*/
		bottom:0%;
		left:0%;	
        background:var(--dunkel100);
}
#home_titelbild {
		background-color:var(--dunkel100);
		position:absolute;
		bottom:0%;
		left:0%; 
		width:auto;
		height:600%;
        z-index:7;
} 

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

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



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



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

/* ================= ANIMATION =======================================================*/

.pump_white {
	animation:pumpen 5s ease-in-out infinite;
	display:inline-block;
	color:white;
}
@keyframes pumpen {
	0% 		{transform:scale(1);}
	80% 	{transform:scale(1);}
	85% 	{transform:scale(1.2);}
	90% 	{transform:scale(1.0);}
	95% 	{transform:scale(1.1);}
}