:root{
  --ff:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ff-plakat:"Bungee","Archivo",Impact,sans-serif;
  --ff-mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --bg:#0A0B0A;
  --karte:#141614;
  --karte-hoch:#1C1F1C;
  --linie:#252924;
  --linie-hell:#333833;

  --ink:#F2F4F0;
  --ink-2:#9FA69C;
  --ink-3:#6B7268;

  --akzent:#C2F04A;
  --akzent-dunkel:#1E2410;
  --auf-akzent:#0A0B0A;

  --warn:#FFA03C; --warn-dunkel:#2A1D0C;
  --stop:#FF6A55; --stop-dunkel:#2B1310;

  --r:18px;
  --r-klein:12px;
  --r-pille:999px;
  --sp:16px;
  color-scheme:dark;
}

:root[data-theme="light"]{
  --bg:#F4F5F2; --karte:#FFFFFF; --karte-hoch:#EDEFEA;
  --linie:#E2E5DE; --linie-hell:#CFD4CB;
  --ink:#10120F; --ink-2:#4E544B; --ink-3:#7C8378;
  --akzent:#5B8A16; --akzent-dunkel:#EAF3D4; --auf-akzent:#FFFFFF;
  --warn:#B36A00; --warn-dunkel:#FBEBD5;
  --stop:#C0392B; --stop-dunkel:#FBE2DE;
  color-scheme:light;
}

:root[data-draussen="1"]{ --ink-2:var(--ink); --ink-3:#8E958A; --linie:#3A403A; }
:root[data-draussen="1"] body{font-size:17px}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--ff); background:var(--bg); color:var(--ink);
  font-size:15px; line-height:1.45; font-weight:400;
  -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
}

.app{
  max-width:560px; margin:0 auto; min-height:100dvh;
  display:flex; flex-direction:column;
  padding-bottom:calc(76px + env(safe-area-inset-bottom));
}

header.top{
  position:sticky; top:0; z-index:20; background:var(--bg);
  padding:calc(14px + env(safe-area-inset-top)) var(--sp) 10px;
  display:flex; align-items:center; gap:10px;
}
.wortmarke{
  margin:0; line-height:1; display:flex; align-items:center; gap:9px;
}
.wortmarke .zeichen{width:26px; height:26px; flex:none; display:block}
.wm-text{
  font-family:var(--ff-plakat); font-size:15px; font-weight:400;
  letter-spacing:.01em; display:flex; align-items:baseline; gap:6px;
}
.wm-text em{color:var(--akzent); font-style:normal}
.wm-text b{
  font-family:var(--ff-mono); font-size:10px; font-weight:400;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
}
.wortmarke .zeichen{width:28px; height:28px; flex:none; border-radius:6px; display:block}

.datum{
  font-family:var(--ff-mono); font-size:10px; color:var(--ink-3);
  letter-spacing:.14em; margin-top:4px; text-transform:uppercase;
}
.top-sp{flex:1}
.ikon{
  border:1px solid var(--linie); background:var(--karte); color:var(--ink-2);
  border-radius:var(--r-pille); width:40px; height:40px; cursor:pointer;
  font-family:inherit; flex:none; display:flex; align-items:center; justify-content:center;
}
.ikon:active{background:var(--karte-hoch)}
.ikon[aria-pressed="true"]{background:var(--akzent); border-color:var(--akzent); color:var(--auf-akzent)}
.ikon svg{width:19px; height:19px}

main{
  flex:1; padding:6px var(--sp) var(--sp); display:flex; flex-direction:column; gap:12px;

  overflow-x:clip;
}

nav.tabs{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(16px) saturate(1.3);
  border-top:1px solid var(--linie);
  padding-bottom:env(safe-area-inset-bottom);
}
nav.tabs .inner{max-width:560px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); padding:0 8px}
nav.tabs button{
  appearance:none; border:0; background:none; padding:11px 4px 12px;
  display:flex; flex-direction:column; align-items:center; gap:5px;
  color:var(--ink-3); font-family:inherit; font-size:10.5px; font-weight:600;
  letter-spacing:.04em; cursor:pointer; min-height:54px;
}
nav.tabs button .ic{width:22px; height:22px; display:block}
nav.tabs button .ic svg{width:100%; height:100%; display:block}
nav.tabs button[aria-current="page"]{color:var(--akzent)}

.lage{
  background:var(--karte); border:1px solid var(--linie);
  border-radius:var(--r); padding:20px var(--sp) 18px; flex:none;
}
.lage.warn{background:var(--warn-dunkel); border-color:color-mix(in srgb,var(--warn) 35%,transparent)}
.lage.stop{background:var(--stop-dunkel); border-color:color-mix(in srgb,var(--stop) 35%,transparent)}
.lage-marke{
  font-family:var(--ff-mono); font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:9px;
}
.lage.warn .lage-marke{color:var(--warn)}
.lage.stop .lage-marke{color:var(--stop)}
.lage-wort{
  font-family:var(--ff-plakat); font-size:clamp(22px,6.6vw,30px); font-weight:400;
  letter-spacing:0; line-height:1.08; text-transform:uppercase;
  text-wrap:balance; margin-bottom:10px;
}
.lage.warn .lage-wort{color:var(--warn)}
.lage.stop .lage-wort{color:var(--stop)}
.lage-satz{font-size:13.5px; line-height:1.5; color:var(--ink-2); max-width:44ch}

.band-fuss{
  display:flex; justify-content:space-between; font-family:var(--ff-mono);
  font-size:10px; color:var(--ink-3); letter-spacing:.08em; text-transform:uppercase;
}

.zaehler-karte{
  background:var(--karte); border:1px solid var(--linie);
  border-radius:var(--r); padding:var(--sp);
  flex:1; display:flex; flex-direction:column; min-height:0;
}
.zahl-zeile{display:flex; align-items:baseline; gap:11px; flex-wrap:wrap}
.grosse-zahl{
  font-family:var(--ff-plakat); font-size:clamp(54px,16vw,74px); font-weight:400;
  letter-spacing:0; line-height:.9; font-variant-numeric:tabular-nums;
}
.grosse-zahl.leer{color:var(--linie-hell)}
.zahl-einheit{
  font-family:var(--ff-mono); font-size:10.5px; color:var(--ink-3);
  letter-spacing:.14em; text-transform:uppercase; line-height:1.5;
  padding-bottom:6px;
}
.normbereich{
  font-family:var(--ff-mono); font-size:11px; color:var(--ink-3);
  letter-spacing:.03em; margin-top:2px;
}

.tickreihe{display:flex; gap:9px; align-items:stretch; margin-top:auto; padding-top:16px}
.tick{
  appearance:none; border:1px solid var(--linie-hell); background:var(--karte-hoch);
  color:var(--ink); border-radius:var(--r-pille); font-family:inherit;
  font-size:23px; font-weight:600; line-height:1; cursor:pointer;
  min-height:56px; display:flex; align-items:center; justify-content:center;
}
.tick:active{background:var(--linie)}
.tick.gross{flex:2; background:var(--akzent); border-color:var(--akzent); color:var(--auf-akzent); font-size:28px}
.tick.gross:active{opacity:.8}
.tick.klein{
  flex:1; font-family:var(--ff-mono); font-size:12px; font-weight:500;
  letter-spacing:.06em; min-height:42px;
}

.karte{
  background:var(--karte); border:1px solid var(--linie);
  border-radius:var(--r); padding:var(--sp);
}
.karte > h2{font-family:var(--ff-plakat); font-size:15px; font-weight:400; letter-spacing:.01em;
  text-transform:uppercase; margin:0 0 8px; line-height:1.15}
.karte > .unter{font-size:13px; color:var(--ink-2); margin:0 0 15px; line-height:1.5; max-width:50ch}
.marke{
  font-family:var(--ff-mono); font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 11px;
}

.btn{
  appearance:none; font-family:inherit; cursor:pointer;
  border-radius:var(--r-pille); border:1px solid var(--linie-hell);
  background:var(--karte-hoch); color:var(--ink);
  padding:14px 18px; font-size:14.5px; font-weight:600; line-height:1.25; min-height:50px;
}
.btn:active{background:var(--linie)}
.btn.primary{background:var(--akzent); border-color:var(--akzent); color:var(--auf-akzent)}
.btn.primary:active{opacity:.8}
.btn.gefahr{background:var(--stop); border-color:var(--stop); color:#fff}
.btn.ghost{background:transparent}
.btn.wide{width:100%}
.btn.sm{padding:9px 14px; font-size:12.5px; min-height:38px}
.btn.gross{
  font-family:var(--ff-plakat); font-weight:400; text-transform:uppercase;
  letter-spacing:.01em; padding:17px; font-size:15px; min-height:58px;
}
.btn:disabled{opacity:.35; cursor:default}
.btn-reihe{display:flex; gap:9px; flex-wrap:wrap}
.btn .zus{
  display:block; font-family:var(--ff-mono); font-size:10px; font-weight:400;
  letter-spacing:.06em; opacity:.66; margin-top:5px; text-transform:uppercase;
}

.fussknoepfe{display:grid; grid-template-columns:1fr 1fr; gap:9px; flex:none}
.fussknoepfe .btn{
  text-align:left; border-radius:var(--r-klein);
  display:flex; flex-direction:column; justify-content:center; min-height:64px;
}

.stufen{display:grid; grid-template-columns:repeat(4,1fr); gap:6px}
.stufen button{
  appearance:none; font-family:inherit; cursor:pointer;
  border:1px solid var(--linie); background:var(--karte-hoch); color:var(--ink-2);
  border-radius:var(--r-pille); padding:13px 3px; min-height:50px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-size:12.5px; font-weight:600; line-height:1.2;
}
.stufen button[aria-pressed="true"]{background:var(--akzent); border-color:var(--akzent); color:var(--auf-akzent)}
.stufen.ampelfarben button[aria-pressed="true"][data-stufe="2"]{background:var(--warn); border-color:var(--warn); color:#1A1204}
.stufen.ampelfarben button[aria-pressed="true"][data-stufe="3"]{background:var(--stop); border-color:var(--stop); color:#2B0A06}
.frage{font-size:14px; font-weight:600; margin:0 0 9px}

.korridor{position:relative; height:96px; margin:6px 0 4px}
.korridor .reihe{position:absolute; inset:0; display:flex; align-items:flex-end}
.korridor .tag{flex:1; height:100%; position:relative}
.korridor .punkt{
  position:absolute; left:50%; width:11px; height:11px; margin-left:-5.5px;
  border-radius:50%; background:var(--akzent); border:2px solid var(--bg);
}
.korridor .punkt.null{background:var(--linie-hell); width:7px; height:7px; margin-left:-3.5px}
.wochentage{display:flex; margin-top:7px}
.wochentage span{
  flex:1; text-align:center; font-family:var(--ff-mono); font-size:9.5px;
  color:var(--ink-3); letter-spacing:.06em; text-transform:uppercase;
}
.wochentage span.heute{color:var(--akzent)}

.unbekannt{
  border:1px dashed var(--linie-hell); border-radius:var(--r);
  padding:20px var(--sp); background:transparent;
}
.unbekannt .zaehlstand{
  font-family:var(--ff-mono); font-size:11px; color:var(--ink-3);
  letter-spacing:.1em; text-transform:uppercase; margin-bottom:10px;
}
.unbekannt .balken{display:flex; gap:4px; margin-bottom:13px}
.unbekannt .balken i{
  flex:1; height:26px; border-radius:5px;
  background:repeating-linear-gradient(45deg,var(--karte-hoch),var(--karte-hoch) 4px,transparent 4px,transparent 8px);
  border:1px solid var(--linie);
}
.unbekannt .balken i.hat{background:var(--akzent); border-color:var(--akzent)}
.unbekannt p{margin:0; font-size:13px; color:var(--ink-2); line-height:1.5}

.kennzahlen{display:grid; grid-template-columns:repeat(3,1fr); gap:9px}
.kz{background:var(--karte-hoch); border-radius:var(--r-klein); padding:14px 11px}
.kz .v{font-family:var(--ff-plakat); font-size:22px; font-weight:400; letter-spacing:0;
  line-height:1; font-variant-numeric:tabular-nums}
.kz .v.klein{font-family:var(--ff-mono); font-size:11px; font-weight:400; line-height:1.4; letter-spacing:0}
.kz .k{
  font-family:var(--ff-mono); font-size:9px; color:var(--ink-3); margin-top:8px;
  letter-spacing:.11em; text-transform:uppercase; line-height:1.3;
}

.liste{width:100%; border-collapse:collapse; font-size:13.5px}
.liste th{
  text-align:left; font-family:var(--ff-mono); font-size:9px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3); padding:0 6px 10px;
  border-bottom:1px solid var(--linie);
}
.liste td{padding:12px 6px; border-bottom:1px solid var(--linie); font-variant-numeric:tabular-nums}
.liste tr:last-child td{border-bottom:0}
.liste td.d{font-family:var(--ff-mono); font-size:11.5px; color:var(--ink-2); white-space:nowrap}
.liste td.z{font-weight:700; font-size:16px}
.liste td.g{color:var(--ink-2)}
.liste .weg{border:0; background:none; color:var(--ink-3); cursor:pointer; font-size:18px; padding:4px 6px; font-family:inherit}

.liste tr.summe td{
  border-top:2px solid var(--linie-stark); border-bottom:0;
  font-weight:700; padding-top:11px;
}
.liste tr.summe td.d{font-size:15px; color:var(--ink)}

.punkt-pille{
  display:inline-flex; align-items:center; font-family:var(--ff-mono);
  font-size:9.5px; letter-spacing:.09em; text-transform:uppercase;
  border-radius:var(--r-pille); padding:4px 10px;
}
.punkt-pille.ok{background:var(--akzent-dunkel); color:var(--akzent)}
.punkt-pille.warn{background:var(--warn-dunkel); color:var(--warn)}
.punkt-pille.stop{background:var(--stop-dunkel); color:var(--stop)}
.punkt-pille.grau{background:var(--karte-hoch); color:var(--ink-3)}

.rand{
  font-size:12.5px; color:var(--ink-3); line-height:1.6;
  border-left:2px solid var(--linie-hell); padding-left:14px; max-width:54ch;
}
.rand b{color:var(--ink-2); font-weight:600}

.bald{
  border:1px dashed var(--linie-hell); border-radius:var(--r);
  padding:26px 16px; text-align:center; color:var(--ink-3);
  font-size:12.5px; line-height:1.6;
}
.bald b{display:block; font-size:15px; font-weight:700; color:var(--ink-2); margin-bottom:6px}

.trenner{height:1px; background:var(--linie); margin:18px 0}

label.feld{display:block; margin-top:15px}
label.feld > .lab{
  display:block; font-family:var(--ff-mono); font-size:9.5px; color:var(--ink-3);
  letter-spacing:.14em; text-transform:uppercase; margin-bottom:8px;
}
input[type=text],input[type=number],input[type=date],textarea,select{
  width:100%; font-family:inherit; font-size:16px; padding:14px;
  border-radius:var(--r-klein); border:1px solid var(--linie-hell);
  background:var(--karte-hoch); color:var(--ink);
}
input[type=number]{font-family:var(--ff-mono)}
textarea{min-height:78px; resize:vertical; line-height:1.55}
input:focus,textarea:focus,select:focus{outline:2px solid var(--akzent); outline-offset:1px}
button:focus-visible{outline:2px solid var(--akzent); outline-offset:2px}

dialog{
  border:0; border-radius:var(--r) var(--r) 0 0; padding:0;
  width:100%; max-width:560px; background:var(--karte); color:var(--ink);
  margin:auto auto 0; max-height:93dvh; overflow-y:auto;
  border-top:1px solid var(--linie);
}
dialog::backdrop{background:rgba(4,5,4,.72); backdrop-filter:blur(4px)}
dialog .inhalt{padding:var(--sp); padding-bottom:calc(var(--sp) + env(safe-area-inset-bottom))}
dialog h3{font-family:var(--ff-plakat); font-size:18px; font-weight:400; letter-spacing:.01em;
  text-transform:uppercase; margin:0 0 9px; line-height:1.15}
dialog .unter{font-size:13px; color:var(--ink-2); margin:0 0 18px; line-height:1.55}
.griff{width:38px; height:4px; border-radius:2px; background:var(--linie-hell); margin:11px auto 3px}

.hinweis{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(90px + env(safe-area-inset-bottom));
  background:var(--ink); color:var(--bg);
  padding:13px 20px; border-radius:var(--r-pille);
  font-size:13px; font-weight:600;
  z-index:60; opacity:0; pointer-events:none; transition:opacity .16s;
  max-width:min(90vw,420px); text-align:center; line-height:1.4;
}
.hinweis.zeig{opacity:1}

.heute-raster{flex:1; display:flex; flex-direction:column; gap:12px; min-height:0}

@media (max-height:700px){
  .lage-satz{display:none}
  .grosse-zahl{font-size:clamp(52px,15vw,68px)}
}

.einrichtung{
  position:fixed; inset:0; z-index:80; background:var(--bg);
  display:flex; flex-direction:column; overflow-y:auto;
}
.einr-innen{
  max-width:560px; width:100%; margin:0 auto; flex:1;
  display:flex; flex-direction:column;
  padding:calc(20px + env(safe-area-inset-top)) var(--sp) calc(var(--sp) + env(safe-area-inset-bottom));
}
.einr-kopf{display:flex; align-items:center; gap:12px; margin-bottom:22px; flex:none}
.einr-schritt{
  font-family:var(--ff-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); white-space:nowrap;
}
.einr-balken{flex:1; height:3px; border-radius:var(--r-pille); background:var(--karte-hoch); overflow:hidden}
.einr-balken i{display:block; height:100%; background:var(--akzent); border-radius:var(--r-pille); transition:width .25s}
.einr-titel{
  font-family:var(--ff-plakat); font-size:clamp(21px,5.8vw,26px); font-weight:400;
  letter-spacing:.01em; text-transform:uppercase; line-height:1.12; margin:0 0 12px;
  text-wrap:balance;
}
.einr-text{font-size:14px; color:var(--ink-2); line-height:1.55; margin:0 0 24px; max-width:46ch}
.einr-koerper{flex:1}
.einr-fuss{flex:none; padding-top:26px; display:flex; flex-direction:column; gap:9px}
.einr-fuss .btn-reihe{width:100%}
.einr-ergebnis{border-top:1px solid var(--linie); padding-top:18px; margin-top:2px}
.einr-zeile{display:flex; gap:12px; padding:13px 0; border-bottom:1px solid var(--linie)}
.einr-zeile:last-child{border-bottom:0}
.einr-zeile .haken{color:var(--akzent); font-size:15px; line-height:1.4; flex:none}
.einr-zeile .was{font-weight:700; font-size:14.5px; margin-bottom:3px}
.einr-zeile .warum{font-size:12.5px; color:var(--ink-2); line-height:1.5}

.karte-box{position:relative; background:#000}
.karte-box svg{display:block; width:100%; height:auto; max-height:46dvh}
.karte-box.klein svg{max-height:130px}
.karte-fuss{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:11px var(--sp); font-family:var(--ff-mono); font-size:10.5px;
  color:var(--ink-3); letter-spacing:.09em; text-transform:uppercase;
  border-bottom:1px solid var(--linie);
}
.karte-fuss .karte-m{color:var(--akzent); font-size:13px; letter-spacing:.04em}

.lvl.zu{opacity:.5}
.lvl-kopf{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:4px}

.aufg-liste{display:flex; flex-direction:column; gap:2px; margin-top:13px}
.aufg{
  appearance:none; border:0; background:none; cursor:pointer; font-family:inherit;
  display:flex; align-items:center; gap:12px; text-align:left; width:100%;
  padding:12px 4px; border-bottom:1px solid var(--linie); color:var(--ink);
}
.aufg:last-child{border-bottom:0}
.aufg:active{background:var(--karte-hoch)}
.aufg-marke{color:var(--akzent); font-size:15px; flex:none; width:16px}
.aufg-text{display:flex; flex-direction:column; gap:3px; min-width:0}
.aufg-titel{font-weight:600; font-size:14.5px}
.aufg-zeile{font-family:var(--ff-mono); font-size:10.5px; color:var(--ink-3); letter-spacing:.05em}

.abz-raster{display:grid; grid-template-columns:repeat(2,1fr); gap:9px}
.abz{
  border:1px solid var(--linie); border-radius:var(--r-klein); padding:14px 12px;
  display:flex; flex-direction:column; gap:5px; opacity:.42;
}
.abz.hat{opacity:1; border-color:var(--akzent); background:var(--akzent-dunkel)}
.abz-sym{font-size:20px; line-height:1; color:var(--ink-3)}
.abz.hat .abz-sym{color:var(--akzent)}
.abz-name{font-weight:700; font-size:13.5px}
.abz-was{font-size:11px; color:var(--ink-3); line-height:1.4}

.karte-lupe{
  position:absolute; right:10px; top:10px;
  font-family:var(--ff-mono); font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink);
  background:rgba(10,11,10,.72); backdrop-filter:blur(6px);
  padding:6px 11px; border-radius:var(--r-pille); pointer-events:none;
}
.karte-box{cursor:zoom-in}

.lupe{
  position:fixed; inset:0; z-index:90; background:#000;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.lupe-buehne{
  width:100%; touch-action:none; transform-origin:center center;
  will-change:transform;
}
.lupe-buehne svg{width:100%; height:auto; display:block; max-height:100dvh}
.lupe-kopf{
  position:absolute; left:0; right:0; top:0;
  padding:calc(14px + env(safe-area-inset-top)) var(--sp) 14px;
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  background:linear-gradient(rgba(10,11,10,.9), transparent);
}
.lupe-titel{font-size:17px; font-weight:700; letter-spacing:-.02em}
.lupe-zeile{
  font-family:var(--ff-mono); font-size:10.5px; color:var(--ink-2);
  letter-spacing:.05em; margin-top:4px;
}
.lupe-kopf .ikon{background:rgba(20,22,20,.85); flex:none}
.lupe-fuss{
  position:absolute; left:0; right:0; bottom:0; text-align:center;
  padding:14px var(--sp) calc(16px + env(safe-area-inset-bottom));
  font-family:var(--ff-mono); font-size:10px; color:var(--ink-3);
  letter-spacing:.1em; text-transform:uppercase; pointer-events:none;
  background:linear-gradient(transparent, rgba(10,11,10,.9));
}

.bahnstreifen{display:grid; grid-template-columns:repeat(5,1fr); gap:5px}
.bahnnr{
  appearance:none; font-family:var(--ff-mono); cursor:pointer;
  border:1px solid var(--linie); background:var(--karte); color:var(--ink-3);
  border-radius:var(--r-klein); padding:13px 0; font-size:13px; min-height:45px;
  transition:background .18s, color .18s, border-color .18s, transform .12s;
}
.bahnnr:active{transform:scale(.93)}
.bahnnr.fertig  {background:var(--karte-hoch); color:var(--ink); border-color:var(--linie-hell)}
.bahnnr.gewonnen{background:var(--akzent); border-color:var(--akzent); color:var(--auf-akzent)}
.bahnnr.verloren{background:var(--stop-dunkel); border-color:var(--stop); color:var(--stop)}
.bahnnr.geteilt {background:var(--karte-hoch); color:var(--ink-2); border-color:var(--linie-hell)}

.score-reihe{display:grid; grid-template-columns:repeat(6,1fr); gap:5px}
.score{
  appearance:none; font-family:inherit; cursor:pointer;
  border:1px solid var(--linie); background:var(--karte-hoch); color:var(--ink);
  border-radius:var(--r-klein); min-height:52px; font-size:17px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  transition:transform .1s, background .16s, border-color .16s, color .16s;
}
.score:active{transform:scale(.9)}
.score.an{
  background:var(--akzent); border-color:var(--akzent); color:var(--auf-akzent);
}

.score.getippt, .naeher.getippt{animation:pop .22s ease-out}

.score:active, .naeher:active, .bahnnr:active{animation:none}

.score.auf{grid-column:1/-1; min-height:44px; font-family:var(--ff-mono);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase}

@keyframes pop{
  0%{transform:scale(.86)} 60%{transform:scale(1.08)} 100%{transform:scale(1)}
}
@keyframes rein{
  from{opacity:0; transform:translateY(9px)} to{opacity:1; transform:none}
}

main > *{animation:none}
main[data-bewegung="sicht"] > *{animation:rein .22s ease-out both}
main[data-bewegung="sicht"] > *:nth-child(2){animation-delay:.03s}
main[data-bewegung="sicht"] > *:nth-child(3){animation-delay:.06s}

main[data-bewegung="vor"]     > *:not(.rundenkopf){animation:bahnVor .2s ease-out both}
main[data-bewegung="zurueck"] > *:not(.rundenkopf){animation:bahnZurueck .2s ease-out both}
@keyframes bahnVor    {from{opacity:0; transform:translateX(16px)}  to{opacity:1; transform:none}}
@keyframes bahnZurueck{from{opacity:0; transform:translateX(-16px)} to{opacity:1; transform:none}}
main[data-bewegung="sicht"] > *:nth-child(4){animation-delay:.09s}

.stufe-zeile{
  appearance:none; cursor:pointer; font-family:inherit; text-align:left;
  background:var(--karte); border:1px solid var(--linie); border-radius:var(--r);
  padding:13px var(--sp); display:flex; align-items:center; justify-content:space-between;
  gap:14px; color:var(--ink); flex:none; width:100%;
}
.stufe-zeile:active{background:var(--karte-hoch)}
.stufe-links{display:flex; flex-direction:column; gap:4px; min-width:0}
.stufe-name{font-size:15px; font-weight:700; letter-spacing:-.01em}
.stufe-unter{
  font-family:var(--ff-mono); font-size:10px; color:var(--ink-3);
  letter-spacing:.07em; text-transform:uppercase;
}
.stufe-ring{position:relative; width:44px; height:44px; flex:none}
.stufe-ring svg{width:100%; height:100%; display:block}
.stufe-zahl{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; font-variant-numeric:tabular-nums;
}

.leiter{display:flex; flex-direction:column; gap:0; margin-top:14px}
.sprosse{
  display:flex; align-items:center; gap:12px; padding:9px 0;
  border-bottom:1px solid var(--linie); opacity:.4;
}
.sprosse:last-child{border-bottom:0}
.sprosse.erreicht{opacity:1}
.sprosse.jetzt .sprosse-name{color:var(--akzent); font-weight:700}
.sprosse-punkt{
  width:9px; height:9px; border-radius:50%; flex:none;
  background:var(--linie-hell); border:2px solid var(--karte);
}
.sprosse.erreicht .sprosse-punkt{background:var(--akzent)}
.sprosse.jetzt .sprosse-punkt{box-shadow:0 0 0 4px var(--akzent-dunkel)}
.sprosse-name{flex:1; font-size:14px}
.sprosse-ab{
  font-family:var(--ff-mono); font-size:11px; color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}

.auflagen{display:flex; gap:6px; flex-wrap:wrap; margin-top:10px}
.auflage{
  font-family:var(--ff-mono); font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; border-radius:var(--r-pille);
  padding:6px 11px; background:var(--karte-hoch); color:var(--ink-2);
  border:1px solid var(--linie-hell);
}
.auflage.lage{background:var(--akzent-dunkel); color:var(--akzent); border-color:var(--akzent)}
.auflage.sand{background:var(--warn-dunkel); color:var(--warn); border-color:var(--warn)}

.modus-wahl{display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:4px}
.verlauf-wahl{display:flex; flex-direction:column; gap:8px; margin-bottom:16px}
.verlauf-wahl .modus{flex-direction:row; align-items:center; gap:14px; padding:15px 16px}
.verlauf-wahl .modus-name{flex:none; min-width:5.5em}
.verlauf-wahl .modus-text{flex:1}
.modus{
  appearance:none; font-family:inherit; cursor:pointer; text-align:left;
  border:1px solid var(--linie-hell); background:var(--karte-hoch); color:var(--ink);
  border-radius:var(--r-klein); padding:14px; display:flex; flex-direction:column; gap:6px;
  transition:background .16s, border-color .16s;
}
.modus.an{background:var(--akzent-dunkel); border-color:var(--akzent)}
.modus.an .modus-name{color:var(--akzent)}
.modus-name{font-size:15.5px; font-weight:700; letter-spacing:-.01em}
.modus-text{font-size:11.5px; color:var(--ink-3); line-height:1.45}

.schwer-zeile{display:flex; align-items:center; gap:11px; margin-top:13px}
.schwer-lbl{
  font-family:var(--ff-mono); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); flex:none;
}
.schwer-bahn{flex:1; height:6px; border-radius:var(--r-pille); background:var(--karte-hoch); overflow:hidden}
.schwer-bahn i{display:block; height:100%; border-radius:var(--r-pille);
  background:linear-gradient(90deg, var(--akzent), var(--warn))}
.schwer-wert{
  font-family:var(--ff-mono); font-size:12px; color:var(--ink-2);
  font-variant-numeric:tabular-nums; flex:none; min-width:2ch; text-align:right;
}

.verlauf{display:flex; gap:4px; align-items:flex-end; height:46px}
.verlauf .vl{
  flex:1; border-radius:3px 3px 0 0;
  background:linear-gradient(var(--warn), var(--akzent));
}

.var-raster{display:flex; flex-direction:column; gap:8px}
.var{
  appearance:none; font-family:inherit; cursor:pointer; text-align:left; width:100%;
  border:1px solid var(--linie-hell); background:var(--karte-hoch); color:var(--ink);
  border-radius:var(--r-klein); padding:13px 14px;
  display:flex; flex-direction:column; gap:6px;
  transition:background .16s, border-color .16s;
}
.var.an{background:var(--akzent-dunkel); border-color:var(--akzent)}
.var-kopf{display:flex; align-items:center; gap:10px}
.var-sym{
  width:26px; height:26px; border-radius:var(--r-pille); flex:none;
  background:var(--linie); color:var(--ink-2);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--ff-mono); font-size:13px;
}
.var.an .var-sym{background:var(--akzent); color:var(--auf-akzent)}
.var-name{font-size:15px; font-weight:700; letter-spacing:-.01em}
.var.an .var-name{color:var(--akzent)}
.var-text{font-size:12.5px; color:var(--ink-2); line-height:1.45}
.var-uebt{font-size:11.5px; color:var(--ink-3); line-height:1.45; font-style:italic}
.var.an .var-uebt{color:var(--ink-2)}

.vor-bahn{display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--linie)}
.vor-bahn:last-child{border-bottom:0}
.vor-nr{
  width:22px; flex:none; font-family:var(--ff-mono); font-size:12px; color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.vor-mitte{flex:1; display:flex; flex-direction:column; gap:3px; min-width:0}
.vor-titel{font-size:14px; font-weight:600}
.vor-zeile{font-family:var(--ff-mono); font-size:10.5px; color:var(--ink-3); letter-spacing:.04em}
.vor-schwer{
  width:5px; height:30px; flex:none; border-radius:var(--r-pille);
  background:var(--karte-hoch); display:flex; align-items:flex-end; overflow:hidden;
}
.vor-schwer i{width:100%; border-radius:var(--r-pille); background:linear-gradient(var(--warn), var(--akzent))}

.befund{border-left:2px solid var(--linie-hell); padding:2px 0 2px 14px; margin-bottom:15px}
.befund:last-child{margin-bottom:0}
.befund.warn{border-color:var(--warn)}
.befund.ok{border-color:var(--akzent)}
.befund-titel{font-size:14.5px; font-weight:700; margin-bottom:4px}
.befund.warn .befund-titel{color:var(--warn)}
.befund.ok .befund-titel{color:var(--akzent)}
.befund-text{font-size:13px; color:var(--ink-2); line-height:1.5}
.befund-beleg{
  font-family:var(--ff-mono); font-size:10px; color:var(--ink-3);
  letter-spacing:.07em; text-transform:uppercase; margin-top:6px;
}

.lupe-knoepfe{
  position:absolute; right:var(--sp); bottom:calc(58px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:9px; z-index:5;
}
.lupe-knoepfe .ikon{
  background:rgba(20,22,20,.9); backdrop-filter:blur(8px);
  width:44px; height:44px; font-size:19px; color:var(--ink);
}

.rundenkopf{
  background:var(--karte); border:1px solid var(--linie);
  border-radius:var(--r); padding:13px var(--sp) 14px;
}
.rk-zeile{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px}
.rk-stand{font-family:var(--ff-plakat); font-size:13.5px; font-weight:400; letter-spacing:.01em;
  text-transform:uppercase}
.rk-weg{
  appearance:none; border:1px solid var(--linie-hell); background:transparent;
  color:var(--ink-3); border-radius:var(--r-pille); width:32px; height:32px;
  cursor:pointer; font-family:inherit; font-size:13px; flex:none;
}
.rk-weg:active{background:var(--stop-dunkel); color:var(--stop); border-color:var(--stop)}
.bahnnr.hier{border-color:var(--akzent); border-width:2px; color:var(--ink)}

.bahnnr.wartet{border-style:dashed; border-width:2px}

body.vollbild nav.tabs{display:none}
body.vollbild .app{padding-bottom:var(--sp)}

.lage{position:relative; overflow:hidden}
.lage::before{
  content:""; position:absolute; left:-6%; right:-6%; top:0; height:7px;
  background:var(--akzent); transform:rotate(-1.4deg) translateY(-2px);
}
.lage.warn::before{background:var(--warn)}
.lage.stop::before{background:var(--stop)}

.lage::after{
  content:""; position:absolute; right:-24px; top:-18px; width:104px; height:150px;
  background:repeating-linear-gradient(74deg,
    color-mix(in srgb, var(--akzent) 26%, transparent),
    color-mix(in srgb, var(--akzent) 26%, transparent) 2px,
    transparent 2px, transparent 12px);
  transform:rotate(8deg); pointer-events:none;
}
.lage.warn::after{background:repeating-linear-gradient(74deg,
  color-mix(in srgb, var(--warn) 26%, transparent),
  color-mix(in srgb, var(--warn) 26%, transparent) 2px, transparent 2px, transparent 12px)}
.lage.stop::after{background:repeating-linear-gradient(74deg,
  color-mix(in srgb, var(--stop) 26%, transparent),
  color-mix(in srgb, var(--stop) 26%, transparent) 2px, transparent 2px, transparent 12px)}
.lage-marke, .lage-wort, .lage-satz{position:relative; z-index:2}

.auflage{
  border-radius:0 !important;
  border:2px solid var(--ink) !important;
  background:var(--karte-hoch);
  box-shadow:3px 3px 0 var(--ink);
  transform:rotate(-1.6deg);
}
.auflage.lage{
  background:var(--akzent); color:var(--auf-akzent) !important;
  border-color:var(--ink) !important; box-shadow:3px 3px 0 var(--ink);
  transform:rotate(1.4deg);
}
.auflage.sand{
  background:var(--warn); color:#1A1204 !important;
  border-color:var(--ink) !important; box-shadow:3px 3px 0 var(--ink);
  transform:rotate(-2.2deg);
}
.auflagen{gap:9px; padding:3px 0}

.btn.primary{
  border-radius:var(--r-klein);
  border:2px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);
}
.btn.primary:active{
  opacity:1; box-shadow:1px 1px 0 var(--ink); transform:translate(3px,3px);
}

.punkt-pille{border-radius:0; border:1.5px solid currentColor}

.bahnnr{border-radius:3px}

.abz{border-radius:4px}
.abz.hat{box-shadow:3px 3px 0 var(--akzent); transform:rotate(-.8deg)}
.abz.hat:nth-child(even){transform:rotate(.9deg)}

.modus.an, .var.an{
  border-width:2px; box-shadow:3px 3px 0 var(--akzent);
}

.einrichtung{
  background:var(--bg);
  background-image:linear-gradient(rgba(10,11,10,.86), rgba(10,11,10,.97)), url("");
  background-size:cover; background-position:center;
}

.vg{display:flex; align-items:stretch; gap:9px}
.vg-tick{
  appearance:none; cursor:pointer; flex:none; width:64px;
  border:2px solid var(--ink); background:var(--karte-hoch); color:var(--ink);
  border-radius:var(--r-klein); font-family:inherit; font-size:26px; font-weight:700;
  box-shadow:3px 3px 0 var(--ink);
}
.vg-tick:active{box-shadow:1px 1px 0 var(--ink); transform:translate(2px,2px)}
.vg-tick[disabled]{opacity:.3; box-shadow:none; cursor:default}
.vg-mitte{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--karte-hoch); border:1px solid var(--linie); border-radius:var(--r-klein);
  padding:10px 0;
}
.vg-zahl{font-family:var(--ff-plakat); font-size:34px; line-height:1; font-variant-numeric:tabular-nums}
.vg-lab{font-family:var(--ff-mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); margin-top:5px}

.vg-hinweis{
  border:2px solid var(--ink); background:var(--karte-hoch);
  border-radius:var(--r-klein); padding:11px 13px; margin-bottom:14px;
  font-size:14px; font-weight:700; box-shadow:3px 3px 0 var(--ink);
}
.vg-hinweis.meiner{background:var(--akzent); color:var(--auf-akzent)}
.vg-hinweis span{display:block; font-weight:400; font-size:12px; opacity:.72; margin-top:3px}

.rk-stand.gross{font-size:clamp(19px,5.4vw,24px); line-height:1.05}

.fahnenlage{
  margin:12px 0 0; padding:11px 13px; font-size:13.5px; font-weight:700;
  border:2px solid var(--ink); border-radius:var(--r-klein);
  background:var(--karte-hoch); box-shadow:3px 3px 0 var(--ink);
}
.fahnenlage.eng{background:var(--warn); color:#1A1204}
.fahnenlage span{display:block; font-weight:400; font-size:12px; opacity:.72; margin-top:3px}

.buehne{
  position:fixed; inset:0; z-index:95; background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  padding:calc(env(safe-area-inset-top) + 20px) 20px calc(env(safe-area-inset-bottom) + 20px);
  animation:buehneRein .2s ease-out;
}
@keyframes buehneRein{from{opacity:0; transform:scale(.97)} to{opacity:1; transform:none}}
.buehne.gut     {background:linear-gradient(170deg, color-mix(in srgb, var(--akzent) 14%, var(--bg)), var(--bg) 62%)}
.buehne.schlecht{background:linear-gradient(170deg, color-mix(in srgb, var(--stop) 16%, var(--bg)), var(--bg) 62%)}
.buehne.geteilt {background:linear-gradient(170deg, color-mix(in srgb, var(--warn) 12%, var(--bg)), var(--bg) 62%)}

.bu-inhalt{width:100%; max-width:420px}
.bu-zu{
  position:absolute; top:calc(env(safe-area-inset-top) + 14px); right:16px;
  appearance:none; border:1px solid var(--linie-hell); background:transparent;
  color:var(--ink-3); border-radius:var(--r-pille); width:38px; height:38px;
  cursor:pointer; font-family:inherit; font-size:15px;
}
.bu-marke{font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:10px}
.bu-wort{
  font-family:var(--ff-plakat); font-size:clamp(42px,13vw,60px); line-height:.94;
  text-transform:uppercase; margin-bottom:22px;

  position:relative; padding-top:14px;
}
.bu-wort::before{
  content:""; position:absolute; left:-4%; right:-4%; top:0; height:9px;
  background:var(--akzent); transform:rotate(-1.2deg);
}
.buehne.schlecht .bu-wort::before{background:var(--stop)}
.buehne.geteilt  .bu-wort::before{background:var(--warn)}

.bu-tafel{display:flex; flex-direction:column; gap:8px; margin-bottom:16px}
.bu-zeile{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  border:2px solid var(--ink); background:var(--karte); border-radius:var(--r-klein);
  padding:13px 15px; box-shadow:3px 3px 0 var(--ink);
}
.bu-zeile.sieger{background:var(--akzent); color:var(--auf-akzent)}
.buehne.schlecht .bu-zeile.sieger{background:var(--stop); color:#fff}
.bu-name{font-size:15px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bu-zahl{font-family:var(--ff-plakat); font-size:30px; line-height:1; flex:none;
  display:flex; align-items:baseline; gap:9px}
.bu-netto{font-family:var(--ff-mono); font-size:11px; opacity:.7; letter-spacing:.04em}
.bu-vorgabe{font-size:12.5px; color:var(--ink-3); margin:-8px 0 14px}
.bu-stand{
  font-family:var(--ff-plakat); font-size:clamp(18px,5vw,23px); line-height:1.1;
  text-transform:uppercase; margin-bottom:8px;
}
.bu-zusatz{font-size:13.5px; color:var(--ink-2); margin-bottom:20px; line-height:1.5}
.bu-inhalt .btn{margin-top:4px}

.rk-ehre{
  font-size:12.5px; color:var(--ink-2); margin:-4px 0 11px;
  display:flex; align-items:baseline; gap:7px;
}
.rk-ehre span{font-family:var(--ff-mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3)}

.lage span.bahnnr{display:flex; align-items:center; justify-content:center; cursor:default}

.sa-liste{display:flex; flex-direction:column; gap:9px}
.sa{
  appearance:none; font-family:inherit; text-align:left; cursor:pointer;
  display:flex; gap:14px; align-items:flex-start;
  border:2px solid var(--linie); background:var(--karte-hoch); color:var(--ink);
  border-radius:var(--r-klein); padding:14px 15px;
  transition:border-color .16s, box-shadow .16s;
}
.sa.an{border-color:var(--ink); box-shadow:4px 4px 0 var(--akzent)}
.sa-zeichen{flex:none; width:38px; height:38px; color:var(--ink-2)}
.sa.an .sa-zeichen{color:var(--ink)}
.sa-zeichen svg{width:100%; height:100%; display:block}
.sa-text{display:flex; flex-direction:column; gap:3px; min-width:0}
.sa-name{font-family:var(--ff-plakat); font-size:14.5px; text-transform:uppercase; line-height:1.1}
.sa-kurz{font-size:12.5px; color:var(--ink-3)}
.sa-lang{font-size:13px; color:var(--ink-2); line-height:1.5; margin-top:7px}
.sa-warum{font-size:12.5px; color:var(--ink-3); line-height:1.5; font-style:italic}
.sa-kosten{
  font-size:12.5px; margin-top:7px; padding:8px 10px; line-height:1.45;
  border-left:3px solid var(--warn); background:var(--karte); color:var(--ink-2);
}

.naeher-reihe{display:grid; grid-template-columns:1fr auto 1fr; gap:8px}
.naeher{
  appearance:none; font-family:var(--ff-plakat); cursor:pointer;
  border:2px solid var(--ink); background:var(--karte-hoch); color:var(--ink);
  border-radius:var(--r-klein); min-height:72px; font-size:15px;
  text-transform:uppercase; box-shadow:3px 3px 0 var(--ink);
  padding:10px 8px; overflow:hidden; text-overflow:ellipsis;
}
.naeher:nth-child(2){font-size:12px; padding:10px 14px}
.naeher:active{box-shadow:1px 1px 0 var(--ink); transform:translate(2px,2px)}
.naeher.an{background:var(--akzent); color:var(--auf-akzent)}

.ansage-block{margin-bottom:16px; padding-bottom:14px; border-bottom:1px dashed var(--linie-hell)}
.ansage-reihe{grid-template-columns:repeat(6,1fr)}
.score.klein{min-height:42px; font-size:15px}

.rk-art{
  display:flex; align-items:center; gap:7px; margin:-4px 0 10px;
  font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3);
}
.rk-art svg{width:17px; height:17px; flex:none}

.rang{
  display:inline-flex; align-items:center; gap:7px; flex:none;
  border:2px solid var(--ink); background:var(--karte-hoch);
  border-radius:var(--r-klein); padding:5px 9px;
  box-shadow:2px 2px 0 var(--ink);
}
.rang.klein{border:none; background:none; box-shadow:none; padding:0; gap:0}
.rang-name{
  font-family:var(--ff-plakat); font-size:10.5px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--rang); line-height:1;
}
.sterne{display:inline-flex; gap:1.5px; align-items:center}
.stern{width:11px; height:11px; display:block}
.sterne .voll .stern{fill:var(--rang)}
.sterne .leer .stern{fill:var(--linie-hell)}
.rang.klein .stern{width:9.5px; height:9.5px}
.rang.klein .sterne{gap:1px}

.bahn-kopf{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px}

.rundenrang{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:14px; padding:11px 13px;
  border:2px solid var(--ink); background:var(--karte-hoch);
  border-radius:var(--r-klein); box-shadow:3px 3px 0 var(--ink);
}
.rundenrang .stern{width:15px; height:15px}
.rr-name{
  font-family:var(--ff-plakat); font-size:17px; text-transform:uppercase;
  color:var(--rang); line-height:1;
}
.rr-zus{
  font-family:var(--ff-mono); font-size:9.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3); margin-left:auto;
}

.speicher-warn{
  border:2px solid var(--stop); background:var(--stop-dunkel); color:var(--stop);
  border-radius:var(--r-klein); padding:12px 14px; margin-bottom:11px;
  font-family:var(--ff-plakat); font-size:14px; text-transform:uppercase; line-height:1.15;
}
.speicher-warn span{
  display:block; font-family:var(--ff); font-size:12.5px; font-weight:400;
  text-transform:none; color:var(--ink-2); margin-top:5px; line-height:1.5;
}

.weiterspielen{
  appearance:none; font-family:inherit; text-align:left; cursor:pointer; width:100%;
  display:flex; flex-direction:column; gap:3px;
  border:2px solid var(--ink); background:var(--akzent); color:var(--auf-akzent);
  border-radius:var(--r-klein); padding:14px 16px; box-shadow:4px 4px 0 var(--ink);
}
.weiterspielen:active{box-shadow:1px 1px 0 var(--ink); transform:translate(3px,3px)}
.ws-marke{font-family:var(--ff-mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; opacity:.7}
.ws-wort{font-family:var(--ff-plakat); font-size:19px; text-transform:uppercase; line-height:1.1}
.ws-zus{font-size:12px; opacity:.72}

.liste.anklickbar tr{cursor:pointer}
.liste.anklickbar tr:active td{background:var(--karte-hoch)}

.rang{--rang:var(--ink)}

.rk-vg{
  font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--akzent); margin-left:auto;
}

.rk-warn{
  border-left:3px solid var(--warn); padding:2px 0 2px 11px; margin:-2px 0 11px;
  font-size:12.5px; font-weight:700; color:var(--warn); line-height:1.3;
}
.rk-warn span{display:block; font-weight:400; font-size:12px; color:var(--ink-2); margin-top:2px}

.kz .v .einheit{font-family:var(--ff-mono); font-size:11px; font-weight:400}
.kz .rang{margin-bottom:2px}

.einr-marke{margin:0 0 26px}

.einr-marke img{width:min(100%, 330px); height:auto; display:block}
.wm-gross{display:flex; flex-direction:column; gap:2px; line-height:.92}
.wm-zeile{
  font-family:var(--ff-plakat); font-size:clamp(38px,11vw,60px);
  letter-spacing:-.01em; color:var(--ink);
}
.wm-zeile em{color:var(--akzent); font-style:normal}
.wm-zeile.zwei{
  font-family:var(--ff-mono); font-size:clamp(13px,3.4vw,17px);
  letter-spacing:.42em; text-transform:uppercase; color:var(--ink-3);
  padding-left:.2em;
}

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