/* ──────────────────────────────────────────────
   splicelog landing — vanilla CSS, no framework.
   Same tokens & curatorial-grayscale palette as the
   legal pages (impressum/datenschutz/nutzungsbedingungen).
   ────────────────────────────────────────────── */

/* ===== SITE CHROME (Sprint 3b TASK-3b-1, Welle 4 post-Pre-Fix) =====
   Layout-Slot-Reservierung + additive Stile fuer Custom Elements.
   Bewusst KEINE Redefinition von .splice-mobile-bar/.splice-sidebar/.splice-footer/.splice-brand —
   diese leben weiter unten in dieser Datei (Z. 135+/190+/882+/206+) und behalten ihren Bestandsstack.
*/

/* Custom-Elements als Block (default ist inline, was Layout-Container bricht) */
site-header, site-sidebar, site-footer { display: block; }

/* :not(:defined) Slot-Reservierung (FOUC + CLS-Schutz vor JS-Define) */
site-header:not(:defined)                    { min-height: 56px; }
site-header[variant="master"]:not(:defined)  { min-height: 56px; }
site-sidebar:not(:defined)                   { min-height: 0; }
site-footer:not(:defined)                    { min-height: 240px; }

/* aria-current Styling (alle 3 CEs) */
site-header a[aria-current="page"],
site-sidebar a[aria-current="page"],
site-footer a[aria-current="page"] {
  color: var(--current-link-color, currentColor);
  opacity: 0.6;
  pointer-events: none;
  text-decoration: none;
}

/* Brand-Link Wrapper (W4-Pre-Fix: neue Klasse weil .splice-brand bereits Sidebar-belegt) */
.splice-brand-link { display: inline-flex; align-items: center; text-decoration: none; }

/* Brand-Logo Sizing */
.splice-brand-logo            { max-height: 32px; width: auto; display: block; }
@media (max-width: 640px) {
  .splice-brand-logo          { max-height: 24px; }
}

/* Sprint-3e: Sprint-3d Topbar-Workstream-Block entfernt; Sidebar uebernimmt
   die Navigation auf 7 Inline-Pages via splice-page--inline-Mode unten. */

/* Mobile-Bar Hamburger-Button (Master-Variant) */
.splice-hamburger {
  background: transparent; border: 0; cursor: pointer;
  padding: .25rem; display: inline-flex; align-items: center; justify-content: center;
  color: inherit;
}

/* Sidebar Mobile-Drawer-Override (additiv ueber Bestandsstack via Modifier).
   Sprint-8 (2026-05-21): Drawer öffnet von RECHTS statt links — UX-Konsistenz
   mit Hamburger-Trigger-Position (rechts im Mobile-Header). Mental-Model:
   click-rechts → reveal-rechts. Desktop-Inline-Sidebar bleibt unverändert
   links (kein Hamburger auf Desktop, Sidebar permanent visible). */
@media (max-width: 1023px) {
  .splice-sidebar.splice-sidebar--drawer {
    display: flex;           /* override Z. ~1097 .splice-sidebar { display: none } via Specificity (0,2,0 > 0,1,0). User-Browser-Test 2026-05-19: ohne dies bleibt Drawer im Open-State unsichtbar. */
    flex-direction: column;
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(85vw, 320px);
    z-index: 100;
    transform: translateX(0);
    transition: transform .2s ease-out;
    box-shadow: -2px 0 16px rgba(0,0,0,.15);
    overflow-y: auto;        /* Scrollbarer Inhalt bei langem Drawer-Content */
  }
  .splice-sidebar.splice-sidebar--drawer[hidden] {
    display: flex !important; /* [hidden]-Default override, transform fuer Animation */
    transform: translateX(100%);
    pointer-events: none;
  }
  body.splice-drawer-open::before {
    content: ""; position: fixed; inset: 0;
    background: rgba(0,0,0,.4); z-index: 99;
  }
}
/* ===== /SITE CHROME ===== */


:root {
  --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;

  --ink:           #0a0a0a;
  --ink-strong:    #000000;
  --ink-mid:       #525252;
  --ink-faint:     #767676;
  --ink-disabled:  #d4d4d4;

  --paper:         #fafafa;
  --paper-strong:  #f0f0f0;
  --paper-soft:    #fcfcfc;
  --surface:       #ffffff;

  --border:        #e5e5e5;
  --border-strong: #d4d4d4;

  /* Sprint-3c B54c · 1:1 PMS-App-Code-Parity (App-Parity-Pivot 2026-05-19).
     Sync-Source: C:\Users\lenna\Documents\prompo\
       - packages/extension-styles/tokens.css (Ink/Paper/Border/Radius)
       - frontend/app/globals.css            (Diff-Tokens + Editor-Pattern)
       - components/editor/editor-compare-header.tsx (Header-Pattern)
     Bei PMS-App-Token-Änderung: Sprint-3c-Sync-Pflicht (changelog dokumentieren).
     Hinweis: --ink (Z. 87), --surface (Z. 96), --border (Z. 98) existieren
     bereits oben als parity-identisches Sprint-3a-Subset — kein Redefine. */

  /* Paper/Border-Erweiterung für App-Container-Parity */
  --paper-mid:   #f5f5f5;  /* parity tokens.css Z. 41 (Editor-BG via .prompt-input Z. 196 globals.css) */
  --border-soft: #f0f0f0;  /* parity tokens.css Z. 48 (Header-Border-Bottom via EditorCompareHeader Z. 34) */

  /* Border-Radius-Scale (parity tokens.css Z. 58) */
  --radius-sm: 2px;

  /* Diff-Color-Tokens (parity globals.css Z. 27-32, ≥3:1 contrast auf --paper) */
  --diff-added:        #88b79a;
  --diff-added-tint:   #e2efe7;
  --diff-removed:      #c88585;
  --diff-removed-tint: #f1dada;
  --diff-changed:      #7a95b5;
  --diff-changed-tint: #e6ecf3;

  /* Elevation — almost-zero-blur per CI. shadow-low for cards/buttons,
     shadow-mid for floating/active-lifted elements. No coloured shadows. */
  --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);

  /* Sprint-3f: Tokens portiert aus prompo/packages/extension-styles/tokens.css
     (geteilte App+Blog+Landing-Design-Tokens). --ink-faint bleibt splicelog
     #767676 statt prompo #999999 wegen WCAG-3:1-Pflicht (Marketing-public). */
  --paper-mid:      #f5f5f5;
  --paper-soft:     #fcfcfc;
  --border-strong:  #d4d4d4;
  --accent-soft:    #ebebeb;
  --radius-sm:      2px;
  --radius-md:      5px;
  --radius-lg:      8px;

  /* Sprint-3f: Sidebar-Width 224px unified (Webapp-Match). Sprint-3e war 256px. */
  --sidebar-width:           224px;
  --sidebar-width-collapsed: 60px;
  --right-sidebar-width:     264px;  /* Sprint-3j (2026-05-20): 256 → 264 (= 240 TOC + 24 gap). Industry-Standard Stripe/Vercel-Range. */
}

/* ──────────────────────────────────────────────
   Universal micro-interactions (CI: function-first, no double signals).
   ────────────────────────────────────────────── */

/* Keyboard focus: visible only when tabbing, never on mouse-click.
   Sprint-30-F (2026-05-26): outline-offset 2→3 (Linear-Pattern · mehr
   "Atemraum"), outline-color in transition aufgenommen (smooth fade-in
   statt snap-on). */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--ink-strong);
  outline-offset: 3px;
  border-radius: 3px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--ink-strong);
  outline-offset: 3px;
}

/* Tactile press feedback on interactive elements.
   Sprint-30-F: easing ease → cubic-bezier(.2,.8,.2,1) (Linear-Pattern,
   sharp-start gentle-end · "premium spring feel"), text-decoration-color
   + outline-color in transition aufgenommen (Underline + Focus-Ring
   faden smooth ein), gesamt unter prefers-reduced-motion-Guard. */
@media (prefers-reduced-motion: no-preference) {
  button, a, summary, input[type="submit"] {
    transition: background-color 120ms cubic-bezier(.2, .8, .2, 1),
                color 180ms cubic-bezier(.2, .8, .2, 1),
                text-decoration-color 180ms cubic-bezier(.2, .8, .2, 1),
                border-color 120ms cubic-bezier(.2, .8, .2, 1),
                box-shadow 120ms cubic-bezier(.2, .8, .2, 1),
                outline-color 120ms cubic-bezier(.2, .8, .2, 1),
                transform 80ms cubic-bezier(.2, .8, .2, 1);
  }
}

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, ul, ol, li, button, input, form, figure, blockquote {
  margin: 0; padding: 0;
}

html { scroll-behavior: smooth; }
/* A11y: anchor target offset against sticky mobile topbar (61px + 16px Atemraum).
   Desktop ≥1024px nutzt Sidebar statt Topbar — kein Offset nötig. */
html { scroll-padding-top: 77px; }
@media (min-width: 1024px) { html { scroll-padding-top: 0; } }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  /* Sprint-3j (2026-05-20): font-size 15.5 → 16 (WCAG-Floor + Google-Mobile-
     Friendly). Industry-Optimum 2026: Greadme/USWDS/W3C. line-height 1.6
     bleibt (Sweet-Spot long-form, Cross-Page-Sync mit Blog post-3j). */
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

/* Language toggling (shared pattern with legal pages) */
[data-lang="en"] .lang-de { display: none; }
[data-lang="de"] .lang-en { display: none; }

/* WCAG 2.4.1 Bypass Blocks — Skip-Link.
   z-index = Cookie-Banner (2147483646) + 1, damit Skip-Link auch
   während des Banners erreichbar bleibt. */
.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;
}

a { color: var(--ink-strong); text-decoration: none; }
a:hover { color: var(--ink); }

/* Sprint-4e (2026-05-20) — Legal/Inline-Pages prose-link affordance restoration (B84).
   Sprint-3d-Cascade-Drift-Fix: external `a { text-decoration: none }` ueberschrieb
   ungewollt inline-style-underline-intent seit Sprint-3d. Scope `.page p a` etc. ist
   isoliert (nur 7 Legal/Inline-Pages haben `.page`-Wrapper, Landing+Blog haben keinen).
   WCAG-1.4.1: kombiniert G182 (color-diff 6.5:1) + Underline-Affordance = robust. */
.page p a,
.page address a,
.page ul a,
.page ol a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--border);
}
.page p a:hover,
.page address a:hover,
.page ul a:hover,
.page ol a:hover {
  text-decoration-color: var(--ink-strong);
}

ul { list-style: none; }
button { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }

/* ──────────────────────────────────────────────
   Sprint-5 · Site-wide-Search (v2 Inline-Pattern)
   Inline-Dropdown statt Modal-Overlay (User-Feedback "pop-up blöd")
   Spec: .claude/state/landing/plan_5_sitewide_search.md
   ────────────────────────────────────────────── */

/* Header-Trigger-Button (Mobile only) */
.splice-search-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--surface, #ffffff);
  color: var(--ink-mid);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease;
}
.splice-search-trigger:hover {
  border-color: var(--ink-strong);
  color: var(--ink-strong);
}
.splice-search-trigger:focus-visible {
  outline: 2px solid var(--ink-strong);
  outline-offset: 2px;
}
.splice-search-trigger-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}
.splice-search-trigger-kbd {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--paper-strong, #f0f0f0);
  color: var(--ink-faint);
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
}
@media (max-width: 640px) {
  .splice-search-trigger-kbd { display: none; }
  .splice-search-trigger { padding: 6px 8px; }
}

/* Inline-Dropdown — floating, anchored unter active input */
.splice-search-dropdown {
  position: fixed;
  z-index: 2147483640; /* unter Cookie-Banner 2147483646 */
  max-height: 70vh;
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15),
              0 2px 6px rgba(0, 0, 0, 0.08);
  padding: 4px 0;
}
.splice-search-dropdown[hidden] { display: none; }

/* Sprint-9a · Prong C @starting-style — Entry-Animation für Search-Dropdown.
   Pattern: display: none → block via [hidden]-Removal. @starting-style feuert
   bei jedem Wechsel von display:none zu non-none (Spec). belt-and-suspenders:
   @media-Wrap zusätzlich zum globalen Reduced-Motion-Block unten (UA-Defaults
   inkonsistent, Sprint-7-Lehre). Reduced-Motion-Selector-Liste ergänzt. */
@media (prefers-reduced-motion: no-preference) {
  .splice-search-dropdown {
    transition: opacity 160ms ease-out, transform 160ms ease-out;
    opacity: 1;
    transform: translateY(0);
  }
  @starting-style {
    .splice-search-dropdown {
      opacity: 0;
      transform: translateY(-4px);
    }
  }
}

.splice-search-group-label {
  padding: 10px 16px 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  font-weight: 600;
}
.splice-search-group-label:first-child { padding-top: 6px; }

.splice-search-result {
  display: block;
  padding: 8px 16px;
  border-left: 2px solid transparent;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 80ms ease, border-color 80ms ease;
}
.splice-search-result:hover,
.splice-search-result[aria-selected="true"] {
  background: var(--paper-strong, #f0f0f0);
  border-left-color: var(--ink-strong);
  text-decoration: none;
}
.splice-search-result-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-strong);
  line-height: 1.3;
  margin-bottom: 2px;
}
.splice-search-result-snippet {
  font-size: 11px;
  color: var(--ink-mid);
  line-height: 1.4;
}
.splice-search-result mark {
  background: var(--accent-soft, #fef3c7);
  color: inherit;
  padding: 0 1px;
  border-radius: 1px;
  font-weight: 500;
}
.splice-search-empty {
  padding: 16px;
  color: var(--ink-faint);
  font-size: 12px;
  text-align: center;
}

@media (max-width: 1023px) {
  .splice-search-dropdown {
    max-height: 60vh;
  }
}

/* ──────────────────────────────────────────────
   Mobile top bar — only visible <1024px
   ────────────────────────────────────────────── */
.splice-mobile-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: var(--paper);
  border-bottom: 1px solid var(--border);
}
/* Sprint-8 (2026-05-21) B89-Fix: Actions-Group rechts (Search + Hamburger).
   Vorher waren Search + Hamburger direkte Children der mobile-bar mit
   justify-content:space-between → 3 Children → Search wurde ungewollt
   zentriert. Jetzt 2 Top-Level-Children (Brand links, Actions-Group rechts). */
.splice-mobile-bar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Sprint-3i Welle B Fix · Sticky-Verschiebung von .splice-mobile-bar auf
   <site-header>: die mobile-bar ist alleiniges Kind eines block-CE-Wrappers,
   d.h. parent-box ist genau so hoch wie sticky-child = 0 Sticky-Raum.
   Sticky gehoert also auf das CE selbst, dessen scrolling-ancestor body ist
   (min-height:100vh, massiv Scroll-Raum). Nur unter 1024px wirksam (Desktop
   versteckt mobile-bar ohnehin). */
@media (max-width: 1023px) {
  site-header[variant="master"] {
    position: sticky;
    top: 0;
    z-index: 50;
  }
}
/* W4-8 (TASK-3b-1d, 2026-05-18): Block decorative seit Wave-B-Migration.
   .splice-mobile-brand/-name/-sub/-toggle/-menu/-inner/-footer waren Bestand-
   Stiles fuer das alte Mobile-Markup, das durch <site-header variant="master">
   ersetzt wurde. DOM-grep auf 9 splicelog-HTML-Pages: 0 Treffer fuer alle.
   Entfernt per V7-Decorative-Code-Detector. Bei Bedarf via git history (commit
   vor diesem Edit) wieder restorbar. */

/* ──────────────────────────────────────────────
   Shell layout
   ────────────────────────────────────────────── */
.splice-shell {
  display: flex;
  min-height: 100vh;
}

/* Sidebar (desktop) */
.splice-sidebar {
  position: sticky;
  top: 0;
  flex: 0 0 var(--sidebar-width);
  height: 100vh;
  background: var(--paper);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Sprint-3e: Inline-Page-Mode — Sidebar als position:fixed-Overlay.
   Homepage nutzt .splice-shell-Flex-Grid (sticky-Sidebar oben).
   Inline-Pages haben kein .splice-shell — body.splice-page--inline aktiviert
   diesen Modus, .page bleibt zentriert mit padding-left auf body.
   Sprint-5 §14-Korrektur (2026-05-20): @media (min-width: 1024px) Wrap.
   Ohne Wrap überschrieb diese Regel z-index:50 die Mobile-Drawer-Rule Z. 53
   (z-index:100, gleiche Specificity 0,2,0, source-order später) → Drawer landete
   unter Backdrop z-index:99 → Drawer-Content abgedunkelt auf inline-pages.
   Alle anderen .splice-page--inline-Regeln in dieser Datei sind bereits
   desktop-MQ-gewrappt (Z. 454, 461, 1381, 1384) — diese eine war Ausreißer. */
@media (min-width: 1024px) {
  .splice-page--inline .splice-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    z-index: 50;
  }
}

@media (min-width: 1024px) {
  body.splice-page--inline {
    padding-left: var(--sidebar-width);
  }
}
/* Sprint-3g Welle B Design-Parity: padding-right NUR ≥1100px (sync mit
   .splice-page-toc-Visibility-Breakpoint). 256px = 240 aside + 16 gap. */
@media (min-width: 1100px) {
  body.splice-page--inline {
    padding-right: var(--right-sidebar-width);
  }
}

/* Sprint-3f Welle B / Sprint-3g Welle B: Right-Sidebar Container.
   Design-Parity zur /blog/ .on-this-page (Referenz): top 64px, 240px breit,
   max-height + bottom-Breathing-Room, font-size 13px, z-index 40.
   CE <site-page-toc> registriert in T6, baut TOC aus <main><h2>/<h3>/<section[id]>. */
.splice-page-toc {
  position: fixed;
  top: 64px;
  right: 0;
  width: 240px;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  padding: 16px 20px 32px;
  font-family: var(--font-sans);
  font-size: 13px;
  z-index: 40;
  box-sizing: border-box;
}
.splice-page-toc[hidden] { display: none; }

/* Sprint-3g Welle B: AUF-DIESER-SEITE-Header restlos hidden (aesthetic-unify
   mit /blog/-Welle-A v8). DOM bleibt fuer screenreader-context erhalten. */
.splice-page-toc-head { display: none; }

/* Sprint-3g Welle B: Aside-Scrollbar restlos hidden (overflow-y: auto bleibt
   in .splice-page-toc, aber Scrollbar visuell weg — analog /blog/ v4). */
.splice-page-toc { scrollbar-width: none; }
.splice-page-toc::-webkit-scrollbar { display: none; width: 0; height: 0; }

.splice-page-toc-nav { display: flex; flex-direction: column; gap: 18px; }

/* Sprint-3g Welle B: Items in v8-Style (10.5px uppercase, letter-spacing,
   padding analog .otp-group-title). */
.splice-page-toc-item {
  display: block;
  padding: 0 12px 4px;
  border-left: 2px solid transparent;
  margin-left: -1px;
  color: var(--ink-faint);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  transition: border-color 200ms cubic-bezier(0.2, 0, 0, 1),
              color       200ms cubic-bezier(0.2, 0, 0, 1);
}
.splice-page-toc-item:hover { color: var(--ink); }
.splice-page-toc-item[aria-current="true"] {
  color: var(--accent, var(--ink-strong));
  border-left-color: var(--accent, var(--ink-strong));
}
.splice-page-toc-h3 {
  padding-left: 24px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12.5px;
  font-weight: 400;
}

/* Sprint-3i Welle B: Multi-Group-Parity mit /blog/ .otp-*-Pattern.
   Aktiv wenn SitePageToc-CE Multi-Group-Mode rendert (Homepage); 7 Inline-Pages
   nutzen weiter den Flat-`.splice-page-toc-item`-Pfad oben. Klassen orthogonal. */
.splice-page-toc-nav .splice-page-toc-group,
.splice-page-toc-nav .splice-page-toc-standalone {
  list-style: none;
  margin: 0;
  padding: 0;
}
.splice-page-toc-nav.is-multi-group {
  display: block;
  gap: 0;
}
.splice-page-toc-nav.is-multi-group > * + * { margin-top: 18px; }

.splice-page-toc-group-title,
.splice-page-toc-standalone > a {
  display: block;
  padding: 0 12px 4px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 500;
  color: var(--ink-faint);
  text-decoration: none;
  cursor: pointer;
  transition: color 80ms;
}
.splice-page-toc-group-title:hover,
.splice-page-toc-standalone > a:hover { color: var(--ink); }
.splice-page-toc-group.is-active-group .splice-page-toc-group-title { color: var(--ink-mid); }
.splice-page-toc-group.is-active-group .splice-page-toc-group-title:hover { color: var(--ink); }
.splice-page-toc-standalone.is-active > a { color: var(--accent, var(--ink-strong)); }

.splice-page-toc-group-items {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--border);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 280ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 180ms ease-out 40ms;
}
.splice-page-toc-group.is-active-group .splice-page-toc-group-items {
  max-height: 720px;
  opacity: 1;
  transition: max-height 320ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 200ms ease-out;
}
.splice-page-toc-group-items li { margin: 0; }
.splice-page-toc-group-items a {
  display: block;
  padding: 3px 12px;
  font-size: 12.5px;
  color: var(--ink-mid);
  text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: -1px;
  line-height: 1.4;
  transition: color 80ms, border-color 80ms;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.splice-page-toc-group-items a:hover { color: var(--ink); }
.splice-page-toc-group-items li.is-active a {
  color: var(--accent, var(--ink-strong));
  border-left-color: var(--accent, var(--ink-strong));
}

/* Sprint-15 T-15-3: Sub-Item-Style (.splice-page-toc-sub) für H3-Anchors in
   Multi-Group. Analog Guide-Pre-Sprint-14 .otp-group-items .otp-sub a (Z. 2340
   pre-edit). War in Sprint-14 T-14-2b Inline-Retire entfernt ohne Replacement
   in splicelog-landing.css — Bug-Fix.
   Specificity 0,3,1 > Bestand 0,2,1 — Override deterministisch. */
.splice-page-toc-group-items .splice-page-toc-sub a {
  padding-left: 24px;
  font-size: 11.5px;
}

/* Sprint-14 T-14-1: Cluster-TOC-Parity-Override für .splice-page--blog Pages.
   Cluster-Pages (Long-Read) bekommen Guide-Multi-Group-Item-Optik (12.5px
   sentence-case ink-mid border-left), während Inline-Pages (Glossar/Impressum
   etc.) ihre Sprint-3g v8-Optik (10.5px uppercase ink-faint) behalten.
   Body-Class .splice-page--blog ist auf Cluster + Guide gesetzt.
   §10 Pre-Mortem Szenario B: :not(.is-multi-group) Filter PFLICHT — post-
   T-14-2 wird Guide auf <site-page-toc> migriert und rendert Multi-Group.
   Ohne Filter bekäme Multi-Group-Container Doppel-border-left (Container +
   Group-Items). User-GATE D1+D2: Pfad A+D / Variante β. */
.splice-page--blog .splice-page-toc-nav:not(.is-multi-group) {
  border-left: 1px solid var(--border);
}
.splice-page--blog .splice-page-toc-item {
  padding: 3px 12px;
  font-size: 12.5px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--ink-mid);
  border-left: 2px solid transparent;
  margin-left: -1px;
  line-height: 1.4;
}
.splice-page--blog .splice-page-toc-item:hover { color: var(--ink); }
.splice-page--blog .splice-page-toc-item[aria-current="true"] {
  color: var(--accent, var(--ink-strong));
  border-left-color: var(--accent, var(--ink-strong));
}
.splice-page--blog .splice-page-toc-h3 {
  padding-left: 24px;
  font-size: 11.5px;
}

/* Sprint-3g Welle B Design-Parity zur /blog/-Referenz: Visibility-Breakpoint
   bei 1100px (statt 1023px). Three-column-Layout (Site-Sidebar links + main +
   Page-Toc rechts) braucht entsprechende Breite — unter 1100px wird Toc hidden. */
@media (max-width: 1099px) {
  .splice-page-toc { display: none; }
  body.splice-page--inline { padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .splice-nav-item,
  .splice-page-toc-item,
  .splice-page-toc-group-title,
  .splice-page-toc-standalone > a,
  .splice-page-toc-group-items,
  .splice-page-toc-group-items a {
    transition: none;
  }
  .splice-page-toc-group.is-active-group .splice-page-toc-group-items {
    transition: none;
  }
}

.splice-sidebar-head {
  /* Sprint-3f: Padding-Reduce auf prompo-Pattern (pt-5 px-3 pb-3 = 20-12-12)
     fuer 224px-Sidebar — Logo 200x22 passt damit in 200px Slot (224-24=200).
     Sprint-8 (2026-05-21): Padding vertikal moderat erhöht für Logo-Breathing-
     Room, aber nicht übertrieben — 24px top + 16px bottom matched mit
     brand-link margin-bottom 24px für symmetrische Rhythmik 24→logo→24→search. */
  padding: 24px 12px 16px;
  border-bottom: 1px solid var(--border);
}
/* Sprint-8 (2026-05-21): Logo-Bottom-Gap zum Search-Input für visuelle Ruhe.
   Scoped auf .splice-sidebar-head weil .splice-brand-link auch in der Mobile-
   Bar (<site-header variant="master">) verwendet wird — margin-bottom dort
   würde Layout-Höhe ändern. 24px matched head padding-top (24px) → symmetrisch
   moderate Vertikal-Rhythmik oberkante→logo == logo→search. */
.splice-sidebar-head .splice-brand-link {
  margin-bottom: 24px;
}
.splice-brand { display: flex; flex-direction: column; margin-bottom: 16px; }
.splice-brand-name {
  font-size: 14px; font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-strong);
}
.splice-brand-tag {
  font-size: 11.5px;
  color: var(--ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.splice-search-wrap { position: relative; margin-bottom: 12px; }
.splice-search-icon {
  position: absolute;
  left: 10px; top: 50%;
  transform: translateY(-50%);
  color: var(--ink-faint);
}
.splice-search {
  width: 100%;
  padding: 6px 8px 6px 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 12px;
  color: var(--ink-faint);
  cursor: not-allowed;
  font-family: inherit;
}
.splice-search::placeholder { color: var(--ink-faint); }

/* Sprint-5 v2: functional Sidebar-Search-Input (real <input>, typeable) */
.splice-search-wrap input.splice-search {
  cursor: text;
  color: var(--ink);
  transition: border-color 120ms ease;
}
.splice-search-wrap input.splice-search:hover {
  border-color: var(--ink-mid);
}
.splice-search-wrap input.splice-search:focus {
  outline: none;
  border-color: var(--ink-strong);
  color: var(--ink-strong);
}
.splice-search-wrap input.splice-search:focus::placeholder {
  color: var(--ink-faint);
}

/* Sprint-29: Native WebKit/Chrome Search-Clear-Button verstecken
   (zugunsten Lucide-X Custom-Button für visual-consistency mit Site-Icons). */
.splice-search-wrap input.splice-search::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
.splice-search-wrap input.splice-search::-webkit-search-decoration { display: none; }

/* Sprint-29: Custom Search-Clear-Button (Lucide-X SVG).
   Visible nur wenn input nicht leer (JS toggles hidden attribute). */
.splice-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  line-height: 0;
  transition: color 120ms ease, background-color 120ms ease;
}
.splice-search-clear:hover {
  color: var(--ink-strong);
  background-color: var(--border);
}
.splice-search-clear:focus-visible {
  outline: 2px solid var(--ink-strong);
  outline-offset: 1px;
}
.splice-search-clear[hidden] { display: none; }
/* Right-padding-Reserve im Input damit Clear-Button nicht überlappt */
.splice-search-wrap input.splice-search { padding-right: 28px; }

/* Sprint-29: Glossar-Tooltip (für .gloss[data-term]-Spans auf Cluster-Pages).
   Pillar nutzt eigenes #tooltip-Element via pillar-engine.js. */
.splice-gloss-tooltip {
  position: absolute;
  z-index: 1000;
  max-width: 360px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--ink-mid);
  border-radius: 4px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink);
  pointer-events: none;
}
.splice-gloss-tooltip[hidden] { display: none; }
.splice-gloss-tooltip-title {
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--ink-strong);
}
.splice-gloss-tooltip-body { color: var(--ink); }
.splice-gloss-tooltip-body a { color: inherit; }

.splice-progress-track {
  height: 2px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.splice-progress-bar {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--ink-strong);
  transform: scaleX(0);
  transform-origin: left center;
}
@supports (animation-timeline: scroll()) {
  .splice-progress-bar {
    animation: splice-progress linear;
    animation-timeline: scroll(root);
  }
}
@keyframes splice-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.splice-toc {
  flex: 1;
  overflow-y: auto;
  padding: 12px 8px;
}

.splice-nav-group { margin-bottom: 4px; }

/* Standalone top-level entry (single-item "group" rendered flat, no toggle).
   Visual rhythm matches group-label styling, so it sits naturally between
   actual groups. Same pattern as ai-prompt-guide .nav-item-standalone. */
.splice-nav-item-standalone {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px 12px;
  border-radius: 3px;
  text-align: left;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  transition: color 120ms, background-color 120ms;
}
.splice-nav-item-standalone:hover {
  color: var(--ink-strong);
  background: #f5f5f5;
}
.splice-nav-item-standalone[aria-current="true"] {
  color: var(--ink-strong);
  font-weight: 500;
}
.splice-nav-group-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 3px;
  text-align: left;
}
.splice-nav-group-toggle:hover { background: #f5f5f5; }
.splice-nav-group-label {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.splice-nav-group[data-has-active="true"] .splice-nav-group-label {
  color: var(--ink-strong);
  font-weight: 500;
}
/* Sprint-29: Sublabel (z.B. "(Auswahl)") unter dem Group-Label */
.splice-nav-group-sublabel {
  display: block;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--ink-faint);
  font-style: italic;
  margin-top: 1px;
  line-height: 1.2;
}
.splice-nav-group-chevron {
  color: var(--ink-faint);
  transition: transform 150ms ease;
  display: inline-block;
}
.splice-nav-group[aria-expanded="true"] .splice-nav-group-chevron {
  transform: rotate(90deg);
}

.splice-nav-items {
  margin-top: 2px;
  margin-bottom: 8px;
  /* Sprint-3f Soft-Indent-Pattern (prompo-App-adoptiert, Apple/Stripe-Style):
     immer genau 1 Item ist indented (active im Idle, hovered bei User-Intent).
     Single-Signal: padding + color, kein background. 280ms cubic-bezier-Glide. */
}
.splice-nav-group[aria-expanded="false"] .splice-nav-items { display: none; }

.splice-nav-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 3px;
  text-align: left;
  text-decoration: none;
  color: var(--ink-mid);
  font-size: 13.5px;
  transition: padding 280ms cubic-bezier(0.2, 0, 0, 1),
              color   280ms cubic-bezier(0.2, 0, 0, 1);
}

/* Inactive Hover: glide rechts auf 20px. */
.splice-nav-item:hover {
  padding-left: 20px;
  color: var(--ink);
}

/* Active Idle: indent. */
.splice-nav-item[aria-current="page"],
.splice-nav-item[aria-current="true"] {
  padding-left: 20px;
  color: var(--ink-strong);
  font-weight: 500;
}

/* Active wenn IRGENDETWAS in der Group gehovert: Active glide zurueck. */
.splice-nav-items:hover .splice-nav-item[aria-current="page"],
.splice-nav-items:hover .splice-nav-item[aria-current="true"] {
  padding-left: 12px;
}

/* Active wenn Active selbst gehovert: bleibe indent (hoehere Specificity). */
.splice-nav-items:hover .splice-nav-item[aria-current="page"]:hover,
.splice-nav-items:hover .splice-nav-item[aria-current="true"]:hover {
  padding-left: 20px;
}

.splice-nav-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: inherit;
}
.splice-nav-icon svg { display: block; }

.splice-nav-label { font-size: 14px; flex: 1; }  /* Sprint-3j (2026-05-20): 13.5 → 14 (Stripe-Docs-Standard). */

.splice-sidebar-foot {
  padding: 8px;
  border-top: 1px solid var(--border);
}

.splice-footer-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 3px;
  text-align: left;
  color: var(--ink-mid);
  font-size: 13px;
  transition: background-color 120ms, color 120ms;
}
.splice-footer-item:hover { background: #f5f5f5; color: var(--ink-strong); }
.splice-icon { flex-shrink: 0; }

.splice-lang-toggle { gap: 12px; }
.splice-lang-toggle button {
  font-size: 12px;
  padding: 0;
  color: var(--ink-faint);
  transition: color 120ms;
}
.splice-lang-toggle button[aria-pressed="true"] {
  color: var(--ink-strong);
  font-weight: 500;
}
.splice-lang-toggle button:hover { color: var(--ink-strong); }
.splice-lang-toggle > span { color: var(--ink-disabled); }

/* ──────────────────────────────────────────────
   Main column
   ────────────────────────────────────────────── */
.splice-main {
  flex: 1;
  min-width: 0;
  /* Sprint-3n (2026-05-20): max-width-min 720 → 640 (Sync zu Blog-Wert,
     Cross-Page-Container-Konsistenz). Industry-Best-Practice: Layout-
     Container groesszuegig fuer Header/Cards/Footer, prose-Text-classes
     bekommen separate max-width 65ch (siehe .splice-body etc. unten). */
  max-width: clamp(640px, 56vw, 1040px);
}

.splice-section {
  padding: 96px 24px;
}
@media (min-width: 1024px) {
  .splice-section { padding: 128px 80px; }
}
/* All sections share the same #fafafa plane.
   Differentiation comes from spacing + typography only.
   Classes retained for potential future use; rules are intentionally empty. */
.splice-section-white { /* same #fafafa */ }
.splice-section-inset { /* same #fafafa */ }

.splice-hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 64px;
  padding-bottom: 96px;
}

.splice-section-intro {
  padding-top: 96px;
  padding-bottom: 32px;
}
@media (min-width: 1024px) {
  .splice-section-intro { padding-top: 128px; }
}
.splice-section-chapter {
  padding-top: 80px;
  padding-bottom: 80px;
}
@media (min-width: 1024px) {
  .splice-section-chapter { padding-top: 112px; padding-bottom: 112px; }
}
.splice-section-chapter-last { padding-bottom: 96px; }
@media (min-width: 1024px) {
  .splice-section-chapter-last { padding-bottom: 128px; }
}

.splice-section-quote {
  padding-top: 112px;
  padding-bottom: 112px;
}
@media (min-width: 1024px) {
  .splice-section-quote { padding-top: 160px; padding-bottom: 160px; }
}

.splice-section-beta {
  padding-top: 96px;
  padding-bottom: 160px;
}

.splice-row { width: 100%; }

/* ──────────────────────────────────────────────
   Typography
   ────────────────────────────────────────────── */
.splice-eyebrow {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 32px;
}
.splice-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-faint);
}
.splice-label {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.splice-eyebrow-small {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.splice-h1 {
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--ink-strong);
  margin-bottom: 32px;
}
@media (min-width: 1024px) {
  .splice-h1 { font-size: 52px; }
}

.splice-h2 {
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 500;
  color: var(--ink-strong);
  margin-bottom: 32px;
}
@media (min-width: 1024px) {
  .splice-h2 { font-size: 36px; }
}
.splice-h2-large { font-size: 32px; letter-spacing: -0.02em; line-height: 1.15; }
@media (min-width: 1024px) {
  .splice-h2-large { font-size: 44px; }
}

.splice-h3 {
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 500;
  color: var(--ink-strong);
  margin-bottom: 24px;
}
@media (min-width: 1024px) {
  .splice-h3 { font-size: 34px; }
}

.splice-lead {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-mid);
  max-width: 600px;
  margin-bottom: 40px;
}
@media (min-width: 1024px) {
  .splice-lead { font-size: 18px; }
}

.splice-body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-mid);
  /* Sprint-3n (2026-05-20): max-width 680px (~80ch) → 65ch (Industry-Sweet-
     Spot). §12-Korrektur 2026-05-20: 65ch zu drastisch fuer Cross-Page-
     Konsistenz (User-Empirie zu Blog). Auf 75ch (Industry-Upper-Bound)
     gesetzt — Symmetrie mit Blog .chapter-section p, immer noch im
     50-75ch Range. */
  max-width: 75ch;
}
@media (min-width: 1024px) {
  .splice-body { font-size: 17px; }
}
.splice-body + .splice-body { margin-top: 12px; }
.splice-body code {
  font-family: var(--font-mono);
  font-size: 14px;
  background: var(--paper-strong);
  padding: 2px 4px;
  border-radius: 2px;
  color: var(--ink-strong);
}

.splice-statement {
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--ink-strong);
  max-width: 640px;
}
@media (min-width: 1024px) {
  .splice-statement { font-size: 26px; }
}

.splice-pullquote {
  font-size: 28px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: 500;
  color: var(--ink-strong);
}
@media (min-width: 1024px) {
  .splice-pullquote { font-size: 40px; }
}

.splice-token-hint {
  font-size: 11.5px;
  color: var(--ink-faint);
  max-width: 600px;
  margin-bottom: 40px;
}

.splice-footnote {
  font-size: 12px;
  color: var(--ink-faint);
  max-width: 680px;
  margin-top: 20px;
}

/* ──────────────────────────────────────────────
   Hero — Prompt block + Tokens
   ────────────────────────────────────────────── */
.splice-prompt-block {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.8;
  color: var(--ink);
  box-shadow: var(--shadow-low);
}
@media (min-width: 1024px) {
  .splice-prompt-block { padding: 24px; }
}
.splice-prompt-row { margin-bottom: 4px; }
.splice-prompt-row:last-of-type { margin-bottom: 20px; }
.splice-prompt-body {
  margin-top: 20px;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  max-width: none;
}

.splice-token {
  background: var(--border);
  padding: 0 4px;
  border-radius: 2px;
  border: 0;
  outline: none;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: 500;
  color: var(--ink-strong);
  width: 8ch;
  min-width: 5ch;
  cursor: text;
  transition: background-color 120ms;
}
.splice-token::placeholder { color: var(--ink-mid); }
.splice-token:hover { background: #dcdcdc; }
.splice-token:focus { background: var(--border-strong); }

/* ──────────────────────────────────────────────
   CTAs
   ────────────────────────────────────────────── */
.splice-cta-row {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 640px) {
  .splice-cta-row { flex-direction: row; align-items: center; }
}

.splice-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 120ms;
  cursor: pointer;
}
.splice-cta-primary {
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow-low);
}
.splice-cta-primary:hover {
  background: #222;
  box-shadow: var(--shadow-mid);
}
.splice-cta-primary:active {
  transform: scale(0.98);
  box-shadow: var(--shadow-low);
}

.splice-cta-meta {
  font-size: 12px;
  color: var(--ink-faint);
}

/* ──────────────────────────────────────────────
   Chapter Mark (sub-section heading)
   ────────────────────────────────────────────── */
.splice-chapter-mark {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 28px;
}
.splice-chapter-num {
  font-family: var(--font-mono);
  font-size: 36px;
  line-height: 1;
  color: var(--ink-disabled);
}
@media (min-width: 1024px) {
  .splice-chapter-num { font-size: 44px; }
}
.splice-chapter-text { display: flex; flex-direction: column; }
.splice-chapter-prefix {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.splice-chapter-label {
  margin-top: 2px;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-mid);
}

/* ──────────────────────────────────────────────
   Flow demo pill
   ────────────────────────────────────────────── */
.splice-flow-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  margin-top: 12px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-mid);
  max-width: 100%;
  box-shadow: var(--shadow-low);
}
.splice-flow-bars {
  color: var(--ink-strong);
  letter-spacing: 0.1em;
  transition: opacity 300ms ease;
}

/* ──────────────────────────────────────────────
   Extension surfaces grid
   ────────────────────────────────────────────── */
.splice-surface-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 24px;
  max-width: 680px;
  margin-top: 24px;
  margin-bottom: 24px;
}
@media (min-width: 640px) { .splice-surface-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .splice-surface-grid { grid-template-columns: repeat(4, 1fr); } }
.splice-surface-grid li {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-strong);
  letter-spacing: -0.005em;
}

/* ──────────────────────────────────────────────
   Claude Code code-block
   ────────────────────────────────────────────── */
.splice-code-block {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px;
  margin-top: 12px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-mid);
  max-width: 100%;
  box-shadow: var(--shadow-low);
}
.splice-code-block code {
  color: var(--ink-strong);
  background: none;
  padding: 0;
  font-family: inherit;
}

/* ──────────────────────────────────────────────
   Pricing grid
   ────────────────────────────────────────────── */
.splice-pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
@media (min-width: 1024px) {
  .splice-pricing-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  .splice-pricing-col:first-child { padding-right: 48px; }
  .splice-pricing-col:last-child { padding-left: 48px; border-left: 1px solid var(--border); }
}
.splice-pricing-col {
  transition: box-shadow 180ms ease, transform 80ms ease;
}
.splice-pricing-col:hover {
  box-shadow: var(--shadow-low);
}
.splice-pricing-title { font-size: 20px; font-weight: 500; color: var(--ink-strong); margin-bottom: 8px; }
.splice-pricing-price { font-size: 22px; color: var(--ink-strong); margin-bottom: 24px; }
.splice-pricing-body { font-size: 15px; color: var(--ink-mid); line-height: 1.7; }

/* ──────────────────────────────────────────────
   FAQ Accordion (native <details>)
   ────────────────────────────────────────────── */
.splice-faq {
  border-top: 1px solid var(--border);
}
.splice-faq-item { border-bottom: 1px solid var(--border); }
.splice-faq-item > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 0;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink-strong);
  transition: color 120ms;
}
.splice-faq-item > summary::-webkit-details-marker { display: none; }
.splice-faq-item > summary:hover { color: var(--ink-mid); }
.splice-faq-chevron {
  flex-shrink: 0;
  color: var(--ink-faint);
  margin-top: 4px;
  transition: transform 200ms ease;
}
.splice-faq-item[open] .splice-faq-chevron { transform: rotate(180deg); }
.splice-faq-item > p {
  font-size: 15px;
  color: var(--ink-mid);
  line-height: 1.7;
  padding-bottom: 24px;
}

/* ──────────────────────────────────────────────
   Beta form
   ────────────────────────────────────────────── */
.splice-beta-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 40px;
}
@media (min-width: 640px) {
  .splice-beta-form { flex-direction: row; align-items: flex-end; }
}
.splice-beta-label {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.splice-beta-input {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-strong);
  padding: 8px 0;
  font-size: 16px;
  color: var(--ink);
  font-family: inherit;
  outline: none;
  transition: border-color 120ms;
}
.splice-beta-input::placeholder { color: var(--ink-faint); }
.splice-beta-input:focus { border-bottom-color: var(--ink-strong); }

/* ──────────────────────────────────────────────
   Page footer
   ────────────────────────────────────────────── */
.splice-footer {
  padding: 48px 24px;
}
@media (min-width: 1024px) {
  .splice-footer { padding: 48px 80px; }
}
.splice-footer-row {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}
@media (min-width: 1024px) {
  .splice-footer-row { flex-direction: row; align-items: center; }
}
/* Sprint-3l §12-Korrektur-2 (2026-05-20): Footer-SSOT-Layout-Self-Awareness.
   7 Inline-Pages + Blog haben body.splice-page--inline → body-padding-left=
   sidebar-width + padding-right=right-sidebar-width. Footer fuellt body-
   content-box, respektiert Sidebar+Right-TOC automatisch.
   Homepage Landing hat keine .splice-page--inline-Klasse (nutzt .splice-shell-
   flex statt fixed-overlay-Sidebar) → body hat keine padding. Footer als
   direct body-child wuerde edge-to-edge gehen. Fix: Footer bekommt selbst
   margin-left/right matching Sidebar-Layout, NUR wenn body keine Inline-
   Klasse hat (=Homepage). Damit: Cross-Page-Footer-Visual identisch. */
@media (min-width: 1024px) {
  body:not(.splice-page--inline) .splice-footer { margin-left: var(--sidebar-width); }
}
@media (min-width: 1100px) {
  body:not(.splice-page--inline) .splice-footer { margin-right: var(--right-sidebar-width); }
}

.splice-footer-meta { display: flex; flex-direction: column; gap: 6px; }
.splice-footer-copy { font-size: 12px; color: var(--ink-mid); }
.splice-footer-version {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-faint);
}
/* Sprint-3l (2026-05-20): Author-Statement + Copyright-Block (best-of-both-
   worlds Unification mit Blog-Footer-Content). */
.splice-footer-author {
  font-size: 12px;
  color: var(--ink-mid);
  margin-top: 8px;
}
.splice-footer-author strong { color: var(--ink-strong); font-weight: 500; }
.splice-footer-author-copy {
  font-size: 12px;
  color: var(--ink-faint);
}
/* Sprint-3l: AI-Training-Prohibition-Clause (juristisch substanzieller PMS-
   Content-Schutz, jetzt global). Separat-Row, kleinere Schrift, max-width
   65ch (UXPin-Lesbarkeits-Optimum), border-top als visueller Separator. */
.splice-footer-legal {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.splice-footer-prohibition {
  font-size: 11.5px;
  color: var(--ink-faint);
  line-height: 1.5;
  max-width: 65ch;
  margin: 0;
}
.splice-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}
.splice-footer-links a,
.splice-footer-cookie {
  position: relative;
  font-size: 12px;
  color: var(--ink-mid);
  background: none;
  border: 0;
  padding: 0 0 2px;
  cursor: pointer;
  font: inherit;
  font-family: inherit;
}
/* Underline-slide — function-led affordance for "link is link". */
.splice-footer-links a::after,
.splice-footer-cookie::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--ink-strong);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 180ms cubic-bezier(0.2, 0, 0, 1);
}
.splice-footer-links a:hover,
.splice-footer-cookie:hover { color: var(--ink-strong); }
.splice-footer-links a:hover::after,
.splice-footer-cookie:hover::after { transform: scaleX(1); }

/* ──────────────────────────────────────────────
   Tier-A scroll/view animations (native CSS).
   Degrade gracefully on browsers without support
   (everything renders at final state).
   ────────────────────────────────────────────── */

/* Section reveal — children stagger in (eyebrow → heading → body → …).
   Triggered by JS IntersectionObserver adding .is-revealed when the
   section's top half enters viewport. */
[data-reveal] > div > * {
  opacity: 0;
  transition: opacity 700ms cubic-bezier(0.2, 0, 0, 1);
}
[data-reveal].is-revealed > div > * {
  opacity: 1;
}
[data-reveal].is-revealed > div > *:nth-child(1)  { transition-delay:   0ms; }
[data-reveal].is-revealed > div > *:nth-child(2)  { transition-delay:  80ms; }
[data-reveal].is-revealed > div > *:nth-child(3)  { transition-delay: 160ms; }
[data-reveal].is-revealed > div > *:nth-child(4)  { transition-delay: 240ms; }
[data-reveal].is-revealed > div > *:nth-child(5)  { transition-delay: 320ms; }
[data-reveal].is-revealed > div > *:nth-child(6)  { transition-delay: 400ms; }
[data-reveal].is-revealed > div > *:nth-child(7)  { transition-delay: 480ms; }
[data-reveal].is-revealed > div > *:nth-child(8)  { transition-delay: 560ms; }
[data-reveal].is-revealed > div > *:nth-child(9)  { transition-delay: 640ms; }
[data-reveal].is-revealed > div > *:nth-child(10) { transition-delay: 720ms; }
[data-reveal].is-revealed > div > *:nth-child(n+11) { transition-delay: 800ms; }

/* Footer is data-reveal but doesn't follow the div>* shape — fade as one. */
footer[data-reveal] {
  opacity: 0;
  transition: opacity 700ms cubic-bezier(0.2, 0, 0, 1);
}
footer[data-reveal].is-revealed {
  opacity: 1;
}

/* Sprint-9b ZWEITER-REVERT 2026-05-21: auch mit animation-duration: 1ms
   produzierte das @supports-Pattern komplett-leeren Main-Content auf Chrome
   (User-Empirie nach Re-Impl-Push a3c040d). 1ms-Hypothese widerlegt.
   §9-STOP nach 2 Rollbacks Pflicht. Sub-Sprint-9b BLOCKED, B93-Backlog.
   Echte Root-Cause unklar — Phase-7-Pre-Audit in nächster Session.
   Verdacht: animation-range entry-Syntax in Chrome 2026-05 hat anderes
   Verhalten als angenommen, ODER [data-reveal] > div > * Selektor matched
   anders als gedacht, ODER fundamentaler Spec-Mismatch.
   Bestand-Pattern (JS-IO + transition Z. 1515-1541) wieder Primary. */

/* CTA caret-blink — Terminal-affines 'awaiting input'-Signal.
   Stoppt on Hover/Focus (User hat Aufmerksamkeit). */
[data-cta-caret]::after {
  content: ' |';
  display: inline;
  margin-left: 4px;
  animation: splice-caret-blink 1s steps(2) infinite;
}
@keyframes splice-caret-blink {
  50% { opacity: 0; }
}
[data-cta-caret]:hover::after,
[data-cta-caret]:focus-visible::after {
  animation: none;
  opacity: 1;
}

/* Reduced motion: hard freeze. Keep box-shadow/color transitions (they're not motion). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .splice-progress-bar,
  [data-reveal],
  [data-reveal] > div > *,
  footer[data-reveal],
  [data-cta-caret]::after,
  .splice-flow-bars,
  .splice-faq-chevron,
  .splice-nav-group-chevron,
  .splice-footer-links a::after,
  .splice-footer-cookie::after,
  .splice-search-dropdown {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .splice-footer-links a::after,
  .splice-footer-cookie::after {
    transform: scaleX(1) !important;
  }
}

/* ──────────────────────────────────────────────
   Responsive: <1024px → mobile layout
   ────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .splice-sidebar { display: none; }
  .splice-mobile-bar { display: flex; }
  .splice-shell { flex-direction: column; }
}

/* ──────────────────────────────────────────────
   Versions-Vergleich-Demo (Sprint 3c · B54c)
   1:1-Parity mit echtem PMS-App-Code (App-Parity-Pivot 2026-05-19)
   Quellen: prompo/frontend/app/globals.css Z. 247-345 (CodeMirror Diff-View)
            + prompo/frontend/components/editor/editor-compare-header.tsx
            + prompo/packages/extension-styles/tokens.css
   App-Pattern: CodeMirror Unified-Merge mit .cm-deletedChunk (border-left)
                + .cm-changedLine (box-shadow), EditorCompareHeader (border-b).
   ────────────────────────────────────────────── */
.splice-version-compare {
  background: var(--paper-mid);                     /* parity globals.css Z. 196 .prompt-input.background */
  padding: 16px 0;
  margin-top: 32px;
  min-height: 256px;                                /* CLS-Reservierung 8px-Grid (32×8). Math: 32px padding + 36px header + 5×24.15px lines = 204.9px. Headroom 51.1px. */
}
.splice-version-compare-header {
  /* parity EditorCompareHeader.tsx Z. 34: mb-3 flex items-center gap-2 border-b border-border-soft pb-2 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid var(--border-soft);
  padding: 0 16px 8px;
  margin-bottom: 12px;
  font-family: var(--font-mono);                    /* parity tokens.css Z. 71-72 */
  font-size: 13.5px;                                /* parity text-[13.5px] EditorCompareHeader Z. 36 */
  line-height: 1.55;
  color: var(--ink-mid);                            /* parity text-ink-mid EditorCompareHeader Z. 36 */
  flex-wrap: wrap;
}
.splice-version-compare-delta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
}
.splice-version-compare-body {
  padding: 0 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
  overflow-x: auto;
}
.splice-vc-line {
  /* Base — analog .cm-line (CodeMirror). Keine Block-Indikator-Styles. */
  display: block;
  padding: 2px 8px;
  position: relative;
}
.splice-vc-del {
  /* parity .cm-deletedChunk (globals.css Z. 324-327) */
  border-left: 2px solid var(--diff-removed);
  padding-left: 6px;
  background: var(--diff-removed-tint);
  text-decoration: none;                            /* override Browser-default <del> line-through */
}
.splice-vc-ins {
  /* App-Pattern .cm-changedLine (globals.css Z. 341-345) nutzt box-shadow inset
     wegen CodeMirror-Cursor-/Selection-Höhenberechnung (App-Doku Z. 309-310).
     Splicelog ist statisches HTML ohne CodeMirror → Constraint entfällt.
     border-left visuell-symmetrisch zu .splice-vc-del (User-Browser-Test 2026-05-19:
     box-shadow inset war nicht ausreichend sichtbar). Gleicher visueller App-Intent
     (2px farbiger Indikator links), andere CSS-Property aus Render-Begründung. */
  border-left: 2px solid var(--diff-added);
  padding-left: 6px;                                /* parity globals.css Z. 344 */
  background: var(--diff-added-tint);
  text-decoration: none;                            /* override Browser-default <ins> underline (App .cm-changedLine ist <div>, hat kein underline) */
}
@media (max-width: 720px) {
  .splice-version-compare {
    padding: 12px 0;
    min-height: 288px;                              /* 8px-Grid 36×8. Math: 24px padding + 53.2px header + 5×22.6px lines = 190.2px. Headroom 97.8px. */
  }
  .splice-version-compare-header,
  .splice-version-compare-body { padding-left: 12px; padding-right: 12px; }
  .splice-version-compare-body { font-size: 12px; }
}