/* splicelog-blog.css
 * Sprint-21 (2026-05-22): Extrahiert aus public/blog/prompt-engineering-guide/index.html
 * Inline-Style-Block (66,985 chars) → externe CSS für Browser-Caching + HTTP/2-Multiplexing.
 * SSOT für ALLE Blog-Pages (Pillar + 4 DE-Cluster + 4 EN-Cluster + Overview-falls-blog-look).
 * Build-Pipeline: Generator (tools/build-blog-pages.py) braucht extract_pillar_style nicht mehr.
 * Update-Pattern: bei Style-Änderung hier ändern, alle Blog-Pages erben via <link rel=stylesheet>.
 */


    /* ──────────────────────────────────────────────
       T-01/T-02 · DESIGN TOKENS
       ────────────────────────────────────────────── */
    :root {
      /* Fonts — System-Stack, native on every OS (T-01) */
      --font-sans: -apple-system, BlinkMacSystemFont,
                   'Segoe UI Variable', 'Segoe UI',
                   system-ui, sans-serif;
      --font-mono: ui-monospace, 'SF Mono',
                   'Cascadia Mono', Consolas,
                   Menlo, monospace;

      /* Inks (text) — neutral cool grays, no warm tint */
      --ink:           #0a0a0a;
      --ink-strong:    #000000;
      --ink-mid:       #525252;
      --ink-faint:     #767676;
      --ink-disabled:  #d4d4d4;

      /* Papers (backgrounds) — clean near-white (Villa Kujoyama palette) */
      --paper:         #fafafa;
      --paper-strong:  #f0f0f0;
      --paper-soft:    #fcfcfc;
      --surface:       #ffffff;

      /* Borders — very subtle, institutional */
      --border:        #e5e5e5;
      --border-strong: #d4d4d4;
      --border-soft:   #f0f0f0;

      /* "Accent" — pure ink, no hue. Curatorial grayscale. */
      --accent:        #0a0a0a;
      --accent-strong: #000000;
      --accent-soft:   #ebebeb;

      /* Functional states */
      --success:       #16a34a;
      --warning:       #d97706;

      /* Elevation — modern lift, almost-zero blur */
      --shadow-low:    0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.03);
      --shadow-mid:    0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);

      /* Spacing — 8px grid with editorial jumps */
      --space-1:  4px;
      --space-2:  8px;
      --space-3:  12px;
      --space-4:  16px;
      --space-5:  24px;
      --space-6:  32px;
      --space-7:  48px;
      --space-8:  64px;
      --space-9:  96px;
      --space-10: 128px;

      /* TASK-1 · Didactic Slot Tokens (Phase 6 didactic-slots, T-2.1 reduced 5→3 classes)
         Pastel palette — low saturation, ≥3:1 contrast on --paper #fafafa.
         Each class signals semantic role of a hardcoded value in a template:
           fix     = objective convention (SEO, math) — not adjustable
           range   = empirically-tuned range or enumerated pool — context-adjustable
           verif   = must be verified before publishing (stats, names)
         Print + mobile overrides at the bottom of this <style> block. */
      --slot-fix:        #7a95b5;
      --slot-range:      #88b79a;
      --slot-verif:      #c88585;
      --slot-fix-tint:    #e6ecf3;
      --slot-range-tint:  #e2efe7;
      --slot-verif-tint:  #f1dada;
      /* Print symbols — monochrome marker when colour is unavailable */
      --slot-symbol-fix:     "F";
      --slot-symbol-range:   "R";
      --slot-symbol-verif:   "V";
    }

    /* ──────────────────────────────────────────────
       T-02 · RESET
       ────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; }
    /* A11y: anchor target offset against mobile sticky topbar (61px + 16px Atemraum).
       Desktop ≥768px hat nur fixed Lang-Switcher in oberer rechter Ecke — kein Offset nötig. */
    html { scroll-padding-top: 77px; }
    @media (min-width: 768px) { html { scroll-padding-top: 0; } }
    html, body, h1, h2, h3, h4, h5, h6,
    p, ul, ol, li, figure, blockquote, pre, dl, dd {
      margin: 0;
      padding: 0;
    }
    ul, ol { list-style: none; }
    /* Opt-in numbered ordered list — restores decimal numbering with hanging indent for content lists. */
    ol.numbered {
      list-style: decimal outside;
      padding-left: 1.75em;
      margin: 8px 0 16px;
    }
    ol.numbered > li { padding-left: 4px; margin-bottom: 12px; }
    ol.numbered > li::marker { color: var(--ink-mid); font-weight: 500; }
    img, svg, video { display: block; max-width: 100%; }
    button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
    a { color: inherit; }

    /* ──────────────────────────────────────────────
       T-02 · BODY + TYPOGRAPHY DEFAULTS
       ────────────────────────────────────────────── */
    body {
      background: var(--paper);
      color: var(--ink);
      font-family: var(--font-sans);
      /* Sprint-3j (2026-05-20): font-size 15.5 → 16 (WCAG-Floor),
         line-height 1.65 → 1.6 (Industry-Sweet-Spot + Cross-Page-Sync mit
         Landing). Quellen: Greadme/USWDS/W3C. */
      font-size: 16px;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
    }

    h1 { font-size: 44px; line-height: 1.05; font-weight: 500; letter-spacing: -0.02em; color: var(--ink-strong); }
    h2 { font-size: 28px; line-height: 1.15; font-weight: 500; letter-spacing: -0.01em; color: var(--ink-strong); }
    h3 { font-size: 20px; line-height: 1.3;  font-weight: 500; color: var(--ink-strong); }
    h4 { font-size: 16px; line-height: 1.3;  font-weight: 500; color: var(--ink-strong); }

    /* ──────────────────────────────────────────────
       Visual Calm Pass · weight-ladder + em-demotion + h4-rhythm
       Apple HIG + Dieter Rams + Glossary-Maxims M3/M5.
       Hierarchy via size + color, never via weight-scream.
       ────────────────────────────────────────────── */

    /* M3 — strong matches heading weight (500), never exceeds.
       Replaces redundant per-section rules (already 500 inside
       chapter-section, legal-block, example-context). */
    strong, b { font-weight: 500; color: var(--ink-strong); }

    /* M5 — italic prose-emphasis demoted to match the
       "secondary content recedes" pattern (ch-intro, prompt-note,
       gloss-def, when-to-use, tmpl-prereq already follow this). */
    .chapter-section em,
    .tmpl-section em { color: var(--ink-mid); }

    /* Apple HIG 4-baseline grid — explicit h4 rhythm.
       Existing usages have specific overrides (fs-eyebrow + h4,
       cp-panel h4); this is the defensive baseline. */
    h4 { margin-top: 24px; margin-bottom: 8px; }

    /* s1+++ · Principle-divider in Ch-2 (Seven Principles).
       Replicates the gloss-item rhythm (16/1/16) — line sits
       centered between principles, same visual as glossary.
       Principle-1 keeps the natural h3 margin (no top-border). */
    #ch-2 h3[id^="principle-"]:not(#principle-1) {
      border-top: 1px solid var(--border-soft);
      padding-top: 16px;
      margin-top: 16px;
    }

    /* s1++++++ · #wie-prompt-herangehen fs-block override.
       User-Wunsch: keine left-rail in dieser Section, dafür
       mehr Spacing zwischen den 3 Schritten. */
    #wie-prompt-herangehen .fs-block {
      border-left: 0;
      padding-left: 0;
    }
    #wie-prompt-herangehen .fs-block + .fs-block { margin-top: 48px; }

    /* ──────────────────────────────────────────────
       T-03 · LAYOUT (Sidebar · Main · Topbar · Backdrop)
       ────────────────────────────────────────────── */
    #sidebar {
      position: fixed;
      inset: 0 auto 0 0;
      width: 256px;
      z-index: 100;
      background: var(--paper);
      border-right: 1px solid var(--border);
      overflow-y: auto;
      scrollbar-width: none;          /* Firefox */
      -ms-overflow-style: none;       /* IE / legacy Edge */
      transform: translateX(0);
      transition: transform 250ms cubic-bezier(.4, 0, .2, 1);
    }
    /* Robust scrollbar-hide: display:none statt width:0 für sichere Suppression in Chrome/Safari/Edge. */
    #sidebar::-webkit-scrollbar { display: none; width: 0; height: 0; }
    /* Defensive: nested scrollables in sidebar (sidebar-nav, nav-group-items) erben kein
       overflow von #sidebar selbst, aber falls Browser-Glitch nested-scroll triggert
       (etwa bei sehr langem TOC), sind die hier auch suppressed. */
    #sidebar *::-webkit-scrollbar { display: none; width: 0; height: 0; }
    #sidebar * { scrollbar-width: none; -ms-overflow-style: none; }

    #main {
      margin-left: 256px;
      /* 2026-06-11: Cap auf 920px (vorher 1040px). Grund: bei 1040px wuchs die
         Content-Spalte mit 56vw stark mit, wodurch die Widgets (volle Spaltenbreite)
         immer breiter wurden als der lesbarkeits-gekappte Fliesstext (75ch ~640px) →
         wirkte wie eine zufaellige Luecke. 920px (inner ~760px) haelt die Widgets
         knapp ueber ihrer 2-Spalten-Grenze (>680px) und die Text/Widget-Proportion
         konsistent. Mehr Seiten-Whitespace auf breiten Screens ist Best-Practice
         (Bringhurst-Mass + konstrainter Text, web-recherchiert 2026-06-11). */
      max-width: clamp(720px, 56vw, 920px);
      padding: 64px 80px 96px;
    }

    .topbar {
      /* Desktop default: floats top-right, just enough for the switcher.
         Revised in T-B2 — was originally `display: none` on desktop, but the
         lang-switcher per Annex must be visible on all viewports. */
      display: flex;
      position: fixed;
      top: 0;
      right: 0;
      z-index: 50;
      padding: 16px 24px;
      align-items: center;
      gap: 12px;
    }

    #backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.4);
      opacity: 0;
      pointer-events: none;
      transition: opacity 250ms;
      z-index: 99;
    }
    #backdrop.visible {
      opacity: 1;
      pointer-events: auto;
    }

    /* Tablet 768–1023px */
    @media (max-width: 1023px) {
      #sidebar { width: 224px; }
      #main {
        margin-left: 224px;
        max-width: none;       /* let content fill remaining viewport on tablets */
        padding: 56px 56px 96px;
      }
    }

    /* ──────────────────────────────────────────────
       T-B1 · BILINGUAL VISIBILITY
       Content-Twins are emitted in both languages;
       CSS hides the non-active language.
       ────────────────────────────────────────────── */
    [data-lang="en"] .lang-de { display: none; }
    [data-lang="de"] .lang-en { display: none; }
    [data-lang="en"] [data-i18n-de] { display: none; }

    /* WCAG 2.4.1 — Skip-Link (z-index = Cookie-Banner 2147483646 + 1) */
    .splice-skip-link {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 2147483647;
      transform: translateY(-110%);
      transition: transform 120ms ease;
      background: var(--ink);
      color: var(--paper);
      padding: 12px 20px;
      font-size: 14px;
      font-weight: 500;
      text-decoration: none;
    }
    .splice-skip-link:focus-visible {
      transform: translateY(0);
      outline: 2px solid var(--ink-strong);
      outline-offset: 2px;
    }
    @media (prefers-reduced-motion: reduce) {
      .splice-skip-link { transition: none; }
    }

    /* WCAG: visually-hidden helper for ARIA-Live-Regions */
    .visually-hidden {
      position: absolute !important;
      width: 1px; height: 1px;
      padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0, 0, 0, 0);
      white-space: nowrap; border: 0;
    }
    [data-lang="de"] [data-i18n-en] { display: none; }

    /* ──────────────────────────────────────────────
       T-B2 · LANGUAGE SWITCHER — modern segmented control
       Container has the inset gray bg; active button "lifts" onto white surface.
       ────────────────────────────────────────────── */
    .lang-switcher {
      display: inline-flex;
      padding: 3px;
      background: var(--paper-strong);
      border-radius: 8px;
      gap: 0;
    }
    .lang-switcher button {
      font-family: var(--font-sans);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0;
      padding: 6px 14px;
      background: transparent;
      color: var(--ink-mid);
      border-radius: 5px;
      transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
    }
    .lang-switcher button:hover { color: var(--ink); }
    .lang-switcher button[aria-pressed="true"] {
      background: var(--surface);
      color: var(--ink-strong);
      box-shadow: var(--shadow-low);
    }
    .lang-switcher button:focus-visible {
      outline: 2px solid var(--ink-strong);
      outline-offset: 2px;
    }

    /* ──────────────────────────────────────────────
       T-04 · COMPONENTS
       ────────────────────────────────────────────── */

    /* Section dividers — chapter (Asterisks per R-4, with line backup) */
    .section-divider-asterisks {
      text-align: center;
      font-size: 16px;
      color: var(--ink-faint);
      letter-spacing: 0.5em;
      margin: 96px 0;
    }
    .section-divider-line {
      width: 60px;
      height: 1px;
      background: var(--border-strong);
      margin: 96px auto;
      border: 0;
    }
    /* Subsection thin line */
    .subsection-divider {
      width: 80px;
      height: 1px;
      background: var(--border);
      margin: 48px auto;
      border: 0;
    }

    /* Chapter + Template sections */
    .chapter-section { scroll-margin-top: 24px; }
    .chapter-section + .chapter-section { margin-top: 0; }
    .tmpl-section { scroll-margin-top: 24px; margin-bottom: 64px; }

    /* Template header */
    .tmpl-head { margin-bottom: 16px; }
    .tmpl-badge {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.06em;
      color: var(--ink-mid);
      padding: 2px 6px;
      border: 1px solid var(--border-strong);
      border-radius: 2px;
      margin-right: 8px;
      vertical-align: middle;
    }
    .tmpl-title { display: inline; }

    /* R-2 · Cross-Reference label under template title */
    .tmpl-prereq {
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--ink-faint);
      margin-top: 4px;
      letter-spacing: 0.01em;
    }
    .tmpl-prereq a {
      color: var(--accent);
      text-decoration: none;
    }
    .tmpl-prereq a:hover {
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    /* Post-prompt reader-note (sits OUTSIDE prompt-block, NOT part of copyable prompt) */
    .prompt-note {
      font-family: var(--font-sans);
      font-size: 13px;
      font-style: italic;
      line-height: 1.55;
      color: var(--ink-mid);
      margin: -8px 0 24px 12px;
      padding-left: 12px;
      border-left: 1px solid var(--border);
    }
    .prompt-note a { color: var(--accent); text-decoration: none; }
    .prompt-note a:hover { text-decoration: underline; text-underline-offset: 2px; }

    /* Collapsible optional-template block (e.g. S-2 prescriptive section list) */
    .optional-template {
      margin: 8px 0 24px;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--bg-soft, #fafafa);
    }
    .optional-template > summary {
      cursor: pointer;
      padding: 10px 14px;
      font-family: var(--font-sans);
      font-size: 13.5px;
      font-weight: 500;
      color: var(--ink-mid);
      list-style: none;
    }
    .optional-template > summary::-webkit-details-marker { display: none; }
    .optional-template > summary::before {
      content: "▸ ";
      display: inline-block;
      transition: transform 0.15s;
    }
    .optional-template[open] > summary::before { content: "▾ "; }
    .optional-template > summary:hover { color: var(--ink); }
    .optional-template > *:not(summary) { margin-left: 16px; margin-right: 16px; }
    .optional-template > *:last-child { margin-bottom: 16px; }

    /* In-chapter quick-link row (e.g. Ch8 jump-to anchors) */
    .ch-quicklinks {
      font-family: var(--font-mono);
      font-size: 12.5px;
      color: var(--ink-mid);
      margin: 4px 0 24px;
      letter-spacing: 0.01em;
    }
    .ch-quicklinks a {
      color: var(--accent);
      text-decoration: none;
    }
    .ch-quicklinks a:hover {
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    /* Prompt-Block — DIE Signature-Komponente */
    .prompt-block {
      position: relative;
      background: var(--surface);
      border: 1px solid var(--border);
      border-left: 2px solid var(--ink-strong);
      border-radius: 2px;
      padding: 24px 70px 24px 32px;
      margin: 24px 0;
    }
    .prompt-block > .copy-btn {
      position: absolute;
      top: 18px;
      right: 20px;
    }
    .prompt-label {
      font-size: 13.5px;
      font-weight: 400;
      color: var(--ink-mid);
      margin-bottom: 10px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }
    .prompt-label strong { color: var(--ink-strong); font-weight: 500; }
    .when-to-use {
      font-style: italic;
      color: var(--ink-mid);
      font-size: 14px;
      line-height: 1.55;
      margin-bottom: 12px;
    }
    .prompt-block hr.prompt-divider {
      height: 1px;
      background: var(--border-soft);
      border: 0;
      margin: 16px 0;
    }
    .prompt-block pre {
      font-family: var(--font-mono);
      font-size: 13px;
      line-height: 1.55;
      color: var(--ink);
      overflow-x: auto;
      white-space: pre-wrap;
      word-wrap: break-word;
    }
    .prompt-block pre code { font-family: inherit; }
    /* Highlight [PLACEHOLDERS] inside prompts via .ph span (added by content tasks) */
    .ph { color: var(--accent); font-weight: 500; }

    /* Sprint-31 Post-Closure (H4 · 2026-05-26): Inline-Prompt-Style für E3-konvertierte
       Single-Line-Prompts. Globale Rule "Prompt-Texte in <pre><code>" bleibt, aber
       Readability für Prosa-Prompts erfordert italic + grey + sans-serif statt
       monospace-code-chip. Multi-Line CRAFT-Slot-Beispiele behalten ihre <pre><code>
       Monospace-Optik (slot-Spalten-Alignment notwendig). Marker via class="prompt-inline"
       am <pre>-Element. */
    .chapter-section pre.prompt-inline {
      background: transparent;
      border-left: 3px solid var(--border-strong);
      padding: 0.4em 0 0.4em 1em;
      margin: 0.8em 0 0.8em 0.5em;
      white-space: pre-wrap;
      overflow-x: visible;
    }
    .chapter-section pre.prompt-inline code {
      font-family: var(--font-sans);
      font-style: italic;
      color: var(--ink-mid);
      background: transparent;
      font-size: 0.95em;
      padding: 0;
    }

    /* Wave-3 ux-pass · example-context content was inlined into .prompt-label
       above (single-line ellipsis with Copy button absolute-positioned). The
       standalone .example-context box has been retired. */

    /* Callout — left-stripe note (single pattern, max 3 semantic variants) */
    .callout {
      border-left: 2px solid var(--ink-strong);
      padding: 8px 20px;
      font-style: italic;
      color: var(--ink-mid);
      margin: 16px 0;
    }
    .callout.caution { border-left-color: var(--warning); }
    .callout.tip     { border-left-color: var(--accent); }

    /* Safety Floor — subtle left-border notice with collapsible detail */
    .safety-floor {
      --safety-signal: #893f42;
      border-left: 3px solid var(--safety-signal);
      padding: 4px 0 4px 18px;
      margin: 8px 0 32px;
    }
    .safety-floor h3 {
      margin-top: 0;
      margin-bottom: 8px;
    }
    .safety-floor h3::before { content: "⚠  "; color: var(--safety-signal); }
    .safety-floor p:last-of-type { margin-bottom: 0; }
    .safety-more {
      margin-top: 12px;
    }
    .safety-more > summary {
      cursor: pointer;
      font-size: 13px;
      color: var(--ink-mid);
      list-style: none;
      display: inline-block;
      padding: 2px 0;
      border-bottom: 1px dotted var(--ink-mid);
    }
    .safety-more > summary::-webkit-details-marker { display: none; }
    .safety-more > summary::before { content: "▸ "; display: inline-block; transition: transform 0.15s; }
    .safety-more[open] > summary::before { content: "▾ "; }
    .safety-more > summary:hover { color: var(--ink-strong); border-bottom-color: var(--ink-strong); }
    .safety-more[open] > summary { margin-bottom: 8px; }

    /* Glossary tooltip-trigger (inline span in body text) */
    .gloss {
      border-bottom: 1px dotted var(--ink-mid);
      cursor: help;
    }
    .gloss:focus-visible {
      outline: 2px solid var(--accent-soft);
      outline-offset: 2px;
      border-radius: 2px;
    }

    /* Slot marker (Phase 6 didactic-slots · T-2.3 refined 2026-05-13).
       Inline span inside <pre><code> prompt blocks. Marks a hardcoded
       value and opens a didactic tooltip on hover/focus. Three semantic
       variants — distinguished by underline style + colour (per SSOT §4):
         fix    = 1.5px solid   (cool blue, objective convention)
         range  = 1.5px dotted  (sage green, tunable per context)
         verif  = 1.5px dashed  (dusty rose, must be verified) + ⓘ suffix
       The ⓘ suffix appears only on verify-slots (signals "look closer");
       fix and range rely on underline-style alone to stay unobtrusive
       in dense prompt-block prose. */
    .slot {
      border-bottom: 1.5px solid currentColor;
      cursor: help;
      padding-bottom: 1px;
    }
    .slot[data-slot-type="fix"]     { color: var(--slot-fix);    border-bottom-style: solid; }
    .slot[data-slot-type="range"]   { color: var(--slot-range);  border-bottom-style: dotted; }
    .slot[data-slot-type="verif"]   { color: var(--slot-verif);  border-bottom-style: dashed; }
    .slot[data-slot-type="verif"]::after {
      content: "ⓘ";
      font-size: 0.75em;
      vertical-align: super;
      margin-left: 1px;
      opacity: 0.65;
    }
    .slot:focus-visible {
      outline: 2px solid currentColor;
      outline-offset: 2px;
      border-radius: 2px;
    }

    /* Tooltip popover (T-2.6 · 3 positioning modes via .tt-mode-* classes) */
    #tooltip {
      position: absolute;
      z-index: 200;
      max-width: 320px;
      padding: 14px 16px;
      background: var(--surface);
      border: 1px solid var(--border-strong);
      border-radius: 3px;
      box-shadow: var(--shadow-mid);
      font-size: 13.5px;
      line-height: 1.5;
      animation: tt-in 100ms ease-out;
    }
    /* Mode 1 · Desktop: dock right of prompt-block, wider for substantive bodies */
    #tooltip.tt-mode-right { max-width: 360px; }
    /* Mode 2 · Mobile: fill prompt-block width below the slot, scrollable if tall */
    #tooltip.tt-mode-inside {
      max-width: none;
      overflow-y: auto;
      box-shadow: var(--shadow-deep, 0 6px 24px rgba(0,0,0,0.12));
    }
    #tooltip .tt-title { font-weight: 500; margin-bottom: 6px; color: var(--ink-strong); }
    #tooltip .tt-body  { color: var(--ink-mid); margin-bottom: 8px; }
    #tooltip .tt-industry {
      color: var(--ink-mid);
      font-style: italic;
      border-top: 1px dotted var(--border-soft);
      padding-top: 6px;
      margin-top: 4px;
      margin-bottom: 8px;
    }
    #tooltip .tt-links { font-family: var(--font-mono); font-size: 11.5px; color: var(--accent); }
    #tooltip .tt-links a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
    @keyframes tt-in {
      from { opacity: 0; transform: translateY(2px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* First-Steps · Conceptual sub-blocks under a single h3.
       Indent-pattern (border-left + padding-left) rather than horizontal divider —
       same visual language as .safety-floor, just neutral colour.
       Creates depth via indentation (Stripe/Linear pattern) without adding line-noise. */
    .fs-block {
      border-left: 2px solid var(--border-soft);
      padding-left: 20px;
      margin: 24px 0;
    }
    .fs-block + .fs-block { margin-top: 32px; }
    .fs-eyebrow {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: var(--ink-mid);
      margin-bottom: 4px;
    }
    .fs-eyebrow + h4 { margin-top: 0; }

    /* R-3 · Glossary items in chapter 0 list (non-italic title + body) */
    .gloss-item {
      padding: 16px 0;
      border-bottom: 1px solid var(--border-soft);
    }
    .gloss-item:last-child { border-bottom: 0; }
    .gloss-term {
      font-weight: 500;
      font-style: normal;
      font-size: 15.5px;
      color: var(--ink-strong);
      margin-bottom: 4px;
    }
    .gloss-def {
      font-style: normal;
      font-size: 14px;
      color: var(--ink-mid);
    }
    .gloss-def a { color: var(--accent); }

    /* Icon-only copy button · borderless, round hover halo */
    .copy-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 8px;
      border: 0;
      border-radius: 50%;
      background: transparent;
      color: var(--ink-mid);
      cursor: pointer;
      line-height: 0;
      transition: background-color 120ms ease, color 120ms ease, transform 80ms ease;
    }
    .copy-btn svg { width: 16px; height: 16px; display: block; }
    .copy-btn .icon-check { display: none; }
    .copy-btn:hover {
      background: var(--paper-strong);
      color: var(--ink-strong);
    }
    .copy-btn:active { transform: scale(0.92); }
    .copy-btn:focus-visible {
      outline: 2px solid var(--ink-strong);
      outline-offset: 2px;
      border-radius: 50%;
    }
    .copy-btn.copied { color: var(--ink-strong); }
    .copy-btn.copied .icon-copy { display: none; }
    .copy-btn.copied .icon-check { display: block; }
    .copy-btn.copy-btn-sm { padding: 6px; }
    .copy-btn.copy-btn-sm svg { width: 14px; height: 14px; }

    .hamburger,
    .menu-toggle {
      width: 40px;
      height: 40px;
      display: none; /* hidden on desktop; mobile media query shows it */
      align-items: center;
      justify-content: center;
      color: var(--ink-mid);
      border-radius: 6px;
      transition: background-color 120ms ease, color 120ms ease;
      cursor: pointer;
    }
    .hamburger:hover,
    .menu-toggle:hover {
      background: var(--paper-strong);
      color: var(--ink-strong);
    }
    .hamburger:focus-visible,
    .menu-toggle:focus-visible {
      outline: 2px solid var(--ink-strong);
      outline-offset: 2px;
    }

    /* Sidebar header (brand + search + progress) */
    .sidebar-header {
      padding: 20px 16px 12px;
      border-bottom: 1px solid var(--border-soft);
    }
    .brand {
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.04em;
      color: var(--ink-strong);
      margin-bottom: 2px;
    }
    .brand-sub {
      font-size: 11.5px;
      color: var(--ink-faint);
      letter-spacing: 0.02em;
      margin-bottom: 16px;
    }

    /* Search — combobox + dropdown */
    .search-wrap { position: relative; }
    .search-input {
      width: 100%;
      font-family: var(--font-sans);
      font-size: 13px;
      padding: 8px 42px 8px 12px;
      background: var(--surface);
      color: var(--ink);
      border: 1px solid var(--border);
      border-radius: 3px;
      transition: border-color 80ms, box-shadow 80ms;
    }
    .search-input::placeholder { color: var(--ink-faint); }
    .search-input:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 2px var(--accent-soft);
    }
    .search-kbd {
      position: absolute;
      top: 50%;
      right: 6px;
      transform: translateY(-50%);
      font-family: var(--font-sans);
      font-size: 10px;
      color: var(--ink-faint);
      padding: 2px 5px;
      border: 1px solid var(--border);
      border-radius: 3px;
      background: var(--border-soft);
      pointer-events: none;
      user-select: none;
      letter-spacing: 0.02em;
      transition: opacity 80ms;
    }
    .search-input:focus ~ .search-kbd { opacity: 0; }
    .search-dropdown {
      position: fixed;
      width: 540px;
      max-width: calc(100vw - 24px);
      max-height: 60vh;
      overflow-y: auto;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 4px;
      box-shadow: 0 8px 28px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.04);
      z-index: 200;
      display: none;
    }
    .search-dropdown.is-open { display: block; }
    .search-group-label {
      position: sticky;
      top: 0;
      background: var(--surface);
      font-size: 10px;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: var(--ink-faint);
      padding: 10px 14px 4px;
      border-bottom: 1px solid var(--border-soft);
      z-index: 1;
    }
    .search-result {
      display: block;
      padding: 9px 14px;
      border-bottom: 1px solid var(--border-soft);
      cursor: pointer;
      color: var(--ink);
      text-decoration: none;
      transition: background-color 60ms;
    }
    .search-result:last-child { border-bottom: 0; }
    .search-result[aria-selected="true"] { background: var(--accent-soft); }
    .search-result-row {
      display: flex;
      align-items: baseline;
      gap: 8px;
    }
    .search-result-kind {
      font-size: 9.5px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink-faint);
      flex-shrink: 0;
      min-width: 56px;
    }
    .search-result-title {
      font-size: 13px;
      font-weight: 500;
      color: var(--ink-strong);
      margin: 0;
      line-height: 1.25;
    }
    .search-result-breadcrumb {
      font-size: 10.5px;
      color: var(--ink-faint);
      letter-spacing: 0.03em;
      margin: 3px 0 0 64px;
    }
    .search-result-snippet {
      font-size: 11.5px;
      color: var(--ink-mid);
      margin: 4px 0 0 64px;
      line-height: 1.45;
    }
    .search-result mark,
    .search-hit {
      background: #fff3a8;
      color: inherit;
      padding: 0 1px;
      border-radius: 2px;
    }
    .search-empty {
      padding: 22px 16px;
      font-size: 12.5px;
      color: var(--ink-mid);
      text-align: center;
      line-height: 1.5;
    }
    .search-empty kbd {
      font-family: var(--font-sans);
      font-size: 10.5px;
      padding: 1px 5px;
      border: 1px solid var(--border);
      border-radius: 3px;
      background: var(--border-soft);
    }
    @keyframes searchFlash {
      0%   { box-shadow: inset 0 0 0 9999px rgba(255, 224, 102, 0.32); }
      100% { box-shadow: inset 0 0 0 9999px rgba(255, 224, 102, 0); }
    }
    .search-flash { animation: searchFlash 1600ms ease-out; }
    @media (max-width: 768px) {
      .search-dropdown {
        width: auto;
        left: 8px !important;
        right: 8px !important;
        max-height: 65vh;
      }
      .search-kbd { display: none; }
    }

    .sidebar-nav { padding: 8px 8px 16px; }
    .nav-item {
      display: flex;
      align-items: center;
      gap: 8px;
      /* Sprint-3j (2026-05-20): 13.5 → 14 (Stripe-Docs-Standard, Cross-Page-Sync mit Landing). */
      font-size: 14px;
      color: var(--ink-mid);
      padding: 5px 12px;
      border-radius: 3px;
      text-decoration: none;
      transition: background-color 80ms, color 80ms;
      position: relative;
      white-space: nowrap;
      overflow: hidden;
    }
    .nav-item > span:not(.nav-badge) {
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 0;
      flex: 1 1 auto;
    }
    .nav-item:hover { background: var(--paper-strong); color: var(--ink); }
    .nav-item.active {
      background: var(--accent-soft);
      color: var(--accent-strong);
      font-weight: 500;
    }
    .nav-item .nav-badge {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--ink-faint);
      min-width: 26px;
    }
    .nav-item.active .nav-badge { color: var(--accent); }
    /* Visited-dot — appears when template has been copied (set by T-10) */
    .nav-item.visited::before {
      content: '●';
      position: absolute;
      left: 2px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 8px;
      color: var(--ink-faint);
    }
    .nav-item.visited.active::before { color: var(--accent); }

    .progress-bar {
      margin-top: 16px;
      font-size: 11.5px;
      color: var(--ink-faint);
      padding: 0 8px;
    }

    /* ──────────────────────────────────────────────
       T-08b · ACCORDION NAV GROUPS (Phase 1)
       Multi-open accordion: 4 groups, localStorage-persistent.
       ────────────────────────────────────────────── */
    .nav-group { margin-top: 16px; }
    .nav-group:first-child { margin-top: 0; }
    /* Standalone top-level nav-item (sits between groups, no toggle) */
    .nav-item-standalone {
      margin-top: 16px;
      padding: 6px 4px;
      font-family: var(--font-sans);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink-faint);
    }
    .nav-item-standalone:hover { color: var(--ink); background: transparent; }
    .nav-item-standalone.active { color: var(--ink); background: transparent; font-weight: 500; }
    .nav-group-toggle {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      padding: 6px 4px;
      background: transparent;
      border: 0;
      cursor: pointer;
      font-family: var(--font-sans);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink-faint);
      text-align: left;
      transition: color 80ms ease;
    }
    .nav-group-toggle:hover { color: var(--ink); }
    .nav-group-toggle:focus-visible {
      outline: 1px solid var(--ink-mid);
      outline-offset: 2px;
    }
    .nav-group-label { flex: 1 1 auto; min-width: 0; }
    .nav-group-chevron {
      font-size: 8px;
      color: var(--ink-faint);
      transition: transform 180ms cubic-bezier(.4,0,.2,1);
      transform: rotate(-90deg);
      display: inline-block;
      letter-spacing: 0;
    }
    .nav-group-toggle[aria-expanded="true"] .nav-group-chevron {
      transform: rotate(0deg);
    }
    .nav-group-items {
      overflow: hidden;
      max-height: 0;
      transition: max-height 220ms cubic-bezier(.4,0,.2,1);
    }
    .nav-group.is-open > .nav-group-items {
      max-height: 2400px;
    }

    /* Sprint-14 T-14-2b: Inline T-08c .on-this-page + .otp-* Klassen retired.
       Render kommt jetzt aus <site-page-toc> CE (splicelog-landing.css). */

    /* Three-column layout: reserve right gutter for TOC when wide enough.
       Existing 2-col (sidebar fixed + main margin-left) is preserved.
       Sprint-14: hidden-Threshold-Regel für .on-this-page entfernt (CE-CSS
       hat eigene @media (max-width:1099px) für .splice-page-toc). */
    @media (min-width: 1100px) {
      /* Sprint-3j (2026-05-20): 240 → 264 (= 240 TOC + 24 gap), Industry-Range
         Stripe/Vercel + Cross-Page-Sync mit Landing var(--right-sidebar-width). */
      #main { margin-right: 264px; }
    }
    @media (max-width: 767px) {
      #main { margin-right: 0; }
    }

    /* Interactive tool cards (T-21/T-22/T-24) */
    .tool-block {
      background: var(--paper-soft);
      border: 1px solid var(--border);
      border-radius: 2px;
      padding: 24px;
      margin: 32px 0;
    }
    .tool-label {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink-mid);
      margin-bottom: 16px;
    }

    .raceo-item,
    .pas-step,
    .pd-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 2px;
      padding: 16px 20px;
      transition: opacity 100ms, border-color 100ms;
      cursor: pointer;
    }
    .raceo-item.disabled { opacity: 0.55; }
    .pas-step.active { border-color: var(--ink-strong); border-width: 2px; padding: 15px 19px; }
    .pd-card.active  { border-color: var(--ink-strong); border-width: 2px; padding: 15px 19px; }

    /* T-22 · RACEO Ablation layout. Buttons show badge + label-with-principle.
       Concrete example content lives in the assembled prompt below — two
       different value layers (formula structure vs concrete instantiation),
       no content duplication between them. */
    .raceo-grid { display: flex; flex-direction: column; gap: 10px; }
    .raceo-item {
      display: flex; align-items: center; gap: 14px;
      user-select: none;
      text-align: left;
    }
    .raceo-item:hover { border-color: var(--border-strong); }
    .raceo-item:focus-visible {
      outline: 2px solid var(--accent-soft); outline-offset: 2px;
    }
    .raceo-badge {
      display: inline-flex; align-items: center; justify-content: center;
      width: 26px; height: 26px;
      font-family: var(--font-mono);
      font-size: 13px; font-weight: 600;
      color: var(--ink-strong);
      border: 1.5px solid var(--ink-strong);
      border-radius: 50%;
      transition: background 100ms, color 100ms, border-color 100ms;
      flex-shrink: 0;
    }
    .raceo-item:not(.disabled) .raceo-badge {
      background: var(--ink-strong);
      color: var(--surface);
    }
    .raceo-item.disabled .raceo-badge {
      background: transparent;
      color: var(--ink-faint);
      border-color: var(--border);
    }
    .raceo-label { font-size: 14px; color: var(--ink); flex-shrink: 0; }
    .raceo-item.disabled .raceo-label { color: var(--ink-faint); }
    /* Per-button effect text: populated by JS only when ablated.
       Right-aligned via margin-left:auto. Single line — overflow truncates
       rather than wraps, so the button height never changes on click. */
    .raceo-effect {
      margin-left: auto;
      text-align: right;
      font-size: 12.5px;
      font-style: italic;
      color: var(--ink-mid);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 0;
    }
    @media (max-width: 600px) {
      /* On narrow viewports the effect can fall under the label rather than
         compete for horizontal space — keeps the explanation readable.
         Still single-line; ellipsis trims if needed. */
      .raceo-item { flex-wrap: wrap; }
      .raceo-effect {
        text-align: left;
        margin-left: 40px;
        margin-top: 2px;
        flex-basis: 100%;
      }
    }
    .raceo-panel {
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid var(--border-soft);
    }
    .raceo-example {
      font-family: var(--font-mono);
      font-size: 13px;
      line-height: 1.55;
      color: var(--ink);
      background: var(--surface);
      border-left: 2px solid var(--ink-strong);
      padding: 14px 18px;
      margin: 0;
      white-space: pre-wrap;
    }
    .raceo-example .ablated {
      color: var(--ink-faint);
      text-decoration: line-through;
      text-decoration-style: dashed;
    }

    .litm-btn {
      font-family: var(--font-sans);
      font-size: 12px;
      font-weight: 500;
      padding: 7px 16px;
      border: 1px solid var(--border);
      border-radius: 99px;
      background: var(--surface);
      color: var(--ink-mid);
      cursor: pointer;
      transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
    }
    .litm-btn:hover { color: var(--ink-strong); border-color: var(--border-strong); }
    .litm-btn.active {
      background: var(--ink-strong);
      color: var(--surface);
      border-color: var(--ink-strong);
    }
    .litm-btn:focus-visible {
      outline: 2px solid var(--ink-strong);
      outline-offset: 2px;
    }

    /* T-24 · PAS Flow layout */
    .pas-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 12px;
    }
    .pas-step {
      display: flex; flex-direction: column; align-items: center; gap: 6px;
      padding: 24px 16px;
      font-family: var(--font-sans);
      user-select: none;
    }
    .pas-step:hover { border-color: var(--border-strong); }
    .pas-step:focus-visible {
      outline: 2px solid var(--accent-soft); outline-offset: 2px;
    }
    .pas-letter {
      font-family: var(--font-mono);
      font-size: 26px;
      font-weight: 600;
      color: var(--ink-strong);
    }
    .pas-name {
      font-size: 13px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--ink-mid);
    }
    .pas-grid:has(.active) .pas-step:not(.active) { opacity: 0.45; }
    .pas-reveal { margin-top: 24px; }
    .pas-reveal-hint {
      font-style: italic;
      color: var(--ink-faint);
      font-size: 13.5px;
      margin: 0;
    }
    .pas-reveal-body {
      margin: 0;
      padding: 14px 20px;
      border-left: 2px solid var(--ink-strong);
      background: var(--surface);
      font-size: 14.5px;
      line-height: 1.6;
      color: var(--ink);
    }
    @media (max-width: 767px) {
      .pas-grid { grid-template-columns: 1fr; }
    }

    /* T-IN-3 · Prompt-Demo cards (3-step reveal in #wie-prompt-herangehen) */
    .pd-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 12px;
    }
    .pd-card {
      display: flex; flex-direction: column; align-items: center; gap: 6px;
      padding: 20px 14px;
      font-family: var(--font-sans);
      user-select: none;
    }
    .pd-card:hover { border-color: var(--border-strong); }
    .pd-card:focus-visible {
      outline: 2px solid var(--accent-soft); outline-offset: 2px;
    }
    .pd-num {
      font-family: var(--font-mono);
      font-size: 22px;
      font-weight: 600;
      color: var(--ink-strong);
    }
    .pd-label {
      font-size: 12.5px;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      color: var(--ink-mid);
      text-align: center;
    }
    .pd-grid:has(.active) .pd-card:not(.active) { opacity: 0.45; }
    .pd-hint {
      margin: 16px 0 0;
      font-style: italic;
      color: var(--ink-faint);
      font-size: 13.5px;
    }
    .pd-reveal { margin-top: 16px; }
    .pd-ascii {
      font-family: var(--font-mono);
      font-size: 12.5px;
      line-height: 1.5;
      color: var(--ink);
      background: var(--surface);
      border-left: 2px solid var(--ink-strong);
      padding: 14px 18px;
      margin: 16px 0;
      overflow-x: auto;
      white-space: pre;
    }
    .pd-callout {
      margin: 16px 0;
      padding: 12px 16px;
      border-left: 2px solid var(--accent-soft);
      background: var(--surface);
      font-size: 14.5px;
    }

    /* Compatibility Picker · interactive replacement for the static
       Compatibility-Matrix table in Ch-4. Pattern mirrors .pd-tool/.pd-grid:
       category buttons reveal a panel with template recommendations. */
    .cp-tool { margin: 16px 0 32px; }
    .cp-question {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: var(--ink-mid);
      margin-bottom: 8px;
    }
    .cp-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
    }
    .cp-card {
      border: 1px solid var(--border);
      background: var(--surface);
      padding: 14px 12px;
      font-family: var(--font-sans);
      font-size: 13px;
      color: var(--ink-strong);
      text-align: center;
      cursor: pointer;
      transition: border-color 120ms, background 120ms;
      line-height: 1.35;
    }
    .cp-card:hover { border-color: var(--border-strong); }
    .cp-card:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px; }
    .cp-card.active {
      border-color: var(--ink-strong);
      border-width: 2px;
      padding: 13px 11px;
      background: var(--bg);
    }
    .cp-grid:has(.active) .cp-card:not(.active) { opacity: 0.5; }
    .cp-panel {
      margin-top: 16px;
      border-left: 2px solid var(--ink-strong);
      padding: 4px 0 4px 20px;
    }
    .cp-panel-label {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: var(--ink-mid);
      margin-bottom: 4px;
    }
    .cp-panel h4 {
      margin: 0 0 12px;
      font-size: 17px;
      font-weight: 500;
    }
    .cp-panel ul {
      list-style: none;
      padding: 0;
      margin: 0 0 12px;
    }
    .cp-panel ul li {
      padding: 6px 0;
      border-bottom: 1px solid var(--border-soft);
      font-size: 14px;
      line-height: 1.45;
    }
    .cp-panel ul li:last-child { border-bottom: 0; }
    .cp-panel ul li strong { font-family: var(--font-mono); font-size: 12.5px; margin-right: 6px; color: var(--ink-strong); }
    .cp-panel ul li em { font-style: normal; color: var(--ink-mid); font-size: 13px; }
    .cp-panel-note {
      font-style: italic;
      color: var(--ink-mid);
      font-size: 13px;
      margin: 0;
    }
    @media (max-width: 767px) {
      .cp-grid { grid-template-columns: 1fr 1fr; }
    }
    /* Sweet-spot diagram — replaces ASCII <pre> with a responsive layout that
       fills the container width at any size. */
    .pd-sweetspot {
      font-family: var(--font-mono);
      font-size: 12.5px;
      line-height: 1.5;
      color: var(--ink);
      background: var(--surface);
      border-left: 2px solid var(--ink-strong);
      padding: 16px 18px;
      margin: 16px 0;
    }
    .pd-sweetspot .ss-top,
    .pd-sweetspot .ss-bot {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 8px;
    }
    .pd-sweetspot .ss-top > :nth-child(1) { text-align: left; }
    .pd-sweetspot .ss-top > :nth-child(2) { text-align: center; }
    .pd-sweetspot .ss-top > :nth-child(3) { text-align: right; }
    .pd-sweetspot .ss-bot > :nth-child(1) { text-align: left; }
    .pd-sweetspot .ss-bot > :nth-child(2) { text-align: right; grid-column: 3; }
    .pd-sweetspot .ss-sub { display: block; color: var(--ink-mid); }
    .pd-sweetspot .ss-axis {
      position: relative;
      height: 0;
      border-top: 1px solid var(--ink);
      margin: 10px 0;
    }
    .pd-sweetspot .ss-dot {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--ink);
      transform: translate(-50%, -50%);
    }
    @media (max-width: 480px) {
      .pd-sweetspot { font-size: 11px; padding: 12px 14px; }
      .pd-sweetspot .ss-sub { font-size: 10.5px; }
      /* TASK-14 · Slot markers — generous padding for 44x44 tap-target. */
      .slot {
        padding: 6px 4px;
        margin: 0 1px;
        line-height: 1.4;
      }
      /* TASK-14 · Slot/glossary tooltip becomes bottom-sheet on phones.
         Override the JS-set position; positioning script still runs but
         these declarations win. Glossary tooltips share this on mobile. */
      #tooltip {
        position: fixed !important;
        left: 8px !important;
        right: 8px !important;
        top: auto !important;
        bottom: 16px !important;
        max-width: none;
        width: calc(100vw - 16px);
        max-height: 60vh;
        overflow-y: auto;
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);
      }
    }
    /* Interactive extremes — Korsett & Anchor Bias become clickable cards
       that reveal an example prompt + a short failure-mode note. */
    .pd-sweetspot button.ss-extreme {
      background: transparent;
      border: 0;
      padding: 0;
      margin: 0;
      font: inherit;
      color: inherit;
      cursor: pointer;
      width: 100%;
      display: block;
      transition: color 80ms ease;
    }
    .pd-sweetspot .ss-top > :nth-child(1).ss-extreme { text-align: left; }
    .pd-sweetspot .ss-top > :nth-child(3).ss-extreme { text-align: right; }
    .pd-sweetspot button.ss-extreme:hover { color: var(--ink-strong); }
    .pd-sweetspot button.ss-extreme[aria-pressed="true"] {
      color: var(--ink-strong);
      font-weight: 600;
    }
    .pd-sweetspot button.ss-extreme[aria-pressed="true"] .ss-sub {
      color: var(--ink);
    }
    .pd-sweetspot button.ss-extreme:focus-visible {
      outline: 1px solid var(--ink-mid);
      outline-offset: 3px;
    }
    .pd-sweetspot button.ss-extreme::after {
      content: ' ▾';
      font-size: 9px;
      color: var(--ink-faint);
      transition: transform 160ms ease;
      display: inline-block;
    }
    .pd-sweetspot button.ss-extreme[aria-pressed="true"]::after {
      transform: rotate(180deg);
      color: var(--ink-mid);
    }
    .ss-reveal {
      margin: 16px 0;
      padding: 14px 18px;
      border-left: 2px solid var(--border-strong);
      background: var(--surface);
    }
    .ss-reveal-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 10px;
      margin-bottom: 10px;
    }
    .ss-reveal-title {
      font-size: 11px;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: var(--ink-mid);
      font-weight: 500;
    }
    .ss-reveal-close {
      background: transparent;
      border: 0;
      font-size: 18px;
      line-height: 1;
      cursor: pointer;
      color: var(--ink-faint);
      padding: 0 4px;
    }
    .ss-reveal-close:hover { color: var(--ink-strong); }
    .ss-reveal-prompt {
      font-family: var(--font-mono);
      font-size: 12.5px;
      line-height: 1.55;
      color: var(--ink);
      background: var(--bg, #fafafa);
      padding: 12px 14px;
      margin: 0 0 12px;
      white-space: pre-wrap;
      overflow-x: auto;
      border: 1px solid var(--border);
    }
    .ss-reveal-note {
      font-size: 14px;
      line-height: 1.55;
      margin: 0;
      color: var(--ink);
    }
    @media (max-width: 767px) {
      .pd-grid { grid-template-columns: 1fr; }
    }

    /* T-23 · LITM visualization layout */
    .litm-controls { display: flex; gap: 10px; margin-bottom: 16px; }
    .litm-svg { width: 100%; height: auto; display: block; margin: 8px 0 4px; }
    .litm-text {
      font-style: italic;
      color: var(--ink-mid);
      font-size: 13.5px;
      line-height: 1.55;
      margin: 8px 0 4px;
    }
    .litm-source {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--ink-faint);
      margin: 0;
    }
    .litm-source a { color: var(--ink-faint); text-decoration: none; }
    .litm-source a:hover { color: var(--accent); text-decoration: underline; }

    /* Form elements (S-2 Builder) */
    .field { margin-bottom: 16px; }
    .field label {
      display: block;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink-mid);
      margin-bottom: 6px;
    }
    .field input[type="text"],
    .field textarea,
    .field select {
      width: 100%;
      font-family: var(--font-sans);
      font-size: 14px;
      line-height: 1.5;
      padding: 8px 12px;
      background: var(--surface);
      color: var(--ink);
      border: 1px solid var(--border);
      border-radius: 3px;
      transition: border-color 80ms, box-shadow 80ms;
    }
    .field textarea { font-family: var(--font-mono); font-size: 13px; resize: vertical; min-height: 72px; }
    .field input:focus,
    .field textarea:focus,
    .field select:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 2px var(--accent-soft);
    }

    /* ──────────────────────────────────────────────
       T-11 · HERO + CONTENT (added by content tasks)
       ────────────────────────────────────────────── */
    .hero { margin-bottom: 48px; }
    .hero h1 { margin-bottom: 8px; }
    .hero-sub {
      font-size: 18px;
      color: var(--ink-mid);
      font-weight: 400;
      line-height: 1.45;
      margin-bottom: 16px;
    }
    .hero-meta {
      font-family: var(--font-mono);
      font-size: 11.5px;
      color: var(--ink-faint);
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    /* Hero copyright tagline (sits below hero-meta, subtle) */
    .hero-copyright {
      font-family: var(--font-mono);
      font-size: 10.5px;
      color: var(--ink-faint);
      letter-spacing: 0.04em;
      margin-top: 4px;
    }
    .hero-author { color: var(--accent); text-decoration: none; }
    .hero-author:hover { text-decoration: underline; text-underline-offset: 2px; }

    /* Legal footer — copyright + IP-rights block (placed end-of-document inside main) */
    .legal-footer {
      margin-top: 64px;
      padding: 40px 0 64px;
      border-top: 1px solid var(--border);
      font-family: var(--font-sans);
      color: var(--ink-mid);
    }
    .legal-author {
      font-size: 13px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--ink-mid);
      margin-bottom: 4px;
    }
    .legal-author strong { color: var(--ink-strong); font-weight: 500; }
    .legal-copyright {
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--ink-faint);
      letter-spacing: 0.04em;
      margin-bottom: 32px;
    }
    .legal-block h3 {
      font-size: 16px;
      color: var(--ink-strong);
      margin: 24px 0 12px;
      font-weight: 500;
    }
    .legal-block p {
      font-size: 13px;
      line-height: 1.6;
      color: var(--ink-mid);
      margin-bottom: 10px;
    }
    .legal-block ul {
      font-size: 13px;
      line-height: 1.55;
      color: var(--ink-mid);
      padding-left: 22px;
      margin: 8px 0 12px;
      list-style: disc;
    }
    .legal-block ul li { margin-bottom: 4px; }
    .legal-block strong { color: var(--ink-strong); font-weight: 500; }
    .legal-block em { font-style: italic; }
    .legal-final {
      margin-top: 32px;
      padding-top: 16px;
      border-top: 1px solid var(--border-soft);
      font-family: var(--font-mono);
      font-size: 11.5px;
      color: var(--ink-faint);
      letter-spacing: 0.04em;
      text-align: center;
    }

    .chapter-section { margin-bottom: 96px; }
    .chapter-section > h2 { margin-bottom: 24px; }
    /* Sprint-3n (2026-05-20): Industry-Best-Practice prose-Width.
       §12-Korrektur 2026-05-20: 65ch war zu drastisch reduziert (vorher
       unconstrained ~110ch → 65ch = 360px Reduktion). User-Empirie 'super
       horizontal kurz geworden'. Auf 75ch (Industry-Upper-Bound, ~640px)
       gesetzt — gentler constrained, immer noch im 50-75ch Range. */
    .chapter-section p { margin-bottom: 16px; max-width: 75ch; }
    /* 2026-06-11: Widget-interner Text (Intro/Notiz/Output-Feld) fuellt seine
       Karte bzw. Grid-Zelle, statt auf das 75ch-Prosa-Mass gekappt zu werden.
       Sonst war der Widget-Intro schmaler als seine eigene (breitere) Karte. */
    .w-craft p, .w-rel p, .w-dilemma p { max-width: none; }
    .ch-intro {
      font-size: 16px;
      color: var(--ink-mid);
      margin-bottom: 32px;
      max-width: 60ch;
    }
    .chapter-section h3 { margin-top: 32px; margin-bottom: 12px; }
    .chapter-section strong { font-weight: 500; color: var(--ink-strong); }
    .chapter-section a {
      color: var(--ink-strong);
      text-decoration: underline;
      text-underline-offset: 3px;
      text-decoration-thickness: 1px;
    }
    .chapter-section a:hover { text-decoration-thickness: 2px; }

    .chapter-section blockquote {
      border-left: 2px solid var(--border-soft);
      padding-left: 20px;
      margin: 12px 0;
      color: var(--ink-mid);
    }
    .chapter-section blockquote p { margin-bottom: 8px; }
    .chapter-section blockquote p:last-child { margin-bottom: 0; }
    .chapter-section code {
      font-family: var(--font-mono);
      font-size: 0.88em;
      background: var(--paper-strong);
      padding: 1px 6px;
      border-radius: 3px;
    }
    .chapter-section ul {
      list-style: disc outside;
      padding-left: 1.75em;
      margin: 8px 0 16px;
    }
    .chapter-section ul > li { padding-left: 4px; margin-bottom: 12px; }
    .chapter-section ul > li::marker { color: var(--ink-mid); }

    .data-table {
      width: 100%;
      border-collapse: collapse;
      margin: 24px 0;
      font-size: 14px;
    }
    .data-table th,
    .data-table td {
      text-align: left;
      padding: 10px 12px;
      border-bottom: 1px solid var(--border);
      vertical-align: top;
    }
    .data-table th {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink-mid);
      border-bottom: 1px solid var(--border-strong);
    }
    .data-table tr:last-child td { border-bottom: 0; }

    /* Sidebar sub-item variant (Ch8 sub-anchors) — slight indent + smaller badge */
    .nav-item.nav-item-sub {
      padding-left: 28px;
      font-size: 13px;
    }
    .nav-item .nav-badge.nav-badge-sm {
      font-size: 10px;
      min-width: 28px;
      letter-spacing: 0.02em;
    }

    /* T-21 · S-2 PROMPT BUILDER */
    .s2-builder {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
      gap: 24px;
      margin-top: 8px;
    }
    .s2-form { display: flex; flex-direction: column; gap: 14px; }
    .s2-field { display: flex; flex-direction: column; gap: 4px; }
    .s2-field label {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--ink-mid);
    }
    .s2-field input,
    .s2-field select,
    .s2-field textarea {
      font-family: var(--font-sans);
      font-size: 14px;
      color: var(--ink);
      background: var(--paper);
      border: 1px solid var(--border);
      border-radius: 2px;
      padding: 8px 10px;
      transition: border-color 120ms;
    }
    .s2-field textarea {
      font-family: var(--font-mono);
      font-size: 13px;
      resize: vertical;
      min-height: 64px;
      line-height: 1.5;
    }
    .s2-field input:focus,
    .s2-field select:focus,
    .s2-field textarea:focus {
      outline: 0;
      border-color: var(--ink-strong);
    }
    .s2-preview {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .s2-preview-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink-mid);
    }
    .s2-preview-out {
      font-family: var(--font-mono);
      font-size: 12.5px;
      line-height: 1.55;
      color: var(--ink);
      background: var(--surface);
      border: 1px solid var(--border);
      border-left: 2px solid var(--ink-strong);
      border-radius: 2px;
      padding: 16px 18px;
      min-height: 320px;
      width: 100%;
      resize: vertical;
    }
    .s2-tokens {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--ink-faint);
      letter-spacing: 0.04em;
    }
    @media (max-width: 1023px) {
      .s2-builder { grid-template-columns: 1fr; }
    }

    /* T-21B · UNIVERSAL PROMPT GENERATOR */
    #prompt-generator { margin-bottom: 64px; }
    #prompt-generator > header { margin-bottom: 16px; }
    #prompt-generator > header h2 { margin-bottom: 6px; }
    #prompt-generator .pg-intro {
      font-size: 13.5px;
      color: var(--ink-mid);
      margin-bottom: 0;
    }
    .pg-controls {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 16px;
      flex-wrap: wrap;
    }
    .pg-controls label {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--ink-mid);
    }
    .pg-controls select {
      font-family: var(--font-sans);
      font-size: 14px;
      color: var(--ink);
      background: var(--paper);
      border: 1px solid var(--border);
      border-radius: 2px;
      padding: 8px 10px;
      min-width: 280px;
    }
    .pg-controls select:focus { outline: 0; border-color: var(--ink-strong); }
    .pg-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
      gap: 24px;
    }
    .pg-form { display: flex; flex-direction: column; gap: 14px; }
    .pg-form .pg-info {
      font-size: 13px;
      color: var(--ink-mid);
      background: var(--surface);
      border-left: 2px solid var(--ink-strong);
      padding: 10px 14px;
      line-height: 1.5;
    }
    .pg-field { display: flex; flex-direction: column; gap: 4px; }
    .pg-field label {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--ink-mid);
    }
    .pg-field input,
    .pg-field select,
    .pg-field textarea {
      font-family: var(--font-sans);
      font-size: 14px;
      color: var(--ink);
      background: var(--paper);
      border: 1px solid var(--border);
      border-radius: 2px;
      padding: 8px 10px;
      transition: border-color 120ms;
    }
    .pg-field textarea {
      font-family: var(--font-mono);
      font-size: 13px;
      resize: vertical;
      min-height: 64px;
      line-height: 1.5;
    }
    .pg-field input:focus,
    .pg-field select:focus,
    .pg-field textarea:focus { outline: 0; border-color: var(--ink-strong); }
    .pg-research-mode {
      border: 0;
      padding: 8px 0 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .pg-research-mode legend {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink-faint);
      padding: 0;
      margin-bottom: 4px;
    }
    .pg-research-radio {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: var(--ink-mid);
      cursor: pointer;
    }
    .pg-research-radio input { margin: 0; }
    .pg-research-area { display: none; }
    .pg-research-area.is-open { display: flex; flex-direction: column; gap: 4px; }
    .pg-preview { display: flex; flex-direction: column; gap: 8px; }
    .pg-preview-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink-mid);
    }
    .pg-preview-out {
      font-family: var(--font-mono);
      font-size: 12.5px;
      line-height: 1.55;
      color: var(--ink);
      background: var(--surface);
      border: 1px solid var(--border);
      border-left: 2px solid var(--ink-strong);
      border-radius: 2px;
      padding: 16px 18px;
      min-height: 360px;
      width: 100%;
      box-sizing: border-box;
      resize: vertical;
      white-space: pre-wrap;
      word-break: break-word;
      overflow-wrap: break-word;
      overflow-x: auto;
      overflow-y: auto;
    }
    .pg-preview-out.pg-editable {
      border-left-color: var(--accent, var(--ink-strong));
      background: var(--surface);
      cursor: text;
    }
    .pg-edit-hint {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--ink-faint);
      letter-spacing: 0.04em;
      margin-top: 4px;
    }
    .pg-preview-display {
      margin: 0;
      cursor: default;
    }
    .pg-preview-display .pg-dim {
      color: var(--ink-faint);
      opacity: 0.55;
    }
    .visually-hidden {
      position: absolute !important;
      width: 1px; height: 1px;
      padding: 0; margin: -1px;
      overflow: hidden;
      clip: rect(0,0,0,0);
      white-space: nowrap;
      border: 0;
    }
    .pg-tokens {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--ink-faint);
      letter-spacing: 0.04em;
    }
    @media (max-width: 1023px) {
      .pg-layout { grid-template-columns: 1fr; }
    }

    /* T-29 · PRINT STYLESHEET — Cmd/Ctrl+P friendly */
    @media print {
      #sidebar, .topbar, .copy-btn, #tooltip, .menu-toggle,
      .search-bar, .progress-bar, #backdrop,
      .litm-controls, .raceo-grid, .pas-grid,
      .s2-form, .s2-tokens, #prompt-generator, .search-dropdown {
        display: none !important;
      }
      body { font-size: 11pt; line-height: 1.5; color: #000; background: #fff; }
      #main { margin: 0; padding: 0; max-width: none; }
      .chapter-section { page-break-before: always; }
      .chapter-section:first-of-type, #preface { page-break-before: avoid; }
      .tmpl-section { page-break-inside: avoid; }
      h1, h2, h3 { page-break-after: avoid; }
      .prompt-block { border: 1px solid #000; background: none; padding: 12pt; }
      .prompt-block pre { white-space: pre-wrap; word-wrap: break-word; }
      /* .example-context prints natively as block (Wave-3 dissolve replaced
         the <details class="worked-example"> pattern · no force-open needed). */
      .example-context { background: none; border-left-color: #000; }
      .raceo-item, .pas-step { opacity: 1 !important; text-decoration: none !important; }
      .raceo-panel, .pas-reveal, .litm-svg, .litm-text, .litm-source { display: none !important; }
      .s2-builder { display: block; }
      .s2-preview-out { display: block; border: 1px solid #000; min-height: 0; height: auto; padding: 12pt; }
      .gloss { border-bottom: 0; }
      /* TASK-13 · Slots in print — monochrome, symbol marker replaces colour. */
      .slot { color: #000 !important; border-bottom: 1px dotted #000 !important; }
      .slot::after { font-size: 0.7em; opacity: 1; margin-left: 2px; }
      .slot[data-slot-type="fix"]::after     { content: var(--slot-symbol-fix); }
      .slot[data-slot-type="range"]::after   { content: var(--slot-symbol-range); }
      .slot[data-slot-type="verif"]::after   { content: var(--slot-symbol-verif); }
      a[href^="http"]:after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
      @page { margin: 2cm 1.5cm; }
    }

    /* Mobile <768px — sidebar becomes a drawer overlay */
    @media (max-width: 767px) {
      #sidebar {
        width: 280px;
        transform: translateX(-100%);
        box-shadow: 4px 0 16px rgba(0, 0, 0, 0.06);
      }
      #sidebar.open {
        transform: translateX(0);
      }
      #main {
        margin-left: 0;
        padding: 24px;
        max-width: 100%;
      }
      .topbar {
        /* Mobile: full-width sticky strip (hamburger left + switcher right) */
        position: sticky;
        left: 0;
        right: 0;
        background: var(--paper);
        border-bottom: 1px solid var(--border);
        padding: 10px 16px;
        justify-content: space-between;
      }
      .hamburger,
      .menu-toggle { display: inline-flex; }
      .prompt-block { padding: 20px 18px; }

      /* T-30 · 375px polish */
      #main { padding: 20px 18px 64px; }
      .hero h1 { font-size: 32px; line-height: 1.15; }
      .hero-sub { font-size: 15px; }
      .chapter-section h2 { font-size: 24px; line-height: 1.2; }
      .chapter-section h3 { font-size: 17px; }
      .tmpl-title { font-size: 17px; }
      /* Wide tables (Compatibility Matrix, etc.) scroll horizontally instead of overflowing main */
      .data-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        font-size: 12.5px;
        -webkit-overflow-scrolling: touch;
      }
      .data-table td, .data-table th { padding: 8px 10px; }
      /* Prompt-block prose stays tight */
      .prompt-block pre { font-size: 12.5px; }
      .prompt-label { flex-wrap: wrap; gap: 6px; }
      /* Tooltip popover narrower on mobile */
      #tooltip { max-width: calc(100vw - 32px); }
      /* RACEO/PAS touch targets */
      .raceo-item { padding: 14px 16px; }
      .pas-step { padding: 20px 12px; }
      .pd-card  { padding: 18px 12px; }
      .copy-btn { padding: 7px 14px; font-size: 13px; }
    }
      /* ──────────────────────────────────────────────
       Sprint-3g Welle A v2 · /blog/ Layout-Korrektur
       Layout: splicelog Site-Sidebar (Sprint-3f) LINKS, dynamische
       multi-group on-this-page RECHTS (Stripe/Vercel-Docs-Pattern:
       alle Group-Titles immer sichtbar, aktive Group expanded).
       OG-Chapter-Sidebar (#sidebar) bleibt im DOM als reine Datenquelle
       fuer initOnThisPage(), visuell hidden via display:none.
       Specificity-Stacking via .splice-page--blog (Sprint-3f-Methodik #4).
       ────────────────────────────────────────────── */
    .splice-page--blog #sidebar,
    .splice-page--blog .topbar,
    .splice-page--blog #backdrop { display: none; }
    .splice-page--blog #main {
      margin-left: 0;
      margin-right: 0;
      max-width: clamp(640px, 56vw, 1040px);
    }
    @media (min-width: 1100px) {
      /* Sprint-3j (2026-05-20): 256 → 264 (= 240 TOC + 24 gap), Industry-
         Standard Stripe/Vercel-Range. Sync mit Landing --right-sidebar-width. */
      .splice-page--blog #main { margin-right: 264px; }
    }
    /* Sprint-14 T-14-2b: Multi-Group .otp-* Klassen retired — Rendering kommt
       jetzt aus <site-page-toc> CE (splice-page-toc-*-Klassen in
       splicelog-landing.css). Mobile-Hide-Regel ist in CE-CSS
       (@media max-width: 1099px { .splice-page-toc { display: none; } }). */

    /* Sprint-3g Welle A v3 · Custom scrollbar (thin black line, aesthetic
       analog zum active-item-border-left rechts). Firefox + WebKit. */
    .splice-page--blog { scrollbar-width: thin; scrollbar-color: var(--ink-strong, #1a1a1a) transparent; }
    .splice-page--blog::-webkit-scrollbar { width: 6px; height: 6px; }
    .splice-page--blog::-webkit-scrollbar-track { background: transparent; }
    .splice-page--blog::-webkit-scrollbar-thumb { background: var(--ink-strong, #1a1a1a); border-radius: 0; }
    .splice-page--blog::-webkit-scrollbar-thumb:hover { background: var(--ink, #000); }

    /* Sprint-14 T-14-2b: .on-this-page-Scrollbar-Hide + .otp-group-items
       + .otp-standalone + .otp-group-items a/.otp-sub retired — alle .otp-*
       Klassen sind nach Migration auf <site-page-toc> CE obsolet. */