/* 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{
  --asphalt:#212429; --flaeche:#2B2F35; --flaeche-2:#343941; --linie:#434a54;
  --kreide:#E9E7E1; --stumm:#949BA4;
  --gelb:#F5B912; --blau:#56B7CE; --rot:#E2574C; --gruen:#7FB069;
  --kraft:#FF4D1C;
  --radius:4px; --pad:16px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
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:.35;
  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}
.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}

/* 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}
.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:#1B1D21;
  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-left:3px solid var(--gelb);padding:11px 13px;background:rgba(245,185,18,.08);
  font-size:14px;margin-bottom:12px}
.notice.bad{border-color:var(--rot);background:rgba(226,87,76,.09)}
.notice.ok{border-color:var(--blau);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:#1B1D21}
.netzbalken.ok{background:var(--gruen);color:#1B1D21}

/* ──────────────────────────────── 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:18px 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:#1B1D21;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:#1B1D21;font-weight:700}
.slot[data-stufe="mittel"]{background:var(--kreide);color:#1B1D21;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-left:3px solid var(--gelb);background:rgba(245,185,18,.08);
  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-left:3px solid var(--gelb);
  background:rgba(245,185,18,.1);font-size:14.5px}

/* ─────────────────────────────────── Karte ──────────────────────────────── */
.kartenkarte{padding:16px 14px 12px}
.karte{width:100%;display:block;background:#1c1f24;border-radius:2px}
.karte .k-seeflaeche path{fill:#243a45;stroke:none}
.karte .k-fluss path{fill:none;stroke:#2d4c5c;stroke-width:7;stroke-linecap:round;
  stroke-linejoin:round}
.karte .k-gruen path{fill:#28312a;stroke:none}
.karte .k-gleis path{fill:none;stroke:#31363d;stroke-width:1}
.karte .k-strasse_klein path{fill:none;stroke:#3a4049;stroke-width:1.4}
.karte .k-strasse_gross path{fill:none;stroke:#4e5661;stroke-width:2.6}

.karte .m-weg-schatten{fill:none;stroke:#1c1f24;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:#1c1f24;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:#1B1D21}
.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 -8px;padding:11px 8px;background:rgba(245,185,18,.08);
  border-left:3px solid var(--gelb)}
.ablauf li.jetzt .was{font-weight:600}

.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(--flaeche-2);border-radius:50%;
  font-family:'Big Shoulders Display',Impact,sans-serif;font-size:22px;font-weight:800}
.regel.doppelt .pkt{background:var(--gelb);color:#1B1D21}
.regel span{font-size:15px}

.sponsorlogo{display:block;max-width:190px;width:100%;height:auto;
  filter:brightness(0) saturate(100%) invert(89%) sepia(6%) saturate(180%) brightness(97%)}
#sponsorKarte{border-left:3px solid var(--kraft)}
.signatur{text-align:center;font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--stumm);margin:22px 0 6px}

/* ───────────────────────────────── 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-left:3px solid var(--blau);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-left:3px solid var(--gelb);
  background:rgba(245,185,18,.09)}
.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}

/* ───────────────────────────────── 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:rgba(33,36,41,.96);
  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}

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