:root{
	--primary:#2563eb;
	--secondary:#1e293b;
	--accent:#06b6d4;
	--light:#f8fafc;
	--dark:#0f172a;
}
 *{
	margin:0;
	padding:0;
	box-sizing:border-box;
	font-family:'Inter',sans-serif;
	scroll-behavior:smooth;
}
 body{
	line-height:1.6;
	color:#333;
}
 .container{
	width:100%;
	max-width:1200px;
	margin:auto;
	padding: 0 0px;
}
.neu {
	width:100%;
	max-width:1200px;
	margin:auto;
	padding: 0 0px;
}
 header{
	background:white;
	color:white;
	position:sticky;
	top:0;
	z-index:1000;
}

 nav{
	display:flex;
	justify-content:space-between;
	align-items:center;
}
 
 nav ul{
	display:flex;
	list-style:none;
	gap:25px;
}
 nav a{
	color:#66cfae;
	text-decoration:none;
	transition:0.3s;
}
 nav a:hover{
	color:#38bdf8;
}
 .cta-nav{
	background:var(--primary);
	color:white;
	padding:12px 20px;
	border-radius:8px;
}
 .hero{
	background:linear-gradient(rgba(15,23,42, .8),rgba(15,23,42, .8)),url("bg2.png");
	background-size:cover;
	background-position:center;
	color:white;
	min-height:80vh;
	display:flex;
	align-items:center;
	text-align:center;
}
 .hero-grid{
	display:grid;
	grid-template-columns:1.2fr 1fr;
	gap:60px;
	align-items:center;
}
 .badge{
	display:inline-block;
	background:rgba(102, 207, 175,.40);
	padding:10px 18px;
	border-radius:30px;
	margin-bottom:25px;
	font-size:.9rem;
	max-width:100%;
	white-space: normal;
	word-break:break-word;
	text-align:center;
}
 .hero h1{
	font-size:4rem;
	line-height:1.1;
	margin-bottom:25px;
	font-weight:800;
	hyphens:auto;
}
 .hero p{
	font-size:1.2rem;
	margin-bottom:35px;
	opacity:.9;
}
 .buttons{
	display:flex;
	gap:15px;
	flex-wrap:wrap;
}
 .btn{
	padding:16px 30px;
	border-radius:10px;
	text-decoration:none;
	font-weight:600;
	transition:.3s;
}
 .btn-primary{
	background:white;
	color:rgba(102, 207, 175);
	width:50%;	
}
 .btn-secondary{
	border:1px solid white;
	color:rgba(102, 207, 175);
	width:45%;
}
 .btn-third{
	border:1px solid white;
	color:rgba(102, 207, 175);
	width:45%;
	background:black;
 }
 .btn:hover{
	transform:translateY(-3px);
}
 .hero-card{
	background:rgba(102, 207, 175,.40);
	padding:40px;
	border-radius:25px;
	backdrop-filter:blur(15px);
}
 .hero-card h3, h2{
	margin-bottom:20px;
}
 .hero-card ul{
	list-style:none;
}
 .hero-card li{
	padding:12px 0;
	border-bottom:1px solid rgba(255,255,255,.15);
}
 section{
	padding:100px 0;
}
 .section-title{
	text-align:center;
	margin-bottom:60px;
}
 .section-title h2{
	font-size:2.8rem;
	margin-bottom:15px;
}
 .section-title p{
	color:#64748b;
}
 .cards{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
	gap:25px;
}
 .card{
	background:white;
	padding:35px;
	border-radius:18px;
	box-shadow:0 10px 30px rgba(0,0,0,.08);
	transition:.3s;
}
 .card:hover{
	transform:translateY(-8px);
}
 .icon{
	font-size:2rem;
	margin-bottom:20px;
}
 .card h3{
	margin-bottom:15px;
}
 .problems{
	background:#f8fafc;
}
 .problem-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
	gap:20px;
}
 .problem{
	background:white;
	padding:25px;
	border-radius:12px;
	border-left:5px solid rgba(102, 207, 175);
}
 .stats{
	background:rgba(102, 207, 175);
	color:white;
}
 .stats-grid{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:20px;
	text-align:center;
}
 .stat h3{
	font-size:3rem;
}
 .contact{
	background:rgba(102, 207, 175);
	color:white;
}
 .contact-box{
	max-width:800px;
	margin:auto;
	text-align:center;
}
 .contact-box h2{
	font-size:3rem;
	margin-bottom:20px;
}
 .contact-buttons{
	margin-top:35px;
	display:flex;
	justify-content:center;
	gap:20px;
	flex-wrap:wrap;
}
 .contact2{
	background:#0f172a;
	color:white;
}
 .contact2 form{
	max-width:700px;
	margin:auto;
}
 .contact2 input:nth-of-type(-n+4), .contact2 textarea{
	width:100%;
	padding:15px;
	margin-bottom:15px;
	border:none;
	border-radius:5px;
}

 input[name="dsgvo"] {
    display: inline !important;
}

 .contact2 button{
	width:100%;
	padding:15px;
	border:none;
	background:rgba(102, 207, 175);
	color:white;
	font-size:1rem;
	cursor:pointer;
	border-radius:5px;
}
 .contact2 button:hover{
	background:#0284c7;
}
 footer{
	background:#020617;
	color:rgba(102, 207, 175);
	text-align:center;
	padding:30px;
}

body > footer > a:nth-child(1){
	color:rgba(102, 207, 175);
}
body > footer > a:nth-child(2){
	color:rgba(102, 207, 175);
}
 #cookie-banner{
	position:fixed;
	bottom:0;
	width:100%;
	background:#020617;
	color:white;
	padding:15px;
	text-align:center;
	z-index:9999;
}
 #cookie-banner button{
	margin-left:10px;
	padding:10px;
	border:none;
	border-radius:6px;
	background:#2563eb;
	color:white;
}

/* Container korrekt ausrichten */
.et-hero-tabs-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

/* Wrapper für deine Links */
.nav-wrapper {
  display: flex;
  gap: 20px;
}

/* Burger */
.burger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 5px;
}

.burger span {
  width: 25px;
  height: 3px;
  background: black;
}

/* 📱 Mobile Ansicht */
@media (max-width: 768px) {

  .burger {
    display: flex;
  }

  .nav-wrapper {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    width: 100%;
    flex-direction: column;
    display: none;
    padding: 20px;
  }

  .nav-wrapper.active {
    display: flex;
  }

  .et-hero-tab-slider {
    display: none;
  }
  
  .hero-grid{
    grid-template-columns: 1fr;
    gap: 10px; /* kleiner! */
  }
}


 @media(max-width:900px){
	.hero-grid{
		grid-template-columns:1fr;
	}
	 .hero h1{
		font-size:2.8rem;
		hyphens:auto;
	}
	 .stats-grid{
		grid-template-columns:repeat(2,1fr);
	}
}
 @media(max-width:600px){
	nav ul{
		display:none;
	}
	 .stats-grid{
		grid-template-columns:1fr;
	}
}
 body {
	 font-family: "Century Gothic", 'Lato', sans-serif;
}
 a {
	 text-decoration: none;
}
 .et-hero-tabs, .et-slide {
	 display: flex;
	 flex-direction: column;
	 justify-content: center;
	 align-items: center;
	 height: 100px;
	 position: relative;
	 background: #eee;
	 text-align: center;
	 padding: 0 2em;
	 h1 {
		 font-size: 2rem;
		 margin: 0;
		 letter-spacing: 1rem;
		 hyphens:auto;
	}
	 h3 {
		 font-size: 1rem;
		 letter-spacing: 0.3rem;
		 opacity: 0.6;
	}
}
 .et-hero-tabs-container {
	 display: flex;
	 flex-direction: row;
	 position: absolute;
	 bottom: 0;
	 width: 100%;
	 height: 100px;
	 box-shadow-top: 0 0 20px rgba(102, 207, 175);
	 background: #fff;
	 z-index: 10;
	 &--top {
		 position: fixed;
		 top: 0;
	}
}
 .et-hero-tab {
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 flex: 1;
	 color: #000;
	 height:100px;
	 letter-spacing: 0.1rem;
	 transition: all 0.5s ease;
	 font-size: 0.8rem;
	 
	 &:hover {
		 color:white;
		 background: rgba(102, 207, 175);
		 transition: all 0.5s ease;
	}
	 img {
		 width: 200px;
		/* Setzt die exakte Breite des Bildes */
		 height: auto;
		/* Behält das richtige Seitenverhältnis bei, damit es nicht verzerrt */
	}
 }
 .et-hero-tab2 {
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 flex: 1;
	 background-color: rgba(102, 207, 175);
	 color: #000;
	 letter-spacing: 0.1rem;
	 transition: all 0.5s ease;
	 height:100px;
	 
	 font-size: 0.8rem;
	 &:hover {
		 color:white;
		 background: rgba(102, 207, 175);
		 transition: all 0.5s ease;
	}
	
}
 .et-hero-tab-slider {
	 position: absolute;
	 bottom: 0;
	 width: 0;
	 height: 6px;
	 background: #66B1F1;
	 transition: left 0.3s ease;
} 

 @media (min-width: 800px) {
	 .et-hero-tabs, .et-slide {
		 h1 {
			 font-size: 3rem;
		}
		h2 {
			 font-size: 1rem;
		}
		 h3 {
			 font-size: 1rem;
		}
	}
	 .et-hero-tab {
		 font-size: 1rem;
	}
	 .et-hero-tab2 {
		 font-size: 1rem;
	} 
}