/* ============================================================
   werkbank.css — Richtung A „Werkstatt" (grafischer Umbau, Jan-Wahl 07.09.)
   Aktiv, wenn <html data-design="werkbank"> gesetzt ist (Umschalter im Profil).
   Eigenständige Design-Sprache, KEINE --hf-*-Tokens: eine Werkbank bei Nacht —
   Graphit als Grund, eine warme Arbeitsleuchte aus Messing und Kupfer fällt von
   oben ins Bild. Tiefe entsteht durch Licht, nicht durch Rahmen. Alles Gemessene
   steht in Mono und trägt Skalenstriche. (Einzige Ausnahme bei den --hf-*-Tokens:
   --hf-danger im Dunkeln, Blöcke 1b und 1c.)

   Quelle: design/richtung-a-werkstatt.html (freigegebener Entwurf, 07.09.).
   Token-Werte 1:1 aus dem Entwurf übernommen, außer den sechs Altwerten aus K17-F
   in Block 1 (webui/ci-kontrakt.md, Regel 6); Namen mit --wb-Präfix versehen
   (Projekt-Konvention: --hf-/--kw-Präfixe bestehen bereits, generische Namen wie
   --bg/--text wären ein Kollisionsrisiko in einer geteilten Codebase).

   Diese Datei ist NUR die Content-Fläche (main-wrap/main) + wiederverwendete
   Komponenten (.card, .pill, .btn, details.variant, …) — die Seitenleiste/
   Navigation bleibt unberührt (Welle 4 läuft parallel in einem anderen Worktree).

   Voraussetzung in klipwerk.css: dessen gemeinsame Komponenten-Schicht
   (`html:not([data-design="klassisch"])`, für die --hf-/--kw-Token-Designs
   gedacht) muss `:not([data-design="werkbank"])` mit ausschließen — sonst
   gewinnen dort einzelne Regeln per höherer Selektor-Spezifität gegen diese
   Datei und referenzieren --kw-*-Tokens, die es hier nicht gibt (Hintergrund
   fällt auf transparent zurück). Fund vom 08.09.: „NEU"-Stempel unsichtbar im
   Dunkelmodus, siehe .pill.neu unten — Ursache war exakt das, gefixt in
   klipwerk.css, nicht hier.
   ============================================================ */

/* --- 1. Tokens · Hell (Werkstatt am Tag: Beton, Papier, Messing gedunkelt) --- */
html[data-design="werkbank"] {
  --wb-bg:        #e9e5dc;
  --wb-page:      #dcd7cc;
  --wb-surface:   #f4f1ea;
  --wb-tile:      #fbfaf6;
  --wb-tile-2:    #ffffff;
  --wb-well:      #e2ddd2;
  --wb-text:      #1d1c19;
  --wb-muted:     #5c584f;
  --wb-faint:     #8f897d;
  --wb-line:      rgba(29,28,25,.10);
  --wb-edge:      rgba(255,255,255,.75);
  --wb-brass:     #7a5a12;    /* Text-sicher, ≥5:1 auf hellen Flächen */
  --wb-brass-fill:#a8781f;    /* Flächen/Balken — NICHT als Fließtext-Fläche (Kontrast, siehe unten) */
  --wb-brass-hi:  #c9973a;    /* nur Verlauf/Rand — nie als Text, <3:1 auf jeder Fläche hier */
  --wb-copper:    #b35c2c;
  --wb-on-brass:  #1d1c19;
  --wb-on-fill:   var(--wb-tile-2);   /* Schrift auf vollflächigem Messing/Kupfer: hell im Hellmodus */
  --wb-shade:     #5b6470;
  --wb-shade-fill:#76808d;
  --wb-glow-top:  rgba(201,151,58,.42);
  --wb-glow-side: rgba(179,92,44,.14);
  --wb-glow-side2:rgba(201,151,58,.12);
  --wb-shadow-panel: 0 14px 34px rgba(29,28,25,.14), 0 2px 6px rgba(29,28,25,.06);
  --wb-shadow-tile:  0 1px 2px rgba(29,28,25,.06);
  --wb-shadow-dock:  0 12px 30px rgba(29,28,25,.22);
  --wb-well-inset:   inset 0 2px 5px rgba(29,28,25,.16), inset 0 -1px 0 rgba(255,255,255,.7);
  --wb-on-brass-edge: rgba(255,255,255,.35);  /* U5: Lichtkante auf gefülltem Messing (Entwurf --on-brass-edge) */
  --wb-focus:     #7a5a12;
  /* K17-F (T385): gelten in allen Themen, darum nur in diesem Block. „Altwert“ heißt: der Wert, den die
     Seite heute zeigt; er stammt nicht aus dem Werkstatt-Entwurf. Angleichen ist ein Token-Edit und
     sichtbar, also Jans Entscheid (webui/ci-kontrakt.md). */
  --wb-signal:       #e34a1e;                    /* Altwert (klipwerk-Signal): Logo-Dreieck und Fehlermeldung der Anmeldung */
  --wb-accept:       #27ae60;                    /* Altwert: /trends, „＋“ übernimmt einen Hashtag-Vorschlag */
  --wb-accept-hover: #1e8449;                    /* Altwert: dasselbe beim Zeigen */
  --wb-remove-hover: #c0392b;                    /* Altwert: /trends, „✕“ an einem Hashtag beim Zeigen */
  --wb-tint:         rgba(0,0,0,.04);            /* Altwert: abgesetzter Kasten in einer Karte (Posteingang, Wache) */
  --wb-shadow-btn:   0 8px 22px rgba(0,0,0,.14); /* Altwert: Schlagschatten des Verlaufsknopfs .btn.gruen; heute .14, der Entwurf hat .18 (design/richtung-a-werkstatt.html:416) */

  --wb-s-1: 4px;  --wb-s-2: 8px;  --wb-s-3: 12px; --wb-s-4: 16px;
  --wb-s-5: 20px; --wb-s-6: 24px; --wb-s-8: 32px; --wb-s-10: 40px;
  --wb-r-panel: 20px; --wb-r-tile: 14px; --wb-r-pill: 999px;

  --wb-font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --wb-font-text:    "Barlow", "Helvetica Neue", sans-serif;
  --wb-font-mono:    "IBM Plex Mono", "Menlo", monospace;

  --wb-dur: 180ms;
  --wb-ease: cubic-bezier(.2,.7,.2,1);
}

/* --- 1b. Tokens · Dunkel, per Systemeinstellung (kein data-theme gesetzt) --- */
@media (prefers-color-scheme: dark) {
  html[data-design="werkbank"]:not([data-theme="light"]) {
    --wb-bg:        #1a1918;
    --wb-page:      #111110;
    --wb-surface:   #232220;
    --wb-tile:      #2c2b28;
    --wb-tile-2:    #34322e;
    --wb-well:      #1c1b19;
    --wb-text:      #f2ede3;
    --wb-muted:     #a8a196;
    --wb-faint:     #736d63;
    --wb-line:      rgba(242,237,227,.08);
    --wb-edge:      rgba(255,255,255,.055);
    --wb-brass:     #d9a441;
    --wb-brass-fill:#d9a441;
    --wb-brass-hi:  #f0c15e;
    --wb-copper:    #c46a3a;
    --wb-on-brass:  #1a1918;
    --wb-on-fill:   var(--wb-on-brass);   /* auf hellem Messing/Kupfer im Dunkelmodus: dunkle Tinte */
    --wb-shade:     #9aa3b0;
    --wb-shade-fill:#7f8794;
    --wb-glow-top:  rgba(217,164,65,.34);
    --wb-glow-side: rgba(196,106,58,.10);
    --wb-glow-side2:rgba(217,164,65,.08);
    --wb-shadow-panel: 0 18px 40px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3);
    --wb-shadow-tile:  0 1px 2px rgba(0,0,0,.25);
    --wb-shadow-dock:  0 16px 40px rgba(0,0,0,.55);
    --wb-well-inset:   inset 0 2px 6px rgba(0,0,0,.55), inset 0 -1px 0 rgba(255,255,255,.04);
    --wb-on-brass-edge: rgba(255,255,255,.35);  /* U5: Lichtkante auf gefülltem Messing (Entwurf --on-brass-edge) */
    --wb-focus:     #f0c15e;
    --hf-danger:    oklch(0.74 0.12 25);   /* A1 zu U5 — Begründung im Block 1c */
  }
}
/* --- 1c. Tokens · Dunkel, per Umschalter erzwungen (data-theme="dark") --- */
html[data-design="werkbank"][data-theme="dark"] {
  --wb-bg:        #1a1918;
  --wb-page:      #111110;
  --wb-surface:   #232220;
  --wb-tile:      #2c2b28;
  --wb-tile-2:    #34322e;
  --wb-well:      #1c1b19;
  --wb-text:      #f2ede3;
  --wb-muted:     #a8a196;
  --wb-faint:     #736d63;
  --wb-line:      rgba(242,237,227,.08);
  --wb-edge:      rgba(255,255,255,.055);
  --wb-brass:     #d9a441;
  --wb-brass-fill:#d9a441;
  --wb-brass-hi:  #f0c15e;
  --wb-copper:    #c46a3a;
  --wb-on-brass:  #1a1918;
  --wb-on-fill:   var(--wb-on-brass);
  --wb-shade:     #9aa3b0;
  --wb-shade-fill:#7f8794;
  --wb-glow-top:  rgba(217,164,65,.34);
  --wb-glow-side: rgba(196,106,58,.10);
  --wb-glow-side2:rgba(217,164,65,.08);
  --wb-shadow-panel: 0 18px 40px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3);
  --wb-shadow-tile:  0 1px 2px rgba(0,0,0,.25);
  --wb-shadow-dock:  0 16px 40px rgba(0,0,0,.55);
  --wb-well-inset:   inset 0 2px 6px rgba(0,0,0,.55), inset 0 -1px 0 rgba(255,255,255,.04);
  --wb-on-brass-edge: rgba(255,255,255,.35);  /* U5: Lichtkante auf gefülltem Messing (Entwurf --on-brass-edge) */
  --wb-focus:     #f0c15e;
  /* Die EINE Ausnahme von „keine --hf-*-Tokens“ (A1 zu U5, Paul 24.09.): Fehlertexte aus
     style.css (.voice-status.voice-error, die Radar-Warnung auf /trends) färben mit
     --hf-danger. Ohne Wert hier galt #ef4444 aus style.css — 3,40 bis 4,67:1 auf den
     Werkstatt-Flächen. oklch(0.74 0.12 25) ist der Wert der übrigen Dunkel-Designs
     (designs.css, klipwerk.css). Füllungen in --hf-danger mit Schrift darauf gibt es in
     der Werkstatt nicht: werkbank.css überschreibt sie (.btn.rot, .btn-scan, .btn). */
  --hf-danger:    oklch(0.74 0.12 25);
}

/* ============================================================
   Ab hier: Komponenten. Alles scoped auf html[data-design="werkbank"] —
   die Seitenleiste (.sidebar/.brand/nav) wird ABSICHTLICH nicht angefasst,
   das läuft in Welle 4 (Navigation) parallel in einem anderen Worktree.
   ============================================================ */

/* --- 2. Fläche + die eine Arbeitsleuchte (Graphit-Grund) --- */
html[data-design="werkbank"] body { background: var(--wb-page); }
html[data-design="werkbank"] .main-wrap {
  position: relative;
  background: var(--wb-bg);
  isolation: isolate;
}
html[data-design="werkbank"] .main-wrap::before {
  content: "";
  position: absolute; inset: 0; height: 640px;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(120% 60% at 50% -10%, var(--wb-glow-top) 0%, transparent 62%);
}
html[data-design="werkbank"] main,
html[data-design="werkbank"] .page-head,
html[data-design="werkbank"] .flash,
html[data-design="werkbank"] .besuch-banner { position: relative; z-index: 1; }
/* Die Kopfleiste bekommt ihre Stapelebene in style.css (z-index 30) — hier NICHT auf 1
   herunterziehen, sonst klappt das Konto-Menü hinter den Inhalt. */

/* --- 2b. Kopfleiste + Konto-Menü --------------------------------------------
   Diese Datei kennt keine --hf-*-Tokens (siehe Kopf). Ohne eigene Regel fiele das
   Menü auf die Grundwerte aus style.css zurück: im Werkbank-Hellmodus eine weiße
   Kachel im Beton, und bei Dunkelmodus ÜBER die Systemeinstellung (also ohne
   data-theme) eine weiße Fläche im nächtlichen Bild. Deshalb hier die Übersetzung
   auf --wb-*, die in allen drei Token-Blöcken oben definiert sind — hell, dunkel
   per System und dunkel per Umschalter. */
html[data-design="werkbank"] .konto-knopf {
  background: var(--wb-tile); border-color: var(--wb-line); color: var(--wb-text);
  box-shadow: var(--wb-shadow-tile);
}
html[data-design="werkbank"] .konto-knopf:hover { border-color: var(--wb-brass); }
/* --wb-brass-fill trägt laut Token-Kommentar oben ausdrücklich KEINEN Fließtext
   (im Hellmodus gemessen 3,91:1). Die Initialen sitzen deshalb in einer Mulde. */
html[data-design="werkbank"] .konto-avatar {
  background: var(--wb-well); border-color: var(--wb-line); color: var(--wb-text);
  box-shadow: var(--wb-well-inset); font-family: var(--wb-font-mono);
}
html[data-design="werkbank"] .konto-pfeil,
html[data-design="werkbank"] .konto-kopf-sub,
html[data-design="werkbank"] .konto-feld-titel { color: var(--wb-muted); }
html[data-design="werkbank"] .konto-panel {
  background: var(--wb-surface); border-color: var(--wb-line); color: var(--wb-text);
  border-radius: var(--wb-r-tile); box-shadow: var(--wb-shadow-panel);
}
html[data-design="werkbank"] .konto-eintrag { color: var(--wb-text); border-radius: var(--wb-r-tile); }
html[data-design="werkbank"] .konto-eintrag:hover { background: var(--wb-well); }
html[data-design="werkbank"] .konto-trenner { background: var(--wb-line); }
html[data-design="werkbank"] .konto-select,
html[data-design="werkbank"] .konto-panel .theme-toggle {
  background: var(--wb-tile); border: 1px solid var(--wb-line); color: var(--wb-text);
  border-radius: var(--wb-r-tile);
}
html[data-design="werkbank"] .konto-panel .theme-toggle:hover { color: var(--wb-brass); }
html[data-design="werkbank"] .konto-feld-titel { font-family: var(--wb-font-mono); }

/* --- 3. Typografie --- */
html[data-design="werkbank"] body {
  font-family: var(--wb-font-text);
  color: var(--wb-text);
}
html[data-design="werkbank"] .page-head h1,
html[data-design="werkbank"] .hook,
html[data-design="werkbank"] .idee-kopf h2,
html[data-design="werkbank"] .tarif .name {
  font-family: var(--wb-font-display);
  font-weight: 700;
  letter-spacing: -.01em;
}
/* Die Seitenüberschrift wie im Entwurf (U5; `.h1` in design/2026-09-18-prototyp-werkstatt.html):
   Messing (Jan 18.09.: „diese prägnanten Überschriften, die H1-Überschriften, die möchte ich
   gern in dem gleichen Gelb haben“), mittig samt Unterzeile und Knöpfen im Kopf (Runde 2),
   38 px, am Rechner 44 px, nicht mehr in Versalien. Fließtext, Listen und Felder darunter
   bleiben linksbündig — zentriert wird nur der Kopf der Seite. */
html[data-design="werkbank"] .page-head { text-align: center; }
html[data-design="werkbank"] .page-head h1 {
  font-size: 38px; line-height: .96; margin: var(--wb-s-2) 0 var(--wb-s-1);
  color: var(--wb-brass); text-wrap: balance;
}
html[data-design="werkbank"] .page-head .sub { font-size: 15px; }
@media (min-width: 700px) {
  html[data-design="werkbank"] .page-head h1 { font-size: 44px; }
}
html[data-design="werkbank"] .hook { font-size: 19px; line-height: 1.2; font-weight: 600; }
html[data-design="werkbank"] .sub { color: var(--wb-muted); }
/* Alles Gemessene in Mono mit Ziffern auf gleicher Breite */
html[data-design="werkbank"] .pill,
html[data-design="werkbank"] .fit,
html[data-design="werkbank"] .handle,
html[data-design="werkbank"] .chan-stats,
html[data-design="werkbank"] .rate-btn,
html[data-design="werkbank"] .sz-kopf,
html[data-design="werkbank"] .ht-chip,
html[data-design="werkbank"] .quote-zahl,
html[data-design="werkbank"] .stimmung-meter + .sub {
  font-family: var(--wb-font-mono);
  font-variant-numeric: tabular-nums;
}

/* --- 4. Skalenstriche: das wiederkehrende Messgeräte-Detail (Fit-Lineal) --- */
.wb-ruler { display: none; } /* neutraler Grundzustand außerhalb dieses Designs */
html[data-design="werkbank"] .wb-ruler {
  display: inline-block;
  width: 64px; height: 10px;
  position: relative;
  vertical-align: middle;
  border-bottom: 1px solid var(--wb-faint);
  background:
    repeating-linear-gradient(to right, var(--wb-faint) 0 1px, transparent 1px 8px) 0 100% / 100% 4px no-repeat,
    repeating-linear-gradient(to right, var(--wb-faint) 0 1px, transparent 1px 32px) 0 100% / 100% 8px no-repeat;
}
html[data-design="werkbank"] .wb-ruler > i {
  position: absolute; left: 0; bottom: -1px; height: 4px;
  background: var(--wb-brass-fill);
  border-radius: 1px;
  display: block;
}

/* --- 5. Karte (Ideen/Dreh-Liste) als Kachel — Karten-in-Karten, kein Rahmen --- */
html[data-design="werkbank"] .card {
  background: var(--wb-tile);
  border: 0;
  border-radius: var(--wb-r-tile);
  box-shadow: inset 0 1px 0 var(--wb-edge), var(--wb-shadow-tile);
  padding: var(--wb-s-4);
}
html[data-design="werkbank"] .card.is-pushed {
  box-shadow: inset 0 1px 0 var(--wb-edge), var(--wb-shadow-tile), inset 3px 0 0 var(--wb-brass-fill);
}
html[data-design="werkbank"] .card.card-error { box-shadow: inset 0 1px 0 var(--wb-edge), var(--wb-shadow-tile), inset 3px 0 0 var(--wb-copper); }
html[data-design="werkbank"] .thumb img,
html[data-design="werkbank"] .thumb-ph { border-radius: calc(var(--wb-r-tile) - 4px); background: var(--wb-well); }

/* --- 6. Pillen/Badges: Grundzustand = eingelassene Anzeige (well + Inset-Schatten) --- */
html[data-design="werkbank"] .pill {
  background: var(--wb-well);
  color: var(--wb-muted);
  border: 0;
  box-shadow: var(--wb-well-inset);
  border-radius: var(--wb-r-pill);
  font-size: 11.5px;
}
html[data-design="werkbank"] .pill.muted { color: var(--wb-muted); }
/* „gut/bestätigt“: Messing-Text auf der eingelassenen Fläche (verifiziert ≥4,70:1 hell / ≥7,65:1 dunkel) */
html[data-design="werkbank"] .pill.ok,
html[data-design="werkbank"] .pill.accent,
html[data-design="werkbank"] .pill.pill-score,
html[data-design="werkbank"] .pill.evA,
html[data-design="werkbank"] .pill.evB,
html[data-design="werkbank"] .pill.evC,
html[data-design="werkbank"] .pill.amp-gruen {
  background: var(--wb-well);
  color: var(--wb-brass);
  font-weight: 700;
}
/* „braucht Aufmerksamkeit/nicht posten“: Kupfer-Text — der Entwurf kennt keine
   Ampel-Dreifarbigkeit (nur Messing als Akzent + Kupfer als Verlaufspartner);
   hier bewusst zweistufig zusammengefasst, Nuance trägt der Pillentext/Emoji
   (Begründung im Bericht). well+Kupfer fiel beim Nachrechnen knapp unter 4,5:1 —
   deshalb eigene, hellere/dunklere Fläche statt well. */
html[data-design="werkbank"] .pill.evD,
html[data-design="werkbank"] .pill.evE,
html[data-design="werkbank"] .pill.amp-gelb,
html[data-design="werkbank"] .pill.amp-rot {
  background: var(--wb-tile-2);
  color: var(--wb-copper);
  box-shadow: var(--wb-well-inset);
  font-weight: 700;
}
html[data-design="werkbank"][data-theme="dark"] .pill.evD,
html[data-design="werkbank"][data-theme="dark"] .pill.evE,
html[data-design="werkbank"][data-theme="dark"] .pill.amp-gelb,
html[data-design="werkbank"][data-theme="dark"] .pill.amp-rot {
  background: var(--wb-bg);
}
@media (prefers-color-scheme: dark) {
  html[data-design="werkbank"]:not([data-theme="light"]) .pill.evD,
  html[data-design="werkbank"]:not([data-theme="light"]) .pill.evE,
  html[data-design="werkbank"]:not([data-theme="light"]) .pill.amp-gelb,
  html[data-design="werkbank"]:not([data-theme="light"]) .pill.amp-rot { background: var(--wb-bg); }
}
/* Die EINE gefüllte Pille (Video-Art) + der NEU-Stempel: volle Fläche, geprüfter
   Kontrast (Messing ≥6,37:1 hell/≥7,81:1 dunkel; Kupfer ≥4,68:1 hell/≥4,57:1 dunkel) */
html[data-design="werkbank"] .pill.art {
  background: var(--wb-brass);
  color: var(--wb-on-fill);
  box-shadow: none;
  font-weight: 700;
}
html[data-design="werkbank"] .pill.neu {
  background: var(--wb-copper);
  color: var(--wb-on-fill);
  box-shadow: none;
  font-weight: 700;
}
html[data-design="werkbank"] a.pill-link:hover { color: var(--wb-brass); }
html[data-design="werkbank"] .handle {
  font-family: var(--wb-font-mono);
  background: var(--wb-well);
  color: var(--wb-brass);
  border: 0;
  box-shadow: var(--wb-well-inset);
  font-weight: 600;
}
html[data-design="werkbank"] .fit.s0 { background: var(--wb-tile-2); color: var(--wb-copper); border-color: transparent; }
html[data-design="werkbank"][data-theme="dark"] .fit.s0 { background: var(--wb-bg); }
@media (prefers-color-scheme: dark) { html[data-design="werkbank"]:not([data-theme="light"]) .fit.s0 { background: var(--wb-bg); } }
html[data-design="werkbank"] .fit.s1,
html[data-design="werkbank"] .fit.s2 { background: var(--wb-well); color: var(--wb-brass); border-color: transparent; }

/* --- 7. Details/Stufen (Drehen · Posten · Hintergrund) als Kachel mit Chevron --- */
html[data-design="werkbank"] details.variant,
html[data-design="werkbank"] .dreh-fakten,
html[data-design="werkbank"] .spick,
html[data-design="werkbank"] .drehbuch,
html[data-design="werkbank"] .posting-panel,
html[data-design="werkbank"] .stimmung,
html[data-design="werkbank"] .pillar,
html[data-design="werkbank"] .idee-opt,
html[data-design="werkbank"] details.regeln-abfrage {
  background: var(--wb-tile-2);
  border: 0;
  border-radius: var(--wb-r-tile);
  box-shadow: inset 0 1px 0 var(--wb-edge), var(--wb-shadow-tile);
}
html[data-design="werkbank"] details.variant.comment-insights {
  box-shadow: inset 0 1px 0 var(--wb-edge), var(--wb-shadow-tile), inset 3px 0 0 var(--wb-brass-fill);
}
html[data-design="werkbank"] details.variant > summary,
html[data-design="werkbank"] .dreh-fakten > summary,
html[data-design="werkbank"] .spick > summary,
html[data-design="werkbank"] .drehbuch > summary,
html[data-design="werkbank"] .idee-opt > summary,
html[data-design="werkbank"] details.regeln-abfrage > summary {
  font-family: var(--wb-font-display);
  font-weight: 600;
  font-size: 15px;
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: var(--wb-s-3);
}
html[data-design="werkbank"] details.variant > summary::-webkit-details-marker,
html[data-design="werkbank"] .dreh-fakten > summary::-webkit-details-marker,
html[data-design="werkbank"] .spick > summary::-webkit-details-marker,
html[data-design="werkbank"] .drehbuch > summary::-webkit-details-marker,
html[data-design="werkbank"] .idee-opt > summary::-webkit-details-marker,
html[data-design="werkbank"] details.regeln-abfrage > summary::-webkit-details-marker { display: none; }
html[data-design="werkbank"] details.variant > summary::after,
html[data-design="werkbank"] .dreh-fakten > summary::after,
html[data-design="werkbank"] .spick > summary::after,
html[data-design="werkbank"] .drehbuch > summary::after,
html[data-design="werkbank"] .idee-opt > summary::after,
html[data-design="werkbank"] details.regeln-abfrage > summary::after {
  content: "›";
  font-family: var(--wb-font-text);
  color: var(--wb-brass);
  font-size: 20px;
  line-height: 1;
  flex: none;
  transform: rotate(90deg);
  transition: transform var(--wb-dur) var(--wb-ease);
}
html[data-design="werkbank"] details.variant[open] > summary::after,
html[data-design="werkbank"] .dreh-fakten[open] > summary::after,
html[data-design="werkbank"] .spick[open] > summary::after,
html[data-design="werkbank"] .drehbuch[open] > summary::after,
html[data-design="werkbank"] .idee-opt[open] > summary::after,
html[data-design="werkbank"] details.regeln-abfrage[open] > summary::after { transform: rotate(-90deg); }
html[data-design="werkbank"] .idee-opt[open] { background: var(--wb-tile-2); }
html[data-design="werkbank"] .variant .vhook { font-family: var(--wb-font-display); font-weight: 600; font-size: 16px; }
html[data-design="werkbank"] .comment-insights > summary { color: var(--wb-text); }

/* --- 8. Szenen (Drehbuch Szene für Szene): Messing-Strich als Zeitmarke --- */
html[data-design="werkbank"] .szene { border-top-color: var(--wb-line); }
html[data-design="werkbank"] .sz-kopf {
  color: var(--wb-brass);
  display: flex; align-items: center; gap: 6px;
}
html[data-design="werkbank"] .sz-kopf::before { content: ""; width: 8px; height: 1.5px; background: var(--wb-brass-fill); flex: none; }
html[data-design="werkbank"] .sz-tag { font-family: var(--wb-font-mono); background: var(--wb-well); box-shadow: var(--wb-well-inset); color: var(--wb-muted); }
html[data-design="werkbank"] .sz-tag-tun { color: var(--wb-shade); }
html[data-design="werkbank"] .sz-tag-sag { color: var(--wb-brass); }
html[data-design="werkbank"] .sz-tag-tipp { border: 0; box-shadow: var(--wb-well-inset); }
html[data-design="werkbank"] .fakten-liste,
html[data-design="werkbank"] .script,
html[data-design="werkbank"] .spick-schritte { color: var(--wb-text); }

/* --- 9. Knöpfe — der EINE Verlaufsknopf ist die Hauptaktion --- */
html[data-design="werkbank"] .btn {
  font-family: var(--wb-font-text);
  font-weight: 600;
  border-radius: var(--wb-r-pill);
  background: var(--wb-tile-2);
  color: var(--wb-text);
  border: 0;
  box-shadow: inset 0 1px 0 var(--wb-edge), var(--wb-shadow-tile);
}
html[data-design="werkbank"] .btn:hover { background: var(--wb-well); color: var(--wb-text); }
html[data-design="werkbank"] .btn.sekundaer { background: transparent; color: var(--wb-muted); box-shadow: var(--wb-well-inset); }
html[data-design="werkbank"] .btn.sekundaer:hover { color: var(--wb-text); }
/* „Auf die Dreh-Liste“ — die Haupt-Handlung der Detailansicht, 1:1 der
   Verlaufsknopf-Look aus dem Entwurf (Messing → Kupfer Rand, gefüllte Fläche). */
html[data-design="werkbank"] .btn.gruen {
  background:
    linear-gradient(var(--wb-tile), var(--wb-tile)) padding-box,
    linear-gradient(135deg, var(--wb-brass-hi), var(--wb-copper)) border-box;
  border: 1.5px solid transparent;
  color: var(--wb-text);
  font-family: var(--wb-font-display);
  font-weight: 700;
  box-shadow: var(--wb-shadow-btn), inset 0 1px 0 var(--wb-edge);
}
html[data-design="werkbank"] .btn.gruen:hover { filter: none; background:
    linear-gradient(var(--wb-tile-2), var(--wb-tile-2)) padding-box,
    linear-gradient(135deg, var(--wb-brass-hi), var(--wb-copper)) border-box; }
/* Löschen: Kupfer als Warnfarbe (der Entwurf kennt kein eigenes Rot) */
html[data-design="werkbank"] .btn.rot {
  background: var(--wb-tile-2);
  color: var(--wb-copper);
  box-shadow: var(--wb-well-inset);
}
html[data-design="werkbank"][data-theme="dark"] .btn.rot { background: var(--wb-bg); }
@media (prefers-color-scheme: dark) { html[data-design="werkbank"]:not([data-theme="light"]) .btn.rot { background: var(--wb-bg); } }
html[data-design="werkbank"] .btn.rot:hover { filter: brightness(1.05); }
html[data-design="werkbank"] .btn-x:hover { color: var(--wb-copper); background: var(--wb-well); }

/* --- 10. Bewertung, Tags, Formulare --- */
html[data-design="werkbank"] .rate-btn { background: var(--wb-well); box-shadow: var(--wb-well-inset); border: 0; color: var(--wb-muted); }
html[data-design="werkbank"] .rate-btn:hover { color: var(--wb-text); }
html[data-design="werkbank"] .rate-btn:has(input:checked).rate-good,
html[data-design="werkbank"] .rate-btn.on.rate-good { background: var(--wb-brass); color: var(--wb-on-fill); box-shadow: none; }
html[data-design="werkbank"] .rate-btn:has(input:checked).rate-bad,
html[data-design="werkbank"] .rate-btn.on.rate-bad { background: var(--wb-copper); color: var(--wb-on-fill); box-shadow: none; }
html[data-design="werkbank"] .tag-chip { background: var(--wb-well); box-shadow: var(--wb-well-inset); border: 0; color: var(--wb-muted); }
html[data-design="werkbank"] .tag-chip.tag-pos { color: var(--wb-brass); }
/* Kupfer allein trägt auf der Mulde 4,48:1 (12 px) — ein Zwanzigstel Schriftfarbe hebt es
   auf 4,78:1, ohne dass der Chip seinen Ton verliert (A2 zu U5). */
html[data-design="werkbank"] .tag-chip.tag-neg { color: color-mix(in srgb, var(--wb-copper) 95%, var(--wb-text)); }
html[data-design="werkbank"] .tag-chip:hover,
html[data-design="werkbank"] .tag-chip.tag-pos:has(input:checked) { background: var(--wb-brass); color: var(--wb-on-fill); box-shadow: none; }
html[data-design="werkbank"] .tag-chip.tag-neg:has(input:checked) { background: var(--wb-copper); color: var(--wb-on-fill); box-shadow: none; }
html[data-design="werkbank"] .rating-notiz,
html[data-design="werkbank"] .filter-bar select,
html[data-design="werkbank"] .filter-bar input,
html[data-design="werkbank"] .idee-form input,
html[data-design="werkbank"] .idee-form select,
html[data-design="werkbank"] .idee-form textarea,
html[data-design="werkbank"] .add-form input,
html[data-design="werkbank"] .add-form select,
html[data-design="werkbank"] .profile-form input,
html[data-design="werkbank"] .profile-form textarea,
html[data-design="werkbank"] .profile-form select {
  background: var(--wb-tile-2);
  border: 0;
  box-shadow: var(--wb-well-inset);
  border-radius: var(--wb-r-tile);
  color: var(--wb-text);
}
html[data-design="werkbank"] .rating-notiz:focus,
html[data-design="werkbank"] .filter-bar select:focus,
html[data-design="werkbank"] .filter-bar input:focus,
html[data-design="werkbank"] .idee-form input:focus,
html[data-design="werkbank"] .add-form input:focus,
html[data-design="werkbank"] .profile-form input:focus,
html[data-design="werkbank"] .profile-form textarea:focus {
  outline: 2px solid var(--wb-focus); outline-offset: 1px;
}
html[data-design="werkbank"] .filter-bar,
html[data-design="werkbank"] .legend,
html[data-design="werkbank"] .idee-dialog,
html[data-design="werkbank"] .voice-box,
html[data-design="werkbank"] .besuch-banner,
html[data-design="werkbank"] .chan-list li,
html[data-design="werkbank"] .wissen-liste li {
  background: var(--wb-tile);
  border: 0;
  border-radius: var(--wb-r-tile);
  box-shadow: inset 0 1px 0 var(--wb-edge), var(--wb-shadow-tile);
}
html[data-design="werkbank"] .idee-dialog::backdrop { background: color-mix(in srgb, var(--wb-page) 55%, transparent); }

/* --- 11. Reiter --- */
html[data-design="werkbank"] .tabs { border-bottom-color: var(--wb-line); }
html[data-design="werkbank"] .tab { color: var(--wb-muted); font-family: var(--wb-font-text); }
html[data-design="werkbank"] .tab:hover { color: var(--wb-text); }
html[data-design="werkbank"] .tab.active { color: var(--wb-brass); border-bottom-color: var(--wb-brass-fill); }
html[data-design="werkbank"] .tab-error { color: var(--wb-copper); }
html[data-design="werkbank"] .tab-error.active { color: var(--wb-copper); border-bottom-color: var(--wb-copper); }

/* --- 12. Kleinkram: Fokus, Trenner, Chips --- */
html[data-design="werkbank"] :focus-visible { outline: 2px solid var(--wb-focus); outline-offset: 2px; }
html[data-design="werkbank"] .sep { border-top-color: var(--wb-line); }
html[data-design="werkbank"] .fuss { border-top-color: var(--wb-line); }
html[data-design="werkbank"] .chip,
html[data-design="werkbank"] .ht-chip { background: var(--wb-well); box-shadow: var(--wb-well-inset); border: 0; color: var(--wb-brass); }
html[data-design="werkbank"] .pp-pill { background: var(--wb-well); box-shadow: var(--wb-well-inset); border: 0; color: var(--wb-muted); }
html[data-design="werkbank"] .pp-pill.active { background: var(--wb-brass); color: var(--wb-on-fill); box-shadow: none; }

/* --- 13. Nachträge aus der Verifikation (08.09.): Stellen, die style.css/klipwerk.css
   unbedingt auf --hf-primary (Navy-Blau) setzen und die durch den :not([data-design=
   "werkbank"])-Ausschluss in klipwerk.css nicht mehr automatisch neutralisiert werden.
   Zwei Gruppen: (a) im Sidebar-Fuß, obwohl die Seitenleiste sonst unberührt bleibt —
   ein aus der Fläche stechendes Blau ist ein Fund, keine Gestaltungsentscheidung; nur
   Farbe, keine Struktur/kein Layout angefasst. (b) direkt in der Karten-Detailansicht
   (Kommentar-Ideen, Posten-Hashtags), die eigentlich Teil dieser Umsetzung ist. */
html[data-design="werkbank"] .btn-scan { background: var(--wb-brass); color: var(--wb-on-fill); }
html[data-design="werkbank"] .btn-scan:hover { background: var(--wb-copper); }
html[data-design="werkbank"] .sidebar nav a.active { background: var(--wb-well); color: var(--wb-text); }
html[data-design="werkbank"] .besuch-banner a { color: var(--wb-brass); }
html[data-design="werkbank"] .pillar b { color: var(--wb-brass); }
html[data-design="werkbank"] .posting-paket .hashtags { color: var(--wb-brass); }
html[data-design="werkbank"] .stimmung-fill { background: var(--wb-brass-fill); }
html[data-design="werkbank"] .legend-group h4 { color: var(--wb-brass); }
html[data-design="werkbank"] .chan-list a { color: var(--wb-brass); }

@media (prefers-reduced-motion: reduce) {
  html[data-design="werkbank"] * { transition: none !important; animation: none !important; }
}

/* --- 14. Dreh-Liste (B1): der gewählte Machart-Chip ---------------------------
   Diese Datei färbt .chip selbst ein (Abschnitt 12) und gewinnt gegen die Grundregel
   in style.css — ohne diese Zeile sähe der gewählte Chip aus wie ein ungewählter.
   Gleiche Bauform wie .pp-pill.active darüber. */
html[data-design="werkbank"] .dreh-chips .chip-an { background: var(--wb-brass); color: var(--wb-on-fill); box-shadow: none; }
/* Dieselbe Ausnahme für die N1-Kennzeichnung: ohne sie färbt Abschnitt 12 sie wie
   jeden anderen Chip ein, und „Unbestätigt“ wäre von einer gewöhnlichen Beschriftung
   nicht zu unterscheiden. */
html[data-design="werkbank"] .chip-unbestaetigt { background: var(--wb-brass); color: var(--wb-on-fill); box-shadow: none; }
html[data-design="werkbank"] .dreh-zeile { background: var(--wb-tile); border-color: var(--wb-line); box-shadow: var(--wb-shadow-tile); }
html[data-design="werkbank"] .dreh-zeile-flach { background: transparent; box-shadow: none; }
html[data-design="werkbank"] .dreh-zeile-text b { color: var(--wb-text); }
html[data-design="werkbank"] .gelaufen-antwort { background: var(--wb-tile); border-color: var(--wb-line); }
html[data-design="werkbank"] .gelaufen-antwort:has(input:checked) { border-color: var(--wb-brass); background: var(--wb-well); }

/* --- 15. B6: Video einwerfen und In Arbeit ------------------------------------
   Die Bausteine des Entwurfs 1:1 in die --wb-Tokens übersetzt: Kasten (`.panel`) =
   Fläche mit Panel-Schatten, Kachel (`.tile`) = Tile, Feld und Ablage = eingelassene
   Mulde (well), Umschalter = Mulde mit gehobenem gewählten Segment. Der erkannte Chip
   ist gefüllt wie der gewählte Machart-Chip der Dreh-Liste (Abschnitt 14) — massiv
   statt Verlauf, damit seine Fläche messbar bleibt. */
html[data-design="werkbank"] .einwurf-wahl,
html[data-design="werkbank"] .einwurf-segmente {
  background: var(--wb-well); border: 0; box-shadow: var(--wb-well-inset);
}
html[data-design="werkbank"] .einwurf-wahl label,
html[data-design="werkbank"] .einwurf-segmente label { color: var(--wb-muted); font-family: var(--wb-font-text); }
/* K15-S G6 (WCAG 1.4.11): das gewählte Segment wie der aktive Reiter (`.ai-reiter .tab.active`, Messing
   gegen Mulde) — die frühere Kachel-Fläche lag bei 1,35:1 gegen die Mulde. Jedes Segment mind. 44 × 44 px,
   der Fokusring nutzt --wb-focus. Betrifft jede Seite mit dem Baustein: Einwurf, Profil, Einrichtung. */
html[data-design="werkbank"] .einwurf-wahl input:checked + label,
html[data-design="werkbank"] .einwurf-segmente input:checked + label {
  background: var(--wb-brass); color: var(--wb-on-fill);
  box-shadow: inset 0 1px 0 var(--wb-on-brass-edge);
}
html[data-design="werkbank"] .einwurf-wahl label,
html[data-design="werkbank"] .einwurf-segmente label { min-width: 44px; justify-content: center; }
html[data-design="werkbank"] .einwurf-wahl input:focus-visible + label,
html[data-design="werkbank"] .einwurf-segmente input:focus-visible + label {
  outline: 2px solid var(--wb-focus); outline-offset: 2px;
}
/* K15-S G3: Stapelgröße und Tarif im Profil (Entscheidungsseite Frage 1, Web · Profil). G4: die Stapelfrage
   der Einrichtung trägt keine eigene Schrift, nur den Abstand zum Schalter. */
html[data-design="werkbank"] .stapel-panel {
  margin: 0; padding: 0 var(--wb-s-4); border-radius: var(--wb-r-panel);
  background: var(--wb-surface); box-shadow: inset 0 1px 0 var(--wb-edge), var(--wb-shadow-panel);
}
html[data-design="werkbank"] .stapel-zeile {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--wb-s-3); padding: var(--wb-s-4) 0;
}
html[data-design="werkbank"] .stapel-zeile + .stapel-zeile { border-top: 1px solid var(--wb-line); }
html[data-design="werkbank"] .stapel-zeile-text { display: flex; flex-direction: column; gap: var(--wb-s-1); flex: 1 1 16rem; min-width: 0; }
html[data-design="werkbank"] .stapel-zeile-text b { font-family: var(--wb-font-text); font-size: 15px; font-weight: 600; color: var(--wb-text); }
html[data-design="werkbank"] .stapel-zeile-text small { font-size: 13px; line-height: 1.4; color: var(--wb-muted); }
html[data-design="werkbank"] .stapel-wert { font-family: var(--wb-font-mono); font-size: 13px; color: var(--wb-brass); white-space: nowrap; }
/* T397 B2: der Beleg der Karte (Entscheidungsseite Frage 4) — eine Mulde wie dort, auf Stapel-Karte und im
   Drehbuch (`_beleg.html`); im Drehbuch steht sie in einem eigenen Kasten. */
html[data-design="werkbank"] .beleg {
  margin: 0 0 var(--wb-s-3); padding: var(--wb-s-2) var(--wb-s-3); border-radius: var(--wb-r-tile);
  background: var(--wb-well); box-shadow: var(--wb-well-inset); text-align: left;
}
html[data-design="werkbank"] .beleg-typ {
  font-family: var(--wb-font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--wb-muted);
}
/* K16-B A5: im Drehbuch ist das Etikett die Überschrift des Kastens; es steht im Fluss wie das Etikett der Karte. */
html[data-design="werkbank"] h2.beleg-typ { display: inline; margin: 0; font-weight: inherit; }
html[data-design="werkbank"] .beleg-titel {
  margin: var(--wb-s-1) 0 0; font-family: var(--wb-font-text); font-size: 15px; font-weight: 600;
  line-height: 1.35; color: var(--wb-text); overflow-wrap: anywhere;
}
html[data-design="werkbank"] .beleg-meta { margin: var(--wb-s-1) 0 0; font-size: 13px; line-height: 1.4; color: var(--wb-muted); overflow-wrap: anywhere; }
html[data-design="werkbank"] .beleg-meta a { color: var(--wb-brass); }
/* Der Prüfstand in `--wb-muted`, nicht `--wb-shade` wie im Entwurf: im hellen Modus erreicht Schiefer auf der Mulde nur
   4,4:1, zu wenig für 11 px (probe_k16b_b2_anzeige, Teil F). */
html[data-design="werkbank"] .beleg-stand {
  margin: var(--wb-s-1) 0 0; font-family: var(--wb-font-mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--wb-muted);
}
html[data-design="werkbank"] .beleg-kasten .beleg { margin: 0; }
/* Am Handy rollt der Browser jeden Halt der Profilseite über die feste Reiterleiste: Abstand 16 + Leiste 68 + Luft 8,
   dasselbe Maß wie die Ablage in rahmen.css. Seitenweit, weil B vor P live geht; P übernimmt den Abstand. */
@media (max-width: 699px) {
  html[data-design="werkbank"]:has(.profil-seite) {
    scroll-padding-bottom: calc(var(--wb-s-4) + 68px + var(--wb-s-2) + env(safe-area-inset-bottom, 0px));
  }
}
html[data-design="werkbank"] .einr-frage { display: block; margin-bottom: var(--wb-s-2); }
/* K15-S B7: was die Tastatur gewählt, aber noch nicht gespeichert hat, sagt die Zeile unter der Frage. Leer nimmt
   sie keinen Platz, bleibt aber im Barrierefreiheitsbaum, damit die Ansage kommt. */
html[data-design="werkbank"] .stapel-zeile-text .stapel-offen { color: var(--wb-brass); }
html[data-design="werkbank"] .stapel-offen:empty {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
/* T404 (K17-M): die Meldungen des Bausteins `_meldungen.html` als Notiz in der Mulde mit Messingkante (Udo, Richtung A);
   eine Absage (Kategorie `fehler`) mit Kupferkante auf der Seitenfläche und dem Etikett „Achtung“. Die Gruppe oben behält
   die Lage aus `style.css` (`.flash`); am Landepunkt steht sie als eigene volle Zeile im Behälter. */
html[data-design="werkbank"] .flash-zeile {
  margin: 0; padding: var(--wb-s-3) var(--wb-s-4); border: 0; border-radius: var(--wb-r-tile);
  background: var(--wb-well); box-shadow: var(--wb-well-inset), inset 3px 0 0 var(--wb-brass-fill);
  color: var(--wb-text); font-family: var(--wb-font-text); font-size: 15px; font-weight: 400; line-height: 1.45;
  text-align: left; overflow-wrap: anywhere;
}
html[data-design="werkbank"] .flash-zeile + .flash-zeile { margin-top: var(--wb-s-2); }
html[data-design="werkbank"] .flash-zeile.flash-achtung {
  background: var(--wb-page); box-shadow: var(--wb-well-inset), inset 3px 0 0 var(--wb-copper);
}
html[data-design="werkbank"] .flash-etikett {
  display: block; margin: 0 0 2px; font-family: var(--wb-font-mono); font-size: 11px; font-weight: 400;
  letter-spacing: .08em; text-transform: uppercase; color: var(--wb-copper);
}
/* Am Landepunkt eine eigene volle Zeile im Behälter, gleich ob Block, Flex (.dreh-zeile) oder Raster. */
html[data-design="werkbank"] .flash.flash-am-ziel {
  flex: none; width: 100%; max-width: none; grid-column: 1 / -1; margin: 0 0 var(--wb-s-3); padding: 0; text-align: left;
}
/* Die Zeile in „Alle Ideen“ hat keinen Innenrand: die Notiz rückt ein wie der Zeilenkopf. */
html[data-design="werkbank"] .ai-seite .card.ai-zeile > .flash.flash-am-ziel { width: auto; margin: var(--wb-s-3) var(--wb-s-3) 0; }
/* Reserve-Zeile: „Zurückholen“ liegt absolut oben rechts in der Zeile (alle-ideen.css); die Notiz lässt ihm rechts den Platz
   wie der Zeilenkopf, sonst deckt der Knopf sie zu (gemessen bei 1440 px nach „Neu erzeugen“ aus der Reserve). */
html[data-design="werkbank"] .ai-seite .card.ai-zeile.ai-reserve > .flash.flash-am-ziel {
  margin-right: calc(var(--ai-holen) + 2 * var(--wb-s-3));
}
html[data-design="werkbank"] .fokus-wrap > .flash { max-width: none; margin: 0 0 var(--wb-s-3); padding: 0; }
@media (max-width: 699px) {
  /* Stapel: der Zurück-Pfeil folgt der gemessenen Lage des Titelbilds (`_meldungen.js`), solange eine Meldung in der
     Karte steht und das Bild nach unten schiebt. */
  html[data-design="werkbank"] .ik-bahn:has(.stapel-karte > .flash) .ik-pfeil-form { margin-top: var(--vs-pfeil-oben); }
}
html[data-design="werkbank"] #stapel { scroll-margin-top: var(--wb-s-4); }
html[data-design="werkbank"] .einwurf-panel {
  background: var(--wb-surface); border: 0; border-radius: var(--wb-r-panel);
  box-shadow: inset 0 1px 0 var(--wb-edge), var(--wb-shadow-panel);
}
html[data-design="werkbank"] .einwurf-kopf,
html[data-design="werkbank"] .einwurf-etikett { font-family: var(--wb-font-mono); font-weight: 400; color: var(--wb-muted); }
html[data-design="werkbank"] .einwurf-kachel {
  background: var(--wb-tile); border-radius: var(--wb-r-tile); padding: var(--wb-s-4);
  box-shadow: inset 0 1px 0 var(--wb-edge), var(--wb-shadow-tile);
}
html[data-design="werkbank"] .einwurf-feld input,
html[data-design="werkbank"] .einwurf-feld textarea,
html[data-design="werkbank"] .regeln-text {
  background: var(--wb-well); border: 0; box-shadow: var(--wb-well-inset);
  border-radius: var(--wb-r-tile); color: var(--wb-text); font-family: var(--wb-font-text);
}
/* Der Entwurf setzt Platzhalter in --faint; das trägt auf der Mulde keine 4,5:1. */
html[data-design="werkbank"] .einwurf-feld input::placeholder,
html[data-design="werkbank"] .einwurf-feld textarea::placeholder,
html[data-design="werkbank"] .regeln-text::placeholder { color: var(--wb-muted); }
html[data-design="werkbank"] .einwurf-marken .chip {
  background: var(--wb-well); color: var(--wb-text); box-shadow: var(--wb-well-inset);
  border: 0; font-family: var(--wb-font-text);
}
html[data-design="werkbank"] .einwurf-marken .chip.chip-an {
  background: var(--wb-brass); color: var(--wb-on-fill); box-shadow: none;
}
html[data-design="werkbank"] .einwurf-hinweis,
html[data-design="werkbank"] .einwurf-ablage small { color: var(--wb-muted); }
html[data-design="werkbank"] .einwurf-ablage {
  background: var(--wb-well); box-shadow: var(--wb-well-inset);
  border-color: var(--wb-faint); border-radius: var(--wb-r-tile); color: var(--wb-text);
}
html[data-design="werkbank"] .einwurf-ablage.ueber { border-color: var(--wb-brass); }
/* T209: die laufende Sprachaufnahme — Kupfer, wie jede Warnfarbe der Werkstatt. */
html[data-design="werkbank"] .einwurf-ablage[aria-pressed="true"] { border-color: var(--wb-copper); }
html[data-design="werkbank"] .einwurf-ablage svg { color: var(--wb-faint); }
html[data-design="werkbank"] .einwurf-dateiname {
  background: var(--wb-well); color: var(--wb-text); box-shadow: var(--wb-well-inset);
  border: 0; font-family: var(--wb-font-text);
}
html[data-design="werkbank"] .einwurf-fuss { background: var(--wb-bg); box-shadow: 0 -14px 20px var(--wb-bg); }
html[data-design="werkbank"] .ablage {
  background: var(--wb-surface); border: 0; border-radius: var(--wb-r-panel);
  box-shadow: inset 0 1px 0 var(--wb-edge), var(--wb-shadow-dock); padding: var(--wb-s-2);
}
html[data-design="werkbank"] .ablage-zeile + .ablage-zeile { border-top-color: var(--wb-line); }
html[data-design="werkbank"] .ablage-text b { color: var(--wb-text); }
html[data-design="werkbank"] .ablage-text small { color: var(--wb-muted); }
html[data-design="werkbank"] .ablage-marke {
  background: var(--wb-well); color: var(--wb-muted); box-shadow: var(--wb-well-inset);
  border: 0; font-family: var(--wb-font-text);
}

/* --- 16. Unbestätigt: ungeprüfter Modelltext einer Karte (T282, T268 a; K8 Paket F) ---
   Markup: _unbestaetigt.html, nur Spannen — erst hier werden sie Blöcke. Der Block steht
   hinter dem Titel oder der Warum-Zeile, zu der er gehört, getrennt von ihr und kleiner;
   vor jedem Eintrag der Chip aus Abschnitt 14 (Messing gefüllt, dunkle Tinte), darunter
   die Zeile, wer ihn geschrieben hat. Keine Anführungszeichen, keine Kursive: nichts
   daran darf wie ein Zitat aussehen (Jan #527553). Den Kontrast misst
   scripts/probe_f_unbestaetigt.py (Teil K) auf jeder Fläche, auf der sie den Block rendert. */
html[data-design="werkbank"] .unbestaetigt { display: block; margin: var(--wb-s-2) 0; text-align: left; }
html[data-design="werkbank"] .unbestaetigt-eintrag {
  display: flex; align-items: baseline; gap: var(--wb-s-2);
  font-family: var(--wb-font-text); font-size: 14px; font-style: normal; line-height: 1.45; color: var(--wb-text);
}
html[data-design="werkbank"] .unbestaetigt-eintrag + .unbestaetigt-eintrag { margin-top: 6px; }
html[data-design="werkbank"] .unbestaetigt-eintrag > .chip-unbestaetigt { flex: none; white-space: nowrap; }
html[data-design="werkbank"] .unbestaetigt-satz { min-width: 0; overflow-wrap: anywhere; }
html[data-design="werkbank"] .unbestaetigt-art { color: var(--wb-muted); }
html[data-design="werkbank"] .unbestaetigt-fuss {
  display: block; margin-top: var(--wb-s-1); font-family: var(--wb-font-text); font-size: 13px;
  font-style: normal; line-height: 1.4; color: var(--wb-muted);
}
/* In „Alle Ideen“ steht der Block zum Titel unter dem Zeilenkopf über die ganze Breite der Zeile, nicht
   in ihm: die Beschriftung eines Aufklappers trägt nur seinen Namen (T320). Die Vorlage setzt ihn
   zweimal, im Aufklapper direkt nach dem `summary` und hinter dem Aufklapper; sichtbar ist zugeklappt
   der zweite, aufgeklappt der erste. Der Einzug folgt dem Zeilenkopf (alle-ideen.css). */
html[data-design="werkbank"] .ai-seite .ai-auf > .unbestaetigt,
html[data-design="werkbank"] .ai-seite .ai-zeile > .unbestaetigt { margin: 0; padding: 0 var(--wb-s-3) var(--wb-s-3); }
html[data-design="werkbank"] .ai-seite .ai-auf[open] + .unbestaetigt { display: none; }
@media (max-width: 699px) {
  html[data-design="werkbank"] .ai-seite .ai-auf > .unbestaetigt,
  html[data-design="werkbank"] .ai-seite .ai-zeile > .unbestaetigt { padding: 0 10px 10px; }
}
/* Auf /zahlen steht der Block in der Spalte „Diese Idee“ (T317), am Handy rund 150 px breit: dort bricht
   der Satz unter den Chip um, statt neben ihm Wort für Wort. Nur am Handy: am Rechner wechselte der Satz
   sonst je nach Länge zwischen „neben“ und „unter“ dem Chip. */
@media (max-width: 699px) {
  html[data-design="werkbank"] .zuordnung-seite .unbestaetigt-eintrag { flex-wrap: wrap; row-gap: var(--wb-s-1); }
}
/* Unter der Warum-Zeile einer Zeile in „Alle Ideen“ steht der Text im leisen Ton dieser Zeile
   (`.ai-warum`): der ungeprüfte Zusatz soll nicht heller sein als der Satz, zu dem er gehört. */
html[data-design="werkbank"] .ai-seite .ai-mehr > .unbestaetigt .unbestaetigt-eintrag { color: var(--wb-muted); }

/* --- K16-P (T396): „Deine Regeln“ im Profil ---------------------------------------
   Baut auf Stapel-Panel und Segmenten aus K15-S auf; neu sind nur Raster und Haken. Die Textfelder haben die
   Form der Einwurf-Felder (`.regeln-text` steht in deren Regeln hier und in style.css, B5).
   Der Haken hat 24 px und 10 px Rand: 44 × 44 px zum Antippen. Die Zwischenüberschriften stehen auf der
   Etiketten-Stufe der Werkbank (wie `.ik-etikett` und `.einwurf-etikett`, A5). */
html[data-design="werkbank"] .regeln-raster { display: grid; gap: var(--wb-s-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  html[data-design="werkbank"] .regeln-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
html[data-design="werkbank"] .regeln-intro { margin: 0 0 var(--wb-s-3); }
html[data-design="werkbank"] .regeln-typ {
  margin: var(--wb-s-4) 0 var(--wb-s-2); font-family: var(--wb-font-mono); font-size: 11px; font-weight: 400;
  letter-spacing: .08em; text-transform: uppercase; color: var(--wb-muted);
}
/* A2: jede Regel trägt die Trennlinie, auch nach einem Feld oder einer Zwischenüberschrift; die Beschriftung eines
   Felds steht an ihrem Feld (Abstand --wb-s-1) statt an der Zeile davor (deren Innenabstand --wb-s-4). */
html[data-design="werkbank"] .regeln-panel .regeln-zeile,
html[data-design="werkbank"] .regeln-panel .regeln-eigen { border-top: 1px solid var(--wb-line); }
html[data-design="werkbank"] .regeln-panel .regeln-eigen { padding-top: var(--wb-s-4); }
html[data-design="werkbank"] .regeln-feld > .sub { margin: 0; }
html[data-design="werkbank"] .regeln-zeile label.stapel-zeile-text { cursor: pointer; }
html[data-design="werkbank"] .regeln-haken { width: 24px; height: 24px; margin: 10px; flex: none; accent-color: var(--wb-brass); }
html[data-design="werkbank"] .regeln-haken:focus-visible { outline: 2px solid var(--wb-focus); outline-offset: 2px; }
html[data-design="werkbank"] .regeln-feld { display: flex; flex-direction: column; gap: var(--wb-s-1); padding: 0 0 var(--wb-s-4); }
html[data-design="werkbank"] .regeln-panel .arten-check input { accent-color: var(--wb-brass); }
/* A1: die Video-Arten-Karten in der Form der Antwortkarten (`.gelaufen-antwort`, Abschnitt 14). */
html[data-design="werkbank"] .regeln-panel .arten-grid { gap: var(--wb-s-2); margin-top: 0; }
html[data-design="werkbank"] .regeln-panel .arten-check {
  gap: var(--wb-s-2); padding: var(--wb-s-3); border-color: var(--wb-line); border-radius: var(--wb-r-tile);
  background: var(--wb-tile);
}
html[data-design="werkbank"] .regeln-panel .arten-check:has(input:checked) { border-color: var(--wb-brass); background: var(--wb-well); }
html[data-design="werkbank"] .regeln-panel .einwurf-segmente { flex-wrap: wrap; }
/* A3: eine Auswahl, deren Stufen bei 390 oder 1440 px nicht in eine Zeile passen, steht als Liste statt als
   zweizeilige Pille (welche, legt die Vorlage fest: `liste=True`). */
html[data-design="werkbank"] .regeln-panel .regeln-liste {
  flex: 1 1 100%; flex-direction: column; align-items: stretch; border-radius: var(--wb-r-tile);
}
html[data-design="werkbank"] .regeln-panel .regeln-liste label {
  justify-content: flex-start; border-radius: var(--wb-r-tile); white-space: normal;
}
/* A6: das unsichtbare Feld einer Auswahl reicht über die Höhe der ganzen Gruppe; so rollt der Browser bei Tab und
   Pfeilwahl die Gruppe in den Blick, nicht einen Punkt an ihrem Rand. Jeder Halt bringt Luft für seinen Fokusrahmen
   mit; über die Reiterleiste rollt ihn am Handy der seitenweite Abstand der Profilseite (`:has(.profil-seite)`). */
html[data-design="werkbank"] .regeln-panel .einwurf-segmente { position: relative; }
html[data-design="werkbank"] .regeln-panel .einwurf-segmente input { top: 0; bottom: 0; left: 0; height: auto; }
html[data-design="werkbank"] :is(#regeln, #regelnForm) :is(input, button, textarea) { scroll-margin-block: var(--wb-s-2); }
html[data-design="werkbank"] .regeln-fuss { grid-column: 1 / -1; }
/* K16-E (T398): derselbe Baustein auf dem Bildschirm „Deine Regeln“ der Einrichtung — dort ist die Spalte
   höchstens 720 px breit (`.fokus-wrap`), die beiden Kästen stehen deshalb auch am Rechner untereinander. Der
   Fokus-Rahmen der Einrichtung nimmt am Handy mehr Rand als die Profilseite; damit der Haken trotzdem wie dort rechts
   neben seinem Text steht, bricht seine Zeile nicht um (A3; der Abstand zum Fensterrand steht oben bei `#regelnForm`). */
html[data-design="werkbank"] .regeln-raster.regeln-einspaltig { grid-template-columns: minmax(0, 1fr); }
html[data-design="werkbank"] .regeln-einspaltig .regeln-zeile:has(> .regeln-haken) { flex-wrap: nowrap; }
/* F2 (T398): „Regeln vorausfüllen“ und „Vorschläge eintragen“ springen in der Einrichtung auf `#regelnForm`, dessen
   erste Zeile ihre Meldung ist (Baustein `_meldungen.html`, T404); Luft über ihr wie am Landepunkt `#stapel`. */
html[data-design="werkbank"] #regelnForm { scroll-margin-top: var(--wb-s-4); }
/* Der aufklappbare Abfrage-Text (E3) steht unter „Weiter“ und „Überspringen“, mit Abstand zu ihnen. */
html[data-design="werkbank"] .einr-fuss + details.regeln-abfrage { margin-top: var(--wb-s-4); }
/* K16-E2b (T398): „Aus deinen Videos“ steht dazwischen, mit demselben Abstand; der Abfrage-Text bleibt darunter abgesetzt. */
html[data-design="werkbank"] .anhoeren-kasten > .einr-befund,
html[data-design="werkbank"] .anhoeren-kasten + details.regeln-abfrage { margin-top: var(--wb-s-4); }
/* A2 (T398): der Abfrage-Kasten ist auf /profil und in der Einrichtung ein Aufklapper der Werkbank (Abschnitt 7);
   innen die Abstandsstufen der Werkbank, die Knöpfe in eigener Breite wie „Regeln speichern“. */
html[data-design="werkbank"] details.regeln-abfrage { padding: var(--wb-s-3) var(--wb-s-4); }
html[data-design="werkbank"] details.regeln-abfrage[open] > summary { margin-bottom: var(--wb-s-3); }
html[data-design="werkbank"] details.regeln-abfrage > p { margin: 0 0 var(--wb-s-3); }
html[data-design="werkbank"] .regeln-abfrage-fuss {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--wb-s-3); margin: 0 0 var(--wb-s-3);
}
html[data-design="werkbank"] .regeln-abfrage-fuss:last-child { margin-bottom: 0; }
/* K16-P (T396 P8): die drei Hooks der empfohlenen Version auf Stapel-Karte und Drehbuch — Mulde wie die
   Segmente, Liste in Textfarbe; verborgen, solange die Karte eine andere Version zeigt. */
html[data-design="werkbank"] .vs-hooks {
  margin: var(--wb-s-2) 0 var(--wb-s-3); padding: var(--wb-s-3) var(--wb-s-4);
  border-radius: var(--wb-r-tile); background: var(--wb-well); box-shadow: var(--wb-well-inset);
}
html[data-design="werkbank"] .vs-hooks[hidden] { display: none; }
html[data-design="werkbank"] .vs-hooks-titel {
  font-family: var(--wb-font-mono); font-size: 11px; font-weight: 400; letter-spacing: .08em;
  text-transform: uppercase; color: var(--wb-muted);
}
html[data-design="werkbank"] .vs-hooks-liste {
  display: grid; gap: var(--wb-s-2); margin: var(--wb-s-2) 0 0; padding-left: 1.4em;
  font-size: 15px; line-height: 1.35; color: var(--wb-text);
}