/* ===============================
   Basisfarben & Grundlayout
================================ */
:root{
  --fwv-accent:#FBBA00;                 /* neue Hauptfarbe */
  --accent-2:#FDD74B;                   /* hellere Variante für Highlights */
  --surface:#fff;
  --bg:#fffdf7;                         /* leicht warmes Weiß */
  --text:#1f1f1f;
  --muted:#5c5c5c;
  --ring:rgba(251,186,0,0.35);          /* Fokusfarbe leicht transparent */
}


html{
  scroll-behavior:smooth;
  font-size:14px;
}
body{
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--text);
  background:var(--bg);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  line-height:1.6;
  margin:0;
  padding:0;
}
main{flex:1}

/* ===============================
   Container & Typografie
================================ */
.container{max-width:1100px;margin:0 auto;padding:0 1rem}
.prose{
  max-width:1100px;
  padding:2rem 1rem;
  margin:0 auto;
  font-size:1rem;
  line-height:1.6;
  color:var(--text);
}
.prose h1,
.prose h2,
.prose h3{
  font-weight:700;
  color:#1f2937;
}
.prose h1{
  font-size:clamp(2rem,3vw,2.25rem);
  line-height:1.2;
  margin-bottom:.75rem;
}
.prose h2{
  font-size:clamp(1.5rem,2.4vw,1.75rem);
  margin-bottom:.5rem;
}
.prose h3{
  font-size:clamp(1.25rem,2vw,1.5rem);
  margin-bottom:.35rem;
}
.prose p{margin-top:.25rem;margin-bottom:1rem;color:#374151}

/* ===============================
   Header / Navigation
================================ */
.site-header{
  position:sticky;top:0;z-index:50;
  background:#eef2f7bd;
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.brand{font-weight:800;color:#1f2a44;text-decoration:none;font-size:1.05rem}
.menu{display:flex;gap:1.25rem;list-style:none;margin:0;padding:0}
.menu a{color:#1f2a44;text-decoration:none;padding:.4rem .5rem;border-radius:.5rem;font-size:1rem}
.menu a[aria-current="page"]{background:#e8eefc;color:#10224f}
.hamburger{display:none;background:transparent;border:0;padding:.6rem;border-radius:.6rem}
.hamburger span{display:block;width:22px;height:2px;background:#1f2a44;margin:5px 0;border-radius:2px}
@media (max-width:880px){
  .hamburger{display:inline-block}
  .menu{
    position:absolute;right:1rem;top:64px;display:none;flex-direction:column;
    background:var(--surface);padding:.75rem;border-radius:.75rem;
    box-shadow:0 20px 40px rgba(0,0,0,.14);min-width:220px
  }
  .menu.open{display:flex}
}
/* ===============================
   Hero-Bereich
================================ */
.hero{
  background:
    radial-gradient(
      1200px 520px at 25% 5%,
      #FBBA00 0%,         /* Primärton – sattes Gelb */
      #F59E00 35%,        /* mittleres Orange */
      #B87400 80%,        /* tiefer Goldton */
      #7A4B00 100%        /* dunkles Braun-Gold für Tiefe */
    );
  color:#fff;
  padding:4.5rem 0 3rem;
}

.hero h1{
  font-size:clamp(2rem,6vw,3.25rem);
  line-height:1.1;
  margin:0 0 .6rem;
  color:#fff;
  text-shadow:0 4px 10px rgba(0,0,0,.45);
}
.hero p{
  color:#e6eef8;
  text-shadow:0 2px 6px rgba(0,0,0,.35);
}
.hero-cta{
  display:flex;
  gap:.75rem;
  margin-top:1rem;
  flex-wrap:wrap;
}
.button{
  border-radius:10px;
  padding:.6rem 1rem;
  font-weight:600;
}
.button.primary{
  background: linear-gradient(90deg, #FBBA00, #F59E00);
  color:#fff;
  border:none;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.button.primary:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
}
.button.contrast{
  border:2px solid #FBBA00;
  color:#fff;
  background:transparent;
}
.button.contrast:hover{
  background:rgba(251,186,0,0.15);
  transform: translateY(-1px);
}


/* ===============================
   Banner-Slider (Fade)
================================ */
.banner-slider{
  width:100%;
  height:400px;
  display:flex;
  justify-content:center;
  align-items:center;
  margin:0 auto;
  overflow:hidden;
  background:#f8f9fc;
}
.banner-slider .slides{
  position:relative;
  width:100%;
  max-width:1100px;
  height:100%;
  border-radius:12px;
  overflow:hidden;
  background:#f8f9fc;
}
.banner-slider .slides img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
  opacity:0;
  animation:fwvFade 24s infinite;
  transition:opacity 2s ease-in-out;
}
.banner-slider .slides img:nth-child(1){animation-delay:0s}
.banner-slider .slides img:nth-child(2){animation-delay:8s}
.banner-slider .slides img:nth-child(3){animation-delay:16s}
@keyframes fwvFade{
  0%,10%{opacity:0}
  15%,45%{opacity:1}
  55%,100%{opacity:0}
}
@media (max-width:768px){.banner-slider{height:250px}}
@media (max-width:480px){.banner-slider{height:180px}}
/* ===============================
   Karten & Personen
================================ */
.section-grid{
  display:grid;
  gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  justify-content:center;
  margin:2rem auto;
  max-width:1000px;
}
.section-grid .card{
  background:var(--surface);
  border:1px solid rgba(17,24,39,.06);
  border-radius:14px;
  padding:1.15rem;
  box-shadow:0 6px 18px rgba(0,0,0,.05);
  text-align:center;
}
.grid-people{
  display:grid;
  gap:1rem;
  grid-template-columns:repeat(12,1fr);
  margin:1rem 0 2rem;
}
.person{
  grid-column:span 6;
  display:grid;
  grid-template-columns:120px 1fr;
  gap:1rem;
  align-items:start;
  background:var(--surface);
  border:1px solid rgba(17,24,39,.06);
  border-radius:14px;
  padding:1rem;
}
.person img{
  width:120px;
  height:120px;
  object-fit:cover;
  border-radius:10px;
}
.person h3{margin:0 0 .25rem}
.person small{display:block;color:var(--muted);margin-bottom:.35rem}
@media (max-width:700px){.person{grid-column:1/-1}}

/* ===============================
   Formulare & Footer
================================ */
.grid-form{display:grid;gap:.75rem;grid-template-columns:repeat(2,1fr)}
@media (max-width:720px){.grid-form{grid-template-columns:1fr}}
input,textarea,select{border-radius:10px}
input:focus,textarea:focus,select:focus{outline:none;box-shadow:0 0 0 3px var(--ring)}
.checkbox{display:flex;align-items:center;gap:.5rem;margin:.5rem 0}
.card button[type="submit"]{width:auto}

.site-footer{
  margin-top:auto;
  padding:1.25rem 0;
  border-top:1px solid rgba(17,24,39,.08);
  background:#fff;
  text-align:center;
}
.site-footer nav{margin-top:.5rem;display:flex;justify-content:center;gap:1.5rem}

/* ===============================
   Über uns – Mitgliederfoto
================================ */
.image-wrapper{
  display:flex;
  justify-content:center;
  margin:2rem 0;
}
.image-wrapper img{
  width:100%;
  max-width:1100px;
  height:auto;
  border-radius:12px;
  box-shadow:0 4px 20px rgba(0,0,0,.08);
}

/* ===============================
   Allgemeine Sicherheit
================================ */
html,body{overflow-x:hidden}
/* ===== Erstes Diashow-Bild sofort sichtbar ===== */
.banner-slider .slides img:first-child {
  opacity: 1 !important;           /* sofort beim Laden sichtbar */
  animation-delay: -8s !important; /* startet direkt in der sichtbaren Phase */
}

/* ================================================
   Kompakteres Layout – kleinere Abstände überall
================================================= */

/* Allgemein: weniger Abstand zwischen Abschnitten */
section, main, .prose, .container {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

/* Überschriften & Absätze enger zusammen */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0.8rem !important;
  margin-bottom: 0.4rem !important;
}

p {
  margin-top: 0.3rem !important;
  margin-bottom: 0.3rem !important;
  line-height: 1.4 !important; /* etwas kompaktere Zeilenhöhe */
}

/* Cards und Info-Boxen enger gesetzt */
/* ==========================================
   Kompakteres Menüband / Header
========================================== */

.site-header,
.nav.container {
  padding-top: 0.3rem !important;
  padding-bottom: 0.3rem !important;
  min-height: auto !important;
}

/* Navigationselemente enger platzieren */
.nav.container a,
.nav.container .brand {
  padding-top: 0.2rem !important;
  padding-bottom: 0.2rem !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  font-size: 0.95rem !important;
}

/* Abstand zwischen Brand und Menü verkleinern */
.nav.container {
  gap: 0.75rem !important;
}

/* Mobile Navigation (Hamburger-Menü) ebenfalls kompakter */
.hamburger {
  padding: 0.3rem !important;
}

/* Menüpunkt Hover- oder Active-Hintergrund etwas kleiner */
.nav.container a[aria-current="page"],
.nav.container a:hover {
  padding: 0.25rem 0.5rem !important;
  border-radius: 6px !important;
}
/* ==========================================
   Sehr kompakter Header / Menüband
========================================== */

.site-header,
.nav.container {
  padding-top: 0.15rem !important;
  padding-bottom: 0.15rem !important;
  min-height: 36px !important;
  line-height: 1 !important;
}

/* FWV-Logo / Brand noch enger und kleiner */
.nav.container .brand {
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Menüpunkte kompakter */
.nav.container a {
  font-size: 0.9rem !important;
  padding: 0.15rem 0.4rem !important;
  margin: 0 0.2rem !important;
}

/* Weniger Abstand zwischen Logo und Menü */
.nav.container {
  gap: 0.5rem !important;
}

/* Mobile Menübutton kleiner */
.hamburger {
  padding: 0.2rem !important;
  transform: scale(0.9);
}

/* Optional: feine Trennlinie unten */
.site-header {
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
/* =====================================================
   ULTRA-KOMPAKTER HEADER / MENÜBAND
===================================================== */
.site-header{
  padding-top: .05rem !important;
  padding-bottom: .05rem !important;
  min-height: 30px !important;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.nav.container{
  gap: .5rem !important;
}
.nav.container .brand{
  font-size: .88rem !important;
  font-weight: 600 !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
}
.nav.container a{
  font-size: .88rem !important;
  padding: .12rem .35rem !important;
  margin: 0 .2rem !important;
  line-height: 1 !important;
}
.hamburger{ padding: .18rem !important; transform: scale(.9); }

/* =====================================================
   ALLGEMEIN: ALLE ABSTÄNDE KOMPAKTER
===================================================== */
.container, .prose, main, section{
  margin-top: .6rem !important;
  margin-bottom: .6rem !important;
  padding-top: .3rem !important;
  padding-bottom: .3rem !important;
}
h1{ margin: .4rem 0 .25rem !important; }
h2{ margin: .35rem 0 .2rem !important; }
h3{ margin: .3rem 0 .2rem !important; }
p { margin: .25rem 0 !important; line-height: 1.45 !important; }

/* =====================================================
   STARTSEITE: HERO & BANNER enger
===================================================== */
.hero{
  padding: 2.2rem 0 1.1rem !important;  /* oben/unten deutlich kleiner */
}
.hero-cta{ margin-top: .4rem !important; }
.hero + .banner-slider,
.hero + .container,
.hero + main{
  margin-top: .6rem !important;        /* direkt nach dem Hero weniger Luft */
}

/* Banner (Diashow) noch kompakter */
.banner-slider{
  height: 340px;
  margin: .6rem auto !important;
}
@media (max-width:768px){
  .banner-slider{ height: 220px; }
}

/* =====================================================
   ÜBER UNS: Einleitung, Bild & Karten enger
===================================================== */
/* Einleitungs-Absatz direkt unter H1 enger */
.prose h1 + p{
  margin-bottom: .4rem !important;
}

/* Mitgliederfoto mit kleineren Außenabständen */
.image-wrapper{
  margin: .75rem 0 !important;
}
.image-wrapper img{
  border-radius: 10px;
}

/* Karten-Abstand & Innenabstand kleiner */
.section-grid{
  gap: .75rem !important;
  margin: 1rem auto !important;
}
.section-grid .card{
  padding: .9rem !important;
}

/* Personen-Gitter (falls vorhanden) kompakter */
.grid-people{
  gap: .75rem !important;
  margin: .75rem 0 1rem !important;
}
.person{
  padding: .75rem !important;
  gap: .75rem !important;
}
/* ========= Ziele: moderne Karten / Badges / Roadmap ========= */

/* Grid der Ziele-Karten */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: .9rem;
  margin: .6rem 0 1rem;
}
.card.goal {
  position: relative;
  border-radius: 14px;
  background: var(--card-bg, #fff);
  box-shadow: 0 6px 16px rgba(2,12,27,.06);
  padding: 1rem .95rem;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card.goal:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(2,12,27,.08);
}
.goal__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:12px;
  color:#0b3b78;
  background: radial-gradient(120% 120% at 30% 20%, #edf5ff 0%, #dfeaff 60%, #eaf2ff 100%);
  margin-bottom:.4rem;
}

/* Badges */
.badge{
  display:inline-block; font-size:.78rem; line-height:1;
  padding:.28rem .5rem; border-radius:999px;
  background:#e8eef8; color:#27496b; margin-top:.45rem;
}
.badge.success{ background:#e6f6ed; color:#146c43; }
.badge.info{ background:#e9f1ff; color:#164a9a; }
.badge.warning{ background:#fff2d9; color:#8a5a00; }

/* Checklist – Baseline */
ul.checklist,
.prose ul.checklist{
  list-style: none !important;
  padding-left: 0;
  margin: .4rem 0 1rem;
}

/* Sicherheitshalber Marker in allen Browsern aus */
ul.checklist > li { list-style: none !important; }
ul.checklist > li::marker { content: none; }

/* Deine Häkchen-Badges bleiben wie gehabt */
ul.checklist li{
  position: relative;
  padding-left: 1.6rem;
  margin: .35rem 0;
}
ul.checklist li::before{
  content:""; position:absolute; left:0; top:.15rem;
  width:1rem; height:1rem; border-radius:50%;
  background:#e6f6ed; border:2px solid #19a974;
  box-shadow: inset 0 0 0 2px #e6f6ed;
}
ul.checklist li::after{
  content:""; position:absolute; left:.32rem; top:.5rem;
  width:.45rem; height:.25rem;
  border-left:2px solid #19a974; border-bottom:2px solid #19a974;
  transform: rotate(-45deg);
}

/* Roadmap (Vorhaben) */
.roadmap{ display:grid; gap:.7rem; margin:.5rem 0 1.2rem; }
.roadmap__item{ background:#fff; border-radius:12px; padding:.75rem .85rem; box-shadow:0 4px 14px rgba(2,12,27,.05); }
.roadmap__row{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.45rem; }
.progress{ width:100%; height:8px; background:#eef2f7; border-radius:999px; overflow:hidden; }
.progress > span{ display:block; height:100%; background:linear-gradient(90deg,#3b82f6,#2563eb); border-radius:999px; }

/* CTA unten */
.cta-box{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem 1.2rem; border-radius:14px;
  background: radial-gradient(140% 140% at 0% 0%, #eef5ff 0%, #f3f7ff 40%, #ffffff 100%);
  box-shadow: 0 6px 18px rgba(2,12,27,.06);
  margin:1rem 0 .6rem;
}
.cta-box h3{ margin:.2rem 0; }
.cta-box p{ margin:.1rem 0 0; color:#49617a; }
@media (max-width: 680px){
  .cta-box{ flex-direction:column; align-items:flex-start; }
}
/* Aufzählungszeichen entfernen (betrifft die Listen im Inhaltsbereich) */
main ul {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}
/* Mitglieder-Grid (eigener Abschnitt) */
.members-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: .9rem;
  align-items: start;
  margin: .75rem 0 1.25rem;
}

.member{
  text-align: center;
  background: var(--surface);
  border: 1px solid rgba(17,24,39,.06);
  border-radius: 12px;
  padding: .75rem;
  box-shadow: 0 4px 14px rgba(2,12,27,.05);
}

.member img{
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 10px;
  margin: 0 auto .5rem;
  display: block;
}

.member figcaption{
  font-weight: 600;
  color: #1f2a44;
}
/* Entfernt Unterstrich bei Buttons oder Links mit Button-Klassen */
a.button,
button,
.button {
  text-decoration: none !important;
}
/* Sicherheitshalber auch für Hover/Fokus */
a.button:hover,
a.button:focus,
.button:hover,
.button:focus {
  text-decoration: none !important;
}
/* Entfernt Punkte bei Listen in der Datenschutzerklärung */
.prose ul {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}
.prose ul li::marker {
  content: "";
}