/* CSS Document */

        /* externe Schriftarten einbinden*/
    
        @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,700;1,300&display=swap');
        
        @import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@200;400;600&display=swap');
        
		 /* eigene Schriftart einfügen*/
        @font-face{
            font-family:'louis_font'; /*name definieren*/
            src:url("font/Gill Sans.otf"); /*relativer pfad*/
			}

  		@font-face{
            font-family:'gill_bold'; /*name definieren*/
            src:url("font/Gill Sans Bold.otf"); /*relativer pfad*/
			}

		@font-face{
            font-family:'gill_medium'; /*name definieren*/
            src:url("font/Gill Sans Medium.otf"); /*relativer pfad*/
			}

		@font-face{
            font-family:'gill_condensed'; /*name definieren*/
            src:url("font/GillSansNovaCnLight.ttf"); /*relativer pfad*/
			}

	   /*CSS reset*/
       
        *{
            box-sizing:border-box; /* damit padding und auch border nicht dazugerechnet werden*/
            margin:0;
            padding:0;
        }
        
        html{
            /* Basis Grundgrösse aller Schriften*/
            font-size:18px; /* 16px Standart*/
			color: black;
        }
        
		/* Scroll behavior*/
		
		html, body {
			scroll-behavior: smooth;
		}
		
        body {
            /* Breite 1920px ist das normale Ziel */ 
			Background-color: white;		
			color:#F8F8FF;
			font-family: 'louis_font', 'Montserrat', sans-serif;
			margin:0 auto; /* einmitten/zentrieren eines Elements*/
			max-width:1200px;
            /*padding: 2rem;*/ /* px=Pixel rem=Verhältnis zu Grundgrösse Schrift %=Prozent zu Seitenlayout pt=Punkt */
			
			/* nimm immer die volle Höhe ein */
			height:100vh; /* viewport height */
			text-shadow: 0px 0px 0px white;
			position: relative;
			box-sizing: border-box;
        }   

		/* BILD BODY*/
		body::before {
		  content: "";
		  position: absolute;
		  top: -150px;
		  width: 1200px;                       /* feste Breite */
		  height: 5900px;                       /* Höhe passend zum Bildverhältnis */
		  background-image: url('/bilder/Website_Full.png');
		  background-repeat: no-repeat;
		  background-position: top center;
		  background-size: 100% auto;          /* füllt Breite, Höhe passt sich automatisch an */
		  z-index: -2;
		  pointer-events: none;
		}

/* BILD BODY*/
		.background-image{
		  content: "";
		  position: absolute;
		  top: -150px;
		  width: 1200px;                       /* feste Breite */
		  height: 6400px;                       /* Höhe passend zum Bildverhältnis */
		  background-image: url('/bilder/Impressum.png');
		  background-repeat: no-repeat;
		  background-position: top center;
		  background-size: 100% auto;          /* füllt Breite, Höhe passt sich automatisch an */
		 
		}
		

	.overlay-text {
	  position: absolute;
	  top: 200px; /* Abstand vom oberen Rand */
	  left: 50%;
	  transform: translateX(-50%);
	  font-size: 32px;
	  font-weight: bold;
	  color: #BB4042; /* oder schwarz, je nach Hintergrund */
	  background: rgba(0, 0, 0, 0.6); /* halbtransparenter Hintergrund */
	  padding: 10px 20px;
	  border-radius: 8px;
	  z-index: 1000; /* liegt über allen anderen Elementen */
	  pointer-events: none; /* verhindert Klick-Blockade */
	}

		/* links definieren */
		a:link{
			color:black;
			text-decoration:none;
		}
		
		a:visited{
			color:black;
		}
		
		a:hover{
			color:#528350;
			
		}
		
		a:active{
			color:black;
		}
						
		/* Allgemeine Elemente */
				
		h1{
			/*border-bottom:1px solid ivory;*/
			color:black;
			/*margin-bottom:18rem;
			margin-top:6rem;*/
			font-family: 'gill_bold';
			font-size:29px;
			font-weight: 200;
			margin-bottom: 16px; !important;
			text-align: left;
					
			
			a:link,
			a:visited {
				color: inherit;	
			}
			
		}
		
		h2{
			/*border-bottom:1px solid ivory;*/
			color:black;
			/*margin-bottom:18rem;
			margin-top:6rem;*/
			font-family: 'gill_bold';
			font-size:29px;
			font-weight: 200;
			margin-bottom: 16px; !important;
			text-align: left;
		}


		h3{
			/*border-bottom:1px solid ivory;*/
			color:black;
			/*margin-bottom:18rem;
			margin-top:6rem;*/
			font-family: 'gill_medium';
			font-size:20px;
			font-weight: 100;
			margin:16px 8px;
			margin-top:48px;
			text-align: center;
		}
		
		
				
		article{
			color:black;
			width: 1200px;
			/*border:2px solid red;*/
		}

		article p{
			font-family:'louis_font';
		}

		.text_id{
			font-family: 'gill_medium';
			font-size:20px;
		}

		.text_small{
			font-family: 'gill_condensed';
			font-size:16px;
			line-height: 16px;
		}

		.text_small_ueber{
			font-family: 'gill_condensed';
			font-size:18px;
			line-height: 19px;
		}

		.text_ueber{
			font-family: 'gill_condensed';
			font-size:20px;
			line-height: 20px;
		}

		.text_tarife{
			font-family: 'gill_condensed';
			font-size:17px;
			line-height: 16px;
			letter-spacing: 0.03rem;
		}

		.text_kontakt{
			font-family: 'gill_condensed';
			font-size:20px;
			line-height: 20px;
		}

		.text_padding{
			margin-bottom: 6px; !important
		}

		.padding_article_left{
			padding:200px 210px 40px 300px;
		}

		.padding_article_right{
			padding:80px 440px 65px 110px;
		}

		.padding_article_partner{
			padding:0px 440px 65px 110px;
		}

		.position_relative{
			position: relative
		}

		.position_absolute{
			position: absolute
		}

		.position_hover_flex{
			position: absolute;
			display: inline-flex;
			cursor: pointer;
		}

		.tooltip {
		  position: absolute;
		  top: -30px;
		  right: -150px;
		  background: rgba(255,255,255,1);
		  padding: 10px;
		  border-radius: 5px;
		  white-space: nowrap; /* verhindert Zeilenumbruch */
		  opacity: 0;
		  visibility: hidden;
		  transition: opacity 0.3s ease;
		  pointer-events: none; /* verhindert, dass Tooltip selbst hoverbar ist */
		  z-index: 10;
			font-family: 'gill_medium';
		}

		.tooltip_werde {
		  position: absolute;
		  top: -150px;
		  right: 120px;
		  background: rgba(255,255,255,1);
		  padding: 10px;
		  border-radius: 5px;
		  white-space: nowrap; /* verhindert Zeilenumbruch */
		  opacity: 0;
		  visibility: hidden;
		  transition: opacity 0.3s ease;
		  pointer-events: none; /* verhindert, dass Tooltip selbst hoverbar ist */
		  z-index: 10;
			font-family: 'gill_medium';
		}

		.position_hover_flex:hover .tooltip {
		  opacity: 1;
		  visibility: visible;
		  pointer-events: auto; /* Tooltip wird aktiv */
		}

		.position_hover_flex:hover .tooltip_werde {
		  opacity: 1;
		  visibility: visible;
		  pointer-events: auto; /* Tooltip wird aktiv */
		}

		.position_flex{
		  	top: 106px;    
		  	left: 360px;  
			padding: 10px;
		}

		.position_athm{
					top: 185px;    
					left: 440px;  
					padding: 10px;
				}

		.position_allt{
					top: 106px;    
					left: 500px;  
					padding: 10px;
				}

		.position_symb{
					top: 320px;    
					left: 920px;  
					padding: 10px;
				}

		.position_zuga{
					top: 455px;    
					left: 690px;  
					padding: 10px;
				}

		.position_ausb{
							top: 90px;    
							left: 1057px;  
							padding: 10px;
						}

		.position_werde{
							top: 148px;    
							left: 1057px;  
							padding: 10px;
						}


		.position_absolute_text{
			position: absolute;
		  	top: 4px;    
			left: 430px;  
			padding: 50px;
		}

/* ANGBEOT*/

		.position_absolute_text_angebot{
			position: absolute;
		  	top: 4px;    
			left: 615px;  
			padding: 50px;
		}
		
		.position_angebot_1{
			width: 160px;
			top: 167px;    
			left: 260px;
		}

		.position_angebot_2{
			width: 160px;
			top: 197px;    
			left: 570px;
		}

		.position_angebot_3{
			width: 160px;
			top: 167px;    
			left: 880px;
		}

		.position_angebot_4{
			width: 160px;
			top: 111px;    
			left: 60px;
		}

		.position_angebot_5{
			width: 160px;
			top: 263px;    
			left: 300px;
		}

		.position_angebot_6{
			width: 160px;
			top: 120px;    
			left: 560px;
		}

		.position_angebot_7{
			width: 160px;
			top: 283px;    
			left: 810px;
		}


/* ÜBER*/

		.margin_top_ueber{
			margin-top: 200px;
		}

		.position_absolute_text_ueber{
			position: absolute;
		  	top: -145px;    
			left: 560px;  
			padding: 50px;
		}

		.text_breite_ueber1{
			position: absolute;
		  	top: 155px;    
			left: 305px;
			width: 315px;
			text-align: left;
			letter-spacing: 0.01rem;
		}

		.text_breite_ueber2{
					position: absolute;
					top: 310px;    
					left: 480px;
					width: 370px;
					text-align: left;
			letter-spacing: 0.01rem;
				}

		.text_breite_ueber3{
					position: absolute;
					top: 40px;    
					left: 830px;
					width: 180px;
					text-align: left;
			letter-spacing: 0.01rem;
					
				}

		.text_breite_tarife{
							position: absolute;
							top: -33px;    
							left: 685px;
							width: 170px;
							text-align: center;
			z-index: 8;

						}


		.bg_tarife {
							position: absolute;  				
							top: -25px;    
							left: 605px;
			z-index: 5
		}

		.bg_tarife img{
			  	width:330px;   /* fixe Breite */
 			  	height: 470px;
				
		}


		.text_breite_kontakt{
							position: absolute;
							top: -30px;    
							left: 425px;
							width: 170px;
							text-align: center;

						}

		.text_breite_kontaktform{
							position: absolute;
							top: -50px;    
							left: 745px;
							width: 300px;
							text-align: center;

						}


		.text_breite{
			position: absolute;
		  	top: 130px;    
			left: 20px;
			width: 130px;
			text-align: center;
		}

		.datenschutz p{
			margin: 0 100px;
			text-align: center;
			z-index: 5;

						}

		.bus_margin{
					margin-bottom: 350px;
		}

		.angebot_margin{
					margin-bottom: 350px;
		}

		.angebot_margin2{
							margin-bottom: 550px;
				}

		.text_umbruch{
			word-break: break-all;
		}

		.text_umbruch_h{
			hyphens: auto;
		}

		/* Alle links  beim artikel designen*/


		#formular{
			display:flex;
			flex-flow:column;
			width:100%;
			margin-top:-30px;
		}

		#formular div{
			text-align:left;
		}


		.overflow{
			overflow: visible;
		}
/*
		button{
			border-radius: 0.8rem;
			background-color: #8F2E2E ;
			border:1px solid #8F2E2E;
			box-shadow: 0px 0px 4px 0px black;
			color: white;
			font-family:'louis_font';
			font-size: 1rem;
			margin-top:1.5rem;
			padding: 0.5rem 2rem;
		}

		a button:link{
			color:white;
			text-decoration:none;
		}
		
		a button:visited{
			color:white;
		}
		
		a button:hover{
			cursor:pointer;
			color:#F4CC4A;
		}
		
		a button:active{
			color:black;
		}
*/
		/* navigation */
				
		nav{
			position: relative;
			z-index: 28;
			
				}
	/* BILD NAVIGATOR*/
		#navigation::before {
			  content: "";
  			  position: absolute;
			  top: -12px; /* Abstand von oben */
			  left: 0;
			  width: 876px;
			  height: 95px;
			  background-image: url('/overlay/01_nav_car.png'); /* Pfad zu deinem Bild */
			  background-size: contain;
			  background-repeat: no-repeat;
			  background-position: calc(50% + 10px) center;
			  color: white; /* Text lesbar machen */
			  z-index: 0;
			}

		nav ul{
			position: relative;
			display:flex;
			justify-content: space-between;
			list-style-type:none;
			margin: 150px 420px 40px 75px;
			width: 690px;
			z-index: 1;
		}

		nav li{
			padding: 10px;	
			font-size: 20px;
		}

		.nav_rein{
			transform: translateY(0%);
		}
		
	

		#hamburger{
			position:fixed;
			top:1rem;
			right:1.8rem;
			width:3rem;
			height:3rem;
			z-index: 999;}		

		
		#scrolldown{
			/*border:1px solid green;*/
			position:absolute;
			display:flex;
			align-items: center;
			justify-content: center;
			bottom: 0rem;
			left: 45%;
			
			animation:scrolljump 4s ease-in-out;
			animation-iteration-count: infinite;
			animation-delay: 1.5s;
		}

		#scrolldown img{
			height:3rem;
		}

		@keyframes scrolljump{
			0%{bottom:0rem;}
			15%{bottom:1rem;}
			30%{bottom:0rem;}
			45%{bottom:1rem;}
			60%{bottom:0rem;}
			100%{bottom:0rem;}
		}


		#logo{
			transform:scale(0.75) rotate(0deg);
			transition:all ease-in-out 0.3s;
			/*3er pack*/
			position:absolute;	/* wenn darüber ein relative ist*/
			top:-1rem;
			left: -1rem;
		}
		
		#logo:hover{
			transform:scale(0.75) rotate(20deg);
			transition:all ease-in-out 0.3s;
		}

		/* DIV Pfeil*/
		
		#socialmedia{
			border:none;
			padding:0.5rem 1rem;
			transform:scale(1.8);
			position:fixed;
			bottom:0.2rem;
			left:0.2rem;
			z-index: 89;
			
			a:link,
			a:visited {
				color:rgb(248,248,255);
				opacity: 0.6;
			}
			a:hover{
				opacity: 1;
				color:rgb(140,192,214);
			}
		}


		#top{
			background:rgba(255,255,255,0.5);;
			
			color: black;
			cursor: pointer;
			border-radius: 0.5rem;
			font-size:1.2rem;
			position:fixed;
			right:0.5rem;
			bottom:0.5rem;		
			z-index:999;
			padding:0.3rem;
			padding-bottom: 0.4rem;
		}



/* FOOTER */ 

		footer{
			padding:2.4rem 2rem 2rem 4rem;
			font-size:0.8rem;
			color:#528350
			}

		footer a:link{
			color:#528350;
			font-weight:normal;
			text-decoration:none;
		}
		
		footer a:visited{
			color:#528350;
		}
		
		footer a:hover{
			color:#978A6B;
			text-decoration:underline;
		}
		
		footer a:active{
			color:#528350;
		}


		 
        #logo{
			transform:scale(0.65) rotate(0deg);
			transition:all ease-in-out 0.3s;
			/*3er pack*/
			position:absolute;	/* wenn darüber ein relative ist*/
			top:-1rem;
			left: -1rem;
		}
		
		#logo:hover{
			transform:scale(0.75) rotate(20deg);
			transition:all ease-in-out 0.3s;
		}	


        .textbox{
            background:#BBB9B7;
            border:none;
            border-bottom: solid thin;
            border-color: ghostwhite;
            color:black;
            margin-bottom: 8px;
            margin-top: 6px;
            font-family: 'gill_condensed';
			font-size:16px;
			line-height: 16px;
            width:100%;
			text-align: left;
            

        }

        textarea{
            font-family: 'louis_font';
        }

        .button_kontakt{
            background:#8AAF77;
            border: 1px solid ghostwhite;
            box-shadow: 0px 0px 5px 0px ghostwhite;
            color:blacck;
            padding: 10px;
			margin-top: 16px;
			margin-bottom: 16px;
            width: 100%;
        }

		.button_kontakt:hover{
            cursor:pointer;
        }


		.underline{
			text-decoration: underline !important;
		}


			/* COOOKIES */

		 #cookiePopup {
			background: white;
			border-radius: 5px;
			border: 1px solid #4e4e4e;
			bottom: 1rem;
			box-shadow: 0px 0px 5px #9F9F9F;
			right: 6%;
			position: fixed;
			padding: 1rem;
			width: 38%;
			z-index: 1000000;
			font-size: 14px;
		  }
		  #cookiePopup h4{
			color: #4e4e4e;
			font-size: 18px;
			margin-bottom:0.5rem;
		  }
		  #cookiePopup p{
			color: #4e4e4e;
			font-size: 0.75rem;
			line-height:1.5;
			text-align: left;
		  }
		  #cookiePopup button{
			background: rgba(140,192,214,1);
			border: ghostwhite;
			color: ghostwhite;
			cursor:pointer;
			font-size: 0.75rem;
			margin-top:0.75rem;
			padding: 0.75rem;
			width: 100%;
		  }
	

/* GRID GRID GRIS */

   .grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-template-rows: repeat(2, auto);
      gap: 50px;
      padding: 10px;
    }

    .grid-item {
      text-align: center;
    }

    .grid-item img {
    height: 70px;       /* Höhe definiert */
      width: auto;         /* Breite automatisch */
	max-width: 170px;
      display: block;
      margin: 0 auto 10px;
      object-fit: contain; /* optional: für bessere Darstellung */
    }

   .grid-item a {
      display: inline-block;
      text-decoration: none;
    }


	/*@media screen and (max-width:1200px){
		
		body{
			width:100vw;
		}
		
		nav{
			width:100vw;
		}
		
		h1{
			font-size:5rem;
		}
		
		h2{
			font-size:5rem;
		}
		
			.imgdivtopschlirgen{
			width: 350px;
			right: -8rem;
			top:-8rem;
					}
		.overflow{
			overflow: hidden;
		}
		
		.imgdivgreat{
					height: 500px;
				}
	}*/
 

		/* SWITCH FENSTER */


.switch-container {
      
      user-select: none;
    }

    .content {
      display: none;
      cursor: pointer; /* zeigt an, dass man klicken kann */
    }

    .content.active {
      display: block;
    }


	@media screen and (max-width:1100px){
			
			.position_flex{
		  	top: 115px;    
		  	left: 360px;  
			padding: 10px;
		}

		.position_athm{
					top: 170px;    
					left: 440px;  
					padding: 10px;
				}

		.position_allt{
					top: 115px;    
					left: 500px;  
					padding: 10px;
				}

		.position_symb{
					top: 320px;    
					left: 920px;  
					padding: 10px;
				}

		.position_zuga{
					top: 470px;    
					left: 690px;  
					padding: 10px;
				}

		.position_ausb{
							top: 105px;    
							left: 1057px;  
							padding: 10px;
						}

		.position_werde{
							top: 163px;    
							left: 1057px;  
							padding: 10px;
						}

		
		.position_absolute_text_angebot{
			position: absolute;
		  	top: 20px;    
			left: 615px;  
			padding: 50px;
		}
		
		.position_angebot_1{
			width: 160px;
			top: 180px;    
			left: 260px;
		}

		.position_angebot_2{
			width: 160px;
			top: 210px;    
			left: 570px;
		}

		.position_angebot_3{
			width: 160px;
			top: 180px;    
			left: 880px;
		}

		.position_angebot_4{
			width: 160px;
			top: 120px;    
			left: 60px;
		}

		.position_angebot_5{
			width: 160px;
			top: 270px;    
			left: 300px;
		}

		.position_angebot_6{
			width: 160px;
			top: 130px;    
			left: 560px;
		}

		.position_angebot_7{
			width: 160px;
			top: 290px;    
			left: 800px;
		}


/* ÜBER*/

		.margin_top_ueber{
			margin-top: 200px;
		}

		.position_absolute_text_ueber{
			position: absolute;
		  	top: -125px;    
			left: 560px;  
			padding: 50px;
		}
		
			.text_breite_ueber1{
			position: absolute;
		  	top: 160px;    
			left: 305px;
			width: 315px;
			text-align: left;
		}

		.text_breite_ueber2{
					position: absolute;
					top: 320px;    
					left: 480px;
					width: 370px;
					text-align: left;
				}

		.text_breite_ueber3{
					position: absolute;
					top: 55px;    
					left: 830px;
					width: 180px;
					text-align: left;
					
				}

		.text_breite_tarife{
							position: absolute;
							top: -20px;    
							left: 685px;
							width: 170px;
							text-align: center;

						}
		
				.text_breite_kontakt{
							position: absolute;
							top: -10px;    
							left: 425px;
							width: 170px;
							text-align: center;

						}

		.text_breite_kontaktform{
							position: absolute;
							top: -30px;    
							left: 745px;
							width: 300px;
							text-align: center;

						}
		
}