/* =============================================================
   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 15: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-section: clamp(3rem, 1.5rem + 4vw, 6.5rem);
  --gutter: clamp(1rem, .4rem + 2.2vw, 3.5rem);
  --wrap: 2000px;

  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgb(4 48 26 / .06), 0 2px 8px rgb(4 48 26 / .05);
  --shadow:    0 4px 12px rgb(4 48 26 / .08), 0 12px 32px rgb(4 48 26 / .08);
  --shadow-lg: 0 8px 24px rgb(4 48 26 / .12), 0 24px 64px rgb(4 48 26 / .14);

  --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;
}
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;
}
.section { padding-block: var(--sp-section); }
.section--tight { padding-block: clamp(2rem, 1rem + 2.5vw, 3.75rem); }
.section--dark { background: var(--green-900); 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); 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: clamp(1.5rem, 1rem + 1.5vw, 2.75rem);
}
.section-title { font-size: var(--fs-xl); }
.section-title .accent { color: var(--green-500); }
.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); color: var(--accent-ink); box-shadow: var(--shadow-sm); }
.btn--major:hover { background: var(--accent-600); color: var(--accent-ink); box-shadow: 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. */
.btn--minor { border-color: currentColor; color: inherit; background: transparent; }
.btn--minor:hover,
.btn--minor:focus-visible {
  background: var(--green-700); border-color: var(--green-700); color: #fff;
}
.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); color: #fff; }
.topbar__social svg { width: 17px; height: 17px; }

/* 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); }
.topbar__hl 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ü */
.main-nav { margin-left: 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;
  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);
}
.main-nav__item:hover > .main-nav__link,
.main-nav__item:focus-within > .main-nav__link,
.main-nav__link[aria-current="page"] { color: var(--green-600); }
.main-nav__item:hover > .main-nav__link::after,
.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:hover .chev, .main-nav__item:focus-within .chev { transform: rotate(180deg); }
.main-nav__link--cta {
  background: var(--green-600); color: #fff; border-radius: 999px; padding-inline: 1.25rem; margin-left: .35rem;
}
.main-nav__link--cta::after { display: none; }
.main-nav__link--cta:hover { background: var(--green-700); 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:hover > .mega, .main-nav__item:focus-within > .mega { opacity: 1; visibility: visible; transform: translateY(0); }
.mega__inner { display: grid; grid-template-columns: minmax(200px, 1fr) 3fr; 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-fit, minmax(190px, 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; }
/* 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); 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;
  border-block: 1px solid var(--line);
  background: var(--surface);
  /* 7px mehr Luft nach oben und unten, damit die Logos nicht an den
     Trennlinien kleben. */
  padding-block: clamp(1.19rem, calc(1.2vw + 7px), 1.69rem);
}
/* 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); }

/* Aufruf unter den Logos: fester Bestandteil des Bandes, nicht nur im Footer. */
.sponsor-cta {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: .6rem clamp(.9rem, 2vw, 1.75rem);
  margin-top: clamp(.9rem, 1.4vw, 1.3rem);
}
.sponsor-cta__label {
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-500);
}
.sponsor-cta__btns { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.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: center; gap: clamp(2.5rem, 5vw, 6rem); padding-right: clamp(2.5rem, 5vw, 6rem); }
/* Alle Logos laufen auf identischer Höhe nebeneinander, die Breite ergibt sich
   aus dem jeweiligen Logo. Die Dateien sind dafür vorab freigestellt und exakt
   höhennormalisiert (tools/normalize-sponsors.py) – dadurch braucht es hier
   keine feste Box, in der Motive klein gequetscht oder beschnitten würden. */
.sponsor-item {
  flex-shrink: 0; display: flex; align-items: center;
  height: clamp(34px, 2.9vw, 46px);
}
.sponsor-item img {
  height: 100%; width: auto; max-width: none;
  filter: grayscale(1) opacity(.6);
  transition: filter .25s var(--ease), transform .25s var(--ease);
}
.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; }
.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); }
.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); }
.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:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.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: var(--sp-4);
  scrollbar-width: none;
}
.slider__viewport::-webkit-scrollbar { display: none; }
.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); color: #fff; }
.mb__inner {
  display: grid; gap: clamp(.5rem, 1vw, .8rem);
  padding-block: clamp(1rem, 1.8vw, 1.5rem);
}

/* 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: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center; gap: clamp(.8rem, 2vw, 2.25rem);
}
.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; justify-content: flex-end; 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: 1100px) {
  .mb__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: .85rem; }
  .mb__actions { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 700px) {
  .mb__row { grid-template-columns: 1fr; }
  .mb__pair { flex-direction: column; align-items: stretch; gap: .45rem; }
  .mb__side { width: 100%; }
  .mb__x { display: none; }
  .mb__when { justify-content: flex-start; 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); }

.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-bottom: var(--sp-3); scrollbar-width: none;
}
.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; }
.news-card__title { font-size: var(--fs-md); line-height: 1.2; }
.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-300); font-weight: 600; }
/* ---------- 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); 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 { align-self: start; color: var(--green-700); }
/* ---------- 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: var(--sp-2) var(--sp-3); scrollbar-width: none;
}
.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-lg); }
.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); 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); 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 Termine & Fakten ---------- */
.split { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(2rem, 3.5vw, 4.5rem); align-items: start; }
.events { display: grid; gap: var(--sp-3); }
.event {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); transition: border-color .18s, transform .18s var(--ease), box-shadow .18s;
}
.event:hover { border-color: var(--green-500); transform: translateX(4px); box-shadow: var(--shadow-sm); }
.event__date {
  width: 62px; text-align: center; background: var(--green-900); color: #fff;
  border-radius: var(--radius-sm); padding: .5rem .25rem;
}
.event__date b { display: block; font-family: var(--font-display); font-style: italic; font-size: var(--fs-lg); line-height: 1; }
.event__date span { font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--green-200); }
.event__body  { display: grid; gap: .25rem; min-width: 0; }
.event__title { display: block; font-size: var(--fs-base); font-weight: 800; line-height: 1.25; }
.event__meta  { display: flex; align-items: center; gap: .4rem; font-size: var(--fs-xs); color: var(--ink-500); }
.event__meta svg { width: 1em; height: 1em; flex-shrink: 0; }
.event__tag { font-size: var(--fs-xs); font-weight: 800; color: var(--green-700); background: var(--green-50); padding: .3rem .7rem; border-radius: 999px; white-space: nowrap; }
/* ---------- 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-bottom: var(--sp-3); scrollbar-width: none;
}
.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);
}
.team-tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.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; }
.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; 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); 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; }
.footer__mark { opacity: .55; }
/* ---------- 7 Breakpoints ---------- */
@media (max-width: 1400px) {
.mega__inner { grid-template-columns: minmax(180px, .8fr) 3fr; }
}
@media (max-width: 1200px) {
  :root { --header-h: 68px; }
.brand__text { display: none; }
.main-nav__link { padding-inline: .55rem; font-size: var(--fs-xs); }
.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); }
.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) {
  .topbar__links { display: none; }
.topbar__inner { justify-content: center; }
.footer__main { grid-template-columns: 1fr; }
.section-head { flex-direction: column; align-items: flex-start; }
.hero__facts { gap: var(--sp-5); }
.event { grid-template-columns: auto 1fr; }
.event__tag { grid-column: 2; justify-self: start; }
}
@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; }
}
/* ---------- 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;
  width: clamp(160px, 15vw, 280px);
}
.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; }
.topbar__newsletter {
  display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; white-space: nowrap;
  padding-right: var(--sp-3); border-right: 1px solid rgb(255 255 255 / .18);
}
.topbar__newsletter svg { width: 15px; height: 15px; }
.topbar__newsletter:hover { color: #fff; }
/* ---------- 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); }
/* ---------- Filter-Chips ---------- */
.filter-bar { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: clamp(1.25rem, 2vw, 2rem); }
.filter-chip {
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 999px;
  padding: .55rem 1.15rem; font-size: var(--fs-sm); font-weight: 700; 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); }
.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-300); font-weight: 700; margin-bottom: .4rem;
}
/* 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-lg); }

.adslot__crest, .adslot__logo { flex: 0 0 auto; display: grid; place-items: center; }
.adslot__crest img { width: clamp(52px, 6vw, 84px); height: auto; }
.adslot__logo {
  background: #fff; border-radius: var(--radius-sm);
  padding: clamp(.5rem, 1vw, .9rem); width: clamp(110px, 13vw, 190px);
}
.adslot__logo img { width: 100%; height: clamp(34px, 3.4vw, 52px); 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;
}
.adslot__sub { font-size: var(--fs-md); color: rgb(255 255 255 / .82); text-wrap: balance; }
.adslot__cta { flex: 0 0 auto; margin-left: auto; pointer-events: none; }
.adslot__banner { display: block; width: 100%; height: auto; border-radius: var(--radius); }
/* Liefert ein Partner ein fertiges Motiv, füllt es die Fläche ohne unseren
   Rahmen – sonst stünde weiße Schrift auf fremdem Bild. */
.adslot__panel--bild { display: block; padding: 0; background: var(--surface-3); }

/* 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); }

@media (max-width: 860px) {
  .adslot__panel { flex-wrap: wrap; }
  .adslot__cta { margin-left: 0; }
  .adslot__logo { width: clamp(96px, 30vw, 150px); }
}
.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); 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 { grid-template-columns: repeat(2, 1fr); }
}
@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; }
}
@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); 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: clamp(1rem, 2vw, 1.75rem); bottom: clamp(1rem, 2vw, 1.75rem);
  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); color: #fff; cursor: pointer;
  font-weight: 800; font-size: var(--fs-sm); white-space: nowrap;
  box-shadow: 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); }
.chat-launcher.is-active { background: var(--green-900); }
.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: clamp(1rem, 2vw, 1.75rem); bottom: calc(clamp(1rem, 2vw, 1.75rem) + 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); 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); 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); 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); 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; }
/* 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
   ============================================================= */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.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 – mit Farbfläche UND Randmarkierung, damit die
   Information nicht allein über Farbe transportiert wird. */
.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); }
.ltable tbody tr.is-own td:first-child { box-shadow: inset 4px 0 0 var(--accent); }
/* 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); 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__inner { grid-template-columns: minmax(160px, .55fr) 4fr; }
.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; }

.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); }
.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;
  padding-left: .9rem; border-left: 3px solid var(--green-200);
}
.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); }
.entry__content > * + * { 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); }
.entry__content a:not(.btn) { color: var(--green-700); border-bottom: 2px solid var(--green-100); }
.entry__content a:not(.btn):hover { border-color: var(--green-600); }
.entry__content ul, .entry__content ol { padding-left: 1.35rem; list-style: revert; }
.entry__content li + li { margin-top: .4rem; }
.entry__content blockquote {
  border-left: 4px solid var(--accent); padding-left: var(--sp-5);
  font-size: var(--fs-md); color: var(--ink-700);
}
.entry__content img, .entry__content figure { border-radius: var(--radius); overflow: hidden; height: auto; }
.entry__content figcaption { font-size: var(--fs-xs); color: var(--ink-500); margin-top: .5rem; }
.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; }

/* 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);
}
.sc-game.is-next { border-color: var(--green-600); box-shadow: inset 3px 0 0 var(--accent); }
.sc-game__date {
  width: 50px; text-align: center; background: var(--green-900); 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 */
.leave {
  position: fixed; inset: 0; z-index: 400; display: grid; place-items: center;
  background: rgb(2 27 15 / .6); padding: var(--sp-4);
}
.leave__panel {
  background: var(--surface); border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.25rem);
  width: min(30rem, 100%); box-shadow: var(--shadow-lg);
}
.leave__title { font-size: var(--fs-md); margin-bottom: var(--sp-3); }
.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 auto; }

/* =============================================================
   18 Newsarchiv mit Filter
   ============================================================= */
.news-filter {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1rem, 1.8vw, 1.5rem); margin-bottom: clamp(1.5rem, 2.5vw, 2.25rem);
}
.news-filter__row { display: flex; gap: var(--sp-4); align-items: flex-end; flex-wrap: wrap; }
.news-filter .field { display: grid; gap: .35rem; }
.news-filter label {
  font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-500);
}
.news-filter select {
  padding: .6rem .8rem; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); font-size: var(--fs-sm); min-width: 11rem;
}
.news-filter select:focus { border-color: var(--green-600); outline: none; }
.news-filter .link-more { color: var(--green-700); }

.news-filter__months { margin-top: var(--sp-4); border-top: 1px solid var(--line); padding-top: var(--sp-3); }
.news-filter__months summary {
  cursor: pointer; font-size: var(--fs-sm); font-weight: 800; color: var(--green-700);
}
.news-filter__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr));
  gap: var(--sp-4); margin-top: var(--sp-4);
}
.news-filter__year { font-weight: 800; font-size: var(--fs-sm); margin-bottom: .35rem; }
.news-filter__grid a {
  display: flex; justify-content: space-between; gap: .5rem;
  font-size: var(--fs-xs); padding: .25rem 0; color: var(--ink-700);
}
.news-filter__grid a:hover { color: var(--green-700); }
.news-filter__grid a span { color: var(--ink-300); font-variant-numeric: tabular-nums; }

.news-count { font-size: var(--fs-sm); color: var(--ink-500); margin-bottom: var(--sp-4); }
.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 select, .news-filter .btn { width: 100%; }
}

/* =============================================================
   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; }

/* Nennung unter einer belegten Werbefläche */
.adslot__by {
  margin-top: .5rem; font-size: var(--fs-xs); color: var(--ink-500);
  text-align: right;
}

@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);
  border-left: 3px solid var(--green-600);
}
.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);
  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; }