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

/* 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, .62) 0%, rgba(1, 82, 125, .72) 45%, rgba(1, 82, 125, .90) 100%),
    linear-gradient(to bottom,
      rgba(1, 82, 125, .45) 0%, rgba(1, 82, 125, .10) 25%,
      rgba(1, 82, 125, .70) 78%, var(--nacht) 100%);
}

/* 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);
}
.reiter { display: flex; gap: .25rem; }
.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);
}

.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; }

/* Beide Special-Knoepfe teilen sich den freien Platz rechts. Sie stehen
   nebeneinander, weil Lottomatch und Gruempelturnier gleichzeitig offen sein
   koennen — der Rahmen traegt die Lage, die Knoepfe nur ihr Aussehen. */
/* Nebeneinander, nicht uebereinander: unter den Knoepfen laeuft die dritte
   Slogan-Zeile durch, die fast bis an den rechten Rand reicht. Zu zweit
   werden beide Kugeln kleiner, damit sie nicht in die erste Zeile ragen —
   allein bleibt die Lottokugel so gross wie bisher. */
.specialknoepfe {
  /* Deutlich ueber die Titelzone hinaus nach oben, auf die Hoehe des Eyebrows. */
  position: absolute; right: 32px; top: -96px;
  display: flex; align-items: flex-start; gap: .75rem;
  /* 11.9.2026 groesser (vorher 112/92): der Verein wollte die beiden
     Kugeln praesenter. Zu zweit auf breiten Fenstern begrenzt der Platz
     neben "Oani Insla" — siehe die Media-Regel darunter. */
  --kugel: 200px;
}
.specialknoepfe--zwei { --kugel: 160px; }
/* Ab zwei Spalten wird der Platz rechts vom Slogan knapp. Die Spalte waechst
   nur bis --max (1280 px), die Schrift bis 1214 px — darueber ist beides fest
   und es bleiben rund 200 px neben „Oani Insla". Zu zweit passen dort 80 px
   je Ball; darunter waechst die Groesse mit dem Fenster mit. Gemessen bei
   1081, 1150, 1214 und 1440 px: ueberall mindestens 12 px Luft zum Slogan. */
@media (min-width: 1081px) {
  .specialknoepfe--zwei { --kugel: clamp(100px, calc(10vw - 6px), 128px); }
}
/* Auf sehr breiten Fenstern ist rechts neben dem Wrap Luft — dort duerfen die
   Kugeln etwas hinausragen und wieder groesser sein. */
@media (min-width: 1440px) {
  .specialknoepfe { right: -32px; }
  .specialknoepfe--zwei { --kugel: 160px; }
}

.lottokugel {
  position: relative;
  width: var(--kugel, 112px); height: var(--kugel, 112px);
  display: grid; place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff8c4 0%, var(--gelb) 55%, #d9b800 100%);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .35), inset 0 -6px 14px rgba(0, 0, 0, .18);
  text-decoration: none;
  transition: transform .3s ease;
}
/* Zwei kleinere Kugeln mit Zahl dahinter — erst zu dritt sieht es nach
   Lottotrommel aus und nicht nach Sonne. */
.lottokugel__klein {
  position: absolute;
  display: grid; place-items: center;
  border-radius: 50%;
  font-family: var(--display); font-weight: 700;
  color: var(--nacht); line-height: 1;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .3);
}
.lottokugel__klein--eins {
  left: calc(var(--kugel, 112px) * -.18); bottom: calc(var(--kugel, 112px) * -.036);
  width: calc(var(--kugel, 112px) * .43); height: calc(var(--kugel, 112px) * .43);
  font-size: calc(var(--kugel, 112px) * .16);
  background: radial-gradient(circle at 34% 30%, #ffffff 0%, #e6ecf2 60%, #aebac6 100%);
}
.lottokugel__klein--zwei {
  left: calc(var(--kugel, 112px) * .054); top: calc(var(--kugel, 112px) * -.125);
  width: calc(var(--kugel, 112px) * .34); height: calc(var(--kugel, 112px) * .34);
  font-size: calc(var(--kugel, 112px) * .134);
  background: radial-gradient(circle at 34% 30%, #bfe6fb 0%, #6cc4ec 60%, #2a8fc4 100%);
  color: var(--weiss);
}
.lottokugel__feld {
  position: relative;
  width: calc(var(--kugel, 112px) * .66); height: calc(var(--kugel, 112px) * .66);
  border-radius: 50%;
  background: var(--weiss);
  box-shadow: inset 0 0 0 2px rgba(1, 82, 125, .18);
  display: grid; place-items: center; align-content: center;
  text-align: center; line-height: 1;
}
.lottokugel__feld b {
  font-family: var(--display); font-weight: 700; font-size: calc(var(--kugel, 112px) * .16);
  text-transform: uppercase; letter-spacing: .01em; color: var(--nacht);
}
.lottokugel__feld i {
  font-style: normal;
  font-family: var(--mono); font-size: calc(var(--kugel, 112px) * .08); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--blau-text);
  margin-top: .15rem;
}
.lottokugel:hover { transform: rotate(-8deg) scale(1.04); }

@media (max-width: 900px) {
  .specialknoepfe { position: relative; right: auto; top: auto; margin: 1.5rem 0 .25rem; }
  .lottokugel__klein { left: -14px; }
}

/* ---------------------------------------------------- Gruempelturnier */
/* Ein Fussball mit dem Wort quer darueber, wie auf einen Ball geschrieben.
   Die Fuenfecke liegen als SVG darauf; der Verlauf macht daraus eine Kugel
   statt einer Scheibe. */
.fussball {
  position: relative;
  width: var(--kugel, 112px); height: var(--kugel, 112px);
  display: grid; place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #ffffff 0%, #eef1f4 55%, #b9c2cb 100%);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .35), inset 0 -6px 14px rgba(0, 0, 0, .18);
  text-decoration: none;
  transition: transform .3s ease;
}
.fussball__naht {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  fill: #16202b; stroke: #16202b; stroke-width: 2.4; stroke-linecap: round;
}
/* Banderole statt rundem Feld: "Grümpel" braucht Breite, ein Kreis in der
   Ballmitte wuerde das Wort auf zwei Zeilen brechen. */
.fussball__band {
  position: relative;
  left: 0; right: 0;
  padding: calc(var(--kugel, 112px) * .027) calc(var(--kugel, 112px) * .045);
  background: var(--gelb);
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .35);
  transform: rotate(-8deg);
  font-family: var(--display); font-weight: 700;
  font-size: calc(var(--kugel, 112px) * .125);
  text-transform: uppercase; letter-spacing: .04em; line-height: 1;
  color: var(--nacht); white-space: nowrap;
}
.fussball:hover { transform: rotate(8deg) scale(1.04); }

/* ------------------------------------------------ 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); }
.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; }
.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) {
  .hero__inner { grid-template-columns: 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. */
.anlass--link { text-decoration: none; color: inherit; cursor: pointer; }
@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; }
.anlassdokumente { display: flex; flex-wrap: wrap; gap: .5rem; }
.anlassdokumente a[data-typ] { margin: 0; }
.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). */
.hero .anlaesse { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.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 { padding: .45rem .6rem; font: inherit; font-size: .9rem; border: 1px solid var(--linie); border-radius: 3px; }
@media (max-width: 760px) { .maske__kontakt { grid-template-columns: 1fr 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; } }