:root{
  --gray:#111;
  --max:1200px;
  --black:#000000;
  --darkgray:#111111;
  --lightgray:#e6e6e6;
  --green:#2f8f5b;
  --text:#eaeaea;
  --muted:#b5b5b5;
}

*{box-sizing:border-box}

body{
  margin:0;

  font-family:Inter,system-ui,sans-serif;
  color:var(--text);
  background:var(--black);
  line-height:1.65;
}

.header{
  text-align:center;
  padding:48px 20px;
}

.header img{max-width:320px}
.section-darkgray{
  background:#111111;
}
.section{padding:80px 20px}
.section-dark{background:var(--black)}
.section-gray{background:var(--gray)}
.section-black{ background:var(--black); }
.section-darkgray{ background:var(--darkgray); }
.section-lightgray{
  background:var(--lightgray);
  color:#111;
}

.section-lightgray h2,
.section-lightgray h3{
  color:var(--green);
}

.section-lightgray p{
  color:#333;
}


.hero{text-align:center}
.hero h1{color:var(--green);font-size:clamp(2rem,4vw,3rem)}

.grid{
  max-width:var(--max);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:center;
}
.grid.reverse{direction:rtl}
.grid.reverse>*{direction:ltr}

.text h2,.text h3{color:var(--green)}
.text p{color:var(--muted)}

ul{list-style:none;padding:0}
li{color:var(--green)}

.media img{width:100%;border-radius:4px}

.youtube-grid{
  max-width:var(--max);
  margin:40px auto 0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.youtube-grid iframe{
  width:100%;
  aspect-ratio:16/9;
  border:none;
}
.contact-footer{
  padding:80px 20px 40px;
}

.contact{
  text-align:center;
  margin-bottom:60px;
}

.footer{
  text-align:center;
  font-size:0.85rem;
  color:#888;
  padding:0; /* kein extra Abstand nach unten */
}


@media(max-width:900px){
  .grid{grid-template-columns:1fr}
  .grid.reverse{direction:ltr}
  .youtube-grid{grid-template-columns:1fr}
}
.section::before{
  content:"";
  display:block;
  width:50%;
  height:1px;
  background:rgba(47,143,91,0.5); /* Grün mit 50% */
  margin:0 auto 60px auto;
}

.hero h1{
  color:var(--green);
  font-size:clamp(2rem,4vw,3rem);
  opacity:0;
  transform:translateY(20px);
  animation:heroFadeUp 1.2s ease-out forwards;
}

@keyframes heroFadeUp{
  to{
    opacity:1;
    transform:translateY(0);
  }
}
/*
Formular*/

.contact-form{
  max-width:600px;
  margin:0 auto;
  display:grid;
  gap:16px;
}

.form-row{
  display:flex;
  flex-direction:column;
}



/*.contact-form{
  max-width:600px;
  margin:40px auto 0;
}*/

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.contact-form input,
.contact-form textarea{
  width:100%;
  padding:14px;
  border:1px solid #ccc;
  border-radius:4px;
  font-family:inherit;
}

.contact-form button{
  margin-top:20px;
  padding:14px 32px;
  background:var(--green);
  color:#fff;
  border:none;
  border-radius:4px;
  cursor:pointer;
  font-weight:600;
}

.contact-form button:hover{
  opacity:0.9;
}

.form-hint{
  font-size:0.8rem;
  color:#555;
  margin-top:12px;
}

@media(max-width:600px){
  .form-grid{grid-template-columns:1fr}
}

.contact-form{
  max-width:600px;
  margin:40px auto 0;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.contact-form label{
  display:flex;
  flex-direction:column;
  font-size:0.9rem;
  color:#222;
}

.contact-form input,
.contact-form textarea{
  padding:10px;
  font-family:inherit;
  border:1px solid #ccc;
  border-radius:4px;
}

.contact-form button{
  background:var(--green);
  color:#fff;
  border:none;
  padding:12px;
  cursor:pointer;
  font-weight:600;
}

.contact-form button:hover{
  opacity:0.9;
}

.checkbox{
  flex-direction:row;
  align-items:center;
  gap:8px;
}



/*PopUp*/
.consent-banner{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.85);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

.consent-box{
  background:#f2f2f2;
  color:#111;
  max-width:520px;
  padding:32px;
  border-radius:6px;
  text-align:center;
}

.consent-box a{
  color:#2f8f5b;
  text-decoration:none;
  font-weight:600;
}

.consent-box button{
  margin-top:20px;
  padding:12px 28px;
  border:none;
  background:#2f8f5b;
  color:#fff;
  font-weight:600;
  border-radius:4px;
  cursor:pointer;
}

/* Cookie Popup */
.cookie-consent{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.65);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

.cookie-consent.active{
  display:flex;
}

.cookie-box{
  background:#111;
  color:#eee;
  padding:30px;
  max-width:420px;
  text-align:center;
  border:1px solid #2f8f5b;
}

.cookie-box a{
  color:#2f8f5b;
  text-decoration:none;
}

.cookie-actions{
  margin-top:20px;
}

.cookie-actions button{
  background:#2f8f5b;
  border:none;
  color:#000;
  padding:10px 20px;
  cursor:pointer;
}

.contact-form{
  max-width:520px;
  margin:40px auto 0;
}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.contact-form input,
.contact-form textarea{
  width:100%;
  padding:12px;
  border:1px solid #999;
  margin-bottom:16px;
  font-family:inherit;
}

.contact-form button{
  background:#2f8f5b;
  border:none;
  padding:12px;
  cursor:pointer;
}

/* Legal Pages */
.legal-page{
  background:#000;
  color:#eaeaea;
}

.legal-content{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:40px;
  max-width:800px;
  margin:0 auto;
}

.legal-content h1{
  color:#2f8f5b;
  margin-bottom:30px;
}

.back-btn{
  margin-top:40px;
  color:#2f8f5b;
  text-decoration:none;
  border:1px solid #2f8f5b;
  padding:10px 20px;
}
/*Tastatur-Navigation WCAG-konform*/
a:focus,
button:focus{
  outline:2px solid #2f8f5b;
  outline-offset:3px;
}