/* =============================================================
   FSV Neunkirchen-Seelscheid – Stylesheet
   Aufbau: 1 Tokens · 2 Reset · 3 Layout · 4 Basis · 5 Komponenten
           6 Sektionen · 7 Breakpoints · 8 Utilities
   Fluid bis 2000px, Breakpoints 1400 / 1200 / 1024 / 768 / 560
   ============================================================= */

/* ---------- 1 Tokens ---------- */
:root {
  /* Markenfarben – abgeleitet aus dem Vereinslogo (#009A44) */
  --green-50:  #E8F7EE;
  --green-100: #C6EBD5;
  --green-200: #8FD9B0;
  --green-400: #16B45A;
  --green-500: #009A44;   /* Primär */
  --green-600: #007F38;
  --green-700: #00652C;
  --green-800: #024A22;
  --green-900: #04301A;   /* Dunkle Flächen */
  --green-950: #021B0F;

  --ink:       #0B120E;
  --ink-700:   #34423A;
  --ink-500:   #5C6A61;
  --ink-300:   #96A29A;
  --line:      #E2E7E3;
  --surface:   #FFFFFF;
  --surface-2: #F4F7F5;
  --surface-3: #EAF0EC;

  /* Kontrastfarbe: Elektro-Lime – Signalfarbe für CTAs, Badges und Highlights.
     Dunkles Ink darauf erreicht 12,8:1 (WCAG AAA) auf hellem wie dunklem Grund. */
  --accent:      #C6F24E;
  --accent-600:  #B2E02F;
  --accent-ink:  #16220A;

  /* Typografie – fluid */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Archivo Black", "Arial Black", Haettenschweiler, "Arial Narrow Bold", Impact, var(--font-sans);

  --fs-xs:  clamp(.72rem,  .69rem + .12vw, .8rem);
  --fs-sm:  clamp(.82rem,  .79rem + .15vw, .92rem);
  --fs-base:clamp(.95rem,  .91rem + .2vw,  1.08rem);
  --fs-md:  clamp(1.05rem, .99rem + .3vw,  1.25rem);
  --fs-lg:  clamp(1.25rem, 1.1rem + .7vw,  1.75rem);
  --fs-xl:  clamp(1.6rem,  1.3rem + 1.4vw, 2.6rem);
  --fs-2xl: clamp(2.1rem,  1.5rem + 2.8vw, 4.2rem);
  --fs-3xl: clamp(2.6rem,  1.6rem + 4.6vw, 6.4rem);

  /* Abstände – fluid */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4.5rem;
  --sp-section: clamp(3rem, 1.5rem + 4vw, 6.5rem);
  /* Der Abstand zwischen der Überschrift eines Abschnitts und seinem Inhalt.
     Steht hier, weil ihn seit dem 08.09.2026 zwei Stellen brauchen und sie
     denselben Wert haben sollen. */
  --sp-head: clamp(1.5rem, 1rem + 1.5vw, 2.75rem);
  --gutter: clamp(1rem, .4rem + 2.2vw, 3.5rem);
  --wrap: 2000px;
  /* Abstand vom Fensterrand zur Inhaltskante von .wrap – dieselbe Rechnung
     andersherum. Für alles, was randlos läuft und trotzdem im Raster beginnt
     (Slider, Hero-Text). */
  --kante: max(var(--gutter), 50vw - var(--wrap) / 2);

  /* FSV-Assistent: Abstand des Knopfs zum Fensterrand und der Freiraum,
     den die Seite unten für ihn lässt (Knopf ~52px hoch, plus Luft). */
  --chat-offset:    clamp(1rem, 2vw, 1.75rem);
  --chat-clearance: calc(var(--chat-offset) + 64px);

  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 18px;
  /* Schatten seit 06.10.2026 kleiner. Der alte --shadow reichte 44 px unter
     die Karte und wurde in den Slidern sichtbar abgeschnitten. Karten heben
     sich nur noch mit --shadow; --shadow-lg bleibt Menüs und Dialogen. */
  --shadow-sm: 0 1px 2px rgb(4 48 26 / .06), 0 2px 6px rgb(4 48 26 / .05);
  --shadow:    0 2px 4px rgb(4 48 26 / .06), 0 6px 16px rgb(4 48 26 / .08);
  --shadow-lg: 0 4px 10px rgb(4 48 26 / .09), 0 14px 32px rgb(4 48 26 / .11);
  /* Platz, den ein Slider rundherum für den Schatten seiner Karten lässt:
     16 px Unschärfe plus 4 px Anheben. */
  --schattenraum: 1rem;

  /* Gefüllte Knöpfe: ein kaum sichtbarer Verlauf von oben hell nach unten
     dunkel, dazu eine Lichtkante oben. Die Mitte bleibt die Markenfarbe.
     Grün beginnt bei green-600, damit weiße Schrift nirgends unter 5:1 fällt. */
  --fill-accent:       linear-gradient(180deg, #D2F76A, #BAE83A);
  --fill-accent-hover: linear-gradient(180deg, #C2EF48, #A9D827);
  --fill-green:        linear-gradient(180deg, #007F38, #006A2E);
  --fill-green-hover:  linear-gradient(180deg, #006F31, #005826);
  --fill-green-dunkel: linear-gradient(180deg, #035A2A, #023F1D);
  --fill-dunkel:       linear-gradient(180deg, #0B4126, #032515);   /* green-900: Datumskacheln */
  /* Große Farbflächen (Bänder, dunkle Karten, Sektionen): ein ganz leiser
     Verlauf schräg von oben links, damit die Fläche nicht stumpf wirkt.
     Chris am 06.10.2026: „solche großen Flächen … sollten auch so einen ganz
     dezenten Farbverlauf bekommen.“ Die Mitte bleibt der Grundton; der
     hellste Punkt hält mit Weiß über 11:1, mit Lime über 9:1. */
  --fill-flaeche:      linear-gradient(155deg, #0A3F24 0%, #04301A 55%, #022514 100%);   /* auf green-900 */
  --fill-flaeche-tief: linear-gradient(155deg, #062A17 0%, #021B0F 55%, #011309 100%);   /* auf green-950 */
  --fill-flaeche-hell: linear-gradient(155deg, #04763A 0%, #00652C 55%, #005524 100%);   /* auf green-700 */
  --fill-kante:        inset 0 1px 0 rgb(255 255 255 / .28);

  --header-h: 76px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}
/* ---------- 2 Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
*, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* Ein Wort, das nicht in seine Spalte passt, bricht – statt über die Kante
     zu laufen und abgeschnitten zu werden. Chris am 08.09.2026 zur Kachel
     „Jugendpräsentationstag am 29.08.2026": „bitte lass auch ein einzelnes
     wort umbrechen, wenn sowas ansonsten passiert."

     Die Eigenschaft vererbt sich, gilt also überall, und sie greift nur im
     Notfall: Solange ein Wort in eine Zeile passt, ändert sich nichts. Wo ein
     Umbruch mitten im Wort trotzdem falsch wäre – Namen auf den Personen-
     karten –, steht daneben overflow-wrap: normal. */
  overflow-wrap: break-word;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
/* <picture> ist nur die Hülle für die Formatwahl und soll im Layout nicht
   mitzählen – so greifen Regeln wie `.news-card__media img { height: 100% }`
   weiter auf das Bild, als läge es direkt im Container. */
picture { display: contents; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
:focus-visible {
  outline: 3px solid var(--green-500);
  outline-offset: 3px;
  border-radius: 3px;
}
::selection { background: var(--green-500); color: #fff; }
/* ---------- 3 Layout ---------- */
.wrap {
  width: min(100% - var(--gutter) * 2, var(--wrap));
  margin-inline: auto;
}
/* Ein Abschnitt endet nie ohne Abstand nach unten. Wer einem Kopfbereich
   padding-bottom: 0 gibt, muss dafür sorgen, dass das Nächste den Abstand
   mitbringt – ein getönter Abschnitt tut das nicht, er beginnt an seiner
   Kante. Chris am 07.09.2026: „die klatschen jetzt direkt am nächsten
   abschnitt. das sollte nie irgendwo passieren." */
.section { padding-block: var(--sp-section); }
.section--tight { padding-block: clamp(2rem, 1rem + 2.5vw, 3.75rem); }
.section--dark { background: var(--green-900) var(--fill-flaeche); color: #fff; }
.section--muted { background: var(--surface-2); }
.skip-link {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 200;
  background: var(--green-600) var(--fill-green); color: #fff; padding: .75rem 1.25rem;
  border-radius: 0 0 var(--radius) var(--radius); font-weight: 700;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; }
/* ---------- 4 Basis-Typografie ---------- */
h1, h2, h3, h4 { line-height: 1.05; font-weight: 800; letter-spacing: -.015em; text-wrap: balance; }
.display {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-style: italic;
  letter-spacing: -.01em;
  line-height: .92;
}
p { text-wrap: pretty; }
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-5); flex-wrap: wrap; margin-bottom: var(--sp-head);
}
.section-title { font-size: var(--fs-xl); }
.section-title .accent { color: var(--green-500); }
/* Aus dem Editor (Textstellen): kursiv gesetzte Wörter sind die grüne Hervorhebung. */
.section-title em { font-style: inherit; color: var(--green-500); }
.section--dark .section-title em { color: var(--accent); }
.section--dark .section-title .accent { color: var(--accent); }
.section-sub { color: var(--ink-500); font-size: var(--fs-md); margin-top: var(--sp-2); max-width: 60ch; }
.section--dark .section-sub { color: var(--green-100); }
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--green-600);
}
.section--dark .eyebrow { color: var(--green-200); }
.eyebrow::before {
  content: ""; width: 1.75rem; height: 3px; background: currentColor; border-radius: 2px;
}
/* ---------- 5 Komponenten ---------- */
/* ---------- CTAs: genau drei Typen, verbindlich ----------
   1  .btn--major   gefüllt in der Kontrastfarbe. Der eine Hauptweg pro Abschnitt.
   2  .btn--minor   transparent mit Rahmen in currentColor.
   3  .link-more    Textlink mit Pfeil nach rechts, unterstrichen.

   Beide Buttons sind bewusst kontextfrei: Lime mit dunkler Schrift erreicht auf
   hellem wie dunklem Grund 12,8:1, der Rahmen von .btn--minor erbt die
   Textfarbe. Dadurch braucht es keine Varianten für dunkle Flächen – vorher
   gab es dafür sechs Button-Klassen, die sich überschnitten. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .85rem 1.5rem; border-radius: 999px; border: 2px solid transparent;
  font-weight: 800; font-size: var(--fs-sm); letter-spacing: .02em;
  cursor: pointer; text-align: center; white-space: nowrap; max-width: 100%;
  transition: transform .18s var(--ease), background-color .18s, color .18s,
              border-color .18s, box-shadow .18s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1em; height: 1em; flex-shrink: 0; }
/* 1 – Major */
.btn--major { background: var(--accent) var(--fill-accent); color: var(--accent-ink); box-shadow: var(--fill-kante), var(--shadow-sm); }
.btn--major:hover { background: var(--accent-600) var(--fill-accent-hover); color: var(--accent-ink); box-shadow: var(--fill-kante), var(--shadow); }
/* 2 – Minor
   Hover: dunkles Grün mit weißer Schrift. Vorher stand hier
   'background: currentColor' – das färbte die Fläche in der Textfarbe, ließ den
   Text aber dunkel, weil er kein Kindelement ist. Ergebnis war dunkel auf
   dunkel. Jetzt beides explizit, ein Zustand für hellen und dunklen Grund.
   Der Rahmen bleibt dabei weiß: In der Spielleiste (.mb, green-700) war die
   Füllung vorher dieselbe Farbe wie der Grund, Rahmen und Kontur verschwanden
   im Hover. Füllung deshalb eine Stufe dunkler als jede grüne Fläche, auf der
   der Knopf steht, und der weiße Rahmen zeichnet ihn überall nach. */
.btn--minor { border-color: currentColor; color: inherit; background: transparent; }
.btn--minor:hover,
.btn--minor:focus-visible {
  background: var(--green-800) var(--fill-green-dunkel); border-color: #fff; color: #fff;
  box-shadow: var(--fill-kante);
}
.btn--block {
  /* Volle Breite des Behälters, aber nie beliebig weit: ein Schaltknopf über
     mehrere hundert Pixel liest sich nicht mehr als Knopf. */
  width: 100%;
  max-inline-size: 22rem;
}
.btn--sm { padding: .55rem 1.1rem; font-size: var(--fs-xs); }
/* 3 – Textlink mit Pfeil, immer unterstrichen */
.link-more {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 800; font-size: var(--fs-sm); color: inherit;
  border-bottom: 2px solid currentColor; padding-bottom: 2px;
  transition: gap .18s var(--ease), opacity .18s;
}
.link-more:hover { gap: .85rem; opacity: .75; }
.link-more svg { width: 1em; height: 1em; flex-shrink: 0; }
/* Badges */
.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .7rem; border-radius: 4px;
  font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  background: var(--green-800); color: #fff;
}
/* ---------- 5b Header ---------- */
.topbar {
  background: var(--green-950); color: var(--green-100);
  font-size: var(--fs-xs); border-bottom: 1px solid rgb(255 255 255 / .08);
}
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 40px; }
.topbar__links { display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: center; }
.topbar__links a { transition: color .18s; }
.topbar__links a:hover { color: #fff; }
/* Rechte Seite: Newsletter-Link und Social-Icons sind Geschwister.
   Vorher lag der Newsletter-Link IN .topbar__social – die Regel dort presst
   jedes <a> in einen 30px-Kreis und hat den Text damit zerquetscht. */
.topbar__right { display: flex; align-items: center; gap: var(--sp-3); }
.topbar__social { display: flex; gap: .35rem; align-items: center; }
.topbar__social a {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  transition: background-color .18s, color .18s;
}
.topbar__social a:hover { background: var(--green-600) var(--fill-green); color: #fff; }
.topbar__social svg { width: 17px; height: 17px; }
/* Fanshop: der einzige Knopf in Akzentfarbe auf der dunklen Leiste, damit er
   neben den Symbolen sofort auffällt. Der kleine Pfeil sagt: fremde Seite. */
.topbar__shop {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .8rem .3rem .65rem; border-radius: 999px;
  background: var(--accent) var(--fill-accent); color: var(--green-950);
  box-shadow: var(--fill-kante);
  font-weight: 800; letter-spacing: .02em; line-height: 1.2;
  transition: background-color .18s, color .18s;
}
.topbar__shop:hover { background: #fff; color: var(--green-950); }
.topbar__shop svg { width: 15px; height: 15px; flex-shrink: 0; }
.topbar__shop .topbar__shop-pfeil { width: 12px; height: 12px; margin-left: -.1rem; }

/* Anfahrt ist der häufigste Grund für einen Besuch der Seite – hervorgehoben. */
/* Aus einem gepflegten Menü kommt die Hervorhebung als CSS-Klasse am <li>. */
.topbar__hl,
.topbar__links .hervorheben > a {
  display: inline-flex; align-items: center; gap: .4rem;
  color: #fff; font-weight: 800;
  background: rgb(255 255 255 / .1); border-radius: 999px;
  padding: .25rem .75rem .25rem .6rem;
  transition: background-color .18s;
}
.topbar__hl:hover,
.topbar__links .hervorheben > a:hover { background: var(--green-600) var(--fill-green); }
.topbar__hl svg,
.topbar__links .hervorheben > a svg { width: 14px; height: 14px; color: var(--accent); flex-shrink: 0; }
/* Nur der Header bleibt oben stehen. Das Sponsorenband läuft im Seitenfluss
   unterhalb der „Nächstes Spiel“-Leiste mit. */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s var(--ease);
}
.site-header.is-stuck { box-shadow: var(--shadow); }
/* Reihenfolge: Logo · Suche · (Freiraum) · Navigation mit Mitmachen-CTA · Burger */
.header__inner {
  display: flex; align-items: center; gap: clamp(.75rem, 1.6vw, 1.75rem);
  min-height: var(--header-h);
}
.brand { display: flex; align-items: center; gap: .85rem; flex-shrink: 0; }
.brand__logo { width: auto; height: clamp(44px, 3.4vw, 60px); }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name { font-family: var(--font-display); font-size: var(--fs-md); text-transform: uppercase; font-style: italic; letter-spacing: -.01em; }
.brand__claim { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--green-600); }
/* Hauptnavigation mit Mega-Menü */
/* Die Navigation gibt nie nach: Kein Menüpunkt bricht auf zwei Zeilen um
   („Sponsor werden"), Platz holt sich der Header bei der Suche. */
.main-nav { margin-left: 0; flex-shrink: 0; }
.main-nav__list { display: flex; align-items: center; gap: clamp(.25rem, .6vw, 1rem); }
.main-nav__link {
  position: relative; display: inline-flex; align-items: center; gap: .35rem;
  white-space: nowrap;
  padding: .7rem clamp(.5rem, .7vw, .9rem);
  font-weight: 800; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .03em;
  border-radius: var(--radius-sm); transition: color .18s, background-color .18s;
}
.main-nav__link::after {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: .35rem; height: 3px;
  background: var(--green-500); border-radius: 2px; transition: left .22s var(--ease), right .22s var(--ease);
}
/* Das Mega-Menü öffnet auf Klick, nicht beim Überfahren (Chris, 24.09.2026).
   main.js setzt data-klick an die Navigation und data-open an den offenen
   Punkt. Ohne JavaScript fehlt data-klick – dann gilt das alte Hover-Verhalten,
   damit die Untermenüs erreichbar bleiben. */
.main-nav__link:hover,
.main-nav__item[data-open="true"] > .main-nav__link,
.main-nav:not([data-klick]) .main-nav__item:hover > .main-nav__link,
.main-nav:not([data-klick]) .main-nav__item:focus-within > .main-nav__link,
.main-nav__link[aria-current="page"] { color: var(--green-600); }
.main-nav__link:hover::after,
.main-nav__item[data-open="true"] > .main-nav__link::after,
.main-nav:not([data-klick]) .main-nav__item:hover > .main-nav__link::after,
.main-nav:not([data-klick]) .main-nav__item:focus-within > .main-nav__link::after,
.main-nav__link[aria-current="page"]::after { left: .75rem; right: .75rem; }
.main-nav__link .chev { width: .7em; height: .7em; transition: transform .2s var(--ease); }
.main-nav__item[data-open="true"] .chev,
.main-nav:not([data-klick]) .main-nav__item:hover .chev,
.main-nav:not([data-klick]) .main-nav__item:focus-within .chev { transform: rotate(180deg); }
.main-nav[data-klick] .main-nav__item:has(> .mega) > .main-nav__link { cursor: pointer; }
.main-nav__link--cta {
  background: var(--green-600) var(--fill-green); color: #fff; border-radius: 999px; padding-inline: 1.25rem; margin-left: .35rem;
  box-shadow: var(--fill-kante);
}
.main-nav__link--cta::after { display: none; }
/* Der generische Nav-Hover (.main-nav__item:hover > .main-nav__link) faerbt Text
   green-600 - auf dem gefuellten CTA waere das gruen auf gruen (WCAG-Verstoss).
   Deshalb hier mit mindestens gleicher Spezifitaet uebersteuern. */
.main-nav__link--cta:hover,
.main-nav__item[data-open="true"] > .main-nav__link--cta,
.main-nav:not([data-klick]) .main-nav__item:hover > .main-nav__link--cta,
.main-nav:not([data-klick]) .main-nav__item:focus-within > .main-nav__link--cta { background: var(--green-700) var(--fill-green-hover); color: #fff; }
.main-nav__link--cta[aria-current="page"] { background: var(--green-700) var(--fill-green-hover); color: #fff; }
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--surface); border-top: 3px solid var(--green-500);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  z-index: 90;
}
.main-nav__item[data-open="true"] > .mega,
.main-nav:not([data-klick]) .main-nav__item:hover > .mega,
.main-nav:not([data-klick]) .main-nav__item:focus-within > .mega { opacity: 1; visibility: visible; transform: translateY(0); }
/* Die Karte links ist in jedem Menü so schmal wie bei „Teams“. Chris am
   07.10.2026: bei „Aktuelles“ war sie doppelt so breit und schob die Spalten
   weit nach rechts. auto-fill statt auto-fit: Zwei Spalten bleiben dann eng
   neben der Karte, statt sich über die ganze Breite zu verteilen. */
.mega__inner { display: grid; grid-template-columns: minmax(160px, .55fr) 4fr; gap: clamp(2rem, 3vw, 4rem); padding-block: clamp(1.75rem, 2.5vw, 3rem); }
.mega__heading { font-size: var(--fs-lg); font-weight: 800; line-height: 1.05; margin-bottom: var(--sp-2); }
.mega__intro p { color: var(--ink-500); font-size: var(--fs-sm); }
.mega__cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: clamp(1.25rem, 2vw, 2.5rem); }
.mega__coltitle {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .12em;
  color: var(--green-600); font-weight: 800; margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2); border-bottom: 1px solid var(--line);
}
.mega__list li + li { margin-top: .15rem; }
.mega__link { display: block; padding: .5rem .65rem; margin-inline: -.65rem; border-radius: var(--radius-sm); transition: background-color .16s, color .16s; }
.mega__link:hover { background: var(--green-50); color: var(--green-700); }
.mega__link b { display: block; font-weight: 700; font-size: var(--fs-sm); }
.mega__link span { display: block; font-size: var(--fs-xs); color: var(--ink-500); line-height: 1.35; }
/* Hervorgehobener Link in einer Spalte (Menüklasse „hervorheben“ auf Ebene 3),
   z. B. „Kontakt“ unter „Verein“: grüner Knopf mit Pfeil, der Zusatztext bleibt
   grau darunter. Gleiche Farben wie der Knopf „Mitmachen“ oben. */
.mega__link--cta { margin-top: .5rem; }
.mega__link--cta b {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--green-600) var(--fill-green); color: #fff; border-radius: 999px; padding: .45rem 1rem;
  box-shadow: var(--fill-kante);
  transition: background-color .16s;
}
.mega__link--cta b svg { width: 1em; height: 1em; }
.mega__link--cta span { margin-top: .35rem; }
.mega__link--cta:hover { background: transparent; }
.mega__link--cta:hover b { background: var(--green-700) var(--fill-green-hover); }
/* Menüklasse „akzent“: derselbe Knopf in der Akzentfarbe, wie der Fanshop in
   der Servicezeile. Zwei grüne Knöpfe in einer Spalte sähen gleich wichtig aus. */
.mega__link--akzent b { background: var(--accent) var(--fill-accent); color: var(--green-950); }
.mega__link--akzent:hover b { background: var(--green-950); color: #fff; }
/* Bildkarte links im Aufklappmenü: die neueste News, die erste Mannschaft oder
   der Sportpark – dieselbe Form, damit die Menüs gleich aussehen. Welches Menü
   welche Karte bekommt, entscheiden die Links (fsv_nav_shows_news,
   fsv_nav_first_team, fsv_nav_sportpark in inc/navigation.php). */
.mega__teaser { max-width: 24rem; }
.mega__teaser .mega__coltitle, .mega__match .mega__coltitle { color: var(--green-600); font-size: var(--fs-xs); }
.mega__teaser-card { display: block; }
.mega__teaser-media {
  display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: var(--radius); background: var(--surface-3);
}
.mega__teaser-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.mega__teaser-card:hover .mega__teaser-media img { transform: scale(1.04); }
.mega__teaser-media .badge { position: absolute; left: .75rem; bottom: .75rem; }
.mega__teaser-kicker { display: block; margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--ink-500); }
.mega__teaser-title {
  display: block; margin-top: .2rem; font-weight: 800; font-size: var(--fs-base);
  line-height: 1.3; color: var(--ink); transition: color .16s;
}
.mega__teaser-card:hover .mega__teaser-title { color: var(--green-700); }
.mega__teaser-more, .mega__match-more { margin-top: var(--sp-4); color: var(--green-700); }
/* Nächstes Spiel im Aufklappmenü (Menüklasse naechstes-spiel): dieselbe Stelle
   wie die Newskarte, nur ohne Bild – Mannschaft, Paarung, Anstoß. */
.mega__match { max-width: 24rem; }
.mega__match-card {
  display: grid; gap: .65rem; padding: 1rem 1.1rem;
  background: var(--surface-2); border-radius: var(--radius);
}
.mega__match-meta { font-size: var(--fs-xs); color: var(--ink-500); }
.mega__match-meta b { color: var(--ink); font-weight: 800; }
.mega__match-side { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.mega__match-side b { font-weight: 800; font-size: var(--fs-sm); line-height: 1.25; }
.mega__match .crest { width: 38px; height: 38px; background: var(--surface); }
.mega__match-when {
  font-size: var(--fs-sm); color: var(--ink-700);
  padding-top: .65rem; border-top: 1px solid var(--line);
}
.mega__match-when b { font-weight: 800; color: var(--ink); }
/* Suche */
.header__actions { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
.icon-btn {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid var(--line); border-radius: 50%; background: var(--surface);
  cursor: pointer; transition: background-color .18s, border-color .18s, color .18s;
}
.icon-btn:hover { background: var(--green-600) var(--fill-green); border-color: var(--green-600); color: #fff; }
.icon-btn svg { width: 20px; height: 20px; }
/* Burger + Mobil-Navigation
   Bewusst ohne Kreis und ohne Rahmen: Der Kreis wirkte wie ein zweiter
   Handlungsknopf neben dem Mitmachen-CTA. Die Trefferfläche bleibt 44px,
   damit sie auf dem Touchscreen gut zu erwischen ist. */
.burger { display: none; }
.icon-btn.burger {
  border: 0; border-radius: var(--radius-sm); background: transparent;
  width: 44px; height: 44px; color: var(--ink);
}
.icon-btn.burger:hover { background: var(--surface-2); color: var(--green-700); }
.icon-btn.burger svg { width: 27px; height: 27px; }
.mobile-nav { display: none; }
/* ---------- 5c Sponsorenband ---------- */
.sponsor-strip {
  display: block;
  background: var(--surface);
  /* Kein eigener Rahmen und kein Polster mehr: Die Kästen bringen ihre Kante
     selbst mit. Beides zusammen ergäbe oben und unten zwei Linien mit Luft
     dazwischen. */
}
/* Die Blenden an den Rändern gehören zur Laufschiene, nicht zum ganzen Band –
   sonst lägen sie auch über dem Aufruf darunter. */
.sponsor-strip__rail { position: relative; overflow: hidden; }
.sponsor-strip__rail::before, .sponsor-strip__rail::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: clamp(2rem, 6vw, 7rem); z-index: 2; pointer-events: none;
}
.sponsor-strip__rail::before { left: 0; background: linear-gradient(90deg, var(--surface), transparent); }
.sponsor-strip__rail::after  { right: 0; background: linear-gradient(270deg, var(--surface), transparent); }

.sponsor-track { display: flex; width: max-content; animation: marquee 55s linear infinite; }
.sponsor-strip:hover .sponsor-track, .sponsor-strip:focus-within .sponsor-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .sponsor-track { animation: none; }
.sponsor-strip__rail { overflow-x: auto; }
}
.sponsor-track__group { display: flex; align-items: stretch; }
/* Jeder Sponsor bekommt denselben Kasten – gleiche Breite, gleiche Höhe.
   Wer ein breites Logo hat, bekommt dadurch keine größere Fläche als wer ein
   schmales hat; alle zahlen dasselbe. Das Logo sitzt mittig darin und wird nur
   so weit skaliert, wie es in den Kasten passt (object-fit: contain), nie
   beschnitten. Die Kästen stoßen aneinander, das -1px zieht die beiden
   Nachbarränder auf eine gemeinsame Trennlinie zusammen. */
.sponsor-item {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box;
  width: clamp(148px, 15vw, 200px);
  height: clamp(66px, 6.2vw, 86px);
  padding: clamp(.7rem, 1.4vw, 1.1rem);
  margin-right: -1px;
  border: 1px solid var(--line);
  background: var(--surface);
}
/* Je nach Quelle liefert fsv_media ein blankes <img> oder ein <picture> darum.
   display: contents nimmt das <picture> aus dem Layout, damit das Bild in
   beiden Fällen direkt am Kasten gemessen wird. */
.sponsor-item picture { display: contents; }
.sponsor-item img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain;
  filter: grayscale(1) opacity(.6);
  transition: filter .25s var(--ease), transform .25s var(--ease);
}
.sponsor-item:hover, .sponsor-item:focus-visible { position: relative; z-index: 1; border-color: var(--green-500); }
.sponsor-item:hover img, .sponsor-item:focus-visible img { filter: grayscale(0) opacity(1); transform: scale(1.06); }
@keyframes marquee { from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ---------- 6 Hero: Full-Bleed-Mosaik ---------- */
.hero-mosaic {
  display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(300px, 1fr);
  gap: 4px; background: var(--green-950);
}
.hero-main { position: relative; min-height: clamp(420px, 46vw, 720px); display: flex; align-items: flex-end; overflow: hidden; }
.hero-main__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-main::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(20deg, rgb(2 27 15 / .94) 8%, rgb(3 44 24 / .68) 46%, rgb(0 106 48 / .22) 78%),
    radial-gradient(120% 95% at 8% 100%, rgb(22 180 90 / .45), transparent 60%);
}
/* Der Hero-Text läuft auf derselben Flucht wie Kopfzeile, Spielleiste und
   jeder Abschnitt. Die Rechnung ist dieselbe wie in .wrap, nur andersherum:
   Dort ergibt `min(100% - 2*gutter, --wrap)` die Spaltenbreite, hier ergibt
   `max(gutter, 50vw - wrap/2)` deren linke Kante. Gemessen bei 2560 px hing
   der Text vorher 200 px weiter links als alles andere.

   Prozent geht hier nicht: Bei einem Rasterfeld rechnet die Prozentangabe
   gegen die Kachel, nicht gegen das volle Mosaik – bei 1600 px stimmte es
   deshalb, bei 2560 px nicht. */
.hero-main__inner {
  position: relative; z-index: 2; color: #fff;
  padding: clamp(2rem, 4vw, 4.5rem) clamp(1.25rem, 4vw, 5rem);
  padding-left: max(var(--gutter), calc(50vw - var(--wrap) / 2));
  width: min(100%, 1100px);
}
.hero-main__title { font-size: var(--fs-3xl); margin-block: var(--sp-4) var(--sp-5); }
.hero-main__title .line-accent { color: var(--accent); display: block; }
/* Die dritte Zeile der H1 nennt Ort und Sache: „Fußball in
   Neunkirchen-Seelscheid – seit 1926“. Sie steht in der Grundschrift und
   ohne Versalien, damit sie sich als Satz liest und nicht als zweiter Claim –
   der Claim darüber behält seine Größe. Vorher bestand die H1 nur aus dem
   Claim und enthielt weder „Fußball“ noch den Ortsnamen (gemessen
   10.09.2026); nach dem Titel ist die H1 das stärkste Signal einer Seite.
   Chris am 10.09.2026: „gehe dafür die Startseite und auch die einzelnen
   Unterseiten durch.“ */
.hero-main__ort {
  display: block;
  margin-top: var(--sp-3);
  font-family: var(--font-sans);
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.25;
  font-size: var(--fs-lg);
  font-weight: 800;
  color: rgb(255 255 255 / .92);
}
.hero-main__lead { font-size: var(--fs-md); color: rgb(255 255 255 / .88); max-width: 54ch; margin-bottom: var(--sp-6); }
.hero-main .eyebrow { color: var(--accent); }
.hero__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.hero__facts { display: flex; gap: clamp(1.5rem, 3vw, 3.5rem); margin-top: clamp(1.75rem, 3vw, 3rem); flex-wrap: wrap; }
.hero__fact strong { display: block; font-family: var(--font-display); font-style: italic; font-size: var(--fs-xl); color: var(--accent); line-height: 1; }
.hero__fact span { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .12em; color: rgb(255 255 255 / .72); font-weight: 700; }
/* Zwei gestapelte Teaser rechts */
.hero-side { display: grid; grid-template-rows: 1fr 1fr; gap: 4px; }
.hero-tile { position: relative; overflow: hidden; display: block; min-height: 180px; }
.hero-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.hero-tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(2 27 15 / .9) 5%, rgb(2 27 15 / .25) 55%, rgb(0 154 68 / .2));
  transition: background .3s;
}
.hero-tile:hover img { transform: scale(1.06); }
.hero-tile:hover::after { background: linear-gradient(to top, rgb(0 106 48 / .92) 5%, rgb(2 27 15 / .3) 60%, rgb(0 154 68 / .25)); }
.hero-tile__label { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(1rem, 1.8vw, 1.75rem); color: #fff; }
.hero-tile__label b { display: block; font-family: var(--font-display); font-style: italic; text-transform: uppercase; font-size: var(--fs-lg); line-height: 1; }
.hero-tile__label span { font-size: var(--fs-xs); color: rgb(255 255 255 / .8); font-weight: 600; }
/* Diese beiden Bausteine fielen beim Umbau der Spielleiste versehentlich
   mit aus der Datei – Spielkarten samt Slider und die Cross-Teaser.
   Wieder eingesetzt am 19.08.2026, unverändert zum Stand davor. */
/* ---------- Cross-Teaser (eingefärbte Verlinkungen) ---------- */
.cross-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.75rem, 1.2vw, 1.25rem); }
/* Zweite Reihe „Wusstest du schon?“: fünf flachere Kacheln unter den vier großen,
   mit eigener Zwischenzeile, damit sie als eigenes Band gelesen wird. */
.cross-row__label { margin: clamp(1.5rem, 3vw, 2.5rem) 0 var(--sp-3); font-family: var(--font-display); font-style: italic; text-transform: uppercase; font-size: var(--fs-lg); line-height: 1.1; }
.cross-row__label span { display: block; font-family: inherit; font-style: normal; text-transform: none; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-700); letter-spacing: 0; margin-top: .25rem; }
.cross-row--themen { grid-template-columns: repeat(5, 1fr); }
.cross-row--themen .cross { min-height: clamp(180px, 15vw, 240px); }
.cross-row--themen .cross__body b { font-size: var(--fs-md); }
.cross {
  position: relative; display: flex; align-items: flex-end; overflow: hidden;
  min-height: clamp(220px, 20vw, 320px); border-radius: var(--radius);
  color: #fff; isolation: isolate;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.cross img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: transform .6s var(--ease); }
/* Lageplan statt Foto (Sportpark): die blasse Karte braucht mehr Kontrast,
   sonst bleibt unter der Einfärbung nur eine leere Fläche. */
.cross--plan img { filter: grayscale(1) contrast(1.35); }
.cross::after {
  content: ""; position: absolute; inset: 0; z-index: 1; mix-blend-mode: multiply;
  transition: opacity .3s; opacity: .92;
}
.cross::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgb(0 0 0 / .55), transparent 55%);
}
.cross[data-tint="a"]::after { background: var(--green-600); }
.cross[data-tint="b"]::after { background: var(--green-800); }
.cross[data-tint="c"]::after { background: #0E7C6B; }
.cross[data-tint="d"]::after { background: var(--green-700); }
.cross[data-tint="e"]::after { background: var(--green-900); }
.cross:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.cross:hover img { transform: scale(1.07); }
.cross:hover::after { opacity: .8; }
.cross__body { position: relative; z-index: 2; padding: clamp(1rem, 1.8vw, 1.75rem); display: grid; gap: .3rem; }
.cross__kicker { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .12em; font-weight: 800; color: rgb(255 255 255 / .8); }
.cross__body b { font-family: var(--font-display); font-style: italic; text-transform: uppercase; font-size: var(--fs-lg); line-height: 1; }
.cross__sub { font-size: var(--fs-sm); color: rgb(255 255 255 / .82); }
.cross__cta { margin-top: .5rem; font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; border-bottom: 2px solid rgb(255 255 255 / .5); justify-self: start; padding-bottom: 2px; transition: border-color .2s; }
.cross:hover .cross__cta { border-color: #fff; }
.nextmatch__crest--own { background: var(--green-900); color: #fff; }
.countdown { display: flex; gap: var(--sp-2); }
.countdown div { text-align: center; background: var(--surface-2); border-radius: var(--radius-sm); padding: .4rem .6rem; min-width: 3.1rem; }
.countdown b { display: block; font-family: var(--font-display); font-style: italic; font-size: var(--fs-md); line-height: 1; color: var(--green-700); }
.countdown span { font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-500); font-weight: 700; }
/* ---------- 6b Spiele-Slider ---------- */
.slider { position: relative; }
/* Flexbox statt Grid: mit fester flex-basis ist jede Karte exakt gleich breit –
   unabhängig davon, wie viele Karten ein Team-Tab gerade zeigt. Bei Grid mit
   1fr hätten drei Karten die Reihe gestreckt, bei fixem grid-auto-columns wäre
   rechts eine Lücke geblieben.
   Das oberzeilige Padding schafft Platz für den überstehenden Reiter
   „Nächstes Spiel“ – overflow-x: auto beschneidet sonst auch senkrecht. */
.slider__viewport {
  display: flex; gap: var(--sp-4);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-top: 1.35rem; padding-bottom: calc(var(--sp-4) + var(--schattenraum));
  scrollbar-width: none;
}
.slider__viewport::-webkit-scrollbar { display: none; }
/* Randlose Slider (Chris, 06.10.2026: „Apple-Style … sitzt beim Start im
   Raster, läuft dann aber nach links raus. Gilt für alle Slider.“).
   Der Scrollbereich reicht von Fensterrand zu Fensterrand, der Innenabstand
   --kante rückt die erste Karte zurück an die Inhaltskante, scroll-padding
   lässt sie dort einrasten. Voraussetzung: Der Slider steht direkt in .wrap
   – bei allen vier so, die Fotogalerie der Anfahrt (unten) ebenso. Die
   Karten bleiben gleich breit, weil 100 % in ihrer flex-basis weiterhin die
   Inhaltsbreite ist.
   Erst stand hier calc(50vw - 50%). Für margin und padding stimmt das, weil
   Prozent dort gegen den Behälter rechnen – bei scroll-padding rechnen sie
   aber gegen den Slider selbst, der fensterbreit ist. Ergebnis 0, und das
   Einrasten zog jede Reihe um die Kante zur Seite (gemessen: 37 px bei
   1400 px). Deshalb überall --kante, dann passen alle drei zusammen.
   Oben und unten bleibt der Schattenraum. body hat overflow-x: hidden. */
.slider__viewport, .news-row, .video-row, .team-row {
  margin-inline: calc(-1 * var(--kante));
  margin-bottom: calc(-1 * var(--schattenraum));
  padding-inline: var(--kante);
  scroll-padding-inline: var(--kante);
}
.slider__viewport > * { flex: 0 0 268px; }
@media (min-width: 1024px) { .slider__viewport > * { flex-basis: calc((100% - 3 * var(--sp-4)) / 4); }
}
@media (min-width: 1600px) { .slider__viewport > * { flex-basis: calc((100% - 4 * var(--sp-4)) / 5); }
}
.match {
  scroll-snap-align: start;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  display: flex; flex-direction: column;
  /* KEIN overflow: hidden. Der Reiter „Nächstes Spiel“ ragt bewusst über die
     Oberkante hinaus und wurde von der Karte abgeschnitten. Innen gibt es
     nichts zu beschneiden – die Wappen haben ihr eigenes overflow. */
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s;
}
.match:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--green-200); }
.match__comp {
  text-align: center; padding: .7rem 1rem .2rem;
  font-size: var(--fs-xs); font-weight: 700; color: var(--ink-500);
}
.match__grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5rem; padding: var(--sp-4) var(--sp-3); }
.match__team { display: grid; justify-items: center; gap: .5rem; text-align: center; }
.match__crest {
  width: 46px; height: 46px; border-radius: 50%; background: var(--surface-3);
  display: grid; place-items: center; font-family: var(--font-display); font-style: italic;
  font-size: .78rem; color: var(--ink-700);
}
.match__crest--own { background: var(--green-900); color: #fff; }
.match__team span { font-size: var(--fs-xs); font-weight: 700; line-height: 1.25; }
.match__center { text-align: center; padding-inline: .35rem; }
.match__score { font-family: var(--font-display); font-style: italic; font-size: var(--fs-lg); line-height: 1; }
.match__half { font-size: var(--fs-xs); color: var(--ink-500); }
.match__date { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-500); }
.match__time { font-family: var(--font-display); font-style: italic; font-size: var(--fs-md); line-height: 1.1; }
.match__foot { margin-top: auto; padding: .75rem; border-top: 1px solid var(--line); display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
.match--next { background: var(--green-600); border-color: var(--green-600); color: #fff; position: relative; }
.match--next .match__comp, .match--next .match__team span, .match--next .match__date { color: rgb(255 255 255 / .85); }
.match--next .match__crest { background: rgb(255 255 255 / .16); color: #fff; }
.match--next .match__crest--own { background: #fff; color: var(--green-700); }
.match--next .match__foot { border-top-color: rgb(255 255 255 / .2); }
.match__flag {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  background: var(--accent); color: var(--accent-ink); font-size: .62rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em; padding: .3rem .75rem; border-radius: 4px; white-space: nowrap;
  box-shadow: var(--shadow-sm);
}

/* ---------- Spielleiste unter dem Header ----------
   Eine Begegnung, kein Karussell. Es gibt keinen Zustand, der wechseln
   könnte, also kann auch nichts springen. Alles einzeilig und linksbündig:
   zentrierter Text richtet sich bei jeder Änderung neu aus, das war der
   sichtbare Fehler der alten Fassung. */
.mb { background: var(--green-700) var(--fill-flaeche-hell); color: #fff; }
/* Der Inhalt steht als Block in der Mitte, nicht über die volle Breite
   auseinandergezogen. Ein einspaltiges Raster mit `justify-content: center`
   macht die Spalte so breit wie ihr breitestes Kind und rückt sie mittig –
   Kopfzeile und Begegnung teilen sich dadurch dieselbe linke Kante, und in
   ihnen bleibt alles linksbündig. Zentrierter Text wäre wieder das Flattern
   von vorher; zentriert ist hier nur der Block, nicht die Zeile. */
.mb__inner {
  display: grid; justify-content: center; gap: clamp(.5rem, 1vw, .8rem);
  padding-block: clamp(1rem, 1.8vw, 1.5rem);
}
.mb__inner > * { max-width: 100%; }

/* Kopfzeile: was für ein Spiel das ist. */
.mb__head {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .15rem .6rem;
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.mb__label { color: var(--green-200); }
.mb__team  { color: #fff; }
.mb__comp  { color: rgb(255 255 255 / .55); font-weight: 700; letter-spacing: .1em; }
.mb__team::before, .mb__comp::before { content: "·"; margin-right: .6rem; color: rgb(255 255 255 / .35); }

/* Die Begegnung, der Termin, die Schaltflächen – drei feste Spalten. */
.mb__row {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .6rem clamp(1rem, 2vw, 2rem);
}
.mb__pair {
  display: flex; align-items: center; justify-content: flex-start;
  gap: clamp(.5rem, 1.4vw, 1.1rem); min-width: 0;
}
.mb__side { display: flex; align-items: center; gap: .7rem; min-width: 0; flex: 0 1 auto; }
.mb__name {
  font-size: clamp(1rem, .85rem + .5vw, 1.4rem); font-weight: 800; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mb__x { font-family: var(--font-display); font-style: italic; opacity: .5; }
.mb .mb__crest {
  width: clamp(36px, 3.2vw, 46px); height: clamp(36px, 3.2vw, 46px);
  background: rgb(255 255 255 / .16);
}
.mb .crest--own { background: #fff; }
.mb .crest--initials { color: #fff; }

/* Termin und Countdown rechtsbündig: der Text ändert seine Länge, die rechte
   Kante bleibt stehen. Ziffern mit fester Breite aus demselben Grund. */
/* Termin und Countdown in einer Zeile statt als zweizeiliger Block: Zwei
   rechtsbündige Zeilen unterschiedlicher Länge ergeben eine ausgefranste linke
   Kante direkt neben den Schaltflächen. Der Countdown sitzt jetzt als Pille
   hinter der Uhrzeit – gleiche Zeile, eigene Form, feste Ziffernbreiten. */
.mb__when {
  display: flex; align-items: baseline; gap: .5rem;
  white-space: nowrap; font-size: var(--fs-sm); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.mb__when b { font-family: var(--font-display); font-style: italic; font-size: var(--fs-md); }
.mb__cd {
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .04em; color: var(--accent);
  background: rgb(255 255 255 / .12); border-radius: 999px; padding: .2rem .7rem;
}
.mb__cd:empty { display: none; }
.mb__actions { display: flex; gap: .5rem; flex-wrap: nowrap; }

@media (max-width: 700px) {
  .mb__inner { justify-content: stretch; }
  .mb__row { flex-direction: column; align-items: flex-start; gap: .7rem; }
  .mb__pair { flex-direction: column; align-items: flex-start; gap: .45rem; }
  .mb__side { width: 100%; }
  .mb__x { display: none; }
  .mb__when { flex-wrap: wrap; white-space: normal; }
}

/* ---------- Zwei Spalten: Ergebnisse und Tabelle ----------
   Beides gehört zusammen gelesen. Ab 1280 px liegen sie nebeneinander; die
   linke Spalte hat eine Mindestbreite, weil das fussball.de-Widget unter
   560 px nicht schmaler wird. Darunter wird gestapelt, Ergebnisse zuerst.
   Nebeneinander zeigt die Tabelle nur noch Spiele und Punkte – für S/U/N,
   Tore und Differenz ist in einer halben Spalte kein Platz, und wer sie
   sucht, findet sie unter „Alle Tabellen“. */
.duo { display: grid; gap: clamp(1.5rem, 3vw, 2.75rem); align-items: start; }
.duo__col { min-width: 0; }
.duo__title {
  font-family: var(--font-display); font-style: italic; text-transform: uppercase;
  font-size: var(--fs-lg); line-height: 1.1;
}
.duo__sub { color: var(--ink-500); font-size: var(--fs-xs); margin: .2rem 0 var(--sp-3); }

@media (min-width: 1280px) {
  .duo--two { grid-template-columns: minmax(600px, 1fr) minmax(0, 1fr); }
  .duo--two .ltable .opt { display: none; }
  .duo--two .ltable__team { min-width: 9rem; }
}

/* ---------- fussball.de-Widget ----------
   Das Widget liegt in einem Iframe, sein Inneres erreicht unser Stylesheet
   nicht (Same-Origin-Policy). Gestaltbar ist der Rahmen darum: Karte, Radius,
   Schatten – dieselben Werte wie bei den Spielkarten, damit der Abschnitt
   nicht wie ein Fremdkörper wirkt. Farben und Breite des Widgets selbst
   kommen aus dem Widget-Center von fussball.de.

   Unter 560 px zeigt fussball.de das Widget nicht schmaler an, deshalb darf
   der Rahmen waagerecht scrollen statt den Inhalt abzuschneiden. */
.fbde {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  overflow-x: auto; overflow-y: hidden;
}
.fbde iframe { display: block; width: 100%; min-width: 560px; border: 0; background: var(--surface); }
.fbde__ask {
  display: grid; gap: var(--sp-3); justify-items: center; text-align: center;
  padding: clamp(2rem, 5vw, 3.25rem) var(--sp-4); background: var(--surface-2);
}
.fbde__lead { font-family: var(--font-display); font-style: italic; font-size: var(--fs-lg); line-height: 1.1; }
.fbde__note { color: var(--ink-500); font-size: var(--fs-sm); max-width: 52ch; }
.fbde__source { margin-top: var(--sp-3); text-align: center; font-size: var(--fs-xs); color: var(--ink-500); }

/* ---------- Reiter „Unsere Ansicht“: Spielkarten der Woche ----------
   Dieselbe Karte wie im Spiel-Slider, hier im Raster statt in der Reihe.
   Mindestbreite 250px: in der halben Spalte zwei nebeneinander, gestapelt auf
   voller Breite drei bis vier. Das obere Polster gehört dem Reiter „Nächstes
   Spiel“, der über die Kartenkante hinausragt. */
.match-grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  padding-top: 1.35rem;
}
.match__played { font-family: var(--font-display); font-style: italic; font-size: var(--fs-md); line-height: 1.1; color: var(--ink-500); }
.match__muted { font-size: var(--fs-xs); color: var(--ink-500); }

.slider__nav { display: flex; gap: var(--sp-2); }
.slider__btn {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface); display: grid; place-items: center; cursor: pointer;
  transition: background-color .18s, color .18s, border-color .18s, opacity .18s;
}
.slider__btn:hover:not(:disabled) { background: var(--green-500); border-color: var(--green-500); color: #fff; }
.slider__btn:disabled { opacity: .35; cursor: not-allowed; }
.slider__btn svg { width: 18px; height: 18px; }
/* ---------- 6c News ---------- */
/* News laufen in genau einer Reihe waagerecht – nie zweizeilig. Gleiche
   flex-basis wie bei den Spielen, damit alle Karten exakt gleich breit sind. */
.news-row {
  display: flex; gap: clamp(1rem, 1.4vw, 1.6rem);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-block: var(--schattenraum) calc(var(--sp-3) + var(--schattenraum)); scrollbar-width: none;
  margin-top: calc(-1 * var(--schattenraum));
}
.news-row::-webkit-scrollbar { display: none; }
.news-row > * { flex: 0 0 280px; scroll-snap-align: start; }
@media (min-width: 1024px) { .news-row > * { flex-basis: calc((100% - 3 * clamp(1rem, 1.4vw, 1.6rem)) / 4); }
}
@media (min-width: 1600px) { .news-row > * { flex-basis: calc((100% - 4 * clamp(1rem, 1.4vw, 1.6rem)) / 5); }
}
.news-card {
  display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s;
}
.news-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--green-200); }
.news-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-3); }
.news-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.news-card:hover .news-card__media img { transform: scale(1.06); }
.news-card__cat { position: absolute; left: 0; bottom: 0; }
.news-card__body { padding: clamp(1rem, 1.4vw, 1.5rem); display: flex; flex-direction: column; flex: 1; gap: .6rem; }
/* In der Kachel ist die Spalte schmal und die Überschrift kommt aus dem
   Editor: „Jugendpräsentationstag" ist allein breiter als die Kachel. Statt
   das Wort hart zu zerschneiden, trennt es die Silbentrennung mit Strich –
   dieselben Werte wie bei den Mannschaftskacheln (.team-tile__body b): erst
   ab sechs Zeichen, mindestens vier davor, drei danach. */
.news-card__title {
  font-size: var(--fs-md); line-height: 1.2;
  hyphens: auto; hyphenate-limit-chars: 6 4 3;
}
.news-card:hover .news-card__title { color: var(--green-700); }
.news-card__teaser { font-size: var(--fs-sm); color: var(--ink-500); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-card__date { margin-top: auto; padding-top: .6rem; font-size: var(--fs-xs); color: var(--ink-500); font-weight: 600; }   /* ink-300 hielt auf Weiß nur 2,6:1 (Testlauf 07.11.2026) */
/* Übersichtskacheln (card-post.php): Datum über der Überschrift, unten
   „Weiterlesen“. Die Startseite (news.php) behält das Datum unten. */
.news-card__datum { font-size: var(--fs-xs); color: var(--ink-500); font-weight: 600; margin-bottom: -.3rem; }
.news-card__mehr { margin-top: auto; align-self: flex-start; color: var(--green-700); }

/* Eigenwerbung als letzte Kachel (fsv_eigenkachel() in inc/ads.php). Von der
   Karte daneben erbt sie nur die Hülle (Breite, Rundung, Rand), innen hat sie
   einen eigenen Aufbau – Chris am 07.10.2026: volltonfarben, damit „ganz klar
   ist, dass das eine Sonderkachel ist“, die Fahne in der Ecke statt am Bild,
   ein richtiger Knopf statt „Weiterlesen“. Wappen oben, Aussage unten wie auf
   einem Plakat. Weiß auf green-700 misst 7,2 : 1.
   Die Mindesthöhe gleicht etwa einer Beitragskarte: Steht die Kachel allein
   in der letzten Reihe, soll sie nicht gestaucht wirken. */
.eigenkachel.news-card, .eigenkachel.vid-karte {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-5);
  min-height: 24rem; padding: var(--sp-6) var(--sp-5) var(--sp-5);
  background: var(--green-700) var(--fill-flaeche-hell); border-color: var(--green-700); color: #fff;
}
.eigenkachel__fahne {
  position: absolute; top: 0; right: 0;
  padding: .45rem .85rem; border-bottom-left-radius: var(--radius-sm);
  background: var(--accent); color: var(--accent-ink);
  font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
}
.eigenkachel__wappen { width: clamp(56px, 18%, 76px); height: auto; }
.eigenkachel__logofeld {
  display: grid; place-items: center; width: 9.5rem; aspect-ratio: 3 / 1;
  border: 2px dashed rgb(255 255 255 / .6); border-radius: var(--radius-sm);
  font-weight: 700; font-size: var(--fs-sm); letter-spacing: .02em;
}
.eigenkachel__text { margin-top: auto; display: grid; gap: var(--sp-2); }
.eigenkachel__zeile { font-size: var(--fs-xs); font-weight: 700; color: rgb(255 255 255 / .8); }
.eigenkachel__titel {
  font-family: var(--font-display); font-style: italic; text-transform: uppercase;
  font-size: var(--fs-lg); line-height: 1.02; letter-spacing: .01em; color: #fff;
  /* Ohne Silbentrennung: Die Überschriften sind kurz und fest, „Unterneh-men“
     in Versalien las sich schlecht. */
  hyphens: manual; overflow-wrap: break-word;
}
.eigenkachel__satz { font-size: var(--fs-sm); line-height: 1.55; color: rgb(255 255 255 / .9); }
/* Der Knopf ist der einzige Link; sein ::after legt sich über die ganze
   Kachel, also reagiert er auch, wenn man irgendwo auf die Kachel zeigt. */
.eigenkachel__knopf::after { content: ""; position: absolute; inset: 0; }
.eigenkachel:hover .eigenkachel__knopf { background: var(--accent-600) var(--fill-accent-hover); box-shadow: var(--fill-kante), var(--shadow); }
.eigenkachel__knopf:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ---------- 6d Heimspiel-Modul (früher „Störer") ----------
   Vorher war das ein reiner Bild-Teaser mit großer Headline und ohne Nutzen.
   Jetzt trägt die rechte Seite echte Termine, die Headline ist zurückgenommen. */
.homegames {
  display: grid; grid-template-columns: 1fr 1.05fr;
  overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--line);
}
.homegames__media { position: relative; min-height: 100%; }
.homegames__media img { width: 100%; height: 100%; object-fit: cover; }
.homegames__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, rgb(2 27 15 / .78), rgb(0 106 48 / .28));
}
.homegames__caption {
  position: absolute; left: clamp(1.25rem, 2.4vw, 2.25rem); bottom: clamp(1.25rem, 2.4vw, 2rem); z-index: 2;
  color: #fff; font-family: var(--font-display); font-style: italic; text-transform: uppercase;
  font-size: var(--fs-md); line-height: 1;
}
.homegames__caption em { display: block; font-style: italic; color: var(--accent); }
.homegames__panel {
  background: var(--surface); padding: clamp(1.5rem, 2.6vw, 2.5rem);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.homegames__title { font-size: var(--fs-lg); }
.homegames__list { display: grid; gap: .5rem; margin-top: var(--sp-2); }
.homegames__list li { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .85rem; padding: .5rem 0; border-bottom: 1px solid var(--line); }
.homegames__list li:last-child { border-bottom: 0; }
.homegames__date { width: 52px; text-align: center; background: var(--green-900) var(--fill-dunkel); color: #fff; border-radius: var(--radius-sm); padding: .35rem .2rem; }
.homegames__date b { display: block; font-family: var(--font-display); font-style: italic; font-size: var(--fs-md); line-height: 1; }
.homegames__date span { font-size: .58rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--green-200); }
.homegames__info b { display: block; font-size: var(--fs-sm); font-weight: 800; line-height: 1.3; }
.homegames__info span { display: block; font-size: var(--fs-xs); color: var(--ink-500); }
.homegames__note { font-size: var(--fs-xs); color: var(--ink-500); }
.homegames .link-more { color: var(--green-700); }
/* Einladung: Wer die Termine gelesen hat, sucht als Nächstes den Weg zum
   Platz. Adresse, Navi-Warnung und Route stehen deshalb im selben Kasten wie
   die Spiele – nicht erst auf /anfahrt/. Ruhige Fläche, keine Kante links. */
.homegames__einladung {
  display: grid; gap: .45rem;
  padding: clamp(.9rem, 1.4vw, 1.2rem);
  background: var(--surface-2); border-radius: var(--radius);
}
.homegames__welcome { font-size: var(--fs-sm); font-weight: 700; line-height: 1.45; }
.homegames__ort {
  display: flex; gap: .5rem; font-style: normal;
  font-size: var(--fs-xs); color: var(--ink-500); line-height: 1.5;
}
.homegames__ort svg { width: 1.15em; height: 1.15em; flex: 0 0 auto; margin-top: .15em; color: var(--green-700); }
.homegames__ort b { color: var(--ink-700); }
.homegames__ort em { display: block; font-style: normal; color: var(--ink-300); }
.homegames__actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .75rem var(--sp-4); margin-top: auto;
}
/* ---------- 6e Videos: eine scrollbare Reihe, das neueste größer ---------- */
.video-row {
  /* Eine Basisbreite für alle Karten, damit die hervorgehobene daraus
     berechnet werden kann und das Verhältnis auf jeder Breite gleich bleibt. */
  --vid-w: clamp(240px, 21vw, 340px);
  --vid-lead: 1.1;                       /* hervorgehobene Karte: 110 % */

  display: flex; gap: clamp(.75rem, 1.2vw, 1.25rem);
  /* 'center' statt des Standards 'stretch': stretch würde alle Karten auf die
     Höhe der größten ziehen und aspect-ratio überschreiben (die übrigen Videos
     wären quadratisch). Zentriert sitzt die größere Karte mittig zu den anderen. */
  align-items: center;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-block: calc(var(--sp-2) + var(--schattenraum)) calc(var(--sp-3) + var(--schattenraum)); scrollbar-width: none;
  margin-top: calc(-1 * var(--schattenraum));
}
.video-row::-webkit-scrollbar { display: none; }
.video-card {
  position: relative; display: block; overflow: hidden; border-radius: var(--radius);
  background: var(--green-950); scroll-snap-align: start;
  flex: 0 0 var(--vid-w); aspect-ratio: 16 / 9;   /* immer Querformat */
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.video-card--lead { flex-basis: calc(var(--vid-w) * var(--vid-lead)); }
/* Rahmen als Overlay, nicht als border/outline: im waagerecht scrollenden
   Container würde ein outline beschnitten, ein inset-Schatten läge unter dem Bild. */
.video-card--lead::after {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  border: 3px solid var(--accent); border-radius: inherit;
}
.video-card--lead .video-card__bar { display: none; }
/* Rahmen ersetzt den Balken */
.video-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.video-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.video-card:hover img { transform: scale(1.05); }

/* Dunkelgrüner Verlauf von unten über das ganze Vorschaubild.
   Nötig, weil YouTube-Vorschaubilder häufig selbst schon Text und helle
   Flächen enthalten – ohne diese Basis wäre unsere weiße Beschriftung je
   Video unterschiedlich gut lesbar. Der Verlauf hält den unteren Bereich
   verlässlich dunkel und zieht das Bild farblich ins Vereinsgrün. */
.video-card::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* Stopps so gesetzt, dass die gesamte Beschriftung im dunklen Bereich liegt.
     Gemessen: der Titel beginnt rund 35 % über der Unterkante, deshalb bleibt
     der Verlauf bis 45 % nahezu deckend. */
  /* Dasselbe Streifenmotiv wie bei „Mitglied werden“ und der Clubkarte –
     115 Grad, sehr leise. Es liegt über dem Verlauf und reicht nur bis in die
     untere Bildhälfte: oben würde es auf hellen Vorschaubildern auffallen,
     unten legt es sich auf die ohnehin dunkle Fläche. */
  background:
    repeating-linear-gradient(115deg, rgb(255 255 255 / .05) 0 3px, transparent 3px 20px),
    linear-gradient(to top,
      rgb(2 27 15 / .97) 0%,
      rgb(2 27 15 / .93) 30%,
      rgb(3 38 21 / .86) 45%,
      rgb(4 48 26 / .55) 62%,
      rgb(4 48 26 / .28) 80%,
      rgb(4 48 26 / .14) 100%);
  background-size: 100% 72%, 100% 100%;
  background-position: bottom, center;
  background-repeat: no-repeat, no-repeat;
  transition: opacity .3s;
}
.video-card:hover::before { opacity: .92; }
.video-card__bar { position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--accent); z-index: 3; }
.video-card__play {
  position: absolute; inset: 0; margin: auto; width: clamp(42px, 3.6vw, 54px); height: clamp(42px, 3.6vw, 54px);
  background: var(--green-600) var(--fill-green); border-radius: var(--radius-sm); display: grid; place-items: center; z-index: 3;
  transition: transform .22s var(--ease), background-color .22s;
}
.video-card:hover .video-card__play { transform: scale(1.12); background: var(--accent) var(--fill-accent); color: var(--accent-ink); }
.video-card__play svg { width: 45%; height: 45%; color: #fff; }
.video-card:hover .video-card__play svg { color: var(--accent-ink); }
.video-card__label {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: clamp(.7rem, 1.2vw, 1.15rem); color: #fff;
}
.video-card__label b { font-family: var(--font-display); font-style: italic; text-transform: uppercase; font-size: var(--fs-sm); line-height: 1.05; display: block; }
.video-card--lead .video-card__label b { font-size: var(--fs-base); }
.video-card__label span { font-size: var(--fs-xs); color: rgb(255 255 255 / .75); }
/* ---------- 6f Fakten ---------- */
.split { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(2rem, 3.5vw, 4.5rem); align-items: start; }
/* ---------- 6g Teams: Mannschaftsfoto im Hintergrund, gestaffelte Grüntöne ---------- */
/* Waagerechter Slider statt Raster: Der Verein hat über zwanzig Mannschaften.
   Als Raster wären das vier hohe Reihen, die den Rest der Startseite nach
   unten drücken; als Slider bleibt es eine Reihe, und der Filter darüber
   kürzt sie auf die gesuchte Altersgruppe. */
.team-row {
  display: flex; gap: clamp(.75rem, 1.2vw, 1.25rem);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-block: var(--schattenraum) calc(var(--sp-3) + var(--schattenraum)); scrollbar-width: none;
  margin-top: calc(-1 * var(--schattenraum));
}
.team-row::-webkit-scrollbar { display: none; }
.team-row > * { flex: 0 0 165px; scroll-snap-align: start; }
@media (min-width: 768px)  { .team-row > * { flex-basis: calc((100% - 3 * clamp(.75rem, 1.2vw, 1.25rem)) / 4); }
}
@media (min-width: 1024px) { .team-row > * { flex-basis: calc((100% - 4 * clamp(.75rem, 1.2vw, 1.25rem)) / 5); }
}
@media (min-width: 1440px) { .team-row > * { flex-basis: calc((100% - 5 * clamp(.75rem, 1.2vw, 1.25rem)) / 6); }
}
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: clamp(.75rem, 1.2vw, 1.25rem); }
.team-tile {
  position: relative; display: flex; align-items: flex-end; isolation: isolate;
  min-height: clamp(150px, 12vw, 200px); padding: clamp(.85rem, 1.3vw, 1.35rem);
  border-radius: var(--radius); overflow: hidden; color: #fff;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.team-tile img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.06);
  transition: transform .6s var(--ease);
}
/* Grünton je Kachel: multiply legt die Farbe über das entsättigte Foto und
   hält alles in einer Familie, statt sechs bunte Bilder nebeneinander zu zeigen. */
.team-tile::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  mix-blend-mode: multiply; opacity: .93; transition: opacity .3s;
}
.team-tile[data-shade="1"]::before { background: var(--green-600); }
.team-tile[data-shade="2"]::before { background: var(--green-700); }
.team-tile[data-shade="3"]::before { background: var(--green-800); }
.team-tile[data-shade="4"]::before { background: #0E7C6B; }
.team-tile[data-shade="5"]::before { background: var(--green-900); }
.team-tile[data-shade="6"]::before { background: #1F4A3A; }
/* Zweite Ebene für Lesbarkeit der Schrift am unteren Rand */
.team-tile::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to top, rgb(2 27 15 / .72), transparent 62%);
}
/* Mannschaften ohne eigenes Foto: farbige Fläche mit feinem Streifenmuster
   statt des Fotos einer anderen Mannschaft. multiply braucht ein Bild darunter,
   sonst bliebe die Kachel weiß – deshalb legt ::before hier deckend auf, und
   das Muster kommt als zweite Lage in ::after dazu. */
.team-tile--plain::before { mix-blend-mode: normal; opacity: 1; }
.team-tile--plain::after {
  background:
    linear-gradient(to top, rgb(2 27 15 / .72), transparent 62%),
    repeating-linear-gradient(135deg, rgb(255 255 255 / .06) 0 10px, transparent 10px 24px);
}
/* Anfangs nur Kacheln mit Foto; die übrigen holt die Kachel „+N weitere“
   oder ein Filter-Chip herein (main.js nimmt den Modifikator vom Slider). */
.team-row--nur-fotos .team-tile--plain:not(.team-tile--mehr) { display: none; }
.team-tile--mehr { appearance: none; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.team-tile--mehr:focus-visible { outline: 3px solid var(--green-500); outline-offset: 3px; }
.team-tile:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.team-tile:hover img { transform: scale(1.07); }
.team-tile:hover::before { opacity: .82; }
.team-tile__body { position: relative; z-index: 3; display: grid; gap: .15rem; }
/* hyphenate-limit-chars: „Gymnastikgruppe“ brach als GYMNASTIKGRUP-PE um und
   ließ zwei Buchstaben allein in der zweiten Zeile – gemessen am 07.09.2026
   auf /teams/. Die Werte erlauben die Trennung erst ab sechs Zeichen und
   verlangen vier davor und drei danach, also GYMNASTIK-GRUPPE. */
.team-tile__body b { font-family: var(--font-display); font-style: italic; text-transform: uppercase; font-size: var(--fs-md); line-height: 1; hyphens: auto; hyphenate-limit-chars: 6 4 3; overflow-wrap: anywhere; }
.team-tile__body span { font-size: var(--fs-xs); color: rgb(255 255 255 / .85); font-weight: 700; }
.team-tile__arrow { position: absolute; top: 1rem; right: 1rem; z-index: 3; width: 26px; height: 26px; opacity: .6; transition: opacity .2s, transform .2s var(--ease); }
.team-tile:hover .team-tile__arrow { opacity: 1; transform: translate(3px, -3px); }
/* ---------- 6h Social ---------- */
/* Social läuft wie News und Spiele in genau einer Reihe waagerecht. */
/* ---------- 6j Footer: hell und aufgeräumt ---------- */
.site-footer { background: var(--surface); color: var(--ink-700); border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.footer__main {
  display: grid; grid-template-columns: 1fr 1fr 1fr auto;
  gap: clamp(1.5rem, 3vw, 4rem); padding-block: clamp(2.5rem, 4vw, 4rem);
}
.site-footer h3 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .12em; color: var(--ink); margin-bottom: var(--sp-4); }
.footer__list { display: grid; gap: .7rem; }
.footer__list a { transition: color .16s; }
.footer__list a:hover { color: var(--green-600); }
.footer__address { font-style: normal; line-height: 1.7; }
.footer__col--actions { display: grid; gap: var(--sp-5); align-content: start; justify-items: end; }
.footer__social { display: flex; gap: .6rem; }
.footer__social a {
  width: 40px; height: 40px; border-radius: 50%; background: var(--green-600) var(--fill-green); color: #fff;
  display: grid; place-items: center; transition: background-color .18s, transform .18s var(--ease);
}
.footer__social a:hover { background: var(--green-500); transform: translateY(-2px); }
.footer__social svg { width: 19px; height: 19px; }
.footer__buttons { display: grid; gap: .6rem; justify-items: stretch; }
.footer__bottom {
  border-top: 1px solid var(--line); padding-block: var(--sp-5);
  display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap;
  font-size: var(--fs-xs); color: var(--ink-500);
}
.footer__legal { display: flex; gap: var(--sp-5); flex-wrap: wrap; }
.footer__legal a:hover { color: var(--green-600); }
.footer__copy { margin-left: auto; }
/* Die Zeile der Agentur ganz unten. Kleiner als alles darüber, aber
   ink-500 statt ink-300: Auf Weiß hält das 5,9:1, ink-300 nur 2,6:1. */
.footer__credit {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  padding-block: 0 var(--sp-5); font-size: .75rem; color: var(--ink-500);
}
.footer__credit a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.footer__credit a:hover { color: var(--green-600); }
.footer__herz { color: var(--ink-700); }
/* Der Chat-Knopf liegt fest unten rechts über der Seite. Damit er am Seitenende
   nicht das Wappen und den Copyright-Text verdeckt, lässt der Footer ihm
   unten Platz – aber nur, wenn es ihn gibt (im Backend abschaltbar). */
.site-footer:has(+ .chat-launcher) { padding-bottom: var(--chat-clearance); }
/* ---------- 7 Breakpoints ---------- */
@media (max-width: 1460px) {
  /* Mit „Sponsor werden" ist die Navigation rund 100px breiter geworden.
     Bis 1440px passt sie mit Wortmarke gerade so; darunter (und mit
     Windows-Rollbalken) weicht die Wortmarke, das Wappen bleibt. */
.brand__text { display: none; }
.main-nav__link { padding-inline: .55rem; font-size: var(--fs-xs); }
}
@media (max-width: 1200px) {
  :root { --header-h: 68px; }
.split { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
  /* Ab hier: Burger-Navigation statt Mega-Menü */
  .main-nav { display: none; }
.burger { display: grid; place-items: center; }
  /* Der Burger sitzt immer außen rechts. Ohne diese Zeile klebt er neben dem
     Logo, weil die Suche darüber ausgeblendet ist und ihren auto-Rand verliert. */
  .header__actions { margin-left: auto; }
.brand__text { display: flex; }
.footer__main { grid-template-columns: 1fr 1fr; }
.mobile-nav {
    display: block; position: fixed; inset: 0 0 0 auto; width: min(420px, 100%);
    background: var(--surface); z-index: 150; overflow-y: auto;
    transform: translateX(100%); transition: transform .3s var(--ease);
    box-shadow: var(--shadow-lg);
  }
.mobile-nav[data-open="true"] { transform: translateX(0); }
.mobile-nav__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); z-index: 2; }
.mobile-nav__body { padding: var(--sp-5); }
.m-acc { border-bottom: 1px solid var(--line); }
.m-acc__btn {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    padding: 1rem 0; background: none; border: 0; cursor: pointer;
    font-family: var(--font-display); font-style: italic; text-transform: uppercase;
    font-size: var(--fs-md); text-align: left;
  }
.m-acc__btn svg { width: 1rem; height: 1rem; color: var(--green-600); transition: transform .22s var(--ease); flex-shrink: 0; }
.m-acc__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.m-acc__panel { display: none; padding-bottom: var(--sp-4); }
.m-acc__panel[data-open="true"] { display: block; }
.m-acc__group + .m-acc__group { margin-top: var(--sp-4); }
.m-acc__grouptitle { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .12em; color: var(--green-600); font-weight: 800; margin-bottom: var(--sp-2); }
.m-acc__panel a { display: block; padding: .55rem .75rem; margin-inline: -.75rem; border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: 600; }
.m-acc__panel a:hover { background: var(--green-50); color: var(--green-700); }
.m-acc__panel a.m-acc__cta { display: inline-block; margin-top: .35rem; margin-inline: 0; padding: .5rem 1rem; border-radius: 999px; background: var(--green-600) var(--fill-green); box-shadow: var(--fill-kante); color: #fff; }
.m-acc__panel a.m-acc__cta:hover { background: var(--green-700) var(--fill-green-hover); color: #fff; }
.m-acc__panel a.m-acc__cta--akzent { display: inline-flex; align-items: center; gap: .4rem; background: var(--accent) var(--fill-accent); color: var(--green-950); font-weight: 700; }
.m-acc__panel a.m-acc__cta--akzent:hover { background: var(--green-950); color: #fff; }
.m-acc__panel a.m-acc__cta svg { width: 1em; height: 1em; }
.mobile-nav__cta { margin-top: var(--sp-5); display: grid; gap: var(--sp-3); }
.mobile-nav__social { display: flex; gap: var(--sp-3); margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.mobile-nav__social a { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; }
.mobile-nav__social a:hover { background: var(--green-500); color: #fff; border-color: var(--green-500); }
.mobile-nav__social svg { width: 19px; height: 19px; }
.nav-overlay { position: fixed; inset: 0; background: rgb(2 27 15 / .55); z-index: 140; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.nav-overlay[data-open="true"] { opacity: 1; visibility: visible; }
body.nav-open { overflow: hidden; }
}
@media (max-width: 768px) {
  /* Auf dem Handy bleibt von der Servicezeile nur der hervorgehobene Punkt
     (Anfahrt zum Sportpark) neben Fanshop und Instagram. Chris, 07.11.2026:
     Der Weg zum Platz muss im Kopf stehen, weil sich Gastmannschaften oft
     verfahren. Die anderen Links stehen im Burger-Menü. */
  .topbar__links > li:not(.hervorheben) { display: none; }
.topbar__inner { gap: var(--sp-3); }
.topbar__right { gap: var(--sp-2); }
.topbar__hl, .topbar__links .hervorheben > a { white-space: nowrap; }
.footer__main { grid-template-columns: 1fr; }
.section-head { flex-direction: column; align-items: flex-start; }
.hero__facts { gap: var(--sp-5); }
}
@media (max-width: 400px) {
  /* Schmale Handys: nur das erste Wort, „Anfahrt“ – drei Knöpfe in einer Zeile. */
  .topbar__hl-mehr { display: none; }
}
@media (max-width: 560px) {
  .hero__actions .btn, .join__actions .btn { flex: 1 1 100%; }
.team-grid { grid-template-columns: 1fr 1fr; }
.brand__claim { display: none; }
  /* Der Vereinsname ist in einer Zeile gut 300px breit. Ohne Schrumpfen schob
     er den Menüknopf auf dem Handy rechts aus dem Bild, die Seite wurde 429
     statt 390px breit. So bricht er an der vorgesehenen Stelle um. */
.brand { flex-shrink: 1; min-width: 0; }
}
/* ---------- 8 Utilities ---------- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }
/* =============================================================
   9 Ergänzungen: Header-Suche · Tabs · Filter · Anzeigen ·
                  Newsletter · Reveal
   ============================================================= */

/* ---------- Header-Suche (immer sichtbar ab 1024px) ---------- */
/* Suche: ohne Füllfarbe, nur eine feine Kontur. Sie sitzt mittig im freien
   Raum zwischen Logo und Navigation – margin-inline: auto zentriert das
   Element im Flex-Rest, unabhängig davon, wie breit Logo und Navigation sind. */
.header-search {
  position: relative; display: flex; align-items: center;
  background: transparent; border: 1.5px solid var(--line);
  border-radius: 999px; padding-left: .85rem;
  margin-inline: auto;
  transition: border-color .2s var(--ease), box-shadow .2s;
  /* Wunschbreite; darf bis auf den Mindestwert schrumpfen, damit die
     Navigation daneben in einer Zeile bleibt. */
  width: clamp(200px, 26vw, 480px); min-width: 160px; flex-shrink: 1;
}
.header-search:focus-within { border-color: var(--green-600); box-shadow: 0 0 0 4px var(--green-50); }
.header-search__icon { width: 18px; height: 18px; color: var(--ink-500); flex-shrink: 0; }
.header-search:focus-within .header-search__icon { color: var(--green-600); }
.header-search input[type="search"] {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  padding: .7rem .9rem .7rem .55rem; font-size: var(--fs-sm); font-weight: 600;
}
.header-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
/* ---------- Tabs (Team-Auswahl über den Spielen) ---------- */
.tabs { display: flex; gap: clamp(.5rem, 1.5vw, 1.75rem); align-items: center; flex-wrap: wrap;
        border-bottom: 1px solid var(--line); margin-bottom: var(--sp-5); }
.tab {
  position: relative; background: none; border: 0; cursor: pointer;
  padding: .75rem .25rem 1rem; font-size: var(--fs-sm); font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em; color: var(--ink-500);
  transition: color .18s;
}
.tab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: var(--green-500); border-radius: 2px 2px 0 0; transform: scaleX(0);
  transition: transform .22s var(--ease);
}
.tab:hover { color: var(--ink); }
.tab.is-active { color: var(--green-700); }
.tab.is-active::after { transform: scaleX(1); }
/* Der siebte Reiter über den Tabellen: „Weitere Tabellen“ als Auswahlliste
   mit allen Mannschaften ab der siebten (spielbetrieb-tabelle.php), in
   derselben Leiste und Schrift. Eine Auswahlliste kann kein ::after, deshalb
   kommt die Linie des aktiven Reiters hier als Hintergrund unter den Text. */
.tab--mehr {
  appearance: none; -webkit-appearance: none; border-radius: 0; font-family: inherit; line-height: inherit;
  padding-inline-end: 1.5rem; max-width: 100%; white-space: nowrap;
  /* So breit wie der gewählte Eintrag, nicht wie der längste („U6
     Fußball-Kindergarten“). Firefox kennt das noch nicht und bleibt breit. */
  field-sizing: content;
  background:
    linear-gradient(var(--green-500), var(--green-500)) left bottom / 0 3px no-repeat,
    no-repeat right .1rem center / .95rem
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6A61' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.tab--mehr.is-active { background-size: 100% 3px, .95rem; }
.tab--mehr:focus-visible { outline: 3px solid var(--green-600); outline-offset: 2px; }
.tab--mehr option { text-transform: none; letter-spacing: normal; font-weight: 600; color: var(--ink); }
/* ---------- Filter-Chips ----------
   Größe gilt für jeden Filter der Website – Chris am 07.09.2026: „bitte die
   filter nochmal wieder größer. wir müssen ja wcag konform sein und da ist
   echt klein … gilt für alle filter“. Deshalb Fließtextgröße und mindestens
   44 Pixel Höhe (WCAG 2.5.5 Zielgröße), hier an der Wurzel und nicht je
   Seite. Varianten dürfen Farbe und Gewicht ändern, nicht die Größe.
   Am 24.09.2026 die Schrift 2 Pixel unter die Fließtextgröße („die typo
   könnte auch 2px kleiner“) – die 44 Pixel Zielfläche bleiben. */
.filter-bar { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: clamp(1.25rem, 2vw, 2rem); }
.filter-chip {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 2.75rem;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 999px;
  padding: .55rem 1.15rem; font-size: calc(var(--fs-base) - 2px); font-weight: 700; line-height: 1.2; cursor: pointer;
  transition: background-color .18s, color .18s, border-color .18s, transform .18s var(--ease);
}
.filter-chip:hover { border-color: var(--green-500); color: var(--green-700); transform: translateY(-1px); }
.filter-chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.filter-chip__n { color: var(--ink-300); font-variant-numeric: tabular-nums; margin-left: .1rem; }
.filter-chip.is-active .filter-chip__n { color: rgb(255 255 255 / .6); }
/* Im Newsarchiv sind die Chips Verweise, keine Knöpfe: 529 Beiträge liegen
   auf zwanzig Seiten, da muss der Filter die Abfrage stellen statt im
   Browser auszublenden. Ein <a> bringt Unterstreichung und Linkfarbe mit –
   beides muss weg, sonst sieht dieselbe Schaltfläche zweimal anders aus. */
a.filter-chip { text-decoration: none; color: inherit; }
a.filter-chip.is-active { color: #fff; }

/* ---------- Newsarchiv: die kompakte Leiste ----------

   Vierzehn gleich große, gleich weiße Pillen in zwei Reihen lasen sich als
   Fläche, nicht als Auswahl (Chris am 07.09.2026: „die Darstellung muss etwas
   variieren, damit es nicht zu gleich aussieht. evtl auch etwas kleiner?").
   Deshalb zwei Gewichte statt einem und ein Haarstrich zwischen Mannschaft
   und Thema. Das „kleiner“ ist am selben Tag zurückgenommen: Die Chips waren
   mit 12 Pixel Schrift nicht barrierefrei – „da ist echt klein“. Größe und
   Zielfläche kommen seitdem aus .filter-chip, hier ändert sich nur der Ton.

   Die Mannschaften tragen Grün, weil sie die andere Frage stellen – „wer?“
   statt „worum geht es?“. Es sind nur drei; sie stehen vorn und dürfen die
   kräftigeren sein. */
.filter-bar--kompakt { gap: .45rem; align-items: center; margin-top: var(--sp-4); }
.filter-bar--kompakt .filter-chip { font-weight: 600; }
.filter-bar--kompakt .filter-chip__n { font-size: .85em; margin-left: .1rem; }

/* Mannschaft: grüner Rand, grüne Schrift, halbfett. */
.filter-bar--kompakt .filter-chip--team {
  border-color: var(--green-500); color: var(--green-700); font-weight: 800;
}
.filter-bar--kompakt .filter-chip--team .filter-chip__n { color: var(--green-500); }

/* „Alle“ bleibt der Ausgangspunkt und darf schwarz sein wie bisher. */
.filter-bar--kompakt .filter-chip--alle { font-weight: 800; }

.filter-bar--kompakt .filter-chip.is-active {
  background: var(--ink); border-color: var(--ink); color: #fff;
}
.filter-bar--kompakt .filter-chip--team.is-active {
  background: var(--green-700) var(--fill-green-hover); border-color: var(--green-700); color: #fff;
}
.filter-bar--kompakt .filter-chip--team.is-active .filter-chip__n { color: rgb(255 255 255 / .65); }

/* Der Monat wartet auf das Jahr: gesperrt, bis eines gewählt ist. Sichtbar
   bleibt er trotzdem – ein Feld, das verschwindet und wiederkommt, lässt die
   Leiste springen. */
.field--aus { opacity: .55; }
.field--aus select { cursor: not-allowed; }

/* Der Haarstrich zwischen den beiden Sorten. */
.filter-bar__trenner {
  width: 1px; align-self: stretch; margin-inline: .45rem;
  background: var(--line); min-height: 2rem;
}
.filter-empty { text-align: center; color: var(--ink-500); padding: var(--sp-6) 0; }
/* ---------- Anzeigen / Werbeflächen ---------- */
/* Aufbau: Label „Anzeige“, darunter das Banner, darunter der Akquisetext.
   Ist ein Platz unverkauft, läuft ein Eigenbanner des Vereins („House Ad“) –
   die Fläche wirkt nie leer und der Verein bewirbt sich selbst. */
.adslot { margin-block: clamp(1.5rem, 3vw, 3rem); }
.adslot__label {
  font-size: .65rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--ink-500); font-weight: 700; margin-bottom: .4rem;   /* ink-300 hielt auf Weiß nur 2,6:1 (Testlauf 07.11.2026) */
}
/* Das Motiv: ein Bauteil für Eigenwerbung und für Partner. Grüner Verlauf mit
   dem Streifenmotiv des Hauses, links Wappen oder Partnerlogo, rechts der
   Aufruf. Liefert ein Partner ein eigenes Bannermotiv, füllt es die Fläche
   allein – dann ist unser Gewand nicht nötig. */
.adslot__panel {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.5rem);
  padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1.25rem, 3vw, 2.75rem);
  border-radius: var(--radius); color: #fff;
  background: linear-gradient(115deg, var(--green-900) 0%, var(--green-700) 55%, var(--green-600) 100%);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.adslot__panel::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: repeating-linear-gradient(115deg, rgb(255 255 255 / .055) 0 3px, transparent 3px 20px);
}
.adslot__panel:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

/* Wechsel: Mehrere gebuchte Partner liegen in derselben Rasterzelle
   übereinander. Die Fläche ist so hoch wie der höchste Partner – beim
   Überblenden springt nichts auf der Seite. Sichtbar ist nur .is-active;
   ohne Skript bleibt der erste Partner stehen. */
.adslot__stage { display: grid; }
.adslot__stage > .adslot__panel { grid-area: 1 / 1; }
.adslot__stage > .adslot__panel:not(.is-active) { opacity: 0; visibility: hidden; }
/* Überblendung mit Unschärfe: Der gehende Partner verschwimmt und wird minimal
   größer, der kommende zieht aus der Unschärfe scharf. Unscharf wird nur der
   Inhalt (Logo, Text, Knopf). Den grünen Kasten trägt im Wechsel die Bühne
   selbst – er steht ruhig, statt bei jedem Übergang halb durchsichtig zu
   flackern. */
.adslot[data-ad-wechsel] .adslot__stage {
  position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius);
  background: linear-gradient(115deg, var(--green-900) 0%, var(--green-700) 55%, var(--green-600) 100%);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.adslot[data-ad-wechsel] .adslot__stage::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: repeating-linear-gradient(115deg, rgb(255 255 255 / .055) 0 3px, transparent 3px 20px);
}
.adslot[data-ad-wechsel] .adslot__stage:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.adslot[data-ad-wechsel] .adslot__panel { background: none; }
.adslot[data-ad-wechsel] .adslot__panel::before { content: none; }
.adslot[data-ad-wechsel] .adslot__panel:hover { transform: none; box-shadow: none; }
/* Sichtbar bleibt der gehende Partner, bis seine Unschärfe durch ist. */
.adslot[data-ad-wechsel] .adslot__stage > .adslot__panel:not(.is-active) {
  opacity: 1; visibility: hidden; transition: visibility 0s 1.1s;
}
.adslot[data-ad-wechsel] .adslot__panel > * {
  transition: filter 1.1s var(--ease), transform 1.1s var(--ease), opacity 1.1s var(--ease);
}
.adslot[data-ad-wechsel] .adslot__panel:not(.is-active) > * {
  filter: blur(16px); transform: scale(1.06); opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .adslot[data-ad-wechsel] .adslot__panel,
  .adslot[data-ad-wechsel] .adslot__panel > * { transition: none; }
}

.adslot__crest, .adslot__logo { flex: 0 0 auto; display: grid; place-items: center; }
.adslot__crest img { width: clamp(52px, 6vw, 84px); height: auto; }
/* Das Partnerlogo ist der Hauptdarsteller der Anzeige, nicht der Name in
   unserer Schrift. Deshalb misst sich die weiße Karte an der Logohöhe – gut
   doppelt so groß wie vorher – und die Breite ergibt sich aus dem Logo
   selbst. Sehr breite Wortmarken deckelt die Karte, das Bild bleibt dank
   object-fit unverzerrt und mittig. Vorher: feste 110–190 px breite Box mit
   34–52 px Bildhöhe, darin ging jeder Partner unter. */
.adslot__logo {
  background: #fff; border-radius: var(--radius-sm);
  padding: clamp(.75rem, 1.3vw, 1.25rem) clamp(1rem, 1.8vw, 1.75rem);
  max-width: clamp(200px, 30vw, 480px);
}
.adslot__logo img {
  display: block; height: clamp(56px, 6.2vw, 112px); width: auto; max-width: 100%;
  object-fit: contain;
}

.adslot__text { display: grid; gap: .35rem; min-width: 0; }
.adslot__kicker {
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent);
}
.adslot__title {
  font-family: var(--font-display); font-style: italic; text-transform: uppercase;
  font-size: clamp(1.5rem, 1rem + 2.2vw, 3rem); line-height: 1.02; text-wrap: balance;
}
/* Der Firmentext bricht nach gut zwei Zeilen um, statt auf breiten Schirmen
   als Einzeiler bis zum Knopf durchzulaufen. */
.adslot__sub { font-size: var(--fs-md); color: rgb(255 255 255 / .82); text-wrap: pretty; max-width: 62ch; }
.adslot__cta { flex: 0 0 auto; margin-left: auto; pointer-events: none; }

/* Flacher Platz unter dem Header, hoher Störer im Inhalt. Gleiches Bauteil,
   nur andere Höhe und Schriftgröße. */
.adslot--banner .adslot__panel { padding-block: clamp(1rem, 2vw, 1.6rem); }
.adslot--banner .adslot__title { font-size: clamp(1.25rem, .9rem + 1.4vw, 2.1rem); }
.adslot--banner .adslot__sub { font-size: var(--fs-sm); }
.adslot--banner .adslot__logo { padding: clamp(.6rem, 1vw, .9rem) clamp(.9rem, 1.4vw, 1.3rem); max-width: clamp(180px, 24vw, 380px); }
.adslot--banner .adslot__logo img { height: clamp(48px, 4.6vw, 84px); }

@media (max-width: 860px) {
  .adslot__panel { flex-wrap: wrap; }
  .adslot__cta { margin-left: 0; }
  /* Untereinander: Die Logokarte darf die Zeile füllen, das Bild wächst mit
     dem Schirm, damit es auf dem Handy nicht auf Briefmarkengröße fällt. */
  .adslot__logo, .adslot--banner .adslot__logo { max-width: min(100%, 360px); }
  .adslot__logo img, .adslot--banner .adslot__logo img { height: clamp(56px, 16vw, 96px); }
}
.adslot__pitch {
  display: flex; align-items: baseline; gap: .5rem 1rem; flex-wrap: wrap;
  margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--line);
}
.adslot__pitch strong { font-size: var(--fs-sm); font-weight: 800; }
.adslot__pitch span { font-size: var(--fs-sm); color: var(--ink-500); }
.adslot__pitch a {
  display: inline-flex; align-items: center; gap: .4rem; margin-left: auto;
  font-size: var(--fs-sm); font-weight: 800; color: var(--green-700);
  border-bottom: 2px solid transparent; padding-bottom: 2px; white-space: nowrap;
  transition: border-color .18s, gap .18s;
}
.adslot__pitch a:hover { border-color: currentColor; gap: .7rem; }
.adslot__pitch a svg { width: 1em; height: 1em; }
/* ---------- Newsletter ---------- */
.newsletter {
  background: var(--green-950) var(--fill-flaeche-tief); color: #fff; position: relative; overflow: hidden;
  padding-block: clamp(2.5rem, 4vw, 4.5rem);
}
.newsletter::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(90% 130% at 8% 50%, rgb(0 154 68 / .32), transparent 62%);
}
.newsletter__inner { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 5rem); align-items: center; }
.newsletter__title { font-size: var(--fs-2xl); margin-block: var(--sp-3) var(--sp-4); }
.newsletter__title .accent { color: var(--accent); }
.newsletter__intro p { color: rgb(255 255 255 / .8); max-width: 46ch; }
.newsletter__form { display: grid; gap: var(--sp-4); }
.newsletter .field label { display: block; font-size: var(--fs-sm); font-weight: 700; margin-bottom: .5rem; }
.newsletter .field input {
  width: 100%; padding: .95rem 1.15rem; border-radius: var(--radius);
  border: 1.5px solid rgb(255 255 255 / .25); background: rgb(255 255 255 / .07); color: #fff;
  transition: border-color .18s, background-color .18s;
}
.newsletter .field input::placeholder { color: rgb(255 255 255 / .45); }
.newsletter .field input:focus { border-color: var(--green-400); background: rgb(255 255 255 / .12); outline: none; }
.newsletter .checkbox { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--fs-xs); color: rgb(255 255 255 / .78); line-height: 1.5; }
.newsletter .checkbox input { width: 1.15rem; height: 1.15rem; margin-top: .1rem; accent-color: var(--green-400); flex-shrink: 0; }
.newsletter .checkbox a { text-decoration: underline; }
.newsletter .btn { justify-self: start; }
/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; }
}
/* ---------- Ergänzende Breakpoints ---------- */
@media (max-width: 1200px) {
  .newsletter__inner { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
  .header-search { display: none; }
/* Suche wandert in die Burger-Navigation */
}
@media (max-width: 768px) {
  .tabs { gap: 1rem; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { white-space: nowrap; }
}
/* ---------- 10 Breakpoints für Hero-Mosaik, Matchbar, Cross ---------- */
@media (max-width: 1400px) { .cross-row, .cross-row--themen { grid-template-columns: repeat(2, 1fr); }
  /* Ungerade Anzahl im Zweispalter: die letzte Kachel läuft über beide Spalten,
     statt allein links zu hängen. */
  .cross-row > .cross:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 1200px) {
  .hero-mosaic { grid-template-columns: 1fr; }
.hero-side { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
.hero-tile { min-height: clamp(150px, 18vw, 220px); }
.footer__main { grid-template-columns: 1fr 1fr; }
.footer__col--actions { justify-items: start; grid-column: 1 / -1; }
}
/* Laptop: Die Sponsorenleiste muss ohne Scrollen zu sehen sein. Das ist eine
   Pflicht gegenüber den Sponsoren. Gemessen am 24.09.2026 lag sie bei 1440 × 790
   (MacBook Air, sichtbare Fläche) auf 939–1025 px, also komplett unter dem
   ersten Bildschirm. Die Bühne war mit ~700 px zu hoch.
   Auf niedrigen Bildschirmen rücken die Kennzahlen deshalb neben die Knöpfe
   statt darunter, und die Überschrift richtet sich nach der Höhe. Die Bühne
   nimmt sich dann genau die Höhe, die übrig bleibt: 334 px sind Servicezeile
   (41), Kopf (77), Spielleiste (~127) und Sponsorenleiste (86). Die Leiste
   schließt damit am unteren Bildschirmrand ab. Eine noch kompaktere Bühne war
   Chris „deutlich zu niedrig“.
   Die Grenze 1201 px kommt vom Umbruch darüber: Schmaler steht die Bühne
   einspaltig. */
@media (min-width: 1201px) and (max-height: 960px) {
  .hero-main { min-height: max(360px, calc(100svh - 334px)); }
  .hero-main__inner {
    padding-block: clamp(1.25rem, 4vh, 2.5rem);
    display: grid; grid-template-columns: max-content auto; justify-content: start;
    align-items: center; column-gap: clamp(1.25rem, 2.5vw, 3rem);
  }
  .hero-main__inner > * { grid-column: 1 / -1; }
  .hero-main__inner > .hero__actions { grid-column: 1; flex-wrap: nowrap; }
  .hero-main__inner > .hero__facts { grid-column: 2; margin-top: 0; flex-wrap: nowrap; gap: clamp(1rem, 1.6vw, 2rem); }
  .hero__fact span { letter-spacing: .08em; }
  .hero-main__title { font-size: clamp(2.6rem, .5rem + 8vh, 6.4rem); }
  .hero-main__lead { margin-bottom: var(--sp-5); max-width: 62ch; }
}
/* Bis 1400 px Breite passen die Kennzahlen in voller Größe nicht neben die
   Knöpfe – bei 1280 ragten sie 35 px in die Kachel rechts. */
@media (min-width: 1201px) and (max-width: 1400px) and (max-height: 960px) {
  .hero__fact strong { font-size: var(--fs-lg); }
}
/* Unter 780 px Höhe (Windows-Laptops mit 1366 × 768 oder 1536 × 864) reicht
   das nicht: Dort verlieren Überschrift und Spielleiste Polster. */
@media (min-width: 1201px) and (max-height: 780px) {
  .hero-main__title { margin-block: var(--sp-3) var(--sp-4); }
  .mb__inner { padding-block: clamp(.6rem, 1.6vh, 1rem); gap: .35rem; }
}
@media (max-width: 768px) {
  .hero-side { grid-template-columns: 1fr; }
.cross-row { grid-template-columns: 1fr; }
.cross { min-height: 180px; }
.footer__main { grid-template-columns: 1fr; }
.footer__copy { margin-left: 0; }
}
/* ---------- 11 Mitglied-werden-Störer mit Vereinsausweis ---------- */
.member {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(115deg, var(--green-900) 0%, var(--green-700) 55%, var(--green-600) 100%);
  padding-block: clamp(2.75rem, 5vw, 5.5rem);
}
.member::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg, rgb(255 255 255 / .055) 0 3px, transparent 3px 20px);
}
.member::after {
  content: ""; position: absolute; right: -8%; top: -30%; width: 45vw; height: 140%;
  background: radial-gradient(circle, rgb(255 255 255 / .12), transparent 62%);
}
.member__inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 5vw, 6rem); align-items: center;
}
.member .eyebrow { color: rgb(255 255 255 / .85); }
.member__title { font-size: var(--fs-2xl); margin-block: var(--sp-3) var(--sp-4); }
.member__title .accent { color: var(--accent); }
.member__lead { font-size: var(--fs-md); color: rgb(255 255 255 / .9); max-width: 50ch; margin-bottom: var(--sp-6); }
.member__form { display: grid; gap: var(--sp-4); justify-items: start; max-width: 620px; }
.member__fields { display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--sp-3); width: 100%; }
.member .field { display: grid; gap: .4rem; }
.member .field label { font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: rgb(255 255 255 / .8); }
.member .field input {
  padding: .9rem 1.1rem; border-radius: var(--radius); border: 1.5px solid rgb(255 255 255 / .3);
  background: rgb(255 255 255 / .1); color: #fff; font-weight: 600;
  transition: border-color .18s, background-color .18s;
}
.member .field input::placeholder { color: rgb(255 255 255 / .5); font-weight: 400; }
.member .field input:focus { border-color: var(--accent); background: rgb(255 255 255 / .16); outline: none; }
.member__note { font-size: var(--fs-xs); color: rgb(255 255 255 / .72); }
.member__perks { display: flex; gap: clamp(1rem, 2vw, 2rem); flex-wrap: wrap; margin-top: var(--sp-6); }
.member__perks li { display: flex; align-items: center; gap: .45rem; font-size: var(--fs-sm); font-weight: 600; color: rgb(255 255 255 / .9); }
.member__perks svg { width: 1.1em; height: 1.1em; color: var(--accent); flex-shrink: 0; }
/* Vereinsausweis */
.member__card-wrap { perspective: 1400px; display: grid; place-items: center; }
.clubcard {
  width: min(100%, 420px); aspect-ratio: 1.586 / 1;
  border-radius: 18px; padding: clamp(1.25rem, 2vw, 1.75rem);
  background: linear-gradient(145deg, #0D1A12 0%, #04301A 45%, #012414 100%);
  border: 1px solid rgb(255 255 255 / .16);
  box-shadow: 0 30px 60px rgb(2 20 10 / .45), 0 8px 20px rgb(2 20 10 / .3);
  display: flex; flex-direction: column; position: relative; overflow: hidden;
  transform: rotate(-6deg) rotateY(13deg) rotateX(5deg);
  transition: transform .5s var(--ease);
}
.clubcard:hover { transform: rotate(-2deg) rotateY(6deg) rotateX(2deg) translateY(-6px); }
.clubcard::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg, rgb(0 154 68 / .16) 0 2px, transparent 2px 15px);
}
.clubcard::after {
  content: ""; position: absolute; top: -60%; left: -20%; width: 70%; height: 220%;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .1), transparent);
  transform: rotate(18deg);
}
.clubcard > * { position: relative; z-index: 2; }
.clubcard__top { display: flex; align-items: center; gap: .75rem; }
.clubcard__club { font-size: .68rem; line-height: 1.3; color: rgb(255 255 255 / .65); text-transform: uppercase; letter-spacing: .08em; }
.clubcard__club b { color: #fff; font-size: .78rem; letter-spacing: .04em; }
.clubcard__label { margin-top: auto; font-size: .6rem; text-transform: uppercase; letter-spacing: .18em; color: var(--accent); font-weight: 800; }
.clubcard__name { font-family: var(--font-display); font-style: italic; text-transform: uppercase; font-size: clamp(1.2rem, 2.4vw, 1.8rem); color: #fff; line-height: 1; margin-top: .25rem; }
.clubcard__meta { display: flex; gap: 2rem; margin-top: .9rem; }
.clubcard__meta small { display: block; font-size: .55rem; text-transform: uppercase; letter-spacing: .12em; color: rgb(255 255 255 / .5); }
.clubcard__meta b { font-size: .85rem; color: #fff; letter-spacing: .04em; }
.clubcard__claim {
  position: absolute; right: clamp(1.25rem, 2vw, 1.75rem); bottom: clamp(1.25rem, 2vw, 1.75rem);
  font-size: .6rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 800; color: var(--accent);
}
@media (max-width: 1024px) {
  .member__inner { grid-template-columns: 1fr; }
.member__card-wrap { order: -1; }
.clubcard { transform: rotate(-3deg); max-width: 360px; }
}
@media (max-width: 560px) {
  .member__fields { grid-template-columns: 1fr; }
.member__form .btn { width: 100%; }
.mb__actions .btn { flex: 1 1 auto; }
}
/* Slider-Buttons auf dunklem Grund (Videoarchiv) */
.slider__btn--dark { background: rgb(255 255 255 / .1); border-color: rgb(255 255 255 / .28); color: #fff; }
.slider__btn--dark:hover:not(:disabled) { background: var(--accent) var(--fill-accent); border-color: var(--accent); color: var(--accent-ink); }
/* ---------- 12 Vereinswappen ---------- */
.crest {
  display: grid; place-items: center; flex-shrink: 0;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--surface-3); overflow: hidden;
}
.crest img { width: 78%; height: 78%; object-fit: contain; }
.crest--own { background: var(--green-950); }
.crest--own img { width: 66%; height: 66%; }
.crest--initials {
  font-family: var(--font-display); font-style: italic; font-size: .74rem;
  color: var(--ink-700); letter-spacing: .02em;
}
.match--next .crest { background: rgb(255 255 255 / .18); }
.match--next .crest--initials { color: #fff; }
.match--next .crest--own { background: #fff; }
/* =============================================================
   13 FSV-Assistent (Chat-Widget)
   ============================================================= */
.chat-launcher {
  position: fixed; right: var(--chat-offset); bottom: var(--chat-offset);
  z-index: 200; display: inline-flex; align-items: center; gap: .6rem;
  padding: .8rem 1.25rem .8rem 1rem; border: 0; border-radius: 999px;
  background: var(--green-600) var(--fill-green); color: #fff; cursor: pointer;
  font-weight: 800; font-size: var(--fs-sm); white-space: nowrap;
  box-shadow: var(--fill-kante), 0 6px 18px rgb(2 27 15 / .28), 0 16px 40px rgb(2 27 15 / .2);
  transition: transform .2s var(--ease), background-color .2s, box-shadow .2s;
}
.chat-launcher:hover { transform: translateY(-3px); background: var(--green-700) var(--fill-green-hover); }
.chat-launcher.is-active { background: var(--green-900) var(--fill-dunkel); }
.chat-launcher__icon { display: grid; place-items: center; }
.chat-launcher__icon svg { width: 22px; height: 22px; }
.chat-launcher__dot {
  position: absolute; top: 6px; right: 8px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--accent); border: 2px solid var(--green-600);
}
.chat-launcher:not(.is-active) .chat-launcher__dot { animation: chat-pulse 2.4s ease-in-out infinite; }
@keyframes chat-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgb(198 242 78 / .7); }
50%      { box-shadow: 0 0 0 7px rgb(198 242 78 / 0); }
}
.chat-panel {
  position: fixed; right: var(--chat-offset); bottom: calc(var(--chat-offset) + 66px);
  z-index: 201; width: min(390px, calc(100vw - 2rem));
  height: min(620px, calc(100vh - 9rem));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgb(2 27 15 / .2), 0 32px 80px rgb(2 27 15 / .24);
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.98);
  transform-origin: bottom right;
  transition: opacity .24s var(--ease), transform .24s var(--ease), visibility .24s;
}
.chat-panel[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
.chat-panel__head {
  display: flex; align-items: center; gap: .75rem; flex-shrink: 0;
  padding: .9rem 1rem; background: var(--green-900); color: #fff;
}
.chat-panel__avatar {
  width: 38px; height: 38px; border-radius: 50%; background: rgb(255 255 255 / .12);
  display: grid; place-items: center; flex-shrink: 0;
}
.chat-panel__avatar img { width: 62%; height: auto; }
.chat-panel__who { flex: 1; min-width: 0; line-height: 1.25; }
.chat-panel__who strong { display: block; font-size: var(--fs-sm); }
.chat-panel__who > span { display: flex; align-items: center; gap: .35rem; font-size: var(--fs-xs); color: var(--green-100); }
.chat-panel__online { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.chat-panel__close {
  width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgb(255 255 255 / .1);
  color: #fff; cursor: pointer; display: grid; place-items: center; flex-shrink: 0;
  transition: background-color .18s;
}
.chat-panel__close:hover { background: rgb(255 255 255 / .22); }
.chat-panel__close svg { width: 17px; height: 17px; }
.chat-log {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  /* Das globale html{scroll-behavior:smooth}
würde hier jede scrollTop-Zuweisung
     animieren; bei schnell folgenden Nachrichten bricht die Animation ab und die
     letzte Antwort bleibt angeschnitten. Im Chat wollen wir den harten Sprung. */
  scroll-behavior: auto;
  display: flex; flex-direction: column; gap: .85rem;
  padding: 1rem; background: var(--surface-2);
}
.chat-msg { display: flex; gap: .55rem; align-items: flex-end; max-width: 100%; }
.chat-msg--user { flex-direction: row-reverse; }
.chat-msg__avatar {
  width: 28px; height: 28px; border-radius: 50%; background: var(--green-950);
  display: grid; place-items: center; flex-shrink: 0;
}
.chat-msg__avatar img { width: 60%; height: auto; }
.chat-msg__body { display: grid; gap: .45rem; max-width: 82%; }
.chat-msg__text {
  padding: .7rem .9rem; border-radius: 14px; font-size: var(--fs-sm); line-height: 1.5;
  background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 4px;
}
.chat-msg__text strong { font-weight: 800; }
.chat-msg--user .chat-msg__text {
  background: var(--green-600); color: #fff; border-color: var(--green-600);
  border-bottom-left-radius: 14px; border-bottom-right-radius: 4px;
}
.chat-msg__links { display: flex; flex-wrap: wrap; gap: .4rem; }
.chat-msg__links a {
  display: inline-flex; align-items: center; padding: .38rem .8rem; border-radius: 999px;
  background: var(--green-50); color: var(--green-700); border: 1px solid var(--green-100);
  font-size: var(--fs-xs); font-weight: 800; white-space: nowrap;
  transition: background-color .16s, color .16s, border-color .16s;
}
.chat-msg__links a:hover { background: var(--green-600) var(--fill-green); color: #fff; border-color: var(--green-600); }
.chat-typing__dots { display: inline-flex; gap: 4px; padding: .85rem .9rem; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; border-bottom-left-radius: 4px; }
.chat-typing__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-300); animation: chat-bounce 1.2s ease-in-out infinite; }
.chat-typing__dots i:nth-child(2) { animation-delay: .15s; }
.chat-typing__dots i:nth-child(3) { animation-delay: .3s; }
@keyframes chat-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; }
30% { transform: translateY(-4px); opacity: 1; }
}
.chat-suggestions {
  display: flex; flex-wrap: wrap; gap: .4rem; flex-shrink: 0;
  padding: .75rem 1rem 0; background: var(--surface);
}
.chat-chip {
  padding: .45rem .85rem; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--green-200); background: var(--surface);
  color: var(--green-700); font-size: var(--fs-xs); font-weight: 700; text-align: left;
  transition: background-color .16s, color .16s, border-color .16s, transform .16s var(--ease);
}
.chat-chip:hover { background: var(--green-600) var(--fill-green); color: #fff; border-color: var(--green-600); transform: translateY(-1px); }
.chat-form { display: flex; gap: .5rem; align-items: center; flex-shrink: 0; padding: .75rem 1rem; background: var(--surface); }
.chat-form input {
  flex: 1; min-width: 0; padding: .75rem 1rem; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--surface-2); font-size: var(--fs-sm);
  transition: border-color .18s, background-color .18s;
}
.chat-form input:focus { border-color: var(--green-600); background: var(--surface); outline: none; }
.chat-form__send {
  width: 42px; height: 42px; border: 0; border-radius: 50%; flex-shrink: 0;
  background: var(--green-600) var(--fill-green); color: #fff; cursor: pointer; display: grid; place-items: center;
  transition: background-color .18s, transform .18s var(--ease);
}
.chat-form__send:hover { background: var(--green-700) var(--fill-green-hover); transform: scale(1.06); }
.chat-form__send svg { width: 18px; height: 18px; transform: translateX(1px); }
.chat-panel__note {
  display: flex; align-items: center; gap: .4rem; flex-shrink: 0;
  padding: .6rem 1rem .8rem; background: var(--surface);
  border-top: 1px solid var(--line);
  font-size: .68rem; color: var(--ink-500);
}
.chat-panel__note svg { width: 13px; height: 13px; color: var(--green-600); flex-shrink: 0; }
.chat-panel__note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.chat-panel__note a:hover, .chat-panel__note a:focus-visible { color: var(--green-600); }
/* Mobil: als Vollbild-Sheet, damit die Tastatur genug Platz lässt */
@media (max-width: 640px) {
  .chat-launcher__text { display: none; }
.chat-launcher { padding: .95rem; }
.chat-panel {
    right: 0; bottom: 0; width: 100%; height: 100dvh; max-height: 100dvh;
    border-radius: 0; border: 0; transform: translateY(100%);
  }
.chat-panel[data-open="true"] { transform: none; }
body.chat-open { overflow: hidden; }
body.chat-open .chat-launcher { display: none; }
}
/* Kopfzeile mit Slider-Navigation und Button nebeneinander */
.section-head__actions { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
/* =============================================================
   14 Ligatabelle
   ============================================================= */
/* Derselbe Rahmen wie .fbde um das fussball.de-Widget, samt Schatten: Steht
   unsere Tabelle neben dem Widget, sollen beide Kästen gleich aussehen. */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.ltable { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.ltable th, .ltable td { padding: .7rem .75rem; text-align: left; }
.ltable thead th {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-500); font-weight: 800; border-bottom: 2px solid var(--line);
  white-space: nowrap; background: var(--surface-2);
}
.ltable tbody tr { border-bottom: 1px solid var(--line); transition: background-color .16s; }
.ltable tbody tr:last-child { border-bottom: 0; }
.ltable tbody tr:hover { background: var(--surface-2); }
.ltable .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ltable__pos { width: 2.5rem; text-align: center; color: var(--ink-500); font-variant-numeric: tabular-nums; }
.ltable__team { display: flex; align-items: center; gap: .65rem; font-weight: 700; min-width: 15rem; }
.ltable__crest { width: 28px; height: 28px; }
.ltable__pkt { font-weight: 800; font-size: var(--fs-base); }
.ltable__form { width: 1%; }
.ltable__note { margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--ink-500); }
/* Eigene Zeile hervorheben: Farbfläche und grüner Name. Keine Kante links –
   farbige Balken an Kästen und Zeilen sind im Projekt verboten. Dass die Zeile
   nicht allein über Farbe erkennbar ist, leistet der Vereinsname selbst. */
.ltable tbody tr.is-own { background: var(--green-50); }
.ltable tbody tr.is-own:hover { background: var(--green-100); }
.ltable tbody tr.is-own .ltable__team { color: var(--green-800); }
/* Formkurve */
.form-dots { display: inline-flex; gap: .25rem; }
.form-dot {
  width: 1.35rem; height: 1.35rem; border-radius: 5px;
  display: grid; place-items: center;
  font-size: .62rem; font-weight: 800; color: #fff;
}
.form-dot--s { background: var(--green-600); }
.form-dot--u { background: var(--ink-300); }
.form-dot--n { background: #B3271F; }
@media (max-width: 900px) {
  .ltable .opt { display: none; }
/* S/U/N, Tore und Form ausblenden */
  .ltable__team { min-width: 11rem; }
}
/* Social folgen: beide Netzwerke als Icon plus ein gemeinsames Label –
   spart Platz gegenüber zwei vollen Buttons. */
.follow { display: inline-flex; align-items: center; gap: .5rem; }
.follow__net {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--line); color: var(--ink);
  transition: background-color .18s, border-color .18s, color .18s, transform .18s var(--ease);
}
.follow__net:hover { background: var(--green-700) var(--fill-green-hover); border-color: var(--green-700); color: #fff; transform: translateY(-2px); }
.follow__net svg { width: 20px; height: 20px; }
.follow__label { font-size: var(--fs-sm); font-weight: 800; }
@media (max-width: 1024px) {
  .homegames { grid-template-columns: 1fr; }
.homegames__media { aspect-ratio: 21 / 9; min-height: 0; }
}

/* Suchfeld in der Burger-Navigation (die Desktop-Suche sitzt im Header) */
.mobile-nav .search-form { display: flex; gap: var(--sp-3); align-items: center; margin-bottom: var(--sp-5); }
.mobile-nav .search-form input[type="search"] {
  flex: 1; min-width: 0; padding: .85rem 1rem; font-size: var(--fs-base);
  border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--surface-2);
}
.mobile-nav .search-form input[type="search"]:focus { border-color: var(--green-600); background: var(--surface); outline: none; }

/* Icons in Buttons bekommen etwas Luft zum Text */
.btn svg + * , .btn > svg { flex-shrink: 0; }

/* Breites Mega-Menü für Teams: sechs Spalten brauchen die ganze Breite */
.main-nav__item--wide .mega__cols { grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); }

/* =============================================================
   15 WordPress: Inhaltsseiten, Beiträge, statische Übersichten
   ============================================================= */
.wrap--text { width: min(100% - var(--gutter) * 2, 46rem); margin-inline: auto; }

/* Beitragsseite: wirklich eine Achse. Kopf, Bild und Text stehen in derselben
   Spalte und beginnen an derselben Kante – zwei unterschiedlich breite Mitten
   ergeben denselben Sprung, nur kleiner. 52 rem ist breit genug für ein
   Mannschaftsfoto und schmal genug für angenehme Zeilenlängen. */
.entry .wrap--text,
.entry .wrap--media { width: min(100% - var(--gutter) * 2, 52rem); margin-inline: auto; }

/* Trägt der Inhalt einen Baustein über die volle Breite, richtet sich der Text
   an der Layoutbreite aus – nicht an der Lesespalte. Chris am 08.09.2026 zu
   /sponsoren/: „‚SPONSOREN‘ […] haben einen zu großen Abstand links und rechts,
   als wie es das Layout der Website vorgibt."

   Gemessen bei 1400 px Fensterbreite: Überschrift und die beiden Sätze standen
   284 px von jeder Kante entfernt, das Sponsorenraster und die Fußzeile bei 37.
   Die Lesespalte ist für Fließtext gedacht und dort richtig; steht darunter
   aber ein Baustein, der über die ganze Breite läuft, sieht dieselbe Regel wie
   ein Einzug aus. Die Überschrift gehört dann an die Kante des Bausteins, so
   wie sie es in jeder eigenen Vorlage der Website ohnehin tut – nur die
   allgemeine Seitenvorlage setzt sie in die Lesespalte.

   Die Bedingung hängt am Baustein, nicht an einer Seite: Wer den Baustein aus
   einer Seite nimmt, bekommt die Lesespalte zurück, ohne dass jemand eine
   Ausnahme pflegen muss. Am 08.09.2026 traf das genau zwei Inhalte – die
   Startseite, die ohne .entry läuft und deshalb nicht gemeint ist, und
   /sponsoren/.

   Dasselbe gilt für jede Seite der allgemeinen Vorlage, auch ohne Baustein.
   Chris am 08.09.2026 zu /verein/, /impressum/, /datenschutzerklaerung/,
   /barrierefreiheit/ und /ki-einsatz/: „Zur Sache mit dem Seitenabstand links
   und rechts. Passe das auch hier an."

   Gemessen bei 1400 px: Überschrift und Text standen 284 px von der linken
   Kante entfernt, Sponsorenband und Fußzeile darunter bei 37 – und das
   Beitragsbild derselben Vorlage ebenfalls bei 37, weil es .wrap trägt statt
   .wrap--text. Die Seite hatte also zwei linke Kanten. Die Lesespalte ist für
   den Fließtext gedacht, nicht für die Seite: Jede eigene Vorlage – „Sponsor
   werden", Anfahrt, Formulare, Gremien – setzt Überschrift und Vorspann an die
   Layoutkante und begrenzt nur die Zeilenlänge. Die allgemeine Vorlage ist die
   einzige, die stattdessen alles einrückt.

   Sie tut es jetzt nicht mehr: Der Rahmen ist die Layoutbreite, die
   Zeilenlänge bleibt bei denselben 52 rem wie zuvor – nur linksbündig statt
   mittig. Kein Satz wird dadurch länger, keine Zeile bricht anders um; der
   Text beginnt an derselben Kante wie Bild, Sponsorenband und Fußzeile.
   Ausgenommen sind Inhalte mit einem Baustein über die volle Breite: Dort
   trägt der Baustein die Breite und der Text richtet sich schon danach.

   Betroffen sind die elf Seiten ohne eigene Vorlage – neben den fünf genannten
   /anleitung/, /home/, /mitmachen/club-100/, /mitmachen/foerderverein/,
   /sponsoren/ und die eine als Seite angelegte alte Meldung. Beiträge behalten
   ihre mittige Achse; ein Artikel ist Fließtext von oben bis unten. */
body.page .entry .wrap--text,
.entry:has(.entry__content > .fsv-modul--voll) .wrap--text {
  width: min(100% - var(--gutter) * 2, var(--wrap));
}
body.page .entry:not(:has(.entry__content > .fsv-modul--voll)) .entry__content > *:not(.rechtstext__abschnitt, .personen-block) {
  max-width: 52rem;
}
/* Und der Kopf sieht aus wie auf „Sponsor werden" – der Seite, die dieselbe
   Aufgabe hat. Chris am 08.09.2026: „Headline und Subheadline/Copy Text
   sollten so aussehen wie hier."

   Dort stehen Überschrift und Einleitung dicht beieinander, die Einleitung in
   Fließtextgröße mit Gewicht 500 und auf 62 Zeichen begrenzt (.sw__intro).
   Hier griff dagegen der Anriss aus dem Beitragslayout: fs-lg, also 27 statt
   20 Pixel, über die ganze Layoutbreite und mit dem vollen Abstand einer
   eigenen Sektion darüber. Das ist die Regel für einen Artikel, dessen erster
   Absatz den Text anträgt – vor einem Raster aus Logos trägt sie nichts an,
   sie macht nur einen zweiten Titel daraus.

   Gemessen auf der Referenz bei 1400 px: 20 px, Gewicht 500, Zeilenhöhe 1,5,
   16 px unter der Überschrift. Genau diese Werte stehen hier.

   Ohne die Lesespalte der Referenz: Chris am 08.09.2026: „lass den Text … auf
   die volle Breite laufen.“ Auf „Sponsor werden“ begrenzt .sw__intro den Satz
   auf 62 Zeichen, weil dort ein Fließtext folgt, der dieselbe Spalte hält.
   Hier folgt das Sponsorenraster über die ganze Layoutbreite; die Begrenzung
   bricht den Satz dann mitten in der Zeile um und lässt rechts eine Lücke
   stehen, die sonst nichts auf der Seite hat. Der Satz endet jetzt an derselben
   Kante wie Überschrift und Raster. Größe, Gewicht, Zeilenhöhe und Abstand
   bleiben die der Referenz.

   Derselbe Kopf steht auf jeder Seite der allgemeinen Vorlage, die mit einem
   Absatz beginnt. Chris am 08.09.2026 zu /verein/: „Die Darstellung von
   ‚Verein‘ und ‚Vorstand, Jugendvorstand, Ältestenrat, Schiedsrichter und alle
   Ansprechpartner des FSV.‘ soll auch so aufgebaut sein, wie bei Sponsoren."

   Auch dort griff der Anriss aus dem Beitragslayout: 27 statt 20 Pixel und der
   volle Abstand einer eigenen Sektion zwischen Titel und Satz – gemessen bei
   1400 px 105 statt 16 Pixel. Ein Übersichtstext, der auf fünf Links zeigt,
   trägt aber nichts an; er sagt, worum es auf der Seite geht. Das ist eine
   Unterzeile, kein erster Absatz.

   Die Bedingung ist, dass der Inhalt mit einem Absatz anfängt – dann ist
   dieser Absatz die Unterzeile zum Titel. Beginnt er mit einer Zwischen-
   überschrift, wie /impressum/, /home/, /mitmachen/club-100/ und
   /mitmachen/foerderverein/, gibt es keine Unterzeile: Dort bleibt der volle
   Abstand einer Sektion, sonst klebte die Überschrift am Titel.

   Die Zeilenlänge bleibt die der Seite (52 rem); ohne Baustein über die volle
   Breite gibt es hier nichts, was eine größere Breite vorgäbe. Bei 1400 px
   passt der Satz auf /verein/ damit in eine Zeile. */
body.page .entry:has(.entry__content > p:first-child) .entry__head,
.entry:has(.entry__content > .fsv-modul--voll) .entry__head { padding-bottom: 0; }
body.page .entry:has(.entry__content > p:first-child) .entry__content > p:first-of-type,
.entry:has(.entry__content > .fsv-modul--voll) .entry__content > p:first-of-type {
  font-size: var(--fs-md); line-height: 1.5; font-weight: 500;
  margin-top: var(--sp-4);
}

.entry__kicker {
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: var(--sp-2);
}
.entry__kicker a { color: var(--green-600); }
.entry__kicker a:hover { color: var(--green-700); }
.entry__title { font-size: var(--fs-xl); margin-bottom: var(--sp-3); text-wrap: balance; }
.entry__meta { font-size: var(--fs-sm); color: var(--ink-500); }
/* Die Kategorien unter dem Datum. Sie stehen als dieselben Chips wie in jedem
   Filter der Website – wer sie dort schon angeklickt hat, erkennt sie wieder,
   und es ist derselbe Weg ins selbe Archiv. Chris am 07.09.2026: „auch die
   newsseite sollten unter dem datum die kategorien gelistet haben". */
.entry__kategorien { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: var(--sp-4); }
.entry__kategorien .filter-chip { font-weight: 600; }
.entry__kategorien .filter-chip__n { font-size: .85em; }
.entry__kategorien .filter-chip--team {
  border-color: var(--green-500); color: var(--green-700); font-weight: 800;
}
.entry__kategorien .filter-chip--team .filter-chip__n { color: var(--green-500); }
.entry__media { margin-block: var(--sp-6); }
.entry__media img { width: 100%; height: auto; border-radius: var(--radius-lg); }
.entry__media figcaption {
  font-size: var(--fs-xs); color: var(--ink-500); margin-top: .6rem;
}
.entry__content { font-size: var(--fs-md); line-height: 1.65; padding-bottom: var(--sp-7); }
/* Der erste Absatz trägt den Artikel an – etwas größer, etwas dunkler.
   Ohne das lesen sich alle Absätze gleich und der Einstieg fehlt. */
.entry__content > p:first-of-type {
  font-size: var(--fs-lg); line-height: 1.5; color: var(--ink); font-weight: 500;
}
.entry__related { margin-top: var(--sp-7); }
/* Textabstand, Links, Aufzählungen und Bilder gelten für das, was direkt im
   Inhalt steht – und ebenso für das, was direkt in einem Abschnitt eines
   Rechtstexts steht. Der Abschnitt ist nur die Klammer um Überschrift und
   Text (inc/rechtstext.php); für die Gestaltung ist er derselbe Behälter.
   Modulmarkup liegt weiterhin tiefer und bleibt außen vor. */
:is(.entry__content, .rechtstext__abschnitt) > * + * { margin-top: var(--sp-4); }
.entry__content h2 { font-size: var(--fs-lg); margin-top: var(--sp-7); }
.entry__content h3 { font-size: var(--fs-md); margin-top: var(--sp-6); }
/* Nur Links, die die Redaktion selbst in den Text setzt – nicht die Karten
   und Kacheln eingesetzter Module. Dieselbe Trennung wie bei den Bildern
   weiter unten, und aus demselben Grund.

   Chris am 08.09.2026 zu den Kacheln „Weitere Mannschaften": „Die Schrift-
   farbe ist hier grün – was laut dem Styleguide falsch ist, da dort die
   Schrift weiß ist." Richtig, und es lag nicht an der Kachel: .team-tile
   setzt color: #fff, aber .entry__content a:not(.btn) war spezifischer und
   hat es überschrieben, sobald ein Modul im Beitragstext steht. Auf der
   Startseite, wo dieselben Module ohne .entry__content laufen, sahen sie
   immer richtig aus – nur auf den Mannschaftsseiten nicht.

   Am 08.09.2026 auf /teams/ue32/ nachgemessen, betroffen waren vier Stellen:
   die Mannschaftskachel (grün statt weiß, dazu eine 2px-Kante quer über die
   Kachel), Bild und Überschrift der Newskarte (grün mit Unterkante unter dem
   Bild) und der Knopf „eins schicken" im Kopf der Mannschaftsseite, der als
   gelbgrüne Pille gedacht ist. Jedes dieser Module bringt seine eigene,
   richtige Regel mit – sie muss nur greifen dürfen.

   Der Editor schreibt Textlinks in Absätze, Listen, Überschriften, Zitate,
   Tabellen und Bildunterschriften, und diese Elemente stehen direkt im
   Inhalt. Modulmarkup liegt tiefer, in <section> und <div class="wrap">.
   Der Kindselektor trennt beides. Bilder in Links bleiben außen vor, sonst
   liefe eine 2px-Kante unter jedem verlinkten Bild. */
:is(.entry__content, .rechtstext__abschnitt) > :is(p, ul, ol, h2, h3, h4, h5, h6, blockquote, table, dl) a:not(.btn),
:is(.entry__content, .rechtstext__abschnitt) > figure > figcaption a:not(.btn) {
  color: var(--green-700); border-bottom: 2px solid var(--green-100);
}
:is(.entry__content, .rechtstext__abschnitt) > :is(p, ul, ol, h2, h3, h4, h5, h6, blockquote, table, dl) a:not(.btn):hover,
:is(.entry__content, .rechtstext__abschnitt) > figure > figcaption a:not(.btn):hover { border-color: var(--green-600); }
/* Aufzählungen, die die Redaktion selbst schreibt – dieselbe Trennung wie bei
   den Links darüber, und aus demselben Grund.

   Ohne den Kindselektor traf .entry__content li + li jede Liste in jedem
   eingesetzten Baustein: das Sponsorenraster, die Heimspiele, die Termine, den
   Kader. Aufgefallen ist es am Sponsorenraster – Chris am 08.09.2026 zum
   Abstand zwischen den Kachelreihen. Dort setzte die Regel 0,4 rem auf jede
   Kachel außer der ersten. Im Raster heißt das zweierlei: Der Reihenabstand
   war 6 Pixel größer als eingestellt (30 statt 24), und die allererste Kachel
   stand 6 Pixel höher als ihre Nachbarn, weil sie als einzige keinen Vorgänger
   hat. Beides sieht man nicht sofort und findet man nie an der Stelle, an der
   man sucht. */
:is(.entry__content, .rechtstext__abschnitt) > :is(ul, ol) { padding-left: 1.35rem; list-style: revert; }
:is(.entry__content, .rechtstext__abschnitt) > :is(ul, ol) li + li { margin-top: .4rem; }
/* Zitat: eine ruhige Fläche, keine Kante links. Chris am 07.09.2026:
   „dieser Style mit der Klammer bitte nie irgendwo auf der Seite." */
.entry__content blockquote {
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface-2); border-radius: var(--radius);
  font-size: var(--fs-md); color: var(--ink-700);
}
/* Nur was die Redaktion selbst in den Text setzt – nicht, was ein Modul
   mitbringt. Vorher galt das für jedes Bild im Inhalt und hätte den Karten
   und Logos eingesetzter Module fremde Ecken verpasst. */
:is(.entry__content, .rechtstext__abschnitt) > img,
:is(.entry__content, .rechtstext__abschnitt) > figure,
:is(.entry__content, .rechtstext__abschnitt) > p > img { border-radius: var(--radius); overflow: hidden; height: auto; }
:is(.entry__content, .rechtstext__abschnitt) > figure figcaption { font-size: var(--fs-xs); color: var(--ink-500); margin-top: .5rem; }
/* Rechtstexte: Überschrift links, Text rechts.

   Chris am 08.09.2026: „bau auch die seiten der rechtstexte logisch auf und
   lass die Abschnitte logisch weit laufen."

   Impressum, Datenschutzerklärung, Barrierefreiheit und KI-Einsatz sind keine
   Aufsätze, sondern nummerierte Dokumente – die Datenschutzerklärung allein
   hat zehn Abschnitte. Untereinander in einer Lesespalte ergibt das acht
   Bildschirme, auf denen jede Überschrift wie die vorige aussieht und rechts
   die halbe Seite leer bleibt. Nebeneinander wird der Abschnitt selbst zur
   Einheit: links, wovon er handelt, rechts der Text in derselben Zeilenlänge
   wie überall (52 rem). Die Überschrift bleibt beim Scrollen neben ihrem Text
   stehen, solange er läuft – dieselbe klebende Spalte wie bei den Formularen
   und der Mitgliedschaftsseite.

   Die Klammer um Überschrift und Text setzt die Vorlage beim Ausliefern
   (inc/rechtstext.php), nicht die Redaktion: Im Editor bleibt es eine flache
   Folge aus Überschriften und Absätzen. Ein Raster über diese flache Folge
   hinweg ginge nicht – die automatische Platzierung setzt die zweite
   Überschrift neben den letzten Absatz der ersten, statt eine Zeile
   anzufangen.

   Unter 1024 px stehen die Spalten untereinander: 20 rem links und 52 rem
   rechts brauchen 1184 px, die es dort nicht gibt. */
.entry--rechtstext .entry__content > .rechtstext__abschnitt {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 52rem);
  column-gap: var(--sp-6);
  align-items: start;
  margin-top: var(--sp-8);
}
.rechtstext__abschnitt > h2 {
  grid-column: 1;
  font-size: var(--fs-md); font-weight: 800; line-height: 1.3;
  margin-top: 0;
  position: sticky; top: calc(var(--header-h) + var(--sp-4));
}
.rechtstext__abschnitt > :not(h2) { grid-column: 2; }
.rechtstext__abschnitt > h2 + * { margin-top: 0; }
/* Einspaltig trägt die Stellung nichts mehr – dort muss die Überschrift wieder
   selbst wie eine aussehen und bekommt ihre normale Größe zurück. Sonst steht
   sie so groß da wie ein fett angesetzter Satzanfang im Text darunter. */
@media (max-width: 1024px) {
  .entry--rechtstext .entry__content > .rechtstext__abschnitt { display: block; }
  .rechtstext__abschnitt > h2 {
    position: static; font-size: var(--fs-lg); margin-bottom: var(--sp-4);
  }
}

.entry__foot { padding-bottom: var(--sp-7); }

/* Übersichten ohne Slider (Blog, Suche, Archive) */
.news-grid-static {
  display: grid; gap: clamp(1rem, 1.6vw, 1.75rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

/* Blätternavigation */
.navigation.pagination { margin-top: var(--sp-7); }
.pagination .nav-links { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; }
.pagination .page-numbers {
  display: grid; place-items: center; min-width: 2.75rem; height: 2.75rem; padding-inline: .5rem;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); font-weight: 700;
  transition: background-color .16s, color .16s, border-color .16s;
}
.pagination .page-numbers:hover { border-color: var(--green-600); color: var(--green-700); }
.pagination .page-numbers.current { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Nachladen beim Scrollen. Ersetzt die Blätternavigation, sobald das Skript
   läuft; die Schaltfläche bleibt für Tastatur und Vorleseprogramme. */
.news-mehr {
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  margin-top: var(--sp-7); min-height: 3rem; text-align: center;
}
.news-mehr__status { font-size: var(--fs-xs); color: var(--ink-500); margin: 0; }
.news-mehr__btn[disabled] { opacity: .6; cursor: progress; }
.news-card--neu { animation: fsv-karte-ein .28s ease-out both; }
@keyframes fsv-karte-ein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .news-card--neu { animation: none; } }

/* Hinweis im Adminbereich, solange Platzhalter laufen */
.fsv-demo-hint {
  background: var(--green-50); border: 1px dashed var(--green-200); border-radius: var(--radius);
  padding: .6rem .9rem; font-size: var(--fs-xs); color: var(--green-800); margin-bottom: var(--sp-4);
}

/* =============================================================
   16 Shortcodes: Tabelle und Spielplan auf Inhaltsseiten
   ============================================================= */
.fsv-sc { margin-block: var(--sp-6); }
.fsv-sc__title { font-size: var(--fs-md); margin-bottom: var(--sp-4); }

.sc-games { display: grid; gap: .5rem; }
.sc-game {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-4);
  padding: .65rem .9rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
}
/* Das nächste Spiel: grüner Rahmen, keine Kante links (Chris, 06.10.2026:
   „diesen Klammerstil … nirgendwo auf der Webseite jemals“). Es steht
   ohnehin oben in der Liste. */
.sc-game.is-next { border-color: var(--green-600); }
.sc-game__date {
  width: 50px; text-align: center; background: var(--green-900) var(--fill-dunkel); color: #fff;
  border-radius: var(--radius-sm); padding: .3rem .2rem; flex-shrink: 0;
}
.sc-game__date b { display: block; font-family: var(--font-display); font-style: italic; font-size: var(--fs-base); line-height: 1; }
.sc-game__date span { font-size: .56rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--green-200); }
.sc-game__teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .75rem; min-width: 0; }
.sc-game__pair { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.sc-game__pair:last-child { flex-direction: row-reverse; }
.sc-game__pair b { font-size: var(--fs-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-game__pair b.is-own { font-weight: 800; }
.sc-game__crest { width: 30px; height: 30px; }
.sc-game__score {
  font-family: var(--font-display); font-style: italic; font-size: var(--fs-base);
  white-space: nowrap; padding-inline: .35rem;
}
.sc-game__comp { font-size: var(--fs-xs); color: var(--ink-500); white-space: nowrap; }

@media (max-width: 760px) {
  .sc-game { grid-template-columns: auto 1fr; }
  .sc-game__comp { grid-column: 2; }
  .sc-game__teams { grid-template-columns: 1fr auto; row-gap: .35rem; }
  .sc-game__pair:last-child { flex-direction: row; grid-column: 1 / -1; }
}

/* Tabellen: Ligabezeichnung und Auf-/Abstiegsmarkierung */
.ltable__liga { font-size: var(--fs-sm); color: var(--ink-500); margin-bottom: var(--sp-3); }
.ltable__liga strong { color: var(--ink); }
.ltable__zone {
  font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  padding: .15rem .45rem; border-radius: 3px; white-space: nowrap; margin-left: .35rem;
}
.ltable__zone--aufstieg { background: var(--green-50);  color: var(--green-800); }
.ltable__zone--abstieg  { background: #FDECEA;          color: #8E1F17; }

/* =============================================================
   17 Hinweis beim Verlassen
   ============================================================= */

/* Hinweis, dass die Website verlassen wird. Ein natives <dialog>: Es liegt in der obersten Ebene über allem, auch über
   dem festen Kopf, und braucht deshalb keinen z-index. */
.leave {
  border: 0; margin: auto; color: inherit;
  background: var(--surface); border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.25rem);
  width: min(30rem, calc(100% - 2rem)); max-height: calc(100% - 2rem); box-shadow: var(--shadow-lg);
}
.leave::backdrop { background: rgb(2 27 15 / .78); }
.leave__kicker {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--green-700); margin-bottom: var(--sp-2);
}
.leave__title { font-size: var(--fs-md); margin-bottom: var(--sp-3); }
.leave__frage { display: block; margin-top: var(--sp-3); text-wrap: balance; }
.leave__text { font-size: var(--fs-sm); color: var(--ink-700); }
.leave__text strong { color: var(--green-700); overflow-wrap: anywhere; }
.leave__actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); flex-wrap: wrap; }
.leave__actions .btn { flex: 1 1 0; min-width: max-content; }   /* gleich breit, solange beide in eine Zeile passen */

/* Frage nach fussball.de beim ersten Besuch (main.js). Derselbe Dialog wie
   der Hinweis oben, mitten auf der Seite. Etwas breiter, weil er erklärt,
   was an der Antwort hängt. Beide Knöpfe gleich groß, kein Weg ist
   bequemer als der andere. Der Fokus liegt anfangs auf dem Dialog selbst,
   der Rahmen zeigt ihn nur bei Tastaturbedienung. */
.einwilligung { width: min(38rem, calc(100% - 2rem)); }
.einwilligung:focus { outline: none; }
.einwilligung:focus-visible { outline: 3px solid var(--green-700); outline-offset: 3px; }
.einwilligung__text { font-size: var(--fs-base); }
.einwilligung__klein { font-size: var(--fs-sm); color: var(--ink-700); margin-top: var(--sp-3); }
.einwilligung__klein a { color: var(--green-700); text-decoration: underline; text-underline-offset: .15em; }
.einwilligung__aktionen .btn { min-height: 48px; }
/* Zwei Zwecke, je ein Haken ohne Vorauswahl (EuGH Planet49), erst nach
   „Auswahl“ sichtbar. „Alles erlauben“ ist der Hauptknopf (Chris, 07.11.2026),
   „Nichts erlauben“ bleibt gleich groß und gleich lesbar auf der ersten Ebene. */
.einwilligung__zwecke { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); }
.einwilligung__zweck { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); align-items: start;
                       padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line); border-radius: var(--radius);
                       font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-700); cursor: pointer; }
.einwilligung__zweck:has(input:checked) { border-color: var(--green-600); background: var(--green-50); }
.einwilligung__zweck input { width: 1.25rem; height: 1.25rem; margin-top: .15rem; accent-color: var(--green-700); }
.einwilligung__zweck strong { display: block; color: var(--ink); margin-bottom: .15rem; }
.footer__einstellungen { margin-top: var(--sp-3); font-size: var(--fs-xs); }
.footer__einstellungen a { text-decoration: underline; text-underline-offset: .15em; }
.footer__einstellungen a:hover { color: var(--green-600); }

/* Bildbetrachter (main.js, [data-galerie]): das Foto so groß wie der Schirm
   erlaubt, auf dunklem Grund wie der Hinweis oben. Knöpfe rund und hell,
   damit sie auf jedem Motiv zu sehen sind. */
.bild {
  border: 0; padding: 0; margin: 0; background: transparent; color: #fff;
  width: 100%; height: 100%; max-width: none; max-height: none;
}
.bild::backdrop { background: rgb(2 27 15 / .96); backdrop-filter: blur(6px); }
.bild__figur {
  height: 100%; margin: 0; display: grid; grid-template-rows: 1fr auto;
  padding: clamp(3.5rem, 6vh, 5rem) clamp(1rem, 6vw, 6rem) clamp(1rem, 3vh, 2rem);
}
.bild__rahmen { display: grid; place-items: center; min-height: 0; }
.bild__rahmen picture { display: contents; }
/* Mit display: contents würden die <source> eigene Rasterzeilen belegen und
   das Foto nach unten schieben – alle Kinder liegen deshalb in einer Zelle. */
.bild__rahmen > *, .bild__rahmen picture > * { grid-area: 1 / 1; }
.bild__rahmen img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.bild__text {
  margin-top: var(--sp-3); text-align: center; font-size: var(--fs-sm);
  color: var(--green-100); max-width: 70ch; justify-self: center;
}
.bild__knopf {
  position: absolute; display: grid; place-items: center;
  width: 3rem; height: 3rem; border: 0; border-radius: 50%; cursor: pointer;
  background: rgb(255 255 255 / .92); color: var(--green-900); box-shadow: var(--shadow-sm);
  transition: background .18s, transform .18s;
}
.bild__knopf:hover { background: var(--accent) var(--fill-accent); }
.bild__knopf:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.bild__knopf svg { width: 1.35rem; height: 1.35rem; }
.bild__zu      { top: 1rem; right: 1rem; }
.bild__zurueck { left: 1rem; top: 50%; transform: translateY(-50%); }
.bild__weiter  { right: 1rem; top: 50%; transform: translateY(-50%); }
.bild__zahl {
  position: absolute; top: 1.6rem; left: 50%; transform: translateX(-50%);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; color: var(--green-100);
}
@media (max-width: 760px) {
  /* Auf dem Handy blättert man per Wischen; die Pfeile rücken nach unten,
     damit sie das Foto nicht verdecken. */
  .bild__zurueck, .bild__weiter { top: auto; bottom: 1rem; transform: none; }
  .bild__figur { padding-bottom: 5rem; }
}

/* Partner ohne eigene Website: Hinweis auf Create Better Digital. Die Anzeige
   liegt in einem eigenen hellen Kasten, damit sie vom Vereinstext getrennt
   und als Werbung erkennbar ist. */
.leave--crbd { width: min(34rem, calc(100% - 2rem)); }
.leave--crbd .leave__title span { color: var(--green-700); }
.crbd {
  display: flex; gap: var(--sp-4); align-items: center;
  margin-top: var(--sp-5); padding: var(--sp-4);
  background: var(--surface-2); border-radius: var(--radius);
}
.crbd__logo { flex: none; width: 88px; height: 88px; }
.crbd__label {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-500); margin-bottom: var(--sp-1);
}
.crbd__text { font-size: var(--fs-sm); color: var(--ink-700); }
.crbd__text strong { display: block; color: var(--ink); }
.crbd__alt { font-size: var(--fs-xs); color: var(--ink-500); margin-top: var(--sp-4); text-align: center; }
.crbd__alt a { color: var(--green-700); }
@media (max-width: 420px) {
  .crbd { flex-direction: column; text-align: center; }
}

/* =============================================================
   18 Newsarchiv mit Filter
   Eine schlanke Werkzeugleiste statt eines grauen Formularkastens: Die drei
   Auswahlfelder sind Pillen wie die Chips der Startseite, die Beschriftung
   steht mit im Feld („Jahr · Alle Jahre“), der Pfeil ist gezeichnet statt vom
   Browser geliehen, und alle Elemente haben die Höhe des Knopfs. Die
   Trefferzahl sitzt rechts in derselben Zeile.
   ============================================================= */
.news-filter { margin-bottom: clamp(1.5rem, 2.5vw, 2.25rem); }
.news-filter__row { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.news-filter .field {
  display: inline-grid; grid-template-columns: auto 1fr; align-items: center;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 999px;
  padding-inline-start: 1.15rem;
  transition: border-color .18s, box-shadow .18s;
}
.news-filter .field:hover { border-color: var(--green-500); }
.news-filter .field:focus-within { border-color: var(--green-600); box-shadow: 0 0 0 3px var(--green-50); }
.news-filter label {
  font-size: var(--fs-xs); font-weight: 700; color: var(--ink-500);
  white-space: nowrap; cursor: pointer;
}
.news-filter select {
  appearance: none; -webkit-appearance: none; border: 0; border-radius: 999px;
  background: transparent no-repeat right 1rem center / 1rem
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6A61' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  padding: .85rem 2.6rem .85rem .6rem;
  font-size: var(--fs-sm); font-weight: 700; color: var(--ink); line-height: 1.6;
  min-width: 10.5rem; cursor: pointer;
}
.news-filter select:focus { outline: none; }
.news-filter .link-more { color: var(--green-700); }
.news-filter__count {
  margin-inline-start: auto; font-size: var(--fs-sm); color: var(--ink-500);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.news-empty { font-size: var(--fs-md); color: var(--ink-500); padding: var(--sp-6) 0; }

@media (max-width: 640px) {
  .news-filter__row { flex-direction: column; align-items: stretch; }
  .news-filter .field { display: grid; }
  .news-filter select, .news-filter .btn { width: 100%; }
  .news-filter .link-more { align-self: flex-start; }
  .news-filter__count { margin-inline-start: 0; padding-top: var(--sp-1); }
}

/* =============================================================
   19 Sponsoren im Footer und belegte Werbeflächen
   ============================================================= */
.footer-sponsors {
  display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.5rem); flex-wrap: wrap;
  padding-block: clamp(1.5rem, 2.5vw, 2.25rem);
  border-bottom: 1px solid var(--line);
}
.footer-sponsors__label {
  font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase;
  letter-spacing: .12em; color: var(--ink-500); flex-shrink: 0;
}
.footer-sponsors__list {
  display: flex; align-items: center; gap: clamp(1.25rem, 2.5vw, 2.75rem);
  flex-wrap: wrap; flex: 1;
}
.footer-sponsors__list li { flex-shrink: 0; }
.footer-sponsors__list a {
  display: flex; align-items: center;
  /* Dieselbe Höhe wie die Leiste unter dem Kopf – gleiche Behandlung für alle.
     flex-shrink: 0 oben ist zwingend: ohne das quetscht die Zeile breite Logos
     zusammen und schneidet sie ab. */
  height: clamp(34px, 2.9vw, 46px);
  flex-shrink: 0;
}
.footer-sponsors__list img {
  height: 100%; width: auto; object-fit: contain;
  filter: grayscale(1) opacity(.62);
  transition: filter .25s var(--ease);
}
.footer-sponsors__list a:hover img { filter: grayscale(0) opacity(1); }
.footer-sponsors .link-more { color: var(--green-700); flex-shrink: 0; }

@media (max-width: 640px) {
  .footer-sponsors { flex-direction: column; align-items: flex-start; }
}

/* Trefferliste des Assistenten (Stufe 2: Suche über eigene Inhalte) --------- */
.chat-hits { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .55rem; }
.chat-hits li {
  padding: .55rem .7rem;
  background: var(--green-050, #F2F8F3);
  border-radius: var(--radius-sm);
}
.chat-hits a { font-weight: 600; color: var(--green-800, #06301A); text-decoration: underline; }
.chat-hits a:hover { text-decoration: none; }
.chat-hits__typ {
  display: inline-block; margin-left: .35rem; padding: .05rem .4rem;
  font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  background: var(--green-600); color: #fff; border-radius: 999px; vertical-align: .08em;
}
.chat-hits__text { display: block; margin-top: .2rem; font-size: .82rem; line-height: 1.45; opacity: .8; }

/* Kompakte Tabelle für Mannschaftsseiten -----------------------------------
   Die volle Tabelle ist auf einer Mannschaftsseite zu mächtig. „halb“ nimmt
   50 % und lässt den Text daneben laufen; „klein“ reduziert auf die vier
   Spalten, die jemand wirklich sucht.                                       */
.fsv-sc--halb {
  max-width: min(50%, 34rem);
  float: inline-start;
  margin-inline-end: clamp(1rem, 2.5vw, 2rem);
  margin-block-end: 1.25rem;
}
.fsv-sc--halb + * { clear: none; }

.fsv-sc__saison {
  display: inline-block;
  margin-inline-start: .5rem;
  font-size: .78em;
  font-weight: 500;
  color: var(--ink-soft, #4A5A50);
}

.ltable--klein { font-size: .92rem; }
.ltable--klein th,
.ltable--klein td { padding-block: .38rem; }
.ltable--klein .ltable__crest { inline-size: 1.15rem; block-size: 1.15rem; }
.ltable--klein .ltable__team span {
  /* Vereinsnamen sind lang, die halbe Breite ist schmal: eine Zeile, mit
     Auslassung statt Umbruch – sonst wird jede Zeile unterschiedlich hoch. */
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-inline-size: 12rem;
}

/* Unter 720 px hat die halbe Breite keinen Sinn mehr – daneben ist kein Platz */
@media (max-width: 720px) {
  .fsv-sc--halb {
    max-width: none;
    float: none;
    margin-inline-end: 0;
  }
  .ltable--klein .ltable__team span { max-inline-size: none; }
}

/* Vor dem ersten Spieltag ist es eine Teilnehmerliste, keine Tabelle.
   Die Punktespalten bleiben sichtbar (alle auf 0), damit erkennbar ist,
   dass hier später gezählt wird – aber ohne Platzziffer, die noch nichts sagt. */
.fsv-sc--teilnehmer .ltable__note strong { color: var(--green-700, #06301A); }
.fsv-sc--teilnehmer .ltable tbody tr.is-own { font-weight: 600; }


/* Hinweiskarte allein auf der Fläche ---------------------------------------
   Als schmale Seitenspalte funktioniert die Karte; über die ganze Breite
   gezogen braucht sie ein anderes Layout, sonst schwimmen Text und Knopf
   auseinander. */

@media (max-width: 860px) {
}

/* Jubiläumsband ------------------------------------------------------------
   Dieselben diagonalen Streifen wie bei der Mitgliedskarte: Der Baustein soll
   ein Blickfang sein, kein Textkasten. Die Jahreszahl liegt als großes
   Schmuckelement hinten rechts und wird für Screenreader ausgeblendet, weil
   sie dieselbe Auskunft wie die Überschrift gibt.                           */
.jubilee {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(1.75rem, 4vw, 3.25rem) clamp(1.5rem, 3.5vw, 3rem);
  border-radius: var(--radius-lg);
  background: var(--green-900) var(--fill-flaeche);
  color: #fff;
}
.jubilee__stripes {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-linear-gradient(
    115deg,
    transparent 0 22px,
    rgb(255 255 255 / 4.5%) 22px 44px
  );
}
.jubilee__kicker {
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .4rem;
}
.jubilee__title {
  font-size: clamp(1.75rem, 4vw, 3rem);
  line-height: 1.05;
  margin-bottom: .6rem;
  text-wrap: balance;
}
.jubilee__text {
  max-inline-size: 46ch;
  color: var(--green-100);
  margin-bottom: 0;
}
.jubilee__action { margin-top: clamp(1rem, 2vw, 1.5rem); margin-bottom: 0; }

/* Die Jahreszahl als Schmuck: nie über dem Text, deshalb hinter ihm und
   auf schmalen Schirmen ganz weg. */
.jubilee__mark {
  position: absolute;
  z-index: -1;
  inset-block-start: 50%;
  inset-inline-end: clamp(1rem, 3vw, 3rem);
  transform: translateY(-50%);
  margin: 0;
  font-size: clamp(7rem, 17vw, 15rem);
  font-weight: 900;
  line-height: .8;
  letter-spacing: -.04em;
  color: rgb(198 242 78 / 11%);
  pointer-events: none;
}
@media (max-width: 860px) {
  .jubilee__mark { display: none; }
}

/* Textverweis auf dunklem Grund */
.link-more--invers { color: var(--accent); }
.link-more--invers:hover { color: #fff; }

/* =============================================================
   16 Anfahrt: zwei Sportanlagen, je mit Navi-Karte und Lageplan
   ============================================================= */
/* Kopf: Titel, ein Satz, Sprungmarken zu den Anlagen. */
.anfahrt__head { padding-bottom: 0; }   /* der Abstand kommt von der ersten Anlage */
.anfahrt__head .section-sub { max-width: 62ch; }
.anfahrt__jump { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: var(--sp-5); }
.anfahrt__jump .filter-chip { display: inline-flex; align-items: center; gap: .45rem; }
.anfahrt__jump .filter-chip svg { width: 1em; height: 1em; color: var(--green-600); }
.anfahrt__notiz { margin-top: var(--sp-6); padding-bottom: 0; max-width: 62ch; }
.anfahrt__venue { scroll-margin-top: calc(var(--header-h) + 1rem); }

/* Anlage: Adresse links, Karte rechts, Wegbeschreibungen darunter über die
   ganze Breite. Die Karte bekommt etwas mehr Platz als der Text – sie ist
   das, was man sich einprägt. */
.venue {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: clamp(1.5rem, 3vw, 3.5rem); align-items: start;
}
.venue__info  { display: grid; gap: var(--sp-4); align-content: start; }
.venue__title { font-size: var(--fs-xl); }
.venue__lead  { color: var(--ink-500); font-size: var(--fs-md); max-width: 46ch; }

/* Die Navi-Karte: das Wichtigste auf der Seite. Dunkelgrün mit denselben
   Streifen wie Jubiläumsband und Mitgliedskarte, Lime nur für Kicker und den
   einen Hauptknopf. Wer nur die Adresse sucht, findet sie hier auf einen Blick. */
.navi {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: var(--sp-4);
  padding: clamp(1.25rem, 2.5vw, 2rem);
  border-radius: var(--radius-lg); background: var(--green-900) var(--fill-flaeche); color: #fff;
}
.navi::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: repeating-linear-gradient(115deg, transparent 0 22px, rgb(255 255 255 / 4.5%) 22px 44px);
}
.navi__kicker {
  display: flex; align-items: center; gap: .5rem;
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent);
}
.navi__kicker svg { width: 1.2em; height: 1.2em; }
.navi__address { font-style: normal; }
.navi__address b { display: block; font-size: var(--fs-lg); line-height: 1.15; letter-spacing: -.01em; }
.navi__address span { color: var(--green-100); font-size: var(--fs-md); }
.navi__note {
  color: var(--green-100); font-size: var(--fs-sm); line-height: 1.5;
}
.navi__actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: var(--sp-1); }

/* Lageplan: eigene Karte aus OpenStreetMap-Daten, kein Fremdinhalt. */
.venue__map {
  position: relative; margin: 0; overflow: hidden;
  border-radius: var(--radius-lg); border: 1px solid var(--line);
  background: var(--surface-3); box-shadow: var(--shadow-sm);
}
.venue__map img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.venue__map figcaption {
  position: absolute; right: .5rem; bottom: .5rem;
  font-size: .68rem; color: var(--ink-500); background: rgb(255 255 255 / .88);
  padding: .15rem .5rem; border-radius: 4px;
}

/* Fotos der Anlage: eine Reihe über die ganze Breite, am Desktop gleich
   breit nebeneinander. Auf schmalen Schirmen läuft die Reihe waagerecht und
   rastet je Bild ein, wie die News-Reihe – der Anschnitt des nächsten Bildes
   zeigt, dass es weitergeht. */
.venue__fotos {
  grid-column: 1 / -1;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: clamp(.75rem, 1.2vw, 1.25rem);
}
.venue__foto {
  overflow: hidden; border-radius: var(--radius-lg);
  background: var(--surface-3); box-shadow: var(--shadow-sm);
}
.venue__foto a { display: block; cursor: zoom-in; }
.venue__foto a:focus-visible { outline: 3px solid var(--green-600); outline-offset: -3px; }
.venue__foto img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  transition: transform .4s var(--ease);
}
.venue__foto a:hover img { transform: scale(1.03); }
@media (max-width: 760px) {
  .venue__fotos {
    grid-auto-columns: 85%;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    /* randlos wie die übrigen Slider, siehe .slider__viewport */
    margin-inline: calc(-1 * var(--kante));
    padding-inline: var(--kante);
    scroll-padding-inline: var(--kante);
  }
  .venue__fotos::-webkit-scrollbar { display: none; }
  .venue__foto { scroll-snap-align: start; }
}

/* Wegbeschreibungen: eine Karte je Richtung, nebeneinander solange Platz ist. */
.venue__routes { grid-column: 1 / -1; margin-top: var(--sp-2); }
.routes__title { font-size: var(--fs-md); margin-bottom: var(--sp-4); }
.routes {
  display: grid; gap: clamp(.75rem, 1.2vw, 1.25rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.route {
  display: grid; gap: .6rem; align-content: start;
  padding: var(--sp-5); border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); transition: border-color .18s, box-shadow .18s;
}
.route:hover { border-color: var(--green-200); box-shadow: var(--shadow-sm); }
.route__from {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--fs-sm); font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--green-700);
}
.route__from svg { width: 1.1em; height: 1.1em; flex-shrink: 0; }
.route p { color: var(--ink-700); line-height: 1.55; }

@media (max-width: 1024px) {
  .venue { grid-template-columns: 1fr; }
}

/* =============================================================
   17 Mannschaftsseite (single-fsv_team.php)
   ============================================================= */

/* Hero: Tafel links, Foto rechts. Kein Text über dem Foto – auf einem
   Mannschaftsfoto stehen zwei Dutzend Gesichter, und ein Verlauf mit
   Schrift darüber deckt immer jemanden zu. Die Tafel nimmt Kopfzeile, Name,
   Zahlen und das nächste Spiel; das Foto bekommt seine Fläche für sich.
   Dieselbe 4-px-Fuge wie im Hero-Mosaik der Startseite. */
/* Der Kopf einer Mannschaftsseite.

   Chris am 07.09.2026: „Grün direkt auf Grün finde ich halt echt schwierig."
   Er hatte recht: Kopf und Kaderfläche waren beide dunkelgrün und trugen
   dieselben Schrägstreifen. Übereinander lasen sie sich als ein einziges,
   endloses Feld – man sah nicht, wo das eine aufhört.

   Zwei Eingriffe, und beide betreffen nur den Kopf, weil die Kaderfläche
   bleiben soll wie sie ist:

     • Die Streifen gehören jetzt allein dem Kader (und der Mitgliedskarte).
       Zwei Flächen mit derselben Textur nebeneinander sind eine Fläche.
     • Unter dem Kopf liegt eine Kante in der Signalfarbe. Sie trennt hart,
       egal was folgt – auch dann, wenn das Nächste wieder dunkelgrün ist. */

/* ---------- Der Kopf einer Mannschaftsseite: „Die Bühne" ----------

   Eine dunkle Fläche, darauf das Mannschaftsfoto als Ganzes, darunter der
   Name. Chris hat den Entwurf am 07.09.2026 aus zwei Vorschlägen gewählt, mit
   einer Bedingung: „ohne dass Teammitglieder irgendwie abgeschnitten oder
   komplett überdeckt werden."

   Daraus folgen zwei Regeln, die den ganzen Aufbau bestimmen:

     • Das Bild wird nie zugeschnitten. Kein object-fit: cover, keine feste
       Höhe – die Höhe folgt dem Seitenverhältnis des Fotos. Bei fünfzehn
       verschiedenen Mannschaftsfotos kann kein Ausschnitt garantieren, dass
       niemand angeschnitten wird.
     • Die Schrift liegt unter dem Bild, nicht darauf. Ein Textblock über dem
       Foto sähe auf einem Bild gut aus und verdeckte auf dem nächsten drei
       Spieler.

   Damit ist der Kopf auf jeder Breite derselbe Aufbau – Handy, Tablet und
   Bildschirm brauchen keine Sonderfälle, weil es keinen Ausschnitt gibt, der
   kippen könnte. */

.team-hero {
  position: relative;
  /* Über die volle Fensterbreite, egal wo der Baustein steht. Der Kopf sitzt
     im Inhalt der Mannschaft und damit in der Textspalte; ohne diese Zeile
     hört das Foto dort auf, wo der Text aufhören würde. Steht er ohnehin über
     die volle Breite, rechnet sich die Zeile zu null aus und ändert nichts. */
  width: 100vw; max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  /* Ausgeblendet wird ins Vereinsdunkelgrün, nicht ins Fast-Schwarz. Chris am
     07.09.2026: „lass es uns nach unten lieber ins Dunkelgrün ausfaden, sonst
     ist das too much, too dark." */
  background: var(--green-900);
  color: #fff;
  padding-bottom: 6px;                    /* Platz für die Kante */
}
/* Die Kante schließt den Kopf ab – und trennt ihn von dem, was folgt. */
.team-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
  background: var(--accent);
}

/* Die Bühne: das Mannschaftsfoto als Ganzes auf der dunklen Fläche.

   Vom 24.09. bis 19.10.2026 stand hier ein fester Ausschnitt (21:9 auf dem
   Schirm, 4:5 auf dem Handy, object-fit: cover). Das hat genau das getan, was
   Chris am 07.09.2026 ausgeschlossen hatte: Der Verein meldete am 19.10.2026
   fehlende Köpfe in der hinteren Reihe, abgeschnittene Spieler unten und auf
   dem Handy links und rechts. Ein Ausschnitt passt nie auf alle Fotos, und das
   Feld „Bildausschnitt", das ihn steuern sollte, gab es nie.

   Jetzt bestimmt das Foto die Form: volle Breite, Höhe nach seinem eigenen
   Seitenverhältnis. Nur nach oben ist es gedeckelt, damit auf dem Schirm unter
   dem Foto noch der Name zu sehen ist. Ist es dadurch schmaler als das
   Fenster, steht es mittig auf der grünen Fläche. Niemand wird angeschnitten,
   auf keiner Breite. */
.team-hero__bild {
  position: relative; margin: 0;
  width: 100%;
  display: flex; justify-content: center;
  background: var(--green-900);
}
.team-hero__bild img {
  display: block;
  /* Beide Maße automatisch, beide gedeckelt: So hält der Browser das
     Seitenverhältnis, egal welche Grenze zuerst greift. */
  width: auto; height: auto;
  max-width: 100%;
  /* Kopfleiste, Foto, Name und Liga sollen in den ersten Bildschirm passen:
     Fensterhöhe minus rund 15rem für Leiste und Schrift. Nach unten nicht
     unter 320px, damit das Foto auf flachen Schirmen nicht zur Briefmarke
     wird. Ist es durch die Grenze schmaler als das Fenster, steht es mittig. */
  max-height: max(320px, min(100svh - 15rem, 860px));
}
/* Der Auslauf am unteren Bildrand.

   Chris am 07.09.2026: „im Prinzip faden wir nach Schwarz aus". Der Verlauf
   bleibt im untersten Zehntel, weil dort jetzt die vordere Reihe steht und
   nicht mehr nur Rasen wie beim alten Ausschnitt. */
.team-hero__bild::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top,
    var(--green-900) 0%,
    rgb(4 48 26 / .35) 4%,
    transparent 11%);
}

.team-hero__inhalt {
  position: relative; z-index: 2;
  /* Keine Überlagerung mehr: Die Schrift steht unter dem Bild auf der Fläche,
     in die das Bild ausläuft. Beide tragen dieselbe Farbe, deshalb sieht man
     die Kante nicht. */
  background: var(--green-900);
  padding: clamp(.4rem, 1vw, .8rem) 0 clamp(1.6rem, 3vw, 2.6rem);
}

.team-hero .eyebrow { color: var(--accent); }
.team-hero__title {
  font-size: var(--fs-2xl); margin-block: var(--sp-1) var(--sp-3); line-height: .86;
  text-shadow: 0 2px 30px rgb(2 27 15 / .5);
}
.team-hero__lead { font-size: var(--fs-md); color: rgb(255 255 255 / .86); max-width: 48ch; margin-bottom: var(--sp-4); }

/* Zahlen links, Knöpfe rechts – auf schmalen Schirmen untereinander */
.team-hero__fuss {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-4) clamp(1.5rem, 4vw, 3rem); flex-wrap: wrap;
}
.team-hero__facts { display: flex; flex-wrap: wrap; gap: clamp(1.25rem, 2.5vw, 2.6rem); margin: 0; }
.team-hero__facts div { display: flex; flex-direction: column-reverse; }
.team-hero__facts dd {
  margin: 0;
  font-family: var(--font-display); font-style: italic; font-size: var(--fs-xl);
  color: var(--accent); line-height: 1; font-variant-numeric: tabular-nums;
}
.team-hero__facts dt {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .12em;
  font-weight: 700; color: rgb(255 255 255 / .72); margin-top: .3rem;
}
.team-hero__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* Handy: kein eigener Ausschnitt mehr. Das Foto steht in voller Breite und
   ganz da, wie auf dem Schirm. */
@media (max-width: 700px) {
  .team-hero__title { font-size: var(--fs-2xl); }
}

/* Ohne Foto: dieselbe Bühne, aber gezeichnet statt fotografiert.

   Zehn Mannschaften haben keins. Ein geliehenes Bild einer anderen Mannschaft
   wäre eine Lüge, eine leere Fläche ein Loch – also das Vereinswappen als
   Wasserzeichen auf den Schrägstreifen. Es sieht nach Absicht aus und nicht
   nach Fehler, und der Hinweis darunter sagt, was fehlt. */
.team-hero--plain .team-hero__bild {
  width: 100%; aspect-ratio: 3 / 1; max-height: min(44vh, 380px); min-height: 220px;
  background: var(--green-900);
  display: grid; place-items: center;
}
.team-hero--plain .team-hero__bild::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg, transparent 0 26px, rgb(255 255 255 / .045) 26px 52px);
}
/* Das Wappen: ganz und scharf, in der Mitte der Bühne.

   Bis zum 24.09.2026 griff hier die Regel für das Foto (`.team-hero__bild img`:
   absolut, volle Fläche, object-fit: cover). Sie ist spezifischer als eine
   einzelne Klasse – das Wappen wurde auf Bühnenbreite aufgeblasen und
   beschnitten, zu sehen war nur ein Stück „FSV". Chris: „man kann auch nicht
   sehen, dass da FSV steht." Deshalb steht der Selektor hier doppelt, damit
   er die Fotoregel schlägt.

   Die dunkle Fassung des Wappens, nicht die helle: Ein weißes Schild auf der
   dunklen Bühne leuchtet wie ein Loch. Das dunkle Schild mit weißer Kante
   gehört zur Fläche und bleibt trotzdem lesbar. */
.team-hero__bild img.team-hero__marke {
  position: relative; inset: auto; z-index: 2;
  width: auto; height: clamp(110px, 15vw, 190px);
  object-fit: contain;
  filter: drop-shadow(0 18px 40px rgb(0 0 0 / .35));
  transform: translateY(-6%);
}
/* Ruhende Mannschaft (Ü50, Frauen): keine Bühne, nur die Schrift auf den
   Schrägstreifen. Der Hinweis darunter soll ohne Scrollen zu sehen sein. */
.team-hero--ruht .team-hero__inhalt {
  padding-block: clamp(1.75rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.25rem);
  background:
    repeating-linear-gradient(115deg, transparent 0 26px, rgb(255 255 255 / .045) 26px 52px),
    var(--green-900);
}
.team-hero--ruht .team-hero__title { font-size: clamp(2.2rem, 1.4rem + 3.2vw, 4rem); }
.team-hero--ruht .team-hero__lead { margin-bottom: 0; }
/* Und der Hinweis rückt näher an den Kopf – der weiße Abstand darüber war
   gebaut für Vorstellungstext nach einem großen Foto. */
.team-text:has(.team-hero--ruht) [data-modul="team-kontakt"] > .section { padding-top: var(--sp-6); }

/* Ohne Foto liegt kein Bild unter der Schrift – der Verlauf darf schwächer sein */
.team-hero--plain .team-hero__bild::after {
  background: linear-gradient(to top, var(--green-900) 0%, rgb(4 48 26 / .35) 18%, transparent 45%);
}
.team-hero__gesucht {
  display: inline-flex; align-items: center; gap: .55rem;
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: rgb(255 255 255 / .72);
}
/* Früher stand daneben ein Knopf „eins schicken" mit der Vereinsadresse.
   Chris am 24.09.2026: „das mit dem Schicken bitte raus." Der Hinweis bleibt. */

@media (max-width: 1024px) {
  .team-hero { grid-template-columns: 1fr; min-height: 0; }
  .team-hero__media { order: -1; min-height: 0; aspect-ratio: 16 / 10; max-height: 62vh; }
  .team-hero__media img { object-position: center 40%; }
  .team-hero__inner { padding-block: clamp(1.75rem, 4vw, 3rem) var(--sp-5); }
}
@media (max-width: 560px) {
  .team-hero__media { aspect-ratio: 4 / 3; }
  .team-hero__actions .btn { flex: 1 1 auto; }
  .team-hero__facts { gap: 1rem 1.5rem; }
}

/* Vorstellungstext */
.team-text { padding-bottom: 0; }

/* Spiele: Zwischentitel über den beiden Listen */
.team-spiele__h {
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-500); margin-block: var(--sp-5) var(--sp-3);
}
.team-spiele__h:first-child { margin-top: 0; }
.team-spiele .sc-game__comp a { color: var(--green-700); font-weight: 700; border-bottom: 2px solid var(--green-100); }
.team-spiele .sc-game__comp a:hover { border-color: var(--green-600); }
.sc-game__score--offen { color: var(--ink-300); }
.team-spiele .duo__col + .duo__col { margin-top: var(--sp-6); }
@media (min-width: 1280px) {
  .team-spiele .duo--two { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .team-spiele .duo__col + .duo__col { margin-top: 0; }
  /* Die halbe Spalte ist breit genug für Sp und Pkt, nicht für S/U/N und Tore */
  .team-spiele .ltable__team { min-width: 0; }
}

/* Kader: dunkle Fläche, Namen in Spalten je Mannschaftsteil */
/* Der Kader ist hell.

   Chris am 07.09.2026: „können wir den ganzen Kaderbereich evtl. auch heller
   darstellen? die ganze Seite ist mir aktuell viel zu dunkel." Damit trägt der
   Kopf mit dem Foto die einzige dunkle Fläche der Seite, alles darunter ist
   hell – und die Namen stehen dort, wo man Listen liest: auf Papierweiß. */
.team-kader { position: relative; isolation: isolate; overflow: hidden; }
.team-kader__stripes {
  position: absolute; inset: 0; z-index: -1;
  background: repeating-linear-gradient(115deg, transparent 0 22px, rgb(0 101 44 / 3%) 22px 44px);
}
.team-kader__h {
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--green-700); margin-bottom: var(--sp-3);
}
.team-staff {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
/* Alles beginnt oben, nicht in der Mitte. Chris am 08.09.2026: „setze den Text
   aber an sich immer oben ab, damit das auf gleicher Zeilenhöhe mit der anderen
   Kachel ist." Die Karten sind als Rasterzellen gleich hoch, ihr Inhalt ist es
   nicht: Elke Keller bringt Rolle, Nummer und Adresse mit, Charlotte Maier nur
   die Rolle. Zentriert rutschte deren Name auf die Höhe der dritten Zeile der
   Nachbarin – die Namen standen treppenförmig. Oben abgesetzt beginnt jeder
   Name auf derselben Linie, egal wie viel darunter folgt. */
.team-staff__card {
  display: flex; align-items: flex-start; gap: .85rem;
  padding: .85rem 1rem; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line);
}
.team-staff__avatar {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--green-600); color: #fff;
  font-family: var(--font-display); font-style: italic; font-size: .95rem; letter-spacing: .02em;
}
.team-staff__text { display: grid; gap: .1rem; min-width: 0; }
.team-staff__text b { font-size: var(--fs-base); line-height: 1.2; }
.team-staff__text span { font-size: var(--fs-xs); color: var(--green-700); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
/* Die Nummer bleibt Text, kein Knopf – auf dem Handy trotzdem antippbar. */
/* Telefon und E-Mail auf der Trainerkarte sehen gleich aus: beides sind Wege
   zur selben Person, keiner ist wichtiger. Die Adresse steht seit dem
   08.09.2026 dabei – sie stand vorher nur im Band oben, und wer den Stab
   liest, sucht sie beim Namen. Umbruch erlaubt: Eine Mailadresse ist länger
   als eine Nummer und darf die schmale Karte nicht sprengen. */
.team-staff__tel, .team-staff__mail { font-size: var(--fs-xs); color: var(--ink-500); text-decoration: none; }
.team-staff__mail { overflow-wrap: anywhere; }

/* Das Wort vor der Nummer (fsv_tel_art): klein, in Versalien, leiser als die
   Nummer. Es sagt, was man anruft, und soll nicht mit ihr konkurrieren. */
.tel-art { font-size: .8em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
/* Auf der Trainerkarte ist schon die Nummer klein und grau; weiter
   abgeschwächt ginge das Wort unter. */
.team-staff__tel .tel-art { font-size: .9em; opacity: 1; }
.team-staff__tel:hover, .team-staff__tel:focus-visible,
.team-staff__mail:hover, .team-staff__mail:focus-visible { color: var(--green-700); text-decoration: underline; }

/* ---------- Ansprechpartner der Mannschaft ----------

   Eine Karte, kein Band: Ein grünes Feld mit einem Satz darin sah nach Fläche
   ohne Inhalt aus (Chris am 07.09.2026: „das ist quasi nicht gestyled").
   Jetzt trägt sie dieselben Bauteile wie der Rest der Seite – Initialen wie im
   Trainerstab, Name in der Auszeichnungsschrift, zwei echte Knöpfe. Drei
   Spalten nebeneinander, auf schmalen Schirmen untereinander. */

.kontaktkarte {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--radius-lg);
  /* Hell wie der Rest der Seite. Ohne die kräftige Kante links, die hier
     einmal stand – Chris am 07.09.2026: „dieser Style mit der Klammer bitte
     nie irgendwo auf der Seite." Auffallen soll die Karte über die Initialen
     und die beiden Knöpfe, nicht über einen Balken. */
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

/* Die Initialen: dieselbe Marke wie beim Trainerstab, nur größer – wer die
   Seite zweimal gesehen hat, erkennt sie wieder. */
.kontaktkarte__avatar {
  display: grid; place-items: center;
  width: 4.25rem; height: 4.25rem; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-display); font-style: italic;
  font-size: var(--fs-md); line-height: 1; letter-spacing: -.02em;
}

.kontaktkarte .eyebrow { color: var(--green-700); }
.kontaktkarte__text { min-width: 0; display: grid; gap: .15rem; }
.kontaktkarte__name {
  font-size: var(--fs-lg); line-height: 1; margin: 0;
  text-transform: uppercase; hyphens: auto; overflow-wrap: anywhere;
}
.kontaktkarte__rolle {
  margin: 0; font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--green-700);
}
.kontaktkarte__satz { margin: .35rem 0 0; font-size: var(--fs-sm); color: var(--ink-700); }

.kontaktkarte__wege { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* Trainingszeiten über der Ansprechpartner-Karte. Zwei Spalten je Zeile: links
   der Tag, rechts Uhrzeit und Ort – so stehen die Tage untereinander auf einer
   Kante und man findet den richtigen, ohne zu lesen. Auf dem Handy klappt es
   auf zwei Zeilen um, weil „Dienstag" plus „16:15 Uhr bis 17:15 Uhr in
   Breitscheid" dort nicht nebeneinander passt. */
/* Der Vorstellungstext im Abschnitt „Training, Kontakt": erster Absatz als
   Anriss, wie im Beitragslayout, danach normaler Fließtext. Er steht seit dem
   08.09.2026 hier drin statt darüber und braucht deshalb die Größen selbst –
   .entry__content greift auf ihn nicht mehr, er ist kein Kind davon. */
.team-vorstellung { margin-bottom: var(--sp-5); }
.team-vorstellung > * + * { margin-top: var(--sp-4); }
/* Nur die eigenen Absätze, nicht die in eingesetzten Karten: Im Vorstellungs-
   text der Alten Herren steht ein Ansprechpartner-Block, der zu Personenkarten
   wird. Ohne den Kindselektor bekam deren Funktionszeile Fließtextgröße – 20
   statt 12,7 Pixel, und die Karte sah neben dem Trainerstab falsch aus.
   Dieselbe Trennung wie bei den Links und Listen im Beitragstext. */
.team-vorstellung > p { font-size: var(--fs-md); line-height: 1.65; }
/* Kein Anriss mehr. Chris am 24.09.2026 zu den Alten Herren: „die Typo hier
   ist zu groß im ersten Satz." Der erste Absatz hat dieselbe Größe wie die
   übrigen und hebt sich nur durch die dunklere Farbe ab. */
.team-vorstellung > p:first-child { color: var(--ink); }

/* Hinweis einer Mannschaft, die gerade ruht (Ü50, Frauen, Stand 24.09.2026).
   Er ersetzt Vorstellung und Trainingszeiten und steht über der Kontaktkarte:
   erst die Nachricht, dann der Knopf zur Anmeldung, dann die Person. */
.team-ruht { margin-bottom: var(--sp-8); max-width: 46rem; }
.team-ruht > * + * { margin-top: var(--sp-4); }
.team-ruht__titel {
  margin: 0; font-size: var(--fs-xl); line-height: 1.05;
  text-transform: uppercase; hyphens: auto; overflow-wrap: anywhere;
}
.team-ruht > p { font-size: var(--fs-md); line-height: 1.65; }
.team-ruht > .team-ruht__knopf { margin-top: var(--sp-5); }

.team-training { margin-bottom: var(--sp-5); }
.team-training__liste { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }
.team-training__liste li {
  display: grid; grid-template-columns: minmax(0, max-content) 1fr; gap: var(--sp-2) var(--sp-4);
  padding-bottom: var(--sp-2); border-bottom: 1px solid var(--line);
}
.team-training__liste li:last-child { border-bottom: 0; padding-bottom: 0; }
/* Zeile ohne erkennbaren Wochentag: Sie nimmt beide Spalten, statt die
   Zeitspalte leer zu lassen und den Text eingerückt beginnen zu lassen. */
.team-training__frei { grid-template-columns: 1fr; }
.team-training__liste b { font-weight: 700; }
.team-training__liste span { color: var(--ink-700); }
@media (max-width: 560px) {
  .team-training__liste li { grid-template-columns: 1fr; gap: 0; }
}

/* Steht dort die Geschäftsstelle, ist das kein Fehler, aber auch kein
   Idealzustand – die ruhigeren Initialen sagen das, ohne es auszuschreiben. */
.kontaktkarte--verein .kontaktkarte__avatar { background: var(--green-100); color: var(--green-900); }

@media (max-width: 767px) {
  .kontaktkarte { grid-template-columns: auto 1fr; gap: var(--sp-4); }
  .kontaktkarte__wege { grid-column: 1 / -1; }
  .kontaktkarte__wege .btn { flex: 1 1 12rem; }
}

.team-roster {
  display: grid; gap: clamp(1.25rem, 2.5vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.team-roster__title {
  display: flex; align-items: baseline; gap: .6rem;
  font-family: var(--font-display); font-style: italic; text-transform: uppercase;
  font-size: var(--fs-lg); line-height: 1; color: var(--green-700);
  padding-bottom: .75rem; border-bottom: 2px solid var(--green-100); margin-bottom: .5rem;
}
.team-roster__n {
  font-family: var(--font-sans); font-style: normal; font-size: var(--fs-xs); font-weight: 800;
  color: var(--accent-ink); background: var(--accent); border-radius: 999px;
  padding: .15rem .55rem; letter-spacing: .04em; transform: translateY(-.15rem);
}
.team-roster__list li {
  padding: .55rem 0; border-bottom: 1px solid var(--line);
  font-weight: 600; font-size: var(--fs-base); line-height: 1.3;
}
.team-roster__list li:last-child { border-bottom: 0; }

/* Info: Heimspiele, Training, Ansprechpartner, Mitspielen */
.team-info {
  display: grid; gap: clamp(.75rem, 1.2vw, 1.25rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.team-info__card {
  display: grid; gap: .35rem; align-content: start;
  padding: clamp(1.1rem, 1.6vw, 1.5rem); border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line);
}
.team-info__card--cta { background: var(--green-50); border-color: var(--green-100); }
.team-info__icon {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--green-600); color: #fff; margin-bottom: .35rem;
}
.team-info__icon svg { width: 20px; height: 20px; }
.team-info__label { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--green-700); }
.team-info__text { font-size: var(--fs-sm); color: var(--ink-700); }
.team-info__text a { color: var(--green-700); border-bottom: 2px solid var(--green-100); }
.team-info .link-more { margin-top: .35rem; font-size: var(--fs-sm); }

/* Weitere Mannschaften: eine einzelne Kachel (etwa bei den Juniorinnen)
   soll nicht über die volle Breite laufen, sondern Kachelmaß behalten. */
.team .team-grid > :only-child { max-width: 480px; }


/* ---------- 13 Module im Seitenfluss ----------

   Ein Modul ist ein fertiger Abschnitt in voller Breite. Steht es im Text
   einer Seite, muss es aus der Textspalte ausbrechen – sonst säße das
   Sponsorenband in 46rem Breite mitten im Fließtext.

   Der Ausbruch hängt bewusst an .wrap--text und nicht am Modul selbst: Auf
   der Startseite liegt das Modul ohnehin über die volle Breite, dort soll
   gar nichts gerechnet werden. body hat overflow-x: hidden (Zeile 91),
   deshalb kostet die Breite von 100vw keine Querleiste.                    */

.wrap--text > .fsv-modul--voll { margin-inline: calc(50% - 50vw); }

/* Abschnitte bringen ihren eigenen Abstand mit (padding-block). Der
   Textabstand von .entry__content > * + * käme obendrauf – und am Ende
   zusätzlich das padding-bottom des Inhaltsbereichs. Beides weg, sonst
   klafft unter einem Modul eine Lücke aus zwei Abständen. */
.entry__content > .fsv-modul { margin-top: 0; }
.entry__content > .fsv-modul:last-child { margin-bottom: calc(var(--sp-7) * -1); }

/* Text zwischen zwei Bausteinen braucht denselben Abstand, den ein eigener
   Abschnitt hätte. Auf der Mannschaftsseite steht der Vorstellungstext
   zwischen Foto und Spielplan: ohne diese Zeile klebte er am Foto, weil der
   Baustein seinen Abstand nach innen legt und nicht nach außen. */
.team-text > .fsv-modul + :not(.fsv-modul) { margin-top: var(--sp-7); }
.team-text > :not(.fsv-modul) + .fsv-modul { margin-top: var(--sp-7); }

/* Unter dem letzten Baustein der Mannschaftsseite stand fast nichts – vier
   Pixel bis zur Sponsorenleiste. Chris am 08.09.2026: „Der Abstand nach unten
   zu der Sponsorenleiste ist zu niedrig. Füge einen Abstand ein, der dem
   identisch ist von ‚Weitere Mannschaften‘ und den Kacheln. Dies gilt für
   alle Teams-Seiten."

   Ursache war ein Abzug ins Leere. Die Regel darüber zieht den letzten
   Baustein um --sp-7 nach oben, weil sonst dessen eigener Abstand UND das
   padding-bottom des Inhaltsbereichs übereinanderlägen. Auf der Mannschafts-
   seite hat .team-text dieses padding-bottom aber gar nicht (padding-bottom: 0
   weiter oben) – der Abzug traf deshalb nicht die doppelte Lücke, sondern den
   Abstand des Bausteins selbst und ließ von 51 Pixeln vier übrig.

   Der Abzug entfällt hier also, und die Unterkante bekommt --sp-head: denselben
   Wert, mit dem .section-head seine Überschrift von den Kacheln trennt. Über
   die Variable bleibt „identisch" identisch, auch wenn der Wert sich ändert. */
.team-text > .fsv-modul:last-child { margin-bottom: 0; }
.team-text > .fsv-modul:last-child > .section { padding-bottom: var(--sp-head); }

/* Der Vorstellungstext beginnt an derselben Kante wie alles andere auf der
   Seite. Chris am 08.09.2026 zu /teams/ue32/ und den anderen Alten Herren:
   „die section soll den selben seitenabstand links und rechts haben, wie auch
   vorgesehen."

   Gemessen bei 1400 px: Der Text stand 333 px von links, die Kontaktkarte
   darüber und der Spielplan darunter bei 37 – zwischen zwei Bausteinen über
   die volle Breite lag ein eingerückter Kasten. .team-text ist derselbe
   Behälter wie der Inhalt einer Seite (.wrap--text) und erbte deshalb die
   Lesespalte; anders als dort stehen hier aber die Bausteine der Seite mit
   drin. Also dieselbe Lösung wie für die Seitenvorlage: Rahmen ist die
   Layoutbreite, die Zeilenlänge bleibt bei 52 rem, nur linksbündig statt
   mittig. Kein Umbruch ändert sich, es wandert die Kante.

   Die Karten der Ansprechpartner sind davon ausgenommen – ein Kachelraster
   hat seine Breite aus der Anzahl der Kacheln, nicht aus der Zeilenlänge.

   Nachtrag vom 08.09.2026: Die Deckelung auf 52 rem ist wieder weg. Chris:
   „lass [den Vorstellungstext] auf die volle Breite laufen und es gilt als
   Copytext (normal)." Der Text steht damit auf derselben Kante UND in derselben
   Breite wie die Trainingszeiten darüber und der Spielplan darunter – auf der
   Mannschaftsseite ist er ein Abschnitt zwischen Bausteinen, keine Lesespalte
   in einem Artikel. */
.wrap--text.team-text { width: min(100% - var(--gutter) * 2, var(--wrap)); }

/* Der erste Absatz bleibt der Anriss aus .entry__content – größer, halbfett,
   dunkler. Ich hatte ihn am 08.09.2026 auf Fließtextgröße gesetzt; Chris:
   „mach es doch wieder rückgängig (aber trotzdem mit voller Breite)."
   Er steht jetzt VOR den Trainingszeiten und ist damit das Erste, was unter der
   Bühne kommt – da trägt ein Anriss, was er soll. Nur die Breite bleibt: volle
   Layoutbreite, wie die Bausteine darunter. */
.personen-block > .personen { margin-top: var(--sp-head); }

/* Nur im Editor: Was ein Modul gerade nicht zeigen kann, sagt es dort. Auf
   der Seite bleibt an der Stelle nichts stehen. */
.fsv-modul__leer {
  padding: var(--sp-4); border: 1px dashed var(--line); border-radius: var(--radius);
  color: var(--ink-500); font-size: var(--fs-sm); text-align: center;
}

/* ============================================================
   Formularseiten (page-formular.php)
   Links das Online-Formular (Contact Form 7), rechts das PDF, die
   Anschrift und die Geschäftsstelle. Das Plugin-CSS von Contact Form 7
   ist abgeschaltet (inc/formulare.php), alles Sichtbare steht hier.
   ============================================================ */

.formular__head { padding-bottom: 0; }
.formular__head .entry__title { margin-top: var(--sp-3); }
.formular__intro { max-width: 62ch; margin-top: var(--sp-4); padding-bottom: 0; }
.formular__intro > p:first-of-type { font-size: var(--fs-md); font-weight: 500; }

.formular__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 24rem);
  gap: clamp(1.5rem, 3vw, 3.5rem);
  align-items: start;
  padding-block: clamp(2rem, 1rem + 2.5vw, 3.75rem) var(--sp-section);
}
.formular__main { min-width: 0; }
.formular__pflicht { font-size: var(--fs-sm); color: var(--ink-500); margin-bottom: var(--sp-5); }
.formular__nur-pdf {
  padding: var(--sp-5) var(--sp-6); border: 1px dashed var(--ink-300);
  border-radius: var(--radius-lg); color: var(--ink-700);
}

/* Die Spalte rechts bleibt beim Scrollen stehen – der Papierweg ist immer im Blick. */
.formular__aside { display: grid; gap: var(--sp-4); position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
.formular__karte {
  display: grid; gap: var(--sp-3); justify-items: start;
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--radius-lg); background: var(--surface-2);
  font-size: var(--fs-sm); line-height: 1.55;
}
.formular__karte .eyebrow { color: var(--green-600); }
.formular__karte--pdf { background: var(--green-900) var(--fill-flaeche); color: #fff; box-shadow: var(--shadow); }
.formular__karte--pdf .eyebrow { color: var(--green-200); }
.formular__karte--pdf p { color: rgb(255 255 255 / .82); }
.formular__karte-icon { display: inline-flex; padding: .6rem; border-radius: var(--radius); background: rgb(255 255 255 / .1); }
.formular__karte-icon svg { width: 1.6rem; height: 1.6rem; }
.formular__karte-titel { font-size: var(--fs-lg); color: #fff; }
.formular__karte-meta { font-size: var(--fs-xs); color: rgb(255 255 255 / .6) !important; }
.formular__adresse { font-style: normal; }
.formular__link { color: var(--green-700); border-bottom: 2px solid var(--green-100); font-weight: 600; }
.formular__link:hover { border-color: var(--green-600); }

/* ---------- Das Formular selbst ---------- */
.fsv-form { display: grid; gap: var(--sp-5); }
.fsv-form fieldset {
  display: grid; gap: var(--sp-4); min-width: 0;
  margin: 0; padding: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.fsv-form legend {
  float: left; width: 100%;          /* Legende in den Grid-Fluss holen */
  padding: 0; margin-bottom: var(--sp-2);
  font-size: var(--fs-lg); font-weight: 800; line-height: 1.1; letter-spacing: -.015em;
}
.fsv-form legend + * { clear: both; }
.fsv-form .zeile { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--sp-4); }
.fsv-form .feld { display: grid; gap: .35rem; min-width: 0; }
.fsv-form .feld > label { font-weight: 700; font-size: var(--fs-sm); }
.fsv-form .hinweis { font-size: var(--fs-sm); color: var(--ink-500); margin: 0; }
.fsv-form .hinweis a { color: var(--green-700); border-bottom: 2px solid var(--green-100); }
.fsv-form .wichtig {
  margin: 0; padding: .8rem 1rem;
  background: var(--surface-2); border-radius: var(--radius-sm); font-size: var(--fs-sm);
}
.fsv-form .fliesstext { margin: 0; font-size: var(--fs-base); color: var(--ink-700); }
.fsv-form [hidden] { display: none !important; }
.fsv-form [data-wenn] { display: grid; gap: var(--sp-4); padding: var(--sp-4); border-radius: var(--radius); background: var(--surface-2); }

/* Die versteckten Felder von Contact Form 7 stehen in einem <fieldset> – ohne diese Zeile ein leerer Rahmen. */
.wpcf7-form .hidden-fields-container { display: none; }
.wpcf7-form-control-wrap { display: block; min-width: 0; }
.fsv-form input[type="text"], .fsv-form input[type="email"], .fsv-form input[type="tel"],
.fsv-form input[type="date"], .fsv-form input[type="number"], .fsv-form input[type="url"],
.fsv-form select, .fsv-form textarea {
  width: 100%; padding: .8rem 1rem;
  border: 1.5px solid var(--ink-300); border-radius: var(--radius-sm); background: #fff;
  font-size: var(--fs-base); line-height: 1.4; color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.fsv-form textarea { min-height: 7.5rem; resize: vertical; }
.fsv-form input:focus, .fsv-form select:focus, .fsv-form textarea:focus {
  outline: none; border-color: var(--green-500); box-shadow: 0 0 0 3px var(--green-100);
}
.fsv-form input[readonly] { background: var(--surface-2); color: var(--ink-700); border-style: dashed; }
.fsv-form input::placeholder, .fsv-form textarea::placeholder { color: var(--ink-300); }
.fsv-form input[type="file"] { font-size: var(--fs-sm); }
.fsv-form input[type="file"]::file-selector-button {
  margin-right: .75rem; padding: .55rem 1rem; border: 1.5px solid var(--ink-300); border-radius: 999px;
  background: #fff; font: inherit; font-size: var(--fs-xs); font-weight: 700; cursor: pointer;
}

/* Auswahlfelder: Contact Form 7 setzt jede Option in .wpcf7-list-item */
.fsv-form .wpcf7-radio, .fsv-form .wpcf7-checkbox { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.fsv-form .wpcf7-list-item { margin: 0; }
.fsv-form .wpcf7-list-item label, .fsv-form .wpcf7-acceptance label {
  display: inline-flex; gap: .6rem; align-items: flex-start; cursor: pointer;
  font-weight: 600; font-size: var(--fs-base); line-height: 1.45;
}
.fsv-form .wpcf7-acceptance label { font-weight: 500; }
.fsv-form .wpcf7-list-item input {
  flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin: .1rem 0 0; accent-color: var(--green-600);
}
.fsv-form .wpcf7-acceptance a { color: var(--green-700); border-bottom: 2px solid var(--green-100); }

/* Fehler und Rückmeldung */
.fsv-form .wpcf7-not-valid { border-color: #B3271F !important; }
.fsv-form .wpcf7-not-valid-tip { display: block; margin-top: .3rem; font-size: var(--fs-xs); font-weight: 700; color: #B3271F; }
.wpcf7 .screen-reader-response {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.wpcf7-response-output {
  margin-top: var(--sp-4); padding: .9rem 1.2rem; border-radius: var(--radius-sm);
  border: 1.5px solid var(--ink-300); font-weight: 600;
}
.wpcf7-form.init .wpcf7-response-output { display: none; }
.wpcf7-form.sent .wpcf7-response-output { border-color: var(--green-500); background: var(--green-50); color: var(--green-800); }
.wpcf7-form.invalid .wpcf7-response-output, .wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output, .wpcf7-form.aborted .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output { border-color: #B3271F; background: #FCECEA; color: #7A1B14; }
.wpcf7-spinner {
  display: inline-block; width: 1.25rem; height: 1.25rem; margin-left: .75rem; vertical-align: middle;
  border: 3px solid var(--line); border-top-color: var(--green-500); border-radius: 50%;
  visibility: hidden; animation: fsv-drehen .8s linear infinite;
}
.wpcf7-form.submitting .wpcf7-spinner { visibility: visible; }
@keyframes fsv-drehen { to { transform: rotate(360deg); } }
.fsv-form .senden { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); }

/* Posten mit Anzahl × Stückpreis (Kostenerstattung) */
.fsv-form .posten, .fsv-form .posten-kopf {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.2fr);
  gap: var(--sp-3); align-items: end;
}
.fsv-form .posten-kopf { font-weight: 700; font-size: var(--fs-sm); padding-bottom: .25rem; border-bottom: 1px solid var(--line); }
.fsv-form .posten .feld > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.fsv-form .summe {
  display: grid; grid-template-columns: 1fr minmax(0, 12rem); gap: var(--sp-3); align-items: center;
  padding-top: var(--sp-3); border-top: 2px solid var(--ink); font-weight: 800;
}
.fsv-form .summe input { font-weight: 800; text-align: right; }

@media (max-width: 1024px) {
  .formular__body { grid-template-columns: 1fr; }
  .formular__aside { position: static; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
}
@media (max-width: 640px) {
  .fsv-form .posten-kopf { display: none; }
  .fsv-form .posten { grid-template-columns: 1fr 1fr; padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line); }
  .fsv-form .posten .feld:first-child { grid-column: 1 / -1; }
  .fsv-form .posten .feld > label { position: static; width: auto; height: auto; clip: auto; }
  .fsv-form .summe { grid-template-columns: 1fr; }
}

/* PDF-Vorschau, wenn es kein Online-Formular gibt. Handys zeigen <object>
   mit PDF nicht an – dort bleibt der Knopf darüber der Weg. */
.formular__nur-pdf { display: grid; gap: var(--sp-4); justify-items: start; }
.formular__vorschau { display: block; width: 100%; height: min(80vh, 1100px); margin-top: var(--sp-5);
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-2); }
.formular__vorschau-ersatz { padding: var(--sp-5); font-size: var(--fs-sm); color: var(--ink-500); }
@media (max-width: 768px) { .formular__vorschau { display: none; } }

/* ---------- Formularübersicht (page-formulare.php) ---------- */
.formulare__head { padding-bottom: 0; }
.formulare__head .entry__title { margin-top: var(--sp-3); }
.formulare__intro { max-width: 62ch; margin-top: var(--sp-4); padding-bottom: 0; }
.formulare__intro > p:first-of-type { font-size: var(--fs-md); font-weight: 500; }
.formulare__zahl { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--ink-500); }
.formulare__filter { padding-top: clamp(2rem, 1rem + 2.5vw, 3.75rem); display: grid; gap: var(--sp-3); }
.formulare__filter .filter-bar { margin-bottom: 0; }
.formulare__rubrik[hidden] { display: none; }
.formulare__leer { padding-block: var(--sp-6); color: var(--ink-500); }
/* /mitmachen/: die zwei Knöpfe unter dem Vorspann. Der stärkste
   Handlungsaufruf der Seite gehört nicht als Textlink in einen Absatz. */
.mitmachen__wege { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: calc(var(--sp-7) * -1 + var(--sp-5)); }
/* Unter den Knöpfen der Abstand aller anderen Abschnitte, nicht der knappere
   von section--tight: Direkt darunter beginnt die getönte Fläche, und die
   fängt an ihrer Kante an. Chris am 07.09.2026: „die Buttons kleben zu sehr
   an der nächsten Section." Oben bleibt es knapp – dort steht die Kopfzeile
   der Website, kein zweiter Abschnitt. */
.mitmachen__head { padding-bottom: var(--sp-section); }

/* Vier Karten stehen sonst als 3 + 1 da, die vierte allein in der zweiten
   Reihe neben zwei leeren Spalten – gemessen am 07.09.2026. Zwei Spalten
   ergeben 2 × 2 und bleiben ruhig, auch wenn eine fünfte Unterseite dazukommt. */
@media (min-width: 900px) {
  .mitmachen .formulare__liste { grid-template-columns: repeat(2, 1fr); }
}

/* Die Gesuche: Titel und Datum, keine Bildkarten – die Beiträge sind meist
   abfotografierte Flyer ohne Fließtext. Begründung in page-mitmachen.php. */
.mitmachen__gesuche { display: grid; gap: 0; }
.mitmachen__gesuche li {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--sp-2); padding: var(--sp-3) 0; border-bottom: 1px solid var(--line);
}
.mitmachen__gesuche li:first-child { border-top: 1px solid var(--line); }
.mitmachen__gesuche a { font-weight: 700; font-size: var(--fs-md); }
/* Ohne das klebt die letzte Trennlinie an der Sponsorenleiste: unter dem
   Abschnitt blieben 55 px, über jedem anderen deutlich mehr – die Seite
   sah abgeschnitten aus statt abgeschlossen (gemessen am 07.09.2026).
   Der Typ muss im Selektor stehen: :last-of-type zählt je Elementnamen, und
   der Kopfbereich ist ein <header>, also für sich genommen immer „der
   letzte". Ohne das „section" davor traf die Regel auch ihn. */
.mitmachen > section.section:last-of-type { padding-bottom: var(--sp-8); }
.mitmachen__gesuche time { color: var(--ink-500); font-size: var(--fs-xs); font-weight: 700; }

.formulare__liste {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}
/* Der Knopf sitzt am Kartenboden, gleich wie lang der Satz darüber ist. Chris
   am 08.09.2026: „den CTA ‚Mehr erfahren‘ aber bitte überall auf der gleichen
   Höhe – egal, wie viel Text in der Kachel tatsächlich drinnen ist."

   Die Karte war ein Raster mit align-content: start. Damit lagen die Zeilen am
   oberen Rand gepackt, die freie Höhe blieb darunter liegen, und das
   margin-top: auto am Knopf hatte in seiner Zeile nichts zu verteilen – er
   folgte einfach dem Text. Als Spalte im Flexlayout schiebt dasselbe
   margin-top: auto den Knopf ans Ende. Die Karten selbst sind ohnehin gleich
   hoch, weil sie als Rasterzellen auf die Reihenhöhe wachsen.

   Gilt für alle drei Stellen mit dieser Karte: /formulare/, /mitmachen/ und
   /verein/ – „überall" heißt überall. */
.formular-karte {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform .18s var(--ease), box-shadow .18s;
}
.formular-karte:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.formular-karte[hidden] { display: none; }
.formular-karte--online { border-top: 4px solid var(--accent); }
.formular-karte__kopf { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.badge--accent { background: var(--accent); color: var(--accent-ink); }
.formular-karte__auch { font-size: var(--fs-xs); color: var(--ink-500); font-weight: 700; }
.formular-karte__titel { font-size: var(--fs-md); line-height: 1.25; }
.formular-karte__titel a:hover { color: var(--green-700); }
.formular-karte__text { font-size: var(--fs-sm); color: var(--ink-700); }
.formular-karte__wege { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin-top: auto; padding-top: var(--sp-2); }

/* Kein Link führt unangekündigt auf ein PDF. Chris am 07.09.2026: „einen
   Link, bei dem man auf ein PDF kommt, ohne das zu wissen, ist Mist."
   Jeder Textlink auf eine PDF-Datei bekommt die Endung „(PDF)" – aus dem
   Stylesheet, damit es für jeden Text gilt, den die Redaktion je schreibt.
   Die Knöpfe auf den Formularseiten sagen es ohnehin im Text. */
.entry__content a[href$=".pdf" i]:not(.btn)::after,
.formular__intro a[href$=".pdf" i]:not(.btn)::after {
  content: " (PDF)"; font-size: .8em; font-weight: 700; letter-spacing: .04em; color: var(--ink-500);
}

/* ---------- Sponsor werden (page-sponsor-werden.php) und Modul 15 Sponsorenraster ----------
   Die Seite erklärt Unternehmen das Angebot; das Raster zeigt, wer schon dabei
   ist. Beides ohne eigenes JavaScript. Die Flächenkarten sind die Geschwister
   der Karten auf /werbeflaechen-digital – gleicher Aufbau, aber hier im
   Stylesheet, weil die Seite öffentlich ist und mit dem Theme lebt. */
/* Unten der normale Abschnittsabstand: Der nächste Abschnitt ist getönt, und
   die Knöpfe sollen nicht auf seiner Kante sitzen. Chris am 07.09.2026. */
.sw__head .entry__title { margin-top: var(--sp-3); }
.sw__intro { max-width: 62ch; margin-top: var(--sp-4); padding-bottom: 0; }
.sw__intro > p:first-of-type { font-size: var(--fs-md); font-weight: 500; }
.sw__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.sw__section { scroll-margin-top: calc(var(--header-h) + 1.5rem); }

.sw-vorteile { display: grid; gap: var(--sp-4);
               grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.sw-vorteil { display: grid; gap: var(--sp-3); align-content: start;
              padding: var(--sp-5) var(--sp-6);
              border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface);
              box-shadow: var(--shadow-sm); font-size: var(--fs-sm); line-height: 1.55; color: var(--ink-700); }
.sw-vorteil__icon { display: inline-flex; justify-self: start; padding: .6rem; border-radius: var(--radius);
                    background: var(--green-50); color: var(--green-700); }
.sw-vorteil__icon svg { width: 1.4rem; height: 1.4rem; }
.sw-vorteil__titel { font-size: var(--fs-md); line-height: 1.2; color: var(--ink); }

.sw-flaeche { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface);
              padding: clamp(1.25rem, 2.5vw, 2.25rem); margin-top: var(--sp-5); }
.sw-demo .sponsor-strip { margin-inline: 0; }
.sw-flaeche__head { display: flex; align-items: flex-start; gap: var(--sp-4); flex-wrap: wrap; }
.sw-flaeche__n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
                 background: var(--accent); color: var(--accent-ink);
                 font-family: var(--font-display); font-style: italic; font-size: 1.15rem; flex-shrink: 0; }
.sw-flaeche__titles { flex: 1 1 auto; min-width: 0; }
.sw-flaeche__title { font-size: var(--fs-lg); line-height: 1.1; }
.sw-flaeche__kurz { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .12em;
                    text-transform: uppercase; color: var(--ink-500); margin-bottom: .25rem; }
.sw-flaeche__wo { margin-top: var(--sp-4); font-size: var(--fs-md); color: var(--ink-700); max-width: 70ch; }
.sw-status { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .7rem;
             border-radius: 999px; font-size: var(--fs-xs); font-weight: 800; white-space: nowrap;
             background: var(--surface-3); color: var(--ink-700); }
.sw-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.sw-status--frei { background: var(--green-50); color: var(--green-800); }

.sw-give { display: grid; gap: var(--sp-5); margin-top: var(--sp-5);
           grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.sw-give h4 { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .12em;
              text-transform: uppercase; color: var(--ink-500); margin-bottom: var(--sp-3); }
.sw-give ul { display: grid; gap: .5rem; }
.sw-give li { display: grid; grid-template-columns: auto 1fr; gap: .55rem; font-size: var(--fs-sm); line-height: 1.5; }
.sw-give svg { width: 1.05rem; height: 1.05rem; color: var(--green-600); margin-top: .18rem; }

.sw-demo { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px dashed var(--line); }
.sw-demo__label { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .12em;
                  text-transform: uppercase; color: var(--ink-500); margin-bottom: var(--sp-4); }
.sw-note { font-size: var(--fs-sm); color: var(--ink-500); max-width: 70ch; margin-top: var(--sp-4); }
.sw-note--mehr { margin-top: var(--sp-5); }

/* Die Reiter über den Angeboten: größer als die Spiele-Tabs, mit Unterzeile.
   Die Leiste steht auf weißem Grund mit Abstand nach oben, damit sie nicht an
   der getönten Vorteile-Fläche klebt. */
.sw-reiter__leiste { padding-top: clamp(1.5rem, 1rem + 2vw, 3rem); margin-bottom: 0; gap: clamp(1rem, 3vw, 3rem); }
.sw-reiter__leiste .tab { display: grid; gap: .15rem; text-align: left; padding: .9rem .25rem 1rem;
                          font-size: var(--fs-md); letter-spacing: .04em; }
.sw-reiter__sub { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: none; color: var(--ink-500); }
.sw-reiter__panel[hidden] { display: none; }
.sw-reiter__panel > .section:first-child { padding-top: clamp(2rem, 1rem + 2.5vw, 3.75rem); }

/* Kombinieren: zwei Karten, links der Beleg, rechts der Weg zum Paket. */
.sw-kombi { display: grid; gap: var(--sp-4); align-items: start;
            grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.sw-kombi__karte { display: grid; gap: var(--sp-3); justify-items: start;
                   padding: var(--sp-5) var(--sp-6); border-radius: var(--radius-lg);
                   background: var(--surface); border: 1px solid var(--line); font-size: var(--fs-sm); line-height: 1.55; color: var(--ink-700); }
.sw-kombi__karte--cta { background: var(--green-900) var(--fill-flaeche); color: rgb(255 255 255 / .85); border-color: transparent; }
.sw-kombi__karte--cta .eyebrow { color: var(--green-200); }
.sw-kombi__liste { display: grid; gap: .5rem; }
.sw-kombi__liste li { display: grid; grid-template-columns: auto 1fr; gap: .55rem; }
.sw-kombi__liste svg { width: 1.05rem; height: 1.05rem; color: var(--green-600); margin-top: .18rem; }

/* Das Muster-Motiv: das Vereinslogo sitzt in der Logokarte wie ein Firmenlogo,
   nur etwas kleiner, weil es hochkant ist. */
.adslot--muster .adslot__logo img { max-height: 120px; width: auto; }

/* Analoge Angebote: Karten wie die Vorteile, dazu der Beleg aus den News. */
.sw-optionen { display: grid; gap: var(--sp-4);
               grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.sw-option { display: grid; gap: var(--sp-3); align-content: start;
             padding: var(--sp-5) var(--sp-6);
             border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface);
             box-shadow: var(--shadow-sm); font-size: var(--fs-sm); line-height: 1.55; color: var(--ink-700); }
.sw-option__titel { font-size: var(--fs-md); line-height: 1.2; color: var(--ink); }
.sw-option__beispiel { margin-top: auto; padding-top: var(--sp-2); display: grid; gap: .25rem; font-size: var(--fs-xs); }
.sw-option__beispiel > span { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); }
.sw-option__beispiel .link-more { font-size: var(--fs-sm); }

/* Ansprechpartner in der Kontaktkarte */
.sw-ap { display: grid; gap: .35rem; }
.sw-ap__name { display: grid; gap: .1rem; }
.sw-ap__name b { font-size: var(--fs-md); color: var(--ink); }
.sw-ap__name span { color: var(--ink-500); }
.sw-ap__weg { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--green-700); }
.sw-ap__weg svg { width: 1em; height: 1em; }

/* Konditionen und Buchung: unter den zwei Flächen, links der Satz, rechts der Ansprechpartner. */
.sw-buchen { display: grid; gap: var(--sp-4) var(--sp-6); align-items: start; margin-top: var(--sp-5);
             padding: clamp(1.25rem, 2.5vw, 2.25rem); border-radius: var(--radius-lg);
             background: var(--green-50); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.sw-buchen__text { display: grid; gap: var(--sp-2); font-size: var(--fs-sm); line-height: 1.55; color: var(--ink-700); max-width: 52ch; }
.sw-buchen__titel { font-size: var(--fs-md); line-height: 1.2; color: var(--ink); }
.sw-ap__weg:hover { color: var(--green-800); text-decoration: underline; }

.sw-karten { display: grid; gap: var(--sp-4); align-items: start;
             grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.sw-karte__titel { font-size: var(--fs-lg); line-height: 1.15; }
.sw-schritte { display: grid; gap: .6rem; padding-left: 1.4rem; counter-reset: none; }
.sw-schritte li { padding-left: .2rem; }
.sw-schritte li::marker { font-weight: 800; color: var(--green-600); }
.sw-schritte b { display: block; color: var(--ink); }
.sw-mail { display: inline-block; margin-left: var(--sp-3); }

/* Das Raster: jede Kachel gleich groß, das Logo mittig, Name und Stufe darunter.
   Die Logos liegen in zwei Güten vor (96 px und 320 px hoch); die Logofläche
   ist deshalb auf 56 px Höhe begrenzt, damit die kleinen nicht weich werden.
   Grau in Ruhe, Farbe bei Berührung – wie im Band, aus demselben Grund: Kein
   Logo soll das nächste überschreien. */
/* Zwischen den Kacheln in beide Richtungen derselbe knappe Abstand – sie sind
   eine Fläche, kein Text in Zeilen. Ich hatte den Reihenabstand am 08.09.2026
   auf --sp-5 gezogen; das war die falsche Stelle, gemeint war der Abstand unter
   der letzten Reihe (zum Band „Sponsor werden“, Modul 21, seit 07.10.2026
   entfernt). Zurück auf --sp-3. */
.sponsor-grid { display: grid; gap: var(--sp-3); margin-block: var(--sp-5);
                grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.5rem), 1fr)); }
/* Im Seitentext (Modul im Editor) erbt das Raster sonst die Listenpunkte des
   Fließtexts – die gehören zu Absätzen, nicht zu Kacheln.

   Hier stand bis zum 08.09.2026 auch ein Rücksetzer für die Linkfarbe, samt
   border-bottom: 0 gegen die Unterkante redaktioneller Textlinks. Seit
   b20c065 erreicht diese Regel Modulmarkup nicht mehr; vom Rücksetzer wirkte
   nur noch das border-bottom: 0 – und zwar auf den Rahmen der Kachel selbst.
   Die 18 verlinkten Kacheln standen deshalb mit dreiseitigem Rahmen da, die
   zwei ohne Website mit vollem. Chris am 08.09.2026: „die anderen Kacheln
   haben aber unten keinen Stroke." Eine Karte mit runden Ecken und fehlender
   Unterkante ist keine Gestaltung, sondern ein Rest – deshalb weg damit,
   nicht nachgezogen. */
/* Der Rücksetzer, den das Raster hier einmal brauchte, ist entfallen: Seit die
   Listenregeln oben nur noch direkte Kinder von .entry__content treffen, erbt
   das Raster weder Listenpunkte noch Einzug noch den Zeilenabstand. */

.sponsor-tile__inner { display: grid; gap: .35rem; justify-items: center; text-align: center;
                       height: 100%; padding: var(--sp-5) var(--sp-4) var(--sp-4);
                       /* Rundum eine Kante. Vom 08.09. bis 06.10.2026 fehlte die
                          untere; Chris am 06.10.2026: die Kacheln wirken „komisch
                          abgeschnitten nach unten hin". */
                       border: 1px solid var(--line);
                       border-radius: var(--radius); background: var(--surface);
                       color: var(--ink); position: relative;
                       transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s; }
/* Jede Kachel reagiert gleich auf Berührung – Farbe, grüne Kante, ein Hauch
   Anheben –, ob mit oder ohne hinterlegte Website. Chris am 08.09.2026:
   „jetzt haben die beiden Kacheln einen anderen Hover-Effekt als die
   restlichen. Bitte gib den beiden den selben Hover-Effekt, wie bei den
   anderen."

   Vorher hing alles am a-Element; ohne Website ist die Kachel aber ein div
   (Begründung in sponsors-grid.php), und zwei von 20 Logos blieben grau,
   während die Nachbarn aufleuchteten. Ein erster Anlauf gab ihnen nur Farbe
   und Kante und behielt das Anheben dem Link vor – damit waren es drei
   Erscheinungsbilder statt zweier, also schlimmer als vorher. Im Raster zählt
   die Gleichbehandlung: Jeder Sponsor bekommt dieselbe Kachel, unabhängig
   davon, ob er eine Website betreibt.

   Unterschieden wird weiter dort, wo es um die Handlung geht und nicht um das
   Aussehen: Das Symbol oben rechts steht nur auf Kacheln, die wirklich
   hinausführen, und nur die sind anklickbar. */
.sponsor-tile__inner:hover, .sponsor-tile__inner:focus-visible {
  border-color: var(--green-500); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.sponsor-tile__logo { display: flex; align-items: center; justify-content: center;
                      width: 100%; height: 56px; margin-bottom: var(--sp-2); }
.sponsor-tile__logo picture { display: contents; }
.sponsor-tile__logo img { max-width: min(100%, 170px); max-height: 56px; width: auto; height: auto; object-fit: contain;
                          filter: grayscale(1) opacity(.7); transition: filter .25s var(--ease); }
.sponsor-tile__inner:hover img, .sponsor-tile__inner:focus-visible img { filter: none; }
.sponsor-tile__name { font-size: var(--fs-sm); font-weight: 700; line-height: 1.25; text-wrap: balance; }
.sponsor-tile__stufe { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em;
                       text-transform: uppercase; color: var(--ink-500); }
.sponsor-tile__web { position: absolute; top: .6rem; right: .6rem; color: var(--ink-300); }
.sponsor-tile__web svg { width: .9rem; height: .9rem; }
a.sponsor-tile__inner:hover .sponsor-tile__web { color: var(--green-600); }

/* ---------- Aufriss der Werbeflächen (template-parts/werbeflaechen-schema.php) ----------
   Die Schemata nebeneinander. Bewusst ohne Umschalter: Nebeneinander
   sieht man auf einen Blick, dass die Leiste überall läuft und Fläche 2
   nur an zwei Stellen. Ein Reiter würde genau diesen Vergleich verstecken. */
.wf-schemata { display: grid; gap: clamp(1rem, 2vw, 2rem); align-items: start;
               grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }

/* Bildschirmrahmen: macht klar, dass hier eine Seite gemeint ist und keine Liste. */
.wf-screen { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
             background: var(--surface); box-shadow: var(--shadow-sm); }
.wf-screen__bar { display: flex; align-items: center; gap: .4rem; padding: .55rem .75rem;
                  background: var(--surface-3); border-bottom: 1px solid var(--line); }
.wf-screen__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-300); flex-shrink: 0; }
.wf-screen__name { margin-left: .35rem; font-size: var(--fs-xs); font-weight: 800; color: var(--ink-700); }
.wf-screen__sub { margin-left: auto; font-size: var(--fs-xs); color: var(--ink-500); }
.wf-page { padding: 6px; display: grid; gap: 5px; }

/* Inhaltszeilen bleiben absichtlich stumm: Grau, ohne Kontur, ohne Farbe.
   Die Werbeflächen sind die einzigen farbigen Elemente – deshalb springen
   sie an, ohne dass jemand sie erklären muss. */
.wf-row { display: grid; place-items: center; text-align: center; padding: .35rem .5rem;
          border-radius: var(--radius-sm); background: var(--surface-2);
          font-size: .68rem; line-height: 1.25; color: var(--ink-500); font-weight: 600; }
.wf-row--rand { background: var(--surface-3); color: var(--ink-700); }
.wf-row--s { min-height: 34px; }
.wf-row--m { min-height: 54px; }
.wf-row--l { min-height: 86px; }

.wf-ad { position: relative; display: grid; place-items: center; gap: .15rem; text-align: center;
         padding: .4rem .5rem; border-radius: var(--radius-sm);
         background: var(--accent); color: var(--accent-ink);
         font-weight: 800; box-shadow: var(--shadow-sm); }
.wf-ad:hover { background: var(--accent-600); }
.wf-ad__n { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
            background: var(--accent-ink); color: var(--accent); font-size: .7rem; line-height: 1; }
.wf-ad__t { font-size: .72rem; line-height: 1.2; }
.wf-ad--s { min-height: 34px; }
.wf-ad--m { min-height: 54px; }
.wf-ad--l { min-height: 86px; }

.wf-legende { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: var(--sp-5); font-size: var(--fs-sm); }
.wf-legende span { display: inline-flex; align-items: center; gap: .5rem; }
.wf-legende i { width: 16px; height: 16px; border-radius: 4px; display: inline-block; flex-shrink: 0; }
.wf-legende i.is-ad { background: var(--accent); }
/* Der Legendenkasten steht auf hellgrauem Grund, die Inhaltszeilen im Schema
   auf weißem. Mit --surface-2 wäre er dort unsichtbar – deshalb weiß mit
   deutlichem Rand statt derselben Füllung. */
.wf-legende i.is-inhalt { background: var(--surface); border: 1px solid var(--ink-300); }

/* Das Handy: schmal, runde Ecken, Notch statt Ampel. Bewusst dieselben Zeilen
   wie der Bildschirm daneben – der Vergleich zeigt: gleiche Reihenfolge, jede
   Fläche in voller Breite. */
.wf-screen--handy { max-width: 250px; width: 100%; justify-self: center;
                    border: 3px solid var(--ink-700); border-radius: 26px; }
.wf-screen--handy .wf-screen__bar { justify-content: center; flex-wrap: wrap; gap: .15rem .4rem; padding-top: .35rem; }
.wf-screen__notch { display: block; width: 44%; height: 6px; border-radius: 4px; background: var(--ink-700); flex: 0 0 100%; margin-inline: auto; margin-bottom: .2rem; }
.wf-screen--handy .wf-screen__sub { margin-left: 0; flex: 0 0 100%; text-align: center; }
.wf-screen--handy .wf-row, .wf-screen--handy .wf-ad { font-size: .62rem; }
.wf-screen--handy .wf-row--l, .wf-screen--handy .wf-ad--l { min-height: 110px; }
.wf-screen--handy .wf-row--m, .wf-screen--handy .wf-ad--m { min-height: 68px; }

/* ============================================================
   Mitgliedschaft (page-mitgliedschaft.php)
   Beiträge als Karten, darunter der Weg in den Verein, dann der
   Text mit Anschrift, Satzung und Geschäftsstelle daneben.
   Die Karten rechts sind bewusst dieselbe Form wie auf den
   Formularseiten – wer eine kennt, kennt beide.
   ============================================================ */

.mitglied__head { padding-bottom: 0; }
.mitglied__head .entry__title { margin-top: var(--sp-3); }
.mitglied__lead { max-width: 62ch; margin-top: var(--sp-4); font-size: var(--fs-md); font-weight: 500; }

.mitglied__titel { font-size: var(--fs-lg); }
.mitglied__hinweis { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--ink-500); }

.mitglied__beitraege { padding-block: clamp(2rem, 1rem + 2.5vw, 3.75rem) 0; }

/* Vier Beiträge, auf breiten Schirmen nebeneinander, auf schmalen zwei
   und zwei. Die Karten sind gleich hoch, damit die Zahlen eine Linie
   bilden – der Preis ist hier die Überschrift, nicht der Name. */
.mitglied__preise {
  display: grid; gap: var(--sp-3); margin-top: var(--sp-5); padding-left: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
/* Ohne Kante oben. Chris am 08.09.2026: „entferne diesen grünen Rand oben an
   den Kacheln." Die Karte hebt sich über die getönte Fläche ab, und die Zahl
   darin steht ohnehin schon in Grün – der Streifen war die dritte Ansage
   derselben Sache. */
.preis {
  display: grid; gap: .15rem; align-content: start;
  padding: var(--sp-5); border-radius: var(--radius-lg);
  background: var(--surface-2);
}
.preis__wert {
  font-family: var(--font-display); font-style: italic; font-size: var(--fs-xl);
  line-height: 1.05; color: var(--green-800);
}
.preis__euro { font-size: .6em; font-style: normal; }
.preis__name { font-weight: 700; margin-top: .35rem; }
.preis__takt { font-size: var(--fs-xs); color: var(--ink-500); }

/* Der Weg in den Verein: erst online, das PDF darunter als zweiter Weg.
   Grünes Band, damit die Handlung nicht im Text verschwindet.

   Der Inhalt beginnt an derselben Kante wie alles darüber und darunter –
   ein eigener, schmalerer Block fluchtet mit nichts und sieht aus wie ein
   Versehen. Der Knopf steht deshalb nicht am Bildschirmrand, sondern am
   Anfang der zweiten Spalte: nah am Satz, den er beantwortet. */
.mitglied__cta { margin-top: clamp(2rem, 1rem + 2.5vw, 3.75rem); background: var(--green-900) var(--fill-flaeche); color: #fff; }
.mitglied__cta-inner {
  display: grid; gap: var(--sp-5) clamp(2rem, 4vw, 4rem); align-items: center;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  padding-block: clamp(1.75rem, 1rem + 2vw, 3rem);
}
.mitglied__cta .eyebrow { color: var(--green-200); }
.mitglied__cta .mitglied__titel { color: #fff; margin-top: var(--sp-2); }
.mitglied__cta p { color: rgb(255 255 255 / .82); max-width: 60ch; margin-top: var(--sp-3); }
.mitglied__cta-wege { display: grid; gap: var(--sp-3); justify-items: start; }
.mitglied__pdf-link {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: var(--sp-4);
  font-size: var(--fs-sm); font-weight: 600; color: rgb(255 255 255 / .82);
}
.mitglied__pdf-link:hover { color: #fff; }
.mitglied__pdf-link svg { width: 1.1rem; height: 1.1rem; }

.mitglied__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 24rem);
  gap: clamp(1.5rem, 3vw, 3.5rem);
  align-items: start;
  padding-block: clamp(2rem, 1rem + 2.5vw, 3.75rem) var(--sp-section);
}
.mitglied__main { min-width: 0; }
.mitglied__aside { display: grid; gap: var(--sp-4); position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
.mitglied__karte {
  display: grid; gap: var(--sp-3); justify-items: start;
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--radius-lg); background: var(--surface-2);
  font-size: var(--fs-sm); line-height: 1.55;
}
.mitglied__karte .eyebrow { color: var(--green-600); }
.mitglied__karte-meta { font-size: var(--fs-xs); color: var(--ink-500); }
.mitglied__karte--satzung { background: var(--green-900) var(--fill-flaeche); color: #fff; box-shadow: var(--shadow); }
.mitglied__karte--satzung .eyebrow { color: var(--green-200); }
.mitglied__karte--satzung p { color: rgb(255 255 255 / .82); }
.mitglied__karte--satzung .mitglied__karte-meta { color: rgb(255 255 255 / .6); }
.mitglied__karte-icon { display: inline-flex; padding: .6rem; border-radius: var(--radius); background: rgb(255 255 255 / .1); }
.mitglied__karte-icon svg { width: 1.6rem; height: 1.6rem; }
.mitglied__karte-titel { font-size: var(--fs-lg); color: #fff; }
/* Seit 06.10.2026 kommen Überschriften und Sätze als Textstellen aus dem
   Editor (inc/textstellen.php): Die Klasse sitzt am Rahmen, die Überschrift
   darin übernimmt Größe und Farbe. */
:is(.mitglied__titel, .mitglied__karte-titel) > h2 { font-size: inherit; color: inherit; margin: 0; }
/* Der Text der Mitgliedschaft beginnt mit einer Überschrift („Zahlweise“);
   der erste Absatz darunter ist kein Einstieg und bekommt deshalb nicht die
   große Schrift aus .entry__content > p:first-of-type. */
.mitglied__main.entry__content > p:first-of-type { font-size: inherit; line-height: inherit; color: inherit; font-weight: inherit; }
.mitglied__karte-meta > p { margin: 0; }
:is(.mitglied__lead, .mitglied__hinweis) > p { margin: 0; }
.mitglied__adresse { font-style: normal; }
.mitglied__link { color: var(--green-700); border-bottom: 2px solid var(--green-100); font-weight: 600; }
.mitglied__link:hover { border-color: var(--green-600); }

@media (max-width: 900px) {
  .mitglied__cta-inner { grid-template-columns: 1fr; }
  .mitglied__body { grid-template-columns: 1fr; }
  .mitglied__aside { position: static; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
}