/* Deadlock-Werkstatt (assets/js/deadlock-werkstatt.js), Präfix dlw-. Farben und Schriften aus site.css.
   Breite über Container-Abfragen auf der Abbildung (.dlw-fig), weil die Textspalte schmaler ist als das Fenster. */

.dlw-fig{container-type:inline-size;container-name:dlw}
.dlw{--r:var(--radius,22px);--rot:#ff5a3c;--gruen:#7fd1a8;--warte:#f5b841;--nw:168px;position:relative;
  background:radial-gradient(900px 420px at 70% 10%,rgba(11,74,113,.45),transparent 70%),#03131f;color:#d4e6f3;
  border-radius:var(--r);border:1px solid rgba(255,255,255,.07);box-shadow:0 30px 70px rgba(5,28,44,.28);padding:18px 20px 14px;
  font-size:15px;line-height:1.5}
/* Höhe vor dem Aufbau reservieren (kein Layoutsprung) */
.dlw:empty{min-height:1260px}
.dlw[data-dlw-wahl="ring"]:empty{min-height:1345px}
.dlw[data-dlw-wahl="alle"]:empty{min-height:1385px}
@container dlw (min-width:760px){
  .dlw:empty{min-height:780px}
  .dlw[data-dlw-wahl="alle"]:empty{min-height:835px}
  .dlw[data-dlw-wahl="ring"]:empty{min-height:930px}
}
.dlw code{font-family:var(--mono);font-size:.88em;color:#9ccbea;background:none;padding:0;border:0}
.dlw button{font:inherit}
.dlw button:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.dlw-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Kopf: Szenario und Schalter */
.dlw-kopf{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.dlw-seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);align-self:flex-start}
.dlw-seg button{font-weight:600;font-size:.86rem;padding:8px 15px;min-height:38px;border-radius:999px;border:0;background:transparent;color:#b9cddb;cursor:pointer;transition:background .25s,color .25s}
.dlw-seg button:hover{color:#fff}
.dlw-seg button[aria-pressed="true"]{background:var(--orange);color:#fff}
.dlw-seg-klein{padding:3px}
.dlw-seg-klein button{padding:5px 12px;min-height:32px;font-size:.8rem;font-family:var(--mono)}
.dlw-schalter{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;min-height:40px}
.dlw-feld{display:inline-flex;align-items:center;gap:10px}
.dlw-feld-l{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:#7fa3bd}
.dlw-tog{display:inline-flex;align-items:center;gap:10px;min-height:38px;padding:4px 14px 4px 6px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03);color:#d4e6f3;cursor:pointer;font-size:.88rem;transition:border-color .2s,background .2s}
.dlw-tog:hover{border-color:rgba(240,125,26,.7)}
.dlw-tog i{flex:none;position:relative;width:38px;height:22px;border-radius:999px;background:rgba(127,163,189,.35);transition:background .25s}
.dlw-tog i::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .25s var(--ease)}
.dlw-tog[aria-pressed="true"]{border-color:var(--orange);background:rgba(240,125,26,.12)}
.dlw-tog[aria-pressed="true"] i{background:var(--orange)}
.dlw-tog[aria-pressed="true"] i::after{transform:translateX(16px)}
.dlw-hinweis{font-size:.86rem;color:#9fb7c8}

/* Zeitspuren */
.dlw-spuren{position:relative;display:flex;flex-direction:column;gap:2px;margin-bottom:14px;padding:4px 0 2px}
.dlw-achse{display:grid;grid-template-columns:var(--nw) minmax(0,1fr);gap:14px;font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:#5d7c91}
.dlw-achse span + span{text-align:right}
.dlw-spur{--c:#f07d1a;display:grid;grid-template-columns:var(--nw) minmax(0,1fr);gap:14px;align-items:center;padding:5px 0;border-top:1px dashed rgba(255,255,255,.06);transition:opacity .4s}
.dlw-spur-n{display:flex;flex-direction:column;gap:3px;min-width:0}
.dlw-spur-z{display:flex;align-items:center;gap:7px;min-width:0}
.dlw-dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent)}
.dlw-spur-z b{font-family:var(--display);font-weight:600;font-size:1.05rem;color:#fff;line-height:1}
.dlw-spur-name{font-size:.8rem;color:#b9cddb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.dlw-chip{flex:none;font:600 .62rem var(--mono);padding:2px 7px;border-radius:999px;background:rgba(95,167,214,.18);color:#cfe6f6;border:1px solid rgba(95,167,214,.45)}
.dlw-st{align-self:flex-start;font:600 .68rem var(--mono);font-style:normal;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.06);color:#9fb7c8;white-space:nowrap;transition:background .3s,color .3s}
.dlw-st.z-lauf,.dlw-st.z-pause{background:color-mix(in srgb,var(--c) 18%,transparent);color:#fff}
.dlw-st.z-lies{background:rgba(156,203,234,.16);color:#cfe6f6}
.dlw-st.z-wart{background:rgba(245,184,65,.18);color:#ffd88a}
.dlw-st.z-gewaehlt,.dlw-st.z-roll,.dlw-st.z-opfer{background:rgba(255,90,60,.2);color:#ffb4a9}
.dlw-st.z-ok{background:rgba(127,209,168,.18);color:#9ee6c0}
.dlw-spur-r{min-width:0}
.dlw-spur-t{position:relative;height:24px;border-radius:7px;background:rgba(255,255,255,.04)}
.dlw-spur-t .dlw-abs{position:absolute;top:0;bottom:0;display:block;border-radius:6px;overflow:hidden}
.dlw-spur-t .dlw-abs b{position:absolute;inset:0;transform-origin:left center;transform:scaleX(0);border-radius:6px}
.dlw-spur-t .dlw-abs span{position:absolute;left:5px;right:2px;top:50%;transform:translateY(-50%);font:600 .64rem var(--mono);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .3s;text-shadow:0 1px 2px rgba(0,0,0,.55)}
.dlw-spur-t .dlw-abs.an span{opacity:1}
.dlw-abs.lauf b{background:var(--c)}
.dlw-abs.pause b{background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--c) 42%,transparent) 0 7px,color-mix(in srgb,var(--c) 26%,transparent) 7px 14px)}
.dlw-abs.pause span{color:#e6f0f7}
.dlw-abs.wart b{background:repeating-linear-gradient(135deg,var(--warte) 0 6px,rgba(245,184,65,.5) 6px 12px)}
.dlw-abs.wart span{color:#2b1d00;text-shadow:none}
.dlw-abs.roll b{background:repeating-linear-gradient(135deg,var(--rot) 0 6px,rgba(255,90,60,.5) 6px 12px)}
.dlw-abs.lies b{background:repeating-linear-gradient(90deg,rgba(156,203,234,.75) 0 4px,rgba(156,203,234,.28) 4px 8px)}
.dlw-abs.lies span{color:#03131f;text-shadow:none}
.dlw-abs.jetzt b{box-shadow:inset -3px 0 0 #fff,0 0 12px color-mix(in srgb,var(--c) 60%,transparent)}
.dlw-end{position:absolute;top:50%;transform:translate(-50%,-50%) scale(.6);font:700 .64rem var(--mono);padding:3px 7px;border-radius:999px;white-space:nowrap;opacity:0;transition:opacity .3s,transform .35s var(--ease);z-index:2;pointer-events:none}
.dlw-end.ok{background:var(--gruen);color:#05281a}
.dlw-end.opfer{background:var(--rot);color:#fff}
.dlw-end.an{opacity:1;transform:translate(-50%,-50%) scale(1)}
.dlw-spur-c{margin-top:3px;height:17px;overflow:hidden}
.dlw-spur-c code{display:block;font-size:.7rem;color:#7fa3bd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dlw-spur.opfer .dlw-spur-c code{color:#ffb4a9}
.dlw-spur.fertig .dlw-spur-c code{color:#9ee6c0}
.dlw-zeiger{position:absolute;top:18px;bottom:0;width:2px;margin-left:-1px;background:linear-gradient(#fff,rgba(255,255,255,.55));box-shadow:0 0 10px rgba(255,255,255,.55);left:calc(var(--nw) + 14px + (100% - var(--nw) - 14px) * var(--p,0));pointer-events:none;z-index:3}
.dlw-zeiger i{position:absolute;left:50%;top:-5px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.18)}
.dlw.am-ende .dlw-zeiger{opacity:.35}

/* Bühne: Graph und Erklärung */
.dlw-main{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.dlw-graph{position:relative;border-radius:18px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.07);overflow:hidden}
.dlw-graph-k{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px 0 14px;min-height:34px}
.dlw-graph-t{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:#7fa3bd}
.dlw-lm{display:inline-flex;align-items:center;gap:8px;font-size:.74rem;padding:4px 11px 4px 8px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);transition:background .3s,border-color .3s;white-space:nowrap}
.dlw-lm b{font-family:var(--mono);font-weight:600;color:#e6f0f7}
.dlw-lm em{font-style:normal;color:#9fb7c8}
.dlw-lm i{position:relative;width:14px;height:14px;border-radius:50%;border:1.5px solid #5fa7d6;flex:none}
.dlw-lm i::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:1.5px;background:#9ccbea;transform-origin:0 50%}
.dlw-lm.z-sucht{border-color:rgba(95,167,214,.6);background:rgba(95,167,214,.12)}
.dlw-lm.z-sucht i::after{animation:dlw-dreh 1s linear infinite}
.dlw-lm.z-fund{border-color:var(--rot);background:rgba(255,90,60,.16)}
.dlw-lm.z-fund em{color:#ffb4a9;font-weight:600}
.dlw-lm.z-fund i{border-color:var(--rot)}
.dlw-lm.z-ok{border-color:rgba(127,209,168,.5);background:rgba(127,209,168,.1)}
.dlw-lm.z-ok em{color:#9ee6c0}
.dlw-lm.z-ok i{border-color:var(--gruen)}
@keyframes dlw-dreh{to{transform:rotate(360deg)}}
.dlw-svg{display:block;width:100%;height:360px;overflow:visible}
.dlw[data-szenario="ring"] .dlw-svg{height:380px}
.dlw-leg{display:flex;flex-wrap:wrap;gap:4px 16px;padding:0 14px 10px;font-size:.72rem;color:#7fa3bd}
.dlw-leg span{display:inline-flex;align-items:center;gap:7px}
.dlw-leg i{display:inline-block;width:22px;height:0;border-top:3px solid #9fb7c8}
.dlw-leg .w i{border-top-style:dashed;border-top-color:var(--warte)}
.dlw-leg .l i{border-top:2px dotted #9ccbea}
.dlw-leg .k i{border-top-color:var(--rot);box-shadow:0 0 6px var(--rot)}
.dlw:not(.mit-lies) .dlw-leg .l{display:none}
.dlw-seite{display:flex;flex-direction:column;gap:12px;min-width:0}
.dlw .dlw-say{margin:0;font-size:.98rem;line-height:1.5;color:#d4e6f3;min-height:6em;overflow-wrap:anywhere}
.dlw .dlw-say b{color:#fff}
.dlw-say.neu{animation:dlw-ein .45s var(--ease)}
@keyframes dlw-ein{from{opacity:.15;transform:translateY(4px)}}
.dlw-lab{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:11px 13px 10px;font-size:.8rem}
.dlw .dlw-lab-k{margin:0 0 8px;font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:#7fa3bd;line-height:1.4}
.dlw-lab-k::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#2f9e6e;margin-right:8px;box-shadow:0 0 0 3px rgba(47,158,110,.2);vertical-align:1px}
.dlw-lab-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.dlw-lab-l li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 10px;padding:6px 9px;border-radius:10px;border:1px solid transparent;transition:background .3s,border-color .3s}
.dlw-lab-l li .k{color:#b9cddb;font-size:.78rem}
.dlw-lab-l li b{font-family:var(--mono);font-size:.82rem;color:#fff;text-align:right;white-space:nowrap}
.dlw-lab-l li small{grid-column:1 / -1;color:#7fa3bd;font-size:.72rem;line-height:1.35}
.dlw-lab-l li.akt{background:rgba(240,125,26,.12);border-color:rgba(240,125,26,.55)}
.dlw-lab-l li.akt b{color:#ffc79a}
.dlw-lab-t{width:100%;border-collapse:collapse;font-size:.74rem;table-layout:fixed}
.dlw-lab-t col.m{width:auto}.dlw-lab-t col.w{width:34%}
.dlw-lab-t th,.dlw-lab-t td{padding:4px 5px;text-align:left;border-bottom:1px solid rgba(255,255,255,.06);font-weight:500;overflow-wrap:anywhere}
.dlw-lab-t td{white-space:nowrap}
.dlw-lab-t thead th{font-family:var(--mono);font-size:.62rem;letter-spacing:.04em;text-transform:uppercase;color:#7fa3bd;vertical-align:bottom}
.dlw-lab-t thead small{display:block;text-transform:none;letter-spacing:0;color:#5d7c91}
.dlw-lab-t tbody th{color:#b9cddb;font-family:var(--mono);font-size:.7rem}
.dlw-lab-t td{font-family:var(--mono);font-size:.7rem;color:#ffd0b8;font-variant-numeric:tabular-nums}
.dlw-lab-t td.ok{color:#9ee6c0}
.dlw-lab-t td.dl{color:#ffb4a9}
.dlw-lab-t tr.akt th{color:#fff}
.dlw-lab-t td.akt{background:rgba(240,125,26,.16);box-shadow:inset 0 0 0 1px rgba(240,125,26,.6);color:#fff;border-radius:6px}
.dlw .dlw-lab-f{margin:8px 0 0;color:#9fb7c8;font-size:.74rem;line-height:1.4}

/* Steuerung */
.dlw-fuss{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:14px}
.dlw-tasten{display:flex;gap:8px}
.dlw-t{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.04);color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .2s,border-color .2s,transform .2s}
.dlw-t svg{width:17px;height:17px;fill:currentColor}
.dlw-t:hover{border-color:var(--orange);background:rgba(240,125,26,.16)}
.dlw-t.play{width:48px;height:48px;background:var(--orange);border-color:var(--orange)}
.dlw-t.play svg{width:20px;height:20px}
.dlw-t.play:hover{background:#ff8c2e}
.dlw.am-ende .dlw-t.play{box-shadow:0 0 0 6px rgba(240,125,26,.18)}
.dlw-punkte{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.dlw-pkt{width:22px;height:22px;padding:0;border:0;background:transparent;cursor:pointer;display:grid;place-items:center;border-radius:50%}
.dlw-pkt::before{content:"";width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18);transition:background .25s,transform .25s}
.dlw-pkt.vorbei::before{background:rgba(240,125,26,.55)}
.dlw-pkt.akt::before{background:var(--orange);transform:scale(1.35);box-shadow:0 0 0 3px rgba(240,125,26,.25)}
.dlw-pkt:hover::before{background:#fff}
.dlw-zaehl{font-family:var(--mono);font-size:.74rem;color:#b9cddb;white-space:nowrap}
.dlw-schema{margin-left:auto;font-size:.74rem;color:#5d7c91;white-space:nowrap}

/* ---- SVG ---- */
.dlw-svg text{font-family:var(--text)}
.dlw-radar path{mix-blend-mode:screen}
.dlw-radar-l{stroke:#9ccbea;stroke-width:1.5;opacity:.75}
.dlw-welle{fill:none;stroke:var(--rot);stroke-width:3}
/* Sperren */
.dlw-r .kasten{fill:#0a2b42;stroke:rgba(156,203,234,.35);stroke-width:1.5;transition:stroke .35s,fill .35s,stroke-width .35s}
.dlw-r.gehalten .kasten{stroke:var(--c);stroke-width:2.6}
.dlw-r.kreis .kasten{stroke:var(--rot);fill:#2a1416;stroke-width:3}
.dlw-r .t1{font:500 10.5px var(--mono);fill:#7fa3bd;text-anchor:middle}
.dlw-r .t2{font:700 13.5px var(--mono);fill:#fff;text-anchor:middle;dominant-baseline:central}
.dlw-r .t3{font:500 10.5px var(--mono);fill:#9ccbea;text-anchor:middle}
.dlw-r.zeile .kasten{fill:#0d3350;stroke:rgba(156,203,234,.4)}
.dlw-r.zeile.gehalten .kasten{fill:color-mix(in srgb,var(--c) 16%,#0a2b42)}
.dlw-r.zeile.kreis .kasten{fill:#2a1416}
.dlw-r .tz{font:600 11.5px var(--mono);fill:#e6f0f7;dominant-baseline:central}
.dlw-r .schloss{transition:opacity .3s}
.dlw-r .schloss rect{fill:var(--c,#9fb7c8);stroke:#03131f;stroke-width:1.5}
.dlw-r .schloss .buegel{fill:none;stroke:var(--c,#9fb7c8);stroke-width:2.2}
.dlw-r .schloss text{font:800 8.5px var(--mono);fill:#03131f;text-anchor:middle;dominant-baseline:central}
.dlw-r.kreis .schloss rect{fill:var(--rot)}
.dlw-r.kreis .schloss .buegel{stroke:var(--rot)}
/* Kanten */
.dlw-k .linie{fill:none;stroke:var(--c);stroke-width:3.4;stroke-linecap:round;transition:stroke .35s,stroke-width .35s}
.dlw-k.wart .linie{stroke-dasharray:8 5;stroke-width:3;stroke-linecap:butt}
.dlw-k.lies .linie{stroke:#9ccbea;stroke-dasharray:1.5 6;stroke-width:2.6;stroke-linecap:round}
.dlw-k .pfeil{fill:var(--c);transition:fill .35s}
.dlw-k.lies .pfeil{fill:#9ccbea}
.dlw-k .glow{fill:none;stroke:var(--rot);stroke-width:11;stroke-linecap:round}
.dlw-k.kreis .linie{stroke:var(--rot)}
.dlw-k.kreis .pfeil{fill:var(--rot)}
.dlw-k.gefunden .linie{stroke-width:4.4}
.dlw-k.loes .linie{stroke:var(--rot)}
.dlw-k.loes .pfeil{fill:var(--rot)}
.dlw-k.frei .linie{stroke:var(--gruen)}
.dlw-k.frei .pfeil{fill:var(--gruen)}
.dlw-k .pill circle{fill:var(--c);stroke:#03131f;stroke-width:2}
.dlw-k.wart .pill circle{fill:#03131f;stroke:var(--c);stroke-width:2}
.dlw-k.kreis .pill circle{stroke:var(--rot)}
.dlw-k.kreis.halt .pill circle{fill:var(--rot)}
.dlw-k .pill text{font:800 10.5px var(--mono);fill:#fff;text-anchor:middle;dominant-baseline:central}
.dlw-k .teil{fill:var(--rot)}
/* Sitzungen */
.dlw-s .kern{fill:#0a2b42;stroke:var(--c);stroke-width:3.5;transition:fill .35s,stroke .35s}
.dlw-s .bst{font-family:var(--display);font-weight:600;fill:#fff;text-anchor:middle;dominant-baseline:central}
.dlw-s .name{font-weight:600;font-size:12.5px;fill:#e6f0f7;text-anchor:middle}
.dlw-s .st{font:700 11.5px var(--mono);fill:#9fb7c8;text-anchor:middle;transition:fill .3s}
.dlw-s .ring{fill:none;stroke:var(--warte);stroke-width:2.2;stroke-dasharray:4 5;opacity:0;transition:opacity .3s}
.dlw-s .welle{fill:none;stroke:var(--rot);stroke-width:2.5}
.dlw-s .welle.gruen{stroke:var(--gruen)}
.dlw-s.z-wart .ring,.dlw-s.z-gewaehlt .ring{opacity:1}
.dlw-s.z-bereit .kern{stroke-opacity:.55}
.dlw-s.z-lauf .kern,.dlw-s.z-pause .kern,.dlw-s.z-lies .kern{fill:color-mix(in srgb,var(--c) 22%,#0a2b42)}
.dlw-s.z-wart .st{fill:#ffd88a}
.dlw-s.z-gewaehlt .kern,.dlw-s.z-roll .kern,.dlw-s.z-opfer .kern{fill:#3a1410;stroke:var(--rot)}
.dlw-s.z-gewaehlt .st,.dlw-s.z-roll .st,.dlw-s.z-opfer .st{fill:#ffb4a9}
.dlw-s.z-ok .kern{stroke:var(--gruen);fill:#0b3326}
.dlw-s.z-ok .st{fill:#9ee6c0}
.dlw-s .chips rect{fill:rgba(95,167,214,.2);stroke:rgba(95,167,214,.6)}
.dlw-s .chips text{font:700 10px var(--mono);fill:#cfe6f6;text-anchor:middle;dominant-baseline:central}
.dlw-s .badge rect{fill:var(--rot);stroke:#03131f;stroke-width:2}
.dlw-s .badge text{font:800 11px var(--mono);fill:#fff;text-anchor:middle;dominant-baseline:central}
.dlw-s .haken circle{fill:var(--gruen);stroke:#03131f;stroke-width:2}
.dlw-s .haken path{fill:none;stroke:#05281a;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.dlw-marke rect{fill:var(--rot);filter:drop-shadow(0 0 10px rgba(255,90,60,.7))}
.dlw-marke text{font:700 13px var(--mono);fill:#fff;text-anchor:middle;dominant-baseline:central;letter-spacing:.04em}
/* Tabelle mit Indizes, Scan */
.dlw-deko .rahmen{fill:rgba(255,255,255,.025);stroke:rgba(156,203,234,.28);stroke-width:1.5;stroke-dasharray:6 4}
.dlw-deko .rt1{font:700 12.5px var(--mono);fill:#e6f0f7}
.dlw-deko .rt2{font:500 10.5px var(--mono);fill:#7fa3bd}
.dlw-deko .rt2.idx{fill:#9ee6c0}
.dlw-deko .block{fill:rgba(10,43,66,.8);stroke:rgba(255,255,255,.08)}
.dlw-deko .bt1{font:700 11.5px var(--mono);fill:#9ccbea}
.dlw-deko .bt2{font:500 10px var(--mono);fill:#7fa3bd}
.dlw-deko .baum rect{fill:rgba(156,203,234,.45)}
.dlw-deko .baum path{stroke:rgba(156,203,234,.45);stroke-width:1}
.dlw-deko .leer{fill:rgba(255,255,255,.04);stroke:rgba(255,255,255,.05)}
.dlw-flash{fill:var(--c,#fff)}
.dlw-lookup path{fill:none;stroke:#9ccbea;stroke-width:2;stroke-dasharray:3 5}
.dlw-lookup .spitze{stroke-dasharray:none;opacity:0;transition:opacity .2s}
.dlw-lookup.voll .spitze{opacity:1}
.dlw-lookup text{font:600 10.5px var(--mono);fill:#9ccbea;dominant-baseline:central}
.dlw-saldo rect{fill:#2f9e6e}
.dlw-saldo text{font:700 10px var(--mono);fill:#fff;text-anchor:middle;dominant-baseline:central}
.dlw-geist rect{fill:rgba(156,203,234,.06);stroke:#9ccbea;stroke-width:1.5;stroke-dasharray:4 3}
.dlw-geist text{font:600 10px var(--mono);fill:#9ccbea}
.dlw-cur{fill:var(--c);stroke:#03131f;stroke-width:1.5}
.dlw-laq rect{fill:rgba(127,209,168,.2);stroke:var(--gruen)}
.dlw-laq text{font:700 9.5px var(--mono);fill:#9ee6c0;text-anchor:middle;dominant-baseline:central}
.dlw-seek{fill:none;stroke:var(--c);stroke-width:2.4}

/* Schmale Graphen (Telefon) */
.dlw.schmal-g .dlw-r .t2{font-size:12px}
.dlw.schmal-g .dlw-r .t1,.dlw.schmal-g .dlw-r .t3{font-size:9.8px}
.dlw.schmal-g .dlw-r .tz{font-size:10.5px}
.dlw.schmal-g .dlw-s .name{font-size:11.2px}
.dlw.schmal-g .dlw-s .st{font-size:10.3px}
.dlw.schmal-g .dlw-deko .rt1{font-size:11.5px}
.dlw.schmal-g .dlw-deko .rt2,.dlw.schmal-g .dlw-deko .bt2{font-size:9.5px}
.dlw.schmal-g .dlw-deko .bt1{font-size:10.5px}

/* Breite Werkstatt: Graph links, Erklärung rechts */
@container dlw (min-width:760px){
  .dlw{padding:20px 22px 16px}
  .dlw-main{grid-template-columns:minmax(0,1fr) 284px;gap:18px}
  .dlw-svg{height:380px}
  .dlw[data-szenario="ring"] .dlw-svg{height:420px}
  .dlw-seite{padding-top:4px}
}
/* Schmal: Name über der Spur */
@container dlw (max-width:560px){
  .dlw{padding:14px 12px 12px;--nw:0px}
  .dlw-achse{display:none}
  .dlw-spur{grid-template-columns:minmax(0,1fr);gap:4px}
  .dlw-spur-n{flex-direction:row;align-items:center;justify-content:space-between;gap:8px}
  .dlw-zeiger{top:4px;left:calc(100% * var(--p,0))}
  .dlw-seg button{padding:7px 11px;font-size:.8rem;min-height:36px}
  .dlw-seg-sz{border-radius:18px}
  .dlw-tog{font-size:.82rem;padding:3px 12px 3px 5px}
  .dlw-schema{margin-left:0;white-space:normal}
  .dlw-say{min-height:7.5em;font-size:.95rem}
  .dlw-svg{height:350px}
  .dlw[data-szenario="ring"] .dlw-svg{height:380px}
  .dlw-lab-t th,.dlw-lab-t td{padding:4px 4px;white-space:normal}
}

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