/* Street Boccia — Asphalt, Kreide, Signalgelb.
   Die Linie stammt aus Wagis Prototyp: Strasse statt Sportplatz, harte Kanten,
   Schablonenschrift. Kraft-Orange kommt nur als Sponsorfarbe vor, damit die
   Bedienung eindeutig gelb bleibt. */

:root{
  /* Nacht — der Normalfall. Kreide auf Asphalt. */
  --asphalt:#212429; --flaeche:#2B2F35; --flaeche-2:#343941; --linie:#434a54;
  --kreide:#E9E7E1; --stumm:#949BA4;
  --gelb:#F5B912; --blau:#56B7CE; --rot:#E2574C; --gruen:#7FB069;
  /* Rot als Schrift: #E2574C kam auf dem Asphalt nur auf 4,23 (gemessen
     27.9.2026, als «Abmelden» rot wurde). 5,02 hält. */
  --rot-schrift:#EA6B5F;
  --kraft:#FF4D1C;
  --kraft-schrift:#FF4D1C;
  --auf-gelb:#1B1D21;        /* Schrift auf gelbem Grund, in beiden Modi dunkel */
  --auf-kreide:#1B1D21;      /* Schrift auf Kreide-Grund — dreht mit dem Modus */
  --gelb-schrift:#F5B912;    /* Gelb als Schrift; als Fläche bleibt --gelb */
  --kartengrund:#1c1f24;
  --k-see:#243a45; --k-fluss:#2d4c5c; --k-gruen:#28312a; --k-haus:#272c33;
  --k-gleis:#31363d; --k-strasse:#3a4049; --k-hauptstrasse:#4e5661;
  --griess:.35;
  /* Der Menübalken steht eine Stufe über dem Grund, nicht darin (Wagi,
     22.9.2026: «farblich bisschen anders für bessere Erkennbarkeit»).
     Deckend statt milchig — der Weichzeichner kostete auf dem Telefon
     Rechenzeit und war hinter 96 Prozent Deckung ohnehin kaum zu sehen. */
  --leiste:#2B2F35; --leiste-schatten:0 -8px 20px rgba(0,0,0,.38);
  --radius:4px; --pad:16px;
  /* Die eigenen Kurven aus dem Design Guide. Er gilt für Landingpage UND App
     (Wagi, 30.8.2026) — bisher standen sie nur in nachtsprint.css. Hier
     angelegt, damit Neues sie nutzt; bestehende Übergänge bleiben vorerst,
     wie sie sind. */
  --aus:cubic-bezier(.23,1,.32,1);          /* etwas tritt ein oder aus */
  --einaus:cubic-bezier(.77,0,.175,1);      /* etwas bewegt sich im Bild */
}

/* Tag — dieselbe Strasse bei Sonnenlicht: Asphalt auf Kreide. Um 18 Uhr im
   August steht die Sonne noch hoch, da ist ein dunkles Display kaum lesbar. */
body.tag{
  --asphalt:#E4E1DA; --flaeche:#F2F0EB; --flaeche-2:#DAD6CD; --linie:#B8B3A8;
  --kreide:#23262B; --stumm:#6B6A66;
  --gelb:#E8A400; --blau:#1F7E96; --rot:#C4392C; --gruen:#4C7A38;
  --rot-schrift:#B4291C;   /* 4,91 auf dem hellen Grund; #C4392C nur 4,05 */
  --kartengrund:#EDEAE3;
  --k-see:#B9CBD4; --k-fluss:#8FB0C0; --k-gruen:#C8D3BE; --k-haus:#DCD8CF;
  --k-gleis:#C9C4B8; --k-strasse:#C2BDB1; --k-hauptstrasse:#A5A093;
  --griess:.14;
  --leiste:#F7F5F1; --leiste-schatten:0 -8px 20px rgba(0,0,0,.10);
  /* Tagsüber ist die Kreide dunkel — also braucht sie helle Schrift, sonst
     steht Dunkel auf Dunkel und die aktive Runde ist nicht mehr lesbar. */
  --auf-kreide:#F2F0EB;
  /* Leuchtgelb auf hellem Grund ist kaum zu lesen (Kontrast unter 2,5).
     Als Fläche bleibt --gelb strahlend, als Schrift wird daraus dunkles Gold. */
  --gelb-schrift:#8A6200;
  /* Dasselbe für die Sponsorfarbe: Als Logo bleibt Kraft-Orange, als Schrift
     wird es tagsüber eine Spur dunkler, sonst flimmert es auf dem Hellgrau. */
  --kraft-schrift:#C43A0E;
}
/* ── Farbwelt von Turnier II (22.9.2026) ───────────────────────────────────
   Nur für dieses Turnier (Wagi: «Wir passen die Farben nur für Turnier 2
   an»). Die Klasse setzt kern.js, wenn die Route es verlangt; Turnier I, die
   Startseite und die Verwaltung bleiben unberührt.

   Die zwei Farben stammen von der Website des Austragungsorts (22.9.2026),
   nicht aus dem Gefühl:
     #312783  Dunkelblau — Schriftfarbe der ganzen Seite, 39-mal im Stylesheet
     #F4A09A  Rosa — die Farbe, die die Seite selbst angibt (meta theme-color)
     #AF3F5F  dunkles Rosé der Seite — tagsüber als Schrift, weil Rosa auf
              Weiss nur 2,0:1 erreicht
   Jedes Paar aus Schrift und Grund ist gerechnet, keines liegt unter 4,5:1:
   Rosé auf Weiss 5,7 · auf Fläche-2 4,6 · Blau auf rosa Knopf 5,9.

   NUR TAGSÜBER. Wagi, 22.9.2026: «Nachtmodus ist immer schwarz — schwarz
   gelb.» Nachts gilt für jedes Turnier Asphalt und Gelb; eine dunkelblaue
   Nachtfassung gab es für ein paar Stunden und ist wieder weg. */
body.tag.farbe-turnier-2{
  /* Rosa als Grund, Dunkelblau als Schrift und Akzent — die Farben des
     Austragungsorts (Wagi, 22.9.2026: «Rosa als Hauptfarbe in den Hintergrund»).
     Karten im hellen Rosa der Website. Alle Schriftfarben halten 4,5:1 auf
     dem Grund #F4A09A (gerechnet): Blau 5,9 · Stumm 5,0 · Rosé 4,8 · Rot 5,0 ·
     Grün 5,1 · Petrol 4,7 · Kraft 5,0; Weiss auf Blau 12,0. */
  --asphalt:#F4A09A; --flaeche:#F6DCDD; --flaeche-2:#F0B7BA; --linie:#DE8580;
  --kreide:#312783; --stumm:#54307A;
  --gelb:#312783; --gelb-schrift:#7A2440; --auf-gelb:#FFFFFF; --auf-kreide:#FFFFFF;
  --rot:#7F1A14; --gruen:#28481C; --blau:#134C5C; --kraft-schrift:#7A2207;
  --rot-schrift:#7F1A14;   /* 5,02 auf dem Rosa — hier trägt dasselbe Rot */
  --kartengrund:#F8E4E4;
  --k-see:#C9D8EA; --k-fluss:#A9C1DE; --k-gruen:#D5E3CC; --k-haus:#EFCBC8;
  --k-gleis:#E3B3B0; --k-strasse:#F2D2D0; --k-hauptstrasse:#D99490;
  --leiste:#F6DCDD; --leiste-schatten:0 -8px 20px rgba(49,39,131,.13);
}
/* Turnier III: Eisblau mit Nachtblau (Wagi, 26.10.2026, Winterfarbe A).
   Gerechnet auf dem Grund #A8D5E2 — keine Schrift unter 4,5:1: Nachtblau 9,7 ·
   Stumm 6,3 · Akzentschrift 6,8 · Rot 6,5 · Grün 6,5 · Petrol 6,0 · Kraft 6,5;
   auf den helleren Flächen liegt jede Zahl höher. Weiss auf Nachtblau 15,3.
   Nur tagsüber, nachts gilt Schwarz-Gelb wie bei jedem Turnier. */
body.tag.farbe-turnier-3{
  --asphalt:#A8D5E2; --flaeche:#DCEFF4; --flaeche-2:#C3E2EB; --linie:#86BFD0;
  --kreide:#12263F; --stumm:#2B4560;
  --gelb:#12263F; --gelb-schrift:#1C3F66; --auf-gelb:#FFFFFF; --auf-kreide:#FFFFFF;
  --rot:#7F1A14; --gruen:#28481C; --blau:#134C5C; --kraft-schrift:#7A2207;
  --rot-schrift:#7F1A14;
  --kartengrund:#E6F3F7;
  --k-see:#C2DCEB; --k-fluss:#9FC4DE; --k-gruen:#D3E6D4; --k-haus:#CFE3EA;
  --k-gleis:#A9CBD8; --k-strasse:#D8ECF2; --k-hauptstrasse:#8FBACB;
  --leiste:#DCEFF4; --leiste-schatten:0 -8px 20px rgba(18,38,63,.13);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
/* Am Rechner sind manche Seiten kurz genug, dass der Rollbalken verschwindet —
   dann rückt der zentrierte Inhalt beim Tabwechsel um ein paar Bildpunkte.
   Der reservierte Streifen hält ihn ruhig. Ältere Browser bekommen mit
   overflow-y denselben Effekt. */
/* Scrollen soll gleiten, nicht springen (Wagi, 22.9.2026: «scrollen feiner
   und smoother»). Anker und Sprünge innerhalb einer Ansicht laufen weich;
   die fliegenden Knöpfe oben und die Tableiste unten decken sonst das Ziel zu,
   darum der Scrollrand. Wer Bewegung abbestellt hat, bekommt sie nicht. */
html{scrollbar-gutter:stable;scroll-behavior:smooth;
  scroll-padding-top:74px;scroll-padding-bottom:86px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Kein Zögern vor dem Doppeltipp-Zoom: Tippen wirkt sofort. */
button,a,label,summary,input,select{touch-action:manipulation}
@supports not (scrollbar-gutter: stable){
  html{overflow-y:scroll}
}
body{
  background:var(--asphalt); color:var(--kreide);
  font-family:'Archivo',system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:1.45; min-height:100vh; overscroll-behavior-y:none;
  -webkit-text-size-adjust:100%;
}
/* Feiner Asphaltgriess ueber allem — nur Optik, faengt keine Klicks ab. */
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:var(--griess);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
#app{position:relative;z-index:1;max-width:560px;margin:0 auto;
  padding:calc(10px + env(safe-area-inset-top)) var(--pad) 110px}
/* Platz für die fliegende Knopfreihe (38 hoch, 10 vom Rand) — aber nur, wenn
   sie da ist. Auf dem Anmeldeschirm gibt es keine Knöpfe und also auch kein
   Loch über dem Titel. */
body.angemeldet #app{padding-top:calc(58px + env(safe-area-inset-top))}

h1,h2,h3,.display{font-family:'Big Shoulders Display',Impact,sans-serif;font-weight:800;
  letter-spacing:.01em;line-height:.95;margin:0}
h1{font-size:clamp(38px,11vw,54px);text-transform:uppercase}
/* Login und Startseite tragen den Namen des Abends — der darf gross sein. */
#screen-home h1,#screen-login h1{font-size:clamp(52px,16vw,78px)}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}
/* 12 statt 11 px (Meret, 26.10.2026): Die Leiter beginnt bei 12, und in der
   Jetzt-Karte trägt diese Klasse das Turnierdatum, die wichtigste Angabe. */
.eyebrow{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--stumm)}
.muted{color:var(--stumm)} .small{font-size:13.5px}
.hidden{display:none!important}

/* ────────────────────────────── Die Anmeldung ───────────────────────────── */
/* Feste Handybreite nur hier: Die Anmeldung ist das erste, was jemand sieht,
   und soll auf jedem Gerät gleich wirken. Die Listen und die Karte im Inneren
   der App dürfen dagegen ruhig die volle Breite nutzen. */
#screen-login{width:390px;max-width:100%;margin:0 auto}
#screen-login header.top{padding-top:34px}
#screen-login h1{font-size:66px}

.countdown{display:inline-flex;align-items:baseline;gap:8px;margin:6px 0 0}
.countdown b{font-family:'Big Shoulders Display',Impact,sans-serif;font-size:26px;
  font-weight:800;line-height:1;color:var(--gelb-schrift)}
.countdown span{font-family:'IBM Plex Mono',monospace;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--stumm)}

/* Die Szene sitzt am unteren Rand. Feste Masse, damit die Bälle auf jedem
   Gerät gleich gross sind; was seitlich übersteht, wird beschnitten. */
.anwurf-buehne{height:190px;margin:22px -16px 0;overflow:hidden;
  display:flex;justify-content:center}
.anwurf-buehne svg{width:380px;height:190px;flex:none;display:block}
/* Der Marker ist ein weisser Ball und bleibt es auch bei Tag — deshalb eine
   feste Farbe statt der Textfarbe, mit feiner Kontur für den hellen Grund. */
.aw-marker{fill:#EFEDE7;stroke:#8E8B82;stroke-width:1.5}
.aw-ball{fill:var(--gelb)}
.aw-glanz{fill:#fff;opacity:.34}
.aw-schatten{fill:#000;opacity:.22}
body.tag .aw-schatten{opacity:.13}

.aw-ball-zwei{fill:var(--kreide)}
body.tag .aw-ball-zwei{fill:#3A3F47}

/* Der ganze Ablauf:
   0,0–1,9 s   der gelbe Ball rollt herein und kommt vor dem Marker zur Ruhe
   1,9–3,9 s   Ruhe — zwei Sekunden, damit das Bild steht
   3,9–4,5 s   ein dritter Ball fliegt von links oben herein
   4,4–5,2 s   der Treffer schiebt den gelben nach rechts aus dem Bild
   Am Ende liegt der dritte dort, wo der gelbe lag, und der gelbe
   angeschnitten am rechten Rand. */
@media(prefers-reduced-motion:no-preference){
  .aw-rollt{animation:aw-rollen 1.9s cubic-bezier(.12,.62,.2,1) both;
    transform-origin:224px 112px}
  .aw-marker-auf{animation:aw-auf .5s ease-out .2s both;
    transform-origin:296px 132px}
  .aw-weg{animation:aw-wegschubsen .8s cubic-bezier(.22,.7,.3,1) 4.4s both;
    transform-origin:224px 112px}
  .aw-fliegt{animation:aw-anflug .6s cubic-bezier(.4,.05,.6,1) 3.9s both;
    transform-origin:224px 112px}
  .aw-schatten-flug{animation:aw-flugschatten .6s cubic-bezier(.4,.05,.6,1) 3.9s both}
}
/* Ohne Bewegung: Der dritte Ball liegt vorne, der gelbe am Rand — die
   Endlage der Geschichte, ohne sie zu erzählen. */
@media(prefers-reduced-motion:reduce){
  .aw-weg{transform:translateX(158px)}
}

/* Der Ball kommt von links, wird langsamer und bleibt kurz vor dem Marker
   liegen — er nähert sich, er stösst nicht an. */
@keyframes aw-rollen{
  from{transform:translateX(-300px) rotate(-620deg)}
  to{transform:translateX(0) rotate(0)}}
@keyframes aw-auf{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}

/* Der Treffer: kurzer Rückstoss, dann rutscht der gelbe über den Marker
   hinweg nach rechts und bleibt angeschnitten am Rand liegen. */
@keyframes aw-wegschubsen{
  0%{transform:translate(0,0) rotate(0)}
  18%{transform:translate(26px,-14px) rotate(58deg)}
  100%{transform:translate(158px,0) rotate(300deg)}}

/* Der dritte Ball fliegt — er rollt nicht. Von links oben, mit kurzem
   Aufsetzer am Ende. */
@keyframes aw-anflug{
  0%{transform:translate(-330px,-170px) rotate(-120deg);opacity:0}
  12%{opacity:1}
  82%{transform:translate(4px,6px) rotate(14deg)}
  100%{transform:translate(0,0) rotate(0)}}

/* Der Schatten bleibt am Boden und wächst erst beim Aufsetzen heran. */
@keyframes aw-flugschatten{
  0%{transform:translateX(-330px) scale(.3);opacity:0}
  60%{opacity:.06}
  100%{transform:translateX(0) scale(1);opacity:.22}}

/* ─────────────────────────── Tag- und Nachtschalter ─────────────────────── */
/* Eine zentrierte Reihe oben. Rückwärts gesetzt, damit Licht rechts aussen
   bleibt und trotzdem zuerst im Dokument steht. */
.fliegend{position:fixed;top:calc(10px + env(safe-area-inset-top));left:50%;
  transform:translateX(-50%);z-index:12;display:flex;flex-direction:row-reverse;gap:8px}
/* 44 Pixel und 8 dazwischen — Merets Mass (27.9.2026): 38 × 38 mit 6 Pixern
   Abstand war für eine zittrige Hand auf dem Telefon zu klein und zu eng.
   Der Platz ist da: Der Klangschalter steht auf «display:none», sichtbar sind
   Licht, Fotos und — nur für die Leitung — das Zahnrad. Drei Knöpfe brauchen
   3 × 44 + 2 × 8 = 148 Pixel; selbst auf einem 320er Gerät bleibt Luft.
   Vorher standen hier 38 (Wagi, 30.8.2026, «seit es vier werden können»). */
.lichtschalter{width:44px;height:44px;border-radius:50%;border:1px solid var(--linie);
  background:var(--flaeche);color:var(--kreide);display:flex;align-items:center;
  justify-content:center;font-size:19px;line-height:1;
  box-shadow:0 2px 10px rgba(0,0,0,.25)}
.lichtschalter:active{background:var(--flaeche-2)}
body.tag .lichtschalter{box-shadow:0 2px 10px rgba(0,0,0,.12)}
/* Ausser Betrieb auf Wagis Wunsch (30.8.2026). Der Knopf bleibt im Dokument,
   damit der Rest des Klang-Codes nicht ins Leere greift — nur zu sehen ist er
   nicht mehr. Zurückholen: diese eine Zeile löschen. */
.klangschalter{display:none}
.klangschalter.aus{color:var(--stumm);opacity:.6}
/* Und die Fotos links daneben. Anders als die beiden anderen schaltet dieser
   Knopf nichts um, er führt irgendwohin — darum zeigt er, wenn man dort ist. */
.fotoschalter{font-size:17px}
.leitungsschalter{font-size:17px}
.leitungsschalter[aria-current=true]{background:var(--gelb);border-color:var(--gelb);
  color:var(--auf-gelb)}

.fotoschalter[aria-current=true]{background:var(--gelb);border-color:var(--gelb);
  color:var(--auf-gelb)}

/* Welche Fanfare gerade lief — kurz eingeblendet. */
.fanfarenschild{position:fixed;left:50%;transform:translateX(-50%);
  top:calc(60px + env(safe-area-inset-top));z-index:28;
  background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius);
  padding:9px 14px;text-align:center;box-shadow:0 6px 22px rgba(0,0,0,.35);
  animation:fs-rein .22s ease}
.fanfarenschild .eyebrow{display:block;color:var(--gelb-schrift)}
.fanfarenschild.weg{animation:fs-raus .6s ease forwards}
@keyframes fs-rein{from{opacity:0;transform:translate(-50%,-8px)}
  to{opacity:1;transform:translate(-50%,0)}}
@keyframes fs-raus{to{opacity:0;transform:translate(-50%,-8px)}}
/* Rutscht mit, wenn oben der Netzbalken steht. */
.netzbalken:not(.hidden) ~ #app .lichtschalter,
body.netzbalken-sichtbar .lichtschalter{top:calc(46px + env(safe-area-inset-top))}

/* Abstände, die früher als style-Attribut im Markup standen. Die
   Inhaltsrichtlinie des Servers (style-src 'self') verbietet solche Attribute —
   also gehören sie hierher, wo sie ohnehin hingehören. */
.kopfzeile{display:block;margin-bottom:12px}
/* Kartentitel sind Überschriften, damit ein Screenreader von Karte zu Karte
   springen kann (Meret, 26.10.2026). Aussehen wie bisher: kein Display-Schnitt. */
h2.eyebrow{font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:400;
  letter-spacing:.18em;line-height:inherit;margin:0 0 12px}
.anschluss{margin-top:0}
.fussnote{margin:14px 0 0}
.ohne-abstand{margin:0}
.mit-abstand{margin-top:12px}
.setname{font-size:20px}

header.top{padding:26px 0 14px}
header.top .kicker{display:flex;align-items:baseline;gap:10px;margin-bottom:6px;flex-wrap:wrap}
/* Die Spitzmarke trägt Anlass, Ort und Datum — sie darf auf schmalen Geräten
   umbrechen, aber nicht abgeschnitten werden. */
/* Die Spitzmarke steht seit dem 30.8.2026 UNTER dem Titel (Wagi) und braucht
   darum keine Reserve mehr für die Knöpfe — die fliegen zentriert darüber.
   Die Reihenfolge dreht das CSS, nicht das HTML: Sonst müsste jeder der acht
   Schirme einzeln umgebaut werden, und einer bliebe sicher liegen. */
header.top{display:flex;flex-direction:column}
header.top h1{order:1}
header.top .kicker{order:2;margin-top:4px;margin-bottom:0}
header.top .roadline{order:3}
.spitzmarke{line-height:1.55;letter-spacing:.14em}
/* Eine Zeile statt zwei (Wagi, 30.8.2026): «by Kraft Health & Strength · Zürich».
   Kein erzwungener Umbruch mehr — auf schmalen Geräten bricht sie von selbst
   an der richtigen Stelle. */
.spitzmarke .zeile2{display:inline}
.spitzmarke .zeile2::before{content:' · '}
/* Steht nichts davor, beginnt die Zeile sonst mit einem Mittelpunkt — seit
   der Sponsor aus den Turnier-Köpfen raus ist (Wagi, 27.9.2026). */
.spitzmarke .zeile2:first-child::before{content:none}
/* Der Sponsor steht in der Oberzeile ausgeschrieben — als Zeichen war er in
   Kleinschrift nicht mehr zu erkennen. Das Logo selbst zeigt das Reglement. */
.roadline{height:6px;margin:14px 0 20px;opacity:.5;
  background:repeating-linear-gradient(90deg,var(--kreide) 0 26px,transparent 26px 46px)}
.hair{height:1px;background:var(--linie);margin:18px 0}

.card{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius);
  padding:16px;margin-bottom:12px}

/* Abstände auf der Vierer-Leiter des Design Guides (31.8.2026, Wagi):
   8 innerhalb eines Feldes, 20 zwischen zweien. Vorher waren es 7 und 14 —
   zu nah beieinander, um die Beschriftung ihrem Feld zuzuordnen. */
label.field{display:block;margin-bottom:20px}
label.field .lab{display:block;margin-bottom:8px}
/* Vor dem Absenden deutlich mehr Luft. 28 und nicht 8, weil angrenzende
   Ränder verschmelzen: Der Knopf sieht nur den grösseren der beiden Werte,
   und mit 8 blieb es bei den 20 des Feldes darüber — der Knopf klebte weiter
   am Eingabefeld. Gemessen, nicht geschätzt. */
form .btn{margin-top:28px}
/* Ein Hinweis über einem Formular braucht Abstand nach unten, ein Kasten
   darunter Abstand nach oben — sonst laufen Text und Felder ineinander. */
form + .notice{margin-top:16px}
input[type=text],input[type=password],select,textarea{
  width:100%;background:var(--asphalt);color:var(--kreide);border:1px solid var(--linie);
  border-radius:var(--radius);padding:13px 12px;font:inherit;font-size:16px}
textarea{font-family:'IBM Plex Mono',monospace;font-size:15px;line-height:1.7;resize:vertical}
/* Bei Tag muss das Feld als Feld erkennbar sein: Meret (26.10.2026, MUSS,
   WCAG 1.4.11) mass Rand zu Karte 1,71 in Eisblau, 2,08 in Rosa, 1,60 im
   Standard — gefordert sind 3:1. Der Rand trägt darum die stumme Schrift
   (Eisblau 6,3 · Rosa 5,0). Nachts bleibt er, wie er ist. */
body.tag input[type=text],body.tag input[type=password],body.tag select,body.tag textarea{
  border-color:var(--stumm)}
/* Platzhalter in der Schriftfarbe «stumm» statt im Browser-Grau, das auf den
   farbigen Gründen nur rund 2,9:1 erreichte (Meret, 26.10.2026, SOLL). */
input::placeholder,textarea::placeholder{color:var(--stumm);opacity:1}
/* Der Fokus lag bisher nur auf Feldern und Knöpfen — Verweise fielen durch.
   Wer mit der Tastatur unterwegs ist, sah dort nicht, wo er steht.
   (Design Guide, 30.8.2026, Abschnitt Verbote.) */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--blau);outline-offset:2px;border-radius:2px}
select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--stumm) 50%),
                   linear-gradient(135deg,var(--stumm) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 12px) 50%;
  background-size:6px 6px;background-repeat:no-repeat}

button{font:inherit;cursor:pointer;border:none;border-radius:var(--radius)}
.btn{display:block;width:100%;padding:17px;background:var(--gelb);color:var(--auf-gelb);
  font-family:'Big Shoulders Display',Impact,sans-serif;font-weight:800;font-size:24px;
  text-transform:uppercase;letter-spacing:.02em;margin-bottom:12px}
.btn:disabled{background:var(--flaeche-2);color:var(--stumm);cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--kreide);border:1px solid var(--linie);
  font-size:19px;padding:13px}
/* Was die Sitzung beendet oder löscht. Schrift und Rand tragen das
   Schrift-Rot, nicht die Fläche-Variante: Als Schrift hielt #E2574C nachts nur
   4,23 und tagsüber 4,05 (Meret, 27.9.2026). */
.btn.danger{background:transparent;color:var(--rot-schrift);
  border:1px solid var(--rot-schrift);font-size:19px;padding:13px}

.notice{border:1px solid color-mix(in srgb, var(--gelb) 40%, transparent);border-radius:var(--radius);
  padding:11px 13px;background:color-mix(in srgb, var(--gelb) 8%, transparent);font-size:14px;margin-bottom:12px}
.notice.bad{border-color:rgba(226,87,76,.45);background:rgba(226,87,76,.09)}
.notice.ok{border-color:color-mix(in srgb, var(--blau) 40%, transparent);background:color-mix(in srgb, var(--blau) 8%, transparent)}

/* ─────────────────────────── Netzbalken (Funkloch) ──────────────────────── */
.netzbalken{position:fixed;top:0;left:0;right:0;z-index:20;padding:9px 14px;
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.05em;
  text-align:center;background:var(--rot);color:#fff}
.netzbalken.wartet{background:var(--gelb);color:var(--auf-gelb)}
.netzbalken.ok{background:var(--gruen);color:var(--auf-gelb)}

/* ──────────────────────────────── Rollenwahl ────────────────────────────── */
.setwahl{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.setknopf{background:var(--asphalt);border:1px solid var(--linie);border-radius:var(--radius);
  color:var(--kreide);padding:18px 12px;text-align:left}
.setknopf b{display:block;font-family:'Big Shoulders Display',Impact,sans-serif;
  font-size:32px;font-weight:800;line-height:1}
.setknopf span{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--stumm)}
.setknopf:active{background:var(--flaeche-2)}

/* ───────────────────────────── Stationsband ─────────────────────────────── */
.stationsband{display:flex;gap:4px;padding:2px 0 10px}
.stationsband i{flex:1;height:5px;background:var(--flaeche-2);border-radius:2px;font-style:normal}
.stationsband i.durch{background:var(--linie)}
.stationsband i.jetzt{background:var(--gelb)}
.stationskopf{padding:0 0 6px}
.stationskopf h2{font-size:clamp(28px,8vw,38px);text-transform:uppercase}
.stationskopf .ort{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.08em;
  color:var(--stumm);margin-top:5px}

/* ─────────────────────────────── Rundennavi ─────────────────────────────── */
/* Die Runden gleiten und rasten ein, statt irgendwo stehenzubleiben (Wagi,
   22.9.2026: «scrollen feiner und smoother»). Und ein Wisch zur Seite zieht
   nicht die ganze Seite mit. */
.rnav{display:flex;gap:6px;overflow-x:auto;padding:6px 0 14px;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
  overscroll-behavior-x:contain;scroll-padding-left:2px}
.rnav .rchip{scroll-snap-align:start}
.rnav::-webkit-scrollbar{display:none}
.rchip{flex:none;background:var(--flaeche);border:1px solid var(--linie);color:var(--stumm);
  border-radius:2px;padding:9px 13px;font-family:'IBM Plex Mono',monospace;font-size:12px;
  letter-spacing:.06em}
.rchip[aria-current=true]{background:var(--kreide);color:var(--auf-kreide);border-color:var(--kreide);
  font-weight:600}
.rchip .dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--blau);
  margin-left:6px;vertical-align:middle}

/* ──────────────────────────────── Spielkarte ────────────────────────────── */
.gamecard{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius);
  margin-bottom:10px;overflow:hidden}
.gamecard.meins{border-color:var(--gelb-schrift)}
.gamecard.fremd .gamebody{opacity:.62}
.gamehead{display:flex;align-items:center;justify-content:space-between;gap:8px;
  flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid var(--linie);
  background:var(--flaeche-2)}
.kopfrechts{display:flex;gap:6px;align-items:center;flex:none}
.gamehead .who{display:flex;align-items:center;gap:9px;min-width:0}
.gamehead .chefname{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gamecard.meins .gamehead{background:color-mix(in srgb, var(--gelb) 13%, transparent)}
.badge{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;border:1px solid var(--linie);border-radius:2px;padding:3px 7px;
  color:var(--stumm);background:none;white-space:nowrap}
.badge.done{border-color:var(--blau);color:var(--blau)}
.badge.chef{border-color:var(--gelb-schrift);color:var(--gelb-schrift)}
.gamebody{padding:10px}

.slot{width:100%;display:flex;align-items:center;gap:12px;text-align:left;
  background:var(--asphalt);border:1px solid var(--linie);border-radius:var(--radius);
  padding:15px 14px;margin-bottom:8px;color:var(--kreide);font-size:18px;font-weight:500;
  transition:background .12s ease}
.slot:last-child{margin-bottom:0}
.slot:active{background:var(--flaeche-2)}
.slot[disabled]{cursor:default}
.slot[data-stufe]{border-color:transparent}
.slot[data-stufe="hoch"]{background:var(--gelb);color:var(--auf-gelb);font-weight:700}
.slot[data-stufe="mittel"]{background:var(--kreide);color:var(--auf-kreide);font-weight:600}
.slot[data-stufe="null"]{background:var(--flaeche-2);color:var(--stumm)}
.slot .sub{display:block;font-family:'IBM Plex Mono',monospace;font-size:11.5px;
  letter-spacing:.05em;opacity:.72;font-weight:500}
.slot .stempel{flex:none;width:44px;height:44px;display:flex;align-items:center;
  justify-content:center;border:2px dashed var(--linie);border-radius:50%;
  font-family:'Big Shoulders Display',Impact,sans-serif;font-size:26px;font-weight:800;
  color:var(--stumm)}
.slot[data-stufe] .stempel{border-style:solid;border-color:rgba(0,0,0,.28);color:inherit}
.slot[data-stufe="null"] .stempel{border-color:var(--linie);color:var(--stumm)}
.slot .chefstern{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:.1em;opacity:.65}
@keyframes stempeln{
  0%{transform:scale(1.5) rotate(-9deg);opacity:0}
  60%{transform:scale(.94) rotate(2deg);opacity:1}
  100%{transform:scale(1) rotate(0);opacity:1}}
.slot[data-stufe] .stempel{animation:stempeln .22s cubic-bezier(.2,.9,.3,1.2)}

.ballbar{padding:2px 2px 10px;line-height:1.6;
  font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--stumm)}
.ballbar b{color:var(--gelb-schrift);font-weight:600}

/* Beruehrungs-Schalter: erscheint, sobald der Siegerball gesetzt ist. */
.beruehrt{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  background:var(--asphalt);border:1px dashed var(--linie);border-radius:var(--radius);
  padding:12px 14px;margin-bottom:8px;color:var(--stumm);font-size:14.5px}
.beruehrt[aria-pressed=true]{border-style:solid;border-color:var(--gelb-schrift);
  background:color-mix(in srgb, var(--gelb) 12%, transparent);color:var(--kreide)}
.beruehrt .kasten{flex:none;width:26px;height:26px;border:2px solid var(--linie);
  border-radius:3px;display:flex;align-items:center;justify-content:center;
  font-family:'Big Shoulders Display',Impact,sans-serif;font-size:20px;font-weight:800}
.beruehrt[aria-pressed=true] .kasten{border-color:var(--gelb-schrift);color:var(--gelb-schrift)}

.pause{border:1px dashed var(--linie);border-radius:var(--radius);padding:12px 14px;
  margin-bottom:10px}
.pause .namen{margin-top:6px;font-size:15px;color:var(--stumm);line-height:1.5}

.duwarnung{border:1px solid var(--gelb);border-radius:var(--radius);
  background:color-mix(in srgb, var(--gelb) 10%, transparent);padding:12px 14px;margin-bottom:12px}
.duwarnung b{font-family:'Big Shoulders Display',Impact,sans-serif;font-size:22px;
  display:block;text-transform:uppercase}

/* Rundenstand: vier Teamchefs erfassen gleichzeitig — wer fehlt noch? */
.rundenstand{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:9px 13px;margin-bottom:12px;border:1px solid var(--linie);
  border-radius:var(--radius);font-size:11.5px;letter-spacing:.06em;color:var(--stumm)}
.rundenstand.komplett{border-color:var(--blau);color:var(--blau)}

/* ──────────────────────────────── Rangliste ─────────────────────────────── */
.tabellenkarte{padding:16px 16px 6px}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--stumm);font-weight:500;padding:0 6px 9px 0;
  border-bottom:1px solid var(--linie);white-space:nowrap}
th.r,td.r{text-align:right;padding-right:0}
/* Runden und Punkte stehen nebeneinander rechts — ohne Luft dazwischen
   lesen sich die beiden Spaltentitel als ein Wort. */
th.r + th.r,td.brk + td.total{padding-left:14px}
td{padding:12px 6px 12px 0;border-bottom:1px solid color-mix(in srgb, var(--linie) 50%, transparent);font-size:16px}
tr:last-child td{border-bottom:none}
td.pos{width:34px;font-family:'Big Shoulders Display',Impact,sans-serif;font-size:24px;
  font-weight:800;color:var(--stumm)}
tr.fuehrt td.pos{color:var(--gelb-schrift)} tr.fuehrt td.name{font-weight:700}
tr.ich td.name{color:var(--gelb-schrift)}
td.total{font-family:'Big Shoulders Display',Impact,sans-serif;font-size:28px;font-weight:800;
  line-height:1}
td.brk{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--stumm);
  white-space:nowrap}

.siegerkarte{border:1px solid var(--gelb);background:color-mix(in srgb, var(--gelb) 10%, transparent);
  border-radius:var(--radius);padding:18px;margin-bottom:12px}
.siegerkarte .eyebrow{color:var(--gelb-schrift)}
.siegerkarte b{display:block;font-family:'Big Shoulders Display',Impact,sans-serif;
  font-size:40px;font-weight:800;line-height:1;text-transform:uppercase;margin:6px 0 4px}

/* ──────────────────────────────── Startseite ────────────────────────────── */
header.top.schmal{padding:22px 0 8px}

.jetztkarte{border:1px solid var(--gelb);border-radius:var(--radius);
  background:color-mix(in srgb, var(--gelb) 9%, transparent);padding:16px;margin-bottom:12px}
.jetztkarte.fertig{border-color:var(--blau);background:color-mix(in srgb, var(--blau) 9%, transparent)}
/* Statt der Karte, solange der Ort geheim ist (Turnier III, 26.10.2026). */
.ort-folgt{display:flex;flex-direction:column;gap:4px;padding:24px 16px;
  border:1px dashed var(--linie);border-radius:var(--radius);background:var(--flaeche);text-align:center}
.ort-folgt b{font-size:20px}
.jetztkarte b{display:block;font-family:'Big Shoulders Display',Impact,sans-serif;
  font-size:clamp(30px,9vw,42px);font-weight:800;line-height:.95;text-transform:uppercase;
  margin:6px 0 4px}
.jetztzeile{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  font-size:11.5px;letter-spacing:.06em;color:var(--stumm);margin:10px 0 8px}
.balken{height:5px;background:var(--flaeche-2);border-radius:3px;overflow:hidden;margin:8px 0 6px}
.balken i{display:block;height:100%;background:var(--gelb);border-radius:3px;
  transition:width .3s ease}
.jetztkarte.fertig .balken i{background:var(--blau)}

.kartentitel{display:flex;justify-content:space-between;align-items:baseline;
  gap:10px;margin-bottom:12px}
.minilink{background:none;color:var(--blau);font-family:'IBM Plex Mono',monospace;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:0}

.topzeile{display:flex;align-items:center;gap:12px;padding:11px 0;
  border-bottom:1px solid color-mix(in srgb, var(--linie) 50%, transparent)}
.topzeile:last-child{border-bottom:none}
.toprang{flex:none;width:24px;font-family:'Big Shoulders Display',Impact,sans-serif;
  font-size:24px;font-weight:800;color:var(--stumm)}
.topzeile.erster .toprang{color:var(--gelb-schrift)}
.topzeile.erster .topname{font-weight:700}
.topzeile.ich .topname{color:var(--gelb-schrift)}
.topname{flex:1;font-size:16.5px;min-width:0}
.toppunkte{font-family:'Big Shoulders Display',Impact,sans-serif;font-size:26px;
  font-weight:800;line-height:1}
.siegerzeile{margin-top:12px;padding:10px 12px;border-radius:var(--radius);
  background:color-mix(in srgb, var(--gelb) 14%, transparent);font-size:14.5px}

/* ───────────────────────────── Der 29. August ───────────────────────────── */
/* Erscheint nur an einem einzigen Tag im Jahr. */
.gebkarte{border:1px solid var(--gelb);border-radius:var(--radius);
  background:linear-gradient(150deg, color-mix(in srgb, var(--gelb) 20%, transparent), color-mix(in srgb, var(--gelb) 7%, transparent));
  padding:18px;margin-bottom:12px;position:relative;overflow:hidden;
  display:flex;align-items:center;gap:16px}
.gebtext{min-width:0}
.gebkarte b{display:block;font-family:'Big Shoulders Display',Impact,sans-serif;
  font-size:clamp(26px,7.5vw,38px);font-weight:800;line-height:.98;
  text-transform:uppercase;margin:6px 0 6px}
.gebkarte .small{color:var(--kreide);opacity:.8}

/* Das Porträt: rund, mit gelbem Ring — wie ein Spielball neben dem Text. */
.gebbild{flex:none;width:88px;height:88px;border-radius:50%;object-fit:cover;
  border:2px solid var(--gelb);box-shadow:0 3px 14px rgba(0,0,0,.35)}

/* Ohne Bild treten die zwei Spielbälle aus dem Zeichen an seine Stelle. */
.gebkarte.ohnebild::after{content:'';position:absolute;right:-26px;top:-26px;
  width:96px;height:96px;border-radius:50%;background:var(--gelb);opacity:.16}
.gebkarte.ohnebild::before{content:'';position:absolute;right:44px;top:-8px;
  width:34px;height:34px;border-radius:50%;background:var(--kreide);opacity:.2}

/* ─────────────────────────────────── Karte ──────────────────────────────── */
.kartenkarte{padding:16px 14px 12px}
.karte{width:100%;display:block;background:var(--kartengrund);border-radius:2px}
.karte .k-seeflaeche path{fill:var(--k-see);stroke:none}
.karte .k-fluss path{fill:none;stroke:var(--k-fluss);stroke-width:7;stroke-linecap:round;
  stroke-linejoin:round}
.karte .k-gruen path{fill:var(--k-gruen);stroke:none}
/* Häuser: nur Fläche, keine Kontur — sonst wird die Karte zum Gitter. */
.karte .k-haus path{fill:var(--k-haus);stroke:none}
.karte .k-gleis path{fill:none;stroke:var(--k-gleis);stroke-width:1}
.karte .k-strasse_klein path{fill:none;stroke:var(--k-strasse);stroke-width:1.4}
.karte .k-strasse_gross path{fill:none;stroke:var(--k-hauptstrasse);stroke-width:2.6}

.karte .m-weg-schatten{fill:none;stroke:var(--kartengrund);stroke-width:11;
  stroke-linecap:round;stroke-linejoin:round}
.karte .m-weg{fill:none;stroke:var(--gelb);stroke-width:4.5;stroke-linecap:round;
  stroke-linejoin:round;stroke-dasharray:14 9}
.karte .m-ring{fill:var(--kartengrund);stroke:var(--kreide);stroke-width:3}
.karte .m-nr{fill:var(--kreide);font-family:'Big Shoulders Display',Impact,sans-serif;
  font-size:19px;font-weight:800}
.karte .m-punkt.start .m-ring,.karte .m-punkt.ziel .m-ring{stroke:var(--blau)}
.karte .m-punkt.start .m-nr,.karte .m-punkt.ziel .m-nr{fill:var(--blau);font-size:15px}
.karte .m-punkt.durch .m-ring{stroke:var(--linie)}
.karte .m-punkt.durch .m-nr{fill:var(--stumm)}
.karte .m-punkt.jetzt .m-ring{fill:var(--gelb);stroke:var(--gelb)}
.karte .m-punkt.jetzt .m-nr{fill:var(--auf-gelb)}
/* Der Ortsname neben der Marke. Damit er über Häusern und Strassen lesbar
   bleibt, bekommt er eine Kontur in der Kartenfarbe — kein Schatten, sondern
   ein Rand, der die Karte hinter der Schrift zurücktreten lässt. */
.karte .m-name{font-family:'IBM Plex Mono',monospace;font-size:11px;
  font-weight:600;letter-spacing:.02em;fill:var(--kreide);
  stroke:var(--kartengrund);stroke-width:3.5;paint-order:stroke;
  stroke-linejoin:round}
.karte .m-punkt.durch .m-name{fill:var(--stumm)}
.karte .m-puls{fill:var(--gelb);opacity:.2}
@media(prefers-reduced-motion:no-preference){
  .karte .m-puls{animation:pulsen 2.4s ease-in-out infinite}
}
@keyframes pulsen{0%,100%{opacity:.13;r:22}50%{opacity:.28;r:29}}
.kartenfuss{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:9px 2px 0;font-size:10.5px;letter-spacing:.04em;color:var(--stumm)}

/* Etappen: wie lange von Station zu Station — und wo es zeitlich eng wird. */
.etappen{margin-top:12px;border-top:1px solid var(--linie);padding-top:6px}
.etappe{display:flex;justify-content:space-between;gap:10px;align-items:baseline;
  padding:6px 0;font-size:13.5px;border-bottom:1px solid color-mix(in srgb, var(--linie) 40%, transparent)}
.etappe:last-child{border-bottom:none}
.e-weg{color:var(--stumm);min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.e-zeit{flex:none;font-size:12.5px}
.etappe.knapp .e-zeit{color:var(--rot)}
.etappe.knapp .e-weg{color:var(--kreide)}

/* ───────────────────────────────── Programm ─────────────────────────────── */
.ablauf{list-style:none;margin:0;padding:0}
.ablauf li{display:flex;gap:14px;padding:11px 0;border-bottom:1px solid color-mix(in srgb, var(--linie) 50%, transparent)}
.ablauf li:last-child{border-bottom:none}
.ablauf .zeit{flex:none;width:56px;font-family:'IBM Plex Mono',monospace;font-size:13px;
  color:var(--gelb-schrift);padding-top:2px}
.ablauf .was{font-size:15.5px}
.ablauf .was small{display:block;color:var(--stumm);font-size:13px}
.ablauf li.durch .zeit,.ablauf li.durch .was{opacity:.42}
.ablauf li.jetzt{margin:0 -10px;padding:11px 10px;background:color-mix(in srgb, var(--gelb) 11%, transparent);
  border-radius:var(--radius)}
.ablauf li.jetzt .zeit{color:var(--gelb-schrift);font-weight:600}
.ablauf li.jetzt .was{font-weight:600}
/* Der Ortsname führt auf die Karte — erkennbar am Punkt dahinter. */
.ortlink{color:inherit;text-decoration:none;border-bottom:1px solid var(--linie)}
.ortlink:active{border-bottom-color:var(--gelb-schrift)}
.ortlink .pin{color:var(--gelb-schrift);font-size:11px;margin-left:5px;vertical-align:2px;
  border:none}

/* Die Punkte als Bild: dieselbe Farbstufung wie beim Erfassen — gelb für den
   Siegerball, kreide für den zweiten, gedämpft für den dritten, dunkel für
   den, der leer ausgeht. Alle Farben kommen aus den Variablen und schalten
   deshalb mit Tag und Nacht mit. */
.punktebild{margin:0 0 14px}
.punktebild svg{width:100%;height:auto;display:block}
.punktebild figcaption{font-size:12.5px;color:var(--stumm);padding:7px 2px 0;
  line-height:1.45}
.pb-boden{fill:var(--asphalt)}
.pb-linie line{stroke:var(--stumm);stroke-width:1.5;stroke-dasharray:4 4}
.pb-marker{fill:var(--kreide);stroke:var(--stumm);stroke-width:1.5}
.pb-markertext{fill:var(--stumm);font-family:'IBM Plex Mono',monospace;font-size:10px;
  letter-spacing:.12em;text-transform:uppercase}
/* Die Abstufung läuft über die Deckkraft derselben Farbe — so bleibt der
   Kontrast zum Boden in beiden Modi erhalten: bei Nacht helle Bälle auf
   Asphalt, bei Tag dunkle auf Kreide. */
.pb-ball{stroke:var(--asphalt);stroke-width:2}
.pb-drei,.pb-sechs{fill:var(--gelb)}
.pb-zwei{fill:var(--kreide)}
/* Gemessen am 30.8.2026 auf der Landingpage, wo dieselbe Grafik steht: Die
   «1» lag bei 4,44 und die «0» bei 2,88 zu ihrem Ball — verlangt sind 4,5.
   Heller wird nur so viel wie nötig; die Ziffer bekommt die volle
   Schriftfarbe. Dass der vierte Ball dunkler ist, sagt genug. */
.pb-eins{fill:var(--kreide);opacity:.62}
/* Der vierte Ball bleibt dunkel — das trägt die Bedeutung «zu weit weg,
   zählt nichts». Seine Fläche allein käme damit nur auf 1,7 zum Grund;
   sichtbar wird er über eine Kontur, nicht über mehr Helligkeit. */
.pb-null{fill:var(--kreide);opacity:.16;stroke:var(--stumm);stroke-width:1.5}
.pb-zahl{font-family:'Big Shoulders Display',Impact,sans-serif;font-size:24px;
  font-weight:800;fill:var(--kreide)}
/* Zahlen: auf Gelb immer dunkel, auf dem hellen Ball in der Bodenfarbe —
   also im Nachtmodus dunkel, im Tagmodus hell. */
.pb-auf-gelb{fill:var(--auf-gelb)}
.pb-auf-hell{fill:var(--asphalt)}
.pb-sechs{stroke:var(--gelb);stroke-width:3;stroke-dasharray:none}
.pb-funke line{stroke:var(--gelb);stroke-width:2.5;stroke-linecap:round}
.pb-hinweis{fill:var(--gelb);font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase}

.regel{display:flex;align-items:center;gap:13px;padding:8px 0}
.regel .pkt{flex:none;width:38px;height:38px;display:flex;align-items:center;
  justify-content:center;background:var(--gelb);color:var(--auf-gelb);border-radius:50%;
  font-family:'Big Shoulders Display',Impact,sans-serif;font-size:22px;font-weight:800}
/* Die Verdopplung ist der Sonderfall — sie bekommt einen Ring statt einer
   eigenen Farbe, damit alle Punktzahlen gleich kräftig gelb bleiben. */
.regel.doppelt .pkt{box-shadow:0 0 0 3px var(--asphalt), 0 0 0 5px var(--gelb)}
.regel.doppelt{margin-top:6px}
.regel span{font-size:15px}

.sponsorlogo{display:block;max-width:170px;width:100%;height:auto;
  filter:brightness(0) invert(1);opacity:.85}
body.tag .sponsorlogo{filter:brightness(0);opacity:.75}
#sponsorKarte .eyebrow{color:var(--kraft-schrift)}
/* Fusszeile der App: Impressum · Datenschutz · Admin, darüber dem Vermerk
   (Wagis Standard). Seit dem 24.9.2026 gibt es die beiden Rechtsseiten. */
.fusslinks{text-align:center;margin:24px 0 0;font-family:'IBM Plex Mono',monospace;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--stumm)}
.fusslinks a{color:var(--stumm);text-decoration:none;border-bottom:1px solid var(--linie);
  padding-bottom:1px}
.fusslinks a:active{color:var(--kreide)}

/* «MADE BY W♥GI» — wie in der Smovie App und der Kraft App (Wagi, 22.9.2026):
   zentriert, leise, das Herz steht für das A und ist Zeichnung, nicht Text.
   Vorgelesen wird «Made by Wagi, danielwagner.ch». Ein einziger Link. */
.fuss-vermerk{text-align:center;margin:26px 0 4px}
.madeby{display:inline-flex;flex-direction:column;align-items:center;gap:2px;
  min-height:48px;padding:4px 16px;font-family:'IBM Plex Mono',monospace;font-size:11px;
  line-height:1.5;color:var(--stumm);text-decoration:none}
.madeby-zeile{letter-spacing:.12em;font-weight:600}
.madeby-domain{border-bottom:1px solid var(--linie)}
.madeby:hover .madeby-domain,.madeby:focus-visible .madeby-domain{color:var(--kreide);border-color:var(--kreide)}
.madeby .herz{display:inline-block;width:1.05em;height:1.05em;margin:0 .09em 0 -.1em;
  vertical-align:-.12em;transform:translate(.03em,.04em);fill:var(--rot)}
.madeby .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}


/* ───────────────────────────────── Regeln ───────────────────────────────── */
.regeltext{font-size:15.5px;line-height:1.55;margin:0 0 12px}
.regeltext:last-child{margin-bottom:0}
.regeltext b{font-weight:700}

.beispiel{border:1px solid color-mix(in srgb, var(--blau) 35%, transparent);border-radius:var(--radius);
  background:color-mix(in srgb, var(--blau) 7%, transparent);padding:12px 14px;margin-top:14px}
.beispiel .eyebrow{display:block;margin-bottom:6px;color:var(--blau)}

.chefliste{margin:14px 0}
.chefzeile-regel{display:flex;align-items:center;gap:11px;padding:7px 0;
  border-bottom:1px solid color-mix(in srgb, var(--linie) 50%, transparent);font-size:15.5px}
.chefzeile-regel:last-child{border-bottom:none}
.chefzeile-regel .set{flex:none;width:30px;height:30px;display:flex;
  align-items:center;justify-content:center;background:var(--flaeche-2);
  border-radius:var(--radius);font-family:'Big Shoulders Display',Impact,sans-serif;
  font-size:19px;font-weight:800}

.regelstand{margin-top:14px;padding:12px 14px;border-radius:var(--radius);
  background:color-mix(in srgb, var(--gelb) 12%, transparent)}
.regelstand b{display:block;font-family:'Big Shoulders Display',Impact,sans-serif;
  font-size:26px;font-weight:800;line-height:1.05;text-transform:uppercase;
  margin:5px 0 3px}

.hausregeln{list-style:none;margin:0;padding:0}
.hausregeln li{position:relative;padding:8px 0 8px 22px;font-size:15px;
  border-bottom:1px solid color-mix(in srgb, var(--linie) 50%, transparent)}
.hausregeln li:last-child{border-bottom:none}
.hausregeln li::before{content:'—';position:absolute;left:0;color:var(--gelb-schrift)}

/* Die Fusszeile trägt vier Reiter, für die Leitung fünf. */
.tabbar button{padding-left:2px;padding-right:2px;font-size:10.5px;letter-spacing:.08em}

/* ────────────────────────────────── Fotos ───────────────────────────────── */
.fotoknopf{text-align:center;cursor:pointer;margin-bottom:0}
#fotoAktion{padding:12px}
.fotogitter{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.fotokachel{margin:0;position:relative;background:var(--flaeche);
  border:1px solid var(--linie);border-radius:var(--radius);overflow:hidden}
.fotokachel img{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;
  background:var(--flaeche-2);cursor:zoom-in}
/* Die Knöpfe rutschen auf eine zweite Zeile, statt den Namen wegzudrücken.
   Mit dem Startseite-Knopf blieb auf einem 320er Gerät sonst ein Buchstabe
   übrig — dann weiss niemand mehr, wer das Bild gemacht hat. */
.fotokachel figcaption{display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding:7px 9px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;
  letter-spacing:.04em;color:var(--stumm)}
.fotokachel figcaption:has(.fotostart) span{flex:1 1 100%}
.fotokachel figcaption span{flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.fotoweg{flex:none;width:22px;height:22px;border-radius:50%;background:none;
  border:1px solid var(--linie);color:var(--stumm);font-size:15px;line-height:1;
  display:flex;align-items:center;justify-content:center}
.fotoweg:active{background:var(--rot);border-color:var(--rot);color:#fff}

/* Auf der Startseite: gezeigt wie in der Werkstatt — Rahmen ringsum, nie eine
   farbige Kante an einer Seite. Der Knopf trägt sein Wort, kein Symbol: Was
   ein Bild öffentlich macht, soll man lesen können, bevor man es antippt. */
.fotokachel.offen{outline:2px solid var(--gelb);outline-offset:-2px}
.fotostart{flex:none;height:24px;padding:0 9px;border-radius:12px;
  background:none;border:1px solid var(--linie);color:var(--stumm);
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.07em;
  text-transform:uppercase;line-height:1;
  display:flex;align-items:center;white-space:nowrap;
  transition:background .16s var(--aus), color .16s var(--aus),
             border-color .16s var(--aus)}
.fotostart[aria-pressed="true"]{background:var(--gelb);border-color:var(--gelb);
  color:var(--auf-gelb)}

/* Bild gross: füllt den Schirm. Wischen, Pfeile oder Tastatur blättern. */
.fotogross{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.95);
  display:flex;align-items:center;justify-content:center;padding:12px 8px 66px}
.fotogross img{max-width:100%;max-height:100%;border-radius:2px;
  animation:gr-rein .18s ease}
@keyframes gr-rein{from{opacity:0}to{opacity:1}}

.gr-zu{position:absolute;top:calc(10px + env(safe-area-inset-top));right:12px;
  width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.12);
  color:#fff;font-size:24px;line-height:1;display:flex;align-items:center;
  justify-content:center}
.gr-pfeil{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:74px;
  background:rgba(255,255,255,.1);color:#fff;font-size:30px;line-height:1;
  display:flex;align-items:center;justify-content:center;border-radius:4px}
.gr-pfeil.links{left:6px}
.gr-pfeil.rechts{right:6px}
.gr-pfeil.aus{opacity:.18;pointer-events:none}
.gr-pfeil:active{background:rgba(255,255,255,.22)}

.gr-fuss{position:absolute;left:0;right:0;bottom:calc(12px + env(safe-area-inset-bottom));
  text-align:center;color:#fff;font-size:13.5px;padding:0 60px}
.gr-fuss b{font-weight:600}
.gr-zaehler{display:inline-block;margin-left:8px;font-family:'IBM Plex Mono',monospace;
  font-size:11.5px;opacity:.66}
.gr-karte{color:var(--blau);margin-left:8px;font-size:12.5px}

/* Auf schmalen Geräten enger — «Spielplan» und «Rangliste» sind lange Wörter. */
.tabbar button{padding-left:1px;padding-right:1px;font-size:10px;letter-spacing:.04em}


/* ───────────────────────────────── Setup ────────────────────────────────── */
.zaehler{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--stumm);
  padding:9px 0 12px}
.zaehler.gut{color:var(--gruen)} .zaehler.schlecht{color:var(--rot)}
.chefzeile{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.chefzeile .set{flex:none;width:34px;height:34px;display:flex;align-items:center;
  justify-content:center;background:var(--flaeche-2);border-radius:var(--radius);
  font-family:'Big Shoulders Display',Impact,sans-serif;font-size:20px;font-weight:800}
.chefzeile select{flex:1}
.stationzeile{margin-bottom:14px}
.stationzeile .nr{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--stumm);margin-bottom:6px;display:block}
.stationzeile input{margin-bottom:6px}
.ortwarnung{display:block;font-size:12px;color:var(--gelb-schrift);padding:2px 0 4px}
/* Die Varianten-Tabelle in der Leitung: kompakt, damit alle sieben
   Gruppengrössen auf einen Blick nebeneinanderstehen. */
.varianten{margin-top:16px;padding-top:14px;border-top:1px solid var(--linie)}
.varianten table{margin-top:8px}
.varianten th{font-size:9.5px}
.varianten td{padding:8px 6px 8px 0;font-size:15px;border-bottom:1px solid color-mix(in srgb, var(--linie) 35%, transparent)}
.varianten td.klein{font-size:12px;color:var(--stumm)}
.varianten td.mono{font-family:'IBM Plex Mono',monospace}
.varianten tr.ich td{color:var(--gelb-schrift);font-weight:600}
.varianten td.schlecht{color:var(--rot)}

/* Anmeldung: die Namen der Mitspielenden als antippbare Kacheln. */
.namenwahl{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.namensknopf{padding:11px 13px;background:var(--flaeche-2);color:var(--kreide);
  border:1px solid var(--linie);border-radius:3px;font:inherit;font-size:15px;
  cursor:pointer;text-align:left}
.namensknopf:hover,.namensknopf:active{border-color:var(--gelb-schrift);color:var(--gelb-schrift)}

/* Der eigene Spielplan auf der Startseite. */
.mp-jetzt{padding:14px;background:color-mix(in srgb, var(--gelb) 13%, transparent);border-radius:3px}
.mp-jetzt.pause{background:var(--flaeche-2)}
.mp-jetzt b{display:block;font-family:'Big Shoulders Display',Impact,sans-serif;
  font-size:30px;line-height:1.05;margin-top:2px}
.mp-jetzt .small{display:block;margin-top:4px}
ol.meinplan{list-style:none;margin:12px 0 0;padding:0}
ol.meinplan li{display:flex;gap:12px;align-items:baseline;padding:10px 0;
  border-bottom:1px solid color-mix(in srgb, var(--linie) 40%, transparent)}
ol.meinplan li:last-child{border-bottom:none}
ol.meinplan li.naechste{color:var(--kreide)}
ol.meinplan li.naechste .mp-runde{color:var(--gelb-schrift)}
.mp-runde{min-width:74px;color:var(--stumm);font-size:13px;white-space:nowrap}
.mp-was b{font-size:16px}
.mp-was .small{display:block;margin-top:2px}

/* Ein Schalter, der wie ein Nebensatz aussieht — für den seltenen Fall. */
.linkknopf{background:none;border:none;padding:6px 0 0;color:var(--stumm);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;font:inherit}
.linkknopf:hover{color:var(--kreide)}

.kennzahl{display:flex;justify-content:space-between;padding:7px 0;
  border-bottom:1px solid color-mix(in srgb, var(--linie) 50%, transparent);font-size:14px}
.kennzahl:last-child{border-bottom:none}
.kennzahl b{font-family:'IBM Plex Mono',monospace;font-weight:600}
.kennzahl b.gut{color:var(--gruen)}

/* ───────────────────────────────── Tableiste ────────────────────────────── */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:5;background:var(--leiste);
  border-top:1px solid var(--linie);box-shadow:var(--leiste-schatten);display:flex;
  padding-bottom:env(safe-area-inset-bottom)}
.tabbar button{position:relative;flex:1;background:none;color:var(--stumm);
  padding:11px 4px 12px;
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase}
.tabbar button[aria-current=true]{color:var(--kreide)}
/* Der gelbe Strich, der bisher das ganze Zeichen war, liegt jetzt als Marke
   oben an der Kante — das Icon darunter bleibt lesbar (Wagi, 22.9.2026). */
.tabbar button[aria-current=true]::before{content:'';position:absolute;top:0;
  left:50%;margin-left:-11px;width:22px;height:3px;background:var(--gelb)}
/* Gelb als Fläche (die Marke oben), als Strich der dunklere Schriftton —
   sonst steht das aktive Icon tagsüber mit 1,8:1 auf dem hellen Grund. */
.tabbar button[aria-current=true] .ico{color:var(--gelb-schrift)}
.tabbar .ico{display:block;width:23px;height:23px;margin:0 auto 5px}

/* ─────────────────────── Anmeldungen in der Leitung ─────────────────────── */
/* Eine Zeile pro Anfrage: Name und Stand, darunter die Nummer zum Antippen,
   daneben die zwei Antworten. Die Knöpfe sind hier klein — sie stehen zu
   zweit in einer Zeile und nicht allein unter einer Karte. */
.anmeldezeile{padding:11px 0;
  border-bottom:1px solid color-mix(in srgb, var(--linie) 50%, transparent)}
.anmeldezeile:last-child{border-bottom:none}
.anmeldename{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.anmeldenummer{display:inline-block;margin-top:2px;color:var(--kreide);
  font-family:'IBM Plex Mono',monospace;font-size:13.5px;
  text-decoration:none;border-bottom:1px solid var(--linie)}
.anmeldetasten{display:flex;gap:8px;align-items:center;margin-top:9px}
.anmeldetasten .btn{width:auto;padding:9px 14px;font-size:13px}
.anmeldezeile.dabei .anmeldename b{color:var(--gelb-schrift)}
.anmeldezeile.abgesagt .anmeldename{opacity:.6}
.anmeldezeile.warteliste .anmeldename .muted{color:var(--blau)}

/* ──────────────────────────────── Durchmarsch ───────────────────────────── */
/* Alle drei Bälle in einer Runde — das kommt selten vor und wird gefeiert. */
.durchmarsch{position:fixed;inset:auto 0 84px;z-index:30;display:flex;
  align-items:center;gap:14px;margin:0 14px;padding:14px 16px;
  background:var(--gelb);color:var(--auf-gelb);border-radius:var(--radius);
  box-shadow:0 8px 30px rgba(0,0,0,.4);
  animation:dm-rein .32s cubic-bezier(.2,.9,.3,1.25) forwards}
.durchmarsch.weg{animation:dm-raus .7s ease forwards}
.dm-ball{flex:none;width:34px;height:34px;border-radius:50%;
  background:radial-gradient(circle at 32% 30%, #fff 0 12%, var(--auf-gelb) 55%, #000 100%);
  animation:dm-rollen 1s cubic-bezier(.25,.6,.3,1)}
.dm-text{min-width:0}
.dm-wort{display:block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;
  letter-spacing:.22em;text-transform:uppercase;opacity:.72}
.dm-text b{display:block;font-family:'Big Shoulders Display',Impact,sans-serif;
  font-size:27px;font-weight:800;line-height:1.02;text-transform:uppercase;
  margin:1px 0 2px}
.dm-punkte{font-size:11.5px;opacity:.78}
@keyframes dm-rein{from{transform:translateY(120%);opacity:0}to{transform:none;opacity:1}}
@keyframes dm-raus{to{transform:translateY(130%);opacity:0}}
@keyframes dm-rollen{from{transform:translateX(-120px) rotate(-540deg)}to{transform:none}}

/* Siebenmal auf den Titel: ein Spielball kommt vorbeigerollt. */
.streunerball{position:fixed;left:-70px;bottom:96px;z-index:29;width:44px;height:44px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 32% 30%, #fff 0 10%, var(--gelb) 46%, #7a5c05 100%);
  box-shadow:0 6px 16px rgba(0,0,0,.35);
  animation:sk-rollen 2.4s cubic-bezier(.35,.05,.6,1) forwards}
@keyframes sk-rollen{
  to{transform:translateX(calc(100vw + 120px)) rotate(1440deg)}}

/* ───────────────────────────────── Chronik ──────────────────────────────── */
/* Die früheren Abende, unter der laufenden Rangliste. Sie sollen sich wie ein
   Nachschlagewerk anfühlen und nicht mit dem heutigen Abend um Aufmerksamkeit
   streiten — darum zugeklappt, schmaler gesetzt, ohne Signalfarbe ausser beim
   Sieger. */
.abend{border-top:1px solid var(--linie)}
.abend:first-of-type{border-top:none}
.abend > summary{display:flex;align-items:baseline;gap:10px;padding:14px 22px 14px 0;
  cursor:pointer;position:relative;list-style:none}
.abend > summary::-webkit-details-marker{display:none}
/* Eigener Pfeil: der von Haus aus mitgelieferte sitzt je nach Browser
   woanders und lässt sich nicht auf die Grundlinie bringen. */
.abend > summary::after{content:"";position:absolute;right:2px;top:22px;
  width:7px;height:7px;border-right:2px solid var(--stumm);
  border-bottom:2px solid var(--stumm);transform:rotate(45deg);
  transition:transform .18s ease}
.abend[open] > summary::after{transform:rotate(-135deg)}
.abendkopf{flex:1;min-width:0}
.abendkopf b{display:block;font-family:'Big Shoulders Display',Impact,sans-serif;
  font-size:25px;font-weight:800;line-height:1;text-transform:uppercase}
.abendsieger{font-family:'Big Shoulders Display',Impact,sans-serif;font-size:20px;
  font-weight:700;text-transform:uppercase;color:var(--gelb-schrift);
  text-align:right;line-height:1}
.abendleib{padding-bottom:14px}
.abendfakten{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--stumm);
  margin:0 0 8px}
.abendweg{font-size:13.5px;color:var(--stumm);margin:8px 0 4px;line-height:1.5}
.abendrang{margin-top:6px}
.abendrang td{padding:8px 6px 8px 0;font-size:15px}
.abendrang td.pos{font-size:19px;width:28px}
.abendrang td.total{font-size:22px}
.lueckennotiz{margin:10px 0 0;line-height:1.5}

/* ── Die Seite eines abgeschlossenen Turniers (31.8.2026) ─────────────────── */
.siegerzeile{margin:10px 0 0;line-height:1.35}
.siegerzeile .eyebrow{display:block;color:var(--gelb-schrift);margin-bottom:2px}
.siegerzeile b{font-family:'Big Shoulders Display',Impact,sans-serif;
  font-size:26px;font-weight:800;text-transform:uppercase;line-height:1}

/* Der Spielplan. Eine Runde ist eine Gruppe von vier Partien — sie gehören
   sichtbar zusammen, sonst liest man achtzig Zeilen am Stück. */
.planrunde{padding-top:12px;margin-top:12px;border-top:1px solid var(--linie)}
.planrunde:first-of-type{padding-top:0;margin-top:6px;border-top:none}
.planrundetitel{display:block;color:var(--gelb-schrift);margin:0 0 6px}
.planzeile{display:flex;gap:10px;align-items:baseline;padding:5px 0}
.plangruppe{flex:none;width:22px;height:22px;display:flex;align-items:center;
  justify-content:center;background:var(--flaeche-2);border-radius:var(--radius);
  font-family:'Big Shoulders Display',Impact,sans-serif;font-weight:800;
  font-size:15px;line-height:1}
.planwer{flex:1;min-width:0;font-size:14.5px;line-height:1.35}
.planwer .small{display:block;margin-top:1px}

/* Das Spielerarchiv klappt auf — bei einem Abend sind es 15 Zeilen, bei zehn
   Abenden werden es mehr, und die Rangliste des laufenden Turniers soll
   darüber nicht nach unten rutschen. */
.kartentitel.aufklapp{display:flex;width:100%;justify-content:space-between;
  align-items:baseline;background:none;border:none;padding:0;font:inherit;
  cursor:pointer;text-align:left;color:inherit;min-height:40px}
.kartentitel.aufklapp .eyebrow{color:var(--stumm)}
.kartentitel.aufklapp[aria-expanded="true"] .eyebrow{color:var(--kreide)}

/* ───────────────────────── Spielerarchiv und Profil ─────────────────────── */
.leutezeile{border-bottom:1px solid color-mix(in srgb, var(--linie) 50%, transparent)}
.leutezeile:last-of-type{border-bottom:none}
.leutekopf{display:flex;align-items:center;gap:12px;width:100%;padding:10px 0;
  background:none;border:none;font:inherit;color:inherit;text-align:left;
  cursor:pointer;min-height:56px}
.kopfbild{width:38px;height:38px;border-radius:50%;flex:0 0 38px;object-fit:cover;
  /* Feine Kante statt Schatten: Ohne sie verschwimmt ein helles Bild mit der
     Fläche. Reines Weiss bei Nacht, reines Schwarz bei Tag — ein getöntes
     Grau läse sich wie Schmutz am Bildrand. */
  outline:1px solid rgba(255,255,255,.12);outline-offset:-1px}
body.tag .kopfbild{outline-color:rgba(0,0,0,.12)}
.kopfbild.leer{display:flex;align-items:center;justify-content:center;
  background:var(--flaeche-2);color:var(--stumm);
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.04em}
.leutename{flex:1;min-width:0;font-weight:600;line-height:1.25}
.leutename .small{display:block;font-weight:400}
.leutezeile.fuehrt .leutename{color:var(--gelb-schrift)}
.leutezeile.ich .leutename{font-weight:700}
.leutepunkte{font-family:'Big Shoulders Display',Impact,sans-serif;font-size:24px;
  font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.leuteleib{padding:6px 0 18px 50px}

/* ── Das Profil (31.8.2026, Wagi: «schöner, klarer») ──────────────────────
   Vorher lief alles in drei Zeilen Fliesstext zusammen: Angaben, Satz und
   Turniere untereinander, alles gleich grau. Jetzt hat jedes seinen Ort —
   der Satz spricht, der Steckbrief ordnet, die Turniere zählen auf. */

/* Der eigene Satz zuerst: Er ist die Stimme der Person, nicht eine Angabe
   über sie. Kein farbiger Rand links — Hervorhebung über Fläche. */
.spruch{margin:0 0 18px;padding:12px 14px;border-radius:var(--radius);
  background:var(--flaeche-2);font-size:15.5px;line-height:1.5}
.spruch::before{content:'«'} .spruch::after{content:'»'}

/* Steckbrief: Beschriftung links, Wert rechts. Zwei Spalten statt einer
   Aufzählung mit Mittelpunkten — man sieht auf einen Blick, was fehlt. */
.steckbrief{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;
  margin:0 0 18px;align-items:baseline}
.steckbrief dt{padding-top:2px}
.steckbrief dd{margin:0;font-size:15px}

/* Die Turniere. Eine Zeile je Turnier: wo und wann gross, wie es lief klein
   darunter. */
.turnierliste .gruppentitel{display:block;color:var(--gelb-schrift);
  margin:0 0 6px}
.turnierzeile{padding:8px 0;border-top:1px solid color-mix(in srgb, var(--linie) 50%, transparent)}
.turnierzeile:first-of-type{border-top:none;padding-top:0}
.turnierort{display:block;font-size:15px;font-weight:600;line-height:1.3}
.turnierzeile .small{display:block;margin-top:2px}
.profilform{margin-top:12px}
.dateiknopf{cursor:pointer}
.profilfrage{border:1px solid var(--gelb)}
.profilfrage .eyebrow{color:var(--gelb-schrift)}

/* Protokoll in der Leitung. Wer an einem fremden Profil war, bekommt Fläche
   statt einer farbigen Kante — farbige Ränder links sind hier tabu. */
.logzeile{padding:10px 0;border-top:1px solid var(--linie)}
.logzeile:first-of-type{border-top:none}
.logzeile.fremd{background:rgba(226,87,76,.10);margin:0 -12px;padding:10px 12px}
/* Auf der getönten Fläche reicht das Stumm-Grau nicht mehr: gemessen 4,25 : 1,
   verlangt sind 4,5. Nebentext und Knopf bekommen dort die volle Schriftfarbe —
   die Hierarchie trägt die Schriftgrösse. */
.logzeile.fremd .muted,
.logzeile.fremd .linkknopf{color:var(--kreide)}
.logzeile .linkknopf{margin-top:4px}

.zugangzeile{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 0;border-top:1px solid var(--linie);flex-wrap:wrap}
.zugangzeile:first-of-type{border-top:none}
.zugangknoepfe{display:flex;gap:14px;flex:0 0 auto}
.einladung{padding:12px;background:var(--flaeche-2);border-radius:var(--radius);
  margin:10px 0 14px}
.einladung .zugangknoepfe{margin-top:8px}
/* ─────────────────────── Werkstatt (Verwaltung) ─────────────────────────
   Muster aus der Pardatsch-App, in die Sprache von Street Boccia übersetzt:
   ein Menü mit Zählern, dahinter je ein eigener Bildschirm. Eine lange Seite
   mit allem darauf war der erste Versuch — dort verliert man den Überblick. */
.gang{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gelb-schrift);margin:26px 0 8px}
.reg{display:flex;align-items:baseline;gap:10px;width:100%;min-height:56px;
  padding:14px 16px;margin-bottom:8px;background:var(--flaeche);
  border:1px solid var(--linie);border-radius:var(--radius);
  font:inherit;color:var(--kreide);text-align:left;cursor:pointer}
.reg b{font-weight:600}
.reg .pkt{flex:1;border-bottom:1px dotted var(--linie);transform:translateY(-4px)}
.reg > span:last-child{font-family:'IBM Plex Mono',monospace;font-size:12px;
  letter-spacing:.08em;color:var(--stumm);white-space:nowrap;
  font-variant-numeric:tabular-nums}
@media (hover:hover) and (pointer:fine){ .reg:hover{border-color:var(--stumm)} }
.reg:active{transform:scale(.995)}

.zurueck{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;
  background:none;border:none;font-family:'IBM Plex Mono',monospace;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--stumm);cursor:pointer;
  margin-top:14px}
.unter{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--stumm);margin:6px 0 20px}
.we-zeile{display:flex;align-items:baseline;gap:8px;padding:12px 0;
  border-top:1px solid var(--linie)}
.we-zeile:first-of-type{border-top:none}
.we-zeile .leib{flex:1;min-width:0}
.btn-mini{min-width:40px;min-height:40px;background:none;border:1px solid var(--linie);
  border-radius:var(--radius);color:var(--stumm);font-size:15px;cursor:pointer;
  line-height:1}
@media (hover:hover) and (pointer:fine){ .btn-mini:hover{color:var(--kreide)} }

.bilderwand{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:14px}
.kachel{position:relative;padding:0;border:none;background:none;cursor:pointer;
  border-radius:var(--radius);overflow:hidden;aspect-ratio:9/16;min-height:40px}
.kachel img{width:100%;height:100%;object-fit:cover;display:block;opacity:.4;
  transition:opacity .2s ease-out}
.kachel.offen img{opacity:1}
/* Freigeschaltet wird über Fläche und Rahmen ringsum gezeigt, nicht über eine
   farbige Kante an einer Seite. */
.kachel.offen{outline:2px solid var(--gelb);outline-offset:-2px}
.kachel .marke{position:absolute;left:0;right:0;bottom:0;padding:4px 5px;
  background:var(--gelb);color:var(--auf-gelb);
  font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.08em;
  text-transform:uppercase;display:none}
.kachel.offen .marke{display:block}

/* Zwischentitel in einem Schirm — seit die Werkstatt zwei Codes verwaltet
   (Wagi, 30.8.2026). Er trennt zwei Formulare, ohne einen eigenen Schirm zu
   verlangen: Beide Codes gehören zusammen, man vergleicht sie im Blick. */
.untertitel{font-family:'Big Shoulders Display',Impact,sans-serif;font-weight:800;
  font-size:28px;line-height:1;text-transform:uppercase;
  margin:40px 0 0;padding-top:26px;border-top:1px solid var(--linie)}
/* Die Unterzeile eines Zwischentitels sitzt enger an ihm als an dem, was
   folgt — sie gehört nach oben, nicht nach unten. */
.untertitel + .unter{margin:7px 0 22px}

.textgruppe{margin-top:16px}
.gruppentitel{display:block;color:var(--gelb-schrift);margin-bottom:4px}
.textzeile{padding:9px 0;border-top:1px solid var(--linie)}
.textzeile.offen{background:var(--flaeche-2);margin:0 -12px;padding:12px;border-radius:var(--radius)}
.textprobe{margin:3px 0 4px;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.textzeile textarea{margin-top:6px}
.neueperson{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 2px}
.neueperson .btn{grid-column:1 / -1;margin-top:2px}

/* Auf der Startseite genügt eine Zeile: wer den letzten Abend gewonnen hat. */
.chronikzeile{display:block;width:100%;text-align:left;font:inherit;cursor:pointer}
.chronikzeile .eyebrow{display:block;color:var(--stumm)}
.chronikzeile b{display:block;font-family:'Big Shoulders Display',Impact,sans-serif;
  font-size:32px;font-weight:800;line-height:1;text-transform:uppercase;
  color:var(--gelb-schrift);margin:5px 0 3px}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}


/* ─────────────────── Fusszeile auf sehr schmalen Geräten ─────────────────── */
/* «Spielplan» und «Rangliste» sind lange Wörter (Wagi, 30.8.2026). Mit dem
   fünften Reiter der Leitung ragte die Zeile auf einem 320er Gerät noch fünf
   Pixel hinaus — gemessen, nicht geschätzt. Enger setzen statt kürzen: Die
   Wörter sind Wagis, die Sperrung ist meine.

   Diese Regel steht bewusst am Dateiende. Ein erster Versuch weiter oben
   wirkte nie, weil die Haupt-Regel für .tabbar button danach kommt und bei
   gleicher Spezifität gewinnt, was später steht. */
@media (max-width:360px){
  .tabbar button{font-size:9.5px;letter-spacing:.02em;padding-left:0;padding-right:0}
  .tabbar .ico{width:21px;height:21px;margin-bottom:4px}
}

/* Gesperrt (Wagi, 22.9.2026: «ja, Archiv öffnen»): Das laufende Turnier ist
   zu, Archiv und Spieler sind offen. Was nur zum laufenden Turnier gehört,
   verschwindet — Spielplan, Rang, Fotos. */
body.gesperrt .nur-offen{display:none}


/* Auf dem Telefon kostet jedes Bild beim Scrollen Rechenzeit — und zwei
   Ebenen kosten es dauernd (Wagi, 22.9.2026: «scrollen feiner und smoother»):
   der bildschirmgrosse Griess, der wegen mix-blend-mode in jedem Bild neu mit
   dem Inhalt verrechnet werden muss. Ohne Mischmodus reicht der Compositor die
   Ebene einfach durch; damit die Körnung gleich aussieht, ist die Deckkraft
   angepasst. Am Rechner (Maus) bleibt es, wie es war. (Der Weichzeichner
   hinter der Tableiste ist seit dem deckenden Balken ganz weg.) */
@media (hover:none) and (pointer:coarse){
  body::before{mix-blend-mode:normal;opacity:calc(var(--griess) * .55)}
}
/* Diese Regeln stehen am Dateiende — wie die Fusszeilen-Regel weiter oben.
   Ein erster Versuch weiter vorn wirkte nicht: Die Haupt-Regeln für
   body::before und .tabbar kommen danach und gewinnen bei gleicher
   Spezifität (nachgemessen im Browser, 22.9.2026). */

/* Sortieren im Spielerarchiv (Wagi, 17.10.2026): A–Z nach Nachname oder nach
   Gesamtpunkten. Zwei Knöpfe Seite an Seite, der gewählte ausgefüllt — so
   sieht man, wie die Liste gerade steht, ohne die Liste zu lesen. 44 Pixel
   hoch, Merets Mass für Finger. */
.sortierwahl{display:flex;gap:8px;margin:0 0 12px}
.sortierknopf{flex:1;min-height:44px;border:1px solid var(--kreide);
  border-radius:var(--radius);background:transparent;color:var(--kreide);
  font-family:'Big Shoulders Display',Impact,sans-serif;font-weight:800;
  font-size:19px;text-transform:uppercase;letter-spacing:.02em;cursor:pointer}
.sortierknopf[aria-pressed="true"]{background:var(--kreide);color:var(--asphalt)}

/* Der Dank nach Turnier II auf der Einstiegsseite (17.10.2026): das Bild über
   die ganze Kartenbreite, der Text darunter. Breite und Höhe stehen im HTML,
   damit nichts springt, wenn das Bild nachlädt. */
.danke .dankbild{display:block;width:100%;height:auto;border-radius:var(--radius);
  margin:0 0 14px}
.danke p{margin:0}
.danke a{color:inherit;text-decoration:underline;text-underline-offset:3px}


/* Archivfotos lassen sich vergrössern (17.10.2026): der Zeiger sagt es. */
.fotokachel img.vergroesserbar{cursor:zoom-in}