/* ==========================================================================
   Leitfäden unter /wissen/ (seit 02.11.2026). Markup aus seiten/wissen.cjs.
   Bausteine: Befehlsblock (.befehl), Tabelle (.tabelle), Balkenbild aus echten
   Werten (.balken-bild, Auftritt über datenbilder.js wie die Datenbilder der
   Projektseiten), Quellenzeile (.quelle). Grundflächen und Farben aus rahmen.css.
   ========================================================================== */

/* ---------- Befehlsblock ---------- */
.befehl{margin:18px 0 22px;border-radius:16px;overflow:hidden;background:#0E1220;border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--schatten);position:relative;isolation:isolate}
.befehl::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 90% at 100% 0%,rgba(139,92,246,.22),transparent 60%),radial-gradient(50% 80% at 0% 100%,rgba(59,108,246,.16),transparent 60%)}
.befehl figcaption{display:flex;align-items:center;gap:9px;padding:11px 16px;border-bottom:1px solid rgba(255,255,255,.07);
  font-size:12px;font-weight:500;letter-spacing:.04em;color:#A9B0C2}
.befehl figcaption::before{content:"";width:9px;height:9px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 35% 30%,#fff 0 10%,transparent 32%),radial-gradient(circle at 50% 60%,#8B5CF6,#25085f 78%)}
.befehl pre{margin:0;padding:15px 18px 17px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.inhalt .befehl code{display:block;background:none;border:0;padding:0;border-radius:0;color:#E8EBF3;font-family:var(--code);
  font-size:14px;line-height:1.7;white-space:pre}
.befehl:focus-within{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- Tabelle ---------- */
.tabelle{margin:20px 0 26px;border:1px solid var(--line);border-radius:var(--rund);background:var(--bg2);box-shadow:var(--schatten);
  overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabelle:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.tabelle table{width:100%;min-width:560px;border-collapse:collapse;font-size:15px;line-height:1.55}
.tabelle th,.tabelle td{text-align:left;vertical-align:top;padding:13px 16px;border-top:1px solid var(--line)}
.tabelle thead th{border-top:0;font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--soft);
  background:color-mix(in srgb,var(--accent) 4%,var(--bg2))}
.tabelle tbody th{font-weight:600;color:var(--ink);white-space:nowrap}
.tabelle td{color:var(--mut)}
.tabelle td code{font-size:.82em}

/* ---------- Balkenbild ---------- */
.db-titel{margin:0 0 16px;font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--soft)}
.balken{display:grid;gap:9px}
.b-zeile{display:grid;grid-template-columns:minmax(150px,240px) 1fr 52px;align-items:center;gap:14px}
.b-name{font-size:14px;color:var(--mut);line-height:1.3}
.b-spur{position:relative;height:14px;border-radius:99px;background:var(--bg3);overflow:hidden}
.b-spur i{position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:inherit;background:var(--verlauf)}
.b-zeile b{font-size:15px;font-weight:600;text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
/* Die Null ist die Aussage: als Ring sichtbar, nicht als leere Spur. */
.b-null .b-name{color:var(--ink);font-weight:600}
.b-null .b-spur{background:transparent;border:1.5px dashed var(--line2)}
.b-null b{font-size:22px;background:var(--verlauf);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.db-an .balken-bild .b-spur i{transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease)}
.db-an .balken-bild.an .b-spur i{transform:scaleX(1)}
.db-an .balken-bild .b-zeile:nth-child(2) i{transition-delay:.06s}
.db-an .balken-bild .b-zeile:nth-child(3) i{transition-delay:.12s}
.db-an .balken-bild .b-zeile:nth-child(4) i{transition-delay:.18s}
.db-an .balken-bild .b-zeile:nth-child(5) i{transition-delay:.24s}
.db-an .balken-bild .b-zeile:nth-child(6) i{transition-delay:.3s}
.db-an .balken-bild .b-zeile:nth-child(7) i{transition-delay:.36s}
.db-an .balken-bild .b-null b{opacity:0;transition:opacity .6s .9s}
.db-an .balken-bild.an .b-null b{opacity:1}
@media (max-width:640px){
  .b-zeile{grid-template-columns:1fr 46px;gap:4px 10px}
  .b-name{grid-column:1/-1}
}

/* ---------- Quelle ---------- */
.inhalt p.quelle{margin-top:26px;padding-top:14px;border-top:1px solid var(--line);font-size:13.5px;line-height:1.6;color:var(--soft)}

@media (prefers-reduced-motion:reduce){
  .db-an .balken-bild .b-spur i{transform:none;transition:none}
  .db-an .balken-bild .b-null b{opacity:1;transition:none}
}