/* ============ Seiten-CSS Startseite (Brand-Fundament: style.css) ============ */

/* ---- Bereich 2: Team – Teamfoto und Portraet-Band auf EINER Bildschirmseite ----
   Lucas Vorgabe 06.09.2026 (t-3097, Paket 1). Ersetzt die Rechnung vom
   04.09.2026, die Foto und Band auf ZWEI Geschwister-Abschnitte verteilt hat
   (#team und #team-band). Damit konnte kein einzelner Abschnitt „eine
   Bildschirmseite" sein, egal wie man rechnet – deshalb steht das Band seit
   dem 06.09. IM Abschnitt #team (front-page.php), und #team-band gibt es
   nicht mehr.

   DIE HOEHEN WERDEN GERECHNET, NICHT GESETZT:
     frei   = Bildschirm − Navi − Innenabstaende − Fusszeile
     band   = Kachelbreite + Infozeile + Innenabstand der Spur
     Foto   = (frei − band) / knie
   Daraus folgt Foto·knie + band = frei, und mit den Innenabstaenden und der
   Fusszeile ergibt der Abschnitt exakt 100svh. Nachgerechnet und gemessen bei
   1440x900, 1280x800, 1920x1080, 390x844, 360x844 und 320x844.

   `min-height` statt `height`: bricht die Fusszeile auf einem schmalen Geraet
   in mehr Zeilen als veranschlagt, waechst der Abschnitt – statt in den
   naechsten hineinzulaufen. Eine zu grosszuegige --fuss kostet nur Fotohoehe,
   eine zu knappe kostet die Bildschirmseite.

   --knie ist der Anteil der RAHMENHOEHE, an dem die Oberkante der Kacheln
   sitzt; --nicht-knie = 1 − knie ist die Ueberlappungstiefe und wird als
   negativer Aussenabstand an .rota gesetzt.

   ⚠️ --knie haengt am Rahmenverhaeltnis, NICHT am Bild allein. Das Foto ist
   1,643:1; im breiten Rahmen (2,142) sieht man mit object-position:50% 0% nur
   die oberen 1,643/2,142 = 76,7 % der Bildhoehe, im schmalen Rahmen (1,643)
   dagegen 100 %. Derselbe Koerperpunkt liegt deshalb in beiden Rahmen an einer
   ANDEREN Rahmenhoehe – die Knie (gemessen bei 0,68–0,70 der Bildhoehe) bei
   0,89 im breiten und bei 0,68 im schmalen Rahmen. Wer --knie einmal fuer alle
   Groessen setzt, verschiebt die Ueberlappung am Handy um mehr als eine
   Beinlaenge. Details und die Gegenrechnung stehen im Report zu t-3097.

   ⚠️ DIESE RECHNUNG GILT NUR AB 901px. Am Handy (max-width:900px) ist das
   Foto breiten-begrenzt und kann nicht mitwachsen; dort steht --tp-h fest,
   es gibt keine erzwungene Bildschirmhoehe und keine Ueberlappung. Die
   Begruendung steht bei der Medienabfrage weiter unten (Luca, 06.09.2026).

   --breit ist nur die BREITEN-Obergrenze fuer die Rechnung; gegen Ueberlauf
   sichert zusaetzlich das min(100%, …) an .tp-frame. Deshalb kann ein
   Scrollbalken hier nichts kaputtmachen: 100vw taeuscht dann zwar ein paar
   Pixel vor, aber die Breite wird trotzdem am Behaelter gedeckelt. */
#team{
  background:var(--green);color:var(--cream);
  min-height:100vh;                  /* Rueckfall */
  min-height:100svh;                 /* Handy: die einklappbare Adressleiste zaehlt nicht mit */
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--nav-h) + 16px) 20px 20px;

  --tp-ar:2.142;                     /* Rahmenverhaeltnis breit */
  /* --knie: Lucas Entscheidung am Bild vom 06.09.2026. Er hat die Fassung mit
     dem BREITEN Foto genommen (1379x644 bei 1440x900) und dafuer in Kauf
     genommen, dass die Kacheln oberhalb der Knie ansetzen.
     Zum Nachlesen, damit die Zahl nicht spaeter fuer einen Fehler gehalten wird:
     0,80 der RAHMENhoehe sind im breiten Rahmen 0,80 x 0,767 = 0,614 der
     BILDhoehe, also Oberschenkel/Hosensaum. Die Knie liegen bei 0,68–0,70 der
     Bildhoehe und stehen erst ab --knie:0.925 frei – dann ist das Foto aber nur
     noch 1017x475. Beide Fassungen sind gerendert und gegenuebergestellt
     (belege-2026-09-06-paket1/vergleich-knie-0820-vs-0925.png). Die Wahl faellt
     zwischen „Knie frei" und „grosses Foto", beides geht nicht. */
  --knie:0.80;                       /* Oberkante Kacheln, Anteil der Rahmenhoehe */
  --nicht-knie:0.20;                 /* 1 − knie */
  --card-w:158px;                    /* war clamp(178px,21vw,224px) */
  --info-h:68px;                     /* gemessen: Name + Rolle + Innenabstand */
  --spur:12px;                       /* .rota-track hat 6px oben und unten */
  --band-h:calc(var(--card-w) + var(--info-h) + var(--spur));
  /* --fuss ist die Hoehe dessen, was UNTER dem Band noch steht. Jeder Pixel
     hier kostet 1/knie Pixel Fotohoehe und damit 2,68 px Fotobreite – die
     116px vom Nachmittag (Knopf + Hinweiszeile + zweizeiliger Quellenhinweis)
     waren allein fuer 362 px Fotobreite verantwortlich. Der Quellenhinweis
     steht seit dem Nachtrag im Footer, der Hinweistext haengt am Knopf
     (title/aria-describedby); uebrig bleibt der Knopf, gemessen 33px hoch.
     Die 40px sind kein Schaetzwert, sondern erzwungen: #team > .wrap hat
     min-height:var(--fuss) und zentriert den Knopf darin. Waechst der Inhalt
     dort je ueber 40px, waechst der Abschnitt sanft mit (min-height an #team)
     statt in #spiele zu laufen – dann gehoert --fuss nachgemessen. */
  /* 0 seit 11.09.2026: der Knopf ist unsichtbar (siehe .rota-meta weiter
     unten), also steht unter dem Band nichts mehr, was Hoehe braucht. Die
     freigewordene Hoehe geht nach der Rechnung oben direkt in die Fotobreite.
     Kommt dort je wieder etwas hin, gehoert der Wert nachgemessen. */
  --fuss:0px;                        /* war 40px: Pause/Weiter-Knopf */
  --breit:calc(100vw - 60px);
  --frei:calc(100vh - var(--nav-h) - 36px - var(--fuss));
  --tp-h:min(calc((var(--frei) - var(--band-h)) / var(--knie)),
             calc(var(--breit) / var(--tp-ar)));
  --ueber:calc(var(--tp-h) * var(--nicht-knie));
  /* Abstand zwischen Foto und Band. Ab 901px ueberlappen sie sich, hier also
     0; die Handy-Medienabfrage setzt stattdessen einen positiven Wert. */
  --luft:0px;
}
@supports (height:100svh){
  #team{--frei:calc(100svh - var(--nav-h) - 36px - var(--fuss))}
}
.teamphoto{display:block;border:none}

/* Der Rahmen, den Luca ausdruecklich wollte („aehnlich wie bei den Portraets"):
   Radius, feine helle Kante, Schlagschatten, orange Unterkante.
   Die Breite kommt aus min(100%, Hoehe·Verhaeltnis) und die Hoehe aus
   aspect-ratio – so bleibt das Verhaeltnis IMMER erhalten, auch wenn der
   Behaelter schmaler ist als gerechnet. Andersherum (feste Hoehe + max-width)
   waere das Verhaeltnis im Engpass gerissen und der Zuschnitt ein anderer.

   object-position nimmt ZWEI Werte. Drei Werte sind ungueltig, und der Browser
   faellt STILL auf 50% 50% zurueck – kein Fehler, nur ein anderes Bild.
   Nach jeder Aenderung hier getComputedStyle(img).objectPosition nachlesen. */
.tp-frame{
  position:relative;margin:0 auto;
  width:min(100%, calc(var(--tp-h) * var(--tp-ar)));
  height:auto;aspect-ratio:var(--tp-ar);
  overflow:hidden;border-radius:var(--radius);
  border:1px solid rgba(245,241,220,.22);
  box-shadow:0 20px 46px rgba(0,0,0,.4);
}
.tp-frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0%}
.tp-frame::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--orange);opacity:.7}

/* Schmale Bildschirme: das Breitformat passt hier nicht – bei 390px Breite
   kaeme eine Fotohoehe von rund 182px heraus, ein Streifen. Deshalb bleibt der
   hohe Ausschnitt (1,643:1), und das Foto laeuft wie bisher randlos ueber die
   volle Breite; alles andere waere gegenueber dem Stand vom 05.09. kleiner.
   Die Grenze 900px muss mit dem media-Attribut der <source> in front-page.php
   uebereinstimmen – wer eins aendert, aendert beides.
   Das Foto fuellt hier exakt das Bild: 1,643:1 ist das Verhaeltnis der Datei,
   es wird also NICHTS beschnitten.

   ⚠️ AB HIER GILT DIE RECHNUNG AUS DEM DATEIKOPF NICHT MEHR (Luca,
   06.09.2026). Sie ist eine LAPTOP-Rechnung: dort waechst das Foto mit der
   freien Hoehe mit, nur deshalb kann „Foto + Band = eine Bildschirmseite"
   ueberhaupt aufgehen. Am Handy ist das Foto BREITEN-begrenzt (100vw / 1,643)
   und kann nicht mitwachsen – die uebrige Hoehe wurde dort zu leerem Gruen
   (gemessen 234px bei 390x844, je 117 ueber und unter dem Inhalt). Am Handy
   gilt deshalb: keine erzwungene Bildschirmhoehe, keine Ueberlappung, Foto
   UEBER dem Band. Das ist die Anordnung von vor t-3097, die Luca zurueckhaben
   wollte – die Ueberlappung war nie fuers Handy gedacht, sondern eine
   Laptop-Loesung, die versehentlich fuer alle Groessen formuliert wurde. */
@media (max-width:900px){
  #team{
    /* 1. Keine erzwungene Bildschirmhoehe. Der Abschnitt ist so hoch wie sein
       Inhalt; das justify-content:center aus der Grundregel hat dann nichts
       mehr zu verteilen und ist wirkungslos. */
    min-height:0;

    --tp-ar:1.643;
    --breit:100vw;
    /* 2. Das Foto haengt hier NUR an der Breite. Ausgeschrieben statt aus dem
       min() des Dateikopfes gegriffen, damit das auch so bleibt: --frei,
       --fuss, --band-h und --knie gehen am Handy in KEINE Fotorechnung mehr
       ein. Vorher gewann der Breiten-Zweig des min() zwar ebenfalls, aber nur
       weil die Zahlen gerade so standen – ein groesseres --fuss haette das
       Foto still schrumpfen lassen.
       --knie und --band-h stehen hier deshalb bewusst NICHT mehr: sie haetten
       keine Wirkung. Wer die Ueberlappung am Handy je zurueckwill, braucht
       beide wieder UND ein --nicht-knie groesser 0. */
    --tp-h:calc(var(--breit) / var(--tp-ar));
    /* 3. Keine Ueberlappung. --nicht-knie IST die Ueberlappungstiefe; 0 macht
       den negativen Aussenabstand an .rota rechnerisch zu 0. Den sichtbaren
       Abstand setzt .rota weiter unten. */
    --nicht-knie:0;
    /* Der sichtbare Abstand zwischen Foto und Band – POSITIV, nicht negativ:
       das Band steht UNTER dem Foto und nicht darauf. Ohne ihn sitzen beide
       auf Kante und das Foto sieht abgeschnitten aus statt wie ein eigenes
       Bild. 30px ist kein Schaetzwert, sondern der padding-top, den der
       eigene Abschnitt #team-band vor t-3097 hatte.
       Warum eine Variable und keine .rota-Regel hier drin: diese Medienabfrage
       steht VOR der Grundregel von .rota. Bei gleicher Spezifitaet gewinnt die
       spaetere – ein `.rota{margin-top:30px}` an dieser Stelle waere
       wirkungslos gewesen (gemessen 06.09.2026, genau so passiert). */
    --luft:30px;
    /* 4. Die Kacheln sind am Handy die Hauptsache, nicht eine Randleiste.
       178px ist der Wert von vor t-3097: dort stand clamp(178px,21vw,224px),
       und 21vw sind bei 390/360/320 immer kleiner als 178. */
    --card-w:178px;
    /* 5. --fuss geht am Handy in keine Rechnung mehr ein (siehe 2.) und darf
       deshalb auch nichts mehr erzwingen: die Fusszeile ist hier so hoch wie
       ihr Inhalt (gemessen 85px – der Hinweis bricht auf zwei bis drei
       Zeilen um). Mit den alten 111px stand ueber und unter dem Knopf je 13px
       Luft, die niemand bestellt hat. Den Abstand zum Band setzt das padding
       an #team > .wrap. */
    --fuss:0px;
    /* 6. Oben KEIN Innenabstand: vor t-3097 stand das Foto buendig unter dem
       Hero (#team hatte padding:0), und genau die Fassung wollte Luca zurueck.
       Die klebende Navi braucht ihn nicht – fuer Ankersprunge sorgt
       scroll-margin-top in style.css (--nav-h + 8px). */
    padding:0 0 16px;
  }
  /* Der Hinweis neben dem Knopf bleibt am Handy sichtbar: hier ist Platz, und
     gerade hier ist er der nuetzlichste („wischen"), waehrend es einen
     Mauszeiger zum Drueberfahren gar nicht gibt. Das padding-top ersetzt die
     Luft, die vorher aus min-height:var(--fuss) fiel. */
  #team > .wrap{padding:18px 16px 0}
  .tp-frame{border-radius:0;border-left:0;border-right:0;box-shadow:none;
            max-height:var(--tp-h)}
}

/* ---- Portrait-Rotations-Band (schließt ohne Überschrift ans Teamfoto an) ---- */
/* Das Band ueberlappt das Foto – aber NUR ab 901px: der negative
   Aussenabstand IST die Ueberlappungstiefe, und am Handy ist --nicht-knie 0
   (die Medienabfrage oben setzt dort stattdessen einen positiven Abstand).
   z-index:1, damit die Kacheln ueber dem Rahmen liegen –
   ohne ihn haengt die Reihenfolge allein an der Dokumentreihenfolge, und der
   Schlagschatten des Rahmens legt sich sonst sichtbar auf die Kachelkanten. */
.rota{
  position:relative;z-index:1;overflow:hidden;touch-action:pan-y;cursor:grab;
  margin-top:calc(var(--ueber) * -1 + var(--luft));
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
}
.rota.dragging{cursor:grabbing}
.rota-track{display:flex;gap:18px;padding:6px 20px;will-change:transform}
.rcard{
  flex:0 0 var(--card-w);
  background:var(--card);color:var(--green);
  border:1px solid rgba(0,0,0,.08);border-radius:var(--radius);overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease;
}
.rcard:hover,.rcard:focus-visible{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,.3)}
.rphoto{
  aspect-ratio:1/1;overflow:hidden;
  border:none;border-bottom:2px solid rgba(247,146,31,.5);
  background:var(--green);   /* haelt die Kachel ruhig, solange das Bild laedt */
}
.rphoto img{display:block;width:100%;height:100%;object-fit:cover}
.rinfo{padding:12px 14px}
.rinfo b{display:block;font-size:14px;letter-spacing:.06em;text-transform:uppercase;font-weight:800}
.rinfo span{display:block;font-size:11.5px;color:var(--green-mute);font-weight:600;margin-top:3px}
/* Ab 901px IST die Fusszeile des Team-Abschnitts --fuss hoch, und zwar
   erzwungen statt erhofft: min-height setzt die Untergrenze, der Inhalt
   (Knopf, gemessen 33px) passt hinein und wird darin zentriert. Damit stimmt
   die Rechnung im Kopf dieser Datei ohne Nachmessen – frei = Bildschirm −
   Navi − Innenabstaende − --fuss geht nur auf, wenn --fuss auch wirklich die
   uebrige Hoehe ist.
   Kein `height`: waechst der Inhalt einmal (mehr Text, groessere Schrift),
   soll der Abschnitt mitwachsen und nichts abschneiden.
   Am Handy ist --fuss 0 und diese Zeile damit wirkungslos – dort geht keine
   Hoehe mehr in eine Rechnung ein, und die Fusszeile ist so hoch wie ihr
   Inhalt (Medienabfrage oben, Punkt 5). */
#team > .wrap{min-height:var(--fuss);display:flex;flex-direction:column;justify-content:center}
/* ---- Die Fusszeile des Bandes ist unsichtbar, aber nicht weg ----
   Luca am 11.09.2026: "unter den Spielerportraets keinen Pause-Button, und am
   Handy dann auch keine Erklaerung darunter."

   GELOESCHT WIRD SIE TROTZDEM NICHT, und das hat zwei Gruende:
   1. Das Band laeuft von selbst. Bewegung, die automatisch startet und laenger
      als fuenf Sekunden dauert, braucht eine Moeglichkeit anzuhalten
      (WCAG 2.2.2). Mit der Maus gibt es sie (Zeiger drauf = Pause), per
      Tastatur und ohne Zeiger NUR ueber diesen Knopf.
   2. `werkzeug/viewport-schuss.js` drueckt genau diesen Knopf, um das Band
      fuers Beleg-Foto anzuhalten. Ohne ihn haelt das Werkzeug das Band ueber
      `prefers-reduced-motion` an – und das schaltet ein ANDERES Layout ein
      (scrollbare Reihe statt Karussell). Der Beleg zeigte dann etwas, das so
      kein Besucher sieht.

   Deshalb dasselbe Verfahren wie beim Hinweis daneben: aus dem Bild, nicht aus
   der Seite. Wer mit Tab hierher kommt, holt sie sich mit `:focus-within`
   zurueck – sonst waere es eine Tastaturfalle (Fokus auf etwas Unsichtbarem).
   Sichtbar ist sie damit fuer niemanden, der sie nicht sucht. */
.rota-meta{
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);border:0;
}
.rota-meta:focus-within{
  position:static;width:auto;height:auto;padding:0;margin:0;
  overflow:visible;clip-path:none;
}
.rota-hint{font-size:12px;color:rgba(245,241,220,.7)}
/* Ab 901px ist die Fusszeile der Engpass (jeder Pixel kostet 2,68px
   Fotobreite). Der Hinweis verschwindet deshalb aus dem Bild, aber NICHT aus
   der Seite: er bleibt im Markup, der Knopf verweist per aria-describedby auf
   ihn und traegt denselben Text als title. Screenreader und Maus bekommen ihn
   also weiterhin; nur die Flaeche ist weg.
   Ausnahme reduzierte Bewegung: dort schreibt home.js die Erklaerung der
   ruhigen Kachel-Reihe in genau dieses Element und blendet den Knopf aus –
   unsichtbar waere sie fuer niemanden mehr da. */
@media (min-width:901px){
  .rota-hint{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
  body.rm .rota-hint{position:static;width:auto;height:auto;margin:0;
    overflow:visible;clip-path:none;white-space:normal}
}
.rota-btn{
  background:transparent;border:2px solid rgba(245,241,220,.45);color:var(--cream);
  border-radius:999px;padding:7px 16px;font-family:var(--font-ui);font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
}
.rota-btn:hover{border-color:var(--orange);color:var(--orange)}

/* ---- Spiele: Toggle + Tabellen ---- */
.toggle-wrap{text-align:center;margin-bottom:28px}
.toggle{display:inline-flex;background:var(--card);border:2px solid var(--green);border-radius:999px;padding:4px}
.toggle button{
  border:none;background:transparent;color:var(--green);cursor:pointer;
  font-family:var(--font-ui);font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;
  padding:10px 26px;border-radius:999px;transition:background .15s;
}
.toggle button[aria-pressed="true"]{background:var(--green);color:var(--cream)}
.toggle button[aria-pressed="true"] .dot{color:var(--orange)}
.view{display:none}
.view.active{display:block}
.table-scroll{position:relative;overflow-x:auto;border:1px solid var(--green-line);border-radius:var(--radius);background:var(--card)}
/* `position:relative` ist hier NICHT Kosmetik: ohne sie beziehen sich die
   absolut gesetzten Screenreader-Texte in den Zellen auf den Seitenrahmen
   statt auf diesen Kasten. Sie entkommen dann dem Scroll-Bereich, ziehen das
   Dokument auf 569 px auf, und das Handy zeigt die ganze Seite herausgezoomt.
   Am 05.09.2026 gemessen und Kandidat fuer Kandidat eingekreist. */
table{width:100%;border-collapse:collapse;font-size:15px;min-width:560px}
thead th{
  background:var(--green);color:var(--cream);text-align:left;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  padding:12px 14px;white-space:nowrap;
}
tbody td{padding:12px 14px;border-top:1px solid var(--green-line);vertical-align:middle;white-space:nowrap}
tbody tr.win{background:var(--win-bg);box-shadow:inset 4px 0 0 var(--orange)}
tbody tr.nsb-row{background:var(--win-bg);box-shadow:inset 4px 0 0 var(--orange);font-weight:700}
.team-cell{display:flex;align-items:center;gap:10px;white-space:nowrap}
.badge{
  width:34px;height:34px;border-radius:50%;flex:0 0 34px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;letter-spacing:.02em;
  background:var(--cream);border:2px solid var(--green);color:var(--green);
}
.badge.nsb{background:var(--green);color:var(--cream);border-color:var(--orange)}
/* Badge mit echtem Vereinslogo. Weisser Grund statt Creme, weil fremde Wappen
   auf Weiss entworfen sind – auf Creme wirken helle Flaechen wie Schmutzraender.
   `object-fit:contain` haelt jedes Seitenverhaeltnis unverzerrt: die Wappen sind
   mal rund, mal hochkant, mal breit. Das Bild fuellt den Kreis nicht randlos aus,
   sondern sitzt darin – ein beschnittenes fremdes Logo waere schlechter als ein
   kleines. Ohne `overflow:hidden` wuerden eckige Logos ueber den Kreis ragen. */
.badge.logo{background:#fff;border-color:var(--green-line);padding:3px;overflow:hidden}
.badge.logo img{width:100%;height:100%;object-fit:contain;display:block}
/* Auch unser eigenes Logo bekommt Weiss: der gruene Kreis der Textfassung wuerde
   die gruenen Teile des Wappens verschlucken. Die Zugehoerigkeit zeigt weiter der
   orange Rand – und die ganze Zeile ist ohnehin hervorgehoben (.nsb-row). */
.badge.logo.nsb{background:#fff;border-color:var(--orange)}
.ha{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.08em;padding:4px 10px;border-radius:999px;border:2px solid var(--green)}
.ha.heim{background:var(--green);color:var(--cream)}
.ha.ausw{background:transparent;color:var(--green)}
.chip{display:inline-flex;width:24px;height:24px;border-radius:50%;align-items:center;justify-content:center;
    font-size:12px;font-weight:800;margin-right:8px}
.chip.s{background:var(--orange);color:var(--green)}
.chip.n{background:transparent;border:2px solid var(--green-line);color:var(--green-mute)}
.muted{color:var(--green-mute);font-size:13px}
.num{text-align:right}
td.num{font-variant-numeric:tabular-nums}

/* ---- Reduced Motion: ruhige, scrollbare Kachel-Reihe statt Auto-Rotation ---- */
body.rm .rota{overflow-x:auto;cursor:auto;-webkit-mask-image:none;mask-image:none}
body.rm .rota-track{transform:none !important;transition:none !important}
body.rm .rcard.clone{display:none}
body.rm .rcard{transition:none}

/* ---- Responsive ---- */
@media (max-width:760px){
  table{font-size:13px}
  thead th,tbody td{padding:9px 8px}
  .col-koerbe{display:none}
  .badge{width:28px;height:28px;flex-basis:28px;font-size:9px}
  .rota-track{gap:14px;padding:6px 16px}
}

/* ---- Laufende Saison: kommende, ausgefallene und hervorgehobene Spiele ---- */
/* Kommende Spiele muessen sich auf den ersten Blick von gespielten
   unterscheiden – nicht nur durch ein fehlendes Ergebnis. Deshalb ruhigerer
   Text und ein zurueckhaltender Streifen statt einer Farbflaeche. */
tbody tr.kommend{color:var(--green-soft)}
tbody tr.kommend td{box-shadow:inset 3px 0 0 var(--green-line)}
tbody tr.ausfall{color:var(--green-mute)}
tbody tr.ausfall td{box-shadow:inset 3px 0 0 var(--green-line)}
tbody tr.ausfall .team-cell{text-decoration:line-through;text-decoration-thickness:1px}

/* Das naechste anstehende Spiel – die Information, fuer die Besucher kommen. */
tbody tr.naechstes{background:var(--win-bg);color:var(--green)}
tbody tr.naechstes td{box-shadow:inset 4px 0 0 var(--orange);font-weight:700}
.next-tag{
  display:inline-block;margin-left:10px;padding:2px 8px;border-radius:999px;
  background:var(--orange);color:var(--green);
  font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  vertical-align:middle;white-space:nowrap;
}
.offen{color:var(--green-mute)}
.hinweis{font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--green-mute);text-transform:uppercase}

/* Nur fuer Screenreader: der Endstand allein sagt nicht, ob wir gewonnen
   haben – das S/N-Zeichen ist ein Bild und wird nicht vorgelesen. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ---- Spielort-Popup an "Heim" / "Ausw." ---- */
/* Der Knopf muss aussehen wie das Abzeichen davor, sich aber als bedienbar
   zu erkennen geben. */
button.ha{font-family:inherit;cursor:pointer;position:relative}
button.ha::after{
  content:"";position:absolute;left:10px;right:10px;bottom:2px;
  border-bottom:1px dotted currentColor;opacity:.6;
}
button.ha:hover,button.ha[aria-expanded="true"]{border-color:var(--orange)}
button.ha:focus-visible{outline:3px solid var(--orange);outline-offset:2px}

.halle-pop{
  position:fixed;z-index:60;max-width:min(280px,calc(100vw - 16px));
  background:var(--card);color:var(--green);
  border:2px solid var(--green);border-radius:var(--radius);
  padding:12px 14px;box-shadow:0 12px 28px rgba(0,0,0,.22);
  font-size:14px;line-height:1.45;
}
.halle-pop:focus{outline:3px solid var(--orange);outline-offset:2px}
.hp-name{font-weight:800;margin:0 0 2px}
.hp-adr{margin:0 0 8px;color:var(--green-soft)}
.hp-offen{margin:0;color:var(--green-mute);font-style:italic}
.hp-link{display:inline-block;font-weight:700;color:var(--orange-deep);text-decoration:underline}
.hp-link:focus-visible{outline:3px solid var(--orange);outline-offset:2px}

/* Auf schmalen Schirmen traegt die Plakette nichts bei, was die Zeilen-
   hervorhebung nicht schon zeigt - kostet aber Spaltenbreite und drueckt
   damit die ganze Seite aus dem Raster (gemessen 05.09.2026). Sie bleibt
   fuer Screenreader erhalten, verschwindet nur optisch. */
@media (max-width:700px){
  .next-tag{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  }
}

/* Zurueckgezogene Mannschaft in der TABELLE.

   Ohne diese Kennzeichnung widersprechen sich zwei Ansichten derselben Seite:
   im Spielplan sind die Spiele der Mannschaft durchgestrichen, in der Tabelle
   stand sie unauffaellig auf ihrem Platz. Die Zeile bleibt (die Tabelle ist die
   offizielle des Verbands), wird aber sichtbar entwertet.

   Bewusst dieselbe Formensprache wie `tr.ausfall` im Spielplan – es ist
   dieselbe Aussage, und wer sie oben gelernt hat, versteht sie unten sofort.
   Der Anhaenger ist bewusst RUHIG (Rahmen statt Fuellung): Orange ist auf
   dieser Seite fuer das naechste Spiel reserviert, also fuer eine gute
   Nachricht, und darf hier nicht mit konkurrieren. */
tbody tr.raus{color:var(--green-mute)}
/* Der Balken nur an der ERSTEN Zelle. Auf jede Zelle gelegt (wie bei
   `tr.ausfall` im Spielplan, wo es bei fuenf Spalten nicht auffaellt) ergaben
   die acht Tabellenspalten ein Gitter aus senkrechten Strichen quer durch die
   Zeile. Im Screenshot sofort zu sehen, in keiner Messung. */
tbody tr.raus td:first-child{box-shadow:inset 3px 0 0 var(--green-line)}
tbody tr.raus s{text-decoration-thickness:1px}
.raus-tag{
  display:inline-block;margin-left:8px;padding:1px 7px;border-radius:999px;
  border:1px solid currentColor;
  font-size:10px;font-weight:700;letter-spacing:.04em;
  vertical-align:middle;white-space:nowrap;
}

/* Warnung, wenn der Stand alt geworden ist.

   Der Totmann-Schalter gegen die unangenehmste Fehlerart: bleibt der
   naechtliche Lauf aus, meldet sich sonst NICHTS – und Schweigen sieht aus wie
   "alles gut". Hier wird das Alter der Daten sichtbar, statt still zu bleiben.
   Ruhig gehalten: es ist ein Hinweis an uns, kein Alarm fuer Besucher. */
.src-note .stand-alt{
  display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;
  border:1px solid var(--orange);color:var(--orange);
  font-size:10px;font-weight:700;white-space:nowrap;
}

/* ============ Hero: das Wappen liegt hinter allem ============
   Lucas Vorgabe vom 05.09.2026: Wappen hinter der Schrift, Vorzeile,
   Ueberschrift und Knoepfe mittig darauf – und die Transparenz betrifft NUR
   das Wappen, nicht Schrift und Knoepfe.

   Warum in der Hintergrundebene und nicht am Schriftzug: .hero-bg ist
   position:absolute ohne z-index, .hero-inner hat z-index:2 (style.css).
   Damit liegen Schrift UND Knoepfe garantiert obenauf und behalten volle
   Deckkraft – nur .hero-bg::before traegt die Transparenz. Ein Versuch, das
   Wappen an h1::before zu haengen, hat es ueber die Knoepfe gelegt. Nicht
   wiederholen.

   Warum das hier steht und nicht in style.css: home.css wird in functions.php
   nur unter is_front_page() geladen. „Unser Weg" benutzt dieselbe .hero-bg
   (page-unser-weg.php) – in style.css tauchte das Wappen dort mit auf.

   Die Bildadresse ist relativ zu DIESER Datei, und die liegt selbst in
   assets/ – also url("logo.png"), nicht url("assets/logo.png").

   Das Padding ist oben und unten gleich, damit der Textblock mittig im Wappen
   sitzt. Keine festen Pixelabstaende von oben: der Hero hat auf dem Handy ein
   anderes Padding, ein fester Wert haelt am Rechner und reisst am Telefon. */
/* ---- Bereich 1: Header, eine ganze Bildschirmseite (Luca, 06.09.2026) ----
   „Wenn man auf die Website kommt, soll als Erstes auf dem ganzen Bildschirm
   der Header sein, mit den Buttons."

   Die Bildschirmseite ist Navi PLUS Hero – die beiden sind gestalterisch ein
   einziges gruenes Feld (style.css) und die Navi steht als position:sticky IN
   der Reihe, nicht darueber. Deshalb bekommt der Hero 100svh MINUS Navihoehe;
   damit endet er exakt an der Unterkante des ersten Bildschirms, und der
   Team-Abschnitt beginnt genau dort. Mit vollen 100svh saesse er 71px zu tief
   und der zweite Abschnitt begaenne bei 971 statt bei 900.
   100vh steht als Rueckfall davor: auf dem Handy zaehlt vh die einklappbare
   Adressleiste mit, svh nicht.
   min-height, nicht height: bei einem sehr niedrigen Fenster (Handy quer)
   waechst der Hero mit dem Text, statt ihn unter overflow:hidden abzuschneiden. */
.hero{
  min-height:calc(100vh - var(--nav-h));
  min-height:calc(100svh - var(--nav-h));
  display:flex;flex-direction:column;justify-content:center;
  padding:40px 20px;                        /* war 92px 20px */
}
.hero-bg{opacity:1}                         /* war .07 – traegt jetzt nichts mehr selbst */
/* Das Wappen darf nicht mehr angeschnitten werden (Luca: „Aktuell ist es oben
   und unten etwas abgeschnitten"). Bisher war es mit 760px Breite und dem
   Verhaeltnis 1/1.0075 immer 765,7px hoch, der Hero aber nur 500 – oben und
   unten fehlten je gut 130px. Auf der ganzen Bildschirmseite passt es; damit
   es auf NIEDRIGEN Fenstern nicht wieder anschneidet, deckelt der dritte Wert
   in min() zusaetzlich ueber die Hoehe: verfuegbar sind 100svh minus Navi,
   davon 40px Luft, und durch 1.0075 geteilt ergibt das die Breite. */
.hero-bg::before{
  content:"";
  width:min(760px,120vw,calc((100vh - var(--nav-h) - 40px) / 1.0075));
  aspect-ratio:1/1.0075;                    /* logo.png ist 397x400, nicht quadratisch */
  background:url("logo.png") center/contain no-repeat;
  opacity:.15;
}
@supports (height:100svh){
  .hero-bg::before{width:min(760px,120vw,calc((100svh - var(--nav-h) - 40px) / 1.0075))}
}
/* Die Vorzeile wird creme statt orange, und das ist der Knackpunkt der ganzen
   Aenderung – gemessen 05.09.2026, nicht geschaetzt: Orange auf Waldgruen hat
   5,39:1, gefordert sind bei 13px 4,5:1. Sobald ein Bild dahinterliegt, reisst
   das: bei Deckkraft .07 nur noch 4,39:1. Mehr als .06 waere mit oranger
   Vorzeile nicht gegangen. Creme hat 10,97:1 Grundkontrast und haelt bei .15
   noch 7,10:1. Obergrenze der Deckkraft waere .20 – dort reisst „Berlin."
   (orange, grosse Schrift, Schwelle 3,0:1) mit 3,02:1. Bei .15 liegt der
   knappste Wert der Seite bei 3,49:1. */
.hero .overline{color:var(--cream)}         /* war var(--orange) */

@media (max-width:760px){
  .hero{padding:32px 16px}                  /* war 64px 16px – die Hoehe macht jetzt min-height */

  /* ---- Der leere gruene Balken oben, gedeckelt (Luca, 11.09.2026) ----
     "Zwischen dem oberen Teil und dem restlichen Inhalt nicht so ein grosser,
     gruener Balken, der inhaltslos ist."

     Gemessen bei 390 x 844: Der Hero war 779 px hoch (eine ganze
     Bildschirmseite minus Navi), der Textblock darin nur 412 – macht 184 px
     leeres Gruen ueber der Vorzeile und nochmal 184 darunter.

     WARUM GEDECKELT UND NICHT VERSCHOBEN: Der Textblock ist nicht einfach
     mittig, er sitzt MITTIG IM WAPPEN (05.09.2026). Schoebe man nur den Text
     nach oben, bliebe das Wappen stehen und der Zusammenhang waere hin. Die
     Hoehe des Kastens zu deckeln nimmt oben und unten gleich viel weg und
     laesst beide zusammen.
     184 -> 74 px Luft oben. Die Bildschirmseite bleibt dem Laptop, wo sie
     Lucas Vorgabe vom 06.09. ist; am Handy galt sie ohnehin schon fuer den
     Team-Abschnitt nicht.
     Nebenwirkung, erwuenscht: auf hohen Telefonen schaut jetzt der naechste
     Abschnitt hervor – die Seite zeigt selbst, dass es weitergeht.

     560 px ist der groessere von zwei gemessenen Werten: Textblock 412 px
     plus je 74 px Luft. Darunter wuerde es auf schmalen Geraeten eng, weil
     die Ueberschrift dort auf zwei Zeilen geht. */
  .hero{
    min-height:min(calc(100vh - var(--nav-h)),560px);
    min-height:min(calc(100svh - var(--nav-h)),560px);
  }
  /* Das Wappen muss mit dem Deckel mitgehen, sonst schneidet `overflow:hidden`
     es wieder an – genau der Fehler, der am 06.09. behoben wurde. Es ist
     dieselbe Rechnung wie oben, nur mit 560 statt der Bildschirmhoehe:
     (560 - 40 Luft) / 1.0075 = 516 px. Bei 390 px Breite greift ohnehin
     120vw = 468 und damit eine Hoehe von 471 px – das passt in 560. */
  .hero-bg::before{width:min(516px,120vw)}
}
@supports (height:100svh){
  @media (max-width:760px){
    .hero-bg::before{width:min(516px,120vw)}
  }
}

/* ===== Handy: Spielplan und Tabelle ohne Seitwaertsbewegung =====
   Stand 05.09.2026, dritte Runde nach Lucas Rueckmeldung. */
@media (max-width:760px){
  table{min-width:0}
  .table-scroll{overflow-x:visible}
  tbody td{white-space:normal}

  /* ---- SPIELPLAN ----
     Datumsspalte von 74 auf 60px: der Wochentag faellt weg und das Jahr steht
     zweistellig ("20.09.26"). Die 14px gehen an die Gegner-Spalte, damit lange
     Namen wie "BG Zehlendorf 6" neben der Pille noch Platz haben. */
  /* ---- Fuenf Spalten, und zwei davon sind fest ----
     Lucas Vorgaben vom 11.09.2026, beide zur selben Zeile:
     (1) die Heim/Ausw.-Pille gehoert an den Gegnernamen, nicht ans Ergebnis,
     (2) der Gedankenstrich soll mittig unter "ERGEBNIS" stehen statt am
         rechten Bildschirmrand.

     Der zweite Wunsch ist der, der die Bauart bestimmt: Kopfzeile und
     Datenzeilen sind ZWEI GETRENNTE RASTER (je ein <tr>). Sie stehen nur
     dann buendig untereinander, wenn die betroffene Spalte in jeder Zeile
     dieselbe Breite hat. "auto" hat das nicht geleistet – gemessen bei
     375 px: die Ergebnis-Spalte war im Kopf 89 px breit (das Wort), in der
     Zeile 16,5 px (der Strich), und der Strich landete 73 px weiter rechts
     als die Ueberschrift. Deshalb sind Datum und Ergebnis feste Breiten.

     Die freie Spalte dazwischen ist der Trick fuer den ersten Wunsch: der
     Name nimmt nur, was er braucht (max-content), die Pille sitzt direkt
     dahinter, und der UEBERSCHUSS sammelt sich in "frei" – nicht mehr
     zwischen Name und Pille. Mit `minmax(0,max-content)` darf der Name
     trotzdem schrumpfen und umbrechen, wenn es eng wird.

     Die 72 px der Ergebnis-Spalte sind der groessere von zwei gemessenen
     Werten: Endstand "88 : 88" mit W/L-Kreis = 69 px, Ueberschrift
     "ERGEBNIS" bei 11 px = 61 px. Alles darunter schneidet einen von beiden.
     Rechnung bei 375 px Fenster (341 px Inhalt):
       341 - 56 (Datum) - 16 (4 Luecken) - 38 (Pille) - 72 (Ergebnis) = 159
     Der breiteste echte Gegner braucht 167 px (CITY Basket Berlin 1 mit
     Wappen) – bei 375 px bricht er also auf zwei Zeilen um, ab 383 px nicht
     mehr. Lucas Telefon hat 390. */
  #view-spielplan thead tr,
  #view-spielplan tbody tr{
    display:grid;
    grid-template-columns:56px minmax(0,max-content) auto minmax(0,1fr) 72px;
    grid-template-areas:"datum gegner ort frei erg" "zeit gegner ort frei erg";
    align-items:center;
    column-gap:4px;
  }
  /* Die Kopfzeile ist EIN durchgehendes gruenes Band.
     Vorher trug jede Zelle ihr eigenes Gruen, und die Luecken des Rasters
     standen als creme Streifen dazwischen – am Laptop faellt das nicht auf,
     weil die Kopfzeile dort keine Rasterluecken hat. Der Grund liegt an der
     ZEILE und nicht an den Zellen, sonst waeren die Luecken wieder hell.
     (Luca, 11.09.2026: "ohne farbige Abtrennung, so wie auf dem Laptop".) */
  #view-spielplan thead tr{background:var(--green)}
  #view-spielplan thead th:nth-child(2),
  #view-spielplan thead th:nth-child(3){display:none}
  #view-spielplan thead th:nth-child(1){grid-area:datum}
  #view-spielplan thead th:nth-child(4){grid-area:gegner}
  #view-spielplan thead th:nth-child(5){grid-area:erg}

  #view-spielplan tbody td:nth-child(1){grid-area:datum;padding-bottom:0;padding-right:2px;
    line-height:1.2;font-variant-numeric:tabular-nums;font-size:12px}
  #view-spielplan .wt{display:none}   /* Wochentag nur am Laptop */
  #view-spielplan .jh{display:none}   /* Jahrhundert nur am Laptop -> "26" */
  #view-spielplan tbody td:nth-child(2){grid-area:zeit;padding-top:1px;padding-right:2px;
    font-variant-numeric:tabular-nums;color:var(--green-mute);font-size:12px}

  /* Heim/Auswaerts: nochmals kleiner. Sitzt seit 11.09.2026 direkt hinter dem
     Gegnernamen (Lucas Wunsch) – die Spalte "ort" steht dafuer im Raster
     zwischen "gegner" und der freien Spalte. `justify-self:start` haelt die
     Pille am Namen; ohne sie wuerde die Zelle ihre Spalte fuellen. */
  #view-spielplan tbody td:nth-child(3){grid-area:ort;justify-self:start;
    padding-left:0;padding-right:0}
  #view-spielplan tbody td:nth-child(3) .ha{
    font-size:8px;letter-spacing:.03em;padding:2px 5px;border-width:1px}

  #view-spielplan tbody td:nth-child(4){grid-area:gegner;line-height:1.25;padding-left:2px}
  /* .team-cell ist ein Flex-Behaelter mit nowrap (home.css Z.125) – ein
     Textknoten darin schrumpft nicht und schiebt sich ueber die Pille. */
  #view-spielplan .team-cell{
    display:grid;grid-template-columns:auto minmax(0,1fr);
    align-items:center;gap:7px;white-space:normal}
  #view-spielplan .badge{width:26px;height:26px;flex-basis:26px}

  /* Mittig in der festen Spalte, damit der Strich unter der Ueberschrift
     steht und nicht am Bildschirmrand klebt (Luca, 11.09.2026). Das Polster
     faellt weg: es verschoebe die Mitte um seine eigene Breite. */
  #view-spielplan tbody td:nth-child(5){grid-area:erg;
    display:flex;align-items:center;gap:5px;justify-content:center;white-space:nowrap;
    padding-left:0;padding-right:0}
  /* Die Ueberschrift mittig UND schmal genug fuer 72 px: 12 px mit .12em
     Sperrung braucht 89 px, 11 px mit .06em nur 61. Nur diese eine Zelle –
     "DATUM" und "GEGNER" behalten ihr Format. */
  #view-spielplan thead th:nth-child(5){text-align:center;font-size:11px;letter-spacing:.06em;
    padding-left:0;padding-right:0}
  #view-spielplan tbody td:nth-child(5) strong{order:1;font-size:14px}
  #view-spielplan tbody td:nth-child(5) .chip{order:2;margin-right:0;
    width:20px;height:20px;font-size:11px;flex:0 0 20px}
  #view-spielplan tbody td:nth-child(5) .hinweis,
  #view-spielplan tbody td:nth-child(5) .offen{order:1}
  #view-spielplan .next-tag{display:block;margin-top:2px;font-size:9px;line-height:1.1}

  #view-spielplan tbody tr{border-top:1px solid var(--green-line)}
  #view-spielplan tbody td{border-top:0}

  /* ---- TABELLE: Platz, Team, Bilanz ---- */
  #view-tabelle thead th:nth-child(3),#view-tabelle tbody td:nth-child(3),
  #view-tabelle thead th:nth-child(6),#view-tabelle tbody td:nth-child(6),
  #view-tabelle thead th:nth-child(7),#view-tabelle tbody td:nth-child(7),
  #view-tabelle thead th:nth-child(8),#view-tabelle tbody td:nth-child(8){display:none}
  #view-tabelle thead th:nth-child(4){font-size:0}
  #view-tabelle thead th:nth-child(4)::after{content:"Bilanz";font-size:11px}
  #view-tabelle thead th:nth-child(5){font-size:0}
  #view-tabelle tbody td:nth-child(4){padding-right:2px;text-align:right}
  #view-tabelle tbody td:nth-child(4)::after{content:" \2013";color:var(--green-mute)}
  #view-tabelle tbody td:nth-child(5){padding-left:2px;text-align:left}
  #view-tabelle .team-cell{
    display:grid;grid-template-columns:auto minmax(0,1fr);
    align-items:center;gap:8px;white-space:normal;line-height:1.25}
  #view-tabelle .team-cell .raus-tag{grid-column:2;justify-self:start}
  #view-tabelle tbody td:nth-child(2){padding-right:6px}
}

/* ===== Gilt auf allen Groessen =====
   Sieg gruen, Niederlage rot – derselbe Sachverhalt soll nicht je nach Geraet
   ein anderes Zeichen haben. */
:root{--loss:#A32A21}
.chip.s{background:var(--green);color:var(--cream)}
.chip.n{background:var(--loss);color:#fff;border:0}

/* Der orange Balken bedeutet ab jetzt EINE Sache: das naechste anstehende
   Spiel (Luca, 05.09.2026). Vorher trug ihn auch jeder Sieg – zwei Bedeutungen
   fuer dieselbe Markierung. Gewonnene Spiele behalten ihre helle Tönung. */
/* Gewonnene Spiele bekommen KEINE eigene Hervorhebung mehr – weder Balken
   noch Toenung (Luca, 05.09.2026). Das W im Ergebnis sagt es bereits, und die
   Toenung gehoert jetzt allein dem naechsten anstehenden Spiel. */
#view-spielplan tbody tr.win{box-shadow:none;background:transparent}
/* Die Markierungen sitzen im Grundlayout am td (home.css: tr.kommend td,
   tr.ausfall td, tr.naechstes td). Sobald tr ein Raster ist, ist jedes td eine
   eigene Spalte – der Strich erscheint dann VIERMAL quer durch die Zeile.
   Also alle am td abschalten und je einmal an die Zeile haengen. */
#view-spielplan tbody tr.kommend td,
#view-spielplan tbody tr.ausfall td,
#view-spielplan tbody tr.naechstes td{box-shadow:none}
#view-spielplan tbody tr.kommend{box-shadow:inset 3px 0 0 var(--green-line)}
#view-spielplan tbody tr.ausfall{box-shadow:inset 3px 0 0 var(--green-line)}
#view-spielplan tbody tr.naechstes{box-shadow:inset 4px 0 0 var(--orange)}

/* ============================================================================
   Bereich 3: Spiele – Spielplan und Tabelle auf EINER Bildschirmseite
   Lucas Vorgabe 06.09.2026 (t-3100, Paket 2). Derselbe Mechanismus wie bei
   #team, nicht ein zweiter danebengebauter: der Abschnitt ist eine
   Bildschirmseite, und was darin nicht passt, scrollt IN SICH – statt den
   Abschnitt wachsen zu lassen.

   ⚠️ NUR AB 901px. Am Handy gilt das ausdruecklich NICHT (Luca, 06.09.2026):
   dort steht alles in natuerlicher Hoehe untereinander, genau wie bei #team.
   Deshalb steht der ganze Block in einer min-width-Abfrage und nicht als
   Grundregel mit Handy-Ausnahme. Grund ist nicht Geschmack, sondern die
   Falle vom 06.09.: eine Medienabfrage erhoeht die Spezifitaet nicht, und
   eine Ausnahme, die frueher in der Datei steht als die Regel, ist tot.
   Dieser Block steht am DATEIENDE und gewinnt damit gegen .view/.table-scroll
   weiter oben (Z. 271–273).

   WARUM DER KASTEN WAECHST STATT GERECHNET ZU WERDEN:
   Die beiden Ansichten sind unterschiedlich hoch. Der Quellenhinweis der
   Tabelle bricht auf zwei Zeilen, der des Spielplans auf eine – gemessen bei
   1440x900: 38,4 gegen 19,2 px. Eine feste Kastenhoehe waere fuer eine der
   beiden falsch, und beim Umschalten spraenge die Seitenhoehe. Der Kasten
   nimmt deshalb, was uebrig ist (flex:1), und beide Ansichten enden exakt
   auf derselben Bildschirmseite.

   ⚠️ HIER STEHT `height` UND NICHT `min-height` – anders als bei #team, und
   das ist gemessen noetig: mit `min-height:100svh` ist die Hoehe des
   Abschnitts UNBESTIMMT (sie richtet sich nach dem Inhalt), und ein
   Flex-Kind schrumpft nur gegen eine bestimmte Hoehe. Der Kasten blieb
   damit auf voller Tabellenhoehe stehen und der Abschnitt wurde 1586 statt
   900 px hoch – kein Fehler im Browser, sondern die Regel. Erst gemessen,
   dann geaendert.
   Damit dabei nur der KASTEN nachgibt und nicht Ueberschrift, Umschalter
   oder Quellenhinweis, stehen die drei ausdruecklich auf `flex:0 0 auto`;
   der Kasten hat einen Boden von 180px. Reichte der Platz einmal nicht
   (Fenster niedriger als rund 570px bei mindestens 901px Breite), laeuft der
   Abschnitt sichtbar ueber, statt still Text abzuschneiden.
   ========================================================================== */
@media (min-width:901px){
  #spiele{
    height:100vh;                    /* Rueckfall */
    height:100svh;
    display:flex;flex-direction:column;
    /* Oben die Navi freihalten – dieselbe Rechnung wie bei #team. Die 84px
       aus style.css haetten hier zufaellig auch gereicht (Navi ist 71),
       aber "zufaellig gross genug" ist keine Zusage.

       ⚠️ GENAU var(--nav-h), NICHT WENIGER – das ist der Boden, nicht ein
       gerundeter Wert. Die Navi ist `position:sticky; top:0` und deckt beim
       Betrachten dieses Abschnitts seine obersten 71 px ab. Wer hier kuerzt,
       schiebt die Vorzeile „Saison 26/27" unter den gruenen Balken; auf dem
       Standbild faellt das kaum auf, weil beide gruen sind.
       Die frueheren +16 px sind am 06.09.2026 weggefallen (Nachtrag t-3100,
       Lucas Schritt 2: „die Ueberschrift weiter nach oben, hier brauchen wir
       nicht so viel Luft zum Team-Abschnitt"). Beim freien Durchscrollen
       waren sie sichtbare leere Creme-Flaeche zwischen dem gruenen
       Team-Abschnitt und der Vorzeile. */
    padding:var(--nav-h) 20px 40px;
  }
  /* Und der Abstand unter der Ueberschrift: 44 -> 24 px, aus demselben Grund.
     Er steht hier statt in style.css, weil er nur diesen Abschnitt betrifft –
     #start und #team teilen sich .sec-head und bleiben unveraendert. */
  #spiele .sec-head{margin-bottom:24px}
  #spiele > .wrap{display:flex;flex-direction:column;flex:1;min-height:0;width:100%}
  /* .view.active steht oben auf display:block. Hier wird daraus eine Spalte,
     damit der Kasten darin wachsen kann. */
  #spiele .view.active{display:flex;flex-direction:column;flex:1;min-height:0}
  /* Die drei festen Posten geben NICHT nach – sonst schrumpfte die
     Ueberschrift mit und ihr Text liefe aus dem Kasten. */
  #spiele .sec-head,
  #spiele .toggle-wrap,
  #spiele .src-note{flex:0 0 auto}
  /* min-height:0 ist der Punkt, an dem es ohne sie scheitert: ein Flex-Kind
     schrumpft sonst nie unter seine Inhaltshoehe, und der Kasten schoebe die
     Bildschirmseite auf. Der Boden von 180px verhindert das Gegenteil – ein
     auf null geschrumpfter Kasten waere unbedienbar. */
  #spiele .table-scroll{flex:1;min-height:180px;overflow-y:auto}

  /* ---- Schritt 3: die Zeile selbst niedriger ----
     Lucas Reihenfolge vom 06.09.2026 abends: erst den Quellenhinweis weg,
     dann die Ueberschrift hoch – und NUR WENN DAS NICHT REICHT, Wappen und
     Polster kleiner. Es hat nicht gereicht, gemessen:

       Ausgangslage        Kasten 506 px · 10 Zeilen + Kopf 633,2 px · 7 sichtbar
       + Quellenhinweis weg      560 px                              · 8 sichtbar
       + Ueberschrift hoch       596 px                              · 9 sichtbar
       -> es fehlten noch 37 px.

     Die Zeilenhoehe haengt am Wappen, nicht an der Schrift:
       34 (Wappen) + 2x12 (Polster) + 1 (Linie) = 59 px
       26 (Wappen) + 2x 8 (Polster) + 1 (Linie) = 43 px
     10 x 43 + 43,7 (Kopf, unveraendert) = 473,7 px in einem 596-px-Kasten.

     WARUM BEIDE HAELFTEN UND NICHT NUR DAS POLSTER: eine der beiden allein
     ergibt 51 px Zeilenhoehe und braucht damit eine Fensterhoehe von 856 px.
     Lucas Fensterhoehe laesst sich aus seiner Beobachtung ausrechnen – „ich
     sehe nur 7" heisst bei 59-px-Zeilen 849 bis 908 px. Die halbe Massnahme
     laege also genau auf der Kippe. Mit beiden Haelften reichen 776 px, und
     das haelt auch einen echten Laptop aus, wo Browserleiste und Lesezeichen
     rund 100 px vom Bildschirm abziehen.

     NUR AB 901px, wie der ganze Block. Am Handy bleiben Wappen und Polster,
     wie sie sind – dort ist die Bildschirmseite nicht gewollt, und die
     0-px-Ueberstand-Messungen aus t-3094 sind an den heutigen Massen
     abgenommen.
     Beide Ansichten, nicht nur die Tabelle: derselbe Wappenkreis in
     Spielplan und Tabelle, der beim Umschalten die Groesse wechselt, saehe
     nach Versehen aus. Der Spielplan gewinnt dabei nebenbei Zeilen. */
  #spiele .badge{width:26px;height:26px;flex:0 0 26px}
  #spiele tbody td{padding:8px 14px}

  /* ---- Die Kopfzeile bleibt beim Scrollen stehen ----
     Erst seit t-3100 ueberhaupt ein Thema: vorher gab es keinen Scrollbereich,
     also auch nichts, was wegscrollen konnte. Im Spielplan rutschen 20 Spiele
     durch einen 596-px-Kasten, und ohne diese zwei Zeilen steht man nach
     einer Handbewegung vor Spalten ohne Beschriftung („was ist die dritte
     Zahl?"). Von Luca am 06.09.2026 ausdruecklich freigegeben.

     `top:0` bezieht sich auf den Scroll-BEHAELTER (.table-scroll), nicht auf
     das Fenster – deshalb klebt die Zeile am Kasten und nicht unter der Navi.
     Der gruene Grund von thead th ist deckend; ohne ihn schienen die Zeilen
     durch. z-index:1, damit die Zeilen darunter durchlaufen und nicht darueber.

     Am `th` und nicht am `tr`: `position:sticky` an einer Tabellenzeile
     ignorieren aeltere WebKit-Fassungen, an der Zelle greift es ueberall.

     NUR ab 901px, wie der ganze Block. Am Handy scrollt der Kasten nicht in
     sich, sondern die Seite – eine klebende Zelle wuerde sich dort am FENSTER
     festmachen und unter der Navi kleben bleiben. Der Handy-Stand ist
     abgenommen (t-3094) und bleibt unberuehrt. */
  #spiele thead th{position:sticky;top:0;z-index:1}

  /* ---- Die weiche Kante unten ----
     Sie soll sagen "hier kommt noch etwas" – und darf deshalb nicht
     dastehen, wenn nichts mehr kommt. Kein Skript noetig, das erledigen
     zwei Hintergrundebenen mit unterschiedlicher Verankerung:

       Kante  (background-attachment: scroll) klebt am KASTEN und sitzt
              immer an seiner Unterkante.
       Deckel (background-attachment: local)  faehrt mit dem INHALT und
              sitzt an dessen Ende.

     Solange man scrollen kann, steht der Deckel weiter unten ausserhalb des
     Sichtfelds und die Kante ist zu sehen. Am Ende angekommen liegen beide
     uebereinander – und weil der Deckel in der Liste ZUERST steht, wird er
     zuoberst gemalt und loescht die Kante. Passt der Inhalt ganz hinein,
     passiert dasselbe von Anfang an. Die Kante hebt sich also selbst auf,
     genau wie die beiden Ausblendregeln in home.js.

     ⚠️ SIE LIEGT HINTER DEM TEXT, nicht darueber – das ist der ganze Grund
     fuer diese Bauart. Eine Uebermalung (mask-image, ::after mit Verlauf)
     haette die unterste Zeile ausgeblichen; Lucas Bedingung war, dass keine
     Zeile unlesbar wird. So ist die Kante messbar statt Geschmackssache.

     WARUM .07 UND NICHT MEHR – nachgerechnet ueber alle Grundfarben, die im
     Kasten wirklich vorkommen, mit der schwaechsten Textfarbe (--green-mute):
       Kante auf --card:                         .07 -> 4,86:1
       Kante auf --card PLUS Zeilentoenung       .07 -> 4,64:1
       (--win-bg der Zeile "naechstes Spiel")    .10 -> 4,51:1   (zu knapp)
     Gefordert sind 4,5:1. Der Engpass ist NICHT die Kante allein, sondern die
     Kante unter der getoenten Zeile – das faellt nur auf, wenn man beide
     zusammen rechnet. Wer .07 erhoeht, muss diese Kombination neu messen:
     werkzeug/kontrast-flaeche.js rechnet sie mit (jeder Verlaufsstopp gegen
     jede Zeilenfarbe, schlechtester Wert gewinnt).
     Dafuer ist der Verlauf laenger (56px statt 42), damit die Kante trotz des
     schwaecheren Tons als weicher Uebergang und nicht als Kante liest. */
  #spiele .table-scroll{
    background-color:var(--card);
    background-image:
      linear-gradient(to top, var(--card), var(--card)),          /* Deckel */
      linear-gradient(to top, rgba(0,60,46,.07), rgba(0,60,46,0)); /* Kante  */
    background-repeat:no-repeat,no-repeat;
    background-position:bottom,bottom;
    background-size:100% 56px,100% 56px;
    background-attachment:local,scroll;
  }
}

/* „Gegner steht noch nicht fest" statt des Portal-Platzhalters (home.js).
   Gilt auf ALLEN Groessen – der Platzhalter ist am Handy genauso falsch.
   Eigene Klasse, weil .team-cell ein Flex-Behaelter mit `nowrap` ist: ein
   Textknoten darin schrumpft nicht, und eine Breite, die sich beim
   Verschmaelern nicht bewegt, ist eine Sperre und kein Layout (t-3094).
   Hier darf der Text deshalb ausdruecklich umbrechen. */
.team-cell.kein-gegner{white-space:normal;color:var(--green-mute);font-style:italic}