/* Büro-Dashboard — Kommandozentrum. Aufbau nach dem Vorbild eines Agenten-Leitstands
   (Netz, Leuchten, Live-Gefühl), Farben ausschließlich aus tokens.css (Sunntech-Design).
   In dieser Datei steht keine einzige Farbe als Zahl — der Wächter prüft das. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;color:var(--ink);font:15px/1.55 var(--font-text);-webkit-font-smoothing:antialiased;
  background:radial-gradient(1200px 620px at 50% -140px,var(--buehne-a),transparent 70%),var(--bg);background-attachment:fixed;
  transition:background .55s ease,color .35s ease}
/* feines Raster über der ganzen Fläche, zur Mitte hin ausgeblendet */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(var(--raster) 1px,transparent 1px),linear-gradient(90deg,var(--raster) 1px,transparent 1px);background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 30%,black 30%,transparent 85%);mask-image:radial-gradient(ellipse 90% 80% at 50% 30%,black 30%,transparent 85%)}
h1,h2,h3{font-family:var(--font-titel);letter-spacing:-.02em;margin:0;font-weight:700}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,[tabindex]:focus-visible,input:focus-visible{outline:2px solid var(--sun);outline-offset:2px}
[hidden]{display:none!important}
svg.u{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.klein{font-size:11px}
.raum{flex:1}

/* Glas-Paneele */
.glas{position:relative;background:var(--glas);border:1px solid var(--glas-rand);border-radius:20px;box-shadow:var(--card-shadow),inset 0 1px 0 var(--glas-licht);
  backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);transition:background .55s,border-color .55s}

/* Kopfzeile */
.kopf{position:sticky;top:0;z-index:20;background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line-2);transition:background .55s}
.kopf-in{max-width:1560px;margin:0 auto;padding:10px 24px;display:flex;align-items:center;gap:10px;position:relative;z-index:1}
.marke{display:flex;align-items:center;gap:10px;font-family:var(--font-titel);font-weight:700;font-size:17px;white-space:nowrap}
.brand-mark{width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 40% 35%,var(--sun-hell),var(--sun) 58%,var(--sun-tief));box-shadow:0 0 14px var(--glow-sun-stark);flex:none;display:inline-block}
.live{width:8px;height:8px;border-radius:50%;background:var(--ink-3)}
.live.an{background:var(--gruen);box-shadow:0 0 8px var(--glow-gruen);animation:atmenP 2.4s ease-in-out infinite}
.live.aus{background:var(--ton)}
.pille{border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:600;border:1px solid var(--line);background:var(--surface-2);white-space:nowrap}
.pille.gruen{background:var(--gruen);color:var(--badge-ink);border-color:transparent}
.pille.sonnig{background:var(--sun-soft);color:var(--sun);border-color:var(--sun-line)}
html[data-theme=light] .pille.sonnig{color:var(--sun-tief)}
.schalter{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface-2);border-radius:999px;padding:4px 10px 4px 5px;font-size:12.5px;font-weight:600}
.schalter .bahn{width:30px;height:18px;border-radius:999px;background:var(--line);position:relative;transition:background .3s}
.schalter .bahn::after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:var(--ink-2);transition:transform .3s,background .3s}
.schalter[aria-pressed="true"] .bahn{background:var(--sun);box-shadow:0 0 10px var(--glow-sun)}
.schalter[aria-pressed="true"] .bahn::after{transform:translateX(12px);background:var(--badge-sun-ink)}
.schalter:disabled{opacity:.6;cursor:default}
.rund{width:38px;height:38px;border-radius:12px;border:1px solid var(--line);background:var(--surface-2);display:grid;place-items:center;flex:none}
.ansicht{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;background:var(--surface-2)}
.ansicht button{display:inline-flex;gap:6px;align-items:center;border:0;background:transparent;border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:700;color:var(--ink-2);transition:background .25s,color .25s}
.ansicht button svg{width:15px;height:15px}
.ansicht button[aria-pressed="true"]{background:var(--sun);color:var(--badge-sun-ink);box-shadow:0 0 14px var(--glow-sun)}

main{position:relative;z-index:1;max-width:1560px;margin:0 auto;padding:18px 24px 70px}

/* Meldungen: Fehler immer sichtbar */
.meldung{display:flex;gap:12px;align-items:flex-start;background:var(--ton-soft);color:var(--ton);border:1px solid var(--ton);border-radius:16px;padding:12px 14px;margin-bottom:16px;font-weight:600}
.meldung p{margin:0;flex:1;color:var(--ink)}
.meldung .knopf{flex:none}
.vorfuehr-band{display:flex;gap:10px;align-items:center;background:var(--sun-soft);border:1px solid var(--sun-line);color:var(--hero-ink);border-radius:14px;padding:8px 14px;margin-bottom:14px;font-size:13px}
.vorfuehr-band svg{color:var(--sun)}

/* HUD: Urteil und Kennzahlen */
.hud{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px;align-items:center;padding:18px 22px;overflow:hidden}
.hud::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--sun),transparent);opacity:.7}
.hud small{color:var(--hero-sub);font-weight:600;letter-spacing:.02em}
.hud h1{font-size:clamp(26px,3.1vw,38px);line-height:1.08;margin:4px 0 8px}
.hud h1 em{font-style:normal;color:var(--sun);text-shadow:0 0 24px var(--glow-sun)}
html[data-theme=light] .hud h1 em{color:var(--sun-tief);text-shadow:none}
.hud-zeile{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;color:var(--ink-2);font-variant-numeric:tabular-nums}
.hud-trenn{width:1px;height:11px;background:var(--line)}
.hud-punkt{width:7px;height:7px;border-radius:50%;background:var(--gruen);box-shadow:0 0 10px var(--glow-gruen);animation:atmenP 2s ease-in-out infinite;flex:none;display:inline-block}
.hud-punkt.aus{background:var(--ton);box-shadow:0 0 10px var(--glow-ton)}
.kennzahlen{display:grid;grid-template-columns:repeat(5,minmax(96px,1fr));gap:8px}
.kz{display:flex;flex-direction:column;gap:6px;text-align:left;border:1px solid var(--line);background:var(--surface-2);border-radius:14px;padding:10px 13px;color:inherit;transition:transform .2s,border-color .3s,box-shadow .3s;position:relative;overflow:hidden}
.kz::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--line)}
button.kz:hover{transform:translateY(-2px);border-color:var(--sun-line)}
.kz .zahl{font-family:var(--font-mono);font-weight:600;font-size:28px;line-height:1;font-variant-numeric:tabular-nums}
.kz .was{font-size:10.5px;color:var(--ink-2);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-family:var(--font-mono)}
.kz.sun .zahl{color:var(--sun);text-shadow:0 0 18px var(--glow-sun)} .kz.sun::before{background:var(--sun);box-shadow:0 0 10px var(--glow-sun-stark)}
.kz.ton .zahl{color:var(--ton);text-shadow:0 0 18px var(--glow-ton)} .kz.ton::before{background:var(--ton)}
.kz.gruen .zahl{color:var(--chip-stroke)} .kz.gruen::before{background:var(--gruen)}
html[data-theme=light] .kz.sun .zahl{color:var(--sun-tief);text-shadow:none}
html[data-theme=light] .kz.gruen .zahl{color:var(--gruen)}
html[data-theme=light] .kz.ton .zahl{text-shadow:none}

/* Kommando-Raster: Netz links, Pult rechts */
.kommando{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:16px;margin-top:16px;align-items:start}
.kommando-links{position:sticky;top:72px;display:flex;flex-direction:column;gap:16px}
.pult{display:flex;flex-direction:column;gap:16px;min-width:0}
.pult-kopf{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.pult-kopf h2{font-size:15px;letter-spacing:0}
.pult .abschnitt{margin:0}
.unten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}
.unten .lieferliste{margin:0}

/* Bühne mit dem Netz */
.buehne{padding:14px 16px 12px;overflow:hidden;background:radial-gradient(820px 520px at 50% 52%,var(--sun-soft),transparent 70%),var(--glas)}
.buehne::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background-image:linear-gradient(var(--raster-stark) 1px,transparent 1px),linear-gradient(90deg,var(--raster-stark) 1px,transparent 1px);background-size:32px 32px;
  -webkit-mask-image:radial-gradient(ellipse at center,black 20%,transparent 75%);mask-image:radial-gradient(ellipse at center,black 20%,transparent 75%)}
.buehne-kopf{position:relative;display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.buehne-kopf small{display:block;font-size:10.5px;color:var(--sun);letter-spacing:.18em;font-weight:700}
html[data-theme=light] .buehne-kopf small{color:var(--sun-tief)}
.buehne-kopf h2{font-size:17px}
.legende-netz{display:flex;gap:6px;flex-wrap:wrap}
.lg{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface-2);border-radius:999px;padding:4px 10px;font-size:12px;font-weight:600;color:var(--ink-2);transition:border-color .2s,background .2s}
.lg i{width:8px;height:8px;border-radius:50%;background:var(--ink-3)}
.lg.z-laeuft i{background:var(--sun);box-shadow:0 0 8px var(--glow-sun-stark)} .lg.z-wartet i{background:var(--sun-tief)} .lg.z-fehler i{background:var(--ton);box-shadow:0 0 8px var(--glow-ton)} .lg.z-fertig i{background:var(--gruen)} .lg.z-geplant i{background:transparent;border:1.5px dashed var(--ink-3)}
.lg[aria-pressed="true"]{border-color:var(--sun);background:var(--sun-soft);color:var(--ink)}
.lg .mono{color:var(--ink);font-weight:700}
.knopf.zoom{display:none}
.netz-rahmen{position:relative;margin:0 -6px}
.buehne-fuss{position:relative;display:flex;flex-wrap:wrap;gap:14px;align-items:center;font-size:11.5px;color:var(--ink-2);padding:2px 4px 0}
.buehne-fuss span{display:inline-flex;gap:6px;align-items:center}
.fl{width:18px;height:2px;border-radius:2px;display:inline-block}
.fl-sun{background:var(--sun);box-shadow:0 0 8px var(--glow-sun-stark)} .fl-ton{background:var(--ton)} .fl-ruhig{background:var(--linie-fluss)}
.buehne-tipp{margin-left:auto;font-family:var(--font-mono);letter-spacing:.06em;text-transform:uppercase;font-size:10.5px}

.netz-flaeche{position:relative;width:100%;aspect-ratio:1400/900}
.netz-canvas,.netz-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.netz-svg{overflow:visible}
.bahn{fill:none;stroke:var(--line);stroke-width:1}
.bahn.b1,.bahn.b2{stroke-dasharray:2 7}
.bahn.b0{stroke:var(--sun-line);stroke-dasharray:1 9}
.bahn.b3{stroke:var(--line-2)}
.bereich-bogen{fill:none;stroke:var(--chip-stroke);stroke-width:2.2;stroke-linecap:round;opacity:.35}
html[data-theme=light] .bereich-bogen{stroke:var(--gruen);opacity:.3}
.bereich-name{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;fill:var(--ink-3);font-weight:700}
.inst-bogen{fill:none;stroke:var(--gruen);stroke-width:3;stroke-linecap:round;opacity:.8}
.inst-glow{fill:none;stroke:var(--glow-gruen);stroke-width:12;stroke-linecap:round}
.inst.bereit .inst-bogen{stroke:var(--sun);opacity:1}
.inst.bereit .inst-glow{stroke:var(--glow-sun);animation:atmenO 2.8s ease-in-out infinite}
.inst-pfad{fill:none;stroke:none}
.inst-name{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;font-weight:700;fill:var(--chip-stroke)}
html[data-theme=light] .inst-name{fill:var(--gruen)}
.inst.bereit .inst-name{fill:var(--sun)}
html[data-theme=light] .inst.bereit .inst-name{fill:var(--sun-tief)}
.inst.fehlt .inst-bogen{stroke-dasharray:4 5}

/* Knoten */
.nk{cursor:pointer;outline:none}
.nk-hit{fill:transparent}
.nk-glow{fill:url(#nz-glow-sun);opacity:0;transition:opacity .3s}
.nk-puls{fill:none;stroke:var(--sun);stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center}
.nk-kreis{fill:var(--surface);stroke:var(--ink-3);stroke-width:1.8;transition:stroke-width .2s,fill .3s}
.nk-bogen{fill:none;stroke:var(--sun);stroke-width:1.6;stroke-dasharray:9 40;stroke-linecap:round;opacity:0;transform-box:fill-box;transform-origin:center}
.nk-sym{fill:none;stroke:var(--chip-stroke);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nk-kern{fill:var(--ink-3)}
.nk-name{font-family:var(--font-text);font-size:11px;font-weight:600;fill:var(--ink-2);transition:fill .2s,opacity .25s}
.nk-r2 .nk-name{font-size:10.5px;font-weight:500;fill:var(--ink-3)}
.gs.o1{stop-color:var(--sun);stop-opacity:.55}.gs.o2{stop-color:var(--sun);stop-opacity:.16}.gs.o0{stop-color:var(--sun);stop-opacity:0}
.gt.o1{stop-color:var(--ton);stop-opacity:.6}.gt.o2{stop-color:var(--ton);stop-opacity:.18}.gt.o0{stop-color:var(--ton);stop-opacity:0}
.gg.o1{stop-color:var(--chip-stroke);stop-opacity:.35}.gg.o2{stop-color:var(--chip-stroke);stop-opacity:.1}.gg.o0{stop-color:var(--chip-stroke);stop-opacity:0}
.gk.o1{stop-color:var(--sun);stop-opacity:.5}.gk.o2{stop-color:var(--sun);stop-opacity:.18}.gk.o0{stop-color:var(--sun);stop-opacity:0}
.kern-a{stop-color:var(--sun-hell)}.kern-b{stop-color:var(--sun)}.kern-c{stop-color:var(--sun-tief)}

.nk.z-laeuft .nk-kreis{stroke:var(--sun);fill:var(--surface)}
.nk.z-laeuft .nk-glow{opacity:1;animation:atmenO 2.2s ease-in-out infinite}
.nk.z-laeuft .nk-puls{animation:puls 2s ease-out infinite}
.nk.z-laeuft .nk-bogen{opacity:1;animation:drehen 1.6s linear infinite}
.nk.z-laeuft .nk-sym{stroke:var(--sun)}
.nk.z-laeuft .nk-kern{fill:var(--sun)}
.nk.z-laeuft .nk-name{fill:var(--ink)}
.nk.z-wartet .nk-kreis{fill:var(--badge-sun);stroke:var(--sun-tief);stroke-width:2}
.nk.z-wartet .nk-glow{opacity:.85;animation:atmenO 3s ease-in-out infinite}
.nk.z-wartet .nk-sym{stroke:var(--badge-sun-ink)}
.nk.z-wartet .nk-kern{fill:var(--badge-sun-ink)}
.nk.z-wartet .nk-name{fill:var(--ink)}
.nk.z-fehler .nk-kreis{fill:var(--ton-soft);stroke:var(--ton);stroke-width:2.2}
.nk.z-fehler .nk-glow{fill:url(#nz-glow-ton);opacity:1;animation:atmenO 1.2s ease-in-out infinite}
.nk.z-fehler .nk-puls{stroke:var(--ton);animation:puls 1.3s ease-out infinite}
.nk.z-fehler .nk-sym{stroke:var(--ton)}
.nk.z-fehler .nk-kern{fill:var(--ton)}
.nk.z-fehler .nk-name{fill:var(--ton);font-weight:700}
.nk.z-fertig .nk-kreis{stroke:var(--gruen);fill:var(--gruen-soft)}
.nk.z-fertig .nk-kern{fill:var(--gruen)}
.nk.z-geplant .nk-kreis{stroke-dasharray:2.5 3;fill:var(--surface-2)}
.nk.z-geplant .nk-sym{opacity:.5}
.nk.z-geplant .nk-name{opacity:.75}
.nk.orange .nk-kreis{stroke:var(--orange-ink)}
.nk.orange .nk-sym{stroke:var(--orange-ink)}
.nk:hover .nk-kreis,.nk:focus .nk-kreis{stroke-width:3}
.nk:focus-visible .nk-hit{stroke:var(--sun);stroke-width:1.5;stroke-dasharray:3 3}
.netz-svg.fokus .nk:not(.hell),.netz-svg.fokus .inst:not(.hell){opacity:.28}
.netz-svg.fokus .nk.hell .nk-name{fill:var(--ink)}
.netz-svg.gefiltert .nk:not(.treffer){opacity:.22}
.netz-svg.gefiltert .nk.treffer .nk-glow{opacity:1}
.nk,.inst{transition:opacity .25s}

/* Kern: CEO B */
.kern{cursor:pointer;outline:none}
.kern-glow{fill:url(#nz-kern-glow);animation:atmenO 5s ease-in-out infinite}
.kern-skala{fill:none;stroke:var(--sun-line);stroke-width:5;stroke-dasharray:1 7;transform-box:fill-box;transform-origin:center;animation:drehen 60s linear infinite reverse}
.kern-ring{fill:none;stroke:var(--sun);stroke-width:1.3;stroke-dasharray:40 18 4 18;opacity:.7;transform-box:fill-box;transform-origin:center;animation:drehen 24s linear infinite}
.kern-puls{fill:none;stroke:var(--sun);stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center;animation:puls 3.2s ease-out infinite}
.kern-scheibe{fill:url(#nz-kern)}
.kern:hover .kern-ring,.kern:focus-visible .kern-ring{opacity:1;stroke-width:2}
.kern-titel{font-family:var(--font-titel);font-weight:800;font-size:21px;fill:var(--kern-ink);letter-spacing:-.01em}
.kern-zahl{font-family:var(--font-mono);font-size:8.5px;font-weight:700;letter-spacing:.12em;fill:var(--kern-ink);opacity:.75}

/* Tooltip */
.netz-tipp{position:absolute;z-index:3;pointer-events:none;transform:translate(0,-50%) scale(.96);opacity:0;transition:opacity .15s,transform .15s;
  min-width:170px;max-width:240px;padding:10px 12px;border-radius:12px;background:var(--glass);border:1px solid var(--sun-line);box-shadow:var(--lift-shadow);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:flex;flex-direction:column;gap:3px;font-size:12.5px}
.netz-tipp.links{transform:translate(-100%,-50%) scale(.96)}
.netz-tipp.da{opacity:1;transform:translate(0,-50%) scale(1)}
.netz-tipp.links.da{transform:translate(-100%,-50%) scale(1)}
.netz-tipp small{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.netz-tipp b{font-family:var(--font-titel);font-size:14.5px}
.tipp-z{align-self:flex-start;font-size:11px;font-weight:700;border-radius:999px;padding:1px 8px;margin:2px 0}
.tipp-zeile{display:flex;justify-content:space-between;gap:10px;font-family:var(--font-mono);font-size:11.5px;color:var(--ink)}
.tipp-zeile i{font-style:normal;color:var(--ink-3)}

/* Auftritt beim ersten Laden */
.auftritt .nk{animation:auftauchen .6s ease both}
.auftritt .netz-bereiche,.auftritt .netz-instanzen,.auftritt .netz-ringe{animation:auftauchen .9s ease both}
@keyframes auftauchen{from{opacity:0}}

/* Terminal: CEO B */
.terminal{display:flex;flex-direction:column;overflow:hidden;padding:0}
.terminal::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,var(--sun),transparent)}
.term-kopf{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);background:linear-gradient(160deg,var(--hero-a),transparent)}
.term-kopf b{font-family:var(--font-titel);font-size:15px;display:block;line-height:1.1}
.term-kopf small{color:var(--hero-sub);font-size:12px;font-weight:600}
.term-marke{width:34px;height:34px;border-radius:11px;border:1px solid var(--sun-line);background:var(--surface);display:grid;place-items:center;flex:none;padding:0}
.term-marke .brand-mark{width:20px;height:20px}
.term-uhr{font-family:var(--font-mono);font-size:12px;color:var(--sun);letter-spacing:.06em;font-variant-numeric:tabular-nums}
html[data-theme=light] .term-uhr{color:var(--sun-tief)}
.term-log{padding:10px 14px;max-height:280px;overflow:auto;display:flex;flex-direction:column;gap:6px;font-size:13.5px}
.term-z{margin:0;display:grid;grid-template-columns:38px 36px 1fr;gap:4px;align-items:baseline;animation:rein .35s ease both}
.term-zeit{font-family:var(--font-mono);font-size:11px;color:var(--ink-3)}
.term-prompt{font-family:var(--font-mono);font-size:11px;color:var(--sun);font-weight:700}
html[data-theme=light] .term-prompt{color:var(--sun-tief)}
.term-z.ich .term-prompt{color:var(--chip-stroke)}
html[data-theme=light] .term-z.ich .term-prompt{color:var(--gruen)}
.term-z.ich .term-text{color:var(--ink-2);font-style:italic}
.term-text.tippt::after{content:"";display:inline-block;width:7px;height:13px;margin-left:2px;vertical-align:-2px;background:var(--sun);animation:blinken .9s steps(2) infinite}
.term-fragen{display:flex;gap:6px;flex-wrap:wrap;padding:10px 14px 14px;border-top:1px solid var(--line-2)}
.term-frage{border:1px solid var(--sun-line);background:var(--sun-soft);color:var(--ink);border-radius:999px;padding:5px 11px;font-size:12px;font-weight:600;transition:border-color .2s,box-shadow .2s}
.term-frage:hover{border-color:var(--sun);box-shadow:0 0 12px var(--glow-sun)}

/* Wartet auf dich (im Pult kompakt) */
.abschnitt{margin-bottom:26px;scroll-margin-top:80px}
.abschnitt-kopf{display:flex;align-items:center;gap:10px;margin:0 0 12px;flex-wrap:wrap}
.abschnitt-kopf h2{font-size:19px}
.pult .abschnitt-kopf h2{font-size:15px}
.anz{font-family:var(--font-mono);font-size:12px;font-weight:700;border-radius:999px;padding:2px 9px;background:var(--badge-sun);color:var(--badge-sun-ink);box-shadow:0 0 12px var(--glow-sun)}
.anz.gruen{background:var(--badge-gruen);color:var(--badge-ink);box-shadow:none}
.icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--chip-bg);color:var(--chip-stroke);flex:none;transition:background .55s,color .55s}
.icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.95;stroke-linecap:round;stroke-linejoin:round}
.icon.klein{width:30px;height:30px;border-radius:10px}.icon.klein svg{width:18px;height:18px}
.pult .icon{width:30px;height:30px;border-radius:10px}.pult .icon svg{width:18px;height:18px}
.icon.orange{background:var(--orange-soft);color:var(--orange-ink)}
.warten{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
.pult .warten{grid-template-columns:1fr;gap:10px}
.vorgang{background:var(--glas);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--sun-line);border-radius:18px;padding:14px 14px 14px 18px;box-shadow:var(--card-shadow);position:relative;transition:transform .35s ease,opacity .35s ease,border-color .3s;display:flex;flex-direction:column;overflow:hidden}
.vorgang::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:3px;background:var(--sun);box-shadow:0 0 12px var(--glow-sun-stark)}
.vorgang:hover{border-color:var(--sun)}
.vorgang.dringend::before{background:var(--ton);box-shadow:0 0 12px var(--glow-ton)}
.vorgang.dringend{border-color:var(--ton)}
.vorgang.weg{opacity:0;transform:scale(.96) translateY(-6px)}
.vorgang .art{font-family:var(--font-mono);font-size:10.5px;font-weight:700;color:var(--sun);text-transform:uppercase;letter-spacing:.1em}
html[data-theme=light] .vorgang .art{color:var(--sun-tief)}
.vorgang h3{font-size:15.5px;margin:4px 0 6px;line-height:1.3}
.vorgang p{margin:0 0 10px;color:var(--ink-2);font-size:13.5px}
.vorgang dl{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;font-size:12.5px;margin:0 0 12px}
.vorgang dt{color:var(--ink-3)}.vorgang dd{margin:0;font-weight:600;overflow-wrap:anywhere;font-family:var(--font-mono);font-size:12px}
.vorgang .zeit{font-family:var(--font-mono);font-size:11px;color:var(--ink-3);margin-bottom:10px}
.vorgang.geschuetzt{border-color:var(--orange-line)}
.telegram-code{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:5px 6px 5px 9px;margin:0 0 10px;max-width:100%}
.telegram-code svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.telegram-code .tg-was{color:var(--ink-3)}
.telegram-code .tg-befehl{font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--ink);letter-spacing:.04em}
.telegram-code .tg-kopieren{margin-left:auto;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font-size:11.5px;font-weight:600;padding:3px 10px}
.telegram-code .tg-kopieren:hover{border-color:var(--sun-line);color:var(--ink)}
.telegram-code.nur-dashboard{color:var(--orange-ink);background:var(--orange-soft);border-color:var(--orange-line);padding-right:9px}
.vorgang.geschuetzt::before{background:var(--orange-ink);box-shadow:none}
.knoepfe{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto}
.knopf{border-radius:999px;padding:7px 13px;border:1px solid var(--line);background:var(--surface-2);font-weight:600;font-size:13px;display:inline-flex;gap:6px;align-items:center;transition:transform .15s,background .3s,opacity .2s,box-shadow .2s,border-color .2s}
.knopf:hover:not(:disabled){transform:translateY(-1px);border-color:var(--sun-line)}
.knopf:disabled{opacity:.55;cursor:progress}
.knopf svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.knopf.haupt{background:var(--sun);border-color:transparent;color:var(--badge-sun-ink);box-shadow:0 0 16px var(--glow-sun)}
.knopf.haupt:hover:not(:disabled){box-shadow:0 0 24px var(--glow-sun-stark)}
.knopf.warn{background:var(--ton);border-color:transparent;color:var(--badge-ink)}
.bestaetigen{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:auto;background:var(--sun-soft);border:1px solid var(--sun-line);border-radius:14px;padding:8px 10px;font-size:13px;font-weight:600}
.leer{border:1.5px dashed var(--line);border-radius:16px;padding:18px;color:var(--ink-2);font-size:14px;text-align:center}
.leer b{color:var(--gruen)}

/* Live-Protokoll */
.ticker{padding:14px}
.ticker-liste{list-style:none;margin:0;padding:0;max-height:360px;overflow:auto}
.tk{display:grid;grid-template-columns:56px 10px 1fr;gap:8px;align-items:start;padding:7px 0;border-top:1px solid var(--line-2);font-size:13px}
.tk:first-child{border-top:0}
.tk.rein{animation:rein .45s ease both}
.tk.neu{animation:neu 1.6s ease both}
.tk-zeit{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;padding-top:1px}
.tk-zeit.laufend{color:var(--sun)}
html[data-theme=light] .tk-zeit.laufend{color:var(--sun-tief)}
.tk-zeit i{font-style:normal;font-size:9.5px;letter-spacing:.06em;opacity:.8}
.tk-punkt{width:8px;height:8px;border-radius:50%;margin-top:5px;background:var(--ink-3);display:inline-block;flex:none}
.tk-punkt.z-laeuft{background:var(--sun);box-shadow:0 0 10px var(--glow-sun-stark);animation:atmenP 1.4s ease-in-out infinite}
.tk-punkt.z-wartet{background:var(--sun-tief)}
.tk-punkt.z-fehler{background:var(--ton);box-shadow:0 0 8px var(--glow-ton)}
.tk-punkt.z-fertig{background:var(--gruen)}
.tk-punkt.z-geplant{background:transparent;border:1.5px dashed var(--ink-3)}
.tk-inhalt{min-width:0}
.tk-wer{border:0;background:none;padding:0;font-weight:700;font-size:13px;color:var(--ink);margin-right:6px}
.tk-wer:hover{color:var(--sun)}
.tk-text{color:var(--ink-2)}
.tk-lieferung .tk-text{font-family:var(--font-mono);font-size:11.5px}

/* Agentenliste (nur am Handy) */
.agentenliste{display:none;padding:14px}
.al-zeile{display:grid;grid-template-columns:10px 1fr auto;gap:10px;align-items:center;width:100%;text-align:left;border:0;border-top:1px solid var(--line-2);background:none;padding:9px 0;font-size:14px}
.al-zeile .tk-punkt{margin-top:0}
.al-name{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.al-info{font-size:10.5px;color:var(--ink-3);letter-spacing:.06em;white-space:nowrap}
.al-apps{font-size:11px;color:var(--ink-2);padding-top:10px;border-top:1px solid var(--line-2);letter-spacing:.04em}

/* Filter (Karten-Ansicht) */
.filter{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.filter button{border:1px solid var(--line);background:var(--surface-2);border-radius:999px;padding:4px 11px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.filter button[aria-pressed="true"]{background:var(--sun);color:var(--badge-sun-ink);border-color:transparent;box-shadow:0 0 12px var(--glow-sun)}

/* Agenten-Karten */
.bereich{margin-bottom:18px}
.bereich-kopf{display:flex;align-items:center;gap:10px;margin:0 0 10px;color:var(--ink-2);font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.14em;font-family:var(--font-mono)}
.bereich-kopf svg{width:18px;height:18px;fill:none;stroke:var(--chip-stroke);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bereich-kopf .strich{flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.karte{text-align:left;background:var(--glas);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--glas-rand);border-radius:18px;padding:14px;box-shadow:var(--card-shadow),inset 0 1px 0 var(--glas-licht);transition:transform .25s ease,box-shadow .25s ease,border-color .4s,background .55s;position:relative;overflow:hidden;display:flex;flex-direction:column;width:100%}
.erstes .karte,.erstes .vorgang,.erstes .glas{animation:rein .5s ease both}
.karte:hover{transform:translateY(-2px);box-shadow:var(--lift-shadow);border-color:var(--sun-line)}
.karte.hervor{animation:hervor 1.4s ease}
.karte-kopf{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.karte-kopf h3{font-size:15px;line-height:1.25}
.pillen-zeile{margin:0 0 10px;display:flex;gap:6px;flex-wrap:wrap}
.zustand{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;border-radius:999px;padding:3px 9px 3px 7px}
.punkt{width:8px;height:8px;border-radius:50%;background:currentColor;position:relative;flex:none}
/* Zustands-Pillen (Karten, Detail, Tooltip) */
.zustand.z-laeuft,.tipp-z.z-laeuft{background:var(--sun-soft);color:var(--sun)}
html[data-theme=light] .zustand.z-laeuft,html[data-theme=light] .tipp-z.z-laeuft{color:var(--sun-tief)}
.zustand.z-laeuft .punkt::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:drehen 1.1s linear infinite}
.zustand.z-fertig,.tipp-z.z-fertig{background:var(--gruen-soft);color:var(--chip-stroke)}
html[data-theme=light] .zustand.z-fertig,html[data-theme=light] .tipp-z.z-fertig{color:var(--gruen)}
.zustand.z-wartet,.tipp-z.z-wartet{background:var(--badge-sun);color:var(--badge-sun-ink)}
.zustand.z-wartet .punkt{animation:atmenP 1.8s ease-in-out infinite}
.zustand.z-fehler,.tipp-z.z-fehler{background:var(--ton-soft);color:var(--ton)}
.zustand.z-fehler .punkt{animation:atmenP 1.2s ease-in-out infinite}
.zustand.z-geplant,.tipp-z.z-geplant{background:var(--line-2);color:var(--ink-2)}
.stufe-pille{font-size:11px;font-weight:700;border-radius:999px;padding:3px 8px;background:var(--orange-soft);color:var(--orange-ink);border:1px solid var(--orange-line)}
.karte.laeuft{border-color:var(--sun-line)}
.karte.laeuft::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,var(--sun),transparent);background-size:50% 100%;background-repeat:no-repeat;animation:band 1.8s linear infinite}
.karte.fehler{border-color:var(--ton);box-shadow:var(--card-shadow),0 0 22px var(--glow-ton)}
.karte.wartet{border-color:var(--sun-line)}
.zeilen{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;font-size:12.5px;color:var(--ink-2)}
.zeilen b{color:var(--ink);font-weight:600;font-family:var(--font-mono);font-size:12px}
.zaehler{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.zaehler span{font-size:12px;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:2px 9px}
.zaehler b{font-family:var(--font-mono)}
.takt{display:flex;gap:5px;align-items:center;margin-top:12px;padding-top:10px;border-top:1px solid var(--line-2);font-size:10.5px;color:var(--ink-3);font-family:var(--font-mono);letter-spacing:.06em}
.takt .tage{display:flex;gap:4px;margin-left:auto}
.tupf{width:9px;height:9px;border-radius:50%;background:var(--line);display:inline-block}
.t-ok{background:var(--gruen)}.t-teilweise{background:var(--sun)}.t-fehler{background:var(--ton)}.t-laeuft{background:var(--sun);box-shadow:0 0 8px var(--glow-sun-stark);animation:atmenP 1.6s infinite}
.orange-hinweis{font-size:12.5px;color:var(--orange-ink);background:var(--orange-soft);border:1px solid var(--orange-line);border-radius:10px;padding:6px 9px;display:flex;gap:6px;align-items:center;margin-top:10px}
.orange-hinweis svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Skelett beim Laden */
.skelett{height:130px;border-radius:18px;background:linear-gradient(90deg,var(--surface-2),var(--line),var(--surface-2));background-size:200% 100%;animation:schimmer 1.4s linear infinite;border:1px solid var(--line);margin-bottom:16px}

/* Karten-Ansicht: Raster und Seitenleiste */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:20px;margin-top:18px;align-items:start}
.seite{display:flex;flex-direction:column;gap:16px;position:sticky;top:76px}
.panel{background:var(--glas);border:1px solid var(--glas-rand);border-radius:18px;padding:16px;box-shadow:var(--card-shadow),inset 0 1px 0 var(--glas-licht);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);scroll-margin-top:80px}
.panel h2{font-size:15.5px}
.panel .abschnitt-kopf{margin-bottom:10px}
.todo{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-top:1px solid var(--line-2);font-size:13.5px}
.todo:first-of-type{border-top:0}
.haken{width:18px;height:18px;border-radius:6px;border:1.6px solid var(--gruen-line);flex:none;margin-top:1px}
.todo small{display:block;color:var(--ink-3);font-size:11.5px;font-family:var(--font-mono)}
.topf{margin:10px 0}
.topf-kopf{display:flex;justify-content:space-between;gap:10px;font-size:13px}
.topf-kopf b{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.balken{height:6px;border-radius:6px;background:var(--line);overflow:hidden;margin-top:5px}
.balken i{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,var(--sun-tief),var(--sun));box-shadow:0 0 12px var(--sun-glow);transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.balken.ueber i{background:var(--ton);box-shadow:0 0 10px var(--glow-ton)}
.balken.gruen i{background:var(--gruen);box-shadow:none}
.frei-neg{color:var(--ton)}
.umzug{display:flex;gap:8px;align-items:center;font-size:13px;padding:6px 0;border-top:1px solid var(--line-2)}
.umzug .ziel{margin-left:auto;color:var(--ink-2);font-size:12px;text-align:right}
.stufe{width:9px;height:9px;border-radius:50%;flex:none;display:inline-block}
.st-umgezogen{background:var(--gruen)}.st-unterwegs{background:var(--sun)}.st-geplant{background:var(--ink-3)}.st-bleibt{background:transparent;border:1.6px solid var(--ink-3)}.st-fehler{background:var(--ton)}
.legende{display:flex;gap:10px;flex-wrap:wrap;font-size:11.5px;color:var(--ink-2);margin-top:10px}
.legende span{display:inline-flex;gap:5px;align-items:center}
.platzhalter{border:1.5px dashed var(--line);border-radius:14px;padding:14px;color:var(--ink-2);font-size:13px;text-align:center}
.mehr{background:none;border:0;color:var(--sun);font-weight:700;font-size:13px;padding:8px 0 0}
html[data-theme=light] .mehr{color:var(--sun-tief)}

/* Detail-Lade */
.schleier{position:fixed;inset:0;background:var(--schleier);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .3s;z-index:40}
.schleier.offen{opacity:1;pointer-events:auto}
.lade{position:fixed;top:0;right:0;bottom:0;width:min(480px,100%);background:var(--surface);border-left:1px solid var(--sun-line);z-index:41;transform:translateX(102%);transition:transform .4s cubic-bezier(.2,.8,.2,1),visibility .4s;visibility:hidden;overflow:auto;padding:20px 22px 40px;box-shadow:var(--lift-shadow)}
.lade.offen{transform:none;visibility:visible}
.lade-kopf{display:flex;gap:12px;align-items:center}
.lade-kopf small{color:var(--ink-2);font-weight:600;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.lade h2{font-size:25px;margin:12px 0 6px}
.lade h4{margin:20px 0 8px;font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--sun);font-family:var(--font-mono)}
html[data-theme=light] .lade h4{color:var(--sun-tief)}
.lade p{margin:8px 0}
.fakten{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.fakt{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:9px 12px}
.fakt small{display:block;color:var(--ink-3);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-family:var(--font-mono)}
.fakt b{font-size:13.5px;font-weight:600}
.recht{list-style:none;margin:0;padding:0}
.recht li{display:flex;gap:8px;align-items:flex-start;padding:5px 0;font-size:14px}
.recht li svg{margin-top:2px}
.recht.darf svg{color:var(--gruen)}
.recht.frei svg{color:var(--sun)}
.lauf{display:grid;grid-template-columns:12px 1fr auto;gap:10px;align-items:start;padding:10px 0;border-top:1px solid var(--line-2);font-size:13.5px}
.lauf .stufe{margin-top:6px}
.lauf small{color:var(--ink-3);white-space:nowrap;font-family:var(--font-mono);font-size:11px}
.lauf ul{margin:4px 0 0;padding-left:16px;color:var(--ink-2);font-size:13px}

/* Anmeldung */
.anmeldung{max-width:420px;margin:8vh auto 0;background:var(--glas);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--sun-line);border-radius:24px;padding:28px;box-shadow:var(--card-shadow),0 0 60px var(--glow-sun);position:relative;overflow:hidden}
.anmeldung::before{content:"";position:absolute;right:-40px;top:-40px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,var(--glow-sun-stark),transparent 70%)}
.anmeldung h1{font-size:28px;margin:14px 0 6px}
.anmeldung p{color:var(--ink-2);margin:0 0 18px}
.anmeldung label{display:block;font-size:11px;font-weight:700;margin:12px 0 5px;font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.anmeldung input{width:100%;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:11px 13px;font:inherit}
.anmeldung input:focus{border-color:var(--sun);box-shadow:0 0 0 3px var(--sun-soft)}
.anmeldung .knopf{margin-top:18px;width:100%;justify-content:center;padding:11px}
.anmeldung .fehlertext{color:var(--ton);font-weight:600;font-size:14px;margin-top:12px}
.anmeldung .klein{font-size:12.5px;color:var(--ink-3);margin-top:14px}

.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,40px);opacity:0;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:999px;font-weight:600;transition:all .35s;z-index:60;pointer-events:none;max-width:calc(100% - 32px);text-align:center;box-shadow:0 0 30px var(--glow-sun)}
.toast.da{opacity:1;transform:translate(-50%,0)}
.fuss{position:relative;z-index:1;max-width:1560px;margin:0 auto;padding:0 24px 30px;color:var(--ink-3);font-size:11px;text-align:center;font-family:var(--font-mono);letter-spacing:.06em}

/* Fluss: Projekt-Agenten → App-Agenten → Apps (Karten-Ansicht) */
.fluss-zahlen{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.fluss-zahlen span{font-size:12px;border-radius:999px;padding:3px 10px;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2);font-weight:600}
.fluss-zahlen b{font-family:var(--font-mono);color:var(--ink)}
.fluss-zahlen .sun{background:var(--sun-soft);border-color:var(--sun-line);color:var(--sun)}.fluss-zahlen .sun b{color:var(--sun)}
.fluss-zahlen .ton{background:var(--ton-soft);border-color:transparent;color:var(--ton)}.fluss-zahlen .ton b{color:var(--ton)}
.fluss-satz{margin:-4px 0 14px;color:var(--ink-2);font-size:14px;max-width:70ch}
.fluss{position:relative;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr) minmax(0,.9fr);gap:0 64px;padding:18px;border-radius:20px;border:1px solid var(--glas-rand);background:radial-gradient(600px 300px at 50% 0%,var(--sun-soft),transparent 70%),var(--glas);box-shadow:var(--card-shadow)}
.fluss-linien{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
.fluss-spalte{position:relative;z-index:1;display:flex;flex-direction:column;gap:6px;justify-content:center}
.fluss-spalte h3{font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 6px}
.f-knoten{display:flex;align-items:center;gap:8px;text-align:left;width:100%;border:1px solid var(--line);background:var(--surface-2);border-radius:12px;padding:6px 9px;font-size:13px;font-weight:600;transition:opacity .25s,border-color .25s,transform .2s,background .55s}
.f-knoten:hover{transform:translateX(2px);border-color:var(--sun-line)}
.f-app.fehler{border-color:var(--ton)}
.f-app.laeuft{border-color:var(--sun-line)}
.f-name{flex:1;min-width:0;line-height:1.25}
.f-mobil{display:none;font-weight:500;color:var(--ink-3);font-size:11.5px;margin-top:2px}
.f-punkt{width:9px;height:9px;border-radius:50%;flex:none;background:var(--ink-3)}
.f-punkt.z-fertig{background:var(--gruen)}.f-punkt.z-laeuft{background:var(--sun);box-shadow:0 0 8px var(--glow-sun-stark);animation:atmenP 1.6s infinite}.f-punkt.z-wartet{background:var(--badge-sun)}.f-punkt.z-fehler{background:var(--ton)}.f-punkt.z-geplant{background:transparent;border:1.6px solid var(--ink-3)}
.f-zahl{min-width:20px;height:20px;border-radius:999px;display:inline-grid;place-items:center;font-size:11px;font-weight:800;padding:0 6px;font-family:var(--font-mono)}
.f-zahl.sun{background:var(--badge-sun);color:var(--badge-sun-ink)}
.f-zahl.ton{background:var(--badge-ton);color:var(--badge-ink)}
.f-art{font-size:11px;font-weight:700;color:var(--ink-3);border:1px dashed var(--ink-3);border-radius:999px;padding:0 6px}
.f-instanz{border:1px solid var(--gruen-line);background:var(--gruen-soft);border-radius:14px;padding:10px 12px;transition:opacity .25s,border-color .25s}
.f-instanz-kopf{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13.5px;color:var(--gruen-tief)}
html[data-theme=dark] .f-instanz-kopf{color:var(--chip-stroke)}
.f-apps{font-size:12px;color:var(--ink-2);margin-top:3px;line-height:1.4}
.f-hinweis{font-size:11.5px;color:var(--ton);font-weight:600;margin-top:4px}
.f-linie{fill:none;stroke:var(--linie-fluss);stroke-width:1.6;transition:stroke .25s,opacity .25s,stroke-width .25s}
.f-linie.aktiv{stroke:var(--sun);stroke-width:2.4;stroke-dasharray:6 9;animation:fluss 1.3s linear infinite}
.f-linie.zurueck{stroke:var(--ton);stroke-width:1.8;stroke-dasharray:3 5}
.fluss.fokus .f-knoten:not(.hell),.fluss.fokus .f-instanz:not(.hell){opacity:.35}
.fluss.fokus .f-linie:not(.hell){opacity:.12}
.fluss.fokus .f-linie.hell{stroke-width:2.6;opacity:1}
.fluss.fokus .f-linie.hell:not(.aktiv):not(.zurueck){stroke:var(--gruen)}
.lieferliste{margin-top:14px;padding:14px 16px}
.lieferliste h3{font-size:15px;margin-bottom:4px}
.lieferung{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-top:1px solid var(--line-2);font-size:13.5px}
.lieferliste h3+.lieferung,.lade h4+.lieferung{border-top:0}
.lieferung small{display:block;color:var(--ink-3);font-size:11.5px;font-family:var(--font-mono)}
.f-stand{flex:none;font-size:10.5px;font-weight:700;border-radius:999px;padding:2px 8px;margin-top:1px;white-space:nowrap;background:var(--line-2);color:var(--ink-2)}
.f-stand.sun{background:var(--sun-soft);color:var(--sun)}.f-stand.ton{background:var(--ton-soft);color:var(--ton)}.f-stand.gruen{background:var(--gruen-soft);color:var(--gruen)}
html[data-theme=light] .f-stand.sun{color:var(--sun-tief)}
.zaehler .art-da{border-color:var(--gruen-line);color:var(--gruen)}
.zaehler .art-fehlt{border-style:dashed;color:var(--ink-2)}

/* Bewegungen */
@keyframes atmenP{50%{transform:scale(1.45);opacity:.6}}
@keyframes atmenO{50%{opacity:.45}}
@keyframes puls{0%{opacity:.75;transform:scale(1)}100%{opacity:0;transform:scale(2.1)}}
@keyframes drehen{to{transform:rotate(360deg)}}
@keyframes rein{from{opacity:0;transform:translateY(8px)}}
@keyframes neu{0%{background:var(--sun-soft)}100%{background:transparent}}
@keyframes blinken{50%{opacity:0}}
@keyframes band{from{background-position:-50% 0}to{background-position:150% 0}}
@keyframes hervor{0%,100%{box-shadow:var(--card-shadow)}30%{box-shadow:0 0 0 3px var(--sun),0 0 30px var(--glow-sun-stark)}}
@keyframes schimmer{to{background-position:-200% 0}}
@keyframes fluss{to{stroke-dashoffset:-32}}

/* Breiten */
/* B4 echter Modus: Hinweise, Überfällig, Einkaufsstand, Anmeldelink, Ablage */
.hinweis-klein{display:flex;gap:7px;align-items:center;font-size:12.5px;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:6px 10px;margin:0 0 10px}
.hinweis-klein.warn{color:var(--ton);background:var(--ton-soft);border-color:var(--ton)}
.hinweis-klein svg,.ueberfaellig svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ueberfaellig{display:flex;gap:6px;align-items:center;font-size:12px;font-weight:600;color:var(--ton);margin:0 0 10px}
.platzhalter.warn{border-color:var(--ton);color:var(--ink)}
.topf-kopf.summe{padding-bottom:6px;border-bottom:1px solid var(--line-2);margin-bottom:4px}
.panel-text{font-size:13px;color:var(--ink-2);margin:0 0 10px}
.panel .knopf svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.meldungen{font-size:11px;color:var(--ink-3);margin-top:4px}
.anmeldung .infotext{color:var(--chip-stroke);font-weight:600;font-size:14px;margin-top:12px}
.anmeldung .infotext:empty,.anmeldung .fehlertext:empty{display:none}
.anmeldung .mehr{display:block;margin-top:10px}
.ab-hinweis{font-size:13px;color:var(--ink-2)}
.ab-skelett{height:180px}
.ab-liste{display:flex;flex-direction:column;gap:6px}
.ab-block{border:1px solid var(--line);border-radius:12px;background:var(--surface-2);overflow:hidden}
.ab-block .ab-block{border-radius:10px;margin:4px 0}
.ab-ordner{display:flex;gap:10px;align-items:center;width:100%;border:0;background:transparent;color:inherit;padding:9px 12px;text-align:left;font:inherit}
.ab-ordner svg{width:17px;height:17px;fill:none;stroke:var(--chip-stroke);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;transition:transform .2s}
.ab-ordner[aria-expanded="true"] svg{stroke:var(--sun)}
.ab-name{flex:1;min-width:0;font-size:13.5px;font-weight:600;overflow-wrap:anywhere}
.ab-name small{display:block;font-weight:500;color:var(--ink-3);font-size:11.5px}
.ab-inhalt{padding:0 10px 8px 14px;border-top:1px solid var(--line-2)}
.ab-datei,.ab-zugriff{display:flex;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line-2)}
.ab-datei:first-child{border-top:0}
.ab-zugriff{border:1px solid var(--line-2);border-radius:10px;padding:8px 10px;background:var(--surface-2)}
.ab-zugriff .stufe{margin-top:2px}
.ab-zugriff > small{color:var(--ink-3);white-space:nowrap;font-size:11px}
.ab-zugriff.abgewiesen .ab-name{color:var(--ton)}
.ab-leer{font-size:12.5px;color:var(--ink-3);padding:8px 0}
.ab-stufe{font-size:10.5px;font-weight:700;border-radius:999px;padding:2px 8px;border:1px solid var(--line);white-space:nowrap;font-family:var(--font-mono);letter-spacing:.04em}
.ab-gruen{background:var(--gruen-soft);color:var(--chip-stroke);border-color:var(--gruen-line)}
.ab-gelb{background:var(--sun-soft);color:var(--sun-tief);border-color:var(--sun-line)}
html[data-theme=dark] .ab-gelb{color:var(--sun)}
.ab-stufe.ab-orange{background:var(--orange-soft);color:var(--orange-ink);border-color:var(--orange-line)}
.ab-keine{color:var(--ink-3)}
.ab-orange-box{margin-top:18px}
.klein-knopf{padding:5px 10px;font-size:12px;flex:none}

@media (max-width:1280px){.kommando{grid-template-columns:minmax(0,1fr) 360px}.kennzahlen{grid-template-columns:repeat(5,minmax(84px,1fr))}.unten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1100px){
  .hud{grid-template-columns:1fr}
  .kommando{grid-template-columns:1fr}
  .kommando-links{position:static}
  .layout{grid-template-columns:1fr}.seite{position:static}
}
@media (max-width:860px){
  .fluss{grid-template-columns:1fr;padding:12px}
  .fluss-linien,.fluss .fluss-spalte:first-of-type,.fluss .fluss-spalte:last-child{display:none}
  .f-mobil{display:block}
  .fluss-zahlen{margin-left:0}
  .agentenliste{display:block}
  .unten{grid-template-columns:1fr}
}
/* kleines Netz: nur Punkte und Licht, Namen erst beim Vergrößern */
.netz-flaeche.klein .nk-name,.netz-flaeche.klein .bereich-name{display:none}
.netz-flaeche.klein .inst-name{font-size:18px;letter-spacing:.08em}
.netz-flaeche.klein .inst-extra{display:none}
.netz-flaeche.klein .kern-zahl{display:none}
.netz-flaeche.klein .kern-titel{font-size:26px}
@media (max-width:720px){
  main{padding:12px 16px 60px}.kopf-in{padding:8px 16px;gap:6px}
  .marke .wort{display:none}
  .kopf .pille{display:none}
  .schalter .text{display:none}
  .ansicht button{padding:5px 9px}
  .ansicht button span{display:none}
  .hud{padding:16px}
  .kennzahlen{grid-template-columns:repeat(3,1fr)}
  .kennzahlen .kz:first-child{display:none}
  .kz{padding:8px 10px}.kz .zahl{font-size:22px}.kz .was{font-size:9.5px;letter-spacing:.06em}
  .buehne{padding:12px 10px 10px}
  .legende-netz{display:none}
  .knopf.zoom{display:inline-flex;padding:5px 11px;font-size:12px}
  .netz-rahmen{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .netz-rahmen.gross .netz-flaeche{width:1120px}
  .buehne-tipp{display:none}
  .karten,.warten{grid-template-columns:1fr}
  .filter{margin-left:0}
  .fakten{grid-template-columns:1fr 1fr}
  .term-log{max-height:240px}
  .lade{top:auto;height:90vh;width:100%;border-radius:22px 22px 0 0;transform:translateY(102%);border-left:0;border-top:1px solid var(--sun-line)}
}