/* ==================================================================
   Wertschöpfungs-Zwilling v3 — Bühne über die ganze Seite, Karten
   schweben über dem Werk. Farbwelt und Schrift folgen der CI von
   assets.danielbluemlein.de (Kobalt, Papier, Tinte).
   ================================================================== */
:root{
  --papier:#F4F6FB; --karte:#FFFFFF; --karte2:#F7F9FD;
  --tinte:#14181F; --grau:#6B7280; --leise:#98A2B3; --linie:#DCE3F0; --linie2:#EDF1F8;
  --kobalt:#2D5BD7; --kobalt-hell:#EAF0FC; --kobalt-tief:#1E3F9E; --kobalt-licht:#6B92F0;
  --fels:#0E1730; --fels-2:#1A2647; --auf-dunkel:#A9B6D6;
  --ok:#1A7F5A; --ok-hell:#E6F2ED; --ok-tief:#12583E;
  --warn:#B4770E; --warn-hell:#FBF0DC; --warn-tief:#8A5A08;
  --crit:#C63652; --crit-hell:#FBE9EE; --crit-tief:#93233A;
  --info:#0E7C86; --info-hell:#E6F4F5;
  --schatten:none;
  --schweben:0 1px 2px rgba(14,23,48,.06), 0 10px 30px rgba(14,23,48,.10);
  --radius:15px;
  --mono:'Space Mono', ui-monospace, SFMono-Regular, monospace;
  --kopf-h:62px;
  --schublade-w:0px;
}
[hidden]{display:none!important}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--papier);color:var(--tinte);overflow:hidden;
  font-family:'Hanken Grotesk',system-ui,sans-serif;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Bricolage Grotesque',sans-serif;margin:0;letter-spacing:-.022em}
a{color:inherit}
button{font:inherit;color:inherit}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--kobalt-tief)}
.eyebrow.crit{color:var(--crit-tief)}

/* ---------- Kopfzeile ---------- */
.kopf{position:fixed;inset:0 0 auto 0;height:var(--kopf-h);z-index:50;background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--linie);display:flex;align-items:center;gap:18px;padding:0 18px}
.marke-logo{display:flex;align-items:center;gap:11px;min-width:0;text-decoration:none}
.marke-logo .mono{width:36px;height:36px;border-radius:10px;background:var(--kobalt);display:flex;align-items:center;justify-content:center;flex:none}
.marke-logo .mono svg{width:21px;height:21px}
.marke-logo .t1{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:16.5px;line-height:1.1;white-space:nowrap}
.marke-logo .t2{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--grau);white-space:nowrap}
.akte{display:flex;gap:2px;background:var(--papier);border:1px solid var(--linie);border-radius:12px;padding:3px;margin:0 auto}
.akt{border:0;background:transparent;border-radius:9px;padding:7px 14px;font-size:13.5px;font-weight:600;color:var(--grau);
  cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:7px;transition:background .15s,color .15s}
.akt:hover{color:var(--tinte);background:#fff}
.akt.aktiv{background:#fff;color:var(--tinte);box-shadow:0 1px 3px rgba(14,23,48,.12)}
.akt .nr{font-family:var(--mono);font-size:10px;color:var(--leise)}
.akt.aktiv .nr{color:var(--kobalt)}
.kopf .rechts{display:flex;align-items:center;gap:10px}
.knopf{border:1px solid var(--linie);background:#fff;border-radius:10px;padding:8px 14px;font-size:13px;font-weight:700;
  cursor:pointer;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:background .15s,border-color .15s}
.knopf:hover{background:var(--karte2);border-color:#C9D4E8}
.knopf.primaer{background:var(--kobalt);border-color:var(--kobalt);color:#fff}
.knopf.primaer:hover{background:var(--kobalt-tief);border-color:var(--kobalt-tief)}
.knopf.klein{padding:6px 11px;font-size:12px;border-radius:9px}
.knopf.an{background:var(--kobalt-hell);border-color:#C6D5F6;color:var(--kobalt-tief)}
.demo{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--linie);border-radius:999px;padding:5px 11px;
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--grau);white-space:nowrap}
.demo .p{width:7px;height:7px;border-radius:50%;background:var(--kobalt)}

/* ---------- Bühne ---------- */
#buehne{position:fixed;top:var(--kopf-h);left:0;right:0;bottom:0;overflow:hidden;
  background:linear-gradient(#EEF2F8,#F4F6FB)}
#stage{position:absolute;inset:0}
#stage canvas{display:block;touch-action:none}

.karte{background:rgba(255,255,255,.96);border:1px solid var(--linie);border-radius:var(--radius);box-shadow:var(--schweben);backdrop-filter:blur(10px)}
.schwebt{position:absolute;z-index:20}

.ohne3d{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);max-width:420px;text-align:center;font-size:14px;color:var(--grau);line-height:1.6}
.ohne3d b{color:var(--tinte)}

/* Engpass-Karte */
.hud{top:16px;left:16px;width:304px;padding:16px 18px 14px}
.hud .eyebrow{display:flex;align-items:center;gap:7px}
.hud .eyebrow .pkt{width:8px;height:8px;border-radius:50%;background:var(--crit);animation:pulse 1.8s infinite}
.hud .gross{display:flex;align-items:baseline;gap:7px;margin-top:8px}
.hud .gross .v{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:38px;line-height:1;color:var(--crit)}
.hud .gross .von{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:20px;color:var(--leise)}
.hud .gross .e{font-size:12.5px;font-weight:600;color:var(--grau);line-height:1.25}
.hud .spur{position:relative;height:8px;border-radius:5px;background:var(--linie2);margin:10px 0 6px;overflow:hidden}
.hud .spur i{position:absolute;inset:0 auto 0 0;background:var(--crit);border-radius:5px}
.hud .spur b{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--tinte);opacity:.5}
.hud .unter{font-size:12px;color:var(--grau);line-height:1.45}
.hud .unter b{color:var(--tinte)}
.hud .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--linie2)}
.hud .kpi .v{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:17px;line-height:1.05}
.hud .kpi .v.crit{color:var(--crit)}
.hud .kpi .k{font-size:10.5px;font-weight:600;color:var(--grau);line-height:1.25;margin-top:3px}
.ticker{margin-top:12px;padding:11px 12px;border-radius:11px;background:var(--crit-hell);border:1px solid #F4D3DC}
.ticker .k{font-size:11px;font-weight:700;color:var(--crit-tief);letter-spacing:.02em}
.ticker .v{font-family:var(--mono);font-weight:700;font-size:21px;color:var(--crit-tief);font-variant-numeric:tabular-nums;line-height:1.2;margin-top:2px}
.ticker .s{font-family:var(--mono);font-size:10px;color:#B07A8A;margin-top:2px}
.hud .mehr{margin-top:10px;font-size:12px;font-weight:700;color:var(--kobalt);background:none;border:0;padding:0;cursor:pointer}
.hud .mehr:hover{text-decoration:underline}
.hud.zu .kpis,.hud.zu .ticker,.hud.zu .unter,.hud.zu .mehr{display:none}
.hud .falten{position:absolute;top:10px;right:10px;border:0;background:transparent;cursor:pointer;color:var(--leise);font-size:15px;padding:4px 6px;border-radius:7px}
.hud .falten:hover{background:var(--papier);color:var(--tinte)}

/* Werkzeuge oben rechts */
.werkzeuge{top:16px;right:calc(16px + var(--schublade-w));display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;
  transition:right .35s cubic-bezier(.16,1,.3,1)}
.werkzeuge .knopf{box-shadow:var(--schweben)}

/* Wertstrom-Leiste unten */
.rail{left:16px;right:calc(16px + var(--schublade-w));bottom:16px;padding:10px 12px;display:flex;align-items:stretch;gap:0;overflow-x:auto;
  transition:right .35s cubic-bezier(.16,1,.3,1);scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail .rk{flex:none;display:flex;flex-direction:column;justify-content:center;padding:0 14px 0 4px;border-right:1px solid var(--linie2);margin-right:6px}
.rail .rk .eyebrow{font-size:9.5px}
.rail .rk .t{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:13px;white-space:nowrap}
.glied{flex:1 1 0;min-width:112px;border:0;background:transparent;text-align:left;cursor:pointer;padding:6px 10px;border-radius:10px;
  border-left:3px solid var(--linie);transition:background .13s}
.glied:hover{background:var(--karte2)}
.glied.warn{border-left-color:var(--warn)} .glied.crit{border-left-color:var(--crit)} .glied.ok{border-left-color:var(--ok)}
.glied .n{font-family:var(--mono);font-size:9px;font-weight:700;color:var(--leise)}
.glied .m{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:12.5px;line-height:1.2;margin-top:1px}
.glied .w{font-family:var(--mono);font-size:12px;font-weight:700;margin-top:3px}
.glied .e{font-size:10px;color:var(--leise);font-weight:600;line-height:1.2}
.glied.eng{background:var(--crit-hell)}
.glied.eng .m{color:var(--crit)}
.glied .w.crit{color:var(--crit)} .glied .w.warn{color:var(--warn)}
.pfeil{align-self:center;color:#B7C3DA;font-size:12px;flex:none;padding:0 1px}

/* Beschriftungen im Werk */
.lbl{font-family:'Hanken Grotesk',sans-serif;color:var(--fels);background:rgba(255,255,255,.96);border:1px solid rgba(14,23,48,.1);
  padding:5px 11px 5px 8px;border-radius:12px;white-space:nowrap;cursor:pointer;pointer-events:auto;
  box-shadow:0 6px 18px rgba(14,23,48,.14);display:flex;align-items:center;gap:8px;user-select:none;
  transition:transform .15s, background .15s, box-shadow .15s}
.lbl .dot{width:8px;height:8px;border-radius:50%;background:var(--kobalt);flex:none}
.lbl.warn .dot{background:var(--warn)}
.lbl .lt{display:flex;flex-direction:column;line-height:1.2}
.lbl b{font-size:12px;font-weight:700}
.lbl .lk{font-family:var(--mono);font-size:9.5px;color:var(--grau);margin-top:1px}
.lbl:hover,.lbl.hover{transform:scale(1.05);box-shadow:0 8px 22px rgba(14,23,48,.2)}
.lbl.is-active{background:var(--fels);color:#fff;border-color:var(--fels)}
.lbl.is-active .lk{color:var(--auf-dunkel)}
.lbl.eng{border:1.5px solid var(--crit)}
.lbl.eng .dot{background:var(--crit);animation:pulse 1.8s infinite}
.lbl.eng b{color:var(--crit-tief)}
.lbl.eng.is-active{background:var(--crit);border-color:var(--crit)}
.lbl.eng.is-active b,.lbl.eng.is-active .lk{color:#fff}
.mini{font-family:var(--mono);font-size:10px;font-weight:700;padding:3px 8px;border-radius:7px;background:rgba(255,255,255,.95);
  border:1px solid var(--linie);white-space:nowrap;pointer-events:none;color:var(--grau)}
.mini.crit{color:var(--crit-tief);border-color:#F2C9D3;background:rgba(251,233,238,.96)}
.mini.warn{color:var(--warn-tief);border-color:#F1DDB5;background:rgba(251,240,220,.96)}
.mplbl{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.96);border:1px solid var(--linie);border-radius:10px;
  padding:4px 9px 4px 4px;font-size:11px;white-space:nowrap;cursor:pointer;pointer-events:auto;box-shadow:0 5px 14px rgba(14,23,48,.14)}
.mplbl .mpn{font-family:var(--mono);font-weight:700;font-size:10px;background:var(--kobalt);color:#fff;border-radius:6px;padding:2px 6px}
.mplbl.crit .mpn{background:var(--crit)} .mplbl.warn .mpn{background:var(--warn)} .mplbl.ok .mpn{background:var(--ok)}
.mplbl .mpt{color:var(--grau)} .mplbl .mpt b{color:var(--tinte);margin-right:3px}
.mplbl.is-active{outline:2px solid var(--kobalt);outline-offset:1px}
.token{display:flex;align-items:center;gap:6px;background:var(--kobalt);color:#fff;border-radius:999px;padding:4px 11px 4px 8px;
  font-family:var(--mono);font-size:11px;font-weight:700;box-shadow:0 8px 20px rgba(45,91,215,.35);pointer-events:none}
.token .dot{width:7px;height:7px;border-radius:50%;background:#fff;animation:pulseW 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(198,54,82,.5)}70%{box-shadow:0 0 0 9px rgba(198,54,82,0)}100%{box-shadow:0 0 0 0 rgba(198,54,82,0)}}
@keyframes pulseW{0%{box-shadow:0 0 0 0 rgba(255,255,255,.7)}70%{box-shadow:0 0 0 7px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}

.engmarke{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--crit);
  border-radius:6px;padding:3px 7px;transform:translate(10%,-120%);pointer-events:none;box-shadow:0 4px 12px rgba(198,54,82,.35)}
.engmarke::before{content:"⚠ "}

.innenlbl{font-family:'Hanken Grotesk',sans-serif;font-size:11px;color:#3F4756;background:rgba(255,255,255,.95);border:1px solid var(--linie);
  border-radius:9px;padding:4px 9px;white-space:nowrap;pointer-events:none;box-shadow:0 5px 14px rgba(14,23,48,.14);display:flex;align-items:center;gap:6px}
.innenlbl b{color:var(--tinte)}
.innenlbl.crit{border-color:#F2C9D3;background:rgba(251,233,238,.97);color:#7C3A4E} .innenlbl.crit b{color:var(--crit-tief)}
.innenlbl.warn{border-color:#F1DDB5;background:rgba(251,240,220,.97);color:#6E4B0B} .innenlbl.warn b{color:var(--warn-tief)}
.innenlbl .etage{font-family:var(--mono);font-size:9.5px;font-weight:700;background:var(--fels);color:#fff;border-radius:5px;padding:1px 6px}

/* Hallenkarte */
.hallenkarte{top:16px;left:16px;width:330px;padding:16px 18px}
.hallenkarte h3{font-size:19px;font-weight:800;margin-top:6px}
.hallenkarte p{font-size:12.5px;color:var(--grau);margin:6px 0 0;line-height:1.5}
.legende3d{display:flex;gap:12px;flex-wrap:wrap;margin-top:11px;font-size:11px;color:var(--grau)}
.legende3d span{display:flex;align-items:center;gap:6px}
.legende3d i{width:12px;height:12px;border-radius:3px;display:inline-block}
.legende3d .verbaut{background:#E8ECF2;border:1px solid #B7C0CD}
.legende3d .plan{border:1.5px dashed var(--kobalt-licht)}
.legende3d .fehlt{border:1.5px solid var(--crit);background:var(--crit-hell)}
.platz{margin-top:14px;padding-top:14px;border-top:1px solid var(--linie2)}
.platz .kopfzeile{display:flex;align-items:center;gap:8px}
.platz .mpn{font-family:var(--mono);font-weight:700;font-size:11px;background:var(--kobalt);color:#fff;border-radius:6px;padding:2px 7px}
.platz.crit .mpn{background:var(--crit)} .platz.warn .mpn{background:var(--warn)} .platz.ok .mpn{background:var(--ok)}
.platz h4{font-size:15.5px;font-weight:700}
.platz .belegung{display:flex;align-items:center;gap:10px;margin-top:10px;font-family:var(--mono);font-size:11.5px;color:var(--grau)}
.platz .belegung .spur{flex:1;height:8px;border-radius:5px;background:var(--linie2);overflow:hidden;position:relative}
.platz .belegung .spur i{position:absolute;inset:0 auto 0 0;border-radius:5px}
.platz .note{font-size:12.5px;color:var(--grau);margin-top:9px;line-height:1.5}
.fehlteile{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.fehlteil{display:flex;gap:9px;align-items:flex-start;padding:8px 10px;border-radius:10px;background:var(--crit-hell);border:1px solid #F4D3DC}
.fehlteil .ic{width:14px;height:14px;border:1.5px solid var(--crit);border-radius:3px;flex:none;margin-top:2px}
.fehlteil b{display:block;font-size:12.5px;color:var(--crit-tief)}
.fehlteil span{font-size:11px;color:#9A5A6C}

/* Zeitachse A-2043 */
.zeitachse{left:16px;right:calc(16px + var(--schublade-w));bottom:16px;padding:14px 16px 12px;display:grid;
  grid-template-columns:minmax(0,1fr) 280px;gap:18px;transition:right .35s cubic-bezier(.16,1,.3,1)}
.za-kopf{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.za-kopf .t{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:15px}
.za-kopf .s{font-size:11.5px;color:var(--grau)}
.za-kopf .steuer{margin-left:auto;display:flex;gap:6px;align-items:center}
.rund{width:34px;height:34px;border-radius:50%;border:1px solid var(--linie);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.rund.primaer{background:var(--kobalt);border-color:var(--kobalt);color:#fff}
.rund svg{width:14px;height:14px}
.spur-za{position:relative;height:46px;margin:6px 8px 4px;cursor:pointer;touch-action:none}
.spur-za .linie{position:absolute;left:0;right:0;top:22px;height:4px;border-radius:3px;background:var(--linie2)}
.spur-za .prognose{position:absolute;top:22px;height:4px;right:0;border-radius:3px;
  background:repeating-linear-gradient(90deg,#E3E8F2 0 6px,transparent 6px 10px)}
.spur-za .fortschritt{position:absolute;left:0;top:22px;height:4px;border-radius:3px;background:var(--kobalt)}
.spur-za .monat{position:absolute;top:32px;font-family:var(--mono);font-size:9.5px;color:var(--leise);transform:translateX(-50%)}
.spur-za .ev{position:absolute;top:17px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#fff;border:2.5px solid var(--kobalt);cursor:pointer;z-index:2;
  transition:transform .15s}
.spur-za .ev.warn{border-color:var(--warn)} .spur-za .ev.crit{border-color:var(--crit)} .spur-za .ev.ok{border-color:var(--ok)}
.spur-za .ev.prog{border-style:dashed}
.spur-za .ev.aktiv{transform:scale(1.35);background:currentColor}
.spur-za .ev.aktiv.crit{background:var(--crit)} .spur-za .ev.aktiv.warn{background:var(--warn)} .spur-za .ev.aktiv.ok{background:var(--ok)}
.spur-za .heute{position:absolute;top:2px;bottom:12px;width:0;border-left:1.5px dashed var(--tinte);opacity:.55}
.spur-za .heute span{position:absolute;top:-2px;left:4px;font-family:var(--mono);font-size:9px;font-weight:700;white-space:nowrap}
.spur-za .ziel{position:absolute;top:6px;bottom:16px;width:0;border-left:2px solid var(--crit)}
.spur-za .ziel span{position:absolute;top:-6px;left:4px;font-family:var(--mono);font-size:9px;font-weight:700;color:var(--crit);white-space:nowrap}
.spur-za .griff{position:absolute;top:12px;width:4px;height:24px;margin-left:-2px;border-radius:3px;background:var(--tinte);z-index:3;pointer-events:none}
.mini-charts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:8px}
.mc{border:1px solid var(--linie2);border-radius:11px;padding:8px 10px 6px;background:var(--karte2)}
.mc .k{font-size:10.5px;font-weight:700;color:var(--grau);display:flex;justify-content:space-between;gap:6px}
.mc .k b{font-family:var(--mono);font-size:12px;color:var(--tinte)}
.mc .k b.crit{color:var(--crit)}
.mc svg{width:100%;height:40px;display:block;margin-top:3px}
.za-liste{border-left:1px solid var(--linie2);padding-left:16px;overflow-y:auto;max-height:178px;display:flex;flex-direction:column;gap:2px}
.za-item{display:grid;grid-template-columns:44px 1fr;gap:8px;align-items:baseline;border:0;background:transparent;text-align:left;cursor:pointer;
  padding:5px 7px;border-radius:8px;font-size:12px;line-height:1.3}
.za-item:hover{background:var(--karte2)}
.za-item .d{font-family:var(--mono);font-size:10px;color:var(--leise)}
.za-item.aktiv{background:var(--kobalt-hell)}
.za-item.prog{color:var(--grau);font-style:italic}
.za-item .t::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;background:var(--kobalt);vertical-align:1px}
.za-item.warn .t::before{background:var(--warn)} .za-item.crit .t::before{background:var(--crit)} .za-item.ok .t::before{background:var(--ok)}

/* Ereigniskarte während der Zeitachse */
.ereignis{top:16px;left:16px;width:360px;padding:16px 18px}
.ereignis .proj{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--grau)}
.ereignis .proj .id{font-family:var(--mono);font-weight:700;font-size:11px;color:#fff;background:var(--kobalt);border-radius:6px;padding:2px 7px}
.ereignis .datum{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--grau);margin-top:12px}
.ereignis .datum .prog{color:var(--warn-tief);background:var(--warn-hell);border-radius:5px;padding:1px 6px;margin-left:6px}
.ereignis h3{font-size:20px;font-weight:800;line-height:1.15;margin-top:4px}
.ereignis p{font-size:13px;line-height:1.55;color:#3F4756;margin:8px 0 0}
.ereignis .zahlen{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--linie2)}
.ereignis .zahlen .v{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:17px;line-height:1.1}
.ereignis .zahlen .k{font-size:10.5px;color:var(--grau);font-weight:600;margin-top:2px}
.ereignis .mehr{margin-top:12px}
.ereignis .bilanz{margin-top:12px;padding-top:12px;border-top:1px solid var(--linie2)}
.ereignis .bilanz .zl{display:grid;grid-template-columns:1fr auto;gap:8px;font-size:12px;padding:3px 0}
.ereignis .bilanz .zl b{font-family:var(--mono);color:var(--crit)}
.ereignis .bilanz .summe{border-top:1px solid var(--linie2);margin-top:4px;padding-top:6px;font-weight:700}

/* Steuerpult */
.steuer{top:16px;left:16px;bottom:16px;width:372px;padding:16px 16px 14px;overflow-y:auto;display:flex;flex-direction:column}
.steuer h3{font-size:19px;font-weight:800;margin-top:6px}
.sp-lead{font-size:12.5px;color:var(--grau);line-height:1.5;margin:6px 0 0}
.markt{display:grid;grid-template-columns:1fr 1fr;gap:3px;background:var(--papier);border:1px solid var(--linie);border-radius:11px;padding:3px;margin-top:12px}
.markt button{border:0;background:transparent;border-radius:8px;padding:7px 6px;font-size:12px;font-weight:700;color:var(--grau);cursor:pointer}
.markt button.aktiv{background:#fff;color:var(--tinte);box-shadow:0 1px 3px rgba(14,23,48,.12)}
.massnahmen{display:flex;flex-direction:column;gap:7px;margin-top:12px}
.mn{display:flex;gap:11px;align-items:flex-start;text-align:left;border:1px solid var(--linie);background:#fff;border-radius:12px;padding:10px 12px;cursor:pointer;
  transition:border-color .15s, background .15s, box-shadow .15s}
.mn:hover{border-color:#C6D5F6;box-shadow:0 2px 8px rgba(14,23,48,.06)}
.mn.an{border-color:var(--kobalt);background:var(--kobalt-hell)}
.schalter{flex:none;width:32px;height:19px;border-radius:999px;background:#D5DCE8;position:relative;margin-top:2px;transition:background .15s}
.schalter i{position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:left .18s}
.mn.an .schalter{background:var(--kobalt)} .mn.an .schalter i{left:15px}
.mn-text{display:flex;flex-direction:column;min-width:0}
.mn-bereich{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--leise)}
.mn b{font-size:13px;line-height:1.25;margin-top:1px}
.mn-info{font-size:11.5px;color:var(--grau);line-height:1.4;margin-top:3px;display:none}
.mn:hover .mn-info,.mn.an .mn-info{display:block}
.mn-meta{display:flex;gap:10px;font-family:var(--mono);font-size:10px;color:var(--leise);margin-top:4px}
.sp-fuss{display:flex;gap:6px;margin-top:12px}
.vergleich{left:404px;right:calc(16px + var(--schublade-w));bottom:16px;padding:14px 16px 12px;transition:right .35s cubic-bezier(.16,1,.3,1)}
.vg-kopf{display:flex;align-items:center;gap:12px}
.vg-kopf .t{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:15px}
.vg-kopf .monat{margin-left:auto;font-family:var(--mono);font-size:11px;font-weight:700;color:var(--grau)}
.vg-rumpf{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px;margin-top:8px;align-items:start}
.vg-chart .legende{margin-top:4px}
.vg-kacheln{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.vk{border:1px solid var(--linie2);border-radius:11px;padding:8px 10px;background:var(--karte2)}
.vk .k{font-size:10.5px;font-weight:700;color:var(--grau);line-height:1.25}
.vk .v{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:16.5px;line-height:1.15;margin-top:3px;white-space:nowrap}
.vk .v.ok{color:var(--ok)} .vk .v.crit{color:var(--crit)}
.vk .s{font-family:var(--mono);font-size:9.5px;color:var(--leise);margin-top:2px}
.vk.eng{background:var(--crit-hell);border-color:#F4D3DC} .vk.eng .v{color:var(--crit-tief);font-size:14px;white-space:normal}
.vk.eng.gewandert{background:var(--warn-hell);border-color:#F1DDB5} .vk.eng.gewandert .v{color:var(--warn-tief)}
.vg-botschaft{margin-top:10px;font-size:13px;line-height:1.55;color:#3F4756;padding-top:10px;border-top:1px solid var(--linie2)}
.vg-botschaft .ton{font-weight:800;font-family:'Bricolage Grotesque',sans-serif;font-size:14px;margin-right:4px}
.vg-botschaft .ton.ok{color:var(--ok)} .vg-botschaft .ton.crit{color:var(--crit)} .vg-botschaft .ton.warn{color:var(--warn-tief)}
.mini.ok{color:var(--ok-tief);border-color:#CFE6DC;background:rgba(230,242,237,.96)}
.lbl.ok .dot{background:var(--ok)}
body.tour .steuer .mn:not(.an) .mn-info{display:none}

/* Tour */
body.tour .ereignis p{display:none}
.tourkarte{right:calc(16px + var(--schublade-w));top:66px;width:390px;padding:18px 20px 16px;border-top:3px solid var(--kobalt);
  transition:right .35s cubic-bezier(.16,1,.3,1), opacity .3s}
.tourkarte .zaehler{display:flex;align-items:center;gap:8px}
.tourkarte .punkte{display:flex;gap:4px;margin-left:auto}
.tourkarte .punkte i{width:6px;height:6px;border-radius:50%;background:var(--linie)}
.tourkarte .punkte i.an{background:var(--kobalt)}
.tourkarte h3{font-size:21px;font-weight:800;line-height:1.15;margin-top:10px}
.tourkarte p{font-size:13.5px;line-height:1.6;color:#3F4756;margin:8px 0 0}
.tourkarte p b{color:var(--tinte)}
.tourkarte .zahl{display:flex;align-items:baseline;gap:10px;margin-top:12px;padding:10px 12px;border-radius:11px;background:var(--crit-hell)}
.tourkarte .zahl .v{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:26px;color:var(--crit);line-height:1;white-space:nowrap}
.tourkarte .zahl .k{font-size:12px;color:var(--crit-tief);font-weight:600;line-height:1.3}
.tourkarte .zahl.kobalt{background:var(--kobalt-hell)} .tourkarte .zahl.kobalt .v{color:var(--kobalt-tief)} .tourkarte .zahl.kobalt .k{color:var(--kobalt-tief)}
.tourkarte .fuss{display:flex;align-items:center;gap:8px;margin-top:16px}
.tourkarte .fuss .ende{margin-right:auto;border:0;background:none;color:var(--grau);font-size:12px;font-weight:600;cursor:pointer;padding:0}
.tourkarte .fuss .ende:hover{color:var(--tinte)}
.tourkarte .tasten{font-family:var(--mono);font-size:9.5px;color:var(--leise);margin-top:10px}
kbd{font-family:var(--mono);font-size:9.5px;border:1px solid var(--linie);border-bottom-width:2px;border-radius:4px;padding:0 4px;background:#fff}

/* Einstieg */
.intro{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:20px;
  background:radial-gradient(ellipse at center, rgba(244,246,251,.72) 0%, rgba(244,246,251,.35) 70%);transition:opacity .45s}
.intro.weg{opacity:0;pointer-events:none}
.intro .karte{max-width:560px;padding:30px 32px 26px}
.intro h1{font-size:40px;font-weight:800;line-height:1.05;margin-top:12px}
.intro h1 .alt{color:var(--leise);text-decoration:line-through;text-decoration-thickness:3px;text-decoration-color:rgba(198,54,82,.6)}
.intro h1 .neu{color:var(--crit)}
.intro p{font-size:15px;line-height:1.6;color:#3F4756;margin:14px 0 0}
.intro .wahl{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.intro .wahl .knopf{padding:12px 18px;font-size:14px}
.intro .hinweis{font-family:var(--mono);font-size:10.5px;color:var(--leise);margin-top:16px}

/* Abschluss */
.abschluss .zahlen{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.abschluss .zahlen > div{background:var(--karte2);border:1px solid var(--linie);border-radius:12px;padding:10px}
.abschluss .zahlen .v{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:16px;line-height:1.1;white-space:nowrap}
.abschluss .zahlen .k{font-size:10.5px;color:var(--grau);font-weight:600;margin-top:5px;line-height:1.3}

/* Ladeanzeige */
.loader{position:absolute;inset:0;z-index:45;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;
  background:var(--papier);font-family:'Bricolage Grotesque',sans-serif;transition:opacity .5s}
.loader.weg{opacity:0;pointer-events:none}
.loader .sp{width:36px;height:36px;border-radius:50%;border:4px solid var(--linie);border-top-color:var(--kobalt);animation:spin 1s linear infinite}
.loader .tx{font-weight:600;font-size:14px;color:var(--fels-2)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Seitenleiste mit den Funktionsseiten ---------- */
.schublade{position:fixed;top:var(--kopf-h);right:0;bottom:0;width:620px;max-width:100vw;z-index:30;background:var(--papier);
  border-left:1px solid var(--linie);display:flex;flex-direction:column;visibility:hidden;
  transform:translateX(100%);transition:transform .38s cubic-bezier(.16,1,.3,1), width .38s cubic-bezier(.16,1,.3,1), visibility 0s linear .38s}
.schublade.offen{transition:transform .38s cubic-bezier(.16,1,.3,1), width .38s cubic-bezier(.16,1,.3,1), visibility 0s}
.schublade.offen{transform:none;visibility:visible;box-shadow:-18px 0 40px rgba(14,23,48,.08)}
.schublade.breit{width:min(980px, 72vw)}
.sch-kopf{display:flex;align-items:center;gap:6px;padding:10px 12px 10px 14px;background:#fff;border-bottom:1px solid var(--linie)}
.sch-tabs{display:flex;gap:2px;overflow-x:auto;flex:1;scrollbar-width:thin}
.sch-tabs::-webkit-scrollbar{height:4px}
.sch-tabs::-webkit-scrollbar-thumb{background:#C9D4E8;border-radius:4px}
.tab{flex:none;border:none;background:transparent;cursor:pointer;padding:7px 11px;border-radius:9px;font-size:12.5px;font-weight:600;
  color:var(--grau);white-space:nowrap;display:flex;align-items:center;gap:6px}
.tab:hover{background:var(--karte2);color:var(--tinte)}
.tab .pkt{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}
.tab .pkt.warn{background:var(--warn)} .tab .pkt.crit{background:var(--crit)}
.tab.aktiv{background:var(--kobalt);color:#fff}
.tab .nr{font-family:var(--mono);font-size:9.5px;color:var(--leise)}
.tab.aktiv .nr{color:#A9C0F7}
.icknopf{flex:none;width:34px;height:34px;border-radius:9px;border:1px solid var(--linie);background:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--grau)}
.icknopf:hover{color:var(--tinte);background:var(--karte2)}
.icknopf svg{width:15px;height:15px}
.sch-inhalt{flex:1;overflow-y:auto;padding:24px 24px 60px;scroll-behavior:smooth}
.sch-inhalt .fkopf h2{font-size:25px}
.schublade:not(.breit) .fgitter > *{grid-column:span 12 !important}
.schublade:not(.breit) .regler{grid-template-columns:1fr}
.sch-fuss{font-size:11.5px;color:var(--leise);margin-top:30px;padding-top:16px;border-top:1px solid var(--linie)}

.begrenzung{grid-column:1/-1;font-size:12.5px;line-height:1.55;border-radius:11px;padding:10px 13px}
.begrenzung.teile{background:var(--warn-hell);color:#6E4B0B;border:1px solid #F1DDB5}
.begrenzung.montage{background:var(--ok-hell);color:#2F5A48;border:1px solid #CFE6DC}

/* ---------- Schmale Bildschirme ---------- */
@media (max-width:1560px){
  .marke-logo .t2{display:none}
}
@media (max-width:1240px){
  .kopf #ihreKnopf .lang{display:none}
  .kopf{gap:12px;padding:0 12px}
  .akt{padding:7px 10px}
  .akt .nr{display:none}
  .demo{display:none}
}
@media (max-width:1020px) and (min-width:821px){
  .marke-logo .t1{display:none}
}
@media (max-width:1100px){
  .vg-rumpf{grid-template-columns:1fr}
  .vg-chart svg{max-height:110px}
  .akt .nr{display:none}
  .demo .lang{display:none}
  .zeitachse{grid-template-columns:1fr}
  .za-liste{display:none}
}
@media (max-width:820px){
  :root{--kopf-h:100px}
  .kopf{flex-wrap:wrap;height:var(--kopf-h);padding:8px 10px;gap:8px 8px;align-content:center}
  .marke-logo{gap:8px;min-width:0;flex:1}
  .marke-logo .t1{font-size:15px;overflow:hidden;text-overflow:ellipsis}
  .kopf .knopf{padding:7px 11px}
  .kopf .lang{display:none}
  .marke-logo .t2{display:none}
  .marke-logo .mono{width:30px;height:30px}
  .akte{order:3;width:100%;margin:0;overflow-x:auto;scrollbar-width:none}
  .akt{padding:6px 11px;font-size:12.5px}
  .kopf .rechts{margin-left:auto}
  .kopf .rechts .demo{display:none}
  .hud{left:10px;right:10px;width:auto;top:10px;padding:12px 14px}
  .hud .gross .v{font-size:30px}
  .hud .kpis{display:none}
  .lbl .lk{display:none}
  .lbl{padding:4px 9px 4px 7px}
  .ticker{margin-top:8px;padding:8px 10px} .ticker .v{font-size:17px}
  .werkzeuge{display:none}
  .rail{left:10px;right:10px;bottom:10px;padding:8px}
  .rail .rk{display:none}
  .glied{min-width:100px}
  .zeitachse{left:10px;right:10px;bottom:10px;padding:10px 12px}
  .mini-charts{display:none}
  .ereignis,.hallenkarte{left:10px;right:10px;width:auto;top:10px;padding:13px 15px}
  .ereignis p{font-size:12.5px}
  .ereignis .zahlen{display:none}
  .tourkarte{left:10px;right:10px;width:auto;top:auto;bottom:10px;padding:14px 16px}
  /* Steuerpult auf dem Handy: Hebel als waagrechte Leiste oben, Ergebnis kompakt unten */
  .steuer{left:10px;right:10px;width:auto;top:10px;bottom:auto;padding:10px 10px 8px;overflow:visible}
  .steuer h3,.steuer .sp-lead,.steuer .sp-fuss{display:none}
  .steuer .markt{margin-top:8px}
  .steuer .massnahmen{flex-direction:row;overflow-x:auto;gap:6px;margin-top:8px;padding-bottom:2px;scrollbar-width:none;scroll-snap-type:x mandatory}
  .steuer .massnahmen::-webkit-scrollbar{display:none}
  .mn{flex:none;width:200px;padding:8px 10px;scroll-snap-align:start}
  .mn .mn-info,.mn:hover .mn-info,.mn.an .mn-info,.mn .mn-meta{display:none}
  .mn b{font-size:12px}
  .vergleich{left:10px;right:10px;bottom:10px;padding:10px 12px}
  .vg-kopf .t{font-size:13px}
  .vg-rumpf{grid-template-columns:1fr;margin-top:6px}
  .vg-chart{display:none}
  .vg-kacheln{grid-template-columns:repeat(3,1fr);gap:6px}
  .vk{padding:6px 8px}
  .vk:nth-child(2),.vk:nth-child(4),.vk:nth-child(5){display:none}
  .vk .v{font-size:14px;white-space:normal}
  .vk .s{display:none}
  .vg-botschaft{font-size:12px;line-height:1.45;margin-top:8px;padding-top:8px}
  /* Während der Tour trägt die Tourkarte die Zahl — unten bleibt Platz für das Werk */
  body.tour .vergleich,body.tour .zeitachse{display:none}
  body.tour .ereignis .zahlen{display:none}
  .tourkarte h3{font-size:18px} .tourkarte p{font-size:13px}
  .tourkarte .tasten{display:none}
  .schublade,.schublade.breit{width:100vw}
  .sch-inhalt{padding:18px 14px 50px}
  .intro h1{font-size:30px}
  .intro .karte{padding:22px 20px}
}

/* Mit Ihren Zahlen */
.hud-fuss{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hud .mehr.leise{color:var(--grau);font-weight:600}
.hud.ihr{border-top:3px solid var(--kobalt)}
.hud.ihr .eyebrow{color:var(--kobalt-tief)}
.hud.ihr .eyebrow .pkt{background:var(--kobalt);animation:none}
.hud.ihr .gross .v{color:var(--kobalt-tief)}
.hud.ihr .spur i{background:var(--kobalt)}
.intro-ihre{display:block;margin-top:14px;border:0;background:none;padding:0;color:var(--kobalt);font-weight:700;font-size:13.5px;cursor:pointer}
.intro-ihre:hover{text-decoration:underline}
.iz{position:fixed;inset:var(--kopf-h) 0 0 0;z-index:60;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(238,242,248,.72);backdrop-filter:blur(6px);opacity:0;transition:opacity .25s}
.iz.offen{opacity:1}
.iz-karte{position:relative;width:min(1040px,100%);max-height:100%;overflow-y:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:0;padding:0;box-shadow:0 30px 80px rgba(14,23,48,.22)}
.iz-zu{position:absolute;top:14px;right:14px;z-index:2}
.iz-links{padding:28px 28px 24px;border-right:1px solid var(--linie2)}
.iz-links h2{font-size:30px;font-weight:800;line-height:1.08;margin-top:10px}
.iz-links h2 em{font-style:normal;color:var(--kobalt)}
.iz-lead{font-size:13.5px;color:var(--grau);line-height:1.55;margin:10px 0 0}
.iz-felder{display:flex;flex-direction:column;gap:14px;margin-top:20px}
.iz-feld label{display:block;font-size:12.5px;font-weight:700;color:var(--tinte);margin-bottom:5px}
.iz-eingabe{display:flex;align-items:center;gap:12px}
.iz-eingabe input[type=range]{flex:1;accent-color:var(--kobalt);min-width:0}
.iz-zahl{display:flex;align-items:center;gap:6px;border:1px solid var(--linie);border-radius:9px;padding:4px 9px;background:#fff;flex:none}
.iz-zahl:focus-within{border-color:var(--kobalt);box-shadow:0 0 0 3px var(--kobalt-hell)}
.iz-zahl input{width:64px;border:0;outline:0;font-family:var(--mono);font-size:14px;font-weight:700;text-align:right;background:transparent;color:var(--tinte)}
.iz-zahl span{font-size:11.5px;color:var(--grau);font-weight:600;min-width:34px}
.iz-schutz{display:flex;align-items:center;gap:8px;margin-top:20px;font-size:11.5px;color:var(--ok-tief);background:var(--ok-hell);border-radius:10px;padding:9px 11px;line-height:1.4}
.iz-rechts{padding:28px 28px 24px;background:var(--karte2);display:flex;flex-direction:column;gap:14px}
.iz-gross .iz-v{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:52px;line-height:1;margin-top:8px;letter-spacing:-.03em}
.iz-v.crit{color:var(--crit)}
.iz-gross .iz-k{font-size:13px;color:var(--grau);margin-top:6px}
.iz-vergleich{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;margin-top:12px;font-size:12.5px;color:var(--grau)}
.iz-vergleich b{font-family:'Bricolage Grotesque',sans-serif;font-size:20px;color:var(--tinte)}
.iz-reihe{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.iz-kachel{background:#fff;border:1px solid var(--linie);border-radius:12px;padding:12px}
.iz-kachel .v{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:21px;line-height:1.05;white-space:nowrap}
.iz-kachel.ok .v{color:var(--ok)} .iz-kachel.crit .v{color:var(--crit)}
.iz-kachel .k{font-size:11.5px;font-weight:600;color:var(--grau);margin-top:5px;line-height:1.35}
.iz-kachel .s{font-family:var(--mono);font-size:9.5px;color:var(--leise);margin-top:5px;line-height:1.4}
.iz-hinweis{font-size:12.5px;line-height:1.5;background:var(--warn-hell);border:1px solid #F1DDB5;border-radius:11px;padding:10px 12px;color:#6E4B0B}
.iz-annahmen{font-size:12px;color:var(--grau)}
.iz-annahmen summary{cursor:pointer;font-weight:700;color:var(--kobalt)}
.iz-annahmen ul{margin:8px 0 0;padding-left:18px;line-height:1.5}
.iz-mitlauf{display:none}
.iz-knoepfe{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.iz-knoepfe .knopf{padding:11px 16px;font-size:13.5px;text-decoration:none}
@media (max-width:860px){
  .iz{padding:0;align-items:stretch}
  .iz-karte{grid-template-columns:1fr;border-radius:0;max-height:none;height:100%}
  .iz-links,.iz-rechts{padding:20px 16px}
  .iz-links h2{font-size:24px}
  .iz-gross .iz-v{font-size:40px}
  .iz-reihe{grid-template-columns:1fr}
  .kopf #ihreKnopf .lang{display:none}
}

body.bild .werkzeuge,body.bild .rail,body.bild .intro,body.bild .hud-fuss,body.bild .hud .falten{display:none!important}

@media (max-width:860px){
  .iz-karte{display:block;padding-bottom:0}
  .iz-mitlauf{display:flex;position:sticky;bottom:0;z-index:3;align-items:center;justify-content:space-between;gap:10px;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--linie);box-shadow:0 -8px 20px rgba(14,23,48,.08)}
  .iz-mitlauf b{font-family:'Bricolage Grotesque',sans-serif;font-size:19px;color:var(--crit)}
  .iz-mitlauf span{font-size:12px;color:var(--grau)}
}

body.eingebettet .demo{display:none}
body.eingebettet #grossKnopf{text-decoration:none}