/* ============================================================
   MSV 04 HILDEN – Farben, Schrift, Grundraster
   ============================================================ */
:root{
  --gruen-nacht:#052318;
  --gruen-tief:#08331F;
  --gruen:#127249;
  --gruen-hell:#8ACBA3;
  --rot:#C4202C;
  --rot-tief:#8C1720;
  --papier:#F1F4EF;
  --papier-warm:#E7ECE4;
  --tinte:#122019;
  --tinte-weich:#4A5B51;
  --kreide:rgba(138,203,163,.20);
  --kreide-stark:rgba(138,203,163,.42);

  --breite:1180px;
  --rand:clamp(20px, 5vw, 56px);

  --schrift:'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--schrift);
  font-variation-settings:'wdth' 100,'wght' 400;
  background:var(--papier);
  color:var(--tinte);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit}

:focus-visible{
  outline:3px solid var(--rot);
  outline-offset:3px;
  border-radius:2px;
}

.huelle{max-width:var(--breite);margin:0 auto;padding:0 var(--rand)}

/* Überschriften: Breite als Gestaltungsmittel */
h1,h2,h3{
  margin:0;
  font-variation-settings:'wdth' 118,'wght' 800;
  line-height:1.02;
  letter-spacing:-.02em;
}
h2{font-size:clamp(30px,4.4vw,50px)}
h3{font-size:clamp(20px,2.4vw,26px);font-variation-settings:'wdth' 112,'wght' 700}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

/* ============================================================
   Kopfzeile
   ============================================================ */
.kopf{
  position:sticky;top:0;z-index:60;
  background:var(--gruen-nacht);
  border-bottom:1px solid var(--kreide);
}
.kopf-inhalt{
  max-width:var(--breite);margin:0 auto;padding:0 var(--rand);
  display:flex;align-items:center;gap:18px;height:74px;
}
.marke{display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0}
.marke img{height:46px;width:auto}
.marke-text{color:var(--papier);line-height:1.05}
.marke-name{font-variation-settings:'wdth' 120,'wght' 800;font-size:17px;letter-spacing:-.01em;display:block}
.marke-zusatz{font-size:11.5px;color:var(--gruen-hell);font-variation-settings:'wdth' 90,'wght' 500;letter-spacing:.06em;display:block}

.navi{margin-left:auto;display:flex;gap:2px}
.navi a{
  color:var(--papier);text-decoration:none;
  padding:9px 13px;border-radius:3px;
  font-size:14.5px;font-variation-settings:'wdth' 96,'wght' 550;
  opacity:.72;transition:opacity .15s, background .15s;
}
.navi a:hover{opacity:1;background:rgba(138,203,163,.10)}
.navi a.aktiv{opacity:1;background:var(--rot);color:#fff}

/* Symbol rechts oben: Instagram, auf der eSport-Seite Discord */
.kopf-sozial{display:flex;align-items:center;margin-left:14px}
.kopf-symbol{
  display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;border:1px solid var(--kreide-stark);
  color:var(--papier);border-radius:3px;transition:background .15s,border-color .15s;
}
.kopf-symbol:hover{background:rgba(138,203,163,.14);border-color:var(--gruen-hell)}
.kopf-symbol svg{width:20px;height:20px}
.kopf-symbol[hidden]{display:none}

.menue-knopf{
  margin-left:auto;display:none;background:none;border:1px solid var(--kreide-stark);
  color:var(--papier);width:46px;height:42px;border-radius:4px;cursor:pointer;
  align-items:center;justify-content:center;
}
.menue-knopf span{display:block;width:20px;height:2px;background:var(--papier);position:relative}
.menue-knopf span::before,.menue-knopf span::after{content:'';position:absolute;left:0;width:20px;height:2px;background:var(--papier)}
.menue-knopf span::before{top:-6px}
.menue-knopf span::after{top:6px}

@media (max-width:900px){
  .navi{
    position:absolute;top:74px;left:0;right:0;
    background:var(--gruen-nacht);border-bottom:1px solid var(--kreide);
    flex-direction:column;gap:0;padding:8px var(--rand) 18px;display:none;
  }
  .navi.offen{display:flex}
  .navi a{padding:13px 12px;font-size:17px}
  .kopf-sozial{margin-left:auto}
  .menue-knopf{display:flex;margin-left:10px}
}

/* ============================================================
   Seiten-Umschaltung
   ============================================================ */
.seite{display:none}
.seite.sichtbar{display:block}

/* ============================================================
   Startseite: Countdown-Held
   ============================================================ */
.held{
  position:relative;overflow:hidden;
  background:var(--gruen-nacht);
  color:var(--papier);
  padding:clamp(48px,8vw,96px) 0 clamp(40px,6vw,72px);
}
.held-stern{
  position:absolute;right:20px;top:50%;transform:translateY(-50%);
  width:min(440px,46vw);opacity:.12;pointer-events:none;
}
@media (max-width:760px){
  .held-stern{right:-18%;width:74vw;opacity:.09}
}
.held-inhalt{position:relative;z-index:2;max-width:var(--breite);margin:0 auto;padding:0 var(--rand)}

.held-marke{
  font-size:13px;color:var(--gruen-hell);
  font-variation-settings:'wdth' 88,'wght' 600;letter-spacing:.12em;
  margin-bottom:14px;
}
.held-paarung{
  font-size:clamp(30px,5.6vw,64px);
  font-variation-settings:'wdth' 122,'wght' 800;
  line-height:1.0;letter-spacing:-.025em;margin-bottom:8px;
  max-width:15ch;
}
.held-liga{color:var(--gruen-hell);font-size:15px;font-variation-settings:'wdth' 95,'wght' 500;margin-bottom:34px}

.uhr{display:flex;border-top:1px solid var(--kreide-stark);border-bottom:1px solid var(--kreide-stark)}
.uhr-feld{flex:1;padding:20px 4px 18px;border-right:1px solid var(--kreide);text-align:center}
.uhr-feld:last-child{border-right:none}
.uhr-zahl{
  display:block;
  font-size:clamp(38px,8.4vw,88px);
  font-variation-settings:'wdth' 125,'wght' 800;
  font-variant-numeric:tabular-nums;
  line-height:.92;letter-spacing:-.03em;
}
.uhr-name{
  display:block;margin-top:10px;font-size:11.5px;color:var(--gruen-hell);
  font-variation-settings:'wdth' 88,'wght' 600;letter-spacing:.11em;
}
.uhr-hinweis{padding:26px 0;font-size:19px;color:var(--gruen-hell);font-variation-settings:'wdth' 105,'wght' 600}

.held-daten{display:flex;flex-wrap:wrap;margin-top:26px}
.held-daten div{padding-right:26px;margin-right:26px;border-right:1px solid var(--kreide-stark);margin-bottom:10px}
.held-daten div:last-child{border-right:none;padding-right:0;margin-right:0}
.held-daten dt{font-size:11.5px;color:var(--gruen-hell);font-variation-settings:'wdth' 88,'wght' 600;letter-spacing:.11em;margin-bottom:3px}
.held-daten dd{margin:0;font-size:16.5px;font-variation-settings:'wdth' 104,'wght' 600}

/* ============================================================
   Abschnitte
   ============================================================ */
.block{padding:clamp(52px,7vw,92px) 0}
.block-hell{background:var(--papier)}
.block-warm{background:var(--papier-warm)}
.block-gruen{background:var(--gruen-tief);color:var(--papier)}
.block-gruen h2,.block-gruen h3{color:var(--papier)}

.titel{display:flex;align-items:baseline;gap:14px;margin-bottom:34px;flex-wrap:wrap}
.titel svg{width:19px;height:19px;flex-shrink:0;align-self:center}
.titel-zusatz{color:var(--tinte-weich);font-size:15px;font-variation-settings:'wdth' 95,'wght' 450}
.block-gruen .titel-zusatz{color:var(--gruen-hell)}

.fliess{max-width:64ch}
.fliess p{color:var(--tinte-weich);font-size:17.5px}
.block-gruen .fliess p{color:#CFDDD3}

/* ============================================================
   Nächste Spiele / FuPa
   ============================================================ */
.spiele{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:26px}
.spiel{border:1px solid rgba(18,32,25,.16);background:#fff;padding:26px}
.block-gruen .spiel{background:rgba(255,255,255,.045);border-color:var(--kreide-stark)}
.spiel:only-child{max-width:560px}
.spiel-team{
  font-size:12px;letter-spacing:.11em;font-variation-settings:'wdth' 88,'wght' 700;
  color:var(--rot);margin-bottom:14px;
}
.block-gruen .spiel-team{color:var(--gruen-hell)}
.spiel-paarung{font-size:23px;font-variation-settings:'wdth' 112,'wght' 750;line-height:1.15;margin-bottom:12px}
.spiel-zeile{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid rgba(18,32,25,.10);font-size:15px}
.block-gruen .spiel-zeile{border-color:var(--kreide)}
.spiel-zeile span:first-child{color:var(--tinte-weich)}
.block-gruen .spiel-zeile span:first-child{color:var(--gruen-hell)}
.spiel-zeile span:last-child{font-variation-settings:'wdth' 102,'wght' 600;text-align:right}

/* FuPa-Widget im Kartenrahmen */
.spiel-widget{padding:18px}
.fupa{min-height:130px}
.fupa-gross{min-height:200px}
.quelle-hell{margin-top:14px;font-size:13.5px;color:var(--tinte-weich)}
.fupa a{color:var(--gruen);font-variation-settings:'wdth' 102,'wght' 600}
.fupa-fuss{margin-top:14px;padding-top:12px;border-top:1px solid rgba(18,32,25,.12);font-size:14px}
.fupa-fuss a{color:var(--tinte-weich);text-decoration:none}
.fupa-fuss a:hover{color:var(--rot);text-decoration:underline}
.quelle{font-size:12px;letter-spacing:.09em;font-variation-settings:'wdth' 88,'wght' 600;color:var(--gruen-hell);margin-top:18px}

/* Platzhalter für das echte FuPa-Widget */
.widget-platz{
  margin-top:16px;padding:18px;border:1px dashed rgba(18,32,25,.28);
  font-size:13.5px;color:var(--tinte-weich);line-height:1.5;
}
.block-gruen .widget-platz{border-color:var(--kreide-stark);color:var(--gruen-hell)}
.widget-platz b{font-variation-settings:'wdth' 100,'wght' 700;color:var(--tinte)}
.block-gruen .widget-platz b{color:var(--papier)}

/* ============================================================
   Historie – echte Zeitachse
   ============================================================ */
.historie{list-style:none;margin:0;padding:0;position:relative}
.historie::before{content:'';position:absolute;left:7px;top:10px;bottom:10px;width:1px;background:var(--kreide-stark)}
.block-hell .historie::before,.block-warm .historie::before{background:rgba(18,32,25,.18)}
.historie li{position:relative;padding:0 0 30px 40px}
.historie li:last-child{padding-bottom:0}
.historie li::before{
  content:'';position:absolute;left:0;top:9px;width:15px;height:15px;
  border-radius:50%;background:var(--papier);border:3px solid var(--rot);
}
.block-gruen .historie li::before{background:var(--gruen-tief)}
.historie li:last-child::before{background:var(--rot)}
.historie-jahr{
  display:block;font-size:27px;font-variation-settings:'wdth' 120,'wght' 800;
  line-height:1;letter-spacing:-.02em;
}
.historie-was{display:block;margin-top:5px;color:var(--tinte-weich);font-size:16px}
.block-gruen .historie-was{color:#CFDDD3}

/* ============================================================
   Instagram
   ============================================================ */
.insta{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center}
@media (max-width:760px){.insta{grid-template-columns:1fr}}
.insta-rahmen{border:1px solid var(--kreide-stark);padding:16px;min-height:300px;display:flex;align-items:center;justify-content:center}
.insta-leer{text-align:center;color:var(--gruen-hell);font-size:14.5px;line-height:1.6;padding:24px}

/* ============================================================
   Knöpfe
   ============================================================ */
.knopf{
  display:inline-block;background:var(--rot);color:#fff;text-decoration:none;
  padding:14px 26px;font-size:15.5px;font-variation-settings:'wdth' 104,'wght' 650;
  border:none;cursor:pointer;transition:background .15s;
}
.knopf:hover{background:var(--rot-tief)}
.knopf-linie{
  display:inline-block;background:none;color:inherit;text-decoration:none;
  padding:13px 25px;border:1px solid currentColor;cursor:pointer;
  font-size:15.5px;font-variation-settings:'wdth' 104,'wght' 650;
  transition:background .15s,color .15s;
}
.block-gruen .knopf-linie:hover{background:var(--papier);color:var(--gruen-tief)}
.block-hell .knopf-linie:hover,.block-warm .knopf-linie:hover{background:var(--tinte);color:var(--papier)}

/* ============================================================
   Sponsoren-Laufband
   ============================================================ */
.laufband{overflow:hidden;position:relative;padding:8px 0}
.laufband::before,.laufband::after{
  content:'';position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none;
}
.laufband::before{left:0;background:linear-gradient(to right,var(--papier-warm),transparent)}
.laufband::after{right:0;background:linear-gradient(to left,var(--papier-warm),transparent)}
.laufband-spur{display:flex;gap:18px;width:max-content;animation:rollen 34s linear infinite}
.laufband:hover .laufband-spur{animation-play-state:paused}
@keyframes rollen{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.sponsor-kachel{
  flex:0 0 auto;width:220px;height:112px;background:#fff;
  border:1px solid rgba(18,32,25,.14);
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:14px;overflow:hidden;
}
.sponsor-kachel img{max-height:100%;max-width:100%;width:auto;object-fit:contain}
.sponsor-ersatz{font-size:16px;font-variation-settings:'wdth' 108,'wght' 650;line-height:1.25;color:var(--tinte)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .laufband-spur{animation:none;overflow-x:auto;width:auto}
  .laufband{overflow-x:auto}
}

/* Sponsoren-Raster (Sponsorenseite) */
.sponsor-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px}
.sponsor-feld{
  background:#fff;border:1px solid rgba(18,32,25,.14);
  display:block;text-decoration:none;color:inherit;overflow:hidden;
}
.sponsor-bild{
  height:150px;display:flex;align-items:center;justify-content:center;
  padding:22px;background:#fff;
}
.sponsor-bild img{max-height:100%;max-width:100%;width:auto;object-fit:contain}
.sponsor-text{padding:16px 20px 20px;border-top:1px solid rgba(18,32,25,.12);display:flex;flex-direction:column;gap:4px}
.sponsor-text strong{font-size:18px;font-variation-settings:'wdth' 110,'wght' 700;line-height:1.2}
.sponsor-text span{font-size:14px;color:var(--tinte-weich)}
a.sponsor-feld:hover{border-color:var(--rot)}

/* ============================================================
   Vorstand – Wappenform
   ============================================================ */
.personen{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:30px 24px}
.person{text-align:left}
.person-bild{
  aspect-ratio:3/3.6;background:var(--gruen);
  border-radius:6px 6px 50% 50% / 6px 6px 58% 58%;
  overflow:hidden;position:relative;margin-bottom:14px;
  display:flex;align-items:center;justify-content:center;
}
.person-bild img{width:100%;height:100%;object-fit:cover}
.person-kuerzel{
  color:rgba(255,255,255,.72);font-size:40px;
  font-variation-settings:'wdth' 120,'wght' 800;letter-spacing:.02em;
}
.person-name{font-size:18.5px;font-variation-settings:'wdth' 110,'wght' 700;line-height:1.2}
.person-amt{font-size:14.5px;color:var(--tinte-weich);margin-top:3px}
.block-gruen .person-amt{color:var(--gruen-hell)}

/* ============================================================
   Mannschaften – Reiter und Teambogen
   ============================================================ */
.reiter{display:flex;gap:0;border-bottom:1px solid rgba(18,32,25,.18);margin-bottom:40px;flex-wrap:wrap}
.reiter button{
  background:none;border:none;cursor:pointer;padding:14px 24px;
  font-size:17px;font-variation-settings:'wdth' 108,'wght' 650;color:var(--tinte-weich);
  border-bottom:3px solid transparent;margin-bottom:-1px;
}
.reiter button.aktiv{color:var(--tinte);border-bottom-color:var(--rot)}
.mannschaft{display:none}
.mannschaft.sichtbar{display:block}

.bogen{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:32px;margin-bottom:44px}
.bogen-teil h3{margin-bottom:16px}
.stab{list-style:none;margin:0;padding:0}
.stab li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid rgba(18,32,25,.11);font-size:16px}
.stab li span:first-child{color:var(--tinte-weich);flex-shrink:0}
.stab li span:last-child{font-variation-settings:'wdth' 104,'wght' 650;text-align:right}

.training{background:var(--gruen-tief);color:var(--papier);padding:28px}
.training .stab li{border-color:var(--kreide)}
.training .stab li span:first-child{color:var(--gruen-hell)}
.training h3{color:var(--papier)}

/* ============================================================
   Fakten
   ============================================================ */
.fakten{list-style:none;margin:0;padding:0;border-top:1px solid rgba(18,32,25,.16)}
.block-gruen .fakten{border-color:var(--kreide-stark)}
.fakten li{display:flex;gap:20px;padding:15px 0;border-bottom:1px solid rgba(18,32,25,.11);flex-wrap:wrap}
.block-gruen .fakten li{border-color:var(--kreide)}
.fakten li b{
  flex:0 0 190px;font-size:12px;letter-spacing:.1em;
  font-variation-settings:'wdth' 88,'wght' 700;color:var(--tinte-weich);padding-top:4px;
}
.block-gruen .fakten li b{color:var(--gruen-hell)}
.fakten li span{flex:1;min-width:200px;font-size:17px;font-variation-settings:'wdth' 102,'wght' 500}

/* ============================================================
   Kontakt
   ============================================================ */
.kontakt{display:grid;grid-template-columns:1fr 1fr;gap:44px}
@media (max-width:860px){.kontakt{grid-template-columns:1fr;gap:36px}}
.feld{margin-bottom:18px}
.feld label{display:block;font-size:12.5px;letter-spacing:.09em;font-variation-settings:'wdth' 90,'wght' 700;color:var(--tinte-weich);margin-bottom:7px}
.feld input,.feld textarea,.feld select{
  width:100%;padding:13px 14px;border:1px solid rgba(18,32,25,.26);
  background:#fff;font:inherit;font-size:16px;color:var(--tinte);border-radius:0;
}
.feld textarea{min-height:150px;resize:vertical}
.feld input:focus,.feld textarea:focus,.feld select:focus{border-color:var(--gruen);outline-offset:1px}

.karte-platz{
  background:var(--gruen-tief);color:var(--papier);min-height:340px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  text-align:center;padding:30px;
}
.karte-platz p{max-width:34ch;font-size:14.5px;color:var(--gruen-hell)}
.karte-platz iframe{width:100%;height:340px;border:0;display:block}

/* ============================================================
   Fußzeile
   ============================================================ */
.fuss{background:var(--gruen-nacht);color:var(--papier);padding:56px 0 30px}
.fuss-raster{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;padding-bottom:36px;border-bottom:1px solid var(--kreide)}
@media (max-width:760px){.fuss-raster{grid-template-columns:1fr;gap:28px}}
.fuss h4{margin:0 0 14px;font-size:12px;letter-spacing:.11em;font-variation-settings:'wdth' 88,'wght' 700;color:var(--gruen-hell)}
.fuss ul{list-style:none;margin:0;padding:0}
.fuss li{margin-bottom:9px;font-size:15px}
.fuss a{color:var(--papier);text-decoration:none;opacity:.82}
.fuss a:hover{opacity:1;text-decoration:underline}
.fuss-unten{display:flex;justify-content:space-between;gap:18px;padding-top:22px;font-size:13.5px;color:var(--gruen-hell);flex-wrap:wrap}
.fuss-logo{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.fuss-logo img{height:56px}

.sozial{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--papier);
  border:1px solid var(--kreide-stark);padding:11px 18px;font-size:15px;
  font-variation-settings:'wdth' 102,'wght' 600;transition:background .15s}
.sozial:hover{background:rgba(138,203,163,.12)}
.sozial svg{width:19px;height:19px}


/* ============================================================
   eSport-Abteilung
   ============================================================ */
.es-kopf{display:grid;grid-template-columns:1fr 300px;gap:44px;align-items:center}
.es-wappen{display:flex;justify-content:center}
.es-wappen img{max-width:100%;height:auto;filter:drop-shadow(0 10px 26px rgba(0,0,0,.35))}
@media (max-width:800px){
  .es-kopf{grid-template-columns:1fr;gap:30px}
  .es-wappen{order:-1;max-width:230px;margin:0 auto}
}

.es-discord{
  display:inline-flex;align-items:center;gap:11px;margin-top:28px;
  background:#5865F2;
}
.es-discord:hover{background:#4551D8}
.es-discord svg{width:22px;height:17px}

.es-mission{
  margin-top:38px;padding:26px 30px;
  border-left:4px solid var(--rot);background:#fff;
}
.es-mission-label{
  margin:0 0 8px;font-size:12px;letter-spacing:.11em;
  font-variation-settings:'wdth' 88,'wght' 700;color:var(--rot);
}
.es-mission-text{
  margin:0;font-size:21px;line-height:1.4;
  font-variation-settings:'wdth' 106,'wght' 600;max-width:58ch;
}

/* Erfolge */
.pokale{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px}
.pokal{
  background:#fff;border:1px solid rgba(18,32,25,.14);
  border-top:4px solid var(--rot);padding:24px 24px 26px;
}
.pokal-jahr{
  display:block;font-size:13px;letter-spacing:.1em;
  font-variation-settings:'wdth' 88,'wght' 700;color:var(--tinte-weich);margin-bottom:8px;
}
.pokal-titel{
  display:block;font-size:24px;line-height:1.15;
  font-variation-settings:'wdth' 114,'wght' 750;letter-spacing:-.015em;
}
.pokal-text{margin:10px 0 0;font-size:15.5px;color:var(--tinte-weich)}

/* Discord-Name hinter dem Klarnamen */
.discord-name{
  display:block;font-style:normal;font-size:13.5px;
  color:var(--tinte-weich);font-variation-settings:'wdth' 96,'wght' 450;margin-top:2px;
}
.discord-name::before{content:"Discord: "}
.block-gruen .discord-name{color:var(--gruen-hell)}

.aktionen-reihe{display:flex;gap:14px;flex-wrap:wrap;align-items:center}