/* ==========================================================================
   FC Diepoldsau-Schmitter — Startseite
   Gestaltungsidee: Flutlicht-Anzeigetafel. Vereinsfarben blau/gelb,
   Matchplan des Wochenendes als Hauptmotiv.
   ========================================================================== */

:root {
  /* Vereinsfarben */
  --gelb:       #ffdd00;   /* Vereinsgelb */
  --blau:       #0095da;   /* Vereinsblau — Flaechen, Rahmen, grosse Titel */
  --blau-text:  #006b9c;   /* abgedunkelt fuer kleinen Text: 5.9:1 auf Weiss.
                              Vereinsblau selbst kommt nur auf 3.3:1 und
                              genuegt damit nur fuer grosse Schrift. */
  --blau-hell:  #33aee4;

  /* Ein einziges dunkles Blau fuer Kopfzeile, Hero, Teams und Fussbereich.
     #01527d ist das abgedunkelte Vereinsblau — hell genug, um als dieselbe
     Farbe erkannt zu werden, dunkel genug fuer Text darauf:
     Weiss 8.4:1, Gelb 6.2:1. Das Vereinsblau selbst traegt nur 3.3:1. */
  --nacht:      #01527d;
  --nacht-2:    #013f5e;   /* Tafel im Hero, eine Stufe tiefer */
  --nacht-3:    #04628f;
  --papier:     #eff3f6;
  --weiss:      #ffffff;
  --tinte:      #0d1119;
  --nebel:      #5d6b78;
  --linie:      #dbe3ea;

  /* Schrift — Oswald als Hausschrift fuer Titel und Beschriftungen.
     Fuer Fliesstext bleibt eine Leseschrift: Oswald ist schmal geschnitten
     und fuer laengere Absaetze wie die Spielberichte ungeeignet. */
  --display: "Oswald", "Archivo Narrow", "Arial Narrow", sans-serif;
  --body:    "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Raster */
  --bund: clamp(1.25rem, 4vw, 3.5rem);
  --max:  1280px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--bund);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

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

/* --------------------------------------------------------------- Skiplink */
.skip {
  position: absolute; left: 0; top: -100%;
  background: var(--gelb); color: var(--nacht);
  padding: .75rem 1.25rem; font-weight: 700; z-index: 200;
}
.skip:focus { top: 0; }

/* ----------------------------------------------------------------- Header */
/* Dasselbe Blau wie Hero und Teams — vorher standen hier zwei verschiedene
   Toene nebeneinander. Auf diesem Grund traegt Weiss mit 8.4:1. */
.kopf {
  position: sticky; top: 0; z-index: 100;
  background: var(--nacht);
  border-bottom: 0;
}
.kopf__inner {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 72px;
}
.marke {
  display: flex; align-items: center; gap: .65rem;
  text-decoration: none; flex: 0 0 auto;
}
/* Das Wappen ist quadratisch; die Hoehe richtet sich nach dem Schriftzug,
   damit die Kopfzeile nicht waechst. */
.marke__logo { display: block; width: auto; height: 40px; flex: 0 0 auto; }
.marke__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--weiss);
  white-space: nowrap;
}
/* Vereinsblau statt der abgedunkelten Variante: 22px in 700 zaehlt als
   grosse Schrift, dort genuegen 3:1 — erreicht sind 3.3:1. */
.marke__name span { color: inherit; }

/* Navigation */
.nav { margin-left: auto; }
.nav__liste {
  list-style: none; display: flex; gap: .25rem;
  margin: 0; padding: 0;
}
.nav__punkt { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .6rem .62rem;
  font-size: .875rem; font-weight: 600;
  text-decoration: none; color: var(--weiss);
  border-radius: 4px;
  white-space: nowrap;
}
.nav__link:hover { background: rgba(255, 255, 255, .14); }
.nav__punkt--aktiv > .nav__link { background: rgba(255, 255, 255, .2); }
.nav__link[aria-haspopup]::after {
  content: ""; width: 5px; height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}

.unter {
  position: absolute; top: 100%; left: 0;
  min-width: 250px; max-height: 70vh; overflow-y: auto;
  list-style: none; margin: 0; padding: .4rem;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-top: 3px solid var(--gelb);
  box-shadow: 0 18px 40px rgba(6, 43, 63, .16);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.nav__punkt:hover > .unter,
.nav__punkt:focus-within > .unter { opacity: 1; visibility: visible; transform: none; }
.unter a {
  display: block; padding: .5rem .7rem;
  font-size: .875rem; text-decoration: none; color: var(--nacht);
  border-radius: 3px;
}
.unter a:hover { background: var(--nacht); color: var(--gelb); }
.unter__titel {
  padding: .6rem .7rem .3rem;
  font-family: var(--mono); font-size: .6875rem;
  text-transform: uppercase; letter-spacing: .12em; color: var(--nebel);
}

.burger {
  display: none; margin-left: auto;
  width: 44px; height: 44px; padding: 0;
  background: rgba(255, 255, 255, .16); border: 0; border-radius: 4px;
  cursor: pointer;
}
.burger span {
  display: block; width: 20px; height: 2px; margin: 4px auto;
  background: var(--weiss); transition: transform .2s ease, opacity .2s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* -------------------------------------------------- Spitze: Hauptsponsoren */
/* Weiss wie die Kopfzeile — beide lesen als ein Band, bis das dunkle Hero
   anschliesst. Die Beschriftung steht als Spaltentitel ueber ihrer Logoreihe,
   nicht daneben: so ist auf einen Blick klar, wozu sie gehoert. Zwischen den
   Logos feine Striche statt Kaesten. */
/* Weiss, nicht grau: die Logos haben selbst weissen Grund — auf einer
   getoenten Flaeche zeichnet sich sonst ihr Bildrand als Kasten ab. */
.spitze {
  background: var(--weiss);
  border-bottom: 1px solid var(--linie);
}
/* Das Band bleibt unter der Kopfzeile stehen — aber nur, wenn es einzeilig
   ist. main.js misst das und setzt die Klasse; mehrzeilig wuerde es beim
   Scrollen den halben Bildschirm belegen. */
.spitze--klebt {
  position: sticky; top: var(--kopfhoehe, 72px); z-index: 90;
}
/* Gruppen stehen nacheinander von links, nicht ueber die Breite verteilt.
   Oben ausgerichtet, damit die drei Beschriftungen auf einer Linie stehen —
   unten ausgerichtet lagen sie je nach Logohoehe unterschiedlich hoch. */
.spitze__inner {
  display: flex; align-items: flex-start; justify-content: flex-start;
  gap: .9rem 2rem; flex-wrap: wrap;
  padding-block: .7rem;
}

.spitze__gruppe {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: .5rem;
}
.spitze__gruppe--rechts { align-items: flex-start; }
/* Nur die Foerdergruppe wird ans rechte Ende gedrueckt. Das Label bleibt,
   wo es immer stand: gleich hinter den Sponsoren. */
.spitze__gruppe--foerdern { margin-left: auto; }

/* Zwei knappe Knoepfe in Bandhoehe. So gross wie im Hero waeren sie hier
   fehl am Platz — das Band lebt von ruhigen Zeilen. */
.pille {
  display: inline-flex; align-items: center;
  padding: .45rem .85rem;
  border: 1.5px solid var(--nacht); border-radius: 999px;
  font-family: var(--mono); font-size: .6875rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--nacht); text-decoration: none;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.pille + .pille { margin-left: .5rem; }
.pille:hover { background: var(--nacht); color: var(--weiss); }

.spitze__label {
  font-family: var(--mono); font-size: .625rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--nebel);
  line-height: 1;
}

/* Gemeinsame Zeilenhoehe: die Logos sitzen mittig darin, damit trotz
   unterschiedlicher Hoehen ein ruhiges Band entsteht. */
.spitze__reihe { display: flex; align-items: center; min-height: 42px; }

/* Zwischen Umschaltpunkt und voller Breite wird es im Kopf eng:
   einzeilige Wortmarke (307px) plus acht Menuepunkte. Dort enger setzen. */
@media (min-width: 1101px) and (max-width: 1320px) {
  .nav__link { padding: .6rem .45rem; font-size: .8125rem; }
  .marke__name { font-size: 1.25rem; }
}

.markenlogo {
  display: grid; place-items: center;
  padding: 0 1.1rem;
  border-left: 1px solid var(--linie);
  opacity: .92;
  transition: opacity .15s ease;
}
.spitze__reihe .markenlogo:first-child { padding-left: 0; border-left: 0; }
.spitze__reihe .markenlogo:last-child  { padding-right: 0; }
.markenlogo:hover { opacity: 1; }
/* Jedes Logo bekommt seine eigene Groesse, berechnet auf gleiche FLAECHE
   statt gleiche Box. Die Seitenverhaeltnisse reichen von 0.88 bis 3.76 —
   in einer festen Box erscheint ein hohes Logo dadurch schmal und ein
   breites flach, obwohl die Box gleich ist. Die Werte stehen als --lw/--lh
   am jeweiligen Bild und werden von logo-groessen.py erzeugt. */
.markenlogo img {
  /* main.js rechnet --lw/--lh aus den geladenen Bildern. Ohne Skript
     bleibt eine gemeinsame Hoehe — nicht flaechengleich, aber ruhig. */
  width: var(--lw, auto); height: var(--lh, 34px); object-fit: contain;
}
/* Mittlere Gruppe kleiner: die Rangfolge soll man sehen, ohne sie zu lesen */
.spitze__gruppe--zwei .markenlogo { padding: 0 .9rem; }



@media (max-width: 860px) {
  .spitze__inner { padding-block: .85rem; gap: 1rem 1.5rem; }
  .spitze__gruppe--rechts { align-items: flex-start; }
  .markenlogo { padding: 0 1.1rem; }
  .markenlogo img { width: calc(var(--lw, auto) * .88); height: calc(var(--lh, 34px) * .88); }
  .spitze__gruppe--zwei .markenlogo { padding: 0 .7rem; }
  .spitze__reihe { flex-wrap: wrap; row-gap: .5rem; }
}

/* ---- Das Band auf dem Handy: kompakt, ohne Zwischentitel (24.9.2026)
   Gemessen waren es 402 px von 812 — mit der Kopfzeile 58 % des Schirms,
   bevor der Verein selbst zu sehen war. Der groesste Teil davon waren die
   sechs Beschriftungen („HAUPTSPONSOREN", „CO-SPONSOREN" …): rund 180 px
   fuer Text ueber 35 px hohen Logos. Auf dem Handy fallen sie weg und die
   Gruppen fliessen in einer Reihe weiter — **die Rangfolge sieht man
   weiterhin**, an der Reihenfolge und daran, dass die Hauptsponsoren
   groesser stehen. Am Computer bleibt alles, wie es war. */
@media (max-width: 700px) {
  .spitze__label { display: none; }
  .spitze__inner {
    align-items: center;
    gap: .35rem .5rem;
    padding-block: .55rem;
  }
  .spitze__gruppe { flex-direction: row; align-items: center; gap: 0; }
  .spitze__gruppe--foerdern { margin-left: 0; }
  .spitze__reihe { min-height: 0; }
  .markenlogo { padding: 0 .45rem; }
  /* Alle kleiner — die erste Gruppe (Hauptsponsoren) deutlich weniger. */
  .markenlogo img {
    width: calc(var(--lw, auto) * .62); height: calc(var(--lh, 34px) * .62);
  }
  .spitze__gruppe:first-child .markenlogo img {
    width: calc(var(--lw, auto) * .9); height: calc(var(--lh, 34px) * .9);
  }
  /* Goenner und Club 51 kleiner, damit sie keine eigene Zeile brauchen.
     Mit der Gruppe davor, sonst gewinnt die spaetere .rundmarke-Regel
     weiter unten im Blatt — eine Media Query erhoeht die Spezifitaet nicht. */
  .spitze .rundmarke { width: 40px; height: 40px; }
  .spitze .rundmarke + .rundmarke { margin-left: .35rem; }
  .spitze .rundmarke__wort { font-size: .5rem; }
  .spitze .rundmarke__klein { font-size: .4375rem; }
  .spitze .rundmarke__zahl { font-size: .875rem; }
}

/* Wappen steht beim Slogan, nicht mehr in der Kopfzeile */
/* --------------------------------------------------------- Hero / Matchplan */
.hero {
  background: var(--nacht);
  color: var(--weiss);
  position: relative;
  overflow: hidden;
}
/* Das Wandbild als Grund des Heros. Oben ausgerichtet: Schriftzug und
   Spieler stehen im oberen Teil der Wand. Darueber ein kraeftiger Schleier
   in Vereinsblau — links dichter, weil dort der Slogan steht, rechts etwas
   offener, dort deckt die Anzeigetafel ohnehin. */
.hero__bild {
  position: absolute; inset: 0 0 auto 0;
  height: clamp(17rem, 46vw, 34rem);
  background: url("../bilder/wandbild.jpg") center top / cover no-repeat;
}
.hero__bild::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg,
      rgba(1, 82, 125, .42) 0%, rgba(1, 82, 125, .54) 45%, rgba(1, 82, 125, .80) 100%),
    linear-gradient(to bottom,
      rgba(1, 82, 125, .30) 0%, rgba(1, 82, 125, .02) 25%,
      rgba(1, 82, 125, .62) 78%, var(--nacht) 100%);
}

/* Der Schleier ueber dem Wandbild ist seit 23.9.2026 duenner (Wunsch des
   Vereins: „das Wandbild staerker machen") — Schriftzug, Spieler und Zaun
   sind wieder zu erkennen. Damit die Schrift darueber trotzdem sicher
   steht, bekommt sie einen weichen Schatten statt eines dichteren
   Schleiers: so bleibt das Bild kraeftig **und** der Text lesbar. */
.hero .eyebrow,
.hero .titelzone,
.hero__lead { text-shadow: 0 1px 12px rgba(0, 28, 44, .55); }

/* Flutlicht-Kegel: der einzige dekorative Effekt der Seite */
.hero::before {
  content: "";
  position: absolute; inset: -30% -10% auto -10%; height: 90%; z-index: 1;
  background:
    radial-gradient(60% 70% at 20% 0%, rgba(28,111,214,.55), transparent 70%),
    radial-gradient(45% 60% at 82% 0%, rgba(255, 221, 0,.20), transparent 70%);
  pointer-events: none;
}
.hero__inner {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 5.6fr) minmax(0, 6.4fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3rem, 6vw, 4.5rem);
  align-items: start;
}

.eyebrow {
  font-family: var(--mono);
  font-size: .75rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gelb);
  display: flex; flex-wrap: wrap; gap: .5rem 1rem;
  margin: 0 0 1.5rem;
}
.eyebrow span::after { content: " ·"; color: rgba(255, 221, 0,.45); }
.eyebrow span:last-child::after { content: ""; }

.hero h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.4rem, 5.6vw, 4.25rem);
  line-height: .92;
  letter-spacing: -.005em;
  text-transform: uppercase;
  margin: 0 0 1.25rem;
}
.hero h1 span,
.hero h1 em {
  display: block;
  font-style: normal;
}
.hero h1 em { color: var(--gelb); }
.hero__lead {
  font-size: 1.0625rem;
  color: rgba(255,255,255,.78);
  max-width: 38ch;
  margin: 0 0 2rem;
}
.hero__lead strong { color: var(--weiss); font-weight: 600; }
.hero h1, .hero__lead { text-shadow: 0 2px 12px rgba(1, 40, 62, .45); }

.knopf {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 1.4rem;
  font-family: var(--body); font-size: .875rem; font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none; border: 2px solid transparent; border-radius: 3px;
  transition: transform .15s ease, background-color .15s ease, color .15s ease;
}
.knopf:hover { transform: translateY(-2px); }
.knopf--gelb { background: var(--gelb); color: var(--nacht); }
.knopf--gelb:hover { background: var(--weiss); }
.knopf--rand { border-color: rgba(255,255,255,.35); color: var(--weiss); }
.knopf--rand:hover { border-color: var(--gelb); color: var(--gelb); }
.knopf--blau { background: var(--blau); color: var(--weiss); }

/* Online-Shop: ein Einkaufswagen in der Kopfzeile, ganz rechts. Gelbe
   Scheibe wie die Goenner-Muenze daneben — was man anklicken kann, ist auf
   dieser Seite rund und gelb. Der Wagen ist gezeichnet, kein Bild: er bleibt
   damit auf jedem Bildschirm scharf und faerbt sich mit. */
.wagen {
  width: 40px; height: 40px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--gelb);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
  transition: transform .3s ease;
}
.wagen__bild {
  width: 22px; height: 22px;
  fill: var(--nacht); stroke: var(--nacht);
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
/* Nur der Korb ist eine Linie; die Raeder sind gefuellt. */
.wagen__bild path { fill: none; }
.wagen:hover { transform: translateY(-2px) scale(1.06); }

/* --------------------------------------------- Goennerverein und Club 51 */
/* Zwei runde Marken, verwandt mit dem Einkaufswagen im Kopf. Der Goenner ist eine
   gelbe Muenze — wer gibt, gibt Geld; der Club 51 traegt seine Zahl wie eine
   Rueckennummer, in Vereinsblau. Zwei Formen, dieselbe Groesse: sie gehoeren
   zusammen, sind aber nicht dasselbe. */
.rundmarke {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; align-content: center;
  text-align: center; text-decoration: none; line-height: 1;
  transition: transform .3s ease, box-shadow .3s ease;
}
.rundmarke + .rundmarke { margin-left: .5rem; }
.rundmarke:hover { transform: translateY(-2px) scale(1.06); }

.rundmarke--goenner {
  background: radial-gradient(circle at 34% 30%, #fff6b8 0%, var(--gelb) 58%, #d9b800 100%);
  box-shadow: 0 4px 12px rgba(1, 82, 125, .3), inset 0 0 0 2px rgba(255, 255, 255, .55);
}
.rundmarke__wort {
  font-family: var(--display); font-weight: 700; font-size: .6875rem;
  text-transform: uppercase; letter-spacing: .02em; color: var(--nacht);
}

.rundmarke--club {
  background: var(--nacht);
  box-shadow: 0 4px 12px rgba(1, 82, 125, .35), inset 0 0 0 2px var(--gelb);
}
.rundmarke__klein {
  font-family: var(--mono); font-size: .5rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gelb);
}
.rundmarke__zahl {
  font-family: var(--display); font-weight: 700; font-size: 1.125rem;
  color: var(--weiss); margin-top: .1rem;
}

@media (prefers-reduced-motion: reduce) {
  .rundmarke:hover, .wagen:hover { transform: none; }
}
.knopf--blau:hover { background: var(--nacht); }

/* Anzeigetafel */
.tafel {
  background: var(--nacht-2);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 4px;
  box-shadow: 0 30px 60px rgba(0,0,0,.35);
  overflow: hidden;
}
.tafel__kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: .9rem 1.1rem;
  background: rgba(0,0,0,.25);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.tafel__label {
  font-family: var(--mono); font-size: .6875rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
/* Seit 22.9.2026 sind es drei Reiter (drei Bloecke zu sieben Tagen). Sie
   duerfen umbrechen: nebeneinander sind sie schon auf dem Desktop knapp,
   und ueber die Monatsgrenze werden die Beschriftungen laenger
   („27. Sep. – 4. Okt."). Umbrechen ist besser als ein Reiter, der aus der
   Tafel haengt oder verborgen ist. */
.reiter { display: flex; gap: .25rem; flex-wrap: wrap; }
.reiter button {
  font-family: var(--mono); font-size: .75rem; font-weight: 600;
  padding: .4rem .75rem;
  background: transparent; color: rgba(255,255,255,.6);
  border: 1px solid rgba(255,255,255,.14); border-radius: 3px;
  cursor: pointer; white-space: nowrap;
}
.reiter button:hover { color: var(--weiss); border-color: rgba(255,255,255,.4); }
.reiter button[aria-selected="true"] {
  background: var(--gelb); border-color: var(--gelb); color: var(--nacht);
}

/* Eine Tafel ohne Termine (Mannschaftsseiten der Juengsten, 23.9.2026).
   Sie soll nicht nach Fehler aussehen, sondern nach „noch nichts los" —
   deshalb dieselbe Tafel, nur mittig und ruhig. */
.tafel--leer { text-align: center; }
.tafel__leer {
  display: grid; gap: .45rem; justify-items: center;
  padding: clamp(1.8rem, 6vw, 3rem) 1.2rem;
}
.tafel__leer b {
  font-family: var(--display); font-weight: 600;
  font-size: 1.15rem; letter-spacing: .02em; text-transform: uppercase;
  color: var(--weiss);
}
.tafel__leer b::before {
  content: ""; display: block; width: 2rem; height: 3px; margin: 0 auto .8rem;
  background: var(--gelb);
}
.tafel__leer span { font-size: .9rem; line-height: 1.5; color: rgba(255,255,255,.55); max-width: 36ch; }

.tafel__tag {
  padding: .55rem 1.1rem;
  font-family: var(--mono); font-size: .75rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--gelb);
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.spiel {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  gap: 0 1rem;
  padding: .8rem 1.1rem .85rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
  border-left: 3px solid transparent;
}
.spiel:last-child { border-bottom: 0; }
.spiel--heim { border-left-color: var(--gelb); background: rgba(255, 221, 0,.045); }
.spiel__zeit {
  font-family: var(--mono); font-size: .9375rem; font-weight: 600;
  color: var(--weiss); padding-top: .05rem;
}
.spiel__paarung {
  font-size: .9375rem; line-height: 1.35; color: rgba(255,255,255,.72);
}
.spiel__paarung b { color: var(--weiss); font-weight: 700; }
.spiel__paarung .vs { color: rgba(255,255,255,.35); padding: 0 .3rem; }
/* Gespielt: an der Stelle des Gedankenstrichs steht das Resultat. Gelb, weil
   es die einzige Zahl in der Zeile ist, die zaehlt. */
.spiel__paarung .vs--stand {
  margin: 0 .35rem; padding: .05rem .4rem;
  background: var(--gelb); color: var(--nacht);
  border-radius: 3px;
  font-family: var(--mono); font-size: .8125rem; font-weight: 600;
}
/* Die ganze Paarung fuehrt zur Seite des Spiels. */
.spiel__detail { color: inherit; text-decoration: none; }
.spiel__detail:hover { color: var(--gelb); }
.spiel__detail:hover b { color: var(--gelb); }
/* Gespieltes tritt einen Schritt zurueck — es steht nur noch zum Nachlesen da. */
.spiel--gespielt .spiel__meta { opacity: .8; }
.spiel__meta {
  grid-column: 2;
  font-family: var(--mono); font-size: .6875rem;
  color: rgba(255,255,255,.42);
  margin-top: .3rem;
}
.spiel__ort::before { content: " · "; white-space: pre; }
.spiel__rechts { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; }
.marker {
  font-family: var(--mono); font-size: .625rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .18rem .45rem; border-radius: 2px;
  white-space: nowrap;
}
.marker--heim { background: var(--gelb); color: var(--nacht); }
/* Auswaerts als Umriss statt Flaeche: gelb bleibt dem Heimspiel vorbehalten,
   die Zeile ist trotzdem auf einen Blick zugeordnet. */
.marker--auswaerts {
  background: transparent;
  color: rgba(255, 255, 255, .72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
}
.resultat {
  font-family: var(--mono); font-size: 1.0625rem; font-weight: 600;
  color: var(--gelb);
}
.tafel__fuss {
  padding: .9rem 1.1rem;
  display: flex; flex-wrap: wrap; gap: 1.25rem;
  background: rgba(0,0,0,.22);
}
.tafel__fuss a {
  font-family: var(--mono); font-size: .75rem; font-weight: 600;
  color: var(--gelb); text-decoration: none;
  border-bottom: 1px solid rgba(255, 221, 0,.35);
}
.tafel__fuss a:hover { color: var(--weiss); border-color: var(--weiss); }

/* --------------------------------------------------------------- Sektionen */
.sektion { padding-block: clamp(3rem, 7vw, 5.5rem); }
/* Kopfzeile und Abschnittsleiste kleben oben. Ohne diesen Versatz
   springt der Anker unter sie und die Ueberschrift ist verdeckt.
   main.js misst die tatsaechliche Hoehe und setzt --sprungversatz. */
.sektion[id], .meldung[id] { scroll-margin-top: var(--sprungversatz, 84px); }
.sektion--weiss { background: var(--weiss); }
.sektion--nacht { background: var(--nacht); color: var(--weiss); }

.sektion__kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem 2rem; flex-wrap: wrap;
  margin-bottom: 2.25rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--tinte);
}
.sektion--nacht .sektion__kopf { border-bottom-color: rgba(255,255,255,.2); }
.sektion__titel {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: .9; letter-spacing: .005em; text-transform: uppercase;
  margin: 0;
}
.sektion__hinweis {
  font-family: var(--mono); font-size: .75rem; font-weight: 500;
  letter-spacing: .06em; color: var(--nebel);
  margin: 0;
}
.sektion--nacht .sektion__hinweis { color: rgba(255,255,255,.55); }
.sektion__hinweis a { color: var(--blau-text); }
.sektion--nacht .sektion__hinweis a { color: var(--gelb); }


/* ------------------------------------------------------- Naechste Anlaesse */
/* Greift die Bildsprache des Hero auf: dunkle Tafel, gelbe Ziffern.
   Prominenz kommt aus Position und Typografie, nicht aus einer grossen
   Farbflaeche — Gelb bleibt dadurch ueberall Akzent. */

/* --------------------------------------------------------- Lottomatch */
/* Eine Lottokugel, wie sie aus der Trommel faellt: heller Ball, darauf das
   runde Zahlenfeld. Steht am freien Platz neben dem Slogan, wo bis vor
   Kurzem die Sonne des Online-Shops sass. Erscheint nur, solange der Verein
   das Special ausgeschrieben hat. */
.titelzone { position: relative; }

/* Die Knoepfe der offenen Anlaesse stehen **rechts neben dem Slogan**, wie
   es die Kugeln von Anfang an taten (Vorgabe des Vereins, 18.9.2026 abends:
   „Stelle wie ganz am Anfang") — und **klein genug, dass sie nichts
   verdecken** („so, aber 88 Pixel").
   **88 px ist keine runde Zahl, sondern ein Mass:** zwischen der Oberkante
   des Heros und der Zeile „Saison 26/27 · 19 Teams · seit 1951" liegen genau
   88 px (gemessen bei 1280 px: Hero 165, Zeile 253). Ein Pixel mehr, und der
   Knopf ragt entweder oben aus dem Hero oder unten in die Zeile. `top:
   -132px` setzt ihn genau in diesen Streifen: die Titelzone faengt bei 297
   an, 297 − 132 = 165. Wer an einem der beiden Werte dreht, misst den
   anderen nach.
   Probiert und wieder verworfen: 200 px (der Hero bestand fast nur aus
   Knoepfen), die Reihe im Fluss ueber dem Eyebrow (schob Slogan und Vorspann
   nach unten) und ein eigenes Band unter dem Hero. */
.specialknoepfe {
  position: absolute;
  /* **Neben dem Slogan, nicht darueber** (Vorgabe des Vereins, 18.9.2026
     abends: „deutlich tiefer, neben den Slogan"). `top: 0` setzt die Reihe
     auf die Hoehe der ersten Slogan-Zeile, `right: 0` an die rechte Kante
     der Spalte. Dort ist die Luecke: „Oani Insla" und „Oan Club" enden weit
     vor der Spaltenkante, erst „Oani Lidaschaft" reicht hinaus — die Reihe
     muss also ueber deren Zeile bleiben. Gemessen bei 1280 px: Zeile 1 endet
     bei 361, die Reihe faengt bei 383 an; Zeile 3 beginnt bei 403, die Reihe
     endet bei 385. */
  /* Hinaus in den Zwischenraum zur Anzeigetafel (Vorgabe des Vereins: „noch
     nach rechts", dann „noch weiter rauf"). Der Zwischenraum ist selbst eine
     clamp-Groesse (`gap: clamp(2rem, 5vw, 4.5rem)`), deshalb auch hier eine:
     feste 52 px liessen bei 1081 px nur 2 px zur Tafel. Gemessen bleiben
     19 bis 26 px. `top: -24px` setzt die Reihe genau unter die Zeile — 24 px
     ueber der Titelzone endet sie (Hoehe 20 px plus 24 px Abstand, davon
     20 px Schriftband). Hoeher geht nicht, ohne sie zu verdecken. */
  right: calc(-1 * clamp(8px, calc(4.4vw - 20px), 43px)); top: -24px;
  display: flex; flex-wrap: wrap; justify-content: flex-end;
  /* Eng gesetzt: jeder Millimeter zwischen den beiden geht sonst dem
     Durchmesser ab — rechts ist die Anzeigetafel, links „Oani Insla". */
  align-items: flex-start; gap: .375rem;
  /* Hoechstens zwei nebeneinander (Vorgabe des Vereins), rechtsbuendig. */
  max-width: calc(2 * var(--kugel) + .75rem);
  /* 118 px ab rund 1440 px Fenster, 82 px bei 1081 px. Die Groesse waechst
     mit dem Fenster, weil die Luecke es auch tut: der Slogan waechst mit
     5.6vw, und bei fester Groesse beruehrte der linke Knopf auf schmalen
     Fenstern „Oani Insla". **Groesser geht nicht**: bei 1440 px bleiben
     rechts noch 9 px zur Anzeigetafel und links 2 px zu „Oani Insla" — genau
     die zwei, die der Verein wollte. Gemessen bei 1081, 1200, 1280, 1440 und
     1920 px: 2–36 px zu „Oani Insla", 12–28 px ueber „Oani Lidaschaft",
     6–9 px zur Anzeigetafel. */
  --kugelbasis: clamp(74px, calc(10vw - 26px), 118px);
  --kugel: var(--kugelbasis);
}
/* **Steht nur ein Anlass offen, darf der Knopf gross sein** (Vorgabe des
   Vereins, 18.9.2026: „wenn nur einer da ist, machen wir groesser wie auch
   schon"). Allein ist die Gruppe schmal genug, dass sie neben „Oani Insla"
   noch Platz hat, und sie darf hoeher hinauf: ein Kreis ist oben schmal, auf
   Hoehe der Zeile „Saison 26/27 …" misst er nur noch rund die halbe Breite
   und steht dort weit rechts von deren Ende. `top: calc(100px - var(--kugel))`
   haengt ihn ueber die Oberkante von „Oani Lidaschaft" — die faengt je nach
   Schriftgroesse 94 bis 106 px unter der Titelzone an; mit 88 px bleiben
   ueberall mindestens sechs Pixel Luft. */
.specialknoepfe:not(.specialknoepfe--zwei) {
  --kugelbasis: clamp(120px, calc(15vw - 16px), 200px);
  top: calc(88px - var(--kugel));
  /* Allein rueckt der Knopf nur zwoelf statt zwanzig Pixel nach links: er
     ist groesser und haengt hoeher, und bei 1081 px beruehrte seine Flanke
     sonst das Ende von „seit 1951". */
  right: calc(-1 * clamp(16px, calc(4.4vw - 12px), 51px));
}

/* Ab 1200 px duerfen sie noch zehn Pixel hoeher — dann reicht die Zeile
   „Saison 26/27 · 19 Teams · seit 1951" weit genug nach links, dass der
   Kreis sie auf ihrer Hoehe nicht mehr schneidet. Darunter bleibt es bei
   -24 px (buendig unter der Zeile): bei 1081 px lag der Kreis sonst 24 px
   im Text. Gerechnet wird mit der Sehne des Kreises, nicht mit seinem
   Rechteck — oben ist er schmal, deshalb geht es ueberhaupt. */
@media (min-width: 1200px) {
  .specialknoepfe--zwei:not(.specialknoepfe--drei) { top: -34px; }
}

/* **Zu dritt stehen sie ueber der Zeile, nicht neben dem Slogan.** Drei
   Knoepfe sind 288 px breit; neben „Oani Insla" bleiben aber nur rund 190 px
   (gemessen bei 1440 px), der linke laege 87 px im Wort. Ueber der Zeile ist
   die ganze Spaltenbreite frei — und weil die Knoepfe genau so gross sind
   wie dieser Streifen, passen sie dort in eine Reihe. `top` haengt sie an
   dessen Unterkante: 44 px ueber der Titelzone faengt die Zeile an (ihre
   Hoehe 20 px plus 24 px Abstand). */
.specialknoepfe--drei {
  max-width: none;
  top: calc(-1 * (var(--kugel) + 44px));
  /* Im Streifen gilt dessen Hoehe als Grenze — dort ist 100 px zu hoch. */
  --kugelbasis: clamp(48px, calc(7vw - 6px), 88px);
}

/* Bei 88 px reicht es fuer zwei Zeilen Name; eine dritte liefe in die gelbe
   Marke (gemessen: drei Zeilen enden bei 47 px, die Marke faengt bei 42 an).
   Unter 901 px steht die Reihe im Fluss und ist wieder gross — dort duerfen
   es drei sein. */
@media (min-width: 901px) {
  .heroknopf__titel { -webkit-line-clamp: 2; }
}

@media (max-width: 900px) {
  /* Einspaltig: die Reihe steht im Fluss unter dem Slogan und verdeckt nichts
     — dort duerfen die Knoepfe gross sein. */
  .specialknoepfe { position: relative; right: auto; top: auto;
    margin: 1.5rem 0 .25rem; justify-content: flex-start; max-width: none;
    --kugelbasis: 160px; }
}
/* Auf dem Telefon bleiben rund 335 px — dort richten sich die Knoepfe nach
   dem Platz, damit zwei nebeneinander stehen statt untereinander. */
@media (max-width: 560px) {
  .specialknoepfe { --kugelbasis: min(160px, calc(50vw - 30px)); }
}

/* --------------------------------------------- Der Knopf im Hero */
/* Seit dem 18.9.2026 abends die einzige Form im Hero — die drei gezeichneten
   Kugeln (Lottokugel, Fussball, Spieler) sind ausgebaut. Ein runder Knopf,
   dunkel mit gelbem Rand: eine ganz gelbe Flaeche haette neben der
   Sponsorenwand geschrien. Vier Angaben, alle aus der Verwaltung und alle
   freiwillig — Datum, Name, Wort, Sponsorenlogo. */
.heroknopf {
  position: relative;
  width: var(--kugel, 112px); height: var(--kugel, 112px);
  /* Nicht schrumpfen und nicht wachsen: sonst wird aus dem Kreis ein Ei.
     `min-width: 0` gehoert dazu — ein Flexkind darf sonst nicht schmaler
     werden als sein laengster Inhalt (min-width: auto), und der Knopf wurde
     so breit wie „19.–21.06.2026" ungebrochen ist: 185 statt 112 px. */
  flex: 0 0 auto; min-width: 0;
  display: grid; place-items: center; align-content: center;
  /* In Anteilen der eigenen Groesse, nicht in Prozent: ein prozentualer
     Innenabstand rechnet gegen die **Breite der Reihe**, nicht gegen den
     Knopf. Auf dem Handy ist die Reihe so breit wie die Spalte (754 px
     gemessen) — 12 % davon sind 90 px je Seite, und der Knopf wuchs auf
     185 px. Genau daher kam das Ei. */
  padding: 0 calc(var(--kugel, 112px) * .12);
  border-radius: 50%;
  text-decoration: none; color: var(--weiss); text-align: center;
  background: rgba(255, 255, 255, .08);
  border: 2px solid var(--gelb);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .35);
  transition: transform .3s ease;
}
.heroknopf:hover { transform: rotate(-4deg) scale(1.04); }
/* Der Text steht oben im Kreis, mit und ohne Logo **gleich hoch** (Vorgabe
   des Vereins, 18.9.2026: „wenn kein Logo, dann soll das Datum und alles
   andere auf der gleichen Zeile sein"). Stehen zwei Knoepfe nebeneinander,
   liegen Datum, Name und Wort dadurch auf einer Linie — vorher sass der Text
   ohne Logo mittig und damit tiefer.
   Die vier Masse haengen zusammen und sind zusammen gemessen (84, 95, 122,
   132 und 200 px): `top` 12 % setzt den Text so tief, dass die erste Zeile im
   Kreis bleibt — ganz oben ist die Sehne des Kreises schmaler als der Text,
   bei 200 px stand der Name sonst links und rechts hinaus —, und so hoch,
   dass er ueber der gelben Marke endet. Der seitliche Rand von 17 % ist auf
   dieselbe Sehne gerechnet. Wer eines der Masse aendert, misst die anderen
   nach. */
.heroknopf__kopf {
  position: absolute; left: 0; right: 0; top: 12%;
  margin: 0; padding: 0 17%;
}
/* Das Datum zuoberst, klein und gelb (Vorgabe des Vereins, 18.9.2026:
   „1. Zeile Datum, 2. Name der Veranstaltung"). */
.heroknopf__datum {
  display: block; margin-bottom: .1rem;
  font-family: var(--mono); font-size: max(8px, calc(var(--kugel, 112px) * .058));
  /* Eng gesetzt: „19.–21.06.2026" braucht auf dem kleinen Knopf zwei Zeilen,
     und mit der Zeilenhoehe des Fliesstextes (1.6) lief der Name darunter in
     die gelbe Marke — gemessen bei 84 px. */
  line-height: 1.2;
  letter-spacing: .06em; color: var(--gelb);
}
.heroknopf__titel {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  font-family: var(--display); font-weight: 700;
  /* Untergrenze 8 px: bei 9 px wurden drei Zeilen so hoch, dass sie auf dem
     kleinsten Knopf in die gelbe Marke liefen. */
  font-size: max(8px, calc(var(--kugel, 112px) * .078));
  line-height: 1.05; text-transform: uppercase; hyphens: auto;
}
/* Das Wort sitzt auf der Naht des weissen Feldes — auch ohne Feld an
   derselben Stelle, damit zwei Knoepfe nebeneinander gleich aussehen. */
.heroknopf__fuss { top: 55%; }
/* Mit Logo: das untere Drittel ist weiss und traegt die Werbung (Fassung P,
   Vorgabe des Vereins, 18.9.2026). Weiss, weil die Logodateien weissen Grund
   haben und Raiffeisen laut Markenregeln auf Weiss gehoert. Das Feld wird vom
   Kreis beschnitten (`overflow: hidden`), sonst stuende es als Rechteck ueber
   den Rand hinaus; unten ist der Kreis schmaler als in der Mitte, deshalb
   sind Logo (.12) und seitlicher Rand (14 %) knapp bemessen.
   **Ohne Logo bleibt der Knopf ganz dunkel** — ein weisses Feld ohne Inhalt
   waere schlimmer als keines. */
.heroknopf--logo { overflow: hidden; }
.heroknopf__feld {
  position: absolute; left: 0; right: 0; bottom: 0; height: 33%;
  background: #fff; display: grid; place-items: center;
  padding: calc(var(--kugel, 112px) * .02) 14% 0;
}
.heroknopf__feld img {
  width: auto; max-width: 100%;
  max-height: calc(var(--kugel, 112px) * .12);
}
/* Das Wort unten am Rand — dieselbe Marke, wie sie frueher quer ueber der
   Kugel lag. */
.heroknopf__fuss {
  position: absolute; left: 50%;
  transform: translateX(-50%) rotate(-8deg);
  padding: calc(var(--kugel, 112px) * .022) calc(var(--kugel, 112px) * .05);
  background: var(--gelb); color: var(--nacht);
  border-radius: 999px; box-shadow: 0 3px 10px rgba(0, 0, 0, .35);
  font-family: var(--display); font-weight: 700;
  font-size: max(8px, calc(var(--kugel, 112px) * .073));
  letter-spacing: .06em; text-transform: uppercase; line-height: 1; white-space: nowrap;
}

/* ------------------------------------------------ Anlässe im Hero */
/* Kacheln unter den Kurznachrichten, in derselben Spalte wie der Slogan.
   Auf dem dunklen Grund reicht eine aufgehellte Fläche — ein weisser Kasten
   würde neben der Anzeigetafel um Aufmerksamkeit streiten. */
.anlaesse-block {
  margin-top: 1.75rem; padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, .18);
}
.anlaesse {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.anlass {
  display: grid; gap: .1rem;
  padding: .9rem 1rem 1rem;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 4px;
  text-decoration: none; color: var(--weiss);
  transition: background .18s ease, border-color .18s ease;
}
.anlass:hover { background: rgba(255, 255, 255, .12); border-color: var(--gelb); }

/* Dieselben Kacheln weiter unten auf hellem Grund: dort traegt die Flaeche
   Weiss und die Schrift Tinte, sonst waeren sie unlesbar. */
.sektion .anlass {
  background: var(--weiss); border-color: var(--linie); color: var(--tinte);
}
.sektion--weiss .anlass { background: var(--papier); }
.sektion .anlass:hover { background: var(--weiss); border-color: var(--nacht); }
.sektion .anlass__tag { color: var(--blau-text); }
.sektion .anlass__monat { color: var(--nebel); }
.sektion .anlass__ort { color: var(--nebel); }
.anlass__tag {
  font-family: var(--display); font-weight: 700; font-size: 1.5rem;
  line-height: 1; color: var(--gelb);
}
.anlass__monat {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255, 255, 255, .55);
  margin-bottom: .35rem;
}
.anlass__titel {
  font-family: var(--display); font-weight: 600; font-size: 1rem;
  line-height: 1.15; text-transform: uppercase; letter-spacing: .01em;
}
.anlass__ort {
  font-family: var(--mono); font-size: .6875rem; line-height: 1.4;
  color: rgba(255, 255, 255, .6);
}

/* ------------------------------------------------ Kurznachrichten im Hero */
/* Drei Schlagzeilen unter den Foerderknoepfen. Nur Satz und Haarlinien —
   Bilder oder Kaesten wuerden hier mit der Anzeigetafel daneben streiten. */
.kurznews {
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, .18);
}
.kurznews__label {
  margin: 0 0 .9rem;
  font-family: var(--mono); font-size: .6875rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gelb);
}
.kurznews__liste { list-style: none; margin: 0; padding: 0; }
.kurznews__liste li + li { border-top: 1px solid rgba(255, 255, 255, .12); }
.kurznews__liste a {
  display: block; padding: .7rem 0;
  text-decoration: none; color: var(--weiss);
}
.kurznews__kicker {
  display: block; margin-bottom: .2rem;
  font-family: var(--mono); font-size: .625rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--blau-hell);
}
.kurznews__titel {
  display: block;
  font-family: var(--display); font-weight: 600;
  font-size: 1.0625rem; line-height: 1.15;
  text-transform: uppercase; letter-spacing: .01em;
}
.kurznews__liste a:hover .kurznews__titel { color: var(--gelb); }
.kurznews__fuss { margin: 1rem 0 0; }
.kurznews__fuss a {
  font-family: var(--mono); font-size: .6875rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--gelb); text-decoration: none;
  border-bottom: 1px solid rgba(255, 221, 0, .4);
  padding-bottom: .1rem;
}
.kurznews__fuss a:hover { border-bottom-color: var(--gelb); }

/* ---------------------------------------------------- Seitenkopf Unterseite */
/* Schmaler als das Hero der Startseite: Unterseiten brauchen keinen Auftritt,
   sondern eine klare Ansage, wo man ist. */
.seitenkopf {
  background: var(--nacht);
  color: var(--weiss);
  padding-block: clamp(2.5rem, 6vw, 4rem) clamp(2rem, 5vw, 3rem);
}
.seitenkopf__titel {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: .95; text-transform: uppercase;
  margin: 0 0 .75rem;
}
.seitenkopf__titel em { font-style: normal; color: var(--gelb); }
.seitenkopf__lead {
  margin: 0; font-size: 1.0625rem;
  color: rgba(255, 255, 255, .78); max-width: 46ch;
}
/* Rueckweg zur Mannschaftsuebersicht — die Seiten werden auch direkt
   verlinkt, dann fehlt sonst jeder Bezug zum Verein. */
.seitenkopf__zurueck { margin: 1.25rem 0 0; }
.seitenkopf__zurueck a {
  font-family: var(--mono); font-size: .75rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--gelb); text-decoration: none;
  border-bottom: 2px solid rgba(255, 221, 0, .35);
  padding-bottom: .15rem;
}
.seitenkopf__zurueck a::before { content: "\2190\00a0"; }
.seitenkopf__zurueck a:hover { border-bottom-color: var(--gelb); }

/* Platzhalter, solange der Abgleich mit dem Verbandssystem noch nicht
   gelaufen ist. Im Normalbetrieb ersetzt aktualisieren.php ihn. */
.leerhinweis {
  margin: 0; padding: 1.5rem 1.25rem;
  background: var(--weiss); border: 1px dashed var(--linie); border-radius: 4px;
  font-family: var(--mono); font-size: .8125rem; color: var(--nebel);
}
.sektion--weiss .leerhinweis { background: var(--papier); }
/* Mitlaufende Abschnittsleiste. Die Seite ist lang; die Leiste bleibt oben
   stehen und zeigt, in welchem Abschnitt man sich gerade befindet. */
.abschnittsnav {
  position: sticky; top: calc(var(--kopfhoehe, 72px) + var(--bandhoehe, 0px)); z-index: 50;
  background: var(--weiss);
  border-bottom: 1px solid var(--linie);
}
.abschnittsnav__inner {
  display: flex; gap: .25rem;
  overflow-x: auto; scrollbar-width: none;
}
.abschnittsnav__inner::-webkit-scrollbar { display: none; }
.abschnittsnav a {
  flex: 0 0 auto;
  padding: 1rem .9rem .85rem;
  font-family: var(--mono); font-size: .75rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--nebel); text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.abschnittsnav a:hover { color: var(--nacht); }

/* Die Leiste der Trainerseite steht **im** Abschnitt, nicht ueber der ganzen
   Seite (24.9.2026). Sie klebt deshalb unter der Kopfzeile und braucht
   etwas Luft nach unten; die Ueberschriften bekommen Abstand nach oben,
   sonst verschwindet die angesprungene Mannschaft unter der Leiste. */
.abschnittsnav--gruppen {
  position: static;              /* nicht klebend: umgebrochen ist sie 3 Zeilen
                                    hoch und naehme beim Scrollen ein Drittel
                                    des Handybildschirms weg */
  margin: 0 0 1.5rem;
  border-top: 1px solid var(--linie);
}
/* Auf dem Handy eine aufklappbare Liste, auf dem Schirm alle Mannschaften
   nebeneinander (24.9.2026). Die Wischleiste davor war unbrauchbar: neunzehn
   Namen bedeuteten mehrere Bildschirmbreiten seitwaerts. */
.gruppenwahl { margin: 0 0 1.5rem; border-top: 1px solid var(--linie); }
.gruppenwahl > summary {
  list-style: none; cursor: pointer;
  padding: .85rem 0; display: flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: .75rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--nacht);
}
.gruppenwahl > summary::-webkit-details-marker { display: none; }
.gruppenwahl > summary::after {
  content: ""; width: .5rem; height: .5rem; margin-left: auto;
  border-right: 2px solid var(--nebel); border-bottom: 2px solid var(--nebel);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s ease;
}
.gruppenwahl[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.abschnittsnav--gruppen a { padding: .6rem .7rem .5rem; }
/* Handy: untereinander, jede Mannschaft eine Zeile zum Antippen. */
@media (max-width: 899px) {
  .abschnittsnav--gruppen .abschnittsnav__inner { flex-direction: column; overflow-x: visible; }
  .abschnittsnav--gruppen a {
    padding: .7rem .2rem; border-bottom: 1px solid var(--linie);
    border-left: 3px solid transparent;
  }
}
@media (min-width: 900px) {
  .gruppenwahl > summary { display: none; }
  .abschnittsnav--gruppen .abschnittsnav__inner { flex-wrap: wrap; overflow-x: visible; }
}
/* Lange E-Mail-Adressen duerfen umbrechen (24.9.2026). Ohne das steht
   „goennervereinigung@fcdiepoldsau.ch" bei schmalen Geraeten und in
   nebeneinanderstehenden Kacheln ueber den Rand hinaus — gemessen 287 px
   in einer 335 px breiten Kachel, bei 320 px Geraeten zu viel. „anywhere"
   bricht **nur wenn noetig**; passt die Adresse, bleibt sie einzeilig. */
/* Adressen brechen **nur an erlaubten Stellen** (dem <wbr> nach dem @),
   nicht mitten im Wort. „anywhere" hatte „fcdiepolds / au.ch" erzeugt. */
a[href^="mailto"], .ansprechperson a, .karte__mail, [data-nutzer] {
  overflow-wrap: break-word;
}
/* In den Kacheln deutlich kleiner — zu zweit nebeneinander ist jede schmal,
   und die Adresse soll auf eine Zeile passen (Verein, 24.9.2026). Bei .8em
   braucht „goennervereinigung@fcdiepoldsau.ch" noch 229 statt 287 px. */
.ansprechperson a[href^="mailto"] { font-size: .8em; }
/* Eine Adresse wie „goennervereinigung@fcdiepoldsau.ch" braucht 287 px und
   hatte in der Kachel nur 291 — vier Pixel Luft, und auf einem etwas
   schmaleren Handy brach sie um (gemeldet 24.9.2026). Eine Spur kleiner
   gesetzt sind es 258 px; damit bleibt sie bis hinunter zu rund 340 px
   Geraetebreite einzeilig. Kontaktangaben duerfen kleiner stehen als der
   Fliesstext — nur nicht so klein, dass man sie nicht mehr liest. */
@media (max-width: 700px) {
  .ansprechperson { padding: 1rem; }
}

.gremium__gruppe { scroll-margin-top: calc(var(--kopfhoehe, 72px) + var(--bandhoehe, 0px) + 2.5rem); }
/* Wo bin ich gelandet? Die angesprungene Mannschaft bekommt den gelben
   Strich — sonst sieht man nach dem Sprung nur noch Namen (Verein, 24.9.2026). */
.gremium__gruppe:target {
  border-left: 4px solid var(--gelb); padding-left: .75rem; margin-left: -.75rem;
}
.abschnittsnav a[aria-current="true"] {
  color: var(--nacht);
  border-bottom-color: var(--gelb);
}

@media (max-width: 640px) {
  .abschnittsnav__inner { padding-inline: var(--bund); }
  .abschnittsnav a { padding: .85rem .7rem .7rem; font-size: .6875rem; }
}

/* --------------------------------------------------------- Mannschaftsfoto */
/* Sitzt direkt unter dem dunklen Seitenkopf und laeuft optisch aus ihm
   heraus — deshalb der negative Versatz nach oben. */
.teamfoto { background: var(--papier); padding-bottom: clamp(2rem, 5vw, 3rem); }
.teamfoto__rahmen {
  margin: 0; position: relative;
  margin-top: clamp(-3rem, -5vw, -2rem);
  border-radius: 4px; overflow: hidden;
  box-shadow: 0 24px 48px rgba(1, 82, 125, .22);
  background: var(--nacht);
}
/* Ganzes Bild zeigen, nicht auf ein festes Format zuschneiden — die
   Mannschaftsfotos kommen in unterschiedlichen Seitenverhaeltnissen, und
   beim Zuschneiden fehlten Koepfe in der hinteren Reihe. */
.teamfoto__rahmen img {
  display: block; width: 100%; height: auto;
}
.teamfoto__rahmen figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.5rem 1.25rem .9rem;
  font-family: var(--mono); font-size: .75rem;
  letter-spacing: .06em; color: var(--weiss);
  background: linear-gradient(to top, rgba(1, 82, 125, .85), transparent);
}

/* ------------------------------------------------------------ Aufstellung */
/* Der Kader der 1. Mannschaft steht nicht als Liste, sondern als Aufstellung:
   je Linie ein Band, die Rueckennummer als Marke am Bild. Ohne eigenen
   Hintergrund — der Abschnitt traegt ihn, wie ueberall sonst auf der Seite. */
.aufstellung { margin-top: -.4rem; }

.linie {
  display: grid; grid-template-columns: 8rem minmax(0, 1fr);
  gap: 1.25rem; align-items: start;
  padding: 1.35rem 0;
  border-top: 1px solid var(--linie);
}
.linie:first-of-type { border-top: 0; }
.linie__name {
  margin: .4rem 0 0;
  font-family: var(--mono); font-size: .75rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--nebel);
}
.linie__leute {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 1.4rem 1.1rem;
}

.spieler { width: 96px; text-align: center; }
.spieler__rahmen { position: relative; display: block; }
.spieler__bild {
  display: block; width: 96px; height: 120px;
  object-fit: cover; object-position: top center;
  border-radius: 4px; background: var(--papier);
}
/* Ohne Portrait die Initialen — dieselben, die sonst als Marke stehen. */
.spieler__bild--leer {
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 1.5rem;
  color: var(--nebel);
  box-shadow: inset 0 0 0 1px var(--linie);
}
.spieler__marke {
  position: absolute; left: -7px; bottom: -9px;
  min-width: 27px; height: 27px; padding: 0 .35rem;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--gelb); color: var(--nacht);
  font-family: var(--mono); font-size: .8125rem; font-weight: 600;
  box-shadow: 0 2px 6px rgba(1, 82, 125, .25);
}
.spieler__name {
  display: block; margin-top: .7rem;
  font-size: .8125rem; line-height: 1.25;
  color: var(--tinte);
}

/* Trainer und Betreuer: kleiner, blaue Marke statt der gelben Nummer. */
/* Gleich gross wie die Spieler — unterschieden wird über die Farbe der Marke,
   nicht über die Grösse. */
.linie--stab .spieler__marke { background: var(--nacht); color: var(--weiss); }

@media (max-width: 720px) {
  .aufstellung { margin-top: 0; }
  .linie { grid-template-columns: 1fr; gap: .5rem; padding: 1.1rem 0; }
  .linie__leute { gap: 1.1rem .8rem; }
  .spieler, .spieler__bild { width: 78px; }
  .spieler__bild { height: 98px; }
}

/* ------------------------------------------------------- Spieltelegramm */
/* Die Detailseite eines Spiels. Dunkle Tafel wie im Matchplan — es ist
   dieselbe Sache, nur gross: zwei Mannschaften, dazwischen der Stand. */
.telegramm {
  display: grid; justify-items: center; gap: 1rem;
  padding: 2rem 1.25rem;
  background: var(--nacht); border-radius: 6px;
  text-align: center;
}
.telegramm__paarung {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: clamp(.75rem, 3vw, 2rem);
  width: 100%; max-width: 720px;
}
.telegramm__team {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1rem, 2.6vw, 1.5rem); line-height: 1.2;
  color: var(--weiss);
}
.telegramm__stand {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.75rem, 5vw, 2.75rem); line-height: 1;
  padding: .25rem .8rem; border-radius: 4px;
  background: var(--gelb); color: var(--nacht);
  white-space: nowrap;
}
/* Noch nicht gespielt: dort steht die Anspielzeit, und sie soll nicht wie
   ein Resultat aussehen. */
.telegramm--offen .telegramm__stand {
  background: transparent; color: var(--gelb);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25);
  font-size: clamp(1.25rem, 3.2vw, 1.75rem);
}
.telegramm__wann {
  margin: 0;
  font-family: var(--mono); font-size: .75rem; letter-spacing: .06em;
  color: rgba(255, 255, 255, .72);
}
.telegramm__hinweis { margin: 0; font-size: .875rem; color: var(--gelb); }
/* Der Weg zum vollen Telegramm des Verbandes — direkt unter den Toren, wo
   die Frage aufkommt, wer sonst noch gespielt hat. */
.telegramm__verband { margin: .25rem 0 0; }
.telegramm__verband a {
  font-family: var(--mono); font-size: .75rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--gelb); text-decoration: none;
  border-bottom: 1px solid rgba(255, 221, 0, .5);
}
.telegramm__verband a:hover { border-bottom-color: var(--gelb); }
.telegramm__verband a::after { content: " ↗"; }

/* Die Torschuetzen: je Mannschaft eine Spalte, in derselben Aufteilung wie
   die Paarung darueber — links die Heim-, rechts die Gasttore. */
.telegramm__tore {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: start; gap: clamp(.75rem, 3vw, 2rem);
  width: 100%; max-width: 720px;
  padding-top: .25rem;
}
.telegramm__torlabel {
  margin: 0;
  font-family: var(--mono); font-size: .625rem; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255, 255, 255, .45);
}
.tore { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.tore--heim { justify-items: end; }
.tore--gast { justify-items: start; }
.tore li { display: flex; align-items: baseline; gap: .55rem; }
.tore__minute {
  font-family: var(--mono); font-size: .75rem; font-weight: 600;
  color: var(--gelb);
}
.tore__name { font-size: .9375rem; color: rgba(255, 255, 255, .9); }

@media (max-width: 560px) {
  .telegramm__tore { grid-template-columns: 1fr 1fr; }
  .telegramm__torlabel { display: none; }
  .tore--heim, .tore--gast { justify-items: start; }
}

/* ------------------------------------------------------- Anmeldeformular */
/* Zwei Spalten auf breiten Fenstern, eine auf schmalen. Die Beschriftung
   steht ueber dem Feld, nicht daneben: so bleibt sie auch auf dem Handy
   lesbar, und die Zeilen fluchten. */
.formular { display: grid; gap: 1.75rem; }
.feldgruppe {
  border: 1px solid var(--linie); border-radius: 4px;
  border-top: 3px solid var(--gelb);
  margin: 0; padding: 1.25rem 1.4rem 1.5rem;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.5rem;
}
.feldgruppe legend {
  padding: 0 .5rem;
  font-family: var(--mono); font-size: .6875rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--nebel);
}
.feldgruppe__text { grid-column: 1 / -1; margin: 0; font-size: .9375rem; color: var(--nebel); }
.feld { margin: 0; display: grid; gap: .35rem; }
.feld--breit { grid-column: 1 / -1; }
.feld label, .feld__frage {
  font-size: .8125rem; font-weight: 600; color: var(--nacht);
}
.feld abbr { color: var(--blau-text); text-decoration: none; margin-left: .15rem; }
.feld input, .feld textarea {
  font: inherit; font-size: .9375rem;
  padding: .55rem .7rem;
  border: 1px solid var(--linie); border-radius: 3px;
  background: var(--weiss); color: var(--tinte);
  width: 100%;
}
.feld input:focus, .feld textarea:focus {
  outline: 2px solid var(--blau); outline-offset: 1px; border-color: var(--blau);
}
.feld small { font-size: .75rem; color: var(--nebel); }
/* Dateifelder: der Knopf des Browsers bleibt, aber der Rahmen gehoert zur
   Seite. Volle Breite, damit lange Dateinamen nicht aus der Spalte laufen. */
.feld--bild input[type="file"] {
  padding: .45rem .5rem;
  font-size: .8125rem;
  background: var(--papier);
}
.feld--bild input[type="file"]::file-selector-button {
  font: inherit; font-weight: 600;
  margin-right: .7rem; padding: .35rem .7rem;
  border: 0; border-radius: 3px;
  background: var(--nacht); color: var(--weiss);
  cursor: pointer;
}
.wahl { display: grid; gap: .4rem; }
.wahl label, .bestaetigung {
  display: flex; align-items: flex-start; gap: .5rem;
  font-size: .9375rem; font-weight: 400; color: var(--tinte);
}
.wahl input, .bestaetigung input { margin-top: .2rem; width: auto; }
.formular__fuss {
  margin: 0; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.formular__fuss small { color: var(--nebel); font-size: .8125rem; }
/* Das Feld sieht niemand — es faengt selbsttaetige Einsendungen ab. */
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

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

/* ---------------------------------------------------- Wochenendvorschau */
/* Die Zeichenflaeche zeigt das Bild in voller Aufloesung; angezeigt wird sie
   auf Seitenbreite. Der dunkle Grund darunter verhindert ein Aufblitzen,
   solange noch nichts gezeichnet ist. */
.bildwerk { display: grid; gap: 1.25rem; justify-items: start; }
.bildwerk__auswahl { max-width: 26rem; }
.bildwerk__auswahl select {
  font: inherit; font-size: .9375rem;
  padding: .55rem .7rem;
  border: 1px solid var(--linie); border-radius: 3px;
  background: var(--weiss); color: var(--tinte); width: 100%;
}
.bildwerk__wahl, .bildwerk__fuss {
  margin: 0; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
}
.bildwerk__fuss small { color: var(--nebel); font-size: .8125rem; }

/* Die Fassungen stehen nebeneinander: nebeneinander sieht man, welche taugt.
   Auf schmalen Fenstern untereinander — drei Plakate nebeneinander waeren
   dort briefmarkengross. */
.bildwerk__reihe {
  display: grid; gap: 1.25rem; width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.bildwerk__tafel { margin: 0; display: grid; gap: .6rem; justify-items: center; }
.bildwerk__tafel canvas {
  width: 100%; height: auto; display: block;
  border-radius: 4px; box-shadow: 0 6px 20px rgba(1, 82, 125, .18);
}
.bildwerk__tafel figcaption { display: flex; justify-content: center; }
#vorschaubild {
  width: 100%; max-width: 420px; height: auto;
  background: var(--nacht);
  border-radius: 4px;
  box-shadow: 0 18px 40px rgba(6, 43, 63, .25);
}

/* --------------------------------------------------------------- Vorstand */
/* Kontakte als Kolonne, nicht als Kacheln: sie werden ueberflogen, nicht
   einzeln betrachtet. Vier feste Spalten — Rolle, Name, Nummer, Adresse —
   damit alles ueber die ganze Liste hinweg untereinander fluchtet.
   Rechtsbuendige Angaben ergaben eine ausgefranste linke Kante. */
.gremium { display: block; border-top: 1px solid var(--linie); }
.gremium__zeile {
  display: grid;
  /* Feste Spaltenbreiten. Jede Zeile ist ein eigenes Raster — mit
     max-content bemaesse jede sich selbst und die Spalten wuerden nicht
     mehr fluchten. 18rem tragen die laengste Adresse des Vereins
     (34 Zeichen) einzeilig. */
  grid-template-columns: 14rem minmax(0, 1fr) 9.5rem 18rem;
  align-items: baseline;
  gap: .25rem 1.5rem;
  padding: .75rem .25rem;
  border-bottom: 1px solid var(--linie);
}
.gremium__rolle {
  margin: 0;
  font-family: var(--mono); font-size: .6875rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--blau-text);
}
.gremium__name {
  margin: 0;
  font-family: var(--display); font-weight: 500;
  font-size: 1.125rem; line-height: 1.2;
  text-transform: uppercase; letter-spacing: .01em;
  color: var(--tinte);
}
.gremium__tel, .gremium__adresse {
  margin: 0;
  font-family: var(--mono); font-size: .8125rem; line-height: 1.5;
  /* Browser brechen nach einem Bindestrich um — aus
     "sport-verein-t@fcdiepoldsau.ch" wurden dadurch drei Zeilen. Adressen
     und Nummern bleiben deshalb zusammen. */
  white-space: nowrap;
}
/* Wer keine Nummer hinterlegt hat, bekommt eine leere Zelle — sie muss
   bleiben, sonst ruecken die Spalten nach; sie darf nur keine Zeilenhoehe
   beanspruchen, wenn untereinander gesetzt wird. */
.gremium__tel:empty, .gremium__adresse:empty { line-height: 0; }
.gremium__tel a, .gremium__adresse a { color: var(--blau-text); text-decoration: none; }
.gremium__tel a:hover, .gremium__adresse a:hover { text-decoration: underline; }
/* Ohne Skript bleibt nur der Hinweis stehen — die Adresse steht bewusst
   nicht im Quelltext, genau wie im CMS. main.js setzt sie ein. */
.gremium__mail:not([href]) { color: var(--nebel); }

/* Unter 860 px reichen vier Spalten nicht mehr: Rolle und Name nebeneinander,
   Nummer und Adresse darunter. */
@media (max-width: 860px) {
  .gremium__zeile { grid-template-columns: 12rem minmax(0, 1fr); }
  /* Reicht der Platz nicht, darf die Adresse doch umbrechen — lieber
     zweizeilig als aus der Seite hinaus. */
  .gremium__tel, .gremium__adresse { white-space: normal; overflow-wrap: anywhere; }
  .gremium__tel, .gremium__adresse { grid-column: 2; }
}
@media (max-width: 560px) {
  .gremium__zeile { grid-template-columns: 1fr; gap: .15rem; padding: .9rem .25rem; }
  .gremium__tel, .gremium__adresse { grid-column: 1; }
}

/* Blocktitel: Mannschaft auf der Trainerseite, Gruppe im Kalender,
   Wettbewerb bei Resultate und Ranglisten — dieselbe Form. */
.gremium__gruppe, .wettbewerb__titel {
  font-family: var(--display); font-weight: 500;
  font-size: 1.5rem; text-transform: uppercase; letter-spacing: .01em;
  color: var(--nacht);
  margin: 2.75rem 0 .9rem;
  padding-bottom: .5rem;
  border-bottom: 3px solid var(--gelb);
}
.gremium__gruppe:first-child,
.wettbewerb__titel:first-child { margin-top: 0; }
/* Zwischen zwei Wettbewerben mehr Luft als zwischen Tabelle und Spielen */
.wettbewerb__titel { margin-top: 3.5rem; }
.rangliste + .tafel { margin-top: 1.25rem; }

/* ------------------------------------------------------- Namenslisten */
.namenslisten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem 2.5rem;
}
.namensliste__titel {
  margin: 0 0 .9rem; padding-bottom: .6rem;
  border-bottom: 1px solid var(--linie);
  font-family: var(--mono); font-size: .75rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--blau-text);
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
}
.namensliste__titel span { color: var(--nebel); }
.namensliste ul { list-style: none; margin: 0; padding: 0; }
.namensliste li {
  padding: .45rem 0; font-size: .9375rem; font-weight: 500;
  border-bottom: 1px solid var(--linie);
}
.namensliste li:last-child { border-bottom: 0; }


/* ------------------------------------------------------------ Fliesstext */
.fliesstext {
  margin: 0; max-width: 62ch;
  font-size: 1.0625rem; line-height: 1.65; color: var(--tinte);
}
.sektion--nacht .fliesstext { color: rgba(255, 255, 255, .82); }
/* Uebernommener Fliesstext aus dem CMS: mehrere Absaetze, Zwischentitel
   und Aufzaehlungen brauchen eigene Abstaende. */
.fliesstext--reich > p { margin: 0 0 1rem; }
.fliesstext--reich > p:last-child { margin-bottom: 0; }
.fliesstext--reich ul, .fliesstext--reich ol { margin: 0 0 1.25rem; padding-left: 1.3rem; }
.fliesstext--reich li { margin-bottom: .3rem; }
/* Liste mit Zeichen am Anfang (18.9.2026): jeder Punkt wird eine Kachel,
   das Zeichen steht gross davor. Gebaut fuer „Wir suchen dich" — zehn
   Aufgaben untereinander waren eine Wand. Ab drei Punkten, und nur wenn
   jeder eines hat; sonst bleibt es eine gewoehnliche Liste. */
.fliesstext--reich ul.zeichenraster, ul.zeichenraster {
  list-style: none; margin: 0 0 1.25rem; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: .75rem;
}
.zeichenraster li {
  display: flex; align-items: center; gap: .75rem;
  margin: 0; padding: .85rem 1rem;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--gelb);
  border-radius: 3px;
  line-height: 1.35;
}
.zeichenraster__zeichen { font-size: 1.5rem; line-height: 1; flex: 0 0 auto; }

/* Zwischentitel in einem Feldrahmen der Maske — trennt die Ansprechpersonen
   aus dem Verein von den von Hand getippten (18.9.2026). */
.maske__untertitel {
  display: block; margin: .4rem 0 .2rem;
  font-family: var(--mono); font-size: .6875rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--nebel);
}

/* Tabelle im Bericht (18.9.2026) — Zeilen mit senkrechtem Strich. Der
   Rahmen scrollt seitwaerts, damit eine breite Tabelle auf dem Handy nicht
   die ganze Seite verschiebt (dieselbe Regel wie bei der Rangliste). */
.tabellerahmen { overflow-x: auto; margin: 0 0 1.25rem; }
.berichtstabelle {
  width: 100%; border-collapse: collapse;
  font-size: .9375rem; line-height: 1.35;
}
.berichtstabelle th {
  text-align: left; font-weight: 600; font-size: .6875rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--nebel);
  padding: .5rem .75rem .5rem 0; border-bottom: 2px solid var(--tinte);
  white-space: nowrap;
}
.berichtstabelle td {
  padding: .6rem .75rem .6rem 0; vertical-align: top;
  border-bottom: 1px solid var(--linie);
}
.berichtstabelle tr:last-child td { border-bottom: 0; }
/* Die erste Spalte darf umbrechen — „Trainingsgemeinschaft Senioren" waere
   sonst so breit, dass auf dem Handy nichts anderes mehr Platz haette. */
.berichtstabelle td:first-child { font-weight: 600; }
/* Betraege linksbuendig wie ihre Kopfzeile (Vorgabe des Vereins, 18.9.2026):
   rechtsbuendig standen die Zahlen unter einem linksbuendigen „Betrag" und
   wirkten verschoben. In der Zahlenschrift mit gleichen Ziffernbreiten
   stehen sie auch so untereinander — alle Betraege sind gleich lang. */
.berichtstabelle .zahl {
  text-align: left; white-space: nowrap;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
/* Zwischenzeile in der Tabelle — eine Zeile mit nur einer Zelle. */
.berichtstabelle .gruppe td {
  padding-top: 1.2rem; font-weight: 700;
  font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--nebel);
}
.berichtstabelle tbody tr:first-child.gruppe td { padding-top: .6rem; }
/* Auf dem Handy enger und kleiner, damit drei Spalten ohne seitliches
   Schieben hineingehen — gemessen bei 375 px. */
@media (max-width: 560px) {
  .berichtstabelle { font-size: .8125rem; }
  .berichtstabelle th, .berichtstabelle td { padding-right: .5rem; }
}
.fliesstext--reich h4 {
  margin: 1.75rem 0 .6rem;
  font-family: var(--display); font-weight: 600; font-size: 1.125rem;
  text-transform: uppercase; letter-spacing: .01em;
}
.fliesstext--reich a { color: var(--blau-text); }
/* Bilder aus dem CMS kommen ohne Masse — hier bekommen sie welche. */
.fliesstext--reich img {
  display: block; max-width: 100%; height: auto;
  margin: 1.25rem 0; border-radius: 3px;
}

/* ------------------------------------------------------------------- Info */
.infoliste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem 2.5rem;
}
.infoblock__titel {
  font-family: var(--mono); font-size: .75rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--blau-text);
  margin: 0 0 .8rem; padding-bottom: .6rem;
  border-bottom: 1px solid var(--linie);
}
.infoblock dl {
  display: grid; grid-template-columns: auto 1fr;
  gap: .35rem .9rem; margin: 0; font-size: .9375rem;
}
.infoblock dt { color: var(--nebel); }
.infoblock dd { margin: 0; font-weight: 500; }
/* Logos der Tenuesponsoren, klein neben dem Namen */
.tenuelogos { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: .45rem; }
.tenuelogos img { height: 26px; width: auto; object-fit: contain; }

/* Lange Listen einklappen, damit die Seite bedienbar bleibt */
.langeliste > summary {
  cursor: pointer; list-style: none;
  display: inline-block; padding: .8rem 1.4rem;
  font-family: var(--mono); font-size: .75rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--blau-text);
  border: 1px solid var(--linie); border-radius: 3px;
  background: var(--weiss);
}
.langeliste > summary::-webkit-details-marker { display: none; }
.langeliste > summary:hover { border-color: var(--nacht); color: var(--nacht); }
.langeliste[open] > summary { margin-bottom: 1.25rem; }
.langeliste[open] > summary::after { content: " schliessen"; }

/* --------------------------------------------------------------- Rangliste */
.rangliste {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: 4px;
  overflow-x: auto;
}
.rangliste table {
  width: 100%; border-collapse: collapse;
  font-family: var(--mono); font-size: .8125rem;
}
.rangliste th {
  font-weight: 600; font-size: .625rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--nebel); text-align: right;
  padding: .9rem .5rem; border-bottom: 2px solid var(--tinte);
  white-space: nowrap;
}
.rangliste td {
  padding: .7rem .5rem; text-align: right;
  border-bottom: 1px solid var(--linie);
  white-space: nowrap;
}
.rangliste tr:last-child td { border-bottom: 0; }
.rangliste .rang__pos { width: 2.5rem; text-align: right; color: var(--nebel); }
.rangliste .rang__team {
  text-align: left; width: 40%;
  font-family: var(--body); font-size: .9375rem;
  padding-left: .75rem;
}
.rangliste .rang__pkt { font-weight: 600; color: var(--nacht); padding-right: 1rem; }
.rangliste .rang__strf, .rangliste .rang__diff { color: var(--nebel); }

/* Die eigene Mannschaft hervorheben — dieselbe Logik wie im Matchplan */
.rangliste .rang--wir td {
  background: rgba(255, 221, 0, .2);
  font-weight: 600;
}
.rangliste .rang--wir .rang__pos { box-shadow: inset 3px 0 0 var(--gelb); color: var(--nacht); }

@media (max-width: 640px) {
  .rangliste .rang__team { font-size: .8125rem; width: auto; }
  .rangliste th, .rangliste td { padding: .6rem .35rem; }
  .rangliste .rang__strf { display: none; }
  .rangliste thead .rang__strf { display: none; }
}

/* -------------------------------------------------------------------- News */
/* Drei gleich grosse Kacheln nebeneinander. grid-auto-rows: 1fr macht auch
   die Reihen gleich hoch — sonst richtet sich jede Reihe nach ihrem
   laengsten Text und die Kacheln waeren unterschiedlich gross. */
.news {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 1.5rem;
}
.meldung {
  display: flex; flex-direction: column;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: 4px;
  overflow: hidden;
  color: inherit; text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.meldung:hover { border-color: var(--nacht); box-shadow: 0 6px 18px rgba(1, 82, 125, .10); }
.meldung .meldung__text { flex: 1 1 auto; display: flex; flex-direction: column; }
.meldung .meldung__mehr { margin-top: auto; align-self: flex-start; }
.meldung__bild { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--papier); }
.meldung__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.meldung:hover .meldung__bild img { transform: scale(1.03); }
.meldung__text { display: block; padding: 1.25rem 1.4rem 1.4rem; }
.meldung__kicker {
  font-family: var(--mono); font-size: .6875rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--blau-text);
  display: block; margin: 0 0 .5rem;
}
.meldung__titel {
  font-family: var(--display); font-weight: 700;
  font-size: 1.5rem; line-height: 1.02; text-transform: uppercase;
  margin: 0 0 .6rem;
}
.meldung__teaser {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden;
  color: var(--nebel); font-size: .9375rem;
}
.meldung__mehr {
  display: inline-block; margin-top: .9rem;
  font-family: var(--mono); font-size: .75rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--blau-text);
  border-bottom: 1px solid currentColor;
}
.meldung__mehr::after { content: "Weiterlesen"; }
.meldung__voll { padding: 0 1.4rem 1.6rem; }
.meldung__voll p { margin: 0 0 1rem; font-size: .9375rem; }
.meldung__voll p:last-child { margin-bottom: 0; }
.meldung__voll ul { margin: 0 0 1rem; padding-left: 1.2rem; font-size: .9375rem; }
.meldung__voll a { color: var(--blau-text); }

/* Die eigene Berichtsseite: Fliesstext in Lesebreite, das Bild darueber
   ueber die volle Breite. Das Bild bringt der Bericht selbst mit. */
.bericht { max-width: 46rem; }
.bericht img {
  width: 100%; height: auto; display: block;
  border-radius: 4px; margin: 0 0 1.5rem;
}
.bericht p { margin: 0 0 1rem; }
.bericht p:last-child { margin-bottom: 0; }
.bericht ul, .bericht ol { margin: 0 0 1rem; padding-left: 1.2rem; }
.bericht a { color: var(--blau-text); }
.bericht a[data-typ], .fliesstext--reich a[data-typ] {
  display: inline-flex; align-items: center; gap: .5rem;
  margin: .25rem 0 1rem;
  padding: .55rem .9rem;
  border: 1px solid var(--linie); border-radius: 4px;
  font-family: Oswald, sans-serif; font-weight: 600;
  text-decoration: none; color: var(--nacht);
}
.bericht a[data-typ], .fliesstext--reich a[data-typ]::before {
  content: attr(data-typ);
  font-size: .625rem; letter-spacing: .08em; text-transform: uppercase;
  background: var(--gelb); color: var(--nacht);
  padding: .15rem .35rem; border-radius: 2px;
}
.bericht a[data-typ], .fliesstext--reich a[data-typ]:hover { border-color: var(--nacht); }

/* ------------------------------------------------------------------- Teams */
.teamgruppe { margin-bottom: 2rem; }
.teamgruppe:last-child { margin-bottom: 0; }
.teamgruppe__titel {
  font-family: var(--mono); font-size: .75rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gelb);
  margin: 0 0 .9rem;
}
.teamliste {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: .5rem;
}
.teamliste a {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .8rem 1rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 3px;
  text-decoration: none; color: var(--weiss);
  font-size: .9375rem; font-weight: 500;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.teamliste a:hover {
  background: var(--gelb); border-color: var(--gelb); color: var(--nacht);
  transform: translateY(-2px);
}
.teamliste a::after {
  content: "→"; font-family: var(--mono); opacity: .4; flex: 0 0 auto;
}
.teamliste a:hover::after { opacity: 1; }

/* -------------------------------------------------------------- Mitmachen */
.karten {
  display: grid;
  /* auto-fit legt leere Spalten zusammen: bleibt eine einzige Karte uebrig,
     zoege sie sich sonst ueber die ganze Breite. Die Obergrenze haelt sie
     in lesbarer Form, ohne mehreren Karten im Weg zu stehen. */
  /* 11.9.2026: Kind anmelden plus bis zu drei Berichte sollen in einer Reihe
     stehen — deshalb 1fr statt der 420px-Obergrenze; eine einzelne Karte
     haelt .karte { max-width } in Form. */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}
.karte { max-width: 520px; }
.sektion__link { text-decoration: none; }
.sektion__link:hover { color: var(--blau-text); }
.karte {
  display: flex; flex-direction: column; gap: .6rem;
  padding: 1.5rem;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-left: 4px solid var(--blau);
  border-radius: 3px;
  text-decoration: none; color: inherit;
  transition: transform .15s ease, box-shadow .15s ease, border-left-color .15s ease;
}
.karte:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(6, 43, 63,.10);
  border-left-color: var(--gelb);
}
.karte__titel {
  font-family: var(--display); font-weight: 700;
  font-size: 1.375rem; line-height: 1.02; text-transform: uppercase;
  margin: 0;
}
.karte p { margin: 0; font-size: .9375rem; color: var(--nebel); }
.karte__link {
  margin-top: auto; padding-top: .6rem;
  font-family: var(--mono); font-size: .75rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--blau-text);
}


/* ------------------------------------------------------- Termine / Listen */
.spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
}
.block__titel {
  font-family: var(--mono); font-size: .75rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--nebel);
  margin: 0 0 1rem; padding-bottom: .6rem;
  border-bottom: 1px solid var(--linie);
}
.termin {
  display: block; padding: 1rem 0;
  border-bottom: 1px solid var(--linie);
  text-decoration: none; color: inherit;
}
.termin:hover .termin__titel { color: var(--blau-text); }
.termin__datum {
  font-family: var(--mono); font-size: .75rem; font-weight: 600;
  color: var(--blau-text); display: block; margin-bottom: .25rem;
}
.termin__titel {
  font-family: var(--display); font-weight: 700; font-size: 1.25rem;
  line-height: 1.05; text-transform: uppercase; display: block;
}
.termin__ort { font-size: .8125rem; color: var(--nebel); }

.liste { list-style: none; margin: 0; padding: 0; }
.liste a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--linie);
  text-decoration: none; font-size: .9375rem;
}
.liste a:hover { color: var(--blau-text); }
.liste a::after {
  content: "↗"; font-family: var(--mono); font-size: .8125rem; color: var(--nebel);
}
.liste a[data-typ="pdf"]::after { content: "PDF"; font-size: .6875rem; letter-spacing: .08em; }

/* --------------------------------------------------------------- Sponsoren */
.haupt {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem; margin-bottom: 2.5rem;
}
.haupt > a, .haupt > span {
  display: grid; place-items: center;
  text-decoration: none; color: inherit;
  min-height: 150px; padding: 1.75rem;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: 3px;
  transition: box-shadow .15s ease, transform .15s ease;
}
.haupt > a:hover { box-shadow: 0 14px 30px rgba(6, 43, 63,.10); transform: translateY(-2px); }
.haupt img { width: 100%; height: 88px; object-fit: contain; }

.stufe {
  font-family: var(--mono); font-size: .6875rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--nebel);
  margin: 0 0 1rem; display: flex; align-items: center; gap: .75rem;
}
.stufe::after { content: ""; flex: 1; height: 1px; background: var(--linie); }

.wand {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: .5rem;
  margin-bottom: 2rem;
}
.wand:last-child { margin-bottom: 0; }
.wand > a, .wand > span {
  display: grid; place-items: center;
  text-decoration: none; color: inherit;
  min-height: 84px; padding: .75rem;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: 3px;
  /* 11.9.2026: in Farbe, nicht mehr grau — der Verein will die Logos so, wie
     die Sponsoren sie kennen. */
  transition: transform .2s ease, box-shadow .2s ease;
}
.wand > a:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(6, 43, 63, .08); }
/* Jedes Logo bekommt dieselbe Flaeche und wird darin eingepasst — sonst
   wirkt die Wand bei den sehr verschiedenen Logoformaten ausgefranst. */
.wand img { width: 100%; height: 52px; object-fit: contain; }

/* ------------------------------------------------------------------ Footer */
.fuss { background: var(--nacht); color: rgba(255,255,255,.72); }
.fuss__inner {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2.5rem;
  padding-block: clamp(3rem, 6vw, 4rem) 2rem;
}
.fuss__titel {
  font-family: var(--mono); font-size: .6875rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gelb);
  margin: 0 0 1rem;
}
.fuss a { color: rgba(255,255,255,.8); text-decoration: none; }
.fuss a:hover { color: var(--gelb); }
/* Das eigene Wappen statt der Verbandsgrafik — quadratisch, deshalb
   Hoehe und Breite gleich. */
.fuss__logo { display: block; width: 56px; height: 56px; flex: 0 0 auto; }
.fuss__marke { display: flex; gap: 1rem; align-items: flex-start; }
.fuss__marke img { width: 56px; height: 56px; object-fit: contain; }
.fuss__name {
  font-family: var(--display); font-weight: 700; font-size: 1.5rem;
  line-height: .95; text-transform: uppercase; color: var(--weiss); margin: 0 0 .4rem;
}
.fuss p { margin: 0 0 .5rem; font-size: .9375rem; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: .5rem; font-size: .9375rem; }
.sozial { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .25rem; }
.sozial a {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(255,255,255,.2); border-radius: 3px;
}
.sozial a:hover { background: var(--gelb); border-color: var(--gelb); color: var(--nacht); }
.sozial svg { width: 18px; height: 18px; fill: currentColor; }

.fuss__leiste {
  border-top: 1px solid rgba(255,255,255,.12);
  padding-block: 1.25rem 2rem;
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  font-family: var(--mono); font-size: .75rem; color: rgba(255,255,255,.45);
}

/* --------------------------------------------------------------- Responsiv */
@media (max-width: 1080px) {
  /* minmax(0, 1fr) statt 1fr: sonst waechst die Spalte auf die
     Mindestbreite der Anzeigetafel (370 px) und der Hero laeuft auf dem
     Handy ueber den Rand — verborgen nur durch overflow:hidden. Aufgefallen
     am 17.9.2026, als die Knopfreihe bis an die Kante reichte. */
  .hero__inner { grid-template-columns: minmax(0, 1fr); }
  .news { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .news { grid-template-columns: 1fr; grid-auto-rows: auto; }
}

@media (max-width: 1100px) {
  .burger { display: block; order: 3; }
  /* Auf schmalen Fenstern liegt das Menue in einem Schubfach — die Sonne
     bleibt daneben sichtbar, links vom Burger. Wortmarke, Sonne und Burger
     zusammen sind breiter als 375 px; deshalb enger und die Wortmarke darf
     schrumpfen, statt die Zeile über den Rand zu schieben. */
  .kopf__inner { gap: .75rem; }
  /* Beide hätten sonst margin-left:auto und teilten sich den freien Platz —
     die Sonne bliebe in der Mitte hängen. Nur die Sonne schiebt, der Burger
     folgt ihr. */
  .wagen { order: 2; margin-left: auto; }
  .burger { margin-left: 0; }
  .marke { min-width: 0; }
  .marke__name { font-size: clamp(1rem, 4.6vw, 1.375rem); }
  .nav {
    position: fixed; inset: 73px 0 0 auto;
    width: min(360px, 88vw);
    background: var(--weiss);
    border-left: 1px solid var(--linie);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .25s ease;
    padding: 1rem;
  }
  .nav[data-offen="true"] { transform: none; }
  .nav__liste { flex-direction: column; gap: 0; }
  /* Die Schrift muss hier mitwechseln: in der Kopfzeile steht sie weiss auf
     Blau, das ausgeklappte Menue ist aber eine helle Flaeche — sonst weiss
     auf weiss. Dasselbe gilt fuer die beiden Hinterlegungen, die als heller
     Schleier ueber dem Blau gedacht waren. */
  .nav__link { width: 100%; padding: .9rem .5rem; font-size: 1rem; color: var(--nacht); }
  .nav__link:hover { background: var(--papier); }
  .nav__punkt--aktiv > .nav__link { background: var(--papier); color: var(--blau-text); }
  .nav__link[aria-haspopup]::after { margin-left: auto; }
  .unter {
    position: static; opacity: 1; visibility: visible; transform: none;
    display: none; box-shadow: none; border: 0; border-left: 2px solid var(--gelb);
    border-radius: 0; margin: 0 0 .5rem .5rem; max-height: none; padding-left: .5rem;
  }
  .nav__punkt[data-offen="true"] > .unter { display: block; }
}

@media (max-width: 560px) {
  .spiel { grid-template-columns: 52px 1fr; }
  .spiel__rechts { grid-column: 2; flex-direction: row; align-items: center; justify-content: flex-start; margin-top: .4rem; }
  .teamliste { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* Einblenden beim Scrollen */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
  [data-reveal].sichtbar { opacity: 1; transform: none; }
  .tafel .spiel { animation: einlaufen .45s ease backwards; }
}
@keyframes einlaufen { from { opacity: 0; transform: translateX(-10px); } }

/* ------------------------------------------------- Fallback fehlende Bilder */
/* blob.football.ch liefert Bilder nur an die Vereinsdomain aus. Schlägt ein
   Bild fehl, zeigen wir eine Spielfeldskizze bzw. den Namen statt einer Lücke. */
.meldung__bild--leer {
  background:
    var(--nacht)
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80'%3E%3Cg fill='none' stroke='%23ffc629' stroke-width='1.6' opacity='.45'%3E%3Crect x='4' y='4' width='112' height='72'/%3E%3Cline x1='60' y1='4' x2='60' y2='76'/%3E%3Ccircle cx='60' cy='40' r='13'/%3E%3Crect x='4' y='23' width='15' height='34'/%3E%3Crect x='101' y='23' width='15' height='34'/%3E%3C/g%3E%3C/svg%3E")
    center / auto 62% no-repeat;
}
.meldung__bild--leer img { display: none; }

.logo-text {
  font-family: var(--mono); font-size: .6875rem; line-height: 1.25;
  text-align: center; color: var(--nebel); padding: .35rem;
  overflow-wrap: anywhere;
}
.haupt .logo-text { font-size: .875rem; color: var(--tinte); }
.markenlogo .logo-text {
  font-size: .75rem; font-weight: 600; color: var(--nacht);
  max-width: 190px; text-align: center;
}


/* ------------------------------------------------ Interner Bereich ------ */
/* Erfassen und Freigeben eigener Berichte. Schmale eigene Huelle statt der
   grossen Kopfzeile — es ist ein Werkzeug, keine Besucherseite. */
.intern { background: var(--papier); }
.internkopf { background: var(--nacht); color: var(--weiss); border-bottom: 4px solid var(--gelb); }
.internkopf__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 0; }
.internkopf__marke { display: inline-flex; align-items: center; gap: .6rem; color: var(--weiss); text-decoration: none;
  font-family: Oswald, sans-serif; font-weight: 700; font-size: 1.1rem; }
.internkopf__titel { font-family: "IBM Plex Mono", monospace; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.internrumpf { padding-block: 1.5rem 3rem; }
.internrumpf .sektion { padding-block: 1.25rem; }
.internkarte { max-width: 42rem; }
.internknoepfe { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.25rem 0 0; }
.internfehler, .internmeldung { margin: 0 0 1.25rem; padding: .9rem 1.1rem; border-radius: 4px; font-size: .95rem; }
.internfehler { background: #fff0f0; border: 1px solid #f0b4b4; color: #7a1c1c; }
.internfehler ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.internmeldung { background: #eefaf0; border: 1px solid #b7e2c0; color: #1f5a2c; }
.internfuss { padding: 1.5rem 0 2.5rem; color: var(--nebel); font-size: .85rem; }
.feld--versteckt { position: absolute; left: -9999px; }
.knopf--rot { color: #7a1c1c; border-color: #e0b0b0; }
.knopf--rot:hover { border-color: #7a1c1c; }

.internbericht { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; align-items: start;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: 4px; padding: 1rem; margin: 0 0 1rem; }
.internbericht__bild { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }
.internbericht:not(:has(.internbericht__bild)) { grid-template-columns: 1fr; }
.internbericht h3 { margin: 0 0 .25rem; font-family: Oswald, sans-serif; font-size: 1.25rem; }
.internbericht__meta { margin: 0 0 .5rem; font-family: "IBM Plex Mono", monospace; font-size: .75rem; color: var(--nebel); }
.internbericht__knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.internbericht__knoepfe .knopf { padding: .45rem .8rem; font-size: .85rem; }
/* Freigabeseite (17.9.2026): eine Zeile je Bericht statt einer Karte, das
   Bild immer gleich gross — auch wenn keines da ist, sonst springt die
   Titelspalte. Gefaehrliche Knoepfe stehen rechts aussen. */
.internbericht__bild--leer { display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3; border: 1px dashed var(--linie); border-radius: 3px;
  font-size: .7rem; color: var(--nebel); text-align: center; }
.internbericht__anriss { margin: 0; font-size: .92rem; color: var(--nacht); }
.internbericht__leiste { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .75rem; }
.internbericht__rechts { display: flex; gap: .5rem; margin-left: auto; }
.internmarke { display: inline-block; vertical-align: middle; margin-left: .4rem; padding: .1rem .45rem;
  background: var(--gelb); border-radius: 3px; font-family: "IBM Plex Mono", monospace;
  font-size: .65rem; text-transform: uppercase; letter-spacing: .05em; color: var(--nacht); }
.internhinweis { margin: 0 0 1rem; padding: .7rem 1rem; border-left: 4px solid var(--gelb);
  background: var(--papier); border-radius: 0 4px 4px 0; font-size: .95rem; }
.internfilter { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 1.25rem;
  padding-bottom: 1rem; border-bottom: 1px solid var(--linie); }
.internsuche { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-left: auto; }
.internsuche input[type=search] { font: inherit; font-size: .9rem; padding: .35rem .6rem; min-width: 14rem;
  border: 1px solid var(--linie); border-radius: 3px; background: var(--weiss); }
@media (max-width: 720px) { .internsuche { margin-left: 0; } .internsuche input[type=search] { min-width: 0; flex: 1; }
  .internbericht__rechts { margin-left: 0; } }
.bericht__autor { color: var(--nebel); font-style: italic; }
/* Auf dem Handy nicht stapeln, sondern ein kleines Vorschaubild: bei zwanzig
   Berichten waere eine Spalte aus formatfuellenden Bildern endlos. */
@media (max-width: 560px) { .internbericht { grid-template-columns: 4.5rem 1fr; gap: .75rem; padding: .8rem; }
  .internbericht h3 { font-size: 1.1rem; } }

/* Sponsorenverwaltung (sponsoren-verwalten.php). Jede Zeile zeigt das Logo
   zweimal — auf Weiss und auf Vereinsblau — weil manche Logos auf einem der
   beiden Gruende unlesbar sind, und man das hier sehen soll, nicht erst auf
   der Seite. */
.formular--intern { grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; }
.formular--intern .feld--bild, .formular--intern .feld--breit { grid-column: 1 / -1; }
.feld--kreuz label { display: flex; align-items: center; gap: .5rem; text-transform: none; letter-spacing: 0; font-size: .95rem; }
.feld--kreuz input { width: 1.1rem; height: 1.1rem; }
.internkarte { background: var(--weiss); border: 1px solid var(--linie); border-radius: 4px; padding: 1.25rem; margin: 0 0 1.25rem; }
.internkarte--flach { background: transparent; }
.sektion__titel--klein { font-size: 1.35rem; }
.sektion__kopf--zeile { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.internzahl { font-family: "IBM Plex Mono", monospace; font-size: .8rem; color: var(--nebel); font-weight: 400; margin-left: .3rem; }
.internknoepfe--eng { margin: 0; gap: .35rem; align-items: center; }
.internknopfform { display: inline; margin: 0; }
.knopf--klein { padding: .35rem .6rem; font-size: .8rem; line-height: 1.2; }
/* .knopf--rand ist fuer den dunklen Hero gedacht (weisse Schrift) — auf dem
   hellen Grund der internen Seiten waere er unsichtbar. */
.intern .knopf--rand { color: var(--nacht); border-color: var(--linie); }
.intern .knopf--rand:hover { border-color: var(--nacht); color: var(--nacht); }
.intern .knopf--rot { color: #7a1c1c; border-color: #e0b0b0; }
.intern .knopf--rot:hover { border-color: #7a1c1c; }
.internumbenennen { display: inline-block; position: relative; }
.internumbenennen summary { list-style: none; cursor: pointer; display: inline-block; }
.internumbenennen summary::-webkit-details-marker { display: none; }
.internumbenennen[open] summary { display: none; }
.internumbenennen form { display: inline-flex; gap: .35rem; align-items: center; }
.internumbenennen input { padding: .3rem .5rem; font: inherit; font-size: .85rem; border: 1px solid var(--linie); border-radius: 3px; }

.sponsorzeile { display: grid; grid-template-columns: 13rem 1fr auto; gap: 1rem; align-items: center;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: 4px; padding: .6rem .9rem; margin: 0 0 .5rem; }
.sponsorzeile--aus { opacity: .55; }
.sponsorzeile h3 { margin: 0 0 .15rem; font-family: Oswald, sans-serif; font-size: 1.05rem; font-weight: 600; }
.sponsorzeile .internbericht__meta { margin: 0; }
.sponsorzeile__logos { display: flex; gap: .4rem; }
.logoprobe { display: flex; align-items: center; justify-content: center; width: 6rem; height: 3.2rem;
  border: 1px solid var(--linie); border-radius: 3px; background: var(--weiss); padding: .25rem; }
.logoprobe img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logoprobe--blau { background: var(--nacht); border-color: var(--nacht); }
.logoprobe--text { width: 12.4rem; font-family: "IBM Plex Mono", monospace; font-size: .7rem; color: var(--nebel); text-align: center; overflow-wrap: anywhere; }
.sponsorzeile__knoepfe { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: flex-end; }
@media (max-width: 760px) {
  .formular--intern { grid-template-columns: 1fr; }
  .sponsorzeile { grid-template-columns: 1fr; }
  .sponsorzeile__knoepfe { justify-content: flex-start; }
}

/* Terminverwaltung: dieselben Zeilen wie bei den Sponsoren, links das Datum
   in der Schrift der Hero-Kacheln. */
.terminzeile { grid-template-columns: 5rem 1fr auto; }
.terminzeile__datum { display: grid; text-align: center; line-height: 1.1; }
.terminzeile__datum .anlass__tag { font-family: Oswald, sans-serif; font-size: 1.6rem; font-weight: 700; color: var(--nacht); }
.terminzeile__datum .anlass__monat { font-family: "IBM Plex Mono", monospace; font-size: .65rem; color: var(--nebel); text-transform: uppercase; }
/* Eine Kachel mit Link sieht aus wie die anderen — nur der Mauszeiger verraet es. */
@media (max-width: 760px) { .terminzeile { grid-template-columns: 1fr; } .terminzeile__datum { justify-items: start; } }

/* Uebersicht der Verwaltungsseiten (intern.php). */
.internraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
.internkachel { display: block; background: var(--weiss); border: 1px solid var(--linie); border-radius: 4px; padding: 1.1rem 1.25rem;
  color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
.internkachel:hover { border-color: var(--blau); transform: translateY(-2px); }
.internkachel h2 { margin: 0 0 .35rem; font-family: Oswald, sans-serif; font-size: 1.25rem; color: var(--nacht); }
.internkachel p { margin: 0; font-size: .9rem; color: var(--nebel); }
/* Gruppen in der Verwaltungsuebersicht (intern.php) — zwanzig Kacheln in
   einer Reihe waren nicht mehr zu ueberblicken. */
.interngruppe + .interngruppe { margin-top: 2.25rem; }
.interngruppe__titel { margin: 0 0 .15rem; font-family: Oswald, sans-serif; font-size: 1.1rem;
  text-transform: uppercase; letter-spacing: .06em; color: var(--nacht);
  border-bottom: 2px solid var(--gelb); padding-bottom: .35rem; }
.interngruppe__hinweis { margin: .5rem 0 .9rem; font-size: .9rem; color: var(--nebel); }
.internkopf__titel a { color: inherit; text-decoration: none; }
.internkopf__titel a:hover { color: var(--gelb); }

/* Anlass-Seite (Lottomatch): die Angaben Wann/Wo/Zeiten/Anmeldung als Liste. */
.anlassangaben { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.5rem; margin: 1.5rem 0;
  padding: 1rem 1.25rem; background: var(--papier); border-left: 4px solid var(--gelb); border-radius: 0 4px 4px 0; }
.anlassangaben dt { font-family: Oswald, sans-serif; font-weight: 600; color: var(--nacht); }
.anlassangaben dd { margin: 0; }
.anlassangaben a { color: var(--blau-text); }
@media (max-width: 560px) { .anlassangaben { grid-template-columns: 1fr; gap: .1rem 0; } .anlassangaben dd { margin-bottom: .6rem; } }
/* Schalter in der Anlass-Verwaltung */
.internschalter { border: 1px solid var(--linie); border-radius: 4px; padding: .9rem 1.1rem; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; }
.internschalter legend { font-family: "IBM Plex Mono", monospace; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--nebel); padding: 0 .4rem; }
.internschalter label { display: inline-flex; align-items: center; gap: .4rem; text-transform: none; letter-spacing: 0; font-size: .95rem; }
.internschalter__zeitraum { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; }
.internschalter__zeitraum input { padding: .35rem .5rem; font: inherit; font-size: .9rem; border: 1px solid var(--linie); border-radius: 3px; }
.internschalter small { flex-basis: 100%; font-size: .75rem; color: var(--nebel); }
.formular--intern textarea { min-height: 0; }
/* ------------------------------------------------- Dokumente als Liste */
/* Eine Zeile je Dokument (19.9.2026, Vorgabe des Vereins). Vorher standen sie
   als Knoepfe nebeneinander und brachen um, wo Platz war — bei sechs PDF
   (Sport-verein-t) ein unruhiger Block, in dem man die Zahl nicht sah.
   Dieselbe Liste auf allen Seiten mit Dokumenten und im Abschnitt
   „Dokumente & Links" der Startseite. */
.dokumente { margin: 1.5rem 0; }
.dokumente__titel {
  font-family: var(--mono); font-size: .75rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--nebel); margin: 0 0 .6rem;
}
.dokumente__liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.dokumente__liste li { border-bottom: 1px solid var(--linie); }
.dokumente__liste a {
  display: flex; align-items: center; gap: .9rem;
  padding: .85rem .25rem;
  text-decoration: none; color: var(--tinte);
}
.dokumente__liste a:hover { background: var(--papier); }
.dokumente__liste svg { flex: 0 0 auto; width: 22px; height: 28px; }
.dokumente__liste b { font-weight: 600; font-size: .9375rem; line-height: 1.3; }
/* „oeffnen" steht rechts aussen und rueckt auf dem Handy nicht weg: der Name
   darf umbrechen, die Marke bleibt einzeilig. */
.dokumente__liste small {
  margin-left: auto; padding-left: .5rem;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--nebel); white-space: nowrap;
}
.dokumente__liste a:hover small { color: var(--blau-text); }
.interndokumente { list-style: none; margin: 0 0 1rem; padding: 0; }
.interndokumente li { display: flex; align-items: center; gap: .6rem; padding: .4rem 0; border-bottom: 1px solid var(--linie); }
.interndokumente a { color: var(--blau-text); }

/* Berichte nach Art: oben zwei Gruppen (je drei), unten je ein Abschnitt. */
.news__gruppe { font-family: "IBM Plex Mono", monospace; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--nebel); margin: 2.25rem 0 .9rem; padding-bottom: .4rem; border-bottom: 1px solid var(--linie); }
.news__gruppe:first-child { margin-top: 0; }
.news__gruppe a { color: inherit; text-decoration: none; float: right; text-transform: none; letter-spacing: 0; }
.news__gruppe a:hover { color: var(--blau-text); }
/* Sponsorenwand jetzt auf Weiss — die Kaertchen heben sich mit Papiergrund ab. */
.sektion--weiss .wand > a, .sektion--weiss .wand > span, .sektion--weiss .haupt > a, .sektion--weiss .haupt > span { background: var(--papier); }
.internbericht__art label { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--nebel); }
.internbericht__art select { font: inherit; font-size: .85rem; padding: .3rem .5rem; border: 1px solid var(--linie); border-radius: 3px; background: var(--weiss); }
.interndateien { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.interndateien li { display: flex; align-items: center; gap: .8rem; font-size: .9rem; }
.interndateien img { width: 5rem; height: 3.4rem; object-fit: cover; border-radius: 3px; }
.interndateien label { display: inline-flex; align-items: center; gap: .4rem; text-transform: none; letter-spacing: 0; }
/* Spielberichte ohne Titelfoto: dieselbe Kachel, nur Text — die Kachelhoehe richtet sich nach den anderen der Reihe. */
.meldung--text .meldung__text { padding-top: 1.4rem; }
.news__alle { margin: 1.5rem 0 0; }
.news__alle .knopf { display: inline-block; }
/* Hero: die drei naechsten Anlaesse nebeneinander; zwei Kurzlisten (Spiel, Verein). */
/* Die Anlaesse im Hero stehen in der schmalen linken Spalte (rund 340 px
   neben der Anzeigetafel). Drei Kacheln nebeneinander hiess: Titel wie
   "Raiffeisen-Vorbereitungsturnier E/FF11/D/FF14" ueber drei Zeilen
   zerrissen und ungleich hohe Kaesten. Deshalb hier Zeilen statt Kacheln —
   Datum links, Anlass rechts. Im Abschnitt "Naechste Anlaesse" weiter unten
   bleiben es Kacheln, dort ist die ganze Breite da. */
.hero .anlaesse { grid-template-columns: 1fr; gap: .5rem; }
.hero .anlass {
  grid-template-columns: 5.25rem minmax(0, 1fr);
  column-gap: .9rem; row-gap: .1rem;
  padding: .7rem .9rem;
}
.hero .anlass__tag   { grid-column: 1; grid-row: 1; font-size: 1.25rem; }
.hero .anlass__monat { grid-column: 1; grid-row: 2; margin: 0; }
.hero .anlass__titel { grid-column: 2; grid-row: 1; align-self: center; }
.hero .anlass__ort   { grid-column: 2; grid-row: 2; }
.kurznews + .kurznews { margin-top: 1.25rem; }
.kurznews__titel--leer { color: rgba(255,255,255,.55); font-weight: 400; }
@media (max-width: 760px) { .hero .anlaesse { grid-template-columns: 1fr; } }
/* Termine-Seite: Kacheln auf hellem Grund */
.sektion .anlaesse-seite .anlass { background: var(--papier); }
/* Ansprechperson am Ende eines Berichts */
.ansprechperson { margin: 1.5rem 0 0; padding: 1rem 1.25rem; background: var(--papier); border-left: 4px solid var(--gelb); border-radius: 0 4px 4px 0; line-height: 1.6; }
.ansprechperson__label { display: block; font-family: "IBM Plex Mono", monospace; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--nebel); margin-bottom: .3rem; }
.ansprechperson a { color: var(--blau-text); }
/* Mehrere Eingabefelder in einem Rahmen (Ansprechperson im Berichtsformular) */
.internschalter--felder label { flex: 1 1 12rem; flex-direction: column; align-items: stretch; gap: .25rem; font-size: .8rem; }
.internschalter--felder input { padding: .5rem .6rem; font: inherit; border: 1px solid var(--linie); border-radius: 3px; }
/* Galerie am Schluss eines Eintrags */
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .6rem; margin: 1.5rem 0 0; }
.galerie a { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 3px; background: var(--papier); }
.galerie img { width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; transition: transform .3s ease; }
.galerie a:hover img { transform: scale(1.04); }
/* Die gemeinsame Maske */
.maske .feld--breit { grid-column: 1 / -1; }
.maske__vorhanden { display: flex; align-items: center; gap: .8rem; margin: .3rem 0 .6rem; font-size: .85rem; }
.maske__vorhanden img { width: 6rem; height: 4rem; object-fit: cover; border-radius: 3px; }
.maske__vorhanden label, .interndateien--bilder label { display: inline-flex; align-items: center; gap: .4rem; text-transform: none; letter-spacing: 0; }
.internschalter--dateien { display: grid; gap: .6rem; }
.internschalter--dateien .maske__pdf { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.internschalter--dateien input[type="text"] { padding: .45rem .6rem; font: inherit; font-size: .9rem; border: 1px solid var(--linie); border-radius: 3px; }
.interndateien--bilder { display: flex; flex-wrap: wrap; gap: .8rem; }
.interndateien--bilder li { border: 0; padding: 0; flex-direction: column; align-items: flex-start; }
@media (max-width: 560px) { .internschalter--dateien .maske__pdf { grid-template-columns: 1fr; } }
.ansprechpersonen { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem; margin: 1.5rem 0 0; }
.ansprechpersonen .ansprechperson { margin: 0; }
.maske__kontakt { display: grid; grid-template-columns: 1.2fr 1.2fr 1.4fr 1fr; gap: .5rem; }
.maske__kontakt input, .maske__kontakt select { padding: .45rem .6rem; font: inherit; font-size: .9rem; border: 1px solid var(--linie); border-radius: 3px; background: var(--weiss); }
/* Die Zeilen mit Auswahl haben nur zwei Felder: Beschriftung und Person. */
.maske__kontakt--wahl { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
@media (max-width: 760px) { .maske__kontakt { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .maske__kontakt--wahl { grid-template-columns: 1fr; } }
/* Vorschau: Kommentar aus der Verwaltung ("abgesagt") */
.spiel__kommentar { display: inline-block; font-family: "IBM Plex Mono", monospace; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase;
  background: var(--gelb); color: var(--nacht); padding: .1rem .4rem; border-radius: 2px; margin-right: .4rem; }
.spiel--kommentar .spiel__paarung { opacity: .6; }
/* Vorschau anpassen */
.vorschauliste__tag { font-family: "IBM Plex Mono", monospace; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--nebel); margin: 1.25rem 0 .5rem; }
.vorschauzeile { display: grid; grid-template-columns: 4rem 1fr 16rem auto auto; gap: .75rem; align-items: center;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: 4px; padding: .5rem .9rem; margin: 0 0 .4rem; }
.vorschauzeile--aus { opacity: .55; }
.vorschauzeile__zeit { font-family: "IBM Plex Mono", monospace; font-size: .85rem; }
.vorschauzeile__text small { color: var(--nebel); }
.vorschauzeile__text em { font-style: normal; color: var(--blau-text); font-size: .8rem; }
.vorschauzeile__kommentar { padding: .4rem .6rem; font: inherit; font-size: .9rem; border: 1px solid var(--linie); border-radius: 3px; }
.vorschauzeile__weg { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; white-space: nowrap; }
@media (max-width: 860px) { .vorschauzeile { grid-template-columns: 4rem 1fr; } .vorschauzeile__kommentar, .vorschauzeile__weg { grid-column: 2; } }
/* Startaufstellung: Verwaltung */
.aufstellungszeile { display: grid; grid-template-columns: 3rem 2.5rem 1fr auto auto; gap: .8rem; align-items: center;
  padding: .4rem 0; border-bottom: 1px solid var(--linie); }
.aufstellungszeile:last-child { border-bottom: 0; }
.aufstellungszeile--abwesend { opacity: .5; }
.aufstellungszeile--start .aufstellungszeile__name { font-weight: 600; }
.aufstellungszeile__bild { width: 3rem; height: 3.6rem; object-fit: cover; border-radius: 3px; background: var(--papier); display: block; }
.aufstellungszeile__nr { font-family: "IBM Plex Mono", monospace; font-size: .9rem; color: var(--nacht); width: 2.5rem; padding: .3rem .4rem; border: 1px solid var(--linie); border-radius: 3px; text-align: center; }
.aufstellungszeile__name small { color: var(--nebel); font-weight: 400; margin-left: .3rem; }
.aufstellungszeile__wahl { display: flex; gap: .9rem; }
.aufstellungszeile__wahl label { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; white-space: nowrap; }
.aufstellungszeile__pfeile { display: flex; gap: .3rem; }
@media (max-width: 760px) { .aufstellungszeile { grid-template-columns: 3rem 2.5rem 1fr; } .aufstellungszeile__wahl, .aufstellungszeile__pfeile { grid-column: 1 / -1; } }

/* ------------------------------------------------------------ Statistik
   Die Seite "Was gelesen wird" (statistik.php). Nur Summen, keine Kurven:
   Balken je Tag, zwei Ranglisten. Ohne JavaScript — die Breiten stehen
   als Prozentwert im HTML. */
.statreihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .75rem; margin: 0 0 1.5rem; }
.statkarte { background: var(--weiss); border: 1px solid var(--linie); border-radius: 4px; padding: .9rem 1rem; }
.statkarte__titel { margin: 0; font-family: var(--mono); font-size: .7rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--nebel); }
.statkarte__wert { margin: .25rem 0 0; font-family: Oswald, sans-serif; font-size: 1.9rem; line-height: 1;
  color: var(--nacht); font-variant-numeric: tabular-nums; }
.statkarte__fuss { margin: .2rem 0 0; font-size: .8rem; color: var(--nebel); }

.statwahl { margin: 0 0 .75rem; font-size: .9rem; color: var(--nebel); }
.statwahl a { margin-right: .4rem; }
.statwahl b { margin-right: .4rem; color: var(--nacht); }

.statbalken { display: flex; align-items: flex-end; gap: 2px; height: 9rem; margin: 0 0 2rem;
  padding: .5rem .6rem 0; background: var(--weiss); border: 1px solid var(--linie); border-radius: 4px;
  overflow-x: auto; }
.statbalken__tag { flex: 1 1 0; min-width: .5rem; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; height: 100%; }
.statbalken__stab { width: 100%; background: var(--blau); border-radius: 2px 2px 0 0; }
.statbalken__marke { font-family: var(--mono); font-size: .6rem; color: var(--nebel); margin-top: .2rem;
  white-space: nowrap; }

.statzwei { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1.5rem; }
.statliste { background: var(--weiss); border: 1px solid var(--linie); border-radius: 4px; padding: 1rem 1.1rem;
  margin-bottom: 1.5rem; }
.statliste__titel { margin: 0 0 .6rem; font-family: Oswald, sans-serif; font-size: 1.1rem; color: var(--nacht); }
.stattabelle { width: 100%; border-collapse: collapse; }
.stattabelle th { text-align: left; font-weight: 600; font-size: .9rem; padding: .3rem .5rem .3rem 0;
  max-width: 14rem; }
.stattabelle th small { display: block; font-family: var(--mono); font-size: .7rem; font-weight: 400; color: var(--nebel); }
.stattabelle__stab { width: 45%; padding: .3rem .5rem; }
.stattabelle__stab span { display: block; height: .5rem; background: var(--blau-hell); border-radius: 2px; }
.stattabelle__zahl { text-align: right; font-variant-numeric: tabular-nums; font-size: .9rem; white-space: nowrap; }
@media (max-width: 560px) {
  .stattabelle__stab { display: none; }
  .statbalken { height: 7rem; }
  .statbalken__marke { display: none; }
}

/* ------------------------------------------------------ Portraits im Kader
   Die Karten in kader-verwalten.php: Bild, Name, Hochladefeld. Schmal
   genug, dass ein ganzer Kader auf einen Blick passt. */
.kaderportraits { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 1rem; }
.kaderportrait { display: flex; flex-direction: column; gap: .5rem; }
.kaderportrait__bild { aspect-ratio: 4 / 5; background: var(--papier); border: 1px solid var(--linie);
  border-radius: 4px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.kaderportrait__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kaderportrait__leer { font-family: var(--mono); font-size: .7rem; color: var(--nebel); }
.kaderportrait__name { margin: 0; font-size: .9rem; line-height: 1.3; }
.kaderportrait__name small { display: block; font-family: var(--mono); font-size: .65rem; color: var(--nebel); }
.kaderportrait .formular--intern { margin: 0; }
.kaderportrait input[type="file"] { font-size: .75rem; max-width: 100%; }

/* ------------------------------------------------------ Vereinsspielplan
   Alle Spiele chronologisch, eine Kalenderwoche auf einmal. Die Leiste oben
   schaltet um (dieselbe Mechanik wie der Matchplan auf der Startseite, nur
   hell statt auf Blau). */
.vswoche .reiter--hell { flex-wrap: wrap; gap: .35rem; margin: 0 0 1.5rem; }
.vswoche .reiter--hell button {
  display: inline-flex; align-items: baseline; gap: .4rem;
  color: var(--nebel); border-color: var(--linie); background: var(--weiss);
  font-size: .8rem;
}
.vswoche .reiter--hell button:hover { color: var(--nacht); border-color: var(--blau); }
.vswoche .reiter--hell button[aria-selected="true"] {
  background: var(--nacht); border-color: var(--nacht); color: var(--weiss);
}
.vswoche__kw {
  font-size: .65rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--blau-text); font-weight: 600;
}
.vswoche .reiter--hell button[aria-selected="true"] .vswoche__kw { color: var(--gelb); }
.vswoche__turnier { margin-left: .6rem; font-family: var(--body); font-weight: 400;
  font-size: .85rem; color: rgba(255,255,255,.7); }
@media (max-width: 560px) {
  .vswoche .reiter--hell { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(-1 * var(--bund)); padding-inline: var(--bund); padding-bottom: .4rem; }
  .vswoche .reiter--hell::-webkit-scrollbar { display: none; }
  .vswoche .reiter--hell button { flex: 0 0 auto; }
}

/* Die Fusszeile der Bereichskacheln unter „Intern": wie viele Werkzeuge
   darin stecken und ob der Bereich schon offen ist. */
.internkachel__fuss {
  margin: .6rem 0 0 !important; font-family: var(--mono); font-size: .7rem;
  letter-spacing: .06em; color: var(--nebel);
}
.internkachel__fuss b { color: var(--blau-text); }