/* Interaktive/Notebook-Elemente im Beitrag „Betriebsdaten befragen".
   Dunkle Konsolen-/Demo-Karten auf der hellen Artikelseite; alles unter .bd
   gescopt, damit es die Website-Stile nicht berührt. Fonts DSGVO-konform. */
.bd{
  --bg-2:#111118; --bg-3:#16161F; --line:#23232E; --line-2:#2E2E3B;
  --text:#E6E6EC; --muted:#9A9AAA; --faint:#6C6C7C;
  --teal:#0ABAB5; --teal-dim:rgba(10,186,181,.14); --teal-line:rgba(10,186,181,.38);
  --warm:#E0A458;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --disp:"Abel",system-ui,sans-serif;
  margin:26px 0;
}
.bd *{box-sizing:border-box}

/* Notebook-Zellen */
.bd .nb{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--bg-2)}
.bd .cell{padding:14px 18px;border-top:1px solid var(--line)}
.bd .cell:first-child{border-top:0}
.bd .who{font-family:var(--disp);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:0 0 6px}
.bd .prompt{font-size:16.5px;color:#fff;border-left:3px solid var(--teal);padding-left:12px;margin:0}
.bd .ai{font-size:15.5px;color:var(--muted);margin:0}
.bd pre{font-family:var(--mono);font-size:12.5px;line-height:1.55;color:#C9C9D4;background:var(--bg-3);padding:12px 14px;border-radius:4px;margin:8px 0 0;overflow-x:auto}
.bd .out{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin:8px 0 0;white-space:pre;overflow-x:auto}
.bd .out b{color:var(--teal);font-weight:400}
.bd details summary{font-family:var(--disp);font-size:13px;color:var(--teal);letter-spacing:.08em;cursor:pointer;margin-top:8px}
.bd code{font-family:var(--mono);font-size:.85em;background:var(--bg-3);padding:2px 6px;border-radius:3px;color:#fff}

/* Demo-Karten */
.bd .demo{background:var(--bg-2);border:1px solid var(--line);border-radius:8px;padding:22px 24px}
.bd .demo + .demo{margin-top:18px}
.bd .label{font-family:var(--disp);font-size:13px;color:var(--faint);letter-spacing:.12em;text-transform:uppercase;margin:0 0 14px}
.bd .cap{font-family:var(--disp);font-size:14px;color:var(--faint);letter-spacing:.03em;margin-top:12px;line-height:1.5}
.bd .result{margin-top:14px;font-family:var(--mono);font-size:14px;color:var(--muted);line-height:1.7}
.bd .result b{color:#fff;font-weight:400}
.bd .result .on{color:var(--teal)}
.bd .result .off{color:var(--warm)}
.bd .btns{display:flex;gap:10px;flex-wrap:wrap}
.bd button.btn{font-family:var(--disp);letter-spacing:.1em;font-size:15px;padding:10px 18px;border:1px solid var(--teal);border-radius:6px;color:var(--teal);background:transparent;cursor:pointer;margin-top:14px}
.bd button.btn:hover{background:var(--teal-dim)}
.bd .ctl{display:grid;grid-template-columns:180px 1fr 64px;align-items:center;gap:12px;font-size:15px;margin-top:8px;color:var(--muted)}
.bd .ctl output{font-family:var(--mono);font-size:14px;text-align:right;color:#fff}
.bd input[type=range]{width:100%;accent-color:var(--teal);background:transparent}

/* Balken (Liegezeit-Ergebnis + Fluss-Warteschlangen) */
.bd .bars2{display:grid;gap:7px;margin-top:12px}
.bd .bar2{display:grid;grid-template-columns:130px 1fr 64px;align-items:center;gap:10px;font-family:var(--mono);font-size:13.5px;color:var(--muted)}
.bd .bar2 .w{height:14px;background:var(--bg-3);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.bd .bar2 .w i{display:block;height:100%;width:0;background:var(--teal);transition:width .5s cubic-bezier(.2,.8,.2,1)}
.bd .bar2.bn .w i{background:var(--warm)}
.bd .bar2 .p{text-align:right}

/* Fluss-Simulation (SVG) */
.bd .demo svg{width:100%;height:auto;display:block}
.bd .flow .st{fill:var(--bg-3);stroke:var(--line-2);stroke-width:1.5}
.bd .flow .st.bn{stroke:var(--warm)}
.bd .flow text{font-family:var(--mono);font-size:11px;fill:var(--muted)}
.bd .flow .q{fill:var(--warm)}
.bd .flow .w{fill:var(--teal)}

/* Heatmap */
.bd .hm{display:grid;grid-template-columns:90px repeat(5,1fr);gap:4px;font-family:var(--mono);font-size:12px;margin-top:6px}
.bd .hm div{padding:8px 4px;text-align:center;border-radius:3px;color:#fff}
.bd .hm .h{color:var(--faint);background:transparent;font-family:var(--disp);letter-spacing:.06em}
.bd .hm .r{text-align:right;color:var(--muted);background:transparent;padding-right:8px}

/* Screenshot-Figur */
figure.bd.shot{border:1px solid #E4EAEA;border-radius:8px;overflow:hidden;background:#fff;padding:0;box-shadow:0 1px 3px rgba(10,20,24,.06)}
figure.bd.shot img{width:100%;height:auto;display:block}
figure.bd.shot figcaption{font-family:var(--disp);font-size:14px;color:#4A5A5C;letter-spacing:.03em;padding:11px 15px;margin:0;border-top:1px solid #E4EAEA;background:#fff}

@media(max-width:560px){
  .bd .ctl{grid-template-columns:130px 1fr 54px}
  .bd .bar2{grid-template-columns:90px 1fr 58px;font-size:12px}
  .bd .hm{font-size:11px;grid-template-columns:66px repeat(5,1fr)}
}

/* Klick auf Screenshot → große Ansicht (Lightbox) */
figure.bd.shot{cursor:zoom-in}
figure.bd.shot figcaption{cursor:auto}
.bd-lightbox{position:fixed;inset:0;z-index:9999;background:rgba(6,6,10,.92);display:flex;align-items:center;justify-content:center;padding:24px;cursor:zoom-out}
.bd-lightbox img{max-width:96vw;max-height:94vh;width:auto;height:auto;border-radius:6px;box-shadow:0 24px 90px rgba(0,0,0,.65)}
.bd-lightbox-close{position:fixed;top:12px;right:22px;font:400 36px/1 "Abel",system-ui,sans-serif;color:#fff;cursor:pointer;opacity:.85}
.bd-lightbox-close:hover{opacity:1}