/* =========================
   Fonts
========================= */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display:swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display:swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display:swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display:swap;
}

/* =========================
   Basis / Variablen
========================= */
:root{
  --green:#00d04f;
  --dark:#222;
  --muted:#6b6b6b;
  --bg:#f4f4f4;
  --card:#ffffff;
  --footer:#6a6a6a;
  --radius:12px;
}

h1{
  color:var(--green);
  font-size:clamp(2.9rem, 5vw, 4.2rem);
  margin:0 0 18px 0;
  line-height:1.15;
  font-weight:700;
}

h2{
  color:#fff;
  font-size:clamp(1.4rem, 2.3vw, 2.1rem);
  margin:0;
  font-weight:500;
}

h3{
  text-align:center;
  color:var(--green);
  font-size:clamp(2.1rem, 2.9vw, 2.8rem);
  font-weight:700;
  margin-top: 0px;
}

h4{
  text-align:center;
  font-size:clamp(1.2rem, 1.7vw, 1.5rem);
  font-weight:700;
}

p{
  color:black;
  font-size:clamp(0.9rem, 1.2vw, 1.0rem);
  text-align: justify;
  font-weight:200;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: 'Poppins';
  color:var(--dark);
  background:#fff;
}



/* =========================
   Header (transparent Bar)
========================= */
.main-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:1000;
  background:rgba(0,0,0,.7);
  backdrop-filter:saturate(140%) blur(6px);
}
.main-header .container{ padding:30px }
.nav{
  display:flex; align-items:center; gap:180px; justify-content:center;
}
.nav a{
  color:#fff; font-weight:300; text-decoration:none; align-items: center;
}
.nav a:hover{ opacity:.85 }
/* Platz unter fixed Header schaffen (für Anchor-Jumps) */
body{ scroll-padding-top:64px }
/* Hamburger-Button jetzt links */
.nav-toggle {
  display: none;
  position: absolute;
  left: 24px;       /* statt right */
  top: 22px;
  width: 36px;
  height: 28px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  z-index: 1100;
}

.nav-toggle-bar{
  display: block;
  width: 100%;
  height: 3px;
  background: var(--green);
  border-radius: 2px;
  margin: 5px 0;
  transition: transform .25s ease, opacity .2s ease;
}

/* =========================
   Footer
========================= */
/* ---------- Footer: zentriert + Innenabstand + Gaps ---------- */
#footer{
  background: var(--footer);
  color:#eee;
  /* optisch absetzen, optional */
  border-top: 1px solid rgba(255,255,255,.15);
}

/* Die vorhandene .container im Footer als zentrierte Innenfläche nutzen */
#footer .container{
  max-width: 1100px;     /* Breite der Footer-Inhalte */
  margin: 0 auto;        /* mittig */
  padding: 44px 24px;    /* Abstand zur „Wand“ */
}

/* Zwei Spalten: Kontakt | Social+Recht */
.footer-grid{
  display: grid;
  grid-template-columns: 1fr auto;  /* linke Spalte wächst, rechte so breit wie Inhalt */
  align-items: center;
  justify-content: center;
  column-gap: 72px;                 /* Abstand zwischen den Spalten */
}

/* Linke Spalte */
.footer-col h4{
  margin: 0 0 .5rem 0;
  color:#fff;
  font-weight:600;
  text-align: left;
}
.footer-col p{ margin:0 ; font-size: clamp(1rem, 1.7vw, 1.3rem);}
.footer-col a{ color:#cfead9}
.footer-col a:hover{ text-decoration: underline }

/* Rechte Spalte: Social + Rechtliches nebeneinander mit Gap */
.footer-right{
  display: flex;
  align-items: center;
  gap: 28px;             /* Abstand zwischen Icons und den Links */
}

.social-icons{
  display: inline-flex;
  gap: 12px;
  margin: 0;             /* kein zusätzlicher Außenabstand */
}
.social-icons img{
  width: 28px; height: auto;
  filter: invert(1);
  opacity: .92;
}
/* Rechtslinks in einer Reihe */
.legal-links{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;         /* statt Block untereinander -> nebeneinander */
  gap: 16px;
}
.legal-links a{ color:#ddd; font-size: clamp(1.1rem, 1.7vw, 1.4rem); }

@media (max-width: 1000px){
  .nav-toggle{ display: block; }
  .main-header {
    background: transparent; /* Schwarze Leiste weg */
    backdrop-filter: none;    /* Blur weg */
  }
  /* Nav standardmäßig zu */
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;                   /* statt right */
    width: 75%;
    max-width: 280px;
    background: rgba(0,0,0,.92);
    backdrop-filter: saturate(140%) blur(6px);
    flex-direction: column;
    gap: 16px;
    padding: 18px 22px;
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 0;
  }

  .nav.is-open {
    display: flex;
  }

  .nav.is-open{                      /* geöffnet */
    display: flex;
  }

  .nav a{
    color: #fff;
    font-weight: 400;
    font-size: 1.05rem;
    padding: 12px 6px;
  }
  .nav-toggle{ display: block; }
  .main-header {
    background: transparent; /* Schwarze Leiste weg */
    backdrop-filter: none;    /* Blur weg */
  }

}
@media (max-width: 800px){
  .footer-grid{
    grid-template-columns: 1fr;
    row-gap: 20px;
    text-align: center;
    justify-items: center;   /* Inhalt in der Mitte halten */
  }
  .footer-right{
    flex-direction: column;  /* Icons über den Rechtslinks */
    gap: 12px;
  }
  .footer-col h4{ text-align: center }
}



/* ===== Animations-Basis ===== */
:root { --revealY: 18px; }

.reveal{
  opacity: 0;
  transform: translateY(var(--revealY));
  transition: opacity .6s ease, transform .6s ease;
  will-change: transform, opacity;
}
.reveal.is-visible{
  opacity: 1;
  transform: none;
}
.reveal[data-delay]{ transition-delay: var(--delay, 0s); }

/* Sanfter Ken-Burns auf dem Hero-Bild (optional) */
.kenburns{
  transform-origin: center center;
  animation: ken 24s ease-in-out both;
}
@keyframes ken{
  0%   { transform: scale(1.05) translateY(0); }
  50%  { transform: scale(1.12) translateY(-1%); }
  100% { transform: scale(1.08) translateY(0); }
}

/* Micro-Interaction Buttons */
.btn{
  transform: translateZ(0);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn:hover{ transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,.12); }

/* Bewegungen für Nutzer mit Reduced Motion aus */
@media (prefers-reduced-motion: reduce){
  .reveal{ transition: none; }
  .kenburns{ animation: none; }
  .btn{ transition: none; }
}