/* 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;
  --kraft:#FF4D1C;
  --auf-gelb:#1B1D21;        /* Schrift auf gelbem Grund, in beiden Modi dunkel */
  --kartengrund:#1c1f24;
  --k-see:#243a45; --k-fluss:#2d4c5c; --k-gruen:#28312a;
  --k-gleis:#31363d; --k-strasse:#3a4049; --k-hauptstrasse:#4e5661;
  --griess:.35;
  --leiste:rgba(33,36,41,.96);
  --radius:4px; --pad:16px;
}

/* 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;
  --kartengrund:#EDEAE3;
  --k-see:#B9CBD4; --k-fluss:#8FB0C0; --k-gruen:#C8D3BE;
  --k-gleis:#C9C4B8; --k-strasse:#C2BDB1; --k-hauptstrasse:#A5A093;
  --griess:.14;
  --leiste:rgba(238,236,230,.96);
}
*{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. */
html{scrollbar-gutter:stable}
@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:0 var(--pad) 110px}

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}
.eyebrow{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;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)}
.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 ─────────────────────── */
.lichtschalter{position:fixed;top:calc(10px + env(safe-area-inset-top));right:12px;
  z-index:12;width:42px;height:42px;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)}
/* Der Tonschalter sitzt links neben dem Tag-Nacht-Schalter. */
.klangschalter{right:62px;font-size:17px}
.klangschalter.aus{color:var(--stumm);opacity:.6}

/* 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)}
.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}
.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. */
.spitzmarke{line-height:1.55;letter-spacing:.14em}
.spitzmarke .zeile2{display:block}
/* 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}

label.field{display:block;margin-bottom:14px}
label.field .lab{display:block;margin-bottom:7px}
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}
input:focus-visible,select:focus-visible,button:focus-visible,textarea:focus-visible{
  outline:3px solid var(--blau);outline-offset: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}
.btn.danger{background:transparent;color:var(--rot);border:1px solid var(--rot);
  font-size:19px;padding:13px}

.notice{border:1px solid rgba(245,185,18,.4);border-radius:var(--radius);
  padding:11px 13px;background:rgba(245,185,18,.08);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:rgba(86,183,206,.4);background:rgba(86,183,206,.08)}

/* ─────────────────────────── 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 ─────────────────────────────── */
.rnav{display:flex;gap:6px;overflow-x:auto;padding:6px 0 14px;scrollbar-width:none;
  -webkit-overflow-scrolling:touch}
.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-gelb);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)}
.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}
.gamecard.meins .gamehead{background:rgba(245,185,18,.13)}
.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);color:var(--gelb)}
.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-gelb);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);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);
  background:rgba(245,185,18,.12);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);color:var(--gelb)}

.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:rgba(245,185,18,.1);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}
td{padding:12px 6px 12px 0;border-bottom:1px solid rgba(67,74,84,.5);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)} tr.fuehrt td.name{font-weight:700}
tr.ich td.name{color:var(--gelb)}
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:rgba(245,185,18,.1);
  border-radius:var(--radius);padding:18px;margin-bottom:12px}
.siegerkarte .eyebrow{color:var(--gelb)}
.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:rgba(245,185,18,.09);padding:16px;margin-bottom:12px}
.jetztkarte.fertig{border-color:var(--blau);background:rgba(86,183,206,.09)}
.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 rgba(67,74,84,.5)}
.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)}
.topzeile.erster .topname{font-weight:700}
.topzeile.ich .topname{color:var(--gelb)}
.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:rgba(245,185,18,.14);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, rgba(245,185,18,.2), rgba(245,185,18,.07));
  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}
.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)}
.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 rgba(67,74,84,.4)}
.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 rgba(67,74,84,.5)}
.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);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:rgba(245,185,18,.11);
  border-radius:var(--radius)}
.ablauf li.jetzt .zeit{color:var(--gelb);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)}
.ortlink .pin{color:var(--gelb);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)}
.pb-eins{fill:var(--kreide);opacity:.55}
.pb-null{fill:var(--kreide);opacity:.16}
.pb-zahl{font-family:'Big Shoulders Display',Impact,sans-serif;font-size:24px;
  font-weight:800;fill:var(--stumm)}
/* 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)}
/* Steht einmal am Ende des Inhalts — da immer nur ein Bildschirm sichtbar
   ist, erscheint sie auf jeder Seite unter dem jeweiligen Inhalt. */
.signatur{text-align:center;font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--stumm);
  margin:26px 0 4px;opacity:.75}
.signatur a{color:var(--kreide);text-decoration:none;
  border-bottom:1px solid var(--linie);padding-bottom:1px}
.signatur a:active{border-bottom-color:var(--gelb)}

/* ───────────────────────────────── 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 rgba(86,183,206,.35);border-radius:var(--radius);
  background:rgba(86,183,206,.07);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 rgba(67,74,84,.5);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:rgba(245,185,18,.12)}
.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 rgba(67,74,84,.5)}
.hausregeln li:last-child{border-bottom:none}
.hausregeln li::before{content:'—';position:absolute;left:0;color:var(--gelb)}

/* Fünf Tabs brauchen etwas weniger Luft als vier. */
.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}
.fotokachel figcaption{display:flex;align-items:center;gap:6px;
  padding:7px 9px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;
  letter-spacing:.04em;color:var(--stumm)}
.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}

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

/* Sechs Tabs auf schmalen Geräten — jedes Zeichen zählt. */
.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);padding:2px 0 4px}
.kennzahl{display:flex;justify-content:space-between;padding:7px 0;
  border-bottom:1px solid rgba(67,74,84,.5);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);
  backdrop-filter:blur(8px);border-top:1px solid var(--linie);display:flex;
  padding-bottom:env(safe-area-inset-bottom)}
.tabbar button{flex:1;background:none;color:var(--stumm);padding:13px 4px 14px;
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase}
.tabbar button[aria-current=true]{color:var(--kreide)}
.tabbar button[aria-current=true] .ico{background:var(--gelb)}
.tabbar .ico{display:block;width:20px;height:3px;background:var(--linie);margin:0 auto 8px}

/* ──────────────────────────────── 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)}}

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