/* Nur was diese Seite zusaetzlich braucht. Farben, Schriften und .panel kommen aus
   styles.css, damit die Vereinsseite nicht neben dem Rest der Website steht. */
.vkopf{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-end;justify-content:space-between;margin:14px 0 6px}
.vkopf h1{font-size:clamp(30px,4.6vw,50px)}
.vmeta{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}
.vchip{font-family:var(--mono);font-size:11px;letter-spacing:.04em;padding:5px 10px;border-radius:99px;
  border:1px solid var(--line);background:var(--glass);color:var(--muted)}
.vchip b{color:var(--ink);font-weight:700}
.velo{text-align:right;font-family:var(--mono);line-height:1.1}
.velo .v{font-size:clamp(34px,5vw,54px);font-weight:700;color:var(--cyan)}
.velo .l{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:5px}
.velo .d{font-size:12px;margin-top:4px}
.up{color:var(--win)}.down{color:var(--loss)}.flat{color:var(--faint)}
.vkacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px;margin:20px 0 8px}
.vk{padding:14px 15px}
.vk .l{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.vk .v{font-family:var(--mono);font-size:22px;font-weight:700;color:var(--ink)}
.vk .s{font-size:11.5px;color:var(--muted);margin-top:3px}
.vgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
@media(max-width:900px){.vgrid{grid-template-columns:1fr}}
.vsec{padding:4px 0 6px}
.vsec h2{font-size:16px;padding:14px 16px 10px;border-bottom:1px solid var(--line-2)}
.vtab{width:100%;border-collapse:collapse;font-size:13.5px;table-layout:fixed}
.vtab th,.vtab td{padding:8px 14px;text-align:right;border-bottom:1px solid var(--line-2)}
/* Feste Breiten, sonst verteilen sich Gesamt, Heim und Auswaerts ueber die ganze
   Tabellenbreite und stehen einzeln in der Landschaft. */
.vtab th:not(:first-child),.vtab td:not(:first-child){width:104px}
.vtab td:first-child{overflow:hidden;text-overflow:ellipsis}
.vtab th:first-child,.vtab td:first-child{text-align:left}
/* 2026-09-30 (Enrico): eine Stufe groesser und in der Markenfarbe. Die Kopfzeile
   stand auf --faint (#5C6677) und 10 Pixel, also am unteren Rand der Lesbarkeit:
   2,7 zu 1 Kontrast, die Grenze fuer Text liegt bei 4,5. Das Tuerkis des Logos
   (#5EEAD4, der Anfang des Verlaufs nach #A78BFA) liegt bei 10,5 zu 1. */
.vtab thead th{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#5EEAD4}
.vtab tbody td{font-family:var(--mono)}
.vtab tbody td:first-child{font-family:var(--sans);color:var(--muted)}
.vtab tr:last-child td{border-bottom:0}
.vtab tr.ich td{background:color-mix(in srgb,var(--cyan) 9%,transparent);color:var(--ink)}
.vtab tr.ich td:first-child{box-shadow:inset 3px 0 0 var(--cyan);color:var(--ink);font-weight:600}
.vzeile{display:flex;gap:12px;align-items:center;padding:9px 16px;border-bottom:1px solid var(--line-2);
  color:inherit;text-decoration:none}
.vzeile:last-child{border-bottom:0}
.vzeile:hover{background:color-mix(in srgb,var(--cyan) 5%,transparent)}
.vzeile .dt{font-family:var(--mono);font-size:11px;color:var(--muted);flex:none;width:86px}
.vzeile .pa{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vzeile .er{font-family:var(--mono);font-weight:700;flex:none}
.vform{display:inline-flex;gap:4px;vertical-align:middle}
.vform i{font-style:normal;font-family:var(--mono);font-size:10px;font-weight:700;width:17px;height:17px;
  border-radius:4px;display:inline-flex;align-items:center;justify-content:center}
.vform .W{background:color-mix(in srgb,var(--win) 22%,transparent);color:var(--win)}
.vform .D{background:color-mix(in srgb,var(--faint) 20%,transparent);color:var(--muted)}
.vform .L{background:color-mix(in srgb,var(--loss) 20%,transparent);color:var(--loss)}
.vbrot{font-size:12px;color:var(--faint);margin:16px 0 0}
.vbrot a{color:var(--muted);text-decoration:none}.vbrot a:hover{color:var(--cyan)}
/* Das letzte Feld stiess ohne Abstand an das App-Band darunter. */
main .wrap{padding-bottom:40px}
/* Das Fakten-Overlay. Ohne JavaScript bedienbar (:target), damit es auch dann aufgeht,
   wenn ein Skript klemmt - und damit der Inhalt ohnehin im Quelltext steht. */
.vov{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;padding:18px;
  background:rgba(5,7,14,.82);backdrop-filter:blur(6px)}
.vov:target{display:flex}
.vov-box{max-width:620px;width:100%;max-height:86vh;overflow:auto;border:1px solid var(--line);
  border-radius:var(--r);background:linear-gradient(180deg,var(--panel),var(--panel-2));box-shadow:0 30px 80px rgba(0,0,0,.6)}
.vov-kopf{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 20px 14px;border-bottom:1px solid var(--line-2)}
.vov-kopf h3{font-size:19px}
.vov-zu{font-family:var(--mono);font-size:20px;line-height:1;color:var(--faint);text-decoration:none;padding:4px 8px}
.vov-zu:hover{color:var(--ink)}
.vov-f{display:flex;justify-content:space-between;gap:16px;padding:12px 20px;border-bottom:1px solid var(--line-2);font-size:13.5px}
.vov-f:last-child{border-bottom:0}
.vov-f b{color:var(--muted);font-weight:500;flex:none}
.vov-f span{text-align:right;font-family:var(--mono);color:var(--ink)}
.vknopf{display:inline-block;margin-top:12px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  padding:8px 14px;border-radius:99px;border:1px solid var(--cyan);color:var(--cyan);text-decoration:none}
.vknopf:hover{background:color-mix(in srgb,var(--cyan) 12%,transparent)}
/* Reiter ohne JavaScript: die Radioknoepfe stehen versteckt vor den Flaechen, die
   Beschriftungen daneben, und ein :checked schaltet ueber ~ die zugehoerige Flaeche
   sichtbar. Der Inhalt ALLER Reiter steht im Quelltext, auch der geschlossenen. */
.hist-wrap{overflow-x:auto;margin:0 -16px;padding:0 16px}
/* FESTE SPALTENBREITEN. Enrico: "Die Zahlen sollten feste Positionen haben, sie
   springen beim Laden hin und her." Ohne sie verteilt der Browser neun Spalten nach
   Inhalt, und sobald die Schrift nachgeladen ist, sitzt alles woanders. Ausserdem
   brach "134 · 31 · 25" auf zwei Zeilen um und schob die Zeile auseinander.
   Summe der Breiten = min-width, damit nichts gequetscht wird. */
.vtab.hist{table-layout:fixed;min-width:884px}
.vtab.hist td,.vtab.hist th{white-space:nowrap}
.vtab.hist col.c1{width:158px}.vtab.hist col.c2{width:66px}
.vtab.hist col.c3{width:120px}.vtab.hist col.c4{width:108px}
.vtab.hist col.c5{width:92px}.vtab.hist col.c6{width:72px}
.vtab.hist col.c7{width:90px}.vtab.hist col.c8{width:90px}
.vtab.hist col.c9{width:88px}
.vtab.hist tr.hist-mit td{background:color-mix(in srgb,var(--cyan) 7%,transparent);
  color:var(--ink);font-weight:600}
.vtab.hist tr.hist-mit td:first-child{color:var(--ink)}
.hist-jetzt{margin-left:9px;color:var(--cyan);font-family:var(--sans);font-size:12px}
.hb{display:flex;width:104px;height:7px;border-radius:4px;overflow:hidden;
  background:var(--panel-3);margin-left:auto}
.hb i{width:var(--w);background:var(--cyan)}
.hb b{width:var(--w);background:var(--panel-3);filter:brightness(1.5)}
.hb u{width:var(--w);background:#A78BFA}
.hist-s{color:var(--muted)}
thead th.hist-s{color:var(--muted)}
/* Ein Fakt = EINE Zeile. Label links, Wert und Zusammenhang rechts. Dieselbe Hoehe
   je Zeile wie in der Tabelle links, damit der Kasten nicht laenger wird als sie. */
/* DIESER KASTEN FOLGT DEM NACHBARN, nicht einer eigenen Erfindung.
   Der Kasten "Tore je Spiel" darueber ist genauso aufgebaut: .vsec h2 als Kopf mit
   padding 14px 16px 10px, darunter ein Container mit padding 4px 16px 14px, darin
   Zeilen im Raster mit Beschriftung in 12,5px --muted.

   Meine erste Fassung hatte kein waagerechtes Polster, deshalb klebten die Label am
   Rand, und sie setzte die Beschriftung in Versalien, Monospace und Tuerkis - direkt
   unter einem Kasten, der dafuer normale Schrift in Grau benutzt. Zwei Sprachen
   uebereinander. In der Tabelle links stehen die Zeilenbeschriftungen ebenfalls in
   --sans und --muted; Tuerkis und Versalien sind dort dem TABELLENKOPF vorbehalten. */
.fk-git{padding:4px 16px 14px}
.fk{display:grid;grid-template-columns:minmax(0,1fr) 62px minmax(0,1.15fr);
  gap:0 14px;align-items:baseline;padding:8px 0}
.fk-t{font-size:12.5px;color:var(--muted);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fk-r{display:contents}
.fk-r b{font-size:14px;font-weight:600;color:var(--ink);text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.fk-r i{font-style:normal;font-size:12.5px;color:var(--muted);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:520px){
  .fk{grid-template-columns:minmax(0,1fr) auto;gap:2px 10px}
  .fk-t{grid-column:1/-1}
  .fk-r b{text-align:left}
}
.vtabs{margin-top:20px}
.vtabs>input{position:absolute;opacity:0;width:0;height:0}
.vnav{display:flex;flex-wrap:wrap;gap:6px;border-bottom:1px solid var(--line);margin-bottom:14px}
.vnav label{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;padding:10px 15px;
  cursor:pointer;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.vnav label:hover{color:var(--ink)}
.vpane{display:none}
#vt1:checked~.vnav label[for=vt1],#vt2:checked~.vnav label[for=vt2],#vt3:checked~.vnav label[for=vt3],#vt4:checked~.vnav label[for=vt4],#vt5:checked~.vnav label[for=vt5],#vt6:checked~.vnav label[for=vt6],#vt7:checked~.vnav label[for=vt7],#vt8:checked~.vnav label[for=vt8],#vt9:checked~.vnav label[for=vt9],#vt10:checked~.vnav label[for=vt10]{color:var(--cyan);border-bottom-color:var(--cyan)}
#vt1:checked~.vpanes>.p1,#vt2:checked~.vpanes>.p2,#vt3:checked~.vpanes>.p3,#vt4:checked~.vpanes>.p4,#vt5:checked~.vpanes>.p5,#vt6:checked~.vpanes>.p6,#vt7:checked~.vpanes>.p7,#vt8:checked~.vpanes>.p8,#vt9:checked~.vpanes>.p9,#vt10:checked~.vpanes>.p10{display:block}
/* Bilanzbalken: Siege, Remis, Niederlagen als ein Streifen. Die Breiten stehen im
   Stil-Attribut, weil sie je Verein verschieden sind. */
/* Zwei Spalten im Stats-Reiter. */
.vgrid2{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:14px;
  align-items:start}
.vsp{display:flex;flex-direction:column;gap:14px;min-width:0}
@media(max-width:900px){.vgrid2{grid-template-columns:minmax(0,1fr)}}
/* Bilanz: eine Zeile. Die Punkte gross, daneben die Kette und zwei Zeilen Text. */
.vbil-in{display:flex;align-items:center;gap:18px;padding:14px 16px 16px;flex-wrap:wrap}
.vbil-p{flex:none;text-align:center;padding-right:18px;border-right:1px solid var(--line-2)}
.vbil-p b{display:block;font-family:var(--mono);font-size:34px;font-weight:700;line-height:1;
  background:linear-gradient(135deg,#5EEAD4,#A78BFA);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.vbil-p span{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);margin-top:6px}
.vbil-r{min-width:0}
.vbil-k{display:flex;gap:4px;margin-bottom:8px}
.vbil-k i{font-style:normal;font-family:var(--mono);font-size:10px;font-weight:700;
  width:19px;height:19px;border-radius:4px;display:inline-flex;align-items:center;
  justify-content:center}
.vbil-k .W{background:color-mix(in srgb,var(--win) 24%,transparent);color:var(--win)}
.vbil-k .D{background:rgba(255,255,255,.07);color:var(--muted)}
.vbil-k .L{background:color-mix(in srgb,var(--amber) 24%,transparent);color:var(--amber)}
.vbil-s2{font-size:12px;color:var(--muted);line-height:1.7}
/* Tore je Spiel: eine Zeile je Bereich, die Zahlen IM Balken. Dieselbe Form wie die
   Fuellbalken der Tabelle - Beschriftung links, alles andere im Balken. */
.tz-w{padding:4px 16px 14px}
.tz{display:grid;grid-template-columns:78px minmax(0,1fr);gap:12px;align-items:center;
  padding:8px 0}
.tz-n{font-size:12.5px;color:var(--muted)}
.tz-b{position:relative;display:block;height:26px;border-radius:5px;overflow:hidden;
  background:rgba(255,255,255,.045)}
.tz-b b{display:block;height:100%;border-radius:5px 0 0 5px;
  background:linear-gradient(90deg,#5EEAD4 0%,#82BAE7 52%,#A78BFA 100%)}
.tz-b u{position:absolute;left:9px;top:0;line-height:26px;text-decoration:none;
  font-family:var(--mono);font-size:12px;font-weight:700;color:#05121B}
.tz-b em{position:absolute;right:9px;top:0;line-height:26px;font-style:normal;
  font-family:var(--mono);font-size:12px;font-weight:700;color:var(--muted)}
.vbrot{font-size:12px;color:var(--faint);margin:16px 0 0}
.vbrot a{color:var(--muted);text-decoration:none}.vbrot a:hover{color:var(--cyan)}
/* Das letzte Feld stiess ohne Abstand an das App-Band darunter. */
main .wrap{padding-bottom:40px}
/* Das Fakten-Overlay. Ohne JavaScript bedienbar (:target), damit es auch dann aufgeht,
   wenn ein Skript klemmt - und damit der Inhalt ohnehin im Quelltext steht. */
.vov{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;padding:18px;
  background:rgba(5,7,14,.82);backdrop-filter:blur(6px)}
.vov:target{display:flex}
.vov-box{max-width:620px;width:100%;max-height:86vh;overflow:auto;border:1px solid var(--line);
  border-radius:var(--r);background:linear-gradient(180deg,var(--panel),var(--panel-2));box-shadow:0 30px 80px rgba(0,0,0,.6)}
.vov-kopf{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 20px 14px;border-bottom:1px solid var(--line-2)}
.vov-kopf h3{font-size:19px}
.vov-zu{font-family:var(--mono);font-size:20px;line-height:1;color:var(--faint);text-decoration:none;padding:4px 8px}
.vov-zu:hover{color:var(--ink)}
.vov-f{display:flex;justify-content:space-between;gap:16px;padding:12px 20px;border-bottom:1px solid var(--line-2);font-size:13.5px}
.vov-f:last-child{border-bottom:0}
.vov-f b{color:var(--muted);font-weight:500;flex:none}
.vov-f span{text-align:right;font-family:var(--mono);color:var(--ink)}
.vknopf{display:inline-block;margin-top:12px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  padding:8px 14px;border-radius:99px;border:1px solid var(--cyan);color:var(--cyan);text-decoration:none}
.vknopf:hover{background:color-mix(in srgb,var(--cyan) 12%,transparent)}
/* Reiter ohne JavaScript: die Radioknoepfe stehen versteckt vor den Flaechen, die
   Beschriftungen daneben, und ein :checked schaltet ueber ~ die zugehoerige Flaeche
   sichtbar. Der Inhalt ALLER Reiter steht im Quelltext, auch der geschlossenen. */
.hist-wrap{overflow-x:auto;margin:0 -16px;padding:0 16px}
/* FESTE SPALTENBREITEN. Enrico: "Die Zahlen sollten feste Positionen haben, sie
   springen beim Laden hin und her." Ohne sie verteilt der Browser neun Spalten nach
   Inhalt, und sobald die Schrift nachgeladen ist, sitzt alles woanders. Ausserdem
   brach "134 · 31 · 25" auf zwei Zeilen um und schob die Zeile auseinander.
   Summe der Breiten = min-width, damit nichts gequetscht wird. */
.vtab.hist{table-layout:fixed;min-width:884px}
.vtab.hist td,.vtab.hist th{white-space:nowrap}
.vtab.hist col.c1{width:158px}.vtab.hist col.c2{width:66px}
.vtab.hist col.c3{width:120px}.vtab.hist col.c4{width:108px}
.vtab.hist col.c5{width:92px}.vtab.hist col.c6{width:72px}
.vtab.hist col.c7{width:90px}.vtab.hist col.c8{width:90px}
.vtab.hist col.c9{width:88px}
.vtab.hist tr.hist-mit td{background:color-mix(in srgb,var(--cyan) 7%,transparent);
  color:var(--ink);font-weight:600}
.vtab.hist tr.hist-mit td:first-child{color:var(--ink)}
.hist-jetzt{margin-left:9px;color:var(--cyan);font-family:var(--sans);font-size:12px}
.hb{display:flex;width:104px;height:7px;border-radius:4px;overflow:hidden;
  background:var(--panel-3);margin-left:auto}
.hb i{width:var(--w);background:var(--cyan)}
.hb b{width:var(--w);background:var(--panel-3);filter:brightness(1.5)}
.hb u{width:var(--w);background:#A78BFA}
.hist-s{color:var(--muted)}
thead th.hist-s{color:var(--muted)}
/* Ein Fakt = EINE Zeile. Label links, Wert und Zusammenhang rechts. Dieselbe Hoehe
   je Zeile wie in der Tabelle links, damit der Kasten nicht laenger wird als sie. */
/* DIESER KASTEN FOLGT DEM NACHBARN, nicht einer eigenen Erfindung.
   Der Kasten "Tore je Spiel" darueber ist genauso aufgebaut: .vsec h2 als Kopf mit
   padding 14px 16px 10px, darunter ein Container mit padding 4px 16px 14px, darin
   Zeilen im Raster mit Beschriftung in 12,5px --muted.

   Meine erste Fassung hatte kein waagerechtes Polster, deshalb klebten die Label am
   Rand, und sie setzte die Beschriftung in Versalien, Monospace und Tuerkis - direkt
   unter einem Kasten, der dafuer normale Schrift in Grau benutzt. Zwei Sprachen
   uebereinander. In der Tabelle links stehen die Zeilenbeschriftungen ebenfalls in
   --sans und --muted; Tuerkis und Versalien sind dort dem TABELLENKOPF vorbehalten. */
.fk-git{padding:4px 16px 14px}
.fk{display:grid;grid-template-columns:minmax(0,1fr) 62px minmax(0,1.15fr);
  gap:0 14px;align-items:baseline;padding:8px 0}
.fk-t{font-size:12.5px;color:var(--muted);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fk-r{display:contents}
.fk-r b{font-size:14px;font-weight:600;color:var(--ink);text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.fk-r i{font-style:normal;font-size:12.5px;color:var(--muted);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:520px){
  .fk{grid-template-columns:minmax(0,1fr) auto;gap:2px 10px}
  .fk-t{grid-column:1/-1}
  .fk-r b{text-align:left}
}
/* Ein Fuellbalken statt eines farbigen Blocks. Die Laenge ist der Wert, der Verlauf
   ist die Marke. Wichtig: der Verlauf ist ueber die VOLLE Breite gespannt und wird
   beschnitten, nicht gestaucht - sonst saehe jeder Balken gleich aus und nur die Laenge
   sagte etwas. So reicht ein hoher Wert bis ins Violett, ein niedriger bleibt tuerkis. */
.fb{position:relative;display:block;width:100%;min-width:72px;height:22px;
  border-radius:5px;overflow:hidden;background:rgba(255,255,255,.045)}
.fb>i{position:absolute;inset:0;display:block;
  background:linear-gradient(90deg,#5EEAD4 0%,#82BAE7 52%,#A78BFA 100%);
  opacity:.75;clip-path:inset(0 calc(100% - var(--w,0%)) 0 0)}
.fb>u{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;
  padding-right:8px;text-decoration:none;font-family:var(--mono);font-size:11px;
  font-weight:700;color:var(--ink);text-shadow:0 1px 3px rgba(5,7,14,.75)}
.fb-leer{display:block;height:22px;border-radius:5px;background:rgba(255,255,255,.03);
  color:var(--faint);font-family:var(--mono);font-size:11px;text-align:center;line-height:22px}
/* Violett traegt die Gliederung. Es steht im Logo und kam auf der Seite nicht vor. */
.vtab tr.abschnitt td{color:var(--violet-2)}
.vtab tr.abschnitt td::before{content:"";display:inline-block;width:3px;height:10px;
  border-radius:2px;background:var(--violet);margin-right:8px;vertical-align:-1px}
.kgrp{color:var(--violet-2)}
.kgrp::before{content:"";display:inline-block;width:3px;height:9px;border-radius:2px;
  background:var(--violet);margin-right:7px;vertical-align:-1px}
/* Der ELO-Wert traegt den Logoverlauf. Er ist die wichtigste Zahl der Seite und war
   bisher dasselbe Cyan wie jede Ueberschrift. */
.velo .v{background:linear-gradient(135deg,#5EEAD4,#A78BFA);-webkit-background-clip:text;
  background-clip:text;color:transparent}
/* Wechselnde Zeilen. Eine Liste mit vierzig gleich hellen Zeilen liest sich wie eine
   Wand, auch wenn jede einzelne sauber ist. */
.kz:nth-child(even){background:rgba(255,255,255,.014)}
.vtab tbody tr:nth-child(even) td{background:rgba(255,255,255,.012)}
.vtab tr.abschnitt td,.vtab tr.ich td{background:none}
/* Abschnitte statt einer Wand aus dreizehn gleichen Zeilen. */
.vtab tr.abschnitt td{padding-top:15px;padding-bottom:6px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--cyan)}
.h2n{font-family:var(--mono);font-size:11px;font-weight:400;color:var(--faint);
  letter-spacing:.06em;margin-left:9px}
/* ---- Kader. Master und Detail: links die Liste, rechts die Werte des gewaehlten
   Spielers. Vorher klappte jeder Spieler unter sich auf und schob die Liste
   auseinander - bei vierzig Spielern war die Liste danach nicht mehr ueberschaubar.
   Ohne JavaScript, ueber Radioknoepfe und Geschwisterselektoren (siehe kader_regeln). */
/* Drei freistehende Felder mit Abstand dazwischen statt eines Kastens mit Trennlinie.
   Ein Kasten, der ueber die ganze Breite laeuft, wirkt wie ein Formular; drei Felder mit
   Luft dazwischen wirken wie eine Seite. */
.kader{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:14px;
  align-items:start;margin-top:14px}
.kfeld{border-radius:var(--r);overflow:hidden}
/* Kopffeld. Ein Feld, in dem nur "Kader" steht, waere ein leerer Balken - deshalb
   traegt es die Zahlen, die sich aus dem Kader selbst ergeben. */
.kkopf-feld{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:16px;padding:16px 20px}
.kkopf-t h2{font-size:19px;padding:0;border:0}
.kkopf-t span{display:block;font-family:var(--mono);font-size:10.5px;color:var(--faint);
  margin-top:4px}
.kkopf-z{display:flex;flex-wrap:wrap;gap:10px}
.kkopf-z>div{min-width:78px;padding:8px 13px;border-radius:var(--r-s);
  border:1px solid var(--line-2);background:var(--glass);text-align:right}
.kkopf-z span{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--faint);margin-bottom:3px}
.kkopf-z b{font-family:var(--mono);font-size:16px;font-weight:700;color:var(--ink)}
.kader>input{position:absolute;opacity:0;width:0;height:0}
.kliste{min-width:0}
.kdetail{min-width:0}
.kliste{font-size:12px}
.kz{display:grid;grid-template-columns:minmax(0,1fr) 46px 74px 38px 62px 46px 16px;
  gap:18px;align-items:center;padding:7px 16px;border-bottom:1px solid var(--line-2);
  cursor:pointer}
/* Kopfzeile der Liste. Ohne sie waeren drei Zahlenspalten ohne Bedeutung. */
.kzk{cursor:default;font-family:var(--mono);font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);padding-top:9px;padding-bottom:5px;
  border-bottom:1px solid var(--line)}
.kzk:hover{background:none}
.kzk .nm{font-family:var(--mono)}
.kz .tg,.kz .vg{color:var(--muted)}
.kz{transition:background .14s ease,box-shadow .14s ease}
.kz:hover{background:color-mix(in srgb,var(--cyan) 6%,transparent)}
.kz .pf{transition:transform .16s ease,color .16s ease}
.kz:hover .pf{transform:translateX(3px)}
.kz .zl{text-align:right;font-family:var(--mono)}
.kz.still{opacity:.45}
.kz .nm{min-width:0;line-height:1.25}
.kz .nm b{font-weight:600;display:block;font-size:12.5px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.kz .nm em{font-style:normal;display:block;font-size:10px;color:var(--faint);
  font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Der Winkel sagt dem Benutzer, dass die Zeile etwas tut. Ohne ihn sieht eine Liste
   aus wie eine Tabelle, und niemand klickt auf eine Tabelle. */
.kz .pf{font-family:var(--mono);color:var(--faint);text-align:right;font-size:13px}
.kz:hover .pf{color:var(--cyan)}
.kgrp{padding:12px 14px 4px;border-bottom:1px solid var(--line);font-family:var(--mono);
  font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--cyan)}
.kgrp em{font-style:normal;color:var(--faint);margin-left:7px}
.kap{font-family:var(--mono);font-size:9px;background:var(--amber);color:#05070E;
  border-radius:3px;padding:1px 4px;vertical-align:middle;margin-left:5px}
.verl{font-size:10px;color:var(--loss);margin-left:6px;font-family:var(--mono)}
.kz .min{position:relative}
/* Auch die Spielzeit folgt der Skala: wer wenig spielt, bleibt tuerkis, die Stammelf
   reicht ins Violett. Dafuer liegt der Verlauf ueber die ganze Spalte und wird
   beschnitten, nicht gestaucht. */
.kz .min i{position:absolute;left:0;right:0;bottom:-3px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,#5EEAD4 0%,#82BAE7 52%,#A78BFA 100%);
  clip-path:inset(0 calc(100% - var(--w,0%)) 0 0)}
.kz .min u{text-decoration:none}
/* Rechts. Die Spalte selbst ist LEER - nur die Karte hat Hintergrund. Vorher lief der
   Panel-Hintergrund bis zum unteren Rand durch, und unter den acht Werten eines Torwarts
   stand eine handhohe tote Flaeche. Genau das sah "statisch und tot" aus. */
.kdetail{position:sticky;top:14px;align-self:start;background:none}
.kd{display:none}
.kd-karte,.kd{border-radius:var(--r)}
.kader .kdetail .kd{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  box-shadow:0 18px 44px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.02)}
.kd-kopf{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:15px 17px 13px;border-bottom:1px solid var(--line);
  background:linear-gradient(118deg,rgba(94,234,212,.11) 0%,rgba(167,139,250,.10) 46%,transparent 78%)}
.kd-nm{min-width:0}
.kd-nm b{display:block;font-family:var(--disp);font-size:19px;letter-spacing:-.015em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kd-nm span{display:block;font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-top:3px}
.kd-note{flex:none;text-align:center;font-family:var(--mono);line-height:1.05}
.kd-note>span{display:block;font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);margin-top:4px}
.kd-note .no-gut,.kd-note .no-mittel,.kd-note .no-schwach,.kd-note .no-{font-size:25px;font-weight:700}
/* Vier Kennzahlen gross ganz oben. Das Auge faellt auf Zahlen, nicht auf Zeilen. */
.kd-oben{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-2);
  border-bottom:1px solid var(--line)}
.kd-k{background:var(--panel);padding:11px 8px;text-align:center}
.kd-k span{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);margin-bottom:4px}
.kd-k b{font-family:var(--mono);font-size:19px;font-weight:700;
  background:linear-gradient(135deg,#5EEAD4,#A78BFA);-webkit-background-clip:text;
  background-clip:text;color:transparent}
/* Wo ein Wert eine Quote IST, liegt ein Balken hinter der Zeile. Aus "24 von 35" wird
   damit etwas, das man sieht statt liest. */
/* ZWEI Spalten, und in jeder steht die Beschriftung UEBER dem Wert. Vorher lag beides
   an den gegenueberliegenden Enden einer sechshundert Pixel breiten Zeile - das Auge
   musste die Strecke ueberbruecken und verlor dabei die Zeile. Jetzt gibt es keine
   Strecke, und die Karte ist halb so hoch. */
.kd-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--line-2)}
.kd-z{position:relative;padding:8px 15px 9px;background:var(--panel)}
/* Der Verlauf liegt ueber die VOLLE Breite und wird auf den Wert beschnitten. Waere er
   auf die Balkenbreite gestaucht, saehe jeder Balken gleich aus und die Farbe hiesse
   nichts - 30 % und 90 % waeren nicht zu unterscheiden. */
.kd-z>i{position:absolute;inset:0;display:block;
  background:linear-gradient(90deg,rgba(94,234,212,.30) 0%,rgba(130,186,231,.30) 52%,
             rgba(167,139,250,.36) 100%);
  clip-path:inset(0 calc(100% - var(--w,0%)) 0 0)}
.kd-z>span{position:relative;display:block;font-family:var(--mono);font-size:8.5px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin-bottom:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kd-z>b{position:relative;display:block;font-family:var(--mono);font-weight:700;
  color:var(--ink);white-space:nowrap;font-size:13.5px}
/* Die Karte kommt herein, statt einfach dazustehen. Das ist der Unterschied zwischen
   "lebendig" und "tot" - sie laeuft bei jedem Wechsel neu, weil display von none auf
   block springt. */
@keyframes kd-auf{from{opacity:0;transform:translateY(7px) scale(.985)}
                  to{opacity:1;transform:none}}
.kader .kdetail .kd{animation:kd-auf .22s cubic-bezier(.2,.7,.3,1)}
@media(prefers-reduced-motion:reduce){.kader .kdetail .kd{animation:none}}
@media(max-width:820px){
  .kader{grid-template-columns:minmax(0,1fr)}
  .kdetail{position:static}
  .kkopf-feld{padding:14px}
  .kkopf-z{width:100%}
  .kkopf-z>div{flex:1 1 0;min-width:0}
  .kz{grid-template-columns:minmax(0,1fr) 40px 56px 30px 52px 40px 12px;gap:10px;
    padding:7px 12px;font-size:11.5px}
  main .wrap{padding-bottom:26px}
  .kd-liste{grid-template-columns:minmax(0,1fr)}
}
.no-{color:var(--faint)}
.no-gut{color:var(--win);font-weight:700}
.no-mittel{color:var(--ink)}
.no-schwach{color:var(--loss)}
@media(max-width:1000px){.sp-det{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
  .sp-det{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kzeile{grid-template-columns:minmax(0,1fr) 34px 68px 40px 40px 46px;gap:7px;padding:7px 11px}
  .kkopf>span:nth-child(5){font-size:0}
  .kkopf>span:nth-child(5)::after{content:"V";font-size:9.5px}
}
.kader-leer{padding:34px 16px;text-align:center;color:var(--faint);
  font-family:var(--mono);font-size:12px}

#sp1:checked~.kdetail>.kd1,#sp2:checked~.kdetail>.kd2,#sp3:checked~.kdetail>.kd3,#sp4:checked~.kdetail>.kd4,#sp5:checked~.kdetail>.kd5,#sp6:checked~.kdetail>.kd6,#sp7:checked~.kdetail>.kd7,#sp8:checked~.kdetail>.kd8,#sp9:checked~.kdetail>.kd9,#sp10:checked~.kdetail>.kd10,#sp11:checked~.kdetail>.kd11,#sp12:checked~.kdetail>.kd12,#sp13:checked~.kdetail>.kd13,#sp14:checked~.kdetail>.kd14,#sp15:checked~.kdetail>.kd15,#sp16:checked~.kdetail>.kd16,#sp17:checked~.kdetail>.kd17,#sp18:checked~.kdetail>.kd18,#sp19:checked~.kdetail>.kd19,#sp20:checked~.kdetail>.kd20,#sp21:checked~.kdetail>.kd21,#sp22:checked~.kdetail>.kd22,#sp23:checked~.kdetail>.kd23,#sp24:checked~.kdetail>.kd24,#sp25:checked~.kdetail>.kd25,#sp26:checked~.kdetail>.kd26,#sp27:checked~.kdetail>.kd27,#sp28:checked~.kdetail>.kd28,#sp29:checked~.kdetail>.kd29,#sp30:checked~.kdetail>.kd30,#sp31:checked~.kdetail>.kd31,#sp32:checked~.kdetail>.kd32,#sp33:checked~.kdetail>.kd33,#sp34:checked~.kdetail>.kd34,#sp35:checked~.kdetail>.kd35,#sp36:checked~.kdetail>.kd36,#sp37:checked~.kdetail>.kd37,#sp38:checked~.kdetail>.kd38,#sp39:checked~.kdetail>.kd39,#sp40:checked~.kdetail>.kd40,#sp41:checked~.kdetail>.kd41,#sp42:checked~.kdetail>.kd42,#sp43:checked~.kdetail>.kd43,#sp44:checked~.kdetail>.kd44,#sp45:checked~.kdetail>.kd45,#sp46:checked~.kdetail>.kd46,#sp47:checked~.kdetail>.kd47,#sp48:checked~.kdetail>.kd48,#sp49:checked~.kdetail>.kd49,#sp50:checked~.kdetail>.kd50,#sp51:checked~.kdetail>.kd51,#sp52:checked~.kdetail>.kd52,#sp53:checked~.kdetail>.kd53,#sp54:checked~.kdetail>.kd54,#sp55:checked~.kdetail>.kd55,#sp56:checked~.kdetail>.kd56,#sp57:checked~.kdetail>.kd57,#sp58:checked~.kdetail>.kd58,#sp59:checked~.kdetail>.kd59,#sp60:checked~.kdetail>.kd60{display:block}
#sp1:checked~.kliste label[for=sp1],#sp2:checked~.kliste label[for=sp2],#sp3:checked~.kliste label[for=sp3],#sp4:checked~.kliste label[for=sp4],#sp5:checked~.kliste label[for=sp5],#sp6:checked~.kliste label[for=sp6],#sp7:checked~.kliste label[for=sp7],#sp8:checked~.kliste label[for=sp8],#sp9:checked~.kliste label[for=sp9],#sp10:checked~.kliste label[for=sp10],#sp11:checked~.kliste label[for=sp11],#sp12:checked~.kliste label[for=sp12],#sp13:checked~.kliste label[for=sp13],#sp14:checked~.kliste label[for=sp14],#sp15:checked~.kliste label[for=sp15],#sp16:checked~.kliste label[for=sp16],#sp17:checked~.kliste label[for=sp17],#sp18:checked~.kliste label[for=sp18],#sp19:checked~.kliste label[for=sp19],#sp20:checked~.kliste label[for=sp20],#sp21:checked~.kliste label[for=sp21],#sp22:checked~.kliste label[for=sp22],#sp23:checked~.kliste label[for=sp23],#sp24:checked~.kliste label[for=sp24],#sp25:checked~.kliste label[for=sp25],#sp26:checked~.kliste label[for=sp26],#sp27:checked~.kliste label[for=sp27],#sp28:checked~.kliste label[for=sp28],#sp29:checked~.kliste label[for=sp29],#sp30:checked~.kliste label[for=sp30],#sp31:checked~.kliste label[for=sp31],#sp32:checked~.kliste label[for=sp32],#sp33:checked~.kliste label[for=sp33],#sp34:checked~.kliste label[for=sp34],#sp35:checked~.kliste label[for=sp35],#sp36:checked~.kliste label[for=sp36],#sp37:checked~.kliste label[for=sp37],#sp38:checked~.kliste label[for=sp38],#sp39:checked~.kliste label[for=sp39],#sp40:checked~.kliste label[for=sp40],#sp41:checked~.kliste label[for=sp41],#sp42:checked~.kliste label[for=sp42],#sp43:checked~.kliste label[for=sp43],#sp44:checked~.kliste label[for=sp44],#sp45:checked~.kliste label[for=sp45],#sp46:checked~.kliste label[for=sp46],#sp47:checked~.kliste label[for=sp47],#sp48:checked~.kliste label[for=sp48],#sp49:checked~.kliste label[for=sp49],#sp50:checked~.kliste label[for=sp50],#sp51:checked~.kliste label[for=sp51],#sp52:checked~.kliste label[for=sp52],#sp53:checked~.kliste label[for=sp53],#sp54:checked~.kliste label[for=sp54],#sp55:checked~.kliste label[for=sp55],#sp56:checked~.kliste label[for=sp56],#sp57:checked~.kliste label[for=sp57],#sp58:checked~.kliste label[for=sp58],#sp59:checked~.kliste label[for=sp59],#sp60:checked~.kliste label[for=sp60]{background:color-mix(in srgb,var(--cyan) 11%,transparent);box-shadow:inset 3px 0 0 var(--cyan)}
#sp1:checked~.kliste label[for=sp1],#sp2:checked~.kliste label[for=sp2],#sp3:checked~.kliste label[for=sp3],#sp4:checked~.kliste label[for=sp4],#sp5:checked~.kliste label[for=sp5],#sp6:checked~.kliste label[for=sp6],#sp7:checked~.kliste label[for=sp7],#sp8:checked~.kliste label[for=sp8],#sp9:checked~.kliste label[for=sp9],#sp10:checked~.kliste label[for=sp10],#sp11:checked~.kliste label[for=sp11],#sp12:checked~.kliste label[for=sp12],#sp13:checked~.kliste label[for=sp13],#sp14:checked~.kliste label[for=sp14],#sp15:checked~.kliste label[for=sp15],#sp16:checked~.kliste label[for=sp16],#sp17:checked~.kliste label[for=sp17],#sp18:checked~.kliste label[for=sp18],#sp19:checked~.kliste label[for=sp19],#sp20:checked~.kliste label[for=sp20],#sp21:checked~.kliste label[for=sp21],#sp22:checked~.kliste label[for=sp22],#sp23:checked~.kliste label[for=sp23],#sp24:checked~.kliste label[for=sp24],#sp25:checked~.kliste label[for=sp25],#sp26:checked~.kliste label[for=sp26],#sp27:checked~.kliste label[for=sp27],#sp28:checked~.kliste label[for=sp28],#sp29:checked~.kliste label[for=sp29],#sp30:checked~.kliste label[for=sp30],#sp31:checked~.kliste label[for=sp31],#sp32:checked~.kliste label[for=sp32],#sp33:checked~.kliste label[for=sp33],#sp34:checked~.kliste label[for=sp34],#sp35:checked~.kliste label[for=sp35],#sp36:checked~.kliste label[for=sp36],#sp37:checked~.kliste label[for=sp37],#sp38:checked~.kliste label[for=sp38],#sp39:checked~.kliste label[for=sp39],#sp40:checked~.kliste label[for=sp40],#sp41:checked~.kliste label[for=sp41],#sp42:checked~.kliste label[for=sp42],#sp43:checked~.kliste label[for=sp43],#sp44:checked~.kliste label[for=sp44],#sp45:checked~.kliste label[for=sp45],#sp46:checked~.kliste label[for=sp46],#sp47:checked~.kliste label[for=sp47],#sp48:checked~.kliste label[for=sp48],#sp49:checked~.kliste label[for=sp49],#sp50:checked~.kliste label[for=sp50],#sp51:checked~.kliste label[for=sp51],#sp52:checked~.kliste label[for=sp52],#sp53:checked~.kliste label[for=sp53],#sp54:checked~.kliste label[for=sp54],#sp55:checked~.kliste label[for=sp55],#sp56:checked~.kliste label[for=sp56],#sp57:checked~.kliste label[for=sp57],#sp58:checked~.kliste label[for=sp58],#sp59:checked~.kliste label[for=sp59],#sp60:checked~.kliste label[for=sp60] .nm b{color:var(--cyan)}