/* SFOUR Consulting — design system v2 (Dual-Track, grayscale-strict).
   v1 tokens (--bg / --line / --radius / --space-N) remain for backwards
   compat during the staged refactor; new screens consume the v2 tokens
   below (--paper / --hairline-light / --r-card / --type-* / --gloss-*).
*/

/* ============================================================
   Self-hosted webfonts — woff2 only.
   Inter Tight     : prose voice (headlines, body, UI)
   JetBrains Mono  : meta voice (eyebrows, tags, counts, mono labels)
   font-display:swap — no FOIT; the Inter system fallback bridges the
   first paint while woff2 streams in.
   ============================================================ */
@font-face {
  font-family: "Inter Tight";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/inter-tight/inter-tight-v9-latin_latin-ext-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Tight";
  font-style: italic; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/inter-tight/inter-tight-v9-latin_latin-ext-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/inter-tight/inter-tight-v9-latin_latin-ext-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Tight";
  font-style: italic; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/inter-tight/inter-tight-v9-latin_latin-ext-500italic.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/inter-tight/inter-tight-v9-latin_latin-ext-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/inter-tight/inter-tight-v9-latin_latin-ext-700.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/jetbrains-mono/jetbrains-mono-v24-latin_latin-ext-regular.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/jetbrains-mono/jetbrains-mono-v24-latin_latin-ext-500.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/jetbrains-mono/jetbrains-mono-v24-latin_latin-ext-600.woff2") format("woff2");
}

:root {
  /* ----------------------------------------------------------
     v1 tokens — kept verbatim so existing rules don't shift.
     ---------------------------------------------------------- */
  --bg: #ffffff;
  --bg-alt: #fafafa;
  --ink: #0a0a0a;
  --ink-soft: #3a3a3a;
  --ink-muted: #6a6a6a;
  --line: #e8e8e8;
  --line-strong: #0a0a0a;
  --accent: #0a0a0a;
  --max-width: 1120px;
  --content-width: 760px;
  /* Radius scale — global rounded-corner system. +50% bumps over the
     prior set (xs 6→9, sm 8→12, default 12→18, md 14→21, lg 18→27).
     Pills (999px) and circles (50%) remain hardcoded by intent. */
  --radius-xs:   9px;     /* tags, chips, small badges */
  --radius-sm:  12px;     /* inputs, selects, small buttons */
  --radius:     18px;     /* default — cards, panels, popups */
  --radius-md:  21px;     /* mid-size cards (CTA, methodology) */
  --radius-lg:  27px;     /* large hero / spotlight tiles */
  --radius-pill: 999px;   /* pill-shaped buttons (unchanged) */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 2.5rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 5rem;
  --space-10: 7rem;
  --t-fast: 120ms ease;
  --t-med: 200ms ease;

  /* ----------------------------------------------------------
     v2 tokens — Dual-Track design system.
     ---------------------------------------------------------- */

  /* Surfaces & ink — strict grayscale.
     Brand color appears ONLY in the SFOUR mark (sfour-mark.svg).
     Anywhere else, type and surface stay grayscale. */
  --paper:        #f4f6f9;   /* light surface base — sehr helles KÜHLES Grau (Blau-Stich), damit weiße Kacheln + Schatten dezent abheben */
  --paper-warm:   #f4f5f7;   /* secondary surface — cool light gray (was cream) */
  --ink-deep:     #050505;   /* footer / deepest surface */
  /* (--ink, --ink-soft, --ink-muted are already defined in v1 above) */
  --body-light:   #3a3a3a;   /* body text on light (alias of --ink-soft) */
  --body-dark:    #c8c8c4;   /* body text on dark */
  --muted-light:  #6a6a6a;   /* muted text on light (alias of --ink-muted) */
  --muted-dark:   #a0a0a0;   /* muted text on dark */
  --hairline-light: rgba(0, 0, 0, 0.08);
  --hairline-dark:  rgba(255, 255, 255, 0.08);
  --glass-dark:   rgba(10, 10, 10, 0.72);
  --glass-light:  rgba(255, 255, 255, 0.85);

  /* Type families — woff2 self-hosted above. */
  --font-prose: "Inter Tight", -apple-system, BlinkMacSystemFont,
                "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-meta:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo,
                Consolas, "Liberation Mono", monospace;

  /* Type scale (px / line-height / weight applied at usage site).
     Display sizes are static — design intent is desktop-first; mobile
     scales handled by component @media rules, not by clamp(). */
  --type-display-xl: 72px;   /* hero homepage, kontakt */
  --type-display-l:  64px;   /* mediathek hero */
  --type-display-m:  56px;   /* detail-page hero */
  --type-h2:         36px;   /* page section titles */
  --type-h2-s:       32px;   /* sub-sections */
  --type-h3:         28px;   /* CTA bands */
  --type-h3-s:       26px;   /* detail-page H2 / CTA cards */
  --type-h4:         22px;   /* advisor names, location card title */
  --type-body-l:     17px;   /* hero leads, intro paragraphs */
  --type-body:       16px;   /* detail body */
  --type-body-s:     15px;   /* secondary body */
  --type-ui:         14px;   /* buttons, nav, links */
  --type-ui-s:       13px;   /* nav-active, sort buttons, related links */
  --type-mono-eyebrow: 10.5px; /* eyebrows above titles, status badges */
  --type-mono-label:   11px;   /* counts, tags, coordinates */
  --type-mono-tiny:    10px;   /* filter section headers, footer meta */

  /* Letter-spacings paired with the type scale. */
  --ls-display:    -0.03em;   /* display-xl..m */
  --ls-h2:         -0.02em;
  --ls-tight:      -0.015em;  /* tile titles */
  --ls-mono:        0.12em;   /* mono eyebrows / labels */
  --ls-mono-tight:  0.06em;   /* mono inline labels */
  --ls-mono-soft:   0.10em;   /* mono filter / breadcrumbs */

  /* v2 radii — additive next to v1.
     21px is the brand "card" radius — softer than 16, sharper than 24. */
  --r-input:  10px;
  --r-search: 14px;
  --r-card:   21px;
  --r-mini:   12px;
  --r-pill:   999px;

  /* Glossy dark-surface formula — the recipe that turns flat dark into
     a "premium panel". Applied via composition:
       background: linear-gradient(180deg, #161616 0%, var(--ink) 100%);
       border: 1px solid var(--hairline-dark);
       box-shadow: var(--gloss-shadow);
       + ::before with var(--gloss-top-highlight) for the radial gleam.
     See `.gloss-panel` utility further down (added later in step 1).  */
  --gloss-bg: linear-gradient(180deg, #161616 0%, #0a0a0a 100%);
  --gloss-border: 1px solid var(--hairline-dark);
  --gloss-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 24px 48px rgba(0, 0, 0, 0.4);
  --gloss-top-highlight:
    radial-gradient(ellipse 80% 40% at 50% 0%,
                    rgba(255, 255, 255, 0.06) 0%,
                    transparent 60%);

  /* Sticky header glass — used on the v2 header. */
  --glass-header-bg: rgba(10, 10, 10, 0.72);
  --glass-header-blur: blur(18px) saturate(140%);

  /* Layout maxes. */
  --max-content: 1280px;   /* primary content rail (was --max-width 1120) */
  --max-prose:    760px;   /* long-form text body */
  --max-detail:   980px;   /* detail hero block */
}

* { box-sizing: border-box; }

/* Author rules with explicit `display:` (flex/inline-flex/grid) override the
   user-agent `[hidden]{display:none}` default. Re-assert it globally so the
   `hidden` attribute reliably hides any element. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-prose);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   v2 utilities — design-system primitives consumed by section
   templates. Each utility is composed from the v2 tokens above so
   future tokens can shift the look without rewriting consumers.
   ============================================================ */

/* Glossy dark panel — the recipe that turns flat dark mode into a
   "premium" surface. Used by: Tile3D, CTA-Card, Service-Detail hero
   panel, Bridge-Band. Opt-in via class — does NOT replace the
   .section--dark / .hero--dark theming yet (those stay until their
   templates migrate in step 3).

   Composition:
     - Linear gradient body (#161616 → #0a0a0a)
     - Hairline border on dark
     - Drop shadow + inset top edge highlight via box-shadow
     - Radial top-highlight via ::before (the "gloss" reflection)
     - Children lifted above the ::before via z-index:1

   Children rule: any direct child of .gloss-panel is bumped to
   z-index:1 so the radial highlight stays underneath without needing
   per-consumer relative positioning. Absolute-positioned children
   that need to sit ABOVE the panel (e.g. corner badges) inherit the
   z-index:1 too — explicit z-index:2+ if they need to layer over
   siblings.
   */
.gloss-panel {
  position: relative;
  background: var(--gloss-bg);
  border: var(--gloss-border);
  border-radius: var(--r-card);
  box-shadow: var(--gloss-shadow);
  color: var(--paper);
  overflow: hidden;
}
.gloss-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--gloss-top-highlight);
}
.gloss-panel > * {
  position: relative;
  z-index: 1;
}
/* Square edge variant — for full-bleed bands (Bridge, Footer-Band)
   that span the viewport without rounded corners. */
.gloss-panel--flat { border-radius: 0; border-left: 0; border-right: 0; }

/* ============================================================
   Cluster-Card Tile3D (Phase 5e) — design-handoff Service-Cluster
   look. Two-region card: gradient header band (no photo, just an
   abstract gray gradient with a subtle grid pattern) + body with
   short eyebrow + title. Active when renderTile is called with
   `cluster_card_mode: true`.
   ============================================================ */
.tile.tile--cluster-card {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.tile-cluster-header {
  position: relative;
  display: block;
  height: 160px;
  background: linear-gradient(135deg, #ececea 0%, #fafaf9 50%, #d8d8d4 100%);
  overflow: hidden;
}
.tile-cluster-header::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.04) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(0deg,  rgba(0,0,0,0.04) 0 1px, transparent 1px 60px);
}
.tile-cluster-header::after {
  /* Subtle top highlight */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 30%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, transparent 100%);
}
.tile-cluster-chip {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 1;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--hairline-light);
  border-radius: var(--r-pill);
  font-family: var(--font-meta);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: var(--ls-mono-soft);
  text-transform: uppercase;
  color: var(--ink);
}
.tile.tile--cluster-card .tile-card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 20px 22px 22px;
}
.tile.tile--cluster-card .tile-eyebrow { margin: 0; }
.tile.tile--cluster-card .tile-title {
  margin: 0;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--ls-tight);
}

/* ============================================================
   Mediathek-Strip (Phase 5e) — agent-curated mixed-scale grid on
   home. Three rows of decreasing tile size:
     row 1 (1.6fr 1fr 1fr) — 1× Tile3D + 2× TileFlat M
     row 2 (4 cols)         — 4× TileFlat M
     row 3 (3 cols)         — 3× TileMini
   ============================================================ */
.mt-strip { padding: 0; }
.mt-strip-row { display: grid; gap: 16px; margin-bottom: 16px; }
.mt-strip-row--top   { grid-template-columns: 1.6fr 1fr 1fr; }
.mt-strip-row--mid   { grid-template-columns: repeat(4, 1fr); }
.mt-strip-row--small {
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 0;
  margin-top: 8px;
}
@media (max-width: 1024px) {
  .mt-strip-row--top { grid-template-columns: 1.6fr 1fr; }
  .mt-strip-row--top > .tile:nth-child(3) { display: none; }
  .mt-strip-row--mid { grid-template-columns: repeat(2, 1fr); }
  .mt-strip-row--small { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .mt-strip-row--top   { grid-template-columns: 1fr; }
  .mt-strip-row--top > .tile:nth-child(2),
  .mt-strip-row--top > .tile:nth-child(3) { display: block; }
  .mt-strip-row--mid   { grid-template-columns: 1fr; }
  .mt-strip-row--small { grid-template-columns: 1fr; }
}

/* ============================================================
   Bridge-Band (Phase 5d) — design-handoff "Eine Beratung, die
   beide Sprachen spricht" full-bleed dark band.
   Activated via section.template === "ctaBand" + config.kind === "bridge". Agent picks
   variant + when to surface the band via the standard YAML/trigger
   system; this CSS is just the visual primitive.
   ============================================================ */
.bridge-band {
  background: var(--ink);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 0;
  padding: 0;
}
.bridge-band::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--gloss-top-highlight);
}
.bridge-band-inner {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  padding: 80px 32px;
  text-align: center;
}
.bridge-band-eyebrow {
  font-family: var(--font-meta);
  font-size: var(--type-mono-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--muted-dark);
  margin: 0 0 16px;
  display: block;
}
.bridge-band-headline {
  font-family: var(--font-prose);
  font-weight: 500;
  font-size: 48px;
  letter-spacing: var(--ls-h2);
  line-height: 1.05;
  color: var(--paper);
  margin: 0 0 16px;
}
.bridge-band-headline-muted {
  color: var(--muted-dark);
  font-style: italic;
  font-weight: 400;
}
.bridge-band-lead {
  font-family: var(--font-prose);
  font-size: var(--type-body);
  line-height: 1.55;
  color: var(--body-dark);
  margin: 0 auto;
  max-width: 580px;
}
@media (max-width: 720px) {
  .bridge-band-inner { padding: 56px 24px; }
  .bridge-band-headline { font-size: 32px; }
}

/* ============================================================
   Mediathek v2 — design-handoff layout
   (SFOUR Mediathek.html / mediathek.jsx)

   Structure:
     .mt-shell
       .mt-hero        — dark band with eyebrow + split-headline + glass search
       .mt-picks       — dark "Agent-Auswahl · diese Woche" strip
       .mt-body        — light surface, two-col: rail (260px) + main (1fr)
         .mt-rail      — sticky filter rail
         .mt-main      — count + sort header + mixed-scale grid

   All glass surfaces, type, radii flow from the v2 tokens.
   ============================================================ */
.mt-shell { background: var(--paper); }

/* ---- Hero band ------------------------------------------------- */
.mt-hero {
  background: var(--ink);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--hairline-dark);
  isolation: isolate;
}
.mt-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--gloss-top-highlight);
}
.mt-hero-inner {
  position: relative;
  /* Hero + Erklär-Block bleiben in der Standardbreite (1280). Nur der Body
     (Rail + Grid + Podcast-Panel) darf nach rechts breiter werden. */
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 56px 32px 40px;
}
.mt-hero-eyebrow {
  font-family: var(--font-meta);
  font-size: var(--type-mono-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--muted-dark);
  margin: 0 0 14px;
}
.mt-hero-headline {
  font-family: var(--font-prose);
  font-weight: 500;
  font-size: var(--type-display-l);
  line-height: 1.02;
  letter-spacing: var(--ls-display);
  color: var(--paper);
  margin: 0 0 12px;
  max-width: 1100px;
}
.mt-hero-headline .mt-headline-muted {
  color: var(--muted-dark);
  font-style: italic;
  font-weight: 400;
}
.mt-hero-lead {
  font-family: var(--font-prose);
  font-size: var(--type-body-l);
  line-height: 1.55;
  color: var(--body-dark);
  margin: 0;
  max-width: 680px;
}

/* Glass search bar ---------------------------------------------- */
.mt-search {
  margin-top: 28px;
  display: flex;
  gap: 12px;
  align-items: center;
  max-width: 720px;
}
.mt-search-bar {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-search);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.mt-search-bar:focus-within {
  border-color: rgba(255, 255, 255, 0.32);
}
.mt-search-icon { color: var(--muted-dark); flex-shrink: 0; }
.mt-search-input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--paper);
  font-family: var(--font-prose);
  font-size: 15px;
  min-width: 0;
}
.mt-search-input::placeholder { color: var(--muted-dark); }
.mt-search-keycap {
  font-family: var(--font-meta);
  font-size: var(--type-mono-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-mono-soft);
  text-transform: uppercase;
  color: var(--muted-dark);
  flex-shrink: 0;
}

/* ---- Agent picks strip ---------------------------------------- */
.mt-picks {
  background: var(--ink);
  border-bottom: 1px solid var(--hairline-dark);
}
.mt-picks-inner {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 32px 56px;
}
.mt-picks-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 18px;
  gap: 16px;
}
.mt-picks-eyebrow {
  font-family: var(--font-meta);
  font-size: var(--type-mono-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--muted-dark);
}
.mt-picks-link {
  font-family: var(--font-prose);
  font-size: var(--type-ui-s);
  color: var(--muted-dark);
  text-decoration: none;
  white-space: nowrap;
}
.mt-picks-link:hover { color: var(--paper); }
/* Legacy mt-picks-grid only applies when the renderer has NOT promoted
   the wrap to a tile-grid. Otherwise the tile-grid--portrait rule below
   wins (3 equal cols). */
.mt-picks-grid:not(.tile-grid) {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 16px;
}
@media (max-width: 960px) {
  .mt-picks-grid:not(.tile-grid) { grid-template-columns: 1fr; }
}

/* ---- Erklär-Block (ersetzt die Agent-Auswahl) ----------------- */
/* Erklärt die agentengeführte Funktionsweise der Startseite und lädt ein,
   hier ALLE Inhalte frei zu lesen. Canvas-Stil: helle Boxen mit Line-Icons. */
.mt-explainer {
  background: var(--paper, #fafafa);
  border-bottom: 1px solid var(--hairline-light, #e8e8e8);
}
.mt-explainer-inner {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 44px 32px;
}
.mt-explainer-eyebrow {
  font-family: var(--font-meta);
  font-size: var(--type-mono-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-muted, #6a6a6a);
  margin: 0 0 8px;
}
.mt-explainer-headline {
  font-family: var(--font-prose);
  font-weight: 500;
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: var(--ls-h2, -0.02em);
  color: var(--ink, #0a0a0a);
  margin: 0 0 24px;
  max-width: 820px;
}
.mt-explainer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.mt-explainer-card {
  border: 1px solid var(--hairline-light, #e8e8e8);
  background: #fff;
  border-radius: var(--radius, 18px);
  padding: 20px;
}
.mt-explainer-ic {
  display: block;
  width: 26px;
  height: 26px;
  margin-bottom: 12px;
  color: var(--ink, #0a0a0a);
}
.mt-explainer-ic svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mt-explainer-card b {
  display: block;
  font-family: var(--font-prose);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink, #0a0a0a);
  margin-bottom: 6px;
}
.mt-explainer-card p {
  margin: 0;
  font-family: var(--font-prose);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft, #3a3a3a);
}
@media (max-width: 760px) {
  .mt-explainer-grid { grid-template-columns: 1fr; }
}

/* ---- Body: rail + grid ---------------------------------------- */
.mt-body {
  background: var(--paper);
}
.mt-body-inner {
  /* Standardbreite (1280), zentriert — bündig mit Hero/Erklär-Block. Rail +
     Grid + Podcast-Panel (260px = Rail-Breite) passen innerhalb dieser
     Breite; das Panel ist rechtsbündig zu den Boxen darüber. */
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 48px 32px 80px;
  display: flex;
  align-items: flex-start;
  gap: 0;
}

/* ---- Sticky filter rail (260px) ------------------------------- */
.mt-rail {
  width: 260px;
  flex-shrink: 0;
  position: sticky;
  top: 89px;            /* below the 70-ish px sticky header */
  align-self: flex-start;
  max-height: calc(100vh - 109px);
  overflow-y: auto;
  /* Design an das Podcast-Panel angeglichen: als gerundete Karte mit Rahmen
     und Polster (nur Optik — Filter-Verhalten unverändert). */
  background: var(--paper, #fafafa);
  border: 1px solid var(--line, #e8e8e8);
  border-radius: 18px;
  padding: 16px 14px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.06);
}
.mt-rail-section { margin-bottom: 20px; }
.mt-rail-section:last-of-type { margin-bottom: 8px; }
.mt-rail-head {
  font-family: var(--font-meta);
  font-size: var(--type-mono-tiny);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--muted-light);
  display: block;
  margin: 0 0 10px;
}
.mt-rail-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mt-rail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: transparent;
  color: var(--body-light);
  border: 0;
  border-radius: 8px;
  font-family: var(--font-prose);
  font-size: var(--type-ui);
  font-weight: 400;
  cursor: pointer;
  text-align: left;
  transition: background 120ms ease, color 120ms ease;
}
.mt-rail-row:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--ink);
}
.mt-rail-row.is-active {
  background: var(--ink);
  color: var(--paper);
  font-weight: 500;
}
.mt-rail-row.is-active .mt-rail-count { color: var(--muted-dark); }
.mt-rail-row-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.mt-rail-count {
  font-family: var(--font-meta);
  font-size: var(--type-mono-eyebrow);
  letter-spacing: var(--ls-mono-soft);
  color: var(--muted-light);
  flex-shrink: 0;
}

/* Year row — pill chips inline */
.mt-rail-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mt-rail-pill {
  padding: 6px 12px;
  background: transparent;
  color: var(--body-light);
  border: 1px solid var(--hairline-light);
  border-radius: var(--r-pill);
  font-family: var(--font-meta);
  font-size: var(--type-mono-label);
  letter-spacing: var(--ls-mono-tight);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.mt-rail-pill:hover { color: var(--ink); border-color: var(--ink); }
.mt-rail-pill.is-active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* Themen-Filter — Taxonomie-Gruppen (Hauptbegriff → Unterbegriffe).
   <details>-Collapsibles: Hauptbegriff als Zeile (wie mt-rail-row),
   Unterbegriffe als Pill-Wolke darunter. */
.mt-rail-themen {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mt-themen-group { border-radius: 8px; }
.mt-themen-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  font-family: var(--font-prose);
  font-size: var(--type-ui);
  color: var(--body-light);
  cursor: pointer;
  list-style: none;
  transition: background 120ms ease, color 120ms ease;
}
.mt-themen-head::-webkit-details-marker { display: none; }
.mt-themen-head::before {
  content: "+";
  font-family: var(--font-meta);
  font-size: var(--type-mono-label);
  color: var(--muted-light);
  width: 12px;
  flex-shrink: 0;
}
.mt-themen-group[open] > .mt-themen-head::before { content: "−"; }
.mt-themen-head:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--ink);
}
.mt-themen-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.mt-themen-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 12px 10px 24px;
}
.mt-themen-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mt-themen-count {
  font-size: var(--type-mono-eyebrow);
  color: var(--muted-light);
}
.mt-themen-pill.is-active .mt-themen-count { color: var(--muted-dark); }

/* "Filter zurücksetzen" ghost button at the bottom */
.mt-rail-reset {
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: 1px solid var(--hairline-light);
  border-radius: 8px;
  font-family: var(--font-prose);
  font-size: 13px;
  color: var(--body-light);
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease;
}
.mt-rail-reset:hover { border-color: var(--ink); color: var(--ink); }

/* ---- Main grid pane ------------------------------------------- */
.mt-main {
  flex: 1;
  min-width: 0;
  padding-left: 32px;
}
.mt-main-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 20px;
  /* Auf die Breite des darunterliegenden Portrait-Grids begrenzen, damit die
     Sortierung (rechts) bündig mit der rechten Kante der Kacheln sitzt. */
  max-width: calc(340px * 2 + var(--space-4));
}
.mt-main-count {
  font-family: var(--font-meta);
  font-size: var(--type-mono-label);
  font-weight: 500;
  letter-spacing: var(--ls-mono-soft);
  text-transform: uppercase;
  color: var(--muted-light);
}
.mt-main-sort {
  display: flex;
  gap: 4px;
}
.mt-sort-btn {
  padding: 6px 12px;
  background: transparent;
  color: var(--body-light);
  border: 1px solid var(--hairline-light);
  border-radius: var(--r-pill);
  font-family: var(--font-prose);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.mt-sort-btn:hover { color: var(--ink); border-color: var(--ink); }
.mt-sort-btn.is-active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* Toolbar-Rechtsgruppe: Ansicht-Umschalter (Portrait/Wide) + Sortierung.
   Beide bleiben rechts gebündelt, mit Trenn-Abstand. */
.mt-main-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.mt-main-view {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mt-view-label {
  font-family: var(--font-prose);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--body-light);
  margin-right: 2px;
}
/* Wide-Ansicht der Mediathek: 1 Eintrag pro Reihe, volle Spaltenbreite.
   tile-grid--wide liefert bereits grid-template-columns:1fr; dieser Hook
   stellt sicher, dass die 16:9-Banner die ganze Breite nutzen (kein
   340px-Cap wie im Portrait-Grid) und etwas mehr Luft zwischen den Reihen. */
.sec-mediathek-grid--wide {
  grid-template-columns: 1fr;
  justify-content: stretch;
  gap: var(--space-4);
}
.sec-mediathek-grid--wide > .mt-tile-wrap,
.sec-mediathek-grid--wide > .tile-v2 {
  width: 100%;
  max-width: none;
}

/* L tile (Tile3D) — first item full-width */
.mt-grid-l { margin-bottom: 20px; }

/* M grid (3-col TileFlat) */
.mt-grid-m {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
@media (max-width: 1024px) { .mt-grid-m { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .mt-grid-m { grid-template-columns: 1fr; } }

/* "Weitere Einträge" mono header above S grid */
.mt-grid-more-head {
  font-family: var(--font-meta);
  font-size: var(--type-mono-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--muted-light);
  display: block;
  /* Mehr Trennung zwischen Tile-Grids — der Subhead trennt visuell die
     Kind-Wechsel (Insights -> Refstories -> Members). Vorher 0 px oben =
     Tiles standen unmittelbar an der vorigen Reihe. */
  margin: 48px 0 16px;
}

/* S grid (2-col TileMini) */
.mt-grid-s {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (max-width: 640px) { .mt-grid-s { grid-template-columns: 1fr; } }

/* Empty state — dashed-border 21-radius card */
.mt-empty {
  padding: 64px 32px;
  text-align: center;
  background: #fff;
  border: 1px dashed var(--hairline-light);
  border-color: rgba(0, 0, 0, 0.12);
  border-radius: var(--r-card);
}
.mt-empty-eyebrow {
  font-family: var(--font-meta);
  font-size: var(--type-mono-label);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--muted-light);
  display: block;
  margin: 0 0 12px;
}
.mt-empty-text {
  font-family: var(--font-prose);
  font-size: var(--type-body);
  color: var(--body-light);
  margin: 0;
}

/* Loading + error */
.mt-loading, .mt-error {
  padding: 24px 0;
  font-family: var(--font-meta);
  font-size: var(--type-mono-label);
  letter-spacing: var(--ls-mono-soft);
  text-transform: uppercase;
  color: var(--muted-light);
}

/* Pagination (kept simple, ink-on-paper) */
.mt-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
  font-family: var(--font-prose);
  font-size: 13px;
  color: var(--body-light);
}
.mt-pagination-btn {
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--hairline-light);
  border-radius: var(--r-pill);
  font: inherit;
  color: var(--body-light);
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease;
}
.mt-pagination-btn:hover:not(:disabled) {
  border-color: var(--ink);
  color: var(--ink);
}
.mt-pagination-btn:disabled { opacity: 0.4; cursor: default; }

/* Responsive: collapse rail above grid on narrow viewports */
@media (max-width: 960px) {
  .mt-body-inner { flex-direction: column; padding: 32px 24px 60px; }
  .mt-rail {
    width: 100%;
    position: static;
    max-height: none;
    overflow: visible;
    margin-bottom: 24px;
  }
  .mt-main { padding-left: 0; }
  .mt-main-head { max-width: none; }   /* mobil: Sortierung darf volle Breite nutzen */
  .mt-hero-headline { font-size: 44px; }
  .mt-hero-inner { padding: 40px 24px 32px; }
  .mt-picks-inner { padding: 0 24px 40px; }
}

/* ============================================================
   Detail Page v2 — design-handoff layout
   (SFOUR Detail Page.html / detail-page.jsx)

   Structure:
     .dp-shell
       .dp-hero          — dark, breadcrumb + cluster pill + headline + lead
       .dp-hero-panel    — 360px abstract glossy panel inside max-1280 container
       .dp-body          — light, max-prose 760px, long-form article + tags
       .dp-cta           — light bg, dark glossy CTA card centered
       .dp-related       — dark, 4-col TileFlat dark grid

   All borders/glass/type drawn from v2 tokens.
   ============================================================ */

.dp-shell { background: var(--paper); }

/* ---- Hero (dark) ---------------------------------------------- */
.dp-hero {
  background: var(--ink);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.dp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--gloss-top-highlight);
}
.dp-hero-inner {
  position: relative;
  max-width: var(--max-detail);
  margin: 0 auto;
  /* Mehr Platz nach oben — der Persona-Selektor (oder Header) darf
     nicht direkt am Breadcrumb kleben. Vorher 48px → jetzt 72px. */
  padding: 72px 32px 32px;
}
/* Breadcrumb — mono uppercase chain with › chevrons */
.dp-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--font-meta);
  font-size: var(--type-mono-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-mono-soft);
  text-transform: uppercase;
  color: var(--muted-dark);
  margin: 0 0 24px;
}
.dp-breadcrumb a, .dp-breadcrumb button {
  color: var(--muted-dark);
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  text-decoration: none;
}
.dp-breadcrumb a:hover, .dp-breadcrumb button:hover { color: var(--paper); }
.dp-breadcrumb-sep { color: var(--muted-dark); }
.dp-breadcrumb-current { color: var(--paper); }

/* Tag row (cluster pill + Service · Track A + B muted) */
.dp-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 20px;
}
.dp-tag-pill {
  padding: 5px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-pill);
  font-family: var(--font-meta);
  font-size: var(--type-mono-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-mono-soft);
  text-transform: uppercase;
  color: var(--paper);
}
.dp-tag-pill--muted {
  background: transparent;
  color: var(--muted-dark);
  font-weight: 500;
}

/* Detail headline — 56px display-m, split with optional italic-muted */
.dp-headline {
  font-family: var(--font-prose);
  font-weight: 500;
  font-size: var(--type-display-m);
  line-height: 1.05;
  letter-spacing: var(--ls-display);
  color: var(--paper);
  margin: 0 0 16px;
  max-width: 880px;
}
.dp-headline-muted {
  color: var(--muted-dark);
  font-style: italic;
  font-weight: 400;
}

.dp-lead {
  font-family: var(--font-prose);
  font-size: var(--type-body-l);
  line-height: 1.55;
  color: var(--body-dark);
  margin: 0 0 36px;
  max-width: 720px;
}

/* Hero panel — 360px abstract glossy rectangle that lives within the
   max-content rail (1280) under the dp-hero block. Carries a mono
   "SERVICE-DETAIL" / "USE-CASE" / "INSIGHT" badge top-right. */
.dp-hero-panel-wrap {
  background: var(--ink);
  padding: 0 32px;
}
.dp-hero-panel {
  max-width: var(--max-content);
  margin: 0 auto;
  height: 360px;
  /* Oben rund, unten gerade — Bild schliesst sauber am Body an. */
  border-radius: var(--r-card) var(--r-card) 0 0;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 50%, #050505 100%);
  border: 1px solid var(--hairline-dark);
  border-bottom: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 24px 48px rgba(0, 0, 0, 0.4);
}
/* Architectural grid overlay */
.dp-hero-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,0.04) 0 1px, transparent 1px 60px);
}
/* Top highlight */
.dp-hero-panel::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 30%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, transparent 100%);
}
.dp-hero-panel-img {
  position: absolute;
  inset: var(--cover-pad, 0);
  width: calc(100% - var(--cover-pad, 0px) * 2);
  height: calc(100% - var(--cover-pad, 0px) * 2);
  object-fit: var(--cover-fit, cover);
  object-position: var(--cover-pos, center center);
  transform: scale(var(--cover-scale, 1));
  transform-origin: var(--cover-pos, center center);
  z-index: 0;
}
.dp-hero-panel[data-has-cover-bg="1"] {
  background: var(--cover-bg, linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 50%, #050505 100%));
}
.dp-hero-panel[data-has-cover-bg="1"]::before,
.dp-hero-panel[data-has-cover-bg="1"]::after {
  display: none;
}
.dp-hero-panel-img + ::before { display: none; } /* image suppresses grid */
.dp-hero-panel-badge {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 2;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--hairline-dark);
  border-radius: var(--r-pill);
  font-family: var(--font-meta);
  font-size: var(--type-mono-tiny);
  font-weight: 500;
  color: var(--paper);
  letter-spacing: var(--ls-mono-soft);
  text-transform: uppercase;
}
.dp-hero-panel-spacer {
  /* empty bottom row of dp-hero block for breathing space when there's
     no panel image. */
  height: 24px;
}

/* ---- Body (light, long-form 760px) --------------------------- */
.dp-body {
  background: var(--paper);
}
.dp-body-inner {
  max-width: var(--max-prose);
  margin: 0 auto;
  padding: 64px 32px 24px;
}
.dp-article h2 {
  font-family: var(--font-prose);
  font-weight: 500;
  font-size: var(--type-h3-s);     /* 26px per handoff */
  letter-spacing: var(--ls-h2);
  line-height: 1.2;
  color: var(--ink);
  margin: 36px 0 14px;
}
.dp-article h2:first-child { margin-top: 0; }
.dp-article h3 {
  font-family: var(--font-prose);
  font-weight: 500;
  font-size: var(--type-h4);
  letter-spacing: var(--ls-h2);
  line-height: 1.25;
  color: var(--ink);
  margin: 28px 0 10px;
}
.dp-article p {
  font-family: var(--font-prose);
  font-size: var(--type-body);
  line-height: 1.6;
  color: var(--body-light);
  margin: 0 0 14px;
}
.dp-article ul, .dp-article ol {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
}
.dp-article li {
  font-family: var(--font-prose);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--body-light);
  margin-bottom: 6px;
  position: relative;
  padding-left: 18px;
}
.dp-article li::before {
  content: "▸";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--muted-light);
}
.dp-article strong { color: var(--ink); font-weight: 600; }
.dp-article a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; }
.dp-article a:hover { text-decoration-thickness: 2px; }
.dp-article code {
  font-family: var(--font-meta);
  font-size: 0.92em;
  background: rgba(0, 0, 0, 0.04);
  padding: 1px 6px;
  border-radius: 4px;
}

/* Tag pills row at bottom of article — mono, hairline, 999 */
.dp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--hairline-light);
}
/* Hero-Tags — direkt unter dem Lead-Text, vor dem Hero-Image. Keine
   Trennlinie, dunkler Stil weil die Tags im dunklen dp-hero-Block
   liegen. Enthält Cluster/Kind-Pills (OPS, REFERENZ · TRACK A+B)
   plus Content-Tags (#RISE, #Cloud, …) in einer Zeile. */
.dp-tags--hero {
  margin-top: 24px;
  padding-top: 0;
  border-top: 0;
  align-items: center;
}
.dp-tags--hero .dp-tag {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.78);
}
.dp-tags--hero .dp-tag:hover {
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  border-color: rgba(255, 255, 255, 0.92);
}
/* Cluster/Kind-Pills im Hero-Tag-Row sind weiterhin „prominent" — sie
   identifizieren Cluster + Track. Der Pill-Look bleibt, aber der
   Abstand passt zu den Content-Tags daneben. */
.dp-tags--hero .dp-tag-pill {
  /* Behält die Hero-Pill-Optik (uppercase, eckiger Pill, 600er Weight). */
  margin: 0;
}
.dp-tag {
  padding: 5px 12px;
  background: transparent;
  border: 1px solid var(--hairline-light);
  border-color: rgba(0, 0, 0, 0.12);
  border-radius: var(--r-pill);
  font-family: var(--font-meta);
  font-size: var(--type-mono-label);
  letter-spacing: var(--ls-mono-tight);
  color: var(--body-light);
  cursor: pointer;
  user-select: none;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.dp-tag:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* ---- CTA Card — gleiche Content-Breite wie alle .container-Sektionen.
   Vorher --max-prose (760px) zu schmal, dann --max-content (1280px)
   zu breit gegenüber Insights/Use-Cases. Jetzt --max-width (1120px)
   + var(--space-4) padding — exakt identisch zu .container, damit
   die CTA-Card links/rechts mit Insights und allen Tile-Grids
   flush abschließt. */
.dp-cta-wrap {
  background: var(--paper);
  /* Beidseitig 48px Abstand — wenn das CTA-Card direkt unter einer
     anderen dunklen Sektion (z.B. bridge_end) sitzt, würden zwei
     "schwere" dunkle Boxen sonst nahtlos aneinanderkleben. */
  padding: 48px 0;
}
.dp-cta {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-4);
}
.dp-cta-card {
  position: relative;
  background: var(--gloss-bg);
  color: var(--paper);
  border-radius: var(--r-card);
  padding: 32px;
  overflow: hidden;
  border: var(--gloss-border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 24px 48px rgba(0, 0, 0, 0.15);
}
.dp-cta-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 50% at 50% 0%,
              rgba(255,255,255,0.06) 0%, transparent 70%);
}
.dp-cta-card > * { position: relative; }
.dp-cta-eyebrow {
  font-family: var(--font-meta);
  font-size: var(--type-mono-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--muted-dark);
  margin: 0 0 10px;
}
.dp-cta-headline {
  font-family: var(--font-prose);
  font-weight: 500;
  font-size: var(--type-h3-s);
  letter-spacing: var(--ls-h2);
  line-height: 1.2;
  color: var(--paper);
  margin: 0 0 10px;
}
.dp-cta-body {
  font-family: var(--font-prose);
  font-size: var(--type-body-s);
  line-height: 1.55;
  color: var(--body-dark);
  margin: 0 0 22px;
  max-width: 480px;
}
.dp-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.dp-cta-btn {
  padding: 11px 22px;
  background: var(--paper);
  color: var(--ink);
  border: 0;
  border-radius: var(--r-pill);
  font-family: var(--font-prose);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: opacity 120ms ease;
}
.dp-cta-btn:hover { opacity: 0.92; }
.dp-cta-link {
  color: var(--paper);
  text-decoration: none;
  font-family: var(--font-prose);
  font-size: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  padding-bottom: 2px;
  display: inline-block;
  margin-top: 16px;
}
.dp-cta-link:hover { border-bottom-color: var(--paper); }
/* Wenn der secondary-Link inline mit dem primary-Button in einem
   .dp-cta-actions Flex-Container sitzt, brauchen wir kein margin-top
   mehr — align-items: center sorgt für die vertikale Ausrichtung. */
.dp-cta-actions .dp-cta-link { margin-top: 0; }

/* ---- Inverse CTA-Card (Black on White) ----
   Wird auf Section-basierte CTAs (cta_home, cta_mid_discover,
   cta_after_insights) angewandt, damit sie nicht als zweite schwere
   dunkle Box direkt nach einem Bridge-Band wirken. Visuell hellere
   Pause zwischen den Bridge-Bands; Button bleibt prominent (dunkle
   Pille auf hellem Card).
   Detail-Page-CTA (renderDetailCTA) trägt diese Klasse NICHT und
   bleibt im dunklen Glanz-Design. */
.dp-cta-card--light {
  background: var(--paper);
  color: var(--ink-deep);
  border: 1px solid var(--hairline-light);
  box-shadow:
    0 12px 32px -16px rgba(0, 0, 0, 0.18),
    0 1px 2px rgba(0, 0, 0, 0.04);
}
.dp-cta-card--light::before {
  background: radial-gradient(ellipse 80% 50% at 50% 0%,
              rgba(0, 0, 0, 0.025) 0%, transparent 70%);
}
.dp-cta-card--light .dp-cta-eyebrow {
  color: var(--muted-light);
}
.dp-cta-card--light .dp-cta-headline {
  color: var(--ink-deep);
}
.dp-cta-card--light .dp-headline-muted {
  color: var(--muted-light);
}
.dp-cta-card--light .dp-cta-body {
  color: var(--body-light, #444);
}
/* Button: dunkle Pille auf hellem Card — inverse zum dunklen Card. */
.dp-cta-card--light .dp-cta-btn {
  background: var(--ink-deep);
  color: var(--paper);
  box-shadow: none;
  border: 1px solid var(--ink-deep);
}
.dp-cta-card--light .dp-cta-btn:hover {
  background: var(--ink);
  opacity: 1;
}
.dp-cta-card--light .dp-cta-link {
  color: var(--ink-deep);
  border-bottom-color: rgba(0, 0, 0, 0.25);
}
.dp-cta-card--light .dp-cta-link:hover {
  border-bottom-color: var(--ink-deep);
}

/* ---- CTA-Card Chat-Bar — robuste Pill-Group (Input + Button getrennt) ----
   Architektur: KEIN umschließendes Pill mit overflow:hidden mehr. Das
   Container-Form ist transparent; das Input ist ein eigenständiges
   Pill mit fester Höhe, der Submit-Button ein zweites eigenständiges
   Pill DANEBEN. Damit kann der Button das Eingabefeld nie expandieren —
   wenn er nicht in die Zeile passt, wrappt er in die zweite Zeile.
   Höhe des Inputs ist deterministisch (line-height × padding), nicht
   abhängig vom Button-Inhalt. */
.agent-prompt.dp-cta-form {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 22px 0 0;
  overflow: visible;
  max-width: none;
}
.agent-prompt.dp-cta-form input {
  flex: 1 1 220px;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--r-pill);
  padding: 0.65rem 1.125rem;
  font-family: var(--font-prose);
  font-size: 15px;
  line-height: 1.25;
  color: var(--ink);
  outline: 0;
  box-sizing: border-box;
}
.agent-prompt.dp-cta-form input::placeholder {
  color: var(--muted-light);
}
.agent-prompt.dp-cta-form .dp-cta-mic,
.agent-prompt.dp-cta-form .dp-cta-tts {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-left: 0;
  color: var(--ink);
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  line-height: 1.25;
  border-radius: var(--r-pill);
  flex-shrink: 0;
  flex-grow: 0;
  transition: background 120ms ease;
}
.agent-prompt.dp-cta-form .dp-cta-mic:hover,
.agent-prompt.dp-cta-form .dp-cta-tts:hover {
  background: rgba(0, 0, 0, 0.05);
}
.agent-prompt.dp-cta-form .dp-cta-submit {
  background: var(--ink-deep);
  color: var(--paper);
  border: 0;
  /* Schlanker Pill — analog Cookie-Banner. Deterministische Höhe via
     padding + line-height; flex-shrink:0 verhindert dass der Button
     gestreckt wird, flex-grow:0 dass er den Input verkürzt. */
  padding: 0.5rem 1.125rem;
  border-radius: var(--r-pill);
  font-family: var(--font-prose);
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.25;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  flex-grow: 0;
  white-space: nowrap;
  transition: background 120ms ease, transform 80ms ease;
}
.agent-prompt.dp-cta-form .dp-cta-submit:hover { background: #1a1a1a; }
.agent-prompt.dp-cta-form .dp-cta-submit:active { transform: translateY(1px); }
.agent-prompt.dp-cta-form .dp-cta-submit .arrow {
  transition: transform 160ms ease;
}
.agent-prompt.dp-cta-form .dp-cta-submit:hover .arrow {
  transform: translateX(2px);
}

/* ---- Recommended Member (vor Related Strip) ------------------- */
.dp-member {
  background: var(--paper);
  border-top: 1px solid var(--hairline);
}
.dp-member.dp-member--empty { display: none; }
.dp-member-inner {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 56px 32px 24px;
}

/* Detail-Page: CTA-Karte + Ansprechpartner-Strip auf die Inhalts-Spalte
   (--max-prose, wie .dp-body-inner) ausrichten — vorher liefen beide auf
   1120px/1280px deutlich breiter als der Text darüber. Bewusst auf
   .dp-shell gescoped: die ctaBand-Sections (Home/Cluster) nutzen dieselben
   .dp-cta-*-Klassen und behalten ihre volle Breite. Seiten-Padding ist in
   allen drei Containern 32px → Kanten fluchten exakt mit dem Fliesstext. */
.dp-shell .dp-cta {
  max-width: var(--max-prose);
}
.dp-shell .dp-member-inner {
  max-width: var(--max-prose);
}
.dp-member-eyebrow {
  display: block;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted, #666);
  margin-bottom: 16px;
}
.dp-member-card {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 24px 28px;
  background: #fafafa;
  border: 1px solid var(--hairline);
  border-radius: 10px;
}

/* Member-Detail-Page-Profil — Module, Schwerpunkte, Meta */
.dp-member-profile {
  margin: var(--space-6, 32px) 0 0;
  padding: var(--space-5, 24px) 0 0;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: var(--space-5, 24px);
}
.dp-member-profile-meta {
  margin: 0;
  font-size: 0.875rem;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
}
.dp-member-profile-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dp-member-profile-title {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
}
.dp-member-modules {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dp-member-module-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  background: var(--paper, #fff);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  font-family: var(--font-mono, ui-monospace, monospace);
}
.dp-member-expertise-list {
  margin: 0;
  padding-left: 18px;
  list-style: disc;
}
.dp-member-expertise-list li {
  margin: 0 0 6px;
  font-size: 0.95rem;
  line-height: 1.55;
}
.dp-member-expertise-list li strong {
  font-weight: 600;
}
.dp-member-card--fallback { grid-template-columns: 1fr auto; }
.dp-member-avatar {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.05em;
}
.dp-member-text { min-width: 0; }
.dp-member-name {
  font-size: 20px;
  margin: 0 0 4px;
  font-weight: 600;
  display: flex; align-items: baseline; gap: 12px;
}
.dp-member-hint {
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-muted, #888);
  font-family: var(--font-mono, ui-monospace, monospace);
  letter-spacing: 0.04em;
}
.dp-member-role {
  margin: 0 0 8px;
  color: var(--ink-muted, #666);
  font-size: 14px;
}
.dp-member-bio {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink, #1a1a1a);
}
.dp-member-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.dp-member-cta { white-space: nowrap; }
.dp-member-phone {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  color: var(--ink-muted, #666);
  text-decoration: none;
}
.dp-member-phone:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 720px) {
  .dp-member-card {
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto auto;
  }
  .dp-member-actions { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
  .dp-member-avatar { width: 56px; height: 56px; font-size: 16px; }
}

/* ---- Related strip (dark, full-width 1280) -------------------- */
.dp-related {
  background: var(--ink);
  border-top: 1px solid var(--hairline-dark);
}
.dp-related-inner {
  /* Standardbreite wie der Footer (.container = --max-width, --space-4
     Seiten-Padding) — nicht mehr --max-content. Dadurch werden auch die
     3 Portrait-Kacheln auf Standardgrösse (User-Direktive). */
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 64px var(--space-4) 80px;
}
.dp-related-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 32px;
}
.dp-related-eyebrow {
  font-family: var(--font-meta);
  font-size: var(--type-mono-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--muted-dark);
  display: block;
  margin: 0 0 10px;
}
.dp-related-title {
  font-family: var(--font-prose);
  font-weight: 500;
  font-size: var(--type-h2-s);
  line-height: 1.15;
  letter-spacing: var(--ls-h2);
  color: var(--paper);
  margin: 0;
}
.dp-related-link {
  flex-shrink: 0;
  font-family: var(--font-prose);
  font-size: var(--type-ui);
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  padding-bottom: 2px;
}
.dp-related-link:hover { border-bottom-color: var(--paper); }
.dp-related-grid {
  display: grid;
  /* Phase η — 3 Spalten, synchron zur section-defs.js-Vorgabe für
     "was-passt-dazu" (3× Portrait gleichwertig). minmax(0, 1fr)
     verhindert dass die intrinsische Breite der Tiles die Spalten
     sprengt — Tiles bleiben in ihrer Cell ohne Überlappung. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  /* User-Direktive: alle Related-Karten gleich hoch — die Zellen strecken
     auf die höchste Karte der Reihe, die Tile füllt ihre Zelle. Ruhiges
     Raster unabhängig von der Textlänge. */
  align-items: stretch;
}
.dp-related-grid > * { min-width: 0; }
.dp-related-grid > .tile-v2 { height: 100%; }
/* .tile-v2--pick zwingt sonst via aspect-ratio + min-height eine
   Mindestbreite von 345px — was bei 4-Spalten-Grid auf 1024–1400px
   Viewport die Cells sprengt und zu sichtbarer Überlappung führt. Im
   dp-related-Kontext: aspect-ratio + min-height lockern, Tile fliesst
   mit der Cell und passt sich responsiv an. */
.dp-related-grid .tile-v2--pick {
  aspect-ratio: auto;
  min-height: 380px;
  width: 100%;
}
.dp-related-grid .tile-v2--pick .tile-v2__cover {
  flex: 0 0 180px;
}
@media (max-width: 1024px) { .dp-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .dp-related-grid { grid-template-columns: 1fr; } }

/* Responsive: tighter mobile padding + smaller display headline */
@media (max-width: 720px) {
  .dp-hero-inner    { padding: 32px 24px 16px; }
  .dp-hero-panel    { height: 220px; }
  .dp-hero-panel-wrap { padding: 0 24px; }
  .dp-headline      { font-size: 36px; }
  .dp-body-inner    { padding: 40px 24px 24px; }
  .dp-cta           { padding: 0 24px; }
  .dp-cta-card      { padding: 24px; }
  .dp-related-inner { padding: 40px 24px 56px; }
  .dp-related-head  { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   Kontakt v2 — design-handoff layout
   (SFOUR Kontakt.html / kontakt.jsx)

   Structure:
     .kt-shell
       .kt-hero        — dark, eyebrow + Display-XL split-headline + lead
       .kt-grid        — light, 1.4fr/1fr Form + LocationCard
       .kt-advisors    — light, 2-col 4-card grid
       .kt-footerband  — dark glanz "Vor dem Termin" CTA
   ============================================================ */
.kt-shell { background: var(--paper); }

/* ---- Hero (dark) ---------------------------------------------- */
.kt-hero {
  background: var(--ink);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--hairline-dark);
}
.kt-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--gloss-top-highlight);
}
.kt-hero-inner {
  position: relative;
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 64px 32px 48px;
}
.kt-hero-eyebrow {
  font-family: var(--font-meta);
  font-size: var(--type-mono-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--muted-dark);
  margin: 0 0 16px;
}
.kt-hero-headline {
  font-family: var(--font-prose);
  font-weight: 500;
  font-size: var(--type-display-xl);
  line-height: 1.0;
  letter-spacing: var(--ls-display);
  color: var(--paper);
  margin: 0 0 16px;
  max-width: 1100px;
}
.kt-hero-headline .kt-headline-muted {
  color: var(--muted-dark);
  font-style: italic;
  font-weight: 400;
}
.kt-hero-lead {
  font-family: var(--font-prose);
  font-size: var(--type-body-l);
  line-height: 1.55;
  color: var(--body-dark);
  margin: 0;
  max-width: 720px;
}

/* ---- Form + LocationCard grid (light, 1.4fr/1fr) ------------- */
.kt-body {
  background: var(--paper);
}
.kt-grid {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 48px 32px 24px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 28px;
  align-items: start;
}
@media (max-width: 960px) {
  .kt-grid { grid-template-columns: 1fr; padding: 32px 24px 16px; }
}

/* ---- Form Card ------------------------------------------------ */
.kt-form-card {
  background: #fff;
  border: 1px solid var(--hairline-light);
  border-radius: var(--r-card);
  padding: 32px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}
.kt-form-eyebrow {
  font-family: var(--font-meta);
  font-size: var(--type-mono-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--muted-light);
  display: block;
}
.kt-form-title {
  font-family: var(--font-prose);
  font-weight: 500;
  font-size: var(--type-h2-s);
  letter-spacing: var(--ls-h2);
  line-height: 1.15;
  color: var(--ink);
  margin: 10px 0 28px;
}
.kt-form-title .kt-headline-muted {
  color: var(--muted-light);
  font-style: italic;
  font-weight: 400;
}

/* Pill-group label (Persona, Topic, Channel) */
.kt-pill-group { margin-bottom: 22px; }
.kt-pill-group-label {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-meta);
  font-size: var(--type-mono-tiny);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--muted-light);
}
.kt-pill-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.kt-pill {
  padding: 8px 14px;
  background: #fff;
  color: var(--body-light);
  border: 1px solid var(--hairline-light);
  border-radius: var(--r-pill);
  font-family: var(--font-prose);
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.kt-pill:hover { color: var(--ink); border-color: var(--ink); }
.kt-pill.is-active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  font-weight: 500;
}

/* Field grid */
.kt-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.kt-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kt-field--full { grid-column: 1 / -1; }
.kt-field-label {
  font-family: var(--font-meta);
  font-size: var(--type-mono-tiny);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--muted-light);
}
.kt-field-optional {
  color: var(--muted-light);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 8px;
  font-size: 11px;
}
.kt-input, .kt-textarea {
  padding: 12px 14px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--r-input);
  font-family: var(--font-prose);
  font-size: 15px;
  color: var(--ink);
  outline: 0;
  transition: border-color 120ms ease;
}
.kt-input:focus, .kt-textarea:focus {
  border-color: var(--ink);
}
.kt-textarea {
  resize: vertical;
  min-height: 110px;
}

/* Disclaimer + submit */
.kt-disclaimer {
  font-family: var(--font-prose);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted-light);
  margin: 0 0 20px;
}
.kt-submit-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.kt-submit-btn {
  padding: 13px 28px;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  border-radius: var(--r-pill);
  font-family: var(--font-prose);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: opacity 120ms ease;
}
.kt-submit-btn:hover { opacity: 0.92; }
.kt-submit-mail {
  font-family: var(--font-meta);
  font-size: var(--type-mono-label);
  letter-spacing: var(--ls-mono-tight);
  color: var(--muted-light);
}

/* ---- Location Card ------------------------------------------- */
/* Zwei Standort-Cards (Zug + Frauenfeld) untereinander in der rechten
   Spalte — ein Grid-Kind von .kt-grid, innen vertikal gestapelt. */
.kt-locations {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.kt-location {
  background: #fff;
  border: 1px solid var(--hairline-light);
  border-radius: var(--r-card);
  overflow: hidden;
}
.kt-map {
  position: relative;
  height: 280px;
  background: #ededea;
  overflow: hidden;
}
/* Note: no `.kt-map svg { width: 100%; ... }` rule here. Leaflet
   ships an inline SVG flag in its attribution prefix (12×8 px) and
   uses internal SVG layers for vectors — a generic stretch rule
   would balloon them. We rely on Leaflet's own sizing. */
/* Embedded Leaflet location-map inside the Kontakt panel — collapse
   the side-by-side map+list grid; we only show the map here (the list
   would duplicate the address block below). */
.kt-map .location-map {
  display: block;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}
.kt-map .location-map .location-list { display: none; }
.kt-map-canvas {
  width: 100% !important;
  height: 100% !important;
  border-radius: 0;
}
.kt-map-coords {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--hairline-light);
  border-radius: var(--r-pill);
  font-family: var(--font-meta);
  font-size: var(--type-mono-tiny);
  letter-spacing: var(--ls-mono-soft);
  text-transform: uppercase;
  color: var(--body-light);
}
.kt-location-body { padding: 24px 28px; }
.kt-location-eyebrow {
  font-family: var(--font-meta);
  font-size: var(--type-mono-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--muted-light);
}
.kt-location-name {
  font-family: var(--font-prose);
  font-weight: 500;
  font-size: var(--type-h4);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
  margin: 8px 0 14px;
}
.kt-location-address {
  font-family: var(--font-prose);
  font-size: 15px;
  line-height: 1.6;
  color: var(--body-light);
}
.kt-location-grid {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline-light);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.kt-location-grid-key {
  font-family: var(--font-meta);
  font-size: var(--type-mono-tiny);
  font-weight: 500;
  letter-spacing: var(--ls-mono-soft);
  text-transform: uppercase;
  color: var(--muted-light);
}
.kt-location-grid-val {
  font-family: var(--font-prose);
  font-size: 15px;
  color: var(--ink);
  margin-top: 4px;
}
.kt-location-link {
  display: inline-block;
  margin-top: 20px;
  font-family: var(--font-prose);
  font-size: 13.5px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  padding-bottom: 2px;
}
.kt-location-link:hover { border-bottom-color: var(--ink); }

/* ---- Advisors (2-col 4-card grid) ---------------------------- */
.kt-advisors {
  background: var(--paper);
}
.kt-advisors-inner {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 24px 32px 64px;
}
.kt-advisors-head { margin-bottom: 28px; }
.kt-advisors-eyebrow {
  font-family: var(--font-meta);
  font-size: var(--type-mono-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--muted-light);
}
.kt-advisors-title {
  font-family: var(--font-prose);
  font-weight: 500;
  font-size: var(--type-h2);
  letter-spacing: var(--ls-h2);
  line-height: 1.15;
  color: var(--ink);
  margin: 10px 0 0;
}
.kt-advisors-title .kt-headline-muted {
  color: var(--muted-light);
  font-style: italic;
  font-weight: 400;
}
.kt-advisor-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 720px) { .kt-advisor-grid { grid-template-columns: 1fr; } }

.kt-advisor {
  background: #fff;
  border: 1px solid var(--hairline-light);
  border-radius: var(--r-card);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}
.kt-advisor-head {
  display: flex;
  gap: 16px;
  align-items: center;
}
.kt-advisor-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2a2a2a 0%, #0a0a0a 100%);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-prose);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}
.kt-advisor-meta { min-width: 0; }
.kt-advisor-name {
  font-family: var(--font-prose);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: var(--ls-tight);
  color: var(--ink);
  margin: 0 0 4px;
}
.kt-advisor-role {
  font-family: var(--font-meta);
  font-size: var(--type-mono-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-mono-soft);
  text-transform: uppercase;
  color: var(--muted-light);
}
.kt-advisor-bio {
  font-family: var(--font-prose);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--body-light);
  margin: 0;
}
.kt-advisor-focus {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.kt-advisor-focus-chip {
  padding: 4px 10px;
  border: 1px solid var(--hairline-light);
  border-color: rgba(0, 0, 0, 0.12);
  border-radius: var(--r-pill);
  font-family: var(--font-meta);
  font-size: var(--type-mono-tiny);
  letter-spacing: var(--ls-mono-tight);
  color: var(--body-light);
}
.kt-advisor-foot {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--hairline-light);
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}
.kt-advisor-link {
  font-family: var(--font-prose);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  padding-bottom: 2px;
  white-space: nowrap;
}
.kt-advisor-link:hover { border-bottom-color: var(--ink); }
.kt-advisor-track {
  font-family: var(--font-meta);
  font-size: var(--type-mono-eyebrow);
  letter-spacing: var(--ls-mono-soft);
  text-transform: uppercase;
  color: var(--muted-light);
}

/* ---- Footer Band (dark glanz "Vor dem Termin") --------------- */
.kt-footerband {
  background: var(--ink);
  position: relative;
  overflow: hidden;
}
.kt-footerband::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 60% at 50% 100%,
              rgba(255, 255, 255, 0.05) 0%, transparent 70%);
}
.kt-footerband-inner {
  position: relative;
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 56px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}
.kt-footerband-eyebrow {
  font-family: var(--font-meta);
  font-size: var(--type-mono-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--muted-dark);
}
.kt-footerband-title {
  font-family: var(--font-prose);
  font-weight: 500;
  font-size: var(--type-h3);
  letter-spacing: var(--ls-h2);
  line-height: 1.2;
  color: var(--paper);
  margin: 10px 0 0;
  max-width: 720px;
}
.kt-footerband-link {
  padding: 13px 24px;
  background: transparent;
  color: var(--paper);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--r-pill);
  font-family: var(--font-prose);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 120ms ease, background 120ms ease;
}
.kt-footerband-link:hover {
  border-color: var(--paper);
  background: rgba(255, 255, 255, 0.06);
}

/* ============================================================
   Newsletter — Subscribe-Form auf hellem Paper-Background.
   Im Stil der section-alt, mit Pill-Input + dunklem Submit-Button.
   ============================================================ */
.kt-newsletter {
  background: var(--paper);
  border-top: 1px solid var(--hairline-light);
  border-bottom: 1px solid var(--hairline-light);
}
.kt-newsletter-inner {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 56px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.kt-newsletter-eyebrow {
  font-family: var(--font-meta);
  font-size: var(--type-mono-eyebrow);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-soft, #666);
  margin: 0;
}
.kt-newsletter-title {
  font-family: var(--font-prose);
  font-weight: 500;
  font-size: var(--type-h2-s, 32px);
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
  max-width: 720px;
}
.kt-newsletter-body {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-soft, #555);
  max-width: 720px;
  margin: 0 0 6px;
}
.kt-newsletter-form {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 540px;
  align-items: stretch;
  flex-wrap: wrap;
}
.kt-newsletter-input {
  flex: 1 1 240px;
  min-width: 0;
  padding: 12px 18px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 999px;
  background: #ffffff;
  color: var(--ink, #1a1a1a);
  font: inherit;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.kt-newsletter-input:focus {
  border-color: var(--ink, #1a1a1a);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}
.kt-newsletter-input::placeholder {
  color: rgba(85, 85, 85, 0.6);
}
.kt-newsletter-submit {
  flex: 0 0 auto;
  padding: 12px 24px;
  border-radius: 999px;
  background: #1a1a1a;
  color: #ffffff;
  border: 1px solid #1a1a1a;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 140ms ease, transform 100ms ease;
}
.kt-newsletter-submit:hover:not(:disabled) {
  background: #2a2a2a;
  transform: translateY(-1px);
}
.kt-newsletter-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}
.kt-newsletter-status {
  font-size: 0.9rem;
  min-height: 1.4em;
  color: var(--ink-soft, #555);
}
.kt-newsletter-status[data-tone="success"] { color: #1f6d3a; font-weight: 500; }
.kt-newsletter-status[data-tone="error"]   { color: #a72020; font-weight: 500; }
.kt-newsletter-status[data-tone="info"]    { color: var(--ink-soft, #666); }
.kt-newsletter-privacy {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink-muted, #888);
  max-width: 540px;
  margin: 4px 0 0;
}

/* ---- Mobile narrow tweaks ------------------------------------ */
@media (max-width: 720px) {
  .kt-hero-inner   { padding: 40px 24px 32px; }
  .kt-hero-headline{ font-size: 44px; }
  .kt-form-card    { padding: 24px; }
  .kt-form-title   { font-size: 26px; }
  .kt-fields       { grid-template-columns: 1fr; }
  .kt-advisors-inner { padding: 16px 24px 48px; }
  .kt-advisors-title { font-size: 28px; }
  .kt-footerband-inner { padding: 40px 24px; flex-direction: column; align-items: flex-start; }
  .kt-newsletter-inner { padding: 40px 24px; }
  .kt-newsletter-title { font-size: 26px; }
  .kt-newsletter-form  { flex-direction: column; max-width: none; }
  .kt-newsletter-submit { width: 100%; }
}

/* ============================================================
   Persona-Switcher (Dual-Track) — floating glass pill that lets
   the visitor declare "I'm an IT-Architect / Process Owner / both".
   Click pushes a track_select event to the SEA tracker, which biases
   the LLM tonality (Strong-Hint mode — see app/sea_state.py).

   Layout: absolute, anchored under the sticky header, centered.
   In step 3c this moves into the DualTrackHero seam — until then
   it floats over whatever hero is rendered.
   ============================================================ */
.persona-switcher {
  position: absolute;
  top: 88px;                    /* below ~70px sticky header + 18px breathing */
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;                   /* below modals (z-index: var(--z-modal)) */
  display: inline-flex;
  align-items: center;
  gap: 16px;
  pointer-events: none;         /* let clicks fall through the gap */
}
.persona-switcher > * { pointer-events: auto; }

.persona-switcher-label {
  font-family: var(--font-meta);
  font-size: var(--type-mono-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--muted-dark);
  white-space: nowrap;
}

.persona-switcher-pill {
  display: inline-flex;
  padding: 4px;
  background: rgba(10, 10, 10, 0.55);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 24px rgba(0, 0, 0, 0.30);
  border-radius: var(--r-pill);
}

.ps-btn {
  padding: 8px 18px;
  border: 0;
  background: transparent;
  color: var(--body-dark);
  border-radius: var(--r-pill);
  font: inherit;
  font-family: var(--font-prose);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 250ms ease, color 250ms ease, box-shadow 250ms ease;
}
.ps-btn:hover {
  color: var(--paper);
}
.ps-btn:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 2px;
}
.ps-btn--active {
  background: var(--paper);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.ps-btn--active:hover {
  color: var(--ink);     /* don't shift away from ink on hover when active */
}

/* Mobile: hide the "Sicht wählen ↳" label, keep the pill, shrink padding.
   At < 480px even the pill text gets cramped — switch to short labels via
   CSS content swap (data-track-short attribute). */
@media (max-width: 720px) {
  .persona-switcher {
    top: 80px;
    gap: 8px;
  }
  .persona-switcher-label { display: none; }
  .ps-btn { padding: 7px 12px; font-size: 12.5px; }
}
@media (max-width: 480px) {
  .persona-switcher { top: 72px; }
  .ps-btn { padding: 6px 10px; font-size: 12px; }
}

/* When the DualTrackHero owns the seam-anchored switcher, the floating
   one near the page top becomes redundant. Hide it. */
body:has(.hero--dual-track) > .persona-switcher { display: none; }

/* ============================================================
   DualTrackHero (Phase 4) — 50/50 split, two surface worlds.
   Left = Track A (IT/architecture, dark glossy).
   Right = Track B (process/business, cream).
   The seam carries the Persona-Switcher; user choice tilts the flex
   ratio to 1.5/0.65 (left-leaning) or 0.65/1.5 (right-leaning) via
   data-active-track on the hero element, with a 450ms cubic-bezier
   transition. The dimmed side fades to opacity 0.5.
   ============================================================ */
.hero--dual-track {
  position: relative;
  isolation: isolate;
  background: var(--ink);          /* Black gutter shows through any seam */
  border-bottom: 0;
  padding: 0;                       /* sides own their own padding */
  overflow: hidden;
}

/* Container-card variant — wraps the dt-split in a centred 27px-radius
   card so the dual-track tilt happens within content width, not full-
   bleed. Page background frames the card. */
.hero--dual-track-card {
  background: var(--paper);
  /* Top von 32→16: der Persona-Switcher sitzt jetzt als --paper-Band
     direkt darüber, daher braucht die Card oben weniger Eigen-Abstand —
     der Hero rückt näher an den Switcher (User-Direktive 2026-06-13). */
  padding: 16px 0 56px;
  overflow: visible;
}
.hero--dual-track-card .hero-dt-container {
  padding-left: 32px;
  padding-right: 32px;
}
.hero--dual-track-card .hero-dt-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
  background: var(--ink);
  box-shadow:
    0 24px 64px -24px rgba(0, 0, 0, 0.35),
    0 2px 4px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--hairline-light);
}

.hero--dual-track .dt-split {
  display: flex;
  min-height: 620px;
  width: 100%;
}
.hero--dual-track-card .dt-split {
  min-height: 540px;
}

/* Shared input bar — only renders in activeTrack="both" mode. Sits
   below the split, spans full card width. The split-card carries a
   neutral surface (paper-warm) so the input pill stands out against
   both the dark and the cream side above. */
.hero--dual-track .dt-shared-bar {
  background: var(--paper);
  border-top: 1px solid var(--hairline-light);
  padding: 24px 56px 28px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.hero--dual-track .dt-shared-bar #agent-form {
  width: 100%;
  max-width: 880px;
  margin: 0;
}
/* When the split sits inside the card variant, give the shared bar
   the same horizontal padding rhythm as the sides so the input
   visually centers on the seam. */
.hero--dual-track-card .dt-shared-bar {
  padding: 24px 36px 32px;
}
@media (max-width: 720px) {
  .hero--dual-track .dt-shared-bar {
    padding: 16px 20px 20px;
  }
}
/* When activeTrack==="both" the per-side dt-split rows shouldn't
   stretch as tall — the input lives below, so the side bodies need
   less breathing room at the bottom. */
.hero--dual-track[data-active-track="both"] .dt-side {
  padding-bottom: 32px;
}
.hero--dual-track[data-active-track="both"] .dt-split {
  min-height: 0;
}
.hero--dual-track-card[data-active-track="both"] .dt-split {
  min-height: 0;
}

.hero--dual-track .dt-side {
  flex: 1 1 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 120px 56px 56px;
  min-width: 0;
  transition:
    flex 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Track A — dark glossy mirror surface (IT-Welt). */
.hero--dual-track .dt-side--a {
  background: linear-gradient(180deg, #161616 0%, #0a0a0a 60%, #050505 100%);
  color: var(--paper);
}
.hero--dual-track .dt-side--a::before {
  /* Top highlight — the "gloss" reflection. */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--gloss-top-highlight);
}
.hero--dual-track .dt-side--a::after {
  /* Subtle architectural grid overlay — visual cue for "IT". */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.4;
  background:
    repeating-linear-gradient(0deg,  rgba(255,255,255,0.025) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 80px);
}

/* Track B — cream paper-warm surface (Prozess-Welt). */
.hero--dual-track .dt-side--b {
  background: linear-gradient(180deg, #ffffff 0%, var(--paper-warm) 100%);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,1);
}
.hero--dual-track .dt-side--b::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 40% at 30% 0%,
              rgba(255,255,255,1) 0%, transparent 70%);
}

/* All in-flow content sits above the overlays. */
.hero--dual-track .dt-side > * {
  position: relative;
  z-index: 1;
}

/* Track-eyebrow — mono uppercase, top of each side. */
.hero--dual-track .dt-track-label {
  font-family: var(--font-meta);
  font-size: var(--type-mono-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  margin: 0 0 20px;
}
.hero--dual-track .dt-side--a .dt-track-label { color: var(--muted-dark); }
.hero--dual-track .dt-side--b .dt-track-label { color: var(--muted-light); }

/* Split-Headline: primary half + italic muted continuation. */
.hero--dual-track .dt-headline {
  font-family: var(--font-prose);
  font-weight: 500;
  font-size: 56px;
  line-height: 1.02;
  letter-spacing: var(--ls-display);
  margin: 0 0 22px;
  max-width: 520px;
}
.hero--dual-track .dt-headline-primary { display: block; }
.hero--dual-track .dt-headline-muted {
  display: block;
  font-style: italic;
  font-weight: 400;
}
.hero--dual-track .dt-side--a .dt-headline-primary { color: var(--paper); }
.hero--dual-track .dt-side--a .dt-headline-muted   { color: var(--muted-dark); }
.hero--dual-track .dt-side--b .dt-headline-primary { color: var(--ink); }
.hero--dual-track .dt-side--b .dt-headline-muted   { color: var(--muted-light); }

/* Side lead paragraph. */
.hero--dual-track .dt-lead {
  font-family: var(--font-prose);
  font-size: 16px;
  line-height: 1.55;
  margin: 0 0 28px;
  max-width: 460px;
}
.hero--dual-track .dt-side--a .dt-lead { color: var(--body-dark); }
.hero--dual-track .dt-side--b .dt-lead { color: var(--body-light); }

/* Decorative chat-bar preview — visual only, click switches the active
   track to that side (so the real shared input below changes voice). */
.hero--dual-track .dt-chatbar-preview {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 6px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: opacity 200ms ease, transform 200ms ease;
}
.hero--dual-track .dt-side--a .dt-chatbar-preview {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--paper);
}
.hero--dual-track .dt-side--b .dt-chatbar-preview {
  background: var(--paper);
  border: 1px solid var(--ink);
  color: var(--ink);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}
.hero--dual-track .dt-chatbar-preview-text {
  flex: 1;
  min-width: 0;          /* erlaubt text-overflow im flex-child */
  padding: 12px 18px;
  font-size: 14.5px;
  /* Single-line + Ellipsis — sonst bricht der lange Placeholder
     auf Mobile (≤720px) auf 2 Zeilen um und vergrössert die Card. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero--dual-track .dt-side--a .dt-chatbar-preview-text { color: var(--muted-dark); }
.hero--dual-track .dt-side--b .dt-chatbar-preview-text { color: var(--muted-light); }
.hero--dual-track .dt-chatbar-preview:hover { transform: translateY(-1px); }

/* ---- Active-track tilt + dim (driven by data-active-track attr) ---- */
.hero--dual-track[data-active-track="a"] .dt-side--a { flex-grow: 1.5; opacity: 1; }
.hero--dual-track[data-active-track="a"] .dt-side--b { flex-grow: 0.65; opacity: 0.5; }
.hero--dual-track[data-active-track="b"] .dt-side--a { flex-grow: 0.65; opacity: 0.5; }
.hero--dual-track[data-active-track="b"] .dt-side--b { flex-grow: 1.5; opacity: 1; }
.hero--dual-track[data-active-track="both"] .dt-side { flex-grow: 1; opacity: 1; }
/* Default (no attribute) = both sides equal. */
.hero--dual-track:not([data-active-track]) .dt-side { flex-grow: 1; opacity: 1; }

/* ---- In-side chat form (one per active side, design-handoff style) ----
   Track A side (dark): glass pill on dark surface — variant "light".
   Track B side (cream): ink-bordered solid pill on cream — variant "ink".
   The real `#agent-form` lives in whichever side is active; the other
   side's chat is replaced with a visual-only `.dt-chatbar-preview`. */
/* DualTrack Maxi-Hero (Split-Screen) — kein Rahmen mehr um die Form.
   Container transparent ohne Border/Border-Radius. Pill-Optik wandert
   auf Input + Buttons (jeweils eigenständige Pills, "außerhalb" eines
   gemeinsamen Wrappers). */
.hero--dual-track .dt-side .agent-prompt {
  width: 100%;
  max-width: 560px;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  overflow: visible;
}
/* Track A (dunkle Seite) — Glas-Pill auf Input + Mic/TTS */
.hero--dual-track .dt-side--a .agent-prompt input,
.hero--dual-track .dt-side--a .agent-prompt #agent-mic,
.hero--dual-track .dt-side--a .agent-prompt #agent-tts {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
/* Track B (helle Seite) — solides weißes Pill auf Input + Mic/TTS */
.hero--dual-track .dt-side--b .agent-prompt input,
.hero--dual-track .dt-side--b .agent-prompt #agent-mic,
.hero--dual-track .dt-side--b .agent-prompt #agent-tts {
  background: #ffffff;
  border: 1px solid var(--ink);
}
.hero--dual-track .dt-side .agent-prompt input {
  color: var(--ink);
  padding: 12px 18px;
  font-size: 14.5px;
  border-radius: var(--r-pill);
}
.hero--dual-track .dt-side .agent-prompt input::placeholder {
  color: var(--muted-light);
}
.hero--dual-track .dt-side .agent-prompt #agent-mic,
.hero--dual-track .dt-side .agent-prompt #agent-tts {
  color: var(--ink);
  border-radius: var(--r-pill);
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 500;
}
.hero--dual-track .dt-side .agent-prompt #agent-mic:hover,
.hero--dual-track .dt-side .agent-prompt #agent-tts:hover {
  background: rgba(0, 0, 0, 0.05);
}
.hero--dual-track .dt-side .agent-prompt #agent-submit {
  background: var(--ink);
  color: var(--paper);
  border: 0;
  border-radius: var(--r-pill);
  padding: 0.5rem 1.125rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  /* Input + Mic + TTS sind 44px hoch; der Submit war wegen kleinerem
     Padding/Line-Height nur 36px und fiel beim Zeilenumbruch (eigene
     Flex-Zeile, align-items:center → keine Streckung) als niedriger auf.
     Feste Mindesthöhe + zentrierter Inhalt → immer gleich hoch wie die
     anderen Buttons, auch bei Umbruch (User-Direktive 2026-06-13). */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hero--dual-track .dt-side .agent-prompt #agent-submit:hover {
  background: #1a1a1a;
}
/* Der "Sondieren"-Toggle (.agent-discover-toggle) trägt nur die Klasse
   agent-mic, nicht die ID — die 44px-Grösse von Mic/TTS kommt aber aus
   ID-Selektoren, daher war er nur 36px. Gleiche Mindesthöhe → konsistent
   mit den anderen Buttons, auch bei Umbruch. (Er ist bereits flex +
   align-items:center, daher zentriert der Inhalt korrekt.) */
.hero--dual-track .dt-side .agent-prompt .agent-discover-toggle {
  min-height: 44px;
}

/* Persona-Switcher in the seam — anchored top-center of the split. */
.hero--dual-track .dt-seam-switcher {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
}

/* ---- Mobile: stack the two sides vertically. Switcher above the split. ---- */
@media (max-width: 960px) {
  .hero--dual-track .dt-split { flex-direction: column; min-height: 0; }
  .hero--dual-track .dt-side { padding: 80px 32px 40px; }
  .hero--dual-track[data-active-track] .dt-side { flex-grow: 1; opacity: 1; }
  .hero--dual-track .dt-headline { font-size: 40px; max-width: none; }
  .hero--dual-track .dt-seam-switcher { top: 16px; }
  .hero--dual-track-card { padding: 16px 0 32px; }
  .hero--dual-track-card .hero-dt-container { padding-left: 16px; padding-right: 16px; }
}

/* ============================================================
   DualTrack-Mini hero — compact cluster-route hero (SAP/BTP/AI/OPS).
   Single horizontal row inside a contained 21px-radius card on the
   page background. Track-Pill sits above the chat bar so the user
   can always switch perspective without leaving the page.
   ============================================================ */
.hero--dual-track-mini {
  position: relative;
  background: var(--paper);
  padding: 24px 0 16px;
  isolation: isolate;
}
.hero--dual-track-mini .hero-dt-container {
  padding-left: 32px;
  padding-right: 32px;
}
/* Default mini card — paper on ink-deep (dark gradient), same voice
   as the maxi DualTrack Track-A side. Track B (Process) keeps cream
   so the dual-track flip still feels distinct. */
.hero-dt-card--mini {
  position: relative;
  border-radius: var(--radius-md);
  padding: 28px 36px 24px;
  background: linear-gradient(180deg, #161616 0%, #0a0a0a 100%);
  border: 1px solid var(--hairline-dark);
  box-shadow:
    0 24px 48px -24px rgba(0, 0, 0, 0.45),
    0 1px 2px rgba(0, 0, 0, 0.20);
  color: var(--paper);
  transition: background 0.45s ease, color 0.45s ease, border-color 0.45s ease;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Track A is the IT side — already dark, same gradient as default */
.hero--dual-track-mini[data-active-track="a"] .hero-dt-card--mini {
  background: linear-gradient(180deg, #161616 0%, #0a0a0a 100%);
  color: var(--paper);
  border-color: var(--hairline-dark);
}
/* Track B = Process side — flips to cream paper-warm */
.hero--dual-track-mini[data-active-track="b"] .hero-dt-card--mini {
  background: linear-gradient(180deg, #ffffff 0%, var(--paper-warm) 100%);
  color: var(--ink-deep);
  border-color: var(--hairline-light);
  box-shadow:
    0 12px 32px -16px rgba(0, 0, 0, 0.18),
    0 1px 2px rgba(0, 0, 0, 0.04);
}
.dt-mini-eyebrow {
  display: block;
  font-family: var(--font-meta);
  font-size: var(--type-mono-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--muted-dark);
  margin: 0;
}
.hero--dual-track-mini[data-active-track="b"] .dt-mini-eyebrow {
  color: var(--muted-light);
}
.dt-mini-headline {
  font-family: var(--font-prose);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0;
  max-width: 36ch;
  color: var(--paper);
}
.hero--dual-track-mini[data-active-track="b"] .dt-mini-headline {
  color: var(--ink-deep);
}
.dt-mini-headline-muted {
  display: inline;
  font-style: italic;
  font-weight: 400;
  color: var(--muted-dark);
}
.hero--dual-track-mini[data-active-track="b"] .dt-mini-headline-muted {
  color: var(--muted-light);
}
.dt-mini-body {
  font-family: var(--font-prose);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--body-dark);
  margin: 0;
  max-width: 64ch;
}
.hero--dual-track-mini[data-active-track="b"] .dt-mini-body {
  color: var(--body-light);
}
.dt-mini-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.dt-mini-bar .agent-prompt--mini {
  flex: 1;
  min-width: 280px;
}
.dt-mini-pill {
  display: inline-flex;
  align-self: flex-start;
  gap: 0;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: rgba(10, 10, 10, 0.05);
  border: 1px solid var(--hairline-light);
}
/* The inline track-pill shares the .persona-switcher class for JS
   event-binding (see app.js bindPersonaSwitcher). That class also
   carries the floating-switcher's absolute positioning (top:88px,
   z-index:9), which would make the inline pill float over the
   mini-hero text. Reset the layout-affecting properties here while
   keeping the class for JS. */
.dt-mini-pill.persona-switcher {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  transform: none;
  z-index: auto;
  pointer-events: auto;
  gap: 0;
}
.hero--dual-track-mini[data-active-track="a"] .dt-mini-pill {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--hairline-dark);
}
.dt-mini-pill .ps-btn {
  padding: 6px 14px;
  font-family: var(--font-meta);
  font-size: var(--type-mono-label);
  letter-spacing: var(--ls-mono-tight);
  text-transform: uppercase;
  border: 0;
  background: transparent;
  color: var(--muted-light);
  cursor: pointer;
  border-radius: var(--radius-pill);
  transition: background 120ms ease, color 120ms ease;
}
.hero--dual-track-mini[data-active-track="a"] .dt-mini-pill .ps-btn {
  color: var(--muted-dark);
}
.dt-mini-pill .ps-btn--active {
  background: var(--ink-deep);
  color: var(--paper);
}
.hero--dual-track-mini[data-active-track="a"] .dt-mini-pill .ps-btn--active {
  background: var(--paper);
  color: var(--ink-deep);
}
/* Mini-Hero Chat-Bar — robuste Pill-Group (Input + Buttons getrennt).
   Architektur identisch zu .dp-cta-form: Container ist transparent,
   Input ist eigenständiges Pill mit fester Höhe, Buttons sind eigene
   Pills DANEBEN. Damit verändert kein Button die Höhe des Inputs;
   passt es eng, wrappt der Button auf eine zweite Zeile. */
.agent-prompt.agent-prompt--mini {
  width: 100%;
  display: flex;
  /* nowrap: die Button-Reihe (Sprechen/Anhören/Sondieren) bleibt EINE Zeile.
     Vorher wrap → wenn der versteckte Mic-Button auftauchte oder die Breite
     knapp war, sprang „Sondieren" in eine neue Zeile / verschwand. Das Input
     hat flex:1 1 220px + min-width:0 und schluckt die Breitenänderung. */
  flex-wrap: nowrap;
  align-items: center !important;
  gap: 8px;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  overflow: visible;
  max-width: none;
}
/* Track B (Process — light card) — Border-Akzent wandert auf Input + Buttons */
.hero--dual-track-mini[data-active-track="b"] .agent-prompt--mini input,
.mini-hero-card--light .agent-prompt--mini input,
.hero--dual-track-mini[data-active-track="b"] .agent-prompt--mini #agent-mic,
.hero--dual-track-mini[data-active-track="b"] .agent-prompt--mini #agent-tts,
.hero--dual-track-mini[data-active-track="b"] .agent-prompt--mini .mini-hero-mic,
.hero--dual-track-mini[data-active-track="b"] .agent-prompt--mini .mini-hero-tts,
.mini-hero-card--light .agent-prompt--mini #agent-mic,
.mini-hero-card--light .agent-prompt--mini #agent-tts,
.mini-hero-card--light .agent-prompt--mini .mini-hero-mic,
.mini-hero-card--light .agent-prompt--mini .mini-hero-tts {
  background: var(--paper);
  border-color: var(--ink-deep);
}
.agent-prompt.agent-prompt--mini input {
  flex: 1 1 220px;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--radius-pill);
  padding: 0.65rem 1.125rem;
  font-family: var(--font-prose);
  font-size: 0.95rem;
  line-height: 1.25;
  color: var(--ink-deep);
  outline: none;
  box-sizing: border-box;
}
.agent-prompt.agent-prompt--mini input::placeholder {
  color: var(--muted-light);
}
.agent-prompt.agent-prompt--mini #agent-mic,
.agent-prompt.agent-prompt--mini #agent-tts,
.agent-prompt.agent-prompt--mini .mini-hero-mic,
.agent-prompt.agent-prompt--mini .mini-hero-tts {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-left: 1px solid rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.95);
  color: var(--ink-deep);
  padding: 0.5rem 0.75rem;
  font-family: var(--font-prose);
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.25;
  cursor: pointer;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
  flex-grow: 0;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.agent-prompt.agent-prompt--mini #agent-mic:hover,
.agent-prompt.agent-prompt--mini #agent-tts:hover,
.agent-prompt.agent-prompt--mini .mini-hero-mic:hover,
.agent-prompt.agent-prompt--mini .mini-hero-tts:hover {
  background: rgba(10, 10, 10, 0.06);
  color: var(--ink-deep);
}
.agent-prompt.agent-prompt--mini .agent-tts-toggle--on {
  background: rgba(10, 10, 10, 0.08);
}
.agent-prompt.agent-prompt--mini .agent-mic-text {
  white-space: nowrap;
}
.agent-prompt.agent-prompt--mini .agent-mic-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.4);
}
.agent-prompt.agent-prompt--mini #agent-mic.is-listening .agent-mic-dot {
  background: var(--ink-deep);
  animation: mh-mic-pulse 1.2s ease-in-out infinite;
}
.agent-prompt.agent-prompt--mini button#agent-submit,
.agent-prompt.agent-prompt--mini button.mini-hero-submit {
  border: 0;
  border-left: 0;
  background: var(--ink-deep);
  color: var(--paper);
  /* Analog Cookie-Banner-Button — schlanker Pill (~32px Höhe).
     Deterministische Höhe via padding+line-height. flex-shrink:0 +
     flex-grow:0 → der Button kann das Input weder strecken noch
     stauchen. */
  padding: 0.5rem 1.125rem;
  font-family: var(--font-prose);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  border-radius: var(--radius-pill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  flex-grow: 0;
  white-space: nowrap;
}
.agent-prompt.agent-prompt--mini button#agent-submit:hover,
.agent-prompt.agent-prompt--mini button.mini-hero-submit:hover {
  background: #1a1a1a;
  color: var(--paper);
}
/* Mobile: nur noch die Label-Texte der Icon-Buttons ausblenden.
   Den Layout-Stack brauchen wir nicht mehr — flex-wrap erledigt das
   automatisch wenn der Submit nicht mehr neben das Input passt. */
@media (max-width: 720px) {
  .agent-prompt.agent-prompt--mini #agent-mic .agent-mic-text,
  .agent-prompt.agent-prompt--mini #agent-tts .agent-mic-text,
  .agent-prompt.agent-prompt--mini .mini-hero-mic .agent-mic-text,
  .agent-prompt.agent-prompt--mini .mini-hero-tts .agent-mic-text { display: none; }
}
/* Dark Track A / dark single-mini — flip the in-form colors */
.hero--dual-track-mini[data-active-track="a"] .agent-prompt--mini #agent-mic,
.hero--dual-track-mini[data-active-track="a"] .agent-prompt--mini #agent-tts {
  color: var(--ink-deep);
}

@media (max-width: 880px) {
  .hero--dual-track-mini { padding: 16px 0 12px; }
  .hero--dual-track-mini .hero-dt-container { padding-left: 16px; padding-right: 16px; }
  .hero-dt-card--mini { padding: 22px 22px 18px; gap: 10px; }
  .dt-mini-headline { font-size: 1.4rem; }
  .dt-mini-bar { gap: 10px; }
  .dt-mini-bar .agent-prompt--mini { width: 100%; flex: 1 1 100%; min-width: 0; }
}

/* On mini, hide the floating persona-switcher (we have the inline pill) */
body:has(.hero--dual-track-mini) > .persona-switcher { display: none; }

/* Detail-Pages (#/detail/{id}) tragen keinen Hero mit Sicht-Switcher und
   sind ein fokussierter Lese-Kontext — der floating "Sicht wählen"-Pill
   wird dort generell ausgeblendet. layout-root[data-route="detail"] wird
   synchron in renderDetailPage() gesetzt, die Regel greift also reaktiv. */
body:has(#layout-root[data-route="detail"]) > .persona-switcher { display: none; }

/* ============================================================
   SingleMiniHero — same compact card shape as DualTrack-Mini but
   without the track-pill. Used for every single-track variant on
   cluster routes (Focus, Tech-Focus, Pain-*, persona-broad). The
   `.hero-dt-card--mini-dark` modifier lights up the dark gradient
   for variants with `appearance: "dark"` (Spotlight, Security).
   ============================================================ */
.hero--single-mini {
  position: relative;
  background: var(--paper);
  padding: 24px 0 16px;
  isolation: isolate;
}
.hero--single-mini-light {
  background: var(--paper);
}
.hero--single-mini .hero-dt-container {
  padding-left: 32px;
  padding-right: 32px;
}
/* Light opt-in modifier for SingleMini cards — same shape, paper bg
   with hairline-light border + soft shadow + ink text. Used when a
   YAML variant explicitly sets `appearance: "light"`. */
.hero-dt-card--mini-light {
  background: var(--paper) !important;
  color: var(--ink-deep) !important;
  border-color: var(--hairline-light) !important;
  box-shadow:
    0 12px 32px -16px rgba(0, 0, 0, 0.18),
    0 1px 2px rgba(0, 0, 0, 0.04) !important;
}
.hero-dt-card--mini-light .dt-mini-eyebrow {
  color: var(--muted-light);
}
.hero-dt-card--mini-light .dt-mini-headline {
  color: var(--ink-deep);
}
.hero-dt-card--mini-light .dt-mini-headline-muted {
  color: var(--muted-light);
}
.hero-dt-card--mini-light .dt-mini-body {
  color: var(--body-light);
}
/* Light Mini-Card — Border-Akzent wandert auf Input + Buttons,
   der Form-Container bleibt transparent (keine sichtbare Pille
   mehr um alle Kinder herum). */
.hero-dt-card--mini-light .agent-prompt--mini input,
.hero-dt-card--mini-light .agent-prompt--mini #agent-mic,
.hero-dt-card--mini-light .agent-prompt--mini #agent-tts,
.hero-dt-card--mini-light .agent-prompt--mini .mini-hero-mic,
.hero-dt-card--mini-light .agent-prompt--mini .mini-hero-tts {
  background: var(--paper);
  border-color: var(--ink-deep);
}
/* Backwards-compat — `appearance: "dark"` still maps to the same
   default dark gradient. */
.hero-dt-card--mini-dark {
  background: linear-gradient(180deg, #161616 0%, #0a0a0a 100%) !important;
  color: var(--paper) !important;
  border-color: var(--hairline-dark) !important;
}
/* Single-mini bar has no track-pill — chat alone fills the row */
.dt-mini-bar--single .agent-prompt--mini {
  flex: 1 1 auto;
  width: 100%;
  max-width: 720px;
}
@media (max-width: 880px) {
  .hero--single-mini { padding: 16px 0 12px; }
  .hero--single-mini .hero-dt-container { padding-left: 16px; padding-right: 16px; }
  .dt-mini-bar--single .agent-prompt--mini { max-width: none; }
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1; }

a {
  color: inherit;
  text-decoration: none;
}

p { margin: 0 0 var(--space-3); }

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ---------- AI-rendered text slots ---------- */

/* Lead/footer slots are inserted around major sections by the JS render
   pipeline. Empty slots collapse so the layout matches the static design;
   filled slots show subtle styling that distinguishes AI text from static
   copy without shouting. */
.ai-slot {
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.0625rem;        /* was 0.9375 — too small to compete */
  line-height: 1.6;
  max-width: 62ch;
  border-left: 3px solid var(--ink, #1a1a1a); /* was 2px var(--line) */
  padding-left: 1.125rem;       /* was 0.875 */
  margin: 0;
}
/* Lead specifically (above the headline) gets a touch more weight so it
   doesn't get scanned over. Footer keeps the lighter italic feel. */
.ai-slot.ai-lead {
  font-size: 1.125rem;
  line-height: 1.55;
  font-style: normal;           /* lead reads as a quiet observation, not a flourish */
  color: var(--ink, #1a1a1a);   /* full ink, not soft */
}
.ai-slot.ai-lead .beat-bridge,
.ai-slot.ai-lead .beat-hook {
  color: var(--ink, #1a1a1a);
}
/* Dark hero — the lead-prominent rule above is light-theme ink which
   would render near-invisible on the dark hero. Override with the dark
   ink token (specificity bump via .hero--dark prefix wins over .ai-lead). */
.hero--dark .ai-slot.ai-lead,
.section--dark .ai-slot.ai-lead {
  color: var(--dark-ink);
}
.hero--dark .ai-slot.ai-lead .beat-hook,
.hero--dark .ai-slot.ai-lead .beat-bridge,
.section--dark .ai-slot.ai-lead .beat-hook,
.section--dark .ai-slot.ai-lead .beat-bridge {
  color: var(--dark-ink);
}
.ai-slot:empty { display: none; }
.ai-slot.is-loading {
  color: var(--ink-muted);
  border-left-color: var(--ink-muted);
  animation: aiPulse 1.4s ease-in-out infinite;
}
@keyframes aiPulse { 50% { opacity: 0.55; } }

.ai-lead   { margin: 0 0 var(--space-3); }
.ai-footer { margin: var(--space-4) 0 0; }

/* --- v2 structured beats: Hook · Bridge · Move (lead) ----
       Reflection · Question (footer)

   Each beat is a span with semantic typography. The hook reads as a
   pointed headline, the bridge as the connective sentence using context,
   the move as a verb-leading micro-CTA. We avoid italic on v2 so the
   visual hierarchy is carried by weight and color rather than slant. */
.ai-slot--v2 {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding-left: 0.875rem;
}

.beat {
  display: block;
  line-height: 1.45;
  letter-spacing: -0.005em;
}

.beat-hook {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.015em;
}

.beat-bridge {
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.beat-move {
  font-size: 0.8125rem;
  color: var(--ink);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ink);
  align-self: flex-start;
  padding-bottom: 1px;
}

.beat-reflection {
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.beat-question {
  font-size: 0.9375rem;
  color: var(--ink);
  font-weight: 500;
  font-style: italic;
}

/* ---------- Header (v2 dark glass) ----------
   The public site header is a sticky dark-glass band that floats over
   whatever surface scrolls beneath it. Workspace shells (admin /
   content workspace) override locally and stay light — they aren't
   `.site-header` instances anyway, so the change only hits the public
   header at #public-header.
   ============================================================ */

.site-header {
  background: var(--glass-header-bg);
  -webkit-backdrop-filter: var(--glass-header-blur);
  backdrop-filter: var(--glass-header-blur);
  border-bottom: 1px solid var(--hairline-dark);
  color: var(--paper);
  position: sticky;
  top: 0;
  z-index: 10;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* v2 layout: 18px vertical, max-content 1280px (overrides the
     .container max-width 1120 if .container is the wrapper). The
     existing .container wrapper still applies its 32px horizontal
     padding which matches the spec. */
  max-width: var(--max-content);
  padding-top: 18px;
  padding-bottom: 18px;
  gap: var(--space-4);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
}
.brand-logo {
  display: block;
  height: 32px;
  width: auto;
  flex-shrink: 0;
  /* PNG logo with integrated wordmark (gems + SFOUR letters baked in).
     Use BoW (black-on-white) for light surfaces, WoB (white-on-black)
     for dark surfaces — switched by CSS class on a dark wrapper. */
}
.brand-meta {
  font-family: var(--font-meta);
  font-size: var(--type-mono-eyebrow);
  color: var(--muted-dark);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  line-height: 1;
}
/* Workspace shells (admin / content WS) keep the brand-meta on light. */
.cw-brand .brand-meta,
.admin-brand .brand-meta { color: var(--ink-muted); }

/* Smaller variants for the workspace shells (content + admin) where the
   sidebar chrome is denser. */
.cw-brand .brand-logo,
.admin-brand .brand-logo {
  height: 24px;
}
.cw-brand,
.admin-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ============================================================
   PRIMARY NAVIGATION — harmonised
   One nav container with two groups: routes and account actions.
   Buttons and links share the same visual grammar — no "two worlds".
   ============================================================ */

.nav {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  font-size: 0.875rem;
  margin-left: auto;
}

.nav-group {
  display: flex;
  gap: var(--space-4);
  align-items: center;
}

/* Visual separator between routes and account group */
.nav-group--account {
  position: relative;
  padding-left: var(--space-3);
}
.nav-group--account::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--hairline-dark);
}

/* Hide the account group entirely if it's empty (no auth UI to show) */
.nav-group--account:empty { display: none; }

/* Sprach-Toggle (DE/EN compact pill switcher) */
.nav-group--lang {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hairline-dark);
  border-radius: 999px;
}
.lang-pill {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--ink-muted, rgba(255,255,255,0.55));
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 120ms ease, background-color 120ms ease;
}
.lang-pill:hover { color: var(--paper, #fff); }
.lang-pill[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.12);
  color: var(--paper, #fff);
}
.lang-pill:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Unified link/button style for nav items.
   v2: dark glass header → text is muted-dark by default, brightens to
   paper on hover. Active route gets the full paper color + 1px white
   underline 4px below baseline (per padding-bottom). */
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  position: relative;
  padding: 6px 4px;
  font: inherit;
  font-size: var(--type-ui-s);
  letter-spacing: 0.01em;
  color: var(--muted-dark);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--t-fast);
}
.nav-link:hover { color: var(--paper); }
.nav-link:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 2px;
}

/* Active top-level route — full paper color + 1px white underline.
   The underline sits via the same ::after as before, but on dark glass
   it carries the paper color instead of ink. */
.nav-route.active {
  color: var(--paper);
  font-weight: 500;
}
.nav-route.active::after {
  content: "";
  position: absolute;
  left: 4px; right: 4px; bottom: -1px;
  height: 1px;
  background: var(--paper);
}

/* CTA-Variant for the prominent Login button when anonymous.
   v2: white pill on dark header; hover inverts to outlined. */
.nav-link--cta {
  border: 1px solid var(--paper);
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--ink);
  padding: 6px 16px;
}
.nav-link--cta:hover {
  background: transparent;
  color: var(--paper);
}

/* Quiet variant for secondary account actions (Passwort, Logout) */
.nav-link--quiet { color: var(--muted-dark); font-size: 0.78rem; }
.nav-link--quiet:hover { color: var(--paper); }

/* Logged-in user-menu — collapsed trigger + absolute dropdown */
.nav-user-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-user-menu[hidden] { display: none; }

.nav-user-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  background: transparent;
  border: 1px solid var(--hairline-dark);
  border-radius: 999px;
  padding: 4px 10px 4px 12px;
  font: inherit;
  font-size: 0.825rem;
  color: var(--muted-dark);
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.nav-user-trigger:hover { color: var(--paper); border-color: var(--paper); }
.nav-user-trigger[aria-expanded="true"] { color: var(--paper); border-color: var(--paper); }
.nav-user-trigger:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 2px;
}

.auth-username {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.auth-username #auth-username-text { font-weight: 500; color: var(--paper); }

.nav-user-chevron {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  transition: transform var(--t-fast);
}
.nav-user-trigger[aria-expanded="true"] .nav-user-chevron { transform: rotate(180deg); }

.nav-user-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 6px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
  z-index: 20;
}
.nav-user-dropdown[hidden] { display: none; }

.nav-user-item {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 8px 10px;
  font: inherit;
  font-size: 0.875rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 15px;
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.nav-user-item:hover { background: var(--surface-soft, rgba(0,0,0,0.04)); }
.nav-user-item[hidden] { display: none; }
.nav-user-item--quiet { color: var(--ink-muted); font-size: 0.825rem; }
.nav-user-item--quiet:hover { color: var(--ink); }

.nav-user-sep {
  height: 1px;
  background: var(--line);
  margin: 4px 6px;
}
/* Hide separator when both upper items are hidden (no workspace perms) */
.nav-user-dropdown:has(#auth-open-content-ws[hidden]):has(#auth-open-admin[hidden]) .nav-user-sep {
  display: none;
}

/* Layout-root hint while fetching */
#layout-root.layout-loading {
  opacity: 0.55;
  transition: opacity var(--t-med);
}

/* Hamburger toggle — hidden on desktop, shown on narrow viewports.
   v2: dark header → bars and border are paper/hairline-dark instead
   of ink/line. */
.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--hairline-dark);
  background: transparent;
  cursor: pointer;
  padding: 0;
  margin-left: auto;
  border-radius: 12px;
}
.nav-toggle-bar {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--paper);
  transition: transform 200ms ease, opacity 200ms ease;
  transform-origin: center;
}
.nav-toggle.is-open .nav-toggle-bar:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}
.nav-toggle.is-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-open .nav-toggle-bar:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}

/* Hamburger breakpoint — bumped to 960px so the *logged-in* nav (which
   adds Admin, Inhalte, Passwort, Logout on top of the 6 routes) collapses
   cleanly on iPad-portrait and small laptops, not just on phones. */
@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; margin-left: auto; }
  .header-inner {
    flex-wrap: nowrap;
    gap: var(--space-2);
    align-items: center;
  }
  /* Header bleibt auch mobil sticky (vorher: position:relative — der
     Header scrollte auf dem Handy weg). Ein eigener relative-Anker ist
     unnötig: sticky etabliert genauso den Positionierungskontext, der
     absolute .nav-Drawer (top:100%) hängt weiterhin unter dem Header
     und bleibt beim Scrollen mit ihm oben fixiert. */

  /* Nav becomes a full-width drawer, anchored below the header.
     v2: drawer carries the same dark-glass surface as the header for
     visual consistency — items keep their desktop muted-dark / paper
     palette and stay readable. */
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-left: 0;
    background: var(--glass-header-bg);
    -webkit-backdrop-filter: var(--glass-header-blur);
    backdrop-filter: var(--glass-header-blur);
    border-top: 1px solid var(--hairline-dark);
    border-bottom: 1px solid var(--hairline-dark);
    box-shadow: 0 8px 24px -10px rgba(0,0,0,0.4);
    padding: var(--space-2) var(--space-3) var(--space-3);
  }
  .nav.is-open { display: flex; }

  /* Each group becomes a vertical stack */
  .nav-group {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  /* Replace the desktop side-separator with a horizontal divider */
  .nav-group--account {
    padding-left: 0;
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--hairline-dark);
  }
  .nav-group--account::before { display: none; }

  /* Each nav link as a tappable row — color stays from desktop rule
     (muted-dark, brightening to paper on hover/active). */
  .nav-link {
    padding: 12px 4px;
    font-size: 1rem;
    text-align: left;
    width: 100%;
    border-bottom: 1px solid transparent;
    justify-content: flex-start;
  }
  .nav-link:not(:last-child) { border-bottom-color: var(--hairline-dark); }
  .nav-route.active::after { display: none; }
  .nav-route.active { border-bottom-color: var(--paper); }

  /* The CTA Login button stays prominent in the drawer */
  .nav-link--cta {
    margin-top: 8px;
    padding: 12px 16px;
    text-align: center;
    justify-content: center;
    border-bottom: 1px solid var(--paper);
  }

  /* Logged-in identity: trigger + dropdown stack vertically inside the drawer.
     The dropdown loses its absolute positioning and just expands inline below
     the trigger row. On dark drawer the items adopt the paper/muted-dark
     palette so they stay legible. */
  .nav-user-menu { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .nav-user-trigger {
    width: 100%;
    justify-content: space-between;
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid var(--hairline-dark);
    padding: 12px 4px;
    font-size: 0.95rem;
  }
  .nav-user-dropdown {
    position: static;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 4px 0 8px;
    min-width: 0;
  }
  .nav-user-item {
    padding: 12px 4px;
    border-radius: 0;
    border-bottom: 1px solid transparent;
    color: var(--paper);
  }
  .nav-user-item:hover { background: rgba(255,255,255,0.04); }
  .nav-user-item:not(:last-child) { border-bottom-color: var(--hairline-dark); }
  .nav-user-item--quiet { color: var(--muted-dark); }
  .nav-user-item--quiet:hover { color: var(--paper); }
  .nav-user-sep { display: none; }

  /* Brand + space distribution */
  .brand { flex: 1 1 auto; min-width: 0; }
  .brand-meta { display: none; }
}

/* ---------- Hero ---------- */

.hero {
  padding: var(--space-10) 0 var(--space-8);
  border-bottom: 1px solid var(--line);
  position: relative;
  isolation: isolate;
}

/* Hero with background image — same overlay system as mini-hero so
   the headline stays readable on any photo. yaml: variant.config.
   background_image (or images.hero / images.cover via mediathek). */
.hero.hero--with-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #0a0a0a;
  color: #ffffff;
  border-bottom: 0;
  border-radius: var(--radius-lg);
  /* Constrained to content area, centered with side margins */
  max-width: var(--max-width);
  margin: var(--space-3) auto var(--space-5);
  overflow: hidden;
}
@media (max-width: 1180px) {
  .hero.hero--with-image {
    margin-left: var(--space-3);
    margin-right: var(--space-3);
  }
}
.hero.hero--with-image .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
              rgba(0, 0, 0, 0.72) 0%,
              rgba(0, 0, 0, 0.50) 55%,
              rgba(0, 0, 0, 0.65) 100%);
  z-index: 0;
  pointer-events: none;
}
.hero.hero--with-image > .container {
  position: relative;
  z-index: 1;
}
.hero.hero--with-image .eyebrow {
  color: rgba(255, 255, 255, 0.75);
}
.hero.hero--with-image .hero-headline {
  color: #ffffff;
}
.hero.hero--with-image .hero-sub {
  color: rgba(255, 255, 255, 0.85);
}
/* Agent form on the image-hero — robuste "Buttons außerhalb"-
   Architektur (analog Mini-Hero). Container ist transparent;
   Input ist ein eigenständiges Glass-Pill, Buttons sind eigene
   Pills DANEBEN. Damit kann kein Button die Höhe des Inputs
   beeinflussen. */
.hero.hero--with-image .agent-prompt {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  overflow: visible;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* Input — eigenes Glass-Pill mit deterministischer Höhe. */
.hero.hero--with-image .agent-prompt input {
  color: #ffffff;
  background: rgba(10, 10, 10, 0.40);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hero.hero--with-image .agent-prompt input::placeholder {
  color: rgba(255, 255, 255, 0.62);
}
/* Mic / TTS — eigene Glass-Pills daneben. */
.hero.hero--with-image .agent-prompt #agent-mic,
.hero.hero--with-image .agent-prompt #agent-tts {
  background: rgba(10, 10, 10, 0.40);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-pill);
  padding: 0.5rem 0.75rem;
  font-weight: 500;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hero.hero--with-image .agent-prompt #agent-mic:hover,
.hero.hero--with-image .agent-prompt #agent-tts:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}
.hero.hero--with-image .agent-prompt #agent-mic.agent-mic--on,
.hero.hero--with-image .agent-prompt #agent-tts.agent-tts-toggle--on {
  background: rgba(255, 255, 255, 0.20);
  color: #ffffff;
}
/* Submit — solides weißes Pill DANEBEN für klaren Kontrast. */
.hero.hero--with-image .agent-prompt #agent-submit {
  background: #ffffff;
  color: var(--ink);
  border: 0;
  border-radius: var(--radius-pill);
  padding: 0.5rem 1.125rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  flex-shrink: 0;
  flex-grow: 0;
  white-space: nowrap;
}
.hero.hero--with-image .agent-prompt #agent-submit:hover {
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
}
.hero.hero--with-image .agent-meta,
.hero.hero--with-image .mode-indicator {
  color: rgba(255, 255, 255, 0.7);
}

/* Eyebrow / meta-label — JetBrains Mono uppercase. The legacy class
   `.eyebrow` stays in the markup; the new canonical name is
   `.meta-label`. Both render identically so templates can adopt the
   new name without needing simultaneous CSS changes. */
.eyebrow,
.meta-label {
  font-family: var(--font-meta);
  font-size: var(--type-mono-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 var(--space-3);
}
.meta-label--inline {
  /* Inline variant — no bottom margin, used inside flex rows. */
  margin: 0;
}
.meta-label--dark {
  color: var(--muted-dark);
}

.hero-headline {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-4);
  max-width: 22ch;
}

.hero-sub {
  font-size: 1.125rem;
  color: var(--ink-soft);
  max-width: 60ch;
  margin: 0 0 var(--space-6);
}

/* Agent prompt — robuste Pill-Group (Input + Buttons getrennt).
   Container ist transparent ohne overflow:hidden; das Input ist ein
   eigenständiges Pill mit deterministischer Höhe, die Buttons sind
   separate Pills DANEBEN. Damit kann kein Button das Input je
   strecken oder stauchen — sie sind keine Geschwister im selben
   visuellen Pill mehr. Wenn der Submit nicht mehr neben das Input
   passt, wrappt er via flex-wrap auf eine neue Zeile. */
.agent-prompt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  max-width: 760px;
  overflow: visible;
  transition: box-shadow var(--t-med);
}
.agent-prompt input {
  flex: 1 1 220px;
  min-width: 0;
  border: 1px solid var(--ink);
  outline: 0;
  background: var(--bg);
  border-radius: var(--radius-pill);
  padding: 0.65rem 1.125rem;
  font: inherit;
  line-height: 1.25;
  color: var(--ink);
  box-sizing: border-box;
  transition: box-shadow var(--t-med);
}
.agent-prompt input:focus-within,
.agent-prompt input:focus {
  box-shadow: 0 0 0 3px rgba(10,10,10,0.08);
}
.agent-prompt input::placeholder {
  color: var(--ink-muted);
}
.agent-prompt > button {
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--bg);
  /* Schlanker Pill — analog Cookie-Banner. */
  padding: 0.5rem 1.125rem;
  border-radius: var(--radius-pill);
  font: inherit;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  line-height: 1.25;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  flex-grow: 0;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast);
}
.agent-prompt > button:hover {
  background: var(--bg);
  color: var(--ink);
}
.agent-prompt > button .arrow {
  transition: transform var(--t-fast);
}
.agent-prompt > button:hover .arrow {
  transform: translateX(3px);
}

.agent-meta {
  margin-top: var(--space-3);
  font-size: 0.75rem;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}
.mode-indicator::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--ink-muted);
  border-radius: 50%;
  margin-right: 0.5rem;
  vertical-align: middle;
}
.mode-indicator.live::before { background: var(--ink); }

/* Agent response */
.agent-response {
  margin-top: var(--space-6);
  border-top: 1px solid var(--line);
  padding-top: var(--space-6);
  animation: fadeIn 280ms ease;
}
/* Quellen-Chips unter der Agent-Antwort — die zitierten Inhalte als
   klickbare Links, statt roher [content-id] im Fliesstext. */
.answer-citations {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--line);
}
.answer-citations__label {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-right: 2px;
}
.answer-citation {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  font-size: 0.8rem;
  line-height: 1.2;
  color: var(--ink-soft);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease;
}
.answer-citation__date {
  margin-left: 7px;
  padding-left: 7px;
  border-left: 1px solid var(--line);
  font-size: 0.72rem;
  color: var(--ink-muted, #8a8a8a);
  font-family: var(--font-mono, ui-monospace, monospace);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.answer-citation:hover {
  border-color: var(--ink);
  color: var(--ink);
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.agent-meta-row {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tag {
  background: var(--ink);
  color: var(--bg);
  padding: 0.25rem 0.625rem;
}
.tag-light {
  border: 1px solid var(--line);
  padding: 0.25rem 0.625rem;
  color: var(--ink-muted);
}

.agent-answer {
  font-size: 1.125rem;
  line-height: 1.55;
  max-width: 60ch;
  margin: 0 0 var(--space-4);
}

/* =====================================================================
   /agent — AI-Leistungs-Showcase-Page
   ===================================================================== */
.ap-hero {
  padding: 96px 0 56px;
  border-bottom: 1px solid var(--hairline);
}
.ap-eyebrow,
.ap-section-eyebrow {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted, #666);
  margin: 0 0 16px;
}
.ap-headline,
.ap-section-headline {
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.15;
  margin: 0 0 20px;
  font-weight: 600;
  max-width: 24ch;
  color: var(--ink);
}
.ap-section-headline {
  max-width: 32ch;
}
.ap-lead,
.ap-demo-lead {
  font-size: 17px;
  line-height: 1.55;
  color: var(--body-light, #444);
  max-width: 60ch;
  margin: 0;
}
.ap-section {
  padding: 64px 0;
  border-bottom: 1px solid var(--hairline);
}
.ap-section--inverse {
  background: #0a0a0a;
  color: var(--paper);
  border-bottom: 0;
}
.ap-section--inverse .ap-section-eyebrow { color: rgba(255,255,255,0.55); }
.ap-section--inverse .ap-section-headline { color: var(--paper); }

/* Pipeline-Diagramm — 4 Karten mit Pfeilen dazwischen */
.ap-pipeline {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  gap: 16px;
  align-items: stretch;
  margin-top: 32px;
}
.ap-stage {
  background: #fafafa;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ap-stage-num {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-weight: 600;
  font-size: 14px;
}
.ap-stage-title {
  font-size: 16px;
  margin: 0;
  font-weight: 600;
}
.ap-stage-body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--body-light, #555);
  margin: 0;
}
.ap-stage-body code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.92em;
  background: rgba(0,0,0,0.05);
  padding: 1px 5px;
  border-radius: 3px;
}
.ap-stage-arrow {
  align-self: center;
  font-size: 24px;
  color: var(--ink-muted, #aaa);
  font-family: var(--font-mono, ui-monospace, monospace);
}

/* Can/Can't-Block */
.ap-cando {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 32px;
}
.ap-cando-col {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 24px 28px;
}
.ap-cando-h {
  font-size: 13px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 14px;
  color: rgba(255,255,255,0.75);
}
.ap-cando-col--can .ap-cando-h::before { content: "✓ "; color: #6cd99f; }
.ap-cando-col--cant .ap-cando-h::before { content: "✕ "; color: #e88c8c; }
.ap-cando-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.ap-cando-list li {
  padding-left: 18px;
  position: relative;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,0.85);
}
.ap-cando-list li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: rgba(255,255,255,0.4);
}
.ap-cando-list code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.92em;
  background: rgba(255,255,255,0.08);
  padding: 1px 5px;
  border-radius: 3px;
}

/* Tech-Stack-Karten */
.ap-stack {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 32px;
}
.ap-stack-card {
  background: #fafafa;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 22px 24px;
}
.ap-stack-eyebrow {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted, #888);
  margin: 0 0 8px;
}
.ap-stack-h {
  font-size: 17px;
  margin: 0 0 8px;
  font-weight: 600;
}
.ap-stack-body {
  font-size: 13px;
  line-height: 1.5;
  color: var(--body-light, #555);
  margin: 0;
}

/* Live-Metriken */
.ap-section--metrics {
  background: linear-gradient(180deg, #fafafa, #f4f4f4);
}
.ap-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-top: 32px;
  margin-bottom: 24px;
}
.ap-metric {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 28px 24px;
  text-align: left;
}
.ap-metric-num {
  font-size: 36px;
  font-weight: 600;
  font-family: var(--font-mono, ui-monospace, monospace);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 6px;
}
.ap-metric-label {
  font-size: 12px;
  color: var(--ink-muted, #666);
  font-family: var(--font-mono, ui-monospace, monospace);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ap-metrics-note {
  font-size: 12px;
  color: var(--ink-muted, #888);
  line-height: 1.5;
  margin-top: 16px;
}
.ap-metrics-note code {
  font-family: var(--font-mono, ui-monospace, monospace);
  background: rgba(0,0,0,0.05);
  padding: 1px 5px;
  border-radius: 3px;
}

/* Metrik-Karten v2 — Label oben, grosse Count-up-Zahl, dünne Daten-Spur
   (Latenz-Skala / Konfidenz-Bar / Empfehlungs-Punkte). Monochrom-kalt. */
.ap-metrics--v2 {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
}
.ap-metrics--v2 .ap-metric {
  display: flex;
  flex-direction: column;
  min-height: 168px;
  padding: 24px 26px 20px;
}
.ap-metrics--v2 .ap-metric-label {
  margin-bottom: 16px;
}
.ap-metrics--v2 .ap-metric-num {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: clamp(42px, 4.5vw, 56px);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 20px;
}
.ap-metric-unit {
  font-size: 0.42em;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-muted, #6a6a6a);
}
.ap-metric-track {
  height: 4px;
  border-radius: 2px;
  background: rgba(10, 10, 10, 0.08);
  overflow: hidden;
  margin-top: auto;
}
.ap-metric-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: var(--ink);
}
.ap-metric-fill.is-in {
  width: var(--fill, 0%);
  transition: width 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s;
}
.ap-metric-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  margin-top: auto;
}
.ap-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink);
  opacity: 0.78;
  display: inline-block;
}
.ap-dot-more {
  font-size: 11px;
  font-family: var(--font-mono, ui-monospace, monospace);
  color: var(--ink-muted, #8a8a8a);
  margin-left: 3px;
}
.ap-metric-scale {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  font-family: var(--font-mono, ui-monospace, monospace);
  color: var(--ink-muted, #8a8a8a);
}
@media (prefers-reduced-motion: reduce) {
  .ap-metric-fill,
  .ap-metric-fill.is-in {
    width: var(--fill, 0%);
    transition: none;
  }
}

/* Demo-Sektion */
.ap-section--demo {
  background: var(--paper);
}
.ap-demo-controls {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.ap-demo-out {
  margin-top: 32px;
  padding: 24px;
  background: #fafafa;
  border: 1px solid var(--hairline);
  border-radius: 10px;
}
.ap-demo-status {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 13px;
  color: var(--ink-muted, #666);
  margin: 0;
}
.ap-demo-question {
  font-size: 14px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--hairline);
}
.ap-demo-q-label {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted, #888);
  margin-right: 8px;
}
.ap-demo-answer {
  font-size: 15px;
  line-height: 1.55;
  color: var(--body-light, #444);
}

/* Responsive */
@media (max-width: 900px) {
  .ap-pipeline {
    grid-template-columns: 1fr;
  }
  .ap-stage-arrow {
    transform: rotate(90deg);
    margin: 0 auto;
  }
  .ap-cando {
    grid-template-columns: 1fr;
  }
  .ap-section-headline {
    max-width: none;
  }
}
@media (max-width: 600px) {
  .ap-hero { padding: 48px 0 32px; }
  .ap-section { padding: 40px 0; }
}

/* =====================================================================
   Agent-Prompt-Hint — Mikrohint ÜBER dem Chat-Eingang.
   Eine Zeile mit Live-Indikator + Link auf /agent (Phase 3 des AI-
   Onboarding-Konzepts). Senkt die Hemmschwelle vor dem ersten Chat
   und schickt Interessierte auf die Showcase-Page.
   ===================================================================== */
.agent-prompt-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Visuell UNTER dem Form-Input rendern, obwohl im DOM davor — via
     CSS-order. Damit ist die Hint die "zweite Zeile" und stört nicht
     den klaren Lead-Pfad zum Eingabefeld. */
  order: 2;
  flex-basis: 100%;
  margin: 20px 0 4px;
  padding: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-muted, #666);
  font-family: var(--font-mono, ui-monospace, monospace);
  letter-spacing: 0.01em;
  flex-wrap: wrap;
}
/* Parent-Container die das Form + Hint enthalten brauchen flex-wrap,
   damit die Hint auf eine eigene Zeile unter dem Form springen kann. */
.dt-shared-bar,
.mini-hero,
.hero-cta-row,
.agent-input-bar {
  flex-wrap: wrap;
}
.agent-prompt-hint a {
  color: var(--ink, #1a1a1a);
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,0.2);
  transition: border-color 0.15s ease;
  white-space: nowrap;
}
.agent-prompt-hint a:hover {
  border-bottom-color: var(--ink);
}
.agent-prompt-hint-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2ea878;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(46, 168, 120, 0.4);
  animation: prompt-hint-pulse 2.4s ease-out infinite;
}
@keyframes prompt-hint-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(46, 168, 120, 0.5); }
  60%  { box-shadow: 0 0 0 7px rgba(46, 168, 120, 0);   }
  100% { box-shadow: 0 0 0 0   rgba(46, 168, 120, 0);   }
}
/* Auf dunklen Hero-Tracks (Track A) — kontrastreiche Variante */
.dt-side--a .agent-prompt-hint {
  color: rgba(255,255,255,0.7);
}
.dt-side--a .agent-prompt-hint a {
  color: var(--paper);
  border-bottom-color: rgba(255,255,255,0.3);
}
.dt-side--a .agent-prompt-hint a:hover {
  border-bottom-color: var(--paper);
}
/* Mini-Hero — kompakter, kleinere Type, Hint optional weglassen wenn
   es zu eng wird */
.agent-prompt--mini ~ * .agent-prompt-hint,
.agent-prompt-hint + .agent-prompt--mini {
  font-size: 11px;
  margin-bottom: 6px;
}
@media (prefers-reduced-motion: reduce) {
  .agent-prompt-hint-dot { animation: none; }
}
@media (max-width: 600px) {
  .agent-prompt-hint {
    font-size: 11px;
    gap: 6px;
  }
}

/* =====================================================================
   Agent-Pipeline-Trace — Live-Transparenz-Strip ÜBER der Chat-Antwort.
   Zeigt in 5 Schritten was der Agent gemacht hat (Persona-Klassi-
   fikation, Cluster, RAG, Berater-Match, LLM-Latenz). Monospace,
   ink-muted, gestaffelt animierte Schritte — wirkt wie ein „Live-Log"
   ohne ablenkend zu sein.

   Doppel-Effekt: Onboarding für den User PLUS AI-Leistungs-Showcase.
   ===================================================================== */
/* <details>-basiert: zugeklappt = schlanke einzeilige Zusammenfassung
   ("Agent-Pipeline · 6.7s · gpt-5.4-mini"), Klick = aufklappen mit
   Schritt-Liste. Native browser behaviour — kein JS noetig. */
.agent-trace {
  margin: 0 0 var(--space-3);
  padding: 0;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  overflow: hidden;
  transition: background 140ms ease;
}
.agent-trace[open] {
  background: rgba(0, 0, 0, 0.025);
}
.agent-trace-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 6px 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 100ms ease;
}
.agent-trace-head::-webkit-details-marker { display: none; }
.agent-trace-head:hover {
  background: rgba(0, 0, 0, 0.035);
}
.agent-trace-head::before {
  content: "▸";
  display: inline-block;
  margin-right: 6px;
  color: var(--ink-muted, #888);
  font-size: 9px;
  transition: transform 140ms ease;
}
.agent-trace[open] .agent-trace-head::before {
  transform: rotate(90deg);
}
.agent-trace[open] .agent-trace-head {
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--hairline);
}
.agent-trace[open] .agent-trace-steps {
  padding: 0 14px 12px;
}
.agent-trace-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink, #1a1a1a);
}
.agent-trace-meta-head {
  font-size: 11px;
  color: var(--ink-muted, #888);
}
.agent-trace-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.agent-trace-step {
  display: grid;
  grid-template-columns: 14px 145px 1fr auto;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-muted, #666);
  /* Tick-in-Animation — staggered via inline animation-delay */
  opacity: 0;
  transform: translateX(-4px);
  animation: trace-tick-in 0.32s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.agent-trace-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent, #2ea878);
  display: inline-block;
  box-shadow: 0 0 0 0 rgba(46, 168, 120, 0.4);
  animation: trace-dot-pulse 1.5s ease-out;
}
.agent-trace-label {
  color: var(--ink-muted, #888);
}
.agent-trace-value {
  color: var(--ink, #1a1a1a);
  font-weight: 500;
  word-break: break-word;
}
.agent-trace-meta {
  color: var(--ink-muted, #aaa);
  font-size: 11px;
  white-space: nowrap;
}
@keyframes trace-tick-in {
  to { opacity: 1; transform: translateX(0); }
}
@keyframes trace-dot-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(46, 168, 120, 0.6); }
  70%  { box-shadow: 0 0 0 6px rgba(46, 168, 120, 0);   }
  100% { box-shadow: 0 0 0 0   rgba(46, 168, 120, 0);   }
}
@media (prefers-reduced-motion: reduce) {
  .agent-trace-step { animation: none; opacity: 1; transform: none; }
  .agent-trace-dot  { animation: none; }
}

/* Loading-State während Pipeline läuft — gestaffelte Thinking-Dots
   in jeder Step-Zeile + rotierender Spinner im Header. Macht für den
   User sichtbar dass etwas passiert (vs. statisches "läuft" Text). */
.agent-trace--loading .agent-trace-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.agent-trace-spinner {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,0.15);
  border-top-color: var(--accent, #2ea878);
  animation: trace-spinner-rotate 0.8s linear infinite;
}
@keyframes trace-spinner-rotate {
  to { transform: rotate(360deg); }
}
.agent-trace--loading .agent-trace-meta-head {
  font-variant-numeric: tabular-nums;
  color: var(--ink, #1a1a1a);
}
.agent-trace-step--pending .agent-trace-dot {
  background: var(--ink-muted, #aaa);
  animation: trace-pending-pulse 1.4s ease-out infinite;
}
@keyframes trace-pending-pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.85); }
  50%      { opacity: 1;   transform: scale(1.15); }
}
.agent-trace-thinking {
  display: inline-flex;
  gap: 4px;
  align-items: baseline;
  vertical-align: middle;
}
.agent-trace-thinking .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink-muted, #888);
  animation: thinking-bounce 1.2s infinite ease-in-out both;
}
.agent-trace-thinking .dot:nth-child(2) { animation-delay: 0.18s; }
.agent-trace-thinking .dot:nth-child(3) { animation-delay: 0.36s; }
@keyframes thinking-bounce {
  0%, 80%, 100% { opacity: 0.25; transform: translateY(0) scale(0.85); }
  40%           { opacity: 1;    transform: translateY(-3px) scale(1); }
}
/* Demo-Button im running-State — pulsing accent statt static label */
#ap-demo-run.is-running {
  background: rgba(0,0,0,0.85);
  cursor: progress;
  animation: demo-btn-pulse 1.6s ease-out infinite;
}
@keyframes demo-btn-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(46, 168, 120, 0.4); }
  60%      { box-shadow: 0 0 0 10px rgba(46, 168, 120, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .agent-trace-spinner       { animation: none; }
  .agent-trace-step--pending .agent-trace-dot { animation: none; }
  .agent-trace-thinking .dot { animation: none; opacity: 0.6; }
  #ap-demo-run.is-running    { animation: none; }
}
@media (max-width: 600px) {
  .agent-trace-step {
    grid-template-columns: 12px 1fr;
    grid-template-rows: auto auto;
  }
  .agent-trace-label { grid-column: 2; }
  .agent-trace-value { grid-column: 2; }
  .agent-trace-meta  { grid-column: 2; }
}

/* Agent-CTA-Action-Card — kompakte Karte zwischen Antwort und
   Tile-Komponenten. Wird vom select_cta()-Backend-Selector gefüllt
   und passt sich an die Persona/Pain-Hypothese an. */
.agent-cta-card {
  margin: 0 0 var(--space-4);
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(135deg, var(--bg) 0%, var(--bg-alt) 100%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 60ch;
  position: relative;
}
.agent-cta-card::before {
  /* Linker Akzentstreifen — visueller Anker für die Empfehlung */
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  background: var(--ink);
  border-radius: 0 2px 2px 0;
}
.agent-cta-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
  margin: 0;
}
.agent-cta-title {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.25;
  margin: 0;
  color: var(--ink);
}
.agent-cta-desc {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}
.agent-cta-btn {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: 4px;
  padding: 8px 16px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.agent-cta-btn:hover {
  transform: translateX(2px);
  opacity: 0.9;
}

.agent-components {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Member-Sektion im Main-Chat (#agent-components) — spannt über alle
   Grid-Spalten, damit die dp-member-cards full-width gestapelt
   rendern statt als schmale Spalte neben den Content-Tiles zu
   sitzen. Optisch trennt das den "Ansprechpartner"-Block sauber
   von "Verwandten Inhalten" darunter. */
.agent-answer-members {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.agent-answer-members .dp-member-card {
  padding: 16px 20px;
  grid-template-columns: 56px 1fr auto;
  gap: 18px;
}
.agent-answer-members .dp-member-avatar {
  width: 56px; height: 56px;
  font-size: 16px;
}
.agent-answer-members .dp-member-name { font-size: 17px; }
.agent-answer-members .dp-member-role { font-size: 13px; }
.agent-answer-members .dp-member-bio  { font-size: 13px; }

.component-card {
  border: 1px solid var(--line);
  padding: var(--space-3);
  background: var(--bg);
  transition: border-color var(--t-fast);
}
.component-card:hover { border-color: var(--ink); }

.component-card .ctype {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 var(--space-1);
}
.component-card h4 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
}
.component-card p {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin: 0;
}

/* ---------- Sections ---------- */

.section {
  padding: 80px 0;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline-light);
}
/* All content sections share the same paper surface — visual rhythm
   comes from the inserted Bridge-Bands (full-bleed dark glanz panels)
   and the per-grid layout variety (landscape/portrait/insights/bites),
   not from a warm-cream alternate background. */
.section-alt { background: var(--paper); }

/* v2 tokens: section-title in Inter Tight 500 (was 600), tighter
   tracking, max-width that doesn't crop split-headlines. */
.section-title {
  font-family: var(--font-prose);
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: var(--ls-h2);
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 32px;
  max-width: 28ch;
}
/* When a lead paragraph follows the title, just remove the title's
   default 32px bottom margin so the lead sits right under it. The
   lead has its own bottom margin to the grid below. */
.section-title:has(+ .section-lead) {
  margin-bottom: 12px;
}
.section-title-muted {
  color: var(--muted-light);
  font-style: italic;
  font-weight: 400;
}

.section-lead {
  max-width: 62ch;
  font-family: var(--font-prose);
  font-size: var(--type-body-l);
  line-height: 1.55;
  color: var(--body-light);
  margin: 0 0 var(--space-6);
}
/* Mehr-Absatz-Lead (z.B. Services-Zusammenfassung in 2 Absätzen):
   engerer Abstand zwischen den Lead-Absätzen als zur Kachel-Reihe darunter. */
.section-lead:has(+ .section-lead) {
  margin-bottom: var(--space-3);
}

/* Section-head — when a cta_link is configured the eyebrow + title sit
   on the left and a right-aligned text link ("Alle Cluster ansehen →")
   floats on the right. Per design handoff. */
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 40px;
}
.section-head > div { min-width: 0; flex: 1 1 auto; }
.section-head .section-title { margin: 0; }
.section-head .eyebrow { margin: 0 0 12px; }
.section-link {
  flex-shrink: 0;
  font-family: var(--font-prose);
  font-size: var(--type-ui);
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  white-space: nowrap;
}
.section-link:hover { opacity: 0.7; }
@media (max-width: 720px) {
  .section-head { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* Cluster grid */
.cluster-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.cluster-card {
  border: 1px solid var(--line);
  padding: var(--space-6) var(--space-4);
  background: var(--bg);
  transition: border-color var(--t-med), background var(--t-med);
  display: flex;
  flex-direction: column;
  min-height: 280px;
}
.cluster-card:hover {
  border-color: var(--ink);
}
.cluster-card .label {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 var(--space-3);
}
.cluster-card h3 {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-2);
}
.cluster-card p {
  color: var(--ink-soft);
  flex: 1;
  margin: 0 0 var(--space-3);
}
.cluster-card .more {
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--ink);
  align-self: flex-start;
  padding-bottom: 2px;
  transition: color var(--t-fast);
}

/* Tile-stack — wraps the heavy (3D) block + flat tail in a vertical
   stack so the row of heavy spotlight cards never sits side-by-side
   with the smaller flat tiles. Each block keeps its own grid; the
   stack just enforces the row break and visual rhythm. */
.tile-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
/* Strict 2-col landscape OR 3-col portrait — no auto-fit, no mixed
   heights. Mobile collapses to 1 col landscape / 2 col portrait. */
.tile-grid {
  display: grid;
  gap: var(--space-4);
}
/* Mehrfach-Grids in der Mediathek (insight + landscape + portrait
   gestapelt) brauchen vertikale Trennung — sonst stehen Bilder der
   naechsten Reihe direkt am Footer der vorigen. Adjacent-sibling-
   Selektor: jedes weitere tile-grid bekommt 48 px Abstand nach oben. */
.mt-main .tile-grid + .tile-grid,
.mt-main .mt-grid-more-head + .tile-grid {
  margin-top: 24px;
}
.tile-grid--landscape {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tile-grid--portrait {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* Mediathek-Bibliothek: Portrait-Grid, 2 Kacheln pro Zeile in ORIGINALGRÖSSE
   (User-Direktive). Spalten auf ~340px gedeckelt (statt 1fr-Streckung), damit
   die Kacheln ihre normale Portrait-Proportion behalten; linksbündig. */
.tile-grid--portrait-2 {
  grid-template-columns: repeat(2, minmax(0, 340px));
  justify-content: start;
}
.tile-grid--wide {
  grid-template-columns: 1fr;
}
/* Insights — text-only (no image), 3 per row in landscape format.
   Same A4 quer ratio (1.414:1) as the standard landscape tile, but
   denser (3 cols) because insights don't need image space. */
.tile-grid--insights {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* (Vormalige tile-grid--insights-Overrides für portrait-text wurden in
   die unified Insight-Card-Variante migriert — siehe .tile-v2--insight--sm
   weiter unten. tile-grid--insights ist jetzt nur noch Grid-Layout.) */
/* Use-Case + Refstory + InfoBite max-tier — strict 50/50 split:
   cover takes the top half, body (eyebrow + title + tags) the bottom
   half. Same rule for all three image-led kinds so every max-tier
   tile reads identically. 50%/50% (not 1fr/1fr) because grid fr-tracks
   resolve against intrinsic child sizes when children carry their own
   aspect constraints (cover-img + cover aspect-ratio); 50% is
   unambiguous against the tile's container height. */
.tile.tile--max.tile--use_case,
.tile.tile--max.tile--refstory,
/* InfoBites + Use-Cases laufen jetzt über V2 (compact bzw. unified
   use_case) — V1 max-tier-Pfade dead-code. Refstories bleiben (vorerst)
   am V1 max-tier-Pfad bis zur eigenen Migration. */
.tile.tile--max.tile--refstory .tile-cover,
.tile.tile--max.tile--refstory .tile-flat-cover {
  width: 100%;
  height: 100% !important;
  aspect-ratio: auto !important;
  border-bottom: 1px solid var(--hairline-light);
  border-right: 0;
}
.tile.tile--max.tile--refstory .tile-card-body {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tile.tile--max.tile--refstory p.tile-summary {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  -webkit-line-clamp: unset;
  display: block;
}
.tile.tile--max.tile--refstory .tile-tags {
  margin-top: auto;
}
/* Mini-Bites — 4-col Grid-Layout für InfoBite-Strips. Die Tile-Form
   selber kommt aus V2 .tile-v2--compact (flex-row, Thumb links).
   tile-grid--bites ist hier nur die Grid-Layout-Klasse. */
.tile-grid--bites {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}
@media (max-width: 1024px) {
  .tile-grid--bites { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .tile-grid--bites { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Picks-band — 3 landscape tiles in a row, always with type + title +
   summary. Aspect override (16:9) keeps the band slim regardless of
   the image-led rules elsewhere; tiles render text-only on a dark
   surface so they don't need cover images. */
.tile-grid--picks {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* Alle Reihen gleich hoch — verhindert dass kürzere Karten in einer
     Reihe die Grid-Zelle nicht ausfüllen. */
  grid-auto-rows: 1fr;
}
/* Die <a> Wrapper-Tags um die Picks herum — display:block, sonst
   verhalten sie sich in Chrome inkonsistent als Inline-Elemente und
   die Grid-Cell-Breiten/-Höhen werden nicht uniform gefüllt. */
.tile-grid--picks > .mt-pick-link {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.tile-grid--picks > .mt-pick-link > .tile-v2 {
  flex: 1 1 auto;
  width: 100%;
}
.tile-grid--picks .tile.tile--max {
  aspect-ratio: 16 / 9;
}
.tile-grid--picks .tile.tile--max .tile-flat-cover {
  display: none;
}
/* User-Direktive: Portrait-Grids NUR noch 3-spaltig (keine 2-Spalten-
   Zwischenstufe mehr). Die frühere ≤1024px→2-Spalten-Regel liess die
   A4-Portrait-Karten bei breiten Zellen aufblähen (grosse Leerflächen).
   Jetzt: 3-spaltig bis 900px, darunter mobil 1-spaltig. */
/* Mobile (≤ 900px): EIN-spaltig für alle inhaltlich-schweren Tile-Grids.
   Nur tile-grid--bites bleibt mehrspaltig (klein + kompakt, das passt). */
@media (max-width: 900px) {
  .tile-grid--landscape { grid-template-columns: 1fr; }
  .tile-grid--portrait  { grid-template-columns: 1fr; }
  .tile-grid--portrait-2 { grid-template-columns: 1fr; }
  .tile-grid--wide      { grid-template-columns: 1fr; }
  .tile-grid--picks     { grid-template-columns: 1fr; }
  .tile-grid--insights  { grid-template-columns: 1fr; }
}
/* Legacy modifier — kept for any old call site that still references it */
.tile-grid--flat-tail {
  --tile-min: 220px;
}

/* Use case grid */
.usecase-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.usecase-card {
  border: 1px solid var(--line);
  background: var(--bg);
  padding: var(--space-4);
  transition: border-color var(--t-med);
}
.usecase-card:hover { border-color: var(--ink); }
.usecase-card .uc-cluster {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 var(--space-2);
}
.usecase-card h4 {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 var(--space-2);
  letter-spacing: -0.01em;
}
.usecase-card p {
  color: var(--ink-soft);
  font-size: 0.9375rem;
  margin: 0;
}

/* ============================================================
   PUBLIC TILES — refstory / insight / event / member / partner
   Single grammar: tile_min (compact), tile_max (card),
   shared by all 9 content kinds.
   ============================================================ */

.refstory-grid,
.insight-grid,
.event-grid,
.member-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* InfoBites: denser grid — they are short bites, so fit more per row */
.infobite-strip {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.infobite-tile {
  min-height: auto;
}
.infobite-tile h4 {
  font-size: 0.95rem;
}

/* ============================================================
   TILE SYSTEM
   Two tiers (--min, --max) × two visual styles (--flat, --3d).
   Same skeleton, different density. Every tile is a button so it's
   keyboard-focusable; click navigates to the Detail-View.
   ============================================================ */

/* v2: --r-card 21px is the brand "card" radius. Hairline borders use
   alpha so the same token works on light and dark surfaces. Hover is
   grayscale-only (lift + intensified shadow) — no color-shift, per
   design DNA rule #1. */
.tile {
  border: 1px solid var(--hairline-light);
  border-radius: var(--r-card);
  background: var(--bg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  width: 100%;
  position: relative;
  overflow: hidden;
  /* Resting-state shadow — stronger than the previous flat look so tiles
     read as floating cards on the page, not flat panels. Layered to
     give both crisp edge separation (1px) and gentle ambient depth
     (12-18px blur). Hover bumps both layers. */
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.05),
    0 6px 18px -4px rgba(0, 0, 0, 0.10);
  transition: transform var(--t-med), box-shadow var(--t-med);
}
/* SITE-WIDE GRID CONCEPT (strict):
     • max-tier tiles → A4 LANDSCAPE (297:210 ≈ 1.414:1) packed 2 per row
     • min-tier tiles → A4 PORTRAIT (210:297 ≈ 1:1.414) packed 3 per row
   No mixing, no auto-fit, no varying heights — every grid commits to
   one of the two patterns. */
.tile.tile--max {
  aspect-ratio: 297 / 210;
  padding: 0;
}
.tile.tile--max .tile-card-body {
  padding: var(--space-4);
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.tile.tile--min {
  aspect-ratio: 210 / 297;
}
/* Wide-Banner — full container width, 50/50 split: cover image on the
   LEFT half (full height), text content on the RIGHT half. A 16:9
   container gives a cinematic banner shape; on the right column we
   bump typography (title + summary) so the wide tile reads as a
   lead-statement, not a stretched card. */
.tile.tile--max.tile--wide {
  aspect-ratio: 16 / 9;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  overflow: hidden;
}
.tile.tile--max.tile--wide .tile-cover {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-bottom: 0;
  border-right: 1px solid var(--hairline-light);
}
.tile.tile--max.tile--wide .tile-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tile.tile--max.tile--wide .tile-card-body {
  padding: clamp(28px, 3.5vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
}
.tile.tile--max.tile--wide .tile-eyebrow {
  font-size: 12px;
  letter-spacing: 0.18em;
  margin: 0;
}
.tile.tile--max.tile--wide .tile-title {
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
  max-width: 22ch;
}
.tile.tile--max.tile--wide p.tile-summary {
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.55;
  -webkit-line-clamp: 6;
  margin: 0;
  max-width: 48ch;
  flex: 0 0 auto;
}
/* Wide-Insight (Methodology-Spotlight): 2 Text-Spalten innerhalb der
   Summary, weil der Tile breit genug ist. So passt mehr Substanz rein
   bevor das Binary-Search-Fitting den Ellipsis-Cut setzt. */
.tile.tile--max.tile--insight.tile--wide p.tile-summary {
  column-count: 2;
  column-gap: 32px;
  column-rule: 0;
  max-width: none;
  -webkit-line-clamp: unset;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  display: block;
}
.tile.tile--max.tile--wide .tile-tags {
  margin-top: auto;
  padding-top: 8px;
}
/* No-image variant — body fills entire width with extra emphasis on
   the title so the banner still feels like a statement card. */
.tile.tile--max.tile--wide:not(.tile--with-img) {
  grid-template-columns: 1fr;
}
.tile.tile--max.tile--wide:not(.tile--with-img) .tile-card-body {
  max-width: 1080px;
}
@media (max-width: 880px) {
  .tile.tile--max.tile--wide {
    aspect-ratio: auto;
    grid-template-columns: 1fr;
  }
  .tile.tile--max.tile--wide .tile-cover {
    aspect-ratio: 21 / 9;
    border-right: 0;
    border-bottom: 1px solid var(--hairline-light);
  }
  .tile.tile--max.tile--wide .tile-card-body {
    padding: 22px 24px 24px;
    gap: 12px;
  }
  .tile.tile--max.tile--wide .tile-title {
    font-size: clamp(1.5rem, 5vw, 2rem);
  }
}
.tile:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 2px 4px rgba(0, 0, 0, 0.06),
    0 14px 32px -8px rgba(0, 0, 0, 0.16);
}
.tile:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* tile-eyebrow → mono uppercase (matches the global .meta-label voice).
   Sits above the title; small, wide-tracked, muted. */
.tile .tile-eyebrow {
  font-family: var(--font-meta);
  font-size: var(--type-mono-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--muted-light);
  margin: 0 0 var(--space-2);
}
/* tile-title → Inter Tight 500 (was 600), tighter tracking. The
   weight drop is intentional: the design DNA leans on color contrast
   and tracking, not heavy weights, to carry hierarchy. */
.tile .tile-title {
  font-size: 1.0625rem;        /* 17px — sits between Body L and H4 */
  font-weight: 500;
  margin: 0 0 var(--space-2);
  letter-spacing: var(--ls-tight);
  line-height: 1.25;
}
.tile p.tile-summary,
.tile p.tile-oneliner {
  color: var(--body-light);
  font-size: 0.9375rem;
  line-height: 1.5;
  margin: 0 0 var(--space-3);
  flex: 0 0 auto;
  /* Visual safety net — the deterministic truncate in renderTile keeps
     the text length consistent, but if a future caller bypasses it the
     line-clamp prevents tile-overflow on the A4 portrait shape.
     max-height-Fallback für Chrome-Quirks bei -webkit-box in flex. */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: calc(5 * 1.5em);
}
/* (Vormalige .tile.tile--max.tile--insight-Override entfernt —
   Insights laufen jetzt ausschliesslich über die unified V2 Insight-
   Card. V1-Pfad für Insights nicht mehr erreichbar.) */
/* Tags + meta pinned to the bottom of the card body so the empty
   space lives between the summary and the tags, not below them. */
/* Tags pinned bottom-left across BOTH tiers (max + min) and ALL
   layouts (landscape, portrait, banner). !important required to
   beat the legacy `.tile.tile--flat .tile-tags { margin-top: 8px }`
   rule which is later in source order and would otherwise win. */
.tile.tile--max .tile-tags,
.tile.tile--min .tile-tags,
.tile.tile--max.tile--flat .tile-tags,
.tile.tile--min.tile--flat .tile-tags {
  margin-top: auto !important;
  align-self: flex-start;
  justify-self: start;
}
.tile.tile--max .tile-meta {
  margin-top: 8px;
}
/* Min-tier tags — slightly tighter padding so the pill row doesn't
   crowd the small-tile body. */
.tile.tile--min .tile-tags {
  padding-top: 6px;
  gap: 4px;
}
.tile.tile--min .tile-tag {
  font-size: 10px;
  padding: 2px 8px;
}
.tile p.tile-oneliner {
  font-size: 0.875rem;
  margin-bottom: 0;
}
.tile .tile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-family: var(--font-meta);
  font-size: var(--type-mono-label);
  letter-spacing: var(--ls-mono-soft);
  color: var(--muted-light);
  margin-top: auto;
}
.tile .tile-meta span + span::before {
  content: "·";
  margin-right: 12px;
  margin-left: -10px;
  color: var(--muted-light);
}
.tile .tile-tags {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin-top: var(--space-2);
  /* Single-line tag row — overflowing tags are clipped, not wrapped.
     Combined with the JS-side measurement (renderTile's post-mount
     hook) we hide rather than half-show clipped pills. */
  overflow: hidden;
  max-width: 100%;
}
.tile .tile-tag {
  flex: 0 0 auto;       /* keep natural width — never shrink the pill */
  white-space: nowrap;
}

/* Stack-Pille — Plattform-Tiefe statt Refstory als Trust-Anker.
   Auf Use-Case-Tiles wo `stack:` gepflegt ist.
   NAMING-FIX 2026-05: vorher hieß diese Klasse `.tile-stack` —
   gleicher Name wie der Spotlight-Container (Z. 4747). Die Pille
   überschrieb dort font-family auf JetBrains Mono und vererbte sich
   an den Tile-Body, sodass die gesamte Spotlight-Section monospace
   wurde. Jetzt sauber als `.tile-stack-pill` benannt. */
.tile-stack-pill {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 8px 0 6px;
  font-family: var(--font-meta);
  font-size: var(--type-mono-label, 0.72rem);
  letter-spacing: 0.04em;
}
.tile-stack-label {
  text-transform: uppercase;
  color: var(--body-light, #777);
  font-weight: 600;
  flex: 0 0 auto;
}
.tile-stack-items {
  color: var(--ink);
  flex: 1 1 auto;
  line-height: 1.4;
}
.tile[data-surface="dark"] .tile-stack-label,
.hero--dark .tile-stack-label {
  color: var(--body-dark);
}
.tile[data-surface="dark"] .tile-stack-items,
.hero--dark .tile-stack-items {
  color: var(--paper);
}

/* Detail-Page Stack-Block — sichtbarer Trust-Anker im Article-Header */
.dp-stack-block {
  margin: 0 0 var(--space-5, 28px);
  padding: 16px 18px;
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--ink);
  border-radius: 10px;
  background: var(--paper-soft, #fafafa);
}
.dp-stack-label {
  margin: 0 0 8px;
  font-family: var(--font-meta);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-muted, #555);
}
.dp-stack-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.dp-stack-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  background: var(--paper, #fff);
  color: var(--ink);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.dp-stack-foot {
  margin: 8px 0 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ink-muted, #555);
}
.dp-stack-foot a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Engagement-Modell — "So läuft das ab" auf CTA-Detail-Pages */
.dp-engagement {
  margin: var(--space-6, 32px) 0 0;
  padding: var(--space-5, 24px) var(--space-5, 24px);
  border: 1px solid var(--ink);
  border-radius: 14px;
  background: var(--paper-soft, #fafafa);
}
.dp-engagement-head {
  margin: 0 0 var(--space-5, 24px);
}
.dp-engagement-eyebrow {
  margin: 0 0 4px;
  font-family: var(--font-meta);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-muted, #555);
}
.dp-engagement-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
}
.dp-engagement-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin: 0 0 var(--space-5, 24px);
  padding: 14px 16px;
  background: var(--paper, #fff);
  border-radius: 10px;
}
.dp-engagement-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dp-engagement-label {
  font-family: var(--font-meta);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--ink-muted, #555);
}
.dp-engagement-value {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.4;
}
.dp-engagement-list {
  margin: 0 0 var(--space-4, 20px);
}
.dp-engagement-subtitle {
  margin: 0 0 10px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
}
.dp-engagement-list ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.dp-engagement-list li {
  /* Erbt automatisch das ▸-Bullet aus .dp-article li::before — keine
     eigene Liste-Style nötig. */
  margin: 0 0 6px;
  font-size: 0.95rem;
  line-height: 1.55;
}
.dp-engagement-followup {
  margin: var(--space-4, 20px) 0 0;
  padding: 12px 14px;
  background: var(--paper, #fff);
  border-left: 3px solid var(--ink);
  border-radius: 6px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink);
}
/* Tag pill — mono 11px, hairline-bordered, click-to-filter Mediathek.
   Active hover inverts to ink/paper for clear feedback. */
.tile-tag {
  font-family: var(--font-meta);
  font-size: var(--type-mono-label);
  font-weight: 500;
  letter-spacing: var(--ls-mono-tight);
  border: 1px solid var(--hairline-light);
  padding: 3px 10px;
  color: var(--body-light);
  border-radius: var(--r-pill);
  cursor: pointer;
  user-select: none;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease, transform 80ms ease;
}
.tile-tag:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.tile-tag:active { transform: translateY(1px); }
.tile-tag:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
/* Dark variant — readable on hero--dark / section--dark / data-surface=dark */
.hero--dark .tile-tag,
.section--dark .tile-tag,
.tile[data-surface="dark"] .tile-tag {
  border-color: var(--hairline-dark);
  color: var(--body-dark);
  background: rgba(255, 255, 255, 0.04);
}
.hero--dark .tile-tag:hover,
.section--dark .tile-tag:hover,
.tile[data-surface="dark"] .tile-tag:hover {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

/* ============================================================
   Dark-surface tile variant — opt-in via data-surface="dark".
   Used in agent-picks strips, related-content sections, and any
   tile rendered inside a .gloss-panel or section--dark wrapper.
   Composes the v2 dark surface (rgba white-04 + hairline-dark) with
   the same baseline shape as a light tile.
   ============================================================ */
.tile[data-surface="dark"],
.tile.tile--min[data-surface="dark"],
.tile.tile--max[data-surface="dark"],
.tile.tile--flat[data-surface="dark"],
.tile.tile--3d[data-surface="dark"] {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--hairline-dark);
  color: var(--paper);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.tile[data-surface="dark"]:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 8px 24px rgba(0,0,0,0.3);
}
.tile[data-surface="dark"] .tile-eyebrow,
.tile[data-surface="dark"] .tile-meta,
.tile[data-surface="dark"] .tile-meta span + span::before {
  color: var(--muted-dark);
}
.tile[data-surface="dark"] .tile-title {
  color: var(--paper);
}
.tile[data-surface="dark"] p.tile-summary,
.tile[data-surface="dark"] p.tile-oneliner,
.tile.tile--flat[data-surface="dark"] p.tile-summary,
.tile.tile--flat[data-surface="dark"] p.tile-oneliner,
.tile.tile--3d[data-surface="dark"] p.tile-summary,
.tile.tile--3d[data-surface="dark"] p.tile-oneliner {
  color: var(--body-dark);
}

/* --- TIER: tile--min (compact) ---
   v2: dense single-row cell. Smaller radius (mini cards use --r-mini
   not --r-card) so the visual rhythm distinguishes them from the
   workhorse cards. The combined selector below pins --r-mini even
   when --min is mixed with the --flat / --3d style modifiers, which
   otherwise come later in source order and would steal the radius. */
.tile.tile--min,
.tile.tile--min.tile--flat,
.tile.tile--min.tile--3d {
  padding: 10px 14px;
  border-radius: var(--r-mini);
  min-height: 0;
}
.tile.tile--min .tile-eyebrow {
  font-size: var(--type-mono-tiny);
  letter-spacing: var(--ls-mono);
  margin-bottom: 4px;
}
.tile.tile--min .tile-title {
  font-size: 0.875rem;       /* 14px — denser than the L workhorse */
  margin-bottom: 2px;
  line-height: 1.3;
}
.tile.tile--min p.tile-oneliner {
  font-size: 0.8125rem;
  line-height: 1.45;
  margin: 0;
}

/* --- STYLE: tile--3d → classic card (default tile look) ---
   v2: shape comes from the .tile baseline (--r-card, hairline-light).
   Hover keeps grayscale: lift + intensified shadow, no border-color
   shift. */
.tile.tile--3d {
  border-color: var(--hairline-light);
}
.tile.tile--3d:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 8px 22px -8px rgba(0,0,0,0.12);
}

/* --- STYLE: tile--flat → compact card with abbreviation cover band.
   The flat tile is the "filigree tail" sibling of tile--3d: smaller
   visual weight, but with the same grammar (cover band on top + body
   below) so the page reads as a single rhythm. The cover shows the
   item's title abbreviated (computed in JS — known acronyms first,
   then first significant word, then cluster code). */
.tile.tile--flat {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  border: 1px solid var(--hairline-light);
  border-radius: var(--r-card);
  background: var(--bg);
  padding: 0;
  overflow: hidden;
  text-align: left;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.tile.tile--flat:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 8px 22px -8px rgba(0,0,0,0.12);
}

/* Cover band — shows the cover image (when available) with the title
   abbreviation overlaid top-left in the upper third. When no image is
   available a solid dark band stands in (same visual grammar). */
.tile.tile--flat .tile-flat-cover {
  position: relative;
  display: block;
  height: 140px;
  overflow: hidden;
  background: var(--ink);
  color: #fff;
}
.tile.tile--flat .tile-flat-cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Slow zoom on hover for a discreet "alive" feel — same gesture as 3D. */
  transition: transform var(--t-med) ease-out;
}
.tile.tile--flat:hover .tile-flat-cover-img {
  transform: scale(1.04);
}
/* Gradient overlay — darker at top so the abbreviation reads cleanly,
   fades down so the lower 2/3 of the image stays visible. */
.tile.tile--flat .tile-flat-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
                              rgba(0, 0, 0, 0.55) 0%,
                              rgba(0, 0, 0, 0.30) 35%,
                              rgba(0, 0, 0, 0.05) 65%,
                              rgba(0, 0, 0, 0.00) 100%);
  pointer-events: none;
}
/* Abbreviation — positioned top-left in the upper third. Text-shadow
   keeps it legible on bright/varied imagery without needing a heavy
   block background. */
.tile.tile--flat .tile-flat-abbrev {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 1;
  margin: 0;
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  white-space: nowrap;
  pointer-events: none;
}
/* No-image variant — keep the dark band, abbreviation in the same spot
   so the layout reads identical whether or not an image exists. */
.tile.tile--flat .tile-flat-cover--no-img::after {
  background: none;
}

/* Body — slightly larger type than before so the flat card reads
   as a real reading element, not a footnote. */
.tile.tile--flat .tile-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-3) var(--space-3) var(--space-3);
  /* Fill the remaining card height so tags/meta can sit at the bottom
     of the A4-portrait frame instead of clustering near the top. */
  flex: 1 1 auto;
}
.tile.tile--flat .tile-eyebrow {
  display: inline-block;
  margin: 0 0 2px;
}
.tile.tile--flat .tile-title {
  font-size: 1.125rem;   /* 18px */
  font-weight: 500;
  margin: 0;
  letter-spacing: var(--ls-tight);
  line-height: 1.25;
}
.tile.tile--flat p.tile-summary,
.tile.tile--flat p.tile-oneliner {
  font-size: 0.95rem;
  margin: 0;
  flex: 0 1 auto;
  line-height: 1.55;
  color: var(--body-light);
}
.tile.tile--flat .tile-tags { margin-top: 8px; }
.tile.tile--flat .tile-tag { padding: 2px 9px; }
.tile.tile--flat .tile-meta { margin-top: 6px; }
/* When tier is min AND style is flat, collapse to a single inline-ish line */
.tile.tile--flat.tile--min .tile-title { font-size: 0.95rem; }
.tile.tile--flat.tile--min p.tile-oneliner { font-size: 0.825rem; }

/* --- Per-kind nuances --- */
.tile.tile--member {
  align-items: flex-start;
}
/* Partner mini-tile — small horizontal logo pill. Forces overrides on
   the recent generic .tile--min portrait rule (banner-thumb on top).
   Specificity bumped (4 classes) so the partner pill wins over the
   min-tier portrait card layout. */
.tile.tile--partner.tile--min,
.tile.tile--partner.tile--min.tile--flat,
.tile.tile--partner.tile--min.tile--with-img {
  flex-direction: row !important;
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 8px 14px !important;
  border-radius: var(--radius-pill) !important;
  aspect-ratio: auto !important;
  width: auto;
  min-width: 0;
  height: auto;
}
.tile.tile--partner.tile--min .tile-thumb {
  width: 28px !important;
  height: 28px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  flex-shrink: 0;
  border: 1px solid var(--hairline-light);
  background: var(--paper);
}
.tile.tile--partner.tile--min .tile-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.tile.tile--partner.tile--min .tile-min-body {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px;
  flex: 0 1 auto;
  padding: 0 !important;
  min-width: 0;
}
.tile.tile--partner.tile--min .tile-eyebrow { display: none; }
.tile.tile--partner.tile--min .tile-title {
  font-size: 0.875rem;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tile.tile--partner.tile--min .tile-oneliner {
  font-family: var(--font-meta);
  font-size: 10px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--muted-light);
  margin: 0;
  white-space: nowrap;
}

/* Partner strip — flow-row, not grid. Logos wrap freely. */
.partner-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: stretch;
}
/* Partner-Kacheln: gleiche Höhe statt variabler A4-Höhe. Ohne Logo/Body
   richtet sich die Höhe nach dem Inhalt (kompakt) — Aspect + min-height
   (sonst 380px erzwungen) neutralisieren; der Grid-Stretch gleicht die
   Karten je Reihe auf identische Höhe an. */
.partner-strip > .tile-v2--partner {
  aspect-ratio: auto;
  min-height: 0;
}

/* Empty hint */
.empty-hint {
  color: var(--ink-muted);
  font-size: 0.9375rem;
  font-style: italic;
  margin: 0;
}

/* ============================================================
   TAG FILTER — orthogonal filter over public sections
   ============================================================ */
.tag-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 8px;
  margin-top: var(--space-3);
}
.tag-chip {
  border: 1px solid var(--line);
  background: var(--bg);
  padding: 6px 12px;
  font-size: 0.825rem;
  color: var(--ink-soft);
  cursor: pointer;
  border-radius: 999px;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.tag-chip:hover { border-color: var(--ink); color: var(--ink); }
.tag-chip.active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.tag-chip-count {
  font-size: 0.72rem;
  margin-left: 6px;
  opacity: 0.7;
}

/* ============================================================
   DETAIL PAGE — reveals body_md and cross-references as a real
   page (was a modal, now sits inside #layout-root).
   ============================================================ */

/* Detail-page container uses the global max-width so the body content
   aligns with the header (logo on the left, primary nav on the right).
   The article prose itself is narrowed inside .detail-body for readability. */
.detail-page .container {
  max-width: var(--max-width);
}
.detail-body {
  max-width: 760px;
}
/* Hero / breadcrumb / meta still span the full container width so they
   anchor to the same edges as the header. */
.detail-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: var(--ink-muted);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
}
.detail-back-link {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.78rem;
  color: var(--ink-soft);
  padding: 4px 0;
  cursor: pointer;
  letter-spacing: 0.04em;
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast), border-bottom-color var(--t-fast);
}
.detail-back-link:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.detail-bc-sep { color: var(--ink-muted); opacity: 0.55; }
.detail-bc-kind {
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.7rem;
}
.detail-bc-title {
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50%;
}

.detail-article {
  padding-top: var(--space-2);
}
.detail-h1 {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0 0 var(--space-3);
  overflow-wrap: anywhere;
}
.detail-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 var(--space-2);
}
.detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 0.825rem;
  color: var(--ink-muted);
  margin: 6px 0 var(--space-3);
}
.detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 var(--space-4);
}
.detail-body {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
}
.detail-body h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: var(--space-4) 0 var(--space-2);
  letter-spacing: -0.01em;
}
.detail-body h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: var(--space-3) 0 var(--space-2);
  letter-spacing: -0.005em;
  color: var(--ink);
}
.detail-body p { margin: 0 0 var(--space-3); }
.detail-body ul, .detail-body ol {
  margin: 0 0 var(--space-3) 1.4em;
  padding: 0;
}
.detail-body ul li,
.detail-body ol li { margin: 0 0 0.4em; line-height: 1.55; }

.detail-body strong { font-weight: 600; color: var(--ink); }
.detail-body em { font-style: italic; }
.detail-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85em;
  background: var(--bg-alt);
  padding: 0.1em 0.4em;
  border-radius: 9px;
  border: 1px solid var(--line);
}

/* Fenced code block — preserves whitespace, no inline pill styling */
.detail-body .md-pre {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: var(--space-2) var(--space-3);
  margin: var(--space-3) 0;
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.55;
}
.detail-body .md-pre code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
  white-space: pre;
  display: block;
  color: var(--ink);
}
.detail-body a {
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 1px;
}
.detail-body a:hover { color: var(--ink-soft); border-bottom-color: var(--ink-soft); }

.detail-body blockquote {
  border-left: 2px solid var(--line);
  padding: 0.4em 0 0.4em 1em;
  margin: var(--space-3) 0;
  color: var(--ink-soft);
}
.detail-body blockquote p { margin: 0 0 0.5em; }
.detail-body blockquote p:last-child { margin: 0; }

/* GFM-style tables */
.detail-body .md-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-3) 0;
  font-size: 0.92rem;
}
.detail-body .md-table th,
.detail-body .md-table td {
  border-bottom: 1px solid var(--line);
  padding: 0.55em 0.75em;
  text-align: left;
  vertical-align: top;
}
.detail-body .md-table th {
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--ink);
}
.detail-body .md-table tr:last-child td { border-bottom: 0; }

/* Images / figures */
.detail-body .md-figure {
  margin: var(--space-3) 0;
  max-width: 320px;
}
.detail-body .md-figure img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--line);
}
.detail-body .md-figure figcaption {
  font-size: 0.78rem;
  color: var(--ink-muted);
  margin-top: 0.5em;
  font-style: italic;
}
.detail-quote {
  border-left: 2px solid var(--ink);
  padding: 6px 0 6px var(--space-3);
  margin: var(--space-4) 0;
  color: var(--ink-soft);
  font-style: italic;
}
.detail-quote footer {
  margin-top: 6px;
  font-size: 0.825rem;
  color: var(--ink-muted);
  font-style: normal;
}
.detail-quote footer span + span::before {
  content: " · ";
  color: var(--ink-muted);
}

/* External-link button row (e.g. for partners — link moves out of the tile
   into the detail-modal so navigation to the detail view stays uniform). */
.detail-actions {
  display: flex;
  gap: var(--space-2);
  margin: var(--space-3) 0;
  flex-wrap: wrap;
}
/* "Externe Seite öffnen"-Button: in diesem Kontext ist --bg dunkel, wodurch
   .btn (color:var(--bg)) schwarz-auf-schwarz und damit unsichtbar wurde.
   Farben hier explizit — schwarzer Pill mit hellem Text, Hover invertiert. */
.detail-actions .btn {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.detail-actions .btn:hover {
  background: #fff;
  color: var(--ink);
  border-color: var(--ink);
}

/* Cross-link block at the bottom of details (and as standalone in workspace) */
.detail-relations {
  margin-top: var(--space-5);
  border-top: 1px solid var(--line);
  padding-top: var(--space-3);
}
.relations-title {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 var(--space-2);
  font-weight: 600;
}
.relations-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
/* When the relations grid contains tile_min cards (public detail-modal),
   they share the .tile box-model already — just make sure they don't grow
   beyond the cell. */
.relations-grid .tile { padding: 10px 12px; }
.relation-card {
  border: 1px solid var(--line);
  padding: 10px 12px;
  background: var(--bg);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color var(--t-fast);
}
.relation-card:hover { border-color: var(--ink); }
.relation-card .rc-kind {
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: block;
  margin-bottom: 2px;
}
.relation-card .rc-title {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink);
}
.relation-missing {
  border-style: dashed;
  color: var(--ink-muted);
}
.relation-missing .rc-title { color: var(--ink-muted); font-style: italic; }
.relations-preview { margin-top: var(--space-2); }

/* --- Agent-getriebene Vorschläge (Suggestions) --- */
.relations-suggestions {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--line);
}
.relations-source-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  background: rgba(120, 80, 200, 0.10);
  color: #6b3fbf;
  border-radius: 999px;
  font-size: 0.7rem;
  letter-spacing: 0.03em;
}
.relations-suggest-grid {
  margin-top: 8px;
}
.relation-suggest {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  cursor: default;
}
.relation-suggest .rc-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.relation-suggest .rc-sim {
  font-family: var(--font-meta);
  font-size: 0.7rem;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.relation-suggest .rc-id {
  font-family: var(--font-meta);
  font-size: 0.7rem;
  color: var(--ink-muted);
  word-break: break-all;
}
.btn-suggest-add {
  margin-top: 6px;
  align-self: flex-start;
  padding: 4px 10px;
  font-size: 0.78rem;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.btn-suggest-add:hover {
  background: var(--ink);
  color: var(--paper);
}
.btn-suggest-add:disabled {
  cursor: default;
  opacity: 0.6;
}

/* Workspace toolbar tag filter */
.cw-tag-filter { margin-left: auto; }
.cw-tag-filter select {
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  padding: 6px 10px;
  font: inherit;
  font-size: 0.825rem;
}
.cw-tag-filter select:focus {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

/* Workspace Volltextsuche — sucht kind-übergreifend durch alle Inhalts-
   Komponenten. Liegt links in der Toolbar; Status-/View-/Tag-Filter
   bleiben orthogonal und arbeiten zusammen mit dem Suchergebnis. */
.cw-search {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  flex: 0 1 280px;
  min-width: 220px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  padding: 4px 8px 4px 10px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.cw-search:focus-within {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ink) 12%, transparent);
}
.cw-search-icon {
  font-size: 0.85rem;
  opacity: 0.55;
  user-select: none;
  pointer-events: none;
}
.cw-search-input {
  flex: 1 1 auto;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.85rem;
  padding: 4px 0;
  min-width: 0;
}
.cw-search-input::placeholder {
  color: var(--ink-muted);
  opacity: 0.75;
}
.cw-search-input:focus { outline: 0; }
.cw-search-input::-webkit-search-cancel-button { display: none; }
.cw-search-clear {
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  font-size: 1.05rem;
  line-height: 1;
  padding: 2px 6px;
  cursor: pointer;
  border-radius: 4px;
}
.cw-search-clear:hover {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink);
}
.cw-search-count {
  font-size: 0.72rem;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
  white-space: nowrap;
  padding-left: 4px;
  border-left: 1px solid var(--line);
  margin-left: 2px;
}

/* Demo */
.demo-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 760px;
  margin-bottom: var(--space-4);
}
.demo-form textarea {
  border: 1px solid var(--ink);
  background: var(--bg);
  padding: 1rem 1.25rem;
  font: inherit;
  color: var(--ink);
  resize: vertical;
  outline: 0;
  transition: box-shadow var(--t-med);
}
.demo-form textarea:focus {
  box-shadow: 0 0 0 3px rgba(10,10,10,0.08);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ink);
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--bg);
  /* Schlanker Default — analog zum Cookie-Banner-Button (~32px hoch).
     War vorher 0.875rem / 1.75rem (14/28px) + line-height inherit
     (1.6) — jetzt 8/18px + lh 1.25 für kompakten Pill-Look überall. */
  padding: 0.5rem 1.125rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.02em;
  cursor: pointer;
  align-self: flex-start;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast);
}
.btn:hover {
  background: var(--bg);
  color: var(--ink);
}
/* .btn-large bleibt für Stellen wo bewusst mehr Präsenz nötig ist
   (Hero-Submit, primäre CTA-Cards). Etwas weniger fett als zuvor. */
.btn-large {
  padding: 0.75rem 1.5rem;
  font-size: 0.95rem;
  align-self: flex-start;
}

.demo-result {
  border-top: 1px solid var(--line);
  padding-top: var(--space-4);
  max-width: 760px;
  animation: fadeIn 220ms ease;
}
.demo-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--space-3);
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--line);
}
.demo-row:last-child { border-bottom: 0; }
.demo-row-block {
  grid-template-columns: 1fr;
  padding-top: var(--space-3);
}
.demo-key {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.demo-val {
  color: var(--ink);
  font-weight: 500;
}
.demo-row-block .demo-val {
  font-weight: 400;
  color: var(--ink-soft);
  margin-top: 0.5rem;
}

/* FAQ — v2 design alignment: hairline rules, Inter Tight headlines,
   --body-light for answers, JetBrains Mono optional for inline meta. */
.faq-list { display: grid; gap: 0; max-width: 880px; }
.faq-item {
  border-top: 1px solid var(--hairline-light);
  padding: var(--space-5) 0;
}
.faq-item:last-child { border-bottom: 1px solid var(--hairline-light); }
.faq-q {
  font-family: var(--font-prose);
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 var(--space-2);
  letter-spacing: -0.01em;
  color: var(--ink-deep);
  line-height: 1.35;
}
.faq-a {
  font-family: var(--font-prose);
  color: var(--body-light);
  margin: 0;
  max-width: 72ch;
  line-height: 1.6;
  font-size: 0.9375rem;
}
/* Dark variant — when FAQ lives inside a section--dark wrapper */
.section--dark .faq-item {
  border-top-color: var(--hairline-dark);
}
.section--dark .faq-item:last-child { border-bottom-color: var(--hairline-dark); }
.section--dark .faq-q { color: var(--paper); }
.section--dark .faq-a { color: var(--muted-dark); }

/* Footer (v2 — dark deep surface per design handoff) */
.site-footer {
  background: var(--ink-deep);
  border-top: 1px solid var(--hairline-dark);
  padding: 64px 0 32px;
  font-family: var(--font-prose);
  font-size: 14px;
  color: var(--muted-dark);
}
.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-6);
  align-items: start;
  margin-bottom: 40px;
}
.footer-col-title {
  margin: 0 0 14px;
  font-family: var(--font-meta);
  font-size: var(--type-mono-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--paper);
}

/* Column 1 — brand + address */
.footer-eyebrow {
  margin: 0 0 12px;
  font-family: var(--font-meta);
  font-size: var(--type-mono-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--muted-dark);
}
.footer-claim {
  margin: 0 0 var(--space-4);
  font-family: var(--font-prose);
  font-size: 15px;
  line-height: 1.55;
  color: var(--body-dark);
  max-width: 42ch;
}
.footer-address {
  font-style: normal;
}
.footer-line {
  margin: 0 0 4px;
  font-family: var(--font-prose);
  font-size: 14px;
  color: var(--body-dark);
  line-height: 1.55;
}
.footer-line strong {
  color: var(--paper);
  font-weight: 500;
}
.footer-line a {
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast);
}
.footer-line a:hover { border-bottom-color: var(--paper); }

/* Column 2/3 — nav + partners */
.footer-nav-list,
.footer-partner-list,
.footer-legal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-nav-list a,
.footer-partner-list a {
  color: var(--muted-dark);
  text-decoration: none;
  font-family: var(--font-prose);
  font-size: 14px;
  padding: 2px 0;
  transition: color var(--t-fast);
}
.footer-nav-list a:hover,
.footer-partner-list a:hover { color: var(--paper); }

/* Bottom row — copyright + legal in one line */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--hairline-dark);
  font-family: var(--font-meta);
  font-size: var(--type-mono-tiny);
  letter-spacing: var(--ls-mono-soft);
  color: var(--muted-dark);
}
.footer-copyright { margin: 0; text-transform: uppercase; }
.footer-legal { flex-direction: row; gap: var(--space-3); }
.footer-legal a {
  color: var(--muted-dark);
  text-decoration: none;
  text-transform: uppercase;
  transition: color var(--t-fast);
}
.footer-legal a:hover { color: var(--paper); }

/* reCAPTCHA: Standard-Badge (fixed unten rechts) ausblenden — laut
   Google-FAQ erlaubt, solange die Attribution sichtbar im Nutzerfluss
   steht. Die steht in .footer-recaptcha (index.html, Footer). */
.grecaptcha-badge { visibility: hidden !important; }
.footer-recaptcha {
  margin-top: 14px;
  font-family: var(--font-meta);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--muted-dark);
}
.footer-recaptcha a {
  color: var(--muted-dark);
  text-decoration: underline;
  transition: color var(--t-fast);
}
.footer-recaptcha a:hover { color: var(--paper); }

/* Cookie-Hinweis-Banner — fixed bottom, dezent, dismissable.
   Sichtbar bis User auf "Verstanden" klickt; localStorage merkt sich
   das für 1 Jahr. Kein modaler Block, keine Scroll-Sperre. */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  background: rgba(15, 15, 16, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--paper, #fff);
  font-size: 0.85rem;
  line-height: 1.5;
}
.cookie-banner-inner {
  max-width: var(--max-content, 1280px);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: space-between;
}
.cookie-banner-text {
  margin: 0;
  flex: 1 1 auto;
  color: rgba(255, 255, 255, 0.82);
}
.cookie-banner-text a {
  color: var(--paper, #fff);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-banner-btn {
  flex: 0 0 auto;
  padding: 8px 18px;
  background: var(--paper, #fff);
  color: #0f0f10;
  border: 0;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.cookie-banner-btn:hover { background: #eee; }
@media (max-width: 720px) {
  .cookie-banner-inner {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    gap: 10px;
    padding: 12px 18px;
  }
  .cookie-banner-btn { align-self: flex-end; }
}

/* Mobile — stack columns vertically */
@media (max-width: 720px) {
  .footer-inner {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
}

@media (max-width: 720px) {
  /* Mobile agent-prompt — die globalen Regeln (flex-wrap + gap +
     transparenter Container) gelten weiter. Wenn der Submit nicht
     mehr neben das Input passt, wrappt er automatisch auf eine
     neue Zeile. Auf Mobile blenden wir nur die Mic/TTS-Labels aus
     und vergrößern das Input auf 16px Font-Size (verhindert iOS-
     Auto-Zoom beim Focus). */
  .agent-prompt input,
  .agent-prompt input[type="text"] {
    font-size: 16px;
  }
  .agent-prompt .agent-mic-text { display: none; }
}

@media (max-width: 540px) {
  :root { --space-10: 4rem; --space-8: 3.5rem; }
  .demo-row { grid-template-columns: 1fr; }
  .demo-row .demo-val { margin-top: 0.25rem; }
  /* Tighter — hide button labels, keep icons only */
  .agent-prompt .agent-mic .agent-mic-text { display: none; }
  .agent-prompt #agent-submit .arrow { display: inline-block; margin-left: 4px; }
}

/* ---------- Auth area in header ----------
   Visual hierarchy:
     [ identity (name + role) ]  │  [ primary: Inhalte | Admin ]  [ small kebab: Passwort, Logout ]
   Identity is a quiet text block; primary actions are ghost buttons;
   account actions are a hover-revealed mini-menu so they don't compete.
*/

/* Legacy .auth-* blocks removed — superseded by the harmonised .nav-link
   grammar above. The HTML still uses the IDs (auth-open-login, auth-logout
   etc.) so all JS bindings keep working. */

/* ---------- Modals ---------- */

.modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  z-index: 100;
  opacity: 1;
  /* Subtle fade-in via opacity transition — initialised from JS to avoid
     the display:none → flex toggle issue that can leave CSS animations
     stuck at the start frame in some headless browsers. */
}
/* CSS class display:flex overrides the UA [hidden]{display:none} rule —
   re-assert it explicitly so hidden modals actually hide. */
.modal[hidden] { display: none; }

.modal-card {
  background: var(--bg);
  border: 1px solid var(--ink);
  width: 100%;
  max-width: 440px;
  padding: var(--space-6) var(--space-4) var(--space-4);
  position: relative;
  max-height: 92vh;
  overflow-y: auto;
}
.modal-wide .modal-card-wide { max-width: 880px; }
.modal-card.modal-card--wide { max-width: 640px; }

/* --- Cleanup-Modal — Mode-Selector + Vorschau ---------------------- */
.cleanup-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 14px;
}
.cleanup-modes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 0;
  padding: 0;
  margin: 0;
}
.cleanup-modes legend {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
  margin-bottom: 4px;
}
.cleanup-mode {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}
.cleanup-mode:hover {
  border-color: var(--ink-muted);
  background: var(--bg-alt, rgba(0,0,0,0.02));
}
.cleanup-mode input[type="radio"] {
  flex: 0 0 auto;
  margin-top: 3px;
  cursor: pointer;
}
.cleanup-mode:has(input:checked) {
  border-color: var(--ink);
  background: rgba(0, 80, 180, 0.025);
}
.cleanup-mode--danger:has(input:checked) {
  border-color: #c2410c;
  background: rgba(217, 119, 6, 0.06);
}
.cleanup-mode-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.cleanup-mode-title {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ink);
}
.cleanup-mode-hint {
  font-size: 0.8125rem;
  color: var(--ink-muted);
  line-height: 1.4;
}
.cleanup-mode-input {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.cleanup-mode-input input[type="number"] {
  width: 90px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}
.cleanup-mode-input input[type="datetime-local"] {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 0.8125rem;
  font-family: inherit;
}
.cleanup-mode-input--dates {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
}
.cleanup-mode-input--dates label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--ink-muted);
}

/* Vorschau-Box */
.cleanup-preview {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-alt, rgba(0,0,0,0.02));
  padding: 14px 16px;
}
.cleanup-preview-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.cleanup-preview-head strong {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cleanup-preview-head span {
  font-size: 0.875rem;
  color: var(--ink-muted);
}
.cleanup-preview-sample {
  margin: 8px 0 0;
  font-size: 0.7125rem;
  color: var(--ink-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  word-break: break-all;
}

.cleanup-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.cleanup-actions .btn-ghost {
  padding: 8px 14px;
  border: 1px solid var(--line);
  background: transparent;
  font-size: 0.875rem;
  border-radius: 8px;
  cursor: pointer;
  color: var(--ink);
}
.cleanup-actions .btn-ghost:hover {
  border-color: var(--ink);
  background: var(--bg-alt, rgba(0,0,0,0.02));
}
.cleanup-actions .btn-danger {
  padding: 8px 16px;
  background: #b91c1c;
  color: #fff;
  border: 1px solid #b91c1c;
  font-size: 0.875rem;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
}
.cleanup-actions .btn-danger:hover { background: #991b1b; }
.cleanup-actions .btn-danger:disabled {
  background: var(--ink-muted);
  border-color: var(--ink-muted);
  cursor: not-allowed;
}

.modal-close {
  position: absolute;
  top: 0.625rem;
  right: 0.875rem;
  background: transparent;
  border: 0;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-muted);
}
.modal-close:hover { color: var(--ink); }

.modal h2 {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-4);
}
.modal h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 0 0 var(--space-3);
}

/* Forms inside modals */
.form-stack { display: flex; flex-direction: column; gap: var(--space-3); }
.form-stack label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  text-transform: uppercase;
}
.form-stack input[type="text"],
.form-stack input[type="password"],
.form-stack select {
  border: 1px solid var(--ink);
  background: var(--bg);
  padding: 0.75rem 0.875rem;
  font: inherit;
  color: var(--ink);
  letter-spacing: normal;
  text-transform: none;
  outline: 0;
  transition: box-shadow var(--t-med);
}
.form-stack input:focus,
.form-stack select:focus { box-shadow: 0 0 0 3px rgba(10,10,10,0.08); }

.checkbox-row {
  flex-direction: row !important;
  align-items: center;
  gap: 0.5rem;
  text-transform: none !important;
  font-size: 0.875rem !important;
  color: var(--ink-soft) !important;
}
.checkbox-row input { margin: 0; }

.form-error {
  margin: 0;
  padding: 0.625rem 0.75rem;
  border: 1px solid #b00020;
  background: #fff4f5;
  color: #5a0010;
  font-size: 0.875rem;
}
.form-success {
  margin: 0;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--ink);
  background: var(--bg-alt);
  color: var(--ink);
  font-size: 0.875rem;
}
.form-hint {
  margin: 0 0 var(--space-3);
  font-size: 0.875rem;
  color: var(--ink-soft);
  border-left: 2px solid var(--ink);
  padding-left: 0.75rem;
}

/* Admin panel */
.admin-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-4);
}
.tab {
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  font: inherit;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  padding: 0.75rem 1rem;
  cursor: pointer;
  color: var(--ink-muted);
  margin-bottom: -1px;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.tab:hover { color: var(--ink); }
.tab.active {
  color: var(--ink);
  border-bottom-color: var(--ink);
  font-weight: 600;
}

.admin-pane { animation: fadeIn 200ms ease; }

.admin-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  margin-bottom: var(--space-4);
}
.admin-table th,
.admin-table td {
  text-align: left;
  padding: 0.625rem 0.5rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.admin-table th {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
}
.admin-table tbody tr:hover { background: var(--bg-alt); }
.admin-table .row-actions {
  display: flex;
  gap: 0.375rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ----------------------------------------------------------------------
 * Enterprise-Benutzerverwaltung — Toolbar, Liste mit Avatar/Status,
 * Kachel-Ansicht, Empty-State.
 * ---------------------------------------------------------------------- */
.user-mgmt-card { padding: 0; }
.user-mgmt-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-alt, rgba(0,0,0,0.015));
}
.user-mgmt-search {
  position: relative;
  flex: 1 1 280px;
  min-width: 220px;
  display: flex;
  align-items: center;
}
.user-mgmt-search-icon {
  position: absolute;
  left: 10px;
  color: var(--ink-muted);
  pointer-events: none;
}
.user-mgmt-search input {
  width: 100%;
  padding: 7px 32px 7px 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: var(--font-prose);
  font-size: 0.875rem;
  color: var(--ink);
  background: var(--bg, #fff);
  transition: border-color 160ms ease;
}
.user-mgmt-search input:focus {
  outline: none;
  border-color: var(--ink);
}
.user-mgmt-search-clear {
  position: absolute;
  right: 6px;
  border: 0;
  background: transparent;
  width: 22px;
  height: 22px;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--ink-muted);
  cursor: pointer;
  border-radius: 4px;
}
.user-mgmt-search-clear:hover { background: rgba(0,0,0,0.05); color: var(--ink); }
.user-mgmt-filter {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.8125rem;
  background: var(--bg, #fff);
  color: var(--ink);
  cursor: pointer;
}
.user-mgmt-view {
  flex: 0 0 auto;
  margin-left: auto;
}
.user-mgmt-create {
  flex: 0 0 auto;
  padding: 7px 14px;
  font-size: 0.875rem;
}
.user-mgmt-cleanup {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  background: var(--bg, #fff);
  color: var(--ink-muted);
  font-size: 0.8125rem;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}
.user-mgmt-cleanup:hover {
  border-color: #c2410c;
  color: #c2410c;
  background: rgba(217, 119, 6, 0.04);
}
.user-mgmt-cleanup:disabled {
  opacity: 0.5;
  cursor: progress;
}
.user-mgmt-cleanup-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: rgba(217, 119, 6, 0.18);
  color: #c2410c;
  font-size: 0.7rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Anonymous-User-Indikatoren — dezent, nicht aufdringlich */
.u-pill--anon {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border: 1px solid rgba(217, 119, 6, 0.4);
  background: rgba(217, 119, 6, 0.06);
  color: #c2410c;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 4px;
  font-weight: 500;
}
.u-row--anon { opacity: 0.85; }
.u-row--anon .u-col-id strong { font-weight: 500; }
.u-avatar--anon {
  /* Anonyme Avatare entsättigt — visuelle Unterscheidung von echten Konten */
  filter: saturate(0.4);
  border: 1px dashed rgba(0, 0, 0, 0.15);
}
.user-tile--anon { opacity: 0.88; }
.user-tile--anon .user-tile-id strong { font-weight: 500; }
.user-mgmt-meta {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 0.75rem;
  color: var(--ink-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.02em;
}
.user-mgmt-meta-sep { opacity: 0.5; }

/* Avatar — runde Initialen, deterministische Farbe via --u-hue */
.u-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: hsl(var(--u-hue, 0), 60%, 92%);
  color: hsl(var(--u-hue, 0), 60%, 32%);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  font-family: var(--font-prose);
}
.u-avatar--lg {
  width: 44px;
  height: 44px;
  font-size: 0.9375rem;
}

/* Status-Badges — visuell klar voneinander getrennt */
.u-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
}
.u-badge--ok {
  background: rgba(22, 163, 74, 0.10);
  color: #15803d;
}
.u-badge--off {
  background: rgba(0, 0, 0, 0.06);
  color: var(--ink-muted);
}
.u-badge--warn {
  background: rgba(217, 119, 6, 0.12);
  color: #c2410c;
}
.u-badge--neutral {
  background: rgba(0, 0, 0, 0.04);
  color: var(--ink-muted);
}

/* Liste — angereicherte Tabelle */
.user-mgmt-table { margin: 0; }
.user-mgmt-table .u-col-avatar {
  width: 44px;
  padding-right: 4px;
}
.user-mgmt-table .u-col-id strong {
  font-weight: 600;
  font-size: 0.9375rem;
}
.user-mgmt-table .u-id-num {
  display: inline-block;
  margin-left: 6px;
  font-size: 0.7rem;
  color: var(--ink-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.user-mgmt-table .u-row--self {
  background: rgba(0, 80, 180, 0.025);
}
.user-mgmt-table .u-col-last span[title] {
  cursor: help;
  border-bottom: 1px dotted transparent;
}
.user-mgmt-table .u-col-last span[title]:hover {
  border-bottom-color: var(--ink-muted);
}
.user-mgmt-table .u-last-never {
  color: var(--ink-muted);
  font-style: italic;
}
.user-mgmt-table select.u-role,
.user-mgmt-table select.u-model {
  padding: 4px 6px;
  font-size: 0.8125rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg, #fff);
}
.user-mgmt-loading {
  text-align: center;
  padding: 24px 0;
  color: var(--ink-muted);
  font-style: italic;
}

/* Kachel-Ansicht */
.user-mgmt-tiles-host {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 14px;
  padding: 16px;
}
.user-tile {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg, #fff);
  padding: 14px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.user-tile:hover {
  border-color: var(--ink-muted);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.user-tile--self {
  border-color: rgba(0, 80, 180, 0.4);
  background: rgba(0, 80, 180, 0.025);
}
.user-tile-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.user-tile-id {
  flex: 1 1 auto;
  min-width: 0;
}
.user-tile-id strong {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-tile-meta {
  display: block;
  font-size: 0.7rem;
  color: var(--ink-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.02em;
  margin-top: 2px;
}
.user-tile-body {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.user-tile-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8125rem;
}
.user-tile-row dt {
  flex: 0 0 92px;
  color: var(--ink-muted);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.user-tile-row dd {
  flex: 1 1 auto;
  margin: 0;
  min-width: 0;
}
.user-tile-row select {
  width: 100%;
  padding: 4px 6px;
  font-size: 0.8125rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg, #fff);
}
.user-tile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}
.user-tile-actions .btn-mini {
  flex: 1 1 auto;
  text-align: center;
}

/* Empty-State */
.user-mgmt-empty {
  padding: 48px 16px;
  text-align: center;
  color: var(--ink-muted);
}
.user-mgmt-empty-title {
  margin: 0 0 6px;
  font-weight: 600;
  color: var(--ink);
}
.user-mgmt-empty-hint {
  margin: 0;
  font-size: 0.875rem;
}

/* Form-hint inside the user-mgmt-card needs spacing override */
.user-mgmt-card .form-hint {
  padding: 12px 16px 16px;
  margin: 0;
  border-top: 1px solid var(--line);
  background: var(--bg-alt, rgba(0,0,0,0.015));
}
.admin-table .pill {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--line);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.admin-table .pill-on { border-color: var(--ink); }
.admin-table .pill-off { color: var(--ink-muted); text-decoration: line-through; }

.admin-create {
  margin-top: var(--space-3);
  border-top: 1px solid var(--line);
  padding-top: var(--space-3);
}
.admin-create > summary {
  cursor: pointer;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  list-style: none;
  padding: 0.25rem 0;
}
.admin-create > summary::before { content: "+ "; color: var(--ink-muted); }
.admin-create[open] > summary::before { content: "− "; }
.admin-create form { margin-top: var(--space-3); }

.btn-mini {
  border: 1px solid var(--ink);
  background: var(--bg);
  color: var(--ink);
  padding: 0.25rem 0.5rem;
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.btn-mini:hover {
  background: var(--ink);
  color: var(--bg);
}
.btn-mini-danger:hover {
  background: #b00020;
  color: #fff;
  border-color: #b00020;
}

/* Role badge */
.role-badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.5rem;
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--bg);
}
.role-badge.role-anonymous { background: var(--bg); color: var(--ink-muted); border-color: var(--line); }
.role-badge.role-prospect,
.role-badge.role-user { background: var(--bg); color: var(--ink); }
.role-badge.role-customer { background: var(--bg-alt); color: var(--ink); border-color: var(--ink); }

/* Audience pills + chips */
.audience-list {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}
.aud-pill {
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--line);
}
.aud-public  { border-color: var(--line); color: var(--ink-muted); }
.aud-prospect { border-color: var(--ink); }
.aud-customer { border-color: var(--ink); background: var(--bg-alt); }
.aud-internal { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.audience-fs {
  border: 1px solid var(--line);
  padding: 0.625rem 0.875rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin: 0;
}
.audience-fs legend {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 0 0.25rem;
}

.kind-filter {
  border: 1px solid var(--ink);
  background: var(--bg);
  color: var(--ink);
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-size: 0.875rem;
}

/* Audience cell editor in content table */
.aud-edit {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.aud-edit label {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  cursor: pointer;
}
.aud-edit label.on {
  color: var(--ink);
}
.aud-edit input { margin: 0; }

/* ======================================================================
   CONTENT WORKSPACE — three-pane layout
     ┌──────────┬──────────────┬───────────────────┐
     │   tree   │  list        │  editor           │
     │ (260px)  │ (340px)      │  (1fr)            │
     └──────────┴──────────────┴───────────────────┘
   ====================================================================== */

.content-shell {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: grid;
  /* 5 columns: tree | resizer | list | resizer | editor.
     Tree + Editor have widths controlled by var(), List takes the flex.
     User-driven drag updates --cw-tree-w and --cw-editor-w via JS;
     defaults below act as fallbacks. */
  grid-template-columns:
    var(--cw-tree-w, 220px)
    6px
    minmax(280px, 1fr)
    6px
    var(--cw-editor-w, 720px);
  grid-template-rows: 100vh;
  z-index: 50;
}
@media (max-width: 1500px) {
  .content-shell { --cw-editor-w: 620px; }
}
@media (max-width: 1280px) {
  .content-shell { --cw-tree-w: 200px; --cw-editor-w: 560px; }
}

/* Drag handles between panes. Slim by default; widen + accent on hover. */
.cw-resizer {
  background: transparent;
  cursor: col-resize;
  position: relative;
  user-select: none;
  transition: background var(--t-fast);
  z-index: 5;
}
.cw-resizer::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--line);
  transform: translateX(-50%);
  transition: background var(--t-fast), width var(--t-fast);
}
.cw-resizer::after {
  /* Thin draggable affordance — a row of 3 small dots in the middle */
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 32px;
  background: transparent;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity var(--t-fast);
}
.cw-resizer:hover::before,
.cw-resizer.is-dragging::before {
  background: var(--ink);
  width: 2px;
}
.cw-resizer:hover::after,
.cw-resizer.is-dragging::after {
  opacity: 1;
}

/* Borders that previously sat on tree/list/editor — drop them; the resizer
   lines fill the same role. */
.content-tree { border-right: 0; }
.content-list-pane { border-right: 0; }
.content-editor-pane { border-left: 0; }

/* Optional: while dragging, a body-level class disables text selection
   everywhere so the cursor stays consistent across all panes. */
body.cw-resizing,
body.cw-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}

body.content-active #public-header,
body.content-active #public-app,
body.content-active #public-footer {
  display: none !important;
}

/* --- Tree (left) --- */

.content-tree {
  border-right: 1px solid var(--line);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.cw-brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;
  padding: 0 var(--space-5);
  /* Matches list-bar (64px) + list-toolbar (56px) so the tree-leaves and the
     list-items start on the same y-axis as the editor's first form section. */
  min-height: 120px;
  border-bottom: 1px solid var(--line);
}
.cw-brand-meta {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.cw-tree {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3) var(--space-2);
}
.cw-tree-folder {
  margin-bottom: 2px;
}
.cw-tree-folder > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.55rem var(--space-3);
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  border-left: 2px solid transparent;
  transition: background var(--t-fast), color var(--t-fast);
}
.cw-tree-folder > summary:hover {
  background: var(--bg-alt);
  color: var(--ink);
}
.cw-tree-folder > summary::before {
  content: "▸";
  font-size: 0.7rem;
  color: var(--ink-muted);
  transition: transform var(--t-fast);
}
.cw-tree-folder[open] > summary::before {
  transform: rotate(90deg);
}
.cw-tree-folder.cw-folder-active > summary {
  background: var(--bg-alt);
  border-left-color: var(--ink);
  color: var(--ink);
  font-weight: 500;
}
.cw-tree-children {
  padding-left: 1rem;
}
.cw-tree-leaf {
  display: block;
  background: transparent;
  border: 0;
  border-left: 2px solid transparent;
  padding: 0.45rem var(--space-3) 0.45rem 1.4rem;
  font: inherit;
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  text-align: left;
  cursor: pointer;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--t-fast), background var(--t-fast);
}
.cw-tree-leaf:hover { color: var(--ink); background: var(--bg-alt); }
.cw-tree-leaf.cw-folder-active {
  color: var(--ink);
  border-left-color: var(--ink);
  background: var(--bg-alt);
  font-weight: 500;
}
.cw-tree-count {
  margin-left: auto;
  font-size: 0.7rem;
  color: var(--ink-muted);
  background: var(--bg-alt);
  padding: 0 0.4rem;
  border: 1px solid var(--line);
}
.cw-tree-folder[open] > summary .cw-tree-count {
  background: var(--bg);
}
.cw-tree-footer {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.cw-tree-footer .admin-btn-link { padding: 4px 0; text-align: left; }

/* --- List (middle) --- */

.content-list-pane {
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}
.cw-list-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--space-5);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  min-height: 64px;
}
.cw-bc {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
}
.cw-bc-root, .cw-bc-sep { color: var(--ink-muted); }
.cw-bc-current { color: var(--ink); font-weight: 500; }

.cw-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-5);
  min-height: 56px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  flex-wrap: wrap;
}
.cw-toolbar .seg { flex: 0 0 auto; }
.cw-toolbar .cw-tag-filter { margin-left: auto; flex: 0 0 auto; }
.cw-list {
  flex: 1;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Compact list-item: [status-dot] [title + id stacked] [audience dots + date] */
.cw-list-item {
  border-bottom: 1px solid var(--line);
  padding: 0.45rem var(--space-3);
  cursor: pointer;
  display: grid;
  grid-template-columns: 8px 1fr auto;
  align-items: center;
  column-gap: 0.55rem;
  transition: background var(--t-fast);
  min-height: 38px;
}
.cw-list-item:hover { background: var(--bg-alt); }
.cw-list-item.is-selected {
  background: var(--bg-alt);
  box-shadow: inset 2px 0 0 var(--ink);
}
.cw-list-text {
  min-width: 0;
  line-height: 1.25;
}
.cw-list-title {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cw-list-id {
  font-size: 0.68rem;
  color: var(--ink-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
.cw-list-trail {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.cw-list-meta {
  font-size: 0.68rem;
  color: var(--ink-muted);
  margin-left: 4px;
  font-variant-numeric: tabular-nums;
}
.cw-list-empty {
  padding: var(--space-5) var(--space-3);
  color: var(--ink-muted);
  font-size: 0.825rem;
  text-align: center;
}

/* ============================================================================
 * Workspace-Liste — erweiterte Zeile (.cw-row) + Vorschau-Grid
 *
 * Erweiterte Zeile zeigt mehr Daten pro Item: kind + cluster Chips,
 * 1-Zeilen-Summary, Tags, Indikatoren (📷 ⏎N ✏️) und kontext-
 * abhängige Status-History-Zeile (für non-active Items).
 * ============================================================================ */
.cw-list-item.cw-row {
  grid-template-columns: 8px 1fr;
  align-items: start;
  padding: 0.6rem var(--space-3);
}
.cw-row-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cw-row-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.cw-row-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
}
.cw-row-trail {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.cw-row-date {
  font-size: 0.7rem;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  margin-left: 2px;
}
/* Kind/Cluster Chips */
.cw-row-chip {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid var(--line);
  white-space: nowrap;
  line-height: 1.4;
}
.cw-row-chip--kind {
  color: var(--ink-soft);
  background: var(--bg-alt);
}
.cw-row-chip--cluster {
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.1em;
  font-weight: 600;
  border-color: transparent;
}
.cw-row-chip--cluster-sap { background: #f0f4ff; color: #1a4d80; }
.cw-row-chip--cluster-btp { background: #f0fff4; color: #2d6a3e; }
.cw-row-chip--cluster-ai  { background: #fff5f0; color: #8c4a1d; }
.cw-row-chip--cluster-ops { background: #fef3e0; color: #80511a; }

/* 1-Zeilen Summary unter dem Titel */
.cw-row-summary {
  font-size: 0.7625rem;
  color: var(--ink-muted);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Meta-Zeile: id-mono + tags + indicators */
.cw-row-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.7rem;
  color: var(--ink-muted);
}
.cw-row-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.66rem;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 40%;
}
.cw-row-tags {
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
}
.cw-row-tag {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.66rem;
  color: var(--ink-soft);
  background: var(--bg-alt);
  padding: 1px 6px;
  border-radius: 3px;
}
.cw-row-indicators {
  display: inline-flex;
  gap: 8px;
  font-size: 0.75rem;
}
.cw-row-icon {
  cursor: help;
}

/* Status-History-Zeile (orange-tönig) — nur bei nicht-active Items */
.cw-row-history {
  font-size: 0.7rem;
  color: var(--ink-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 2px;
  padding: 3px 6px;
  background: rgba(180, 137, 0, 0.06);
  border-left: 2px solid #d4a017;
  border-radius: 0 3px 3px 0;
}
.cw-row-history-icon { font-size: 0.75rem; }
.cw-row-history-label { font-weight: 500; color: var(--ink-soft); }
.cw-row-history-date { font-variant-numeric: tabular-nums; }
.cw-row-history-who { color: var(--ink-muted); }
.cw-row-history-reason {
  color: var(--ink-soft);
  font-style: italic;
}

/* ----------------------------------------------------------------------
 * Vorschau-Modus — V2-Tiles wie auf der Live-Site, mit dezenter
 * Workspace-Chrome (Status-Dot + ID/Datum-Footer).
 * ---------------------------------------------------------------------- */
.cw-list.cw-list--preview {
  display: grid;
  /* min(100%, …) verhindert Overflow wenn der Pane schmaler ist als 280px. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--space-4);
  padding: var(--space-3);
}
.cw-preview-cell {
  position: relative;
  border-bottom: 0;            /* override .cw-list-item bottom-line */
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: transparent;
}
.cw-preview-cell.is-selected {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
  border-radius: var(--r-card, 12px);
}
.cw-preview-cell:hover { background: transparent; }
.cw-preview-canvas {
  /* Original-Komponente in voller Originaltreue — Klick wird vom
     Wrapper gefangen, deshalb sind alle Kinder klick-tot. Skaliert
     etwas kleiner als die Live-Site, damit mehrere Karten ins Grid
     passen. */
  pointer-events: none;
  width: 100%;
}
.cw-preview-canvas .tile-v2,
.cw-preview-canvas .dp-cta-card,
.cw-preview-canvas .faq-list,
.cw-preview-canvas .cw-location-preview {
  pointer-events: none;
  width: 100%;
}
/* Visual-Tweaks pro Komponenten-Typ — nur Margin/Padding, keine
   strukturellen Änderungen, damit der Live-Look erhalten bleibt. */
.cw-preview-cell--cta .dp-cta-card {
  margin: 0;
  padding: 18px 20px 16px;
}
.cw-preview-cell--cta .dp-cta-headline { font-size: 1.0625rem; line-height: 1.3; }
.cw-preview-cell--cta .dp-cta-body { font-size: 0.875rem; line-height: 1.5; }
.cw-preview-cell--cta .dp-cta-btn {
  display: inline-block;
  pointer-events: none;
}
.cw-faq-preview {
  border: 1px solid var(--line);
  border-radius: var(--r-card, 12px);
  background: var(--paper, #fff);
  padding: 16px 18px;
}
.cw-faq-preview-title {
  margin: 0 0 12px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}
.cw-faq-preview .faq-item {
  border-top: 1px dashed var(--line);
  padding: 10px 0;
}
.cw-faq-preview .faq-item:first-of-type { border-top: 0; padding-top: 0; }
.cw-faq-preview .faq-q {
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--ink);
}
.cw-faq-preview .faq-a {
  font-size: 0.8125rem;
  margin: 0;
  color: var(--ink-muted);
  line-height: 1.5;
  /* Antwort auf 3 Zeilen kappen damit Karten gleich hoch bleiben.
     max-height-Fallback für Chrome-Quirks. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: calc(3 * 1.5em);
}
.cw-faq-preview-more {
  margin: 8px 0 0;
  font-size: 0.75rem;
  color: var(--ink-muted);
  font-style: italic;
}
.cw-location-preview {
  border: 1px solid var(--line);
  border-radius: var(--r-card, 12px);
  background: var(--paper, #fff);
  padding: 16px 18px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-muted);
}
.cw-location-preview .cw-location-line { margin: 0; }
.cw-location-preview .cw-location-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
.cw-preview-status {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  padding: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10);
  pointer-events: none;
  display: inline-flex;
}
.cw-preview-status .lc-dot {
  width: 8px;
  height: 8px;
  display: block;
}
.cw-preview-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 0 4px;
  font-size: 0.66rem;
  color: var(--ink-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.cw-preview-id {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}
.cw-preview-date {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

/* Status icon in the list — colored dot, no text */
.lc-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-muted);
  flex-shrink: 0;
}
/* Lifecycle-Status Dots — Reihenfolge im Workflow:
   idea (grau) → generated (gelb) → draft (orange) → review (lila) →
   active (grün) ↔ deactivated (matt) → archived (transparent) */
.lc-dot.lc-idea        { background: #6b7785; }            /* schiefergrau */
.lc-dot.lc-generated   { background: #d4a017; }            /* warmes gelb */
.lc-dot.lc-draft       { background: #b58900; }
.lc-dot.lc-review      { background: #6f42c1; }            /* lila */
.lc-dot.lc-active      { background: #2e7d32; }
.lc-dot.lc-deactivated { background: #999; opacity: 0.6; } /* matt */
.lc-dot.lc-archived    { background: var(--ink-muted); opacity: 0.5; }

/* Audience initial chip — single uppercase letter on a tinted dot */
.aud-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  background: var(--bg);
  text-transform: uppercase;
  font-family: var(--font-sans, system-ui, sans-serif);
}
.aud-dot.aud-prospect { color: var(--ink); border-color: var(--ink); }
.aud-dot.aud-customer { color: var(--ink); border-color: var(--ink); background: var(--bg-alt); }
.aud-dot.aud-internal { color: var(--bg); background: var(--ink); border-color: var(--ink); }

/* --- Editor (right) --- */

.content-editor-pane {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
  border-left: 1px solid var(--line);
}
.cw-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: var(--space-8);
  max-width: 560px;
  margin: 0 auto;
}
.cw-empty-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 var(--space-2);
}
.cw-empty h2 {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3);
}
.cw-empty p { color: var(--ink-soft); }

.cw-editor-inner {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
/* Editor-Head: a SINGLE horizontal band, same height as .cw-list-bar.
   identity (eyebrow · title) on the left, trail (pill · id · actions)
   on the right. Long titles ellipsize to keep the band one line tall. */
.cw-editor-head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-5);
  min-height: 64px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
/* Title takes the full left side. Single line + ellipsis if too long. */
.cw-eh-title {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Trail on the right: status pill, id code, action button(s).
   `min-width:0` on .drawer-id lets it ellipsize when there's no room
   instead of pushing the action button off-screen. */
.cw-eh-trail {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 0 0 auto;
  max-width: 60%;
}
.cw-eh-trail .drawer-id {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  max-width: 220px;
}
.cw-editor-actions {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.cw-editor-updated {
  font-size: 0.72rem;
  color: var(--ink-muted);
  margin-left: auto;
  letter-spacing: 0.02em;
}

/* Sub-band beneath the editor head — visual rhythm mirrors .cw-toolbar */
.cw-editor-subbar {
  display: flex;
  align-items: center;
  padding: 0 var(--space-5);
  min-height: 56px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.cw-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.cw-form-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-7) var(--space-6);
}
.cw-form-body input[disabled],
.cw-form-body textarea[disabled],
.cw-form-body select[disabled] {
  background: var(--bg-alt);
  cursor: not-allowed;
  opacity: 0.7;
}
.cw-form-footer {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  align-items: center;
  padding: 0 var(--space-5);
  min-height: 64px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.content-editor-pane .drawer-tabs { padding: 0 var(--space-5); }
.cw-tab-pane { animation: fadeIn 180ms ease; }

/* ============================================================
   BODY EDITOR — Markdown editor with toolbar and live preview
   ============================================================ */

.cw-body-pane {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.md-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: var(--bg-alt);
  border-radius: 12px;
}

.md-tb {
  border: 1px solid transparent;
  background: transparent;
  font: inherit;
  font-size: 0.825rem;
  padding: 5px 9px;
  color: var(--ink);
  cursor: pointer;
  border-radius: 9px;
  min-width: 28px;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.md-tb:hover { background: var(--bg); border-color: var(--line); }
.md-tb:active { background: var(--ink); color: var(--bg); }

/* Active state: button reflects the formatting present at the cursor /
   selection. Inverted look — solid black with white glyph — so you can
   see at a glance which formatting is in scope. Click again to remove. */
.md-tb.is-active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.md-tb.is-active:hover {
  background: var(--ink-soft, #2c2c2c);
  color: var(--bg);
  border-color: var(--ink);
}
.md-tb.is-active code,
.md-tb.is-active strong,
.md-tb.is-active em {
  color: var(--bg);
}

.md-tb code { font-size: 0.75rem; padding: 0; background: none; border: 0; }
.md-tb strong { font-weight: 700; }
.md-tb--sm {
  font-size: 0.75rem;
  padding: 3px 7px;
  min-width: 24px;
  border-radius: 7px;
}

/* --- Erweiterte Zusammenfassungs-Eingabe ----------------------------- */
/* Wrapper rund um die Summary-Textarea: Toolbar oben, Auto-Resize-
   Textarea, optionale Vorschau, Footer mit Zeichen-Zähler.
   Visual-Stil zurückhaltend — passt zwischen Title und Service-Cluster
   ohne den restlichen Edit-Form zu dominieren. */
.cw-summary-label {
  /* Override the .form-grid label inline-text rule — der Block-Editor
     unten braucht eigenes Layout. */
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cw-summary-editor {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg, #fff);
  overflow: hidden;
}
.cw-summary-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  background: var(--bg-alt, rgba(0,0,0,0.02));
  border-bottom: 1px solid var(--line);
}
.cw-summary-spacer { flex: 1 1 auto; }
.cw-summary-mode {
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}
.cw-summary-mode.is-active {
  background: var(--ink);
  color: var(--bg);
}
.cw-summary-textarea {
  border: 0;
  outline: none;
  resize: none;
  padding: 12px 14px;
  font-family: var(--font-prose);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink);
  background: transparent;
  min-height: 96px;
  /* Auto-Resize via JS (height-Setting) — modern Browsers könnten
     auch field-sizing: content nutzen, fallback bleibt JS. */
}
.cw-summary-textarea:focus {
  background: rgba(0, 80, 180, 0.02);
}
.cw-summary-preview {
  border-top: 1px dashed var(--line);
  padding: 12px 14px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg-alt, rgba(0,0,0,0.015));
}
.cw-summary-preview p { margin: 0 0 0.5em; }
.cw-summary-preview p:last-child { margin-bottom: 0; }
.cw-summary-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-top: 1px solid var(--line);
  background: var(--bg-alt, rgba(0,0,0,0.02));
  font-size: 0.7rem;
  color: var(--ink-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.cw-summary-count {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
/* Sweet-Spot-Indikatoren — Farbe gibt sofortiges Feedback ob die
   Länge passt. Empty/short sind neutral, sweet ist grün, long gelb,
   over rot. */
.cw-summary-count[data-state="empty"] { color: var(--ink-muted); font-weight: 400; }
.cw-summary-count[data-state="short"] { color: #ca8a04; }     /* amber */
.cw-summary-count[data-state="sweet"] { color: #16a34a; }     /* green */
.cw-summary-count[data-state="long"]  { color: #d97706; }     /* darker amber */
.cw-summary-count[data-state="over"]  { color: #dc2626; }     /* red */
.cw-summary-hint { letter-spacing: 0.02em; }
.md-tb em { font-style: italic; }

.md-tb-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.78rem;
  color: var(--ink-soft);
  cursor: pointer;
}
.md-tb-toggle input { margin: 0; }

.md-sep {
  width: 1px;
  align-self: stretch;
  background: var(--line);
  margin: 0 4px;
}
.md-sep-flex { flex: 1 0 auto; background: transparent; }

/* Body editor: a single full-width pane that toggles between the
   Markdown source (Schreiben) and the rendered preview (Vorschau).
   No more split-screen — author focuses on one mode at a time and
   uses the toolbar segment to switch.

   Heights scale with the viewport so the editor fills the available
   space underneath the toolbar instead of leaving empty padding at
   the bottom. The `--md-stack-h` value is the offset (header + tabs +
   toolbar + hint + footer) that sits above/below the editor. */
.md-stack {
  display: block;
  min-height: calc(100vh - 360px);
  width: 100%;
}
.md-stack .md-editor {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: calc(100vh - 360px);
}
.md-stack .md-preview {
  display: none;
  width: 100%;
  box-sizing: border-box;
  min-height: calc(100vh - 360px);
  max-height: calc(100vh - 280px);
}
.md-stack.md-mode-preview .md-editor { display: none; }
.md-stack.md-mode-preview .md-preview { display: block; }

/* Mode switch in the toolbar — segment-style, sits at the right end */
.md-mode-seg {
  margin-left: auto;
  flex: 0 0 auto;
}

.md-editor {
  border: 1px solid var(--line);
  background: var(--bg);
  padding: var(--space-3);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ink);
  resize: vertical;
  outline: 0;
  letter-spacing: normal;
  text-transform: none;
  /* Tab-key inserts 2 spaces visually rather than 8 */
  tab-size: 2;
  -moz-tab-size: 2;
}
.md-editor:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(10,10,10,0.06);
}
.md-editor:disabled {
  background: var(--bg-alt);
  cursor: not-allowed;
  opacity: 0.7;
}
/* High-contrast selection so markups stand out clearly while editing.
   Default browser highlight on a white textarea is too faint with our
   monospace + thin font weight. Match the inverse of the design system. */
.md-editor::selection {
  background: var(--ink);
  color: var(--bg);
}
.md-editor::-moz-selection {
  background: var(--ink);
  color: var(--bg);
}

/* Selection in the rendered preview gets the same treatment for parity */
.md-preview ::selection,
.detail-body ::selection {
  background: var(--ink);
  color: var(--bg);
}
.md-preview ::-moz-selection,
.detail-body ::-moz-selection {
  background: var(--ink);
  color: var(--bg);
}

.md-preview {
  border: 1px solid var(--line);
  background: var(--bg);
  padding: var(--space-3);
  overflow-y: auto;
}
.md-preview:empty::before {
  content: "Vorschau wird hier angezeigt — beginnen Sie links zu schreiben.";
  color: var(--ink-muted);
  font-style: italic;
}

.md-hint {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.55;
}
.md-hint code {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  padding: 0.1em 0.35em;
  font-size: 0.85em;
  border-radius: 9px;
  margin: 0 1px;
}

@media (max-width: 1100px) {
  .md-stack { min-height: auto; }
  .md-stack .md-editor,
  .md-stack .md-preview { min-height: 360px; }
  .md-preview { max-height: 480px; }
}

/* --- Responsive: collapse to two-pane (tree + active) on narrow viewports --- */
@media (max-width: 1100px) {
  .content-shell { grid-template-columns: 200px 1fr !important; }
  .content-shell.cw-show-editor .content-list-pane { display: none; }
  .content-shell:not(.cw-show-editor) .content-editor-pane { display: none; }
  /* Resizers don't make sense in 2-pane mode — hide them. */
  .cw-resizer { display: none; }
}
@media (max-width: 720px) {
  .content-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .content-tree {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 0;
  }
  .cw-brand, .cw-tree-footer { padding: 0.875rem; border: 0; }
  .cw-tree { padding: 0; max-height: 220px; }
}

/* ======================================================================
   ADMIN SHELL — full-screen workspace with sidebar (replaces large modals)
   ====================================================================== */

.admin-shell {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: grid;
  grid-template-columns: 260px 1fr;
  grid-template-rows: 100vh;
  z-index: 50;
}

/* When admin shell is active, hide the public homepage entirely. */
body.admin-active #public-header,
body.admin-active #public-app,
body.admin-active #public-footer {
  display: none !important;
}

/* --- Sidebar --- */

.admin-sidebar {
  border-right: 1px solid var(--line);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  padding: var(--space-4) 0;
}

.admin-brand {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0 var(--space-4) var(--space-4);
  border-bottom: 1px solid var(--line);
}
.admin-brand-meta {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.admin-nav {
  display: flex;
  flex-direction: column;
  padding: var(--space-3) var(--space-2);
  gap: 0.125rem;
  flex: 1;
}

.admin-nav-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  padding: 0.75rem var(--space-3);
  cursor: pointer;
  color: var(--ink-soft);
  border-left: 2px solid transparent;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.admin-nav-link:hover { background: var(--bg-alt); color: var(--ink); }
.admin-nav-link.active {
  background: var(--bg-alt);
  border-left-color: var(--ink);
  color: var(--ink);
}
.admin-nav-link[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.admin-nav-label {
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.admin-nav-hint {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  text-transform: none;
}
.admin-nav-link.active .admin-nav-hint { color: var(--ink-soft); }

.admin-sidebar-footer {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--line);
}

/* --- Main pane --- */

.admin-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-y: auto;
}

.admin-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 5;
}

.admin-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
}
.admin-breadcrumb-root { color: var(--ink-muted); }
.admin-breadcrumb-sep   { color: var(--ink-muted); }
.admin-breadcrumb-current { color: var(--ink); font-weight: 500; }

.admin-bar-user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.875rem;
}
.admin-user-name { color: var(--ink-soft); }

/* Buttons in admin bar / sidebar — flatter than the public CTA buttons */

.admin-btn-link {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0.4rem 0.5rem;
  transition: color var(--t-fast);
}
.admin-btn-link:hover { color: var(--ink); }

.admin-btn-ghost {
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  padding: 0.45rem 0.875rem;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.admin-btn-ghost:hover { border-color: var(--ink); background: var(--bg-alt); }

/* --- Views --- */

.admin-view {
  padding: var(--space-6) var(--space-6) var(--space-8);
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  animation: fadeIn 200ms ease;
}

.admin-view-head { margin-bottom: var(--space-4); }
.admin-view-head h1 {
  font-size: 1.875rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
}
.admin-view-lead {
  color: var(--ink-soft);
  font-size: 0.9375rem;
  max-width: 70ch;
  margin: 0;
}

.admin-card {
  border: 1px solid var(--line);
  background: var(--bg);
  margin-bottom: var(--space-4);
  padding: var(--space-3);
}

/* Full-width admin card variant — no inner padding, used by the
   embedded SEA Bench iframe so the bench page can use its own padding. */
.admin-card.admin-card--full { padding: 0; overflow: hidden; }

/* SEA Bench iframe — fills available height in the admin shell. */
.admin-bench-card {
  border-radius: var(--radius);
}
.admin-bench-iframe {
  display: block;
  width: 100%;
  /* admin-bar (~ 56px) + view-head (~ 96px) + card border + bottom pad
     ≈ 220px reserved; rest is iframe height. */
  height: calc(100vh - 220px);
  min-height: 640px;
  border: 0;
  background: var(--bg);
  border-radius: var(--radius);
}

.admin-card .admin-table { margin-bottom: 0; }
.admin-card .admin-toolbar {
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
}

/* `details` cards keep the create-form collapsed by default */
.admin-card.admin-create { padding: 0; }
.admin-card.admin-create > summary {
  padding: var(--space-3);
  cursor: pointer;
  list-style: none;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.admin-card.admin-create > summary::before { content: "+ "; color: var(--ink-muted); }
.admin-card.admin-create[open] > summary::before { content: "− "; }
.admin-card.admin-create > summary + form,
.admin-card.admin-create[open] > form { padding: 0 var(--space-3) var(--space-3); }

/* ============================================================
   RAG admin view — pipeline config, status, live similarity test
   ============================================================ */

.rag-status-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.rag-status-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.rag-stat {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: 12px;
  min-width: 84px;
  text-align: center;
}
.rag-stat-num {
  font-size: 1.4rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.rag-stat-lbl {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.rag-status-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
  align-items: center;
}

.rag-section-title {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0 0 var(--space-2);
}

.rag-fields {
  border: 1px solid var(--line);
  padding: var(--space-3);
  margin: var(--space-3) 0;
  border-radius: 12px;
}
.rag-fields legend {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 0 6px;
}
.rag-fields-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 6px;
}
.rag-fields-table th,
.rag-fields-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
  font-size: 0.875rem;
}
.rag-fields-table th {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
}
.rag-fields-table tr:last-child td { border-bottom: 0; }
.rag-fields-table code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85em;
}
.rag-weight {
  width: 60px;
  border: 1px solid var(--line);
  padding: 4px 8px;
  font: inherit;
  font-size: 0.875rem;
}
.rag-config-actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-2);
}

/* Live search */
.rag-search-form {
  display: grid;
  grid-template-columns: 1fr 80px auto;
  gap: 8px;
  margin-bottom: var(--space-3);
}
.rag-search-form input[type="text"],
.rag-search-form input[type="number"] {
  border: 1px solid var(--line);
  padding: 8px 12px;
  font: inherit;
  font-size: 0.875rem;
  outline: 0;
}
.rag-search-form input[type="text"]:focus,
.rag-search-form input[type="number"]:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(10,10,10,0.06);
}

.rag-results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.rag-result {
  border: 1px solid var(--line);
  background: var(--bg);
  padding: var(--space-2) var(--space-3);
  border-radius: 12px;
}
.rag-result-empty {
  color: var(--ink-muted);
  font-style: italic;
  padding: var(--space-2);
}
.rag-result-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  margin-bottom: 4px;
}
.rag-result-kind {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  font-size: 0.65rem;
  border: 1px solid var(--line);
  padding: 2px 8px;
  border-radius: 999px;
}
.rag-result-id { color: var(--ink-muted); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rag-result-id code { font-size: 0.78rem; }
.rag-result-score {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--ink);
}
.rag-bar {
  display: block;
  width: 100%;
  height: 3px;
  background: var(--bg-alt);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 6px;
}
.rag-bar-fill {
  display: block;
  height: 100%;
  background: var(--ink);
}
.rag-result-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 4px 0 4px;
  letter-spacing: -0.005em;
}
.rag-result-summary {
  color: var(--ink-soft);
  font-size: 0.875rem;
  margin: 0 0 4px;
  line-height: 1.5;
}
.rag-result-preview {
  margin-top: 6px;
  font-size: 0.78rem;
}
.rag-result-preview summary {
  cursor: pointer;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}
.rag-result-preview pre {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 0.78rem;
  margin: 6px 0 0;
  white-space: pre-wrap;
  max-height: 200px;
  overflow-y: auto;
}

/* User-Context section */
.rag-ctx-form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-2);
}
.rag-ctx-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.rag-ctx-form input {
  border: 1px solid var(--line);
  padding: 6px 10px;
  font: inherit;
  font-size: 0.875rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
}
.rag-ctx-form input:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(10,10,10,0.06);
  outline: 0;
}

.rag-ctx-output {
  margin-top: var(--space-3);
  border-top: 1px solid var(--line);
  padding-top: var(--space-3);
}
.rag-ctx-grid {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}
.rag-ctx-block {
  border: 1px solid var(--line);
  padding: 8px 14px;
  background: var(--bg);
  min-width: 140px;
  border-radius: 12px;
}
.rag-ctx-label {
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
}
.rag-ctx-value {
  font-size: 1rem;
  font-weight: 600;
  margin: 2px 0 0;
}

.rag-ctx-section {
  margin: var(--space-2) 0;
}
.rag-ctx-section summary {
  cursor: pointer;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  font-weight: 500;
  color: var(--ink);
  padding: 4px 0;
}
.rag-ctx-list {
  list-style: none;
  padding: 0;
  margin: 4px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rag-ctx-list li {
  font-size: 0.85rem;
  padding: 4px 0 4px 1em;
  border-left: 2px solid var(--line);
  color: var(--ink-soft);
}
.rag-ctx-codes li code {
  font-size: 0.78rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.rag-ctx-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.rag-ctx-tag {
  font-size: 0.78rem;
  border: 1px solid var(--line);
  padding: 3px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.rag-ctx-tag-count {
  font-size: 0.7rem;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.rag-ctx-pre {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 0.78rem;
  white-space: pre-wrap;
  max-height: 240px;
  overflow-y: auto;
  margin: 6px 0 0;
}

/* Search extras (test-as-user toggle row) */
.rag-search-extras {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-2);
}
.form-hint-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.form-hint-inline input[type="number"] {
  width: 70px;
  border: 1px solid var(--line);
  padding: 4px 8px;
  font: inherit;
  font-size: 0.825rem;
}
.form-hint-inline input[type="number"]:disabled {
  background: var(--bg-alt);
  opacity: 0.6;
}
.rag-user-summary {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.rag-user-summary code {
  font-size: 0.75rem;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  padding: 1px 6px;
  border-radius: 9px;
}

/* --- Lifecycle pills + advanced content table --- */

.lc-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.18rem 0.55rem;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--line);
}
.lc-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-muted);
}
.lc-idea        { color: var(--ink-soft); border-color: var(--line); }
.lc-idea::before        { background: #6b7785; }
.lc-generated   { color: var(--ink); border-color: #d4a017; }
.lc-generated::before   { background: #d4a017; }
.lc-draft       { color: var(--ink-soft); border-color: var(--line); }
.lc-draft::before       { background: #b58900; }
.lc-review      { color: var(--ink); border-color: #6f42c1; }
.lc-review::before      { background: #6f42c1; }
.lc-active      { color: var(--ink); border-color: var(--ink); background: var(--bg); }
.lc-active::before      { background: #2e7d32; }
.lc-deactivated { color: var(--ink-muted); border-color: var(--line); }
.lc-deactivated::before { background: #999; }
.lc-archived    { color: var(--ink-muted); background: var(--bg-alt); }
.lc-archived::before    { background: var(--ink-muted); }

/* Toolbar with filter groups (segmented control + actions) */
.admin-toolbar-grid {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: var(--space-3);
  align-items: end;
  flex-wrap: wrap;
}
.filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.filter-label {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.filter-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  align-items: end;
}

/* Segmented filter buttons */
.seg {
  display: inline-flex;
  border: 1px solid var(--line);
}
.seg-item {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.8125rem;
  padding: 0.45rem 0.875rem;
  cursor: pointer;
  color: var(--ink-soft);
  border-right: 1px solid var(--line);
  transition: background var(--t-fast), color var(--t-fast);
}
.seg-item:last-child { border-right: 0; }
.seg-item:hover { color: var(--ink); }
.seg-item.active { background: var(--ink); color: var(--bg); }

.btn-compact {
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
}

/* Advanced content table */
.content-table th,
.content-table td { vertical-align: middle; }
.content-table .col-status { width: 110px; }
.content-table .col-meta   { color: var(--ink-muted); font-size: 0.8125rem; white-space: nowrap; }
.content-table tr.row-active   { }
.content-table tr.row-draft    td { background: rgba(181, 137, 0, 0.04); }
.content-table tr.row-archived td { color: var(--ink-muted); }
.content-table .row-id code {
  font-size: 0.78rem;
  color: var(--ink-muted);
  background: var(--bg-alt);
  padding: 0.1rem 0.4rem;
}
.content-table .row-toggle {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 1rem;
  color: var(--ink-muted);
  padding: 0.25rem 0.5rem;
  transition: color var(--t-fast);
}
.content-table .row-toggle:hover { color: var(--ink); }
.content-table .row-actions {
  display: inline-flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Action buttons differentiated by intent */
.btn-action {
  border: 1px solid var(--ink);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.55rem;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.btn-action:hover {
  background: var(--ink);
  color: var(--bg);
}
.btn-action.btn-primary { background: var(--ink); color: var(--bg); }
.btn-action.btn-primary:hover { background: var(--bg); color: var(--ink); }
.btn-action.btn-warn { border-color: #b58900; color: #6a4f00; }
.btn-action.btn-warn:hover { background: #b58900; color: #fff; }
.btn-action.btn-danger { border-color: #b00020; color: #5a0010; }
.btn-action.btn-danger:hover { background: #b00020; color: #fff; }
.btn-action[disabled] { opacity: 0.4; cursor: not-allowed; }

/* --- Compact list when drawer is open --- */

/* The content view is data-dense — let it use the full available width
   between sidebar and drawer, instead of the prose-friendly max-width that
   centers other views. */
#admin-view-content {
  max-width: none;
  margin: 0;
}

/* When the editor drawer is open, the main pane is narrower. Hide the
   columns whose data is already visible inside the drawer (cluster, audiences,
   timestamps, kind) so the remaining table doesn't squeeze unreadably. */
body.drawer-open #admin-view-content .col-kind,
body.drawer-open #admin-view-content .col-cluster,
body.drawer-open #admin-view-content .col-audiences,
body.drawer-open #admin-view-content .col-meta {
  display: none;
}
/* Tighten remaining columns + reduce padding so the list reaches the sidebar. */
body.drawer-open #admin-view-content {
  padding: var(--space-4) var(--space-4) var(--space-6);
}
body.drawer-open #admin-view-content .content-table .col-title { padding-right: 0.5rem; }
body.drawer-open #admin-view-content .content-table .col-actions { white-space: nowrap; }
body.drawer-open #admin-view-content .admin-toolbar-grid {
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

/* --- Slide-in editor drawer --- */
.content-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(560px, 50vw);
  min-width: 420px;
  background: var(--bg);
  border-left: 1px solid var(--ink);
  display: flex;
  flex-direction: column;
  z-index: 80;
  animation: slideInRight 220ms ease;
  overflow: hidden;
  box-shadow: -8px 0 24px rgba(10, 10, 10, 0.06);
}
@keyframes slideInRight {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

.drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--line);
}
.drawer-head h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
}
.drawer-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 0.25rem;
}
.drawer-meta {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.drawer-id {
  font-size: 0.75rem;
  color: var(--ink-muted);
  background: var(--bg-alt);
  padding: 0.1rem 0.4rem;
}

.drawer-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
  background: var(--bg-alt);
}
.drawer-actions:empty { display: none; }

.drawer-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3) var(--space-4) var(--space-4);
}
.drawer-body input[disabled],
.drawer-body textarea[disabled],
.drawer-body select[disabled] {
  background: var(--bg-alt);
  cursor: not-allowed;
  opacity: 0.7;
}

.drawer-section {
  border-top: 1px solid var(--line);
  padding-top: var(--space-6);
  margin-top: var(--space-6);
}
.drawer-section:first-of-type {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}
.drawer-section-title {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 var(--space-4);
  font-weight: 600;
}

/* Stacked label-input pairs in a CSS grid. Generous gap between fields
   so labels and inputs breathe; extra gap inside each label so the eyebrow
   sits visibly above its input. */
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  column-gap: var(--space-4);
}
.form-grid-2 { grid-template-columns: 1fr 1fr; }
.form-grid-span-2 { grid-column: 1 / -1; }
.form-grid label {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--ink-muted);
  text-transform: uppercase;
  font-weight: 500;
}
.form-grid input[type="text"],
.form-grid input[type="password"],
.form-grid select,
.form-grid textarea {
  border: 1px solid var(--line);
  background: var(--bg);
  padding: 0.75rem 0.9rem;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--ink);
  letter-spacing: normal;
  text-transform: none;
  outline: 0;
  transition: border-color var(--t-fast), box-shadow var(--t-med);
}
.form-grid input:hover,
.form-grid select:hover,
.form-grid textarea:hover { border-color: var(--ink-muted); }
.form-grid input:focus,
.form-grid textarea:focus,
.form-grid select:focus { box-shadow: 0 0 0 3px rgba(10,10,10,0.08); }

/* Sticky footer so the save action is always reachable */
.drawer-footer {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--line);
  background: var(--bg);
  position: sticky;
  bottom: 0;
}

@media (max-width: 600px) {
  .content-drawer { width: 100%; border-left: 0; }
  .admin-toolbar-grid { grid-template-columns: 1fr; }
  .filter-actions { justify-content: flex-start; }
}

/* --- Drawer tabs --- */

.drawer-tabs {
  display: flex;
  gap: 0;
  padding: 0 var(--space-4);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.drawer-tab {
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  font: inherit;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  padding: 0.75rem 1rem;
  cursor: pointer;
  color: var(--ink-muted);
  margin-bottom: -1px;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.drawer-tab:hover { color: var(--ink); }
.drawer-tab.active {
  color: var(--ink);
  border-bottom-color: var(--ink);
  font-weight: 600;
}
.tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 0.65rem;
  letter-spacing: 0;
  background: var(--ink);
  color: var(--bg);
  border-radius: 18px;
}

.drawer-tab-pane { animation: fadeIn 180ms ease; }

/* --- Inline toggle (used in prompt sections) --- */

.prompt-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.prompt-section-head .drawer-section-title { margin: 0; }

.toggle {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.5rem !important;
  cursor: pointer;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: var(--ink) !important;
  font-size: 0.8125rem !important;
}
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-track {
  width: 34px;
  height: 18px;
  background: var(--line);
  border-radius: 999px;
  position: relative;
  transition: background var(--t-fast);
  flex-shrink: 0;
}
.toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: var(--bg);
  border-radius: 50%;
  transition: transform var(--t-fast);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.toggle input:checked + .toggle-track {
  background: var(--ink);
}
.toggle input:checked + .toggle-track .toggle-thumb {
  transform: translateX(16px);
}
.toggle input:disabled + .toggle-track { opacity: 0.4; cursor: not-allowed; }
.toggle-label { white-space: nowrap; }

/* --- Prompts view --- */

.prompts-table .col-prompt-snippet {
  font-size: 0.875rem;
  color: var(--ink-soft);
  max-width: 32ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prompts-table tr { cursor: pointer; }
#admin-view-prompts { max-width: none; margin: 0; }

/* --- Audit log view --- */

.audit-table th { white-space: nowrap; }
.audit-table td { vertical-align: middle; }
.audit-table .col-time { white-space: nowrap; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.audit-table .col-kind { white-space: nowrap; }
.audit-table .col-latency { font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.audit-table tr.has-error td { background: #fff4f5; }

.kind-pill {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  background: var(--bg);
  white-space: nowrap;
}
.kind-pill.kind-chat       { border-color: var(--ink); }
.kind-pill.kind-render     { background: var(--bg-alt); }
.kind-pill.kind-render-skipped { color: var(--ink-muted); border-style: dashed; }

.audit-json {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.55;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  padding: 0.875rem 1rem;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: none;
}

.admin-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  margin-top: var(--space-3);
  font-size: 0.875rem;
  color: var(--ink-muted);
}
.admin-pagination button {
  border: 1px solid var(--ink);
  background: var(--bg);
  font: inherit;
  font-size: 0.8125rem;
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.admin-pagination button:hover { background: var(--ink); color: var(--bg); }
.admin-pagination button[disabled] { opacity: 0.4; cursor: not-allowed; }

/* Make audit content view full-width like CMS */
#admin-view-audit {
  max-width: none;
  margin: 0;
}

/* When the audit drawer is open, dim only the meta column on narrow widths */
body.audit-drawer-open #admin-view-audit .col-latency { display: none; }
body.audit-drawer-open #admin-view-audit .admin-toolbar-grid { grid-template-columns: 1fr; }

/* --- Responsive: collapse sidebar to top bar on narrow viewports --- */

@media (max-width: 820px) {
  .admin-shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .admin-sidebar {
    flex-direction: row;
    overflow-x: auto;
    padding: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .admin-brand,
  .admin-sidebar-footer {
    border: 0;
    padding: 0.875rem var(--space-3);
    white-space: nowrap;
  }
  .admin-nav { flex-direction: row; padding: 0; }
  .admin-nav-link { border-left: 0; border-bottom: 2px solid transparent; }
  .admin-nav-link.active { border-left: 0; border-bottom-color: var(--ink); }
  .admin-nav-hint { display: none; }
  .admin-view { padding: var(--space-4); }
}

/* ============================================================
   MOBILE — public-site optimisation (≤ 720px viewports)
   Comprehensive tuning so the SFOUR homepage is usable on phones.
   Excludes the workspace + admin shells (those have their own
   responsive handling above).
   ============================================================ */

@media (max-width: 720px) {
  /* Container padding reduced; content lives closer to the edge */
  .container { padding: 0 var(--space-3); }

  /* Header — tighter, brand stays prominent */
  .header-inner {
    padding: 12px var(--space-3);
  }
  .brand-logo { height: 28px; }
  .brand-meta { font-size: 0.7rem; }

  /* Hero — scale down, keep the chat input thumb-friendly */
  .hero {
    padding: var(--space-6) 0 var(--space-5);
  }
  .hero-headline {
    font-size: clamp(1.75rem, 8vw, 2.25rem);
    line-height: 1.15;
  }
  .hero-sub {
    font-size: 0.95rem;
    line-height: 1.5;
  }
  /* agent-prompt mobile layout is fully defined earlier (line ~1809):
     a single grid `auto auto 1fr` with input on row 1 and
     [mic|tts|submit] sharing row 2. All previously-duplicated rules
     here have been removed to keep the cascade clean. */
  .agent-meta { font-size: 0.78rem; }

  /* Sections — tighter rhythm */
  .section { padding: var(--space-5) 0; }
  .section-title,
  .tile-v2--wide-det .tile-v2__title {
    font-size: clamp(1.4rem, 6vw, 1.75rem);
    line-height: 1.2;
  }
  .section-lead { font-size: 0.95rem; }
  .eyebrow,
  .meta-label { font-size: 9.5px; letter-spacing: 0.10em; }

  /* Tile grids → single column, denser */
  .cluster-grid,
  .usecase-grid,
  .refstory-grid,
  .insight-grid,
  .event-grid,
  .member-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  .infobite-strip {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .tile {
    padding: var(--space-3);
  }
  .tile.tile--3d:hover {
    transform: none;          /* hover lift is awkward on touch */
  }
  .tile .tile-title {
    font-size: 1rem;
    line-height: 1.3;
  }
  .tile p.tile-summary {
    font-size: 0.9rem;
    line-height: 1.45;
  }
  .tile .tile-tags { gap: 4px; }
  .tile-tag { font-size: 0.7rem; padding: 1px 7px; }
  .tile.tile--min { padding: 12px var(--space-3); }
  .tile.tile--partner.tile--min {
    padding: 12px 14px;
    gap: 8px;
  }

  /* Partner-Strip: einspaltig auf Mobile */
  .partner-strip {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  /* Tag-Filter — chips break naturally; reduce chip padding */
  .tag-chip {
    font-size: 0.78rem;
    padding: 5px 10px;
  }

  /* Detail-Page tuning */
  .detail-page .container { max-width: 100%; }
  .detail-h1 {
    font-size: clamp(1.4rem, 7vw, 1.85rem);
    line-height: 1.2;
  }
  .detail-breadcrumb {
    font-size: 0.72rem;
    gap: 6px;
  }
  .detail-bc-title { max-width: 100%; }
  .detail-meta { font-size: 0.78rem; }

  .detail-body { font-size: 0.95rem; }
  .detail-body h2 { font-size: 1.1rem; margin-top: var(--space-3); }
  .detail-body h3 { font-size: 0.95rem; }
  .detail-body .md-pre {
    font-size: 0.78rem;
    padding: 10px;
  }
  /* Tables on mobile: scroll horizontally with a hint */
  .detail-body .md-table {
    font-size: 0.85rem;
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  .detail-body .md-table th,
  .detail-body .md-table td {
    padding: 6px 8px;
    white-space: normal;       /* let cells wrap once visible */
  }

  /* Cross-links area — let the tile grid breathe */
  .relations-grid {
    grid-template-columns: 1fr;
  }

  /* AI lead/footer slots — less indent on mobile */
  .ai-slot {
    padding-left: var(--space-2);
    font-size: 0.9rem;
  }

  /* Auth section in nav — handled by .nav-* mobile rules above */

  /* Footer — handled by .footer-inner grid + 720px breakpoint above */
  .site-footer { padding: var(--space-4) 0; }
}

/* Tighter breakpoint for very narrow phones (≤ 380px iPhone SE etc.) */
@media (max-width: 380px) {
  .hero-headline { font-size: 1.65rem; }
  .section-title,
  .tile-v2--wide-det .tile-v2__title { font-size: 1.3rem; }
  .container { padding: 0 14px; }
  .tile { padding: 14px; }
  .nav-toggle { width: 38px; height: 38px; }
}

/* =============================================================================
   IMAGES IN TILES & DETAIL HERO
   Per-display-level images: thumb (tile_min) · cover (tile_max) · hero (content).
   No cascade — a missing slot stays missing.
   ========================================================================== */

/* tile_min — small square thumbnail on the left */
/* Min-tile A4 portrait — banner-style image at top (less tall, 16:9),
   body below with eyebrow + title + summary. Card has ROUNDED TOP
   corners only (square bottom) for a "page-card" rhythm — the tile
   reads like the lead of a magazine column rather than a floating box.
   Specificity bumped (3 classes) to beat the legacy
   .tile.tile--min.tile--flat rule that sets border-radius: var(--r-mini). */
.tile.tile--min,
.tile.tile--min.tile--flat,
.tile.tile--min.tile--3d {
  border-radius: var(--r-card);
  padding: 0;
  overflow: hidden;
}
.tile.tile--min.tile--with-img {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: stretch;
}
.tile.tile--min .tile-min-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 14px 16px 16px;
}
/* Dynamic-fit Oneliner — füllt den Platz zwischen Title und Tags.
   JS-`_fitTextWithEllipsis` setzt den Cut am visuellen Overflow.
   Tags bleiben am unteren Rand pinned (`margin-top: auto` aus
   tile-tags-Regel).
   Hart-Cap via webkit-line-clamp (+ max-height-Fallback) damit Tiles
   ohne fixe Höhe nicht ungebremst wachsen, wenn der Body sehr lang
   ist und _fitTextWithEllipsis (noch) nicht gelaufen ist oder die
   Container-Höhe nicht klein genug bemisst. */
.tile.tile--min.tile--use_case p.tile-oneliner,
.tile.tile--min.tile--refstory p.tile-oneliner,
.tile.tile--min.tile--infobite p.tile-oneliner,
.tile.tile--min.tile--insight  p.tile-oneliner {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 8;
  line-clamp: 8;
  -webkit-box-orient: vertical;
  /* Hard-cap: 8 Zeilen × line-height 1.45 — verhindert Über-Wachstum
     wenn flex-Container keine feste Höhe hat. _fitTextWithEllipsis
     darf gerne noch kürzen, das ist additiv. */
  max-height: calc(8 * 1.45em);
}
.tile-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 0;
  background: var(--bg-soft, #f5f5f4);
  border-bottom: 1px solid var(--hairline-light);
}
/* No-image min-tile keeps body padding (no thumb element above it) */
.tile.tile--min:not(.tile--with-img) {
  padding: 14px 16px 16px;
}
.tile-thumb-img,
.tile-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tile-min-body { display: block; min-width: 0; }
/* (Vormalige .tile-min-cover-Regeln entfernt — Insights laufen jetzt
   ausschliesslich über die unified V2 Insight-Card. Dieser V1-Pfad
   ist für Insights nicht mehr erreichbar.) */
.tile-card-body { display: block; min-width: 0; }

/* tile_max --3d — cover image on top, headline below.
   Cover is intentionally flat (21:9) so the image stays a calm visual
   anchor rather than overpowering the text body. The hover treatment is
   the high-touch moment: a multi-layer transform on the whole card paired
   with a parallax-style scale + tonal lift on the image itself. Every
   property uses the same cubic-bezier so they swing together. */
.tile.tile--3d.tile--with-img {
  padding: 0;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  /* Single shared easing keeps every layer in sync */
  transition:
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 420ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 280ms ease;
  will-change: transform;
}
.tile.tile--3d.tile--with-img .tile-cover {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;       /* flatter than 16:9 — lets text breathe */
  overflow: hidden;
  background: var(--bg-soft, #f5f5f4);
  border-bottom: 1px solid var(--line);
  position: relative;
}
/* A subtle dark gradient at the top edge gives the headline below a
   visual anchor and adds depth at rest. It softens on hover so the image
   "wakes up". */
.tile.tile--3d.tile--with-img .tile-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.18) 0%,
    rgba(0,0,0,0.00) 35%,
    rgba(0,0,0,0.00) 70%,
    rgba(0,0,0,0.10) 100%);
  pointer-events: none;
  transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 1;
}
.tile.tile--3d.tile--with-img .tile-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform-origin: 50% 55%;
  transition:
    transform 620ms cubic-bezier(0.22, 1, 0.36, 1),
    filter   420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.tile.tile--3d.tile--with-img .tile-card-body {
  padding: var(--space-3) var(--space-3) var(--space-3);
  /* Fill the remaining card height so tags/meta can sit at the bottom
     instead of clustering near the top with empty space below. */
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  /* Eyebrow / headline slide ever-so-slightly with the lift */
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.tile.tile--3d.tile--with-img .tile-eyebrow,
.tile.tile--3d.tile--with-img .tile-title {
  transition: color 280ms ease, letter-spacing 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hover: the high-touch moment.
   • Card lifts 8px with a barely-perceptible scale (feels weighted, not bouncy).
   • Layered shadow: a tight inner-ish ring (4px) for definition, a wide
     diffuse drop (40px) for the floating feeling, plus a subtle hue-tinted
     undershadow that suggests the page glow.
   • Image parallax-scales to 1.06 + brightness/saturation lift.
   • Top-of-image gradient fades — the image seems to "catch the light".
   • Title nudges down 1px to balance the lift. */
.tile.tile--3d.tile--with-img:hover {
  transform: translateY(-8px) scale(1.003);
  border-color: var(--ink);
  box-shadow:
    0  2px  6px -2px rgba(10, 10, 10, 0.10),
    0 16px 32px -12px rgba(10, 10, 10, 0.18),
    0 32px 64px -24px rgba(10, 10, 10, 0.22);
}
.tile.tile--3d.tile--with-img:hover .tile-cover-img {
  transform: scale(1.06);
  filter: brightness(1.04) saturate(1.08);
}
.tile.tile--3d.tile--with-img:hover .tile-cover::after {
  opacity: 0.4;
}
.tile.tile--3d.tile--with-img:hover .tile-card-body {
  transform: translateY(1px);
}
.tile.tile--3d.tile--with-img:hover .tile-title {
  letter-spacing: -0.005em;
}

/* Active state — quick subtle dip so the card "responds" to the click */
.tile.tile--3d.tile--with-img:active {
  transform: translateY(-2px) scale(0.998);
  transition: transform 80ms ease-out, box-shadow 80ms ease-out;
}

/* Reduced-motion: keep the visual feedback but drop the heavy animations */
@media (prefers-reduced-motion: reduce) {
  .tile.tile--3d.tile--with-img,
  .tile.tile--3d.tile--with-img .tile-cover-img,
  .tile.tile--3d.tile--with-img .tile-cover::after,
  .tile.tile--3d.tile--with-img .tile-card-body,
  .tile.tile--3d.tile--with-img .tile-title {
    transition: none;
  }
  .tile.tile--3d.tile--with-img:hover {
    transform: none;
  }
  .tile.tile--3d.tile--with-img:hover .tile-cover-img {
    transform: none;
    filter: brightness(1.02);
  }
}

/* ============================================================
   MINI-HERO — der Agent als Spine der Seite. Eingestreute
   Chat-Eingaben zwischen Content-Sections. Bild-Hintergrund mit
   dunklem Overlay; Antworten erscheinen als Thread direkt unter
   dem Mini-Hero (nicht ans Seitenende).
   ============================================================ */
/* ============================================================
   MiniHero (sectioned engagement card) — v2 design alignment.
   Same compact 21px-radius card shape as the new DualTrack/Single
   mini-heros on cluster routes. No photo background, just paper or
   ink-deep gradient + glass surface. The .mini-hero-card wraps the
   eyebrow / headline / body / form so per-instance forms (with
   their own thread-for handler) stay isolated from the page hero.
   ============================================================ */
/* Default mini-hero is paper-on-ink-deep (dark) — same voice as the
   maxi DualTrack Track-A side. The opt-in `--light` modifier is
   reserved for sections that explicitly need a cream background
   (e.g. process-track-only mini-heros). */
.mini-hero {
  position: relative;
  background: var(--paper);
  padding: 24px 0 16px;
  isolation: isolate;
}
.mini-hero--dark {
  background: var(--ink-deep);
}
.mini-hero-container {
  padding-left: 32px;
  padding-right: 32px;
}
.mini-hero-card {
  position: relative;
  border-radius: var(--radius-md);
  padding: 28px 36px 24px;
  background: linear-gradient(180deg, #161616 0%, #0a0a0a 100%);
  border: 1px solid var(--hairline-dark);
  box-shadow:
    0 24px 48px -24px rgba(0, 0, 0, 0.45),
    0 1px 2px rgba(0, 0, 0, 0.20);
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--paper);
}
/* Dark explicit modifier — still maps to the same dark gradient (kept
   for backwards-compatibility of `appearance: "dark"` in YAML). */
.mini-hero-card--dark {
  background: linear-gradient(180deg, #161616 0%, #0a0a0a 100%);
  color: var(--paper);
  border-color: var(--hairline-dark);
}
/* Light opt-in — paper background, used for sections that want the
   process-warmth (Track B language) regardless of cluster. */
.mini-hero-card--light {
  background: var(--paper);
  border-color: var(--hairline-light);
  box-shadow:
    0 12px 32px -16px rgba(0, 0, 0, 0.18),
    0 1px 2px rgba(0, 0, 0, 0.04);
  color: var(--ink-deep);
}
.mini-hero-eyebrow {
  margin: 0;
  font-family: var(--font-meta);
  font-size: var(--type-mono-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--muted-dark);
}
.mini-hero-card--light .mini-hero-eyebrow {
  color: var(--muted-light);
}
.mini-hero-headline {
  margin: 0;
  font-family: var(--font-prose);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--paper);
  max-width: 36ch;
}
.mini-hero-card--light .mini-hero-headline {
  color: var(--ink-deep);
}
.mini-hero-headline-muted {
  display: inline;
  font-style: italic;
  font-weight: 400;
  color: var(--muted-dark);
}
.mini-hero-card--light .mini-hero-headline-muted {
  color: var(--muted-light);
}
.mini-hero-body {
  margin: 0;
  font-family: var(--font-prose);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--body-dark);
  max-width: 64ch;
}
.mini-hero-card--light .mini-hero-body {
  color: var(--body-light);
}
/* AI-slot — agent-greeting if a render is fired for this slot */
.ai-slot.ai-mini-hero-greet {
  margin: 0;
}
.ai-slot.ai-mini-hero-greet:empty {
  display: none;
}

/* The form composition uses the .agent-prompt.agent-prompt--mini
   styles (defined elsewhere) for the shared pill look. Keep
   .mini-hero-form/.mini-hero-input/.mini-hero-submit as binding
   anchors but neutralise their legacy styles by inheriting via
   the agent-prompt cascade. The classes still flow through to the
   binders (bindMiniHeroForms, sendMiniHero, …). */
.mini-hero-form {
  /* Visuals come from .agent-prompt--mini (the form carries both
     classes). Only spacing here. */
  margin-top: 4px;
}
.mini-hero-input { /* inherits from .agent-prompt--mini input */ }
.mini-hero-submit {
  /* visual styling now lives on .agent-prompt--mini button#agent-submit;
     use a generic .mini-hero-submit fallback for any cards that opt out */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  cursor: pointer;
}
.mini-hero-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
@keyframes mh-mic-pulse {
  0%,100% { opacity: 0.4; }
  50%     { opacity: 1.0; }
}
/* Fallback für legacy mini-hero-form ohne .agent-prompt--mini-Klasse.
   Verwendet dieselbe "Buttons außerhalb des Inputs"-Architektur:
   transparent Container, Input + Buttons als separate Pills. */
.mini-hero-form:not(.agent-prompt--mini) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  overflow: visible;
  max-width: 720px;
}

/* Thread — answers stack here directly below the form */
.mini-hero-thread {
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.mini-hero-thread:empty { display: none; }

.mini-hero-answer {
  background: rgba(255, 255, 255, 0.95);
  color: var(--ink);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
  animation: mh-answer-in 280ms ease-out;
}
@keyframes mh-answer-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mini-hero-answer-question {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--line);
  font-size: 0.825rem;
  color: var(--ink-muted);
}
.mh-q-label {
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.7rem;
}
.mh-q-text {
  flex: 1;
  font-style: italic;
}
.mh-answer-close {
  background: transparent;
  border: 0;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  transition: background var(--t-fast), color var(--t-fast);
}
.mh-answer-close:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--ink);
}
.mini-hero-answer-body {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.mh-answer-text {
  margin: 0 0 var(--space-3);
}
.mini-hero-answer-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.mini-hero-answer-tiles .tile {
  font-size: 0.85rem;
}

/* Member-Sektion in der Chat-Antwort — stapelt dp-member-card-
   Instanzen untereinander (gleiche visuelle Sprache wie auf Detail-
   Pages). Spacing leicht kompakter als auf dem Detail-Page-Block,
   damit der Chat-Thread nicht ausartet. */
.mini-hero-answer-members {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.mini-hero-answer-members .dp-member-card {
  padding: 16px 20px;
  grid-template-columns: 56px 1fr auto;
  gap: 18px;
}
.mini-hero-answer-members .dp-member-avatar {
  width: 56px; height: 56px;
  font-size: 16px;
}
.mini-hero-answer-members .dp-member-name { font-size: 17px; }
.mini-hero-answer-members .dp-member-role { font-size: 13px; }
.mini-hero-answer-members .dp-member-bio  { font-size: 13px; }

@media (max-width: 720px) {
  .mini-hero { padding: var(--space-5) 0 var(--space-4); }
  /* Mini-Hero-Form Mobile — die globale "Buttons außerhalb"-Architektur
     gilt weiter (flex-wrap + gap + transparenter Container). Wenn der
     Submit nicht mehr neben das Input passt, wrappt er automatisch.
     16px Input-Font-Size verhindert iOS-Auto-Zoom beim Focus. */
  .mini-hero-input {
    font-size: 16px;
  }
  .mini-hero-answer-tiles { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
  /* Icon-only on very small screens — labels disappear */
  .mini-hero-form .mini-hero-mic .agent-mic-text,
  .mini-hero-form .mini-hero-tts .agent-mic-text { display: none; }
}

/* ============================================================
   ADMIN-VIEW · INQUIRIES — list of contact-form submissions.
   ============================================================ */
.inquiries-toolbar {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.inquiries-toolbar select {
  padding: 6px 10px;
  font: inherit;
  font-size: 0.875rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
}
.inquiries-count {
  font-size: 0.825rem;
  color: var(--ink-muted);
  margin-left: auto;
}
.inquiries-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.inquiry-card {
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--bg);
  overflow: hidden;
}
.inquiry-card[data-status="new"] {
  border-left: 3px solid #c0392b;
}
.inquiry-card[data-status="seen"] {
  border-left: 3px solid #d4a017;
}
.inquiry-card[data-status="replied"] {
  border-left: 3px solid #2f7d4a;
}
.inquiry-card[data-status="closed"] {
  border-left: 3px solid var(--ink-muted);
  opacity: 0.7;
}
.inquiry-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  cursor: pointer;
  transition: background var(--t-fast);
  flex-wrap: wrap;
  gap: 8px;
}
.inquiry-card-head:hover {
  background: var(--surface-soft, rgba(0,0,0,0.03));
}
.inquiry-head-main {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  flex-wrap: wrap;
}
.inquiry-status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  font-weight: 600;
  text-transform: uppercase;
  background: rgba(0,0,0,0.06);
  color: var(--ink);
}
.inquiry-status-badge[data-status="new"]     { background: rgba(192,57,43,0.15); color: #6e1f15; }
.inquiry-status-badge[data-status="seen"]    { background: rgba(212,160,23,0.15); color: #6a4c00; }
.inquiry-status-badge[data-status="replied"] { background: rgba(47,125,74,0.15); color: #1a4824; }
.inquiry-status-badge[data-status="closed"]  { background: rgba(0,0,0,0.08); color: var(--ink-muted); }
.inquiry-cluster {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--ink-muted);
  font-weight: 600;
}
.inquiry-name {
  font-weight: 500;
  color: var(--ink);
}
.inquiry-company {
  color: var(--ink-soft);
  font-size: 0.825rem;
}
.inquiry-head-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.78rem;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.inquiry-card-body {
  display: none;
  padding: 0 14px 14px;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
}
.inquiry-card--open .inquiry-card-body {
  display: block;
}
.inquiry-row {
  margin-top: 10px;
  color: var(--ink-soft);
}
.inquiry-row strong {
  color: var(--ink);
  font-weight: 500;
  margin-right: 4px;
}
.inquiry-row a {
  color: var(--ink);
  text-decoration: underline;
}
.inquiry-topic-id {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 0.75rem;
  color: var(--ink-muted);
  margin-left: 6px;
}
.inquiry-message {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--surface-soft, rgba(0,0,0,0.03));
  border-left: 3px solid var(--line);
  border-radius: 12px;
  white-space: pre-wrap;
  line-height: 1.5;
}
.inquiry-context {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.inquiry-ctx-tag {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(0,0,0,0.04);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.72rem;
  color: var(--ink-soft);
}
.inquiry-actions {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.inquiry-status-label {
  font-size: 0.825rem;
  display: flex;
  align-items: center;
  gap: 6px;
}
.inquiry-status-select {
  padding: 4px 8px;
  font: inherit;
  font-size: 0.825rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
}

/* ============================================================
   CONTACT FORM — replaces the static mailto button with a real
   form. Topic dropdown auto-fills from page-context; cluster +
   format pre-select based on observed personas / pain_signals.
   POST /api/contact persists to DB + best-effort SMTP send.
   ============================================================ */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-4);
  max-width: 720px;
}
.contact-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.contact-row--two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-4);
}
.contact-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.contact-label {
  font-family: var(--font-meta);
  font-size: var(--type-mono-eyebrow);
  letter-spacing: var(--ls-mono);
  font-weight: 500;
  text-transform: uppercase;
  color: var(--body-light);
}
.contact-field input[type="text"],
.contact-field input[type="email"],
.contact-field input[type="tel"],
.contact-field select,
.contact-field textarea,
.contact-topic-other {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-prose);
  font-size: 0.95rem;
  background: var(--paper);
  border: 1px solid var(--hairline-light);
  border-radius: var(--radius-sm);
  color: var(--ink-deep);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus,
.contact-topic-other:focus {
  outline: none;
  border-color: var(--ink-deep);
  box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.08);
}
.contact-field textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.55;
}
.contact-topic-other {
  margin-top: 8px;
}
.contact-fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}
.contact-fieldset .contact-label {
  display: block;
  margin-bottom: 8px;
}
.contact-radios {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
.contact-radio {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--hairline-light);
  border-radius: var(--radius);
  background: var(--paper);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.contact-radio:hover {
  border-color: var(--ink-deep);
}
.contact-radio:has(input:checked) {
  border-color: var(--ink-deep);
  background: rgba(10, 10, 10, 0.04);
}
.contact-radio input {
  margin-top: 4px;
  flex-shrink: 0;
}
.contact-radio-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.contact-radio-label {
  font-family: var(--font-prose);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-deep);
}
.contact-radio-hint {
  font-family: var(--font-prose);
  font-size: 0.78rem;
  color: var(--muted-light);
}

.contact-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.85rem;
  color: var(--ink-soft);
  line-height: 1.5;
  cursor: pointer;
}
.contact-consent input { margin-top: 3px; flex-shrink: 0; }
.contact-consent a { color: var(--ink); }

.contact-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}
.contact-fallback-link {
  font-size: 0.825rem;
  color: var(--ink-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.contact-fallback-link:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.contact-status {
  margin-top: var(--space-2);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-family: var(--font-prose);
  font-size: 0.9rem;
  line-height: 1.5;
}
.contact-status--success {
  background: rgba(47, 125, 74, 0.08);
  border: 1px solid rgba(47, 125, 74, 0.4);
  color: #1a4824;
}
.contact-status--error {
  background: rgba(192, 57, 43, 0.08);
  border: 1px solid rgba(192, 57, 43, 0.4);
  color: #6e1f15;
}

@media (max-width: 720px) {
  .contact-row--two,
  .contact-radios {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   CTA CARD — drei-stufiges call-to-action konzept.
   Detail-Page-Footer zeigt eine kontextbewusste CTA-Card direkt
   nach dem Body und vor dem Related-Grid. Stufe 0 = static,
   Stufe 1 = observed-driven variant, Stufe 2 = agent-rewritten
   (AI-slot). Visual: card mit Border + Spotlight-Akzent.
   ============================================================ */
.cta-card {
  position: relative;
  margin: var(--space-5) 0 var(--space-4);
  padding: var(--space-5) var(--space-5);
  background: var(--bg);
  border: 1px solid var(--ink);
  border-radius: 18px;
  box-shadow: 0 12px 32px -16px rgba(10, 10, 10, 0.18);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.cta-card::before {
  /* Subtle accent strip on the left */
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--ink);
  border-radius: 18px 0 0 18px;
}
.cta-card .ai-slot.ai-cta {
  /* AI-Slot is invisible until Phase 2 fills it */
  margin: 0;
}
.cta-card .ai-slot.ai-cta:empty {
  display: none;
}
.cta-eyebrow {
  margin: 0;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.cta-headline {
  margin: 4px 0 var(--space-2);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--ink);
}
.cta-body {
  margin: 0 0 var(--space-3);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 60ch;
}
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.cta-card-btn {
  /* Reuse the global .btn but with a slightly larger pad so it lands
     as the primary anchor of the card. */
  font-size: 0.95rem;
  padding: 12px 22px;
}
.cta-card-link {
  font-size: 0.875rem;
  color: var(--ink-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.cta-card-link:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

@media (max-width: 540px) {
  .cta-card { padding: var(--space-4); }
  .cta-headline { font-size: 1.2rem; }
}

/* ============================================================
   METHODOLOGY CARD — compact tile representation. Eyebrow + headline +
   intro + 6 phase pills + CTA → click expands full mermaid+phases.
   ============================================================ */
.methodology-card {
  margin: var(--space-3) 0;
}
.methodology-card-summary {
  padding: var(--space-4) var(--space-4) var(--space-3);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.methodology-card-intro {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.methodology-phases {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  counter-reset: phase;
}
.methodology-phase {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.825rem;
  letter-spacing: 0.01em;
  color: var(--ink);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.methodology-phase:hover {
  border-color: var(--ink);
  background: var(--surface-soft, rgba(0,0,0,0.03));
}
.methodology-card-cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--ink);
  color: var(--bg);
  border: 1px solid var(--ink);
  border-radius: 999px;
  font: inherit;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 120ms ease-out, color 120ms ease-out;
}
.methodology-card-cta:hover {
  background: var(--bg);
  color: var(--ink);
}
.methodology-card-cta::after {
  content: "▾";
  font-size: 0.7rem;
  margin-left: 2px;
  transition: transform 160ms ease-out;
}
.methodology-card[data-mc-state="expanded"] .methodology-card-cta::after {
  transform: rotate(180deg);
}
.methodology-card-detail {
  margin-top: var(--space-3);
  padding: var(--space-4);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 18px;
  animation: mc-fade-in 220ms ease-out;
}
@keyframes mc-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   CONTENT BLOCK — compact (collapsed) mode for long methodology /
   editorial sections. Default state on top-level routes; user can
   expand to see the full detail.
   ============================================================ */
.content-block--compact {
  position: relative;
}
.content-block--compact[data-cb-state="collapsed"] .content-block-body {
  max-height: 520px;
  overflow: hidden;
  /* The mermaid diagram is pretty tall; we want it visible but cut off
     the long ### phase descriptions below. 520px shows hero text +
     diagram + first 1-2 phase headers. */
}
.content-block--compact[data-cb-state="collapsed"] .content-block-body::after {
  /* Fade-out gradient at the bottom of the collapsed view */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 44px;
  height: 110px;
  background: linear-gradient(180deg, transparent 0%, var(--bg, #fff) 75%);
  pointer-events: none;
}
.content-block-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-3);
  padding: 8px 16px;
  background: var(--bg);
  border: 1px solid var(--ink);
  border-radius: 999px;
  font: inherit;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  cursor: pointer;
  transition: background 120ms ease-out, color 120ms ease-out;
}
.content-block-toggle:hover {
  background: var(--ink);
  color: var(--bg);
}
.content-block-toggle::after {
  content: "▾";
  font-size: 0.7rem;
  margin-left: 2px;
  transition: transform 160ms ease-out;
}
.content-block--compact[data-cb-state="expanded"] .content-block-toggle::after {
  transform: rotate(180deg);
}

/* ============================================================
   LOCATION MAP — Leaflet/OpenStreetMap section template.
   ============================================================ */
.location-map {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--space-4);
  margin: var(--space-4) 0 var(--space-3);
  align-items: stretch;
}
.location-map-canvas {
  height: 460px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 15px;
  overflow: hidden;
  background: #f5f5f4;
}
.location-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-height: 460px;
  overflow-y: auto;
  padding-right: 4px;
}
.location-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 15px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: border-color var(--t-fast), transform var(--t-fast),
              box-shadow var(--t-fast);
}
.location-card:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px -8px rgba(10, 10, 10, 0.18);
}
.location-card--active {
  border-color: var(--ink);
  background: var(--surface-soft, rgba(0, 0, 0, 0.03));
}
.location-card[data-primary="1"]::before {
  content: "Hauptsitz";
  display: inline-block;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 4px;
}
.loc-title {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}
.loc-line {
  margin: 0;
  font-size: 0.875rem;
  color: var(--ink-soft);
  line-height: 1.45;
}
.loc-country {
  color: var(--ink-muted);
  font-size: 0.825rem;
}
.loc-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em var(--space-3);
  margin-top: var(--space-2);
  font-size: 0.825rem;
}
.loc-contact a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast);
}
.loc-contact a:hover { border-bottom-color: var(--ink); }
.loc-hours {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
  color: var(--ink-muted);
  line-height: 1.5;
}
/* Leaflet popup: align with our typography */
.leaflet-popup-content-wrapper {
  border-radius: 15px;
  font-family: inherit;
}
.leaflet-popup-content {
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 12px 14px;
}
.leaflet-popup-content a {
  color: var(--ink);
  text-decoration: underline;
}
/* Routen-Button im Popup — etwas hervorgehoben, eigener Block */
.loc-popup-route {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 10px;
  border: 1px solid var(--ink, #0a0a0a);
  border-radius: 999px;
  text-decoration: none !important;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink, #0a0a0a) !important;
  background: var(--bg, #fff);
  transition: background 120ms ease-out, color 120ms ease-out;
}
.loc-popup-route:hover {
  background: var(--ink, #0a0a0a);
  color: var(--bg, #fff) !important;
}

/* Cluster-coloured DivIcon markers — pure CSS, no image assets.
   Stem (pin) + dot. Each cluster has a distinct tone. */
.loc-marker {
  position: relative;
  display: block;
}
.loc-marker .loc-marker-dot {
  position: absolute;
  left: 50%;
  top: 0;
  width: 22px;
  height: 22px;
  margin-left: -11px;
  border-radius: 50%;
  border: 3px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  background: var(--ink);
}
.loc-marker .loc-marker-pin {
  position: absolute;
  left: 50%;
  top: 18px;
  width: 0;
  height: 0;
  margin-left: -6px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 14px solid #ffffff;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}
.loc-marker .loc-marker-pin::before {
  content: "";
  position: absolute;
  left: -4px;
  top: -14px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 10px solid var(--ink);
}
.loc-marker--sap     .loc-marker-dot { background: var(--tone-sap, #2a4a8a); }
.loc-marker--sap     .loc-marker-pin::before { border-top-color: var(--tone-sap, #2a4a8a); }
.loc-marker--btp     .loc-marker-dot { background: var(--tone-btp, #6a3d8a); }
.loc-marker--btp     .loc-marker-pin::before { border-top-color: var(--tone-btp, #6a3d8a); }
.loc-marker--ai      .loc-marker-dot { background: var(--tone-ai, #2f7d4a); }
.loc-marker--ai      .loc-marker-pin::before { border-top-color: var(--tone-ai, #2f7d4a); }
.loc-marker--ops     .loc-marker-dot { background: var(--tone-ops, #8a5a2a); }
.loc-marker--ops     .loc-marker-pin::before { border-top-color: var(--tone-ops, #8a5a2a); }
/* Hauptsitz / primary — extra-Ring um den Dot, damit man ihn sofort sieht */
.loc-marker--primary .loc-marker-dot {
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.6),
              0 2px 8px rgba(0, 0, 0, 0.4);
}

@media (max-width: 720px) {
  .location-map {
    grid-template-columns: 1fr;
  }
  .location-list {
    max-height: none;
    overflow-y: visible;
  }
  .location-map-canvas {
    height: 320px;
  }
}

/* ============================================================
   MERMAID DIAGRAMS — rendered from ```mermaid code blocks.
   The container holds either a fallback <pre class="mermaid-fallback">
   while the library is loading, or the rendered <svg> wrapped in
   .mermaid-svg once mermaid.render() succeeds.
   ============================================================ */
.mermaid-diagram {
  position: relative;
  margin: var(--space-4) 0;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--bg);
  overflow-x: auto;
}
.mermaid-zoom-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 140ms ease-out, color 140ms ease-out, border-color 140ms ease-out;
}
.mermaid-diagram:hover .mermaid-zoom-btn,
.mermaid-zoom-btn:focus-visible {
  opacity: 1;
}
.mermaid-zoom-btn:hover {
  color: var(--ink);
  border-color: var(--ink);
}
.mermaid-zoom-btn svg {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
}

.mermaid-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.62);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: mmd-modal-in 160ms ease-out;
}
@keyframes mmd-modal-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.mermaid-modal-content {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 56px 18px 18px;
  width: min(96vw, 1400px);
  height: min(92vh, 1000px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.mermaid-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
}
.mermaid-modal-close:hover { border-color: var(--ink); }
.mermaid-modal-toolbar {
  position: absolute;
  top: 14px;
  left: 18px;
  display: inline-flex;
  gap: 6px;
}
.mermaid-modal-zbtn {
  min-width: 32px;
  height: 30px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink-muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.78rem;
}
.mermaid-modal-zbtn:hover {
  color: var(--ink);
  border-color: var(--ink);
}
.mermaid-modal-zfit {
  font-variant-numeric: tabular-nums;
  min-width: 54px;
}
.mermaid-modal-stage {
  flex: 1 1 auto;
  overflow: auto;
  border-radius: 12px;
  display: flex;
  justify-content: safe center;
  align-items: safe center;
}
.mermaid-modal-svg {
  transform-origin: top left;
  flex: 0 0 auto;
  padding: 12px;
  margin: auto;
}
.mermaid-modal-svg svg {
  max-width: none !important;
  width: auto !important;
  height: auto !important;
  display: block;
}
body.mermaid-modal-open { overflow: hidden; }
.mermaid-diagram .mermaid-fallback {
  /* Pre-render fallback — keeps the source visible during the brief
     async window where the library is still loading. */
  margin: 0;
  background: transparent;
  border: 0;
  padding: 0;
  font-size: 0.825rem;
  color: var(--ink-muted);
  opacity: 0.6;
}
.mermaid-diagram[data-mermaid-error] .mermaid-fallback {
  /* If render failed, show source at full opacity with a thin red bar */
  opacity: 1;
  border-left: 2px solid #c0392b;
  padding-left: var(--space-2);
}
.mermaid-svg {
  display: flex;
  justify-content: center;
}
.mermaid-svg svg {
  max-width: 100%;
  height: auto;
}
/* Tighter type inside diagrams — Mermaid defaults are slightly bulky */
.mermaid-svg svg .nodeLabel,
.mermaid-svg svg .edgeLabel,
.mermaid-svg svg text {
  font-family: inherit !important;
  font-size: 0.875rem;
}

/* Nodes that have a tooltip — subtle hover affordance */
.mermaid-svg svg .mmd-has-tip {
  transition: filter 120ms ease-out;
}
.mermaid-svg svg .mmd-has-tip:hover {
  filter: brightness(0.96);
}
.mermaid-svg svg .mmd-has-tip:hover rect,
.mermaid-svg svg .mmd-has-tip:hover polygon,
.mermaid-svg svg .mmd-has-tip:hover circle,
.mermaid-svg svg .mmd-has-tip:hover path {
  /* Slight stroke thickening on hover signals interactivity */
  stroke-width: 1.6 !important;
}

/* ============================================================
   Mermaid-Tip — branded tooltip popover for click+tooltip nodes,
   with optional TTS playback button.
   ============================================================ */
.mmd-tip {
  position: absolute;
  z-index: 100;
  max-width: 320px;
  min-width: 200px;
  padding: 12px 14px 10px;
  background: var(--bg);
  border: 1px solid var(--ink);
  border-radius: 15px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18),
              0 2px 6px rgba(0, 0, 0, 0.06);
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 140ms ease-out, transform 140ms ease-out;
  pointer-events: none;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink);
}
.mmd-tip.mmd-tip--visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.mmd-tip-text {
  margin: 0 0 8px;
}
.mmd-tip-actions {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid var(--line);
  padding-top: 8px;
  margin-top: 4px;
}
.mmd-tip-speak {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px 4px 10px;
  font: inherit;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color 120ms ease-out, color 120ms ease-out,
              background 120ms ease-out;
}
.mmd-tip-speak:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: rgba(0, 0, 0, 0.03);
}
.mmd-tip-speak:active {
  transform: translateY(1px);
}
.mmd-tip-speak svg { flex-shrink: 0; }
.mmd-tip-speak--loading {
  pointer-events: none;
  opacity: 0.6;
}
.mmd-tip-speak--loading svg { animation: mmd-tip-pulse 1s ease-in-out infinite; }
@keyframes mmd-tip-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1.0; }
}

/* tile_max --flat with cover image — already styled above as a card
   with a top cover band (.tile-flat-cover) and the abbreviation overlay.
   The legacy "small thumb left of text" layout was retired when flat
   gained the cover-overlay treatment. */

/* Detail-Page hero banner — sits between breadcrumb and article */
.detail-hero {
  margin: 0 0 var(--space-4) 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 320px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--bg-soft, #f5f5f4);
  border: 1px solid var(--line);
}
.detail-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 820px) {
  .detail-hero { aspect-ratio: 16 / 9; max-height: 220px; margin-bottom: var(--space-3); }
  /* Compact the flat-tile cover band on smaller screens */
  .tile.tile--flat .tile-flat-cover { height: 110px; }
  .tile.tile--flat .tile-flat-abbrev { font-size: clamp(1.1rem, 4.5vw, 1.5rem); }
}

/* =============================================================================
   LAYOUT TAB (kind=section editor)
   ========================================================================== */

.routes-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-2);
}
.routes-grid label { font-size: 0.8rem; }
.routes-grid input[type="number"] {
  width: 100%;
  font-variant-numeric: tabular-nums;
}

.cw-yaml-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.825rem;
  color: var(--ink-soft);
}
.cw-yaml-editor {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  line-height: 1.5;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  color: var(--ink);
  resize: vertical;
  tab-size: 2;
  -moz-tab-size: 2;
  outline: 0;
}
.cw-yaml-editor:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(10,10,10,0.06);
}

@media (max-width: 820px) {
  .routes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =============================================================================
   IMAGE SLOTS IN CONTENT EDITOR
   Three slots side by side (thumb · cover · hero), each with preview + actions.
   ========================================================================== */

.image-slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.image-slot {
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: var(--space-2);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.image-slot-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.image-slot-label {
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--ink);
}
.image-slot-hint {
  font-size: 0.7rem;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}
.image-slot-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: var(--bg-soft, #f5f5f4);
  overflow: hidden;
  position: relative;
}
.image-slot-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.image-slot-empty {
  font-size: 0.8rem;
  color: var(--ink-muted);
  font-style: italic;
}
.image-slot-missing { color: var(--danger, #b91c1c); font-style: normal; }
.image-slot-name {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 4px 8px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 0.7rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.image-slot-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.btn-action.btn-quiet {
  color: var(--ink-muted);
  background: transparent;
}

/* Phase 4 — Bild-Position-Picker Modal */
.cw-img-pos-body {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 16px;
  align-items: start;
}
@media (max-width: 820px) {
  .cw-img-pos-body { grid-template-columns: 1fr; }
}
.cw-img-pos-stage {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cw-img-pos-frame {
  position: relative;
  width: 100%;
  background: var(--bg-alt, #f5f5f5);
  border: 1px solid var(--hairline, #ddd);
  border-radius: 6px;
  overflow: hidden;
  cursor: crosshair;
  user-select: none;
}
.cw-img-pos-frame[data-slot="thumb"]  { aspect-ratio: 1 / 1; }
.cw-img-pos-frame[data-slot="cover"]  { aspect-ratio: 16 / 9; }
.cw-img-pos-frame[data-slot="hero"]   { aspect-ratio: 21 / 9; }
.cw-img-pos-frame img {
  display: block;
  width: 100%;
  height: 100%;
  /* Inline-style overrides these defaults — Picker mutiert sie live */
  object-fit: cover;
  object-position: 50% 50%;
  transform: scale(1);
  transform-origin: 50% 50%;
  pointer-events: none;
}
.cw-img-pos-frame[data-padded="1"] img {
  /* When padding is set, leave a frame around the image */
  padding-inset: 0;
}
.cw-img-pos-crosshair {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35), 0 0 6px rgba(0, 0, 0, 0.45);
  transform: translate(-50%, -50%);
  pointer-events: none;
  left: 50%;
  top: 50%;
  transition: left 80ms ease, top 80ms ease;
}
.cw-img-pos-stage-hint { margin: 0; font-size: 0.78rem; }
.cw-img-pos-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cw-img-pos-controls label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--ink-muted, #666);
}
.cw-img-pos-controls input,
.cw-img-pos-controls select {
  font-size: 0.88rem;
  padding: 5px 7px;
  border: 1px solid var(--border, #ddd);
  border-radius: 4px;
  background: var(--bg, #fff);
  color: var(--ink, #111);
  font-family: inherit;
}
.cw-img-pos-controls input[type="range"] {
  padding: 0;
}
.cw-img-pos-val {
  font-variant-numeric: tabular-nums;
  color: var(--ink, #111);
  font-weight: 600;
  font-size: 0.85rem;
}

/* i18n: EN-Eingabeslot unter jedem übersetzbaren DE-Feld */
.i18n-field {
  margin-top: -8px;
  margin-bottom: 6px;
  padding: 6px 0 4px;
  border-top: 1px dashed var(--border, #d4d4d4);
}
.i18n-field > summary {
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--ink-muted, #666);
  user-select: none;
  list-style: revert;
  padding: 2px 0 4px;
  letter-spacing: 0.02em;
}
.i18n-field[open] > summary {
  color: var(--ink, #111);
  margin-bottom: 6px;
}
.i18n-field input,
.i18n-field textarea {
  width: 100%;
  font-size: 0.9rem;
  padding: 6px 8px;
  border: 1px solid var(--border, #ddd);
  border-radius: 4px;
  background: var(--bg, #fff);
  color: var(--ink, #111);
  font-family: inherit;
}
.i18n-field textarea {
  resize: vertical;
  min-height: 60px;
}

/* Per-slot render config (fit/position/scale/pad/bg/alt) */
.image-slot-config {
  margin-top: 8px;
  border-top: 1px solid var(--border, #e5e5e5);
  padding-top: 8px;
}
.image-slot-config > summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--ink-muted, #666);
  user-select: none;
  list-style: revert;
  padding: 2px 0;
}
.image-slot-config[open] > summary {
  color: var(--ink, #111);
  margin-bottom: 8px;
}
.image-slot-config-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 10px;
}
.image-slot-config-grid label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.75rem;
  color: var(--ink-muted, #666);
}
.image-slot-config-grid label.image-slot-config-wide {
  grid-column: 1 / -1;
}
.image-slot-config-grid input,
.image-slot-config-grid select {
  font-size: 0.85rem;
  padding: 4px 6px;
  border: 1px solid var(--border, #ddd);
  border-radius: 4px;
  background: var(--bg, #fff);
  color: var(--ink, #111);
}
.image-slot-config-grid input:focus,
.image-slot-config-grid select:focus {
  outline: 2px solid var(--accent, #5b8def);
  outline-offset: -1px;
}

@media (max-width: 820px) {
  .image-slots { grid-template-columns: 1fr; }
  .image-slot-config-grid { grid-template-columns: 1fr; }
}

/* =============================================================================
   MEDIATHEK VIEW + PICKER MODAL
   ========================================================================== */

.media-toolbar { gap: var(--space-3); }
.media-toolbar .filter-group { display: flex; flex-direction: column; gap: 4px; }
.media-toolbar .filter-group input[type="search"] {
  min-width: 240px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 0.875rem;
}
.media-toolbar .filter-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
  align-items: end;
}

.media-dropzone {
  position: relative;
  border: 1px dashed transparent;
  border-radius: 12px;
  transition: border-color 150ms ease, background-color 150ms ease;
}
.media-dropzone.is-dragging {
  border-color: var(--ink);
  background: rgba(10,10,10,0.03);
}
.media-dropzone-overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.85);
  z-index: 5;
  pointer-events: none;
  font-weight: 500;
  border-radius: 12px;
}
.media-dropzone.is-dragging .media-dropzone-overlay { display: flex; }

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.media-card {
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--bg);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
  display: flex;
  flex-direction: column;
}
.media-card:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px -8px rgba(10,10,10,0.18);
}
.media-card.is-selected {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px var(--ink);
}
.media-card-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--bg-soft, #f5f5f4);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.media-card-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.media-card-body {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.media-card-name {
  font-size: 0.85rem;
  font-weight: 500;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.media-card-meta {
  font-size: 0.72rem;
  color: var(--ink-muted);
  margin: 0;
}
.media-badge {
  display: inline-block;
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  margin-top: 4px;
  align-self: flex-start;
}
.media-badge-used {
  background: rgba(10,10,10,0.06);
  color: var(--ink-soft);
}
.media-badge-unused {
  background: rgba(180,140,40,0.12);
  color: #8a6d1a;
}
.media-badge-archived {
  background: rgba(120, 80, 200, 0.14);
  color: #6b3fbf;
  margin-right: 4px;
}
/* Image-Suggest-Bar — LLM-Bildvorschläge im Content-Editor */
.image-suggest-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 14px;
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(0, 215, 238, 0.06), rgba(217, 9, 254, 0.04));
  border: 1px dashed rgba(0, 215, 238, 0.30);
  border-radius: 8px;
}
.image-suggest-hint {
  font-size: 0.78rem;
  color: var(--ink-muted);
}
/* Modal für die LLM-Vorschläge — pro Slot eine Card mit Preview +
   Begründung + Akzeptieren-Button */
.suggest-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.suggest-modal {
  background: #fff;
  border-radius: 12px;
  max-width: 920px;
  width: 100%;
  max-height: 92vh;
  overflow: auto;
  padding: 24px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.25);
}
.suggest-modal h2 {
  margin: 0 0 6px;
  font-size: 1.3rem;
}
.suggest-modal-lead {
  margin: 0 0 20px;
  color: var(--ink-soft);
  font-size: 0.92rem;
}
.suggest-slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.suggest-slot-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.suggest-slot-card[data-empty="1"] {
  opacity: 0.6;
}
.suggest-slot-label {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.suggest-slot-preview {
  aspect-ratio: 16 / 9;
  background: var(--bg-soft);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.suggest-slot-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.suggest-slot-reasoning {
  font-size: 0.82rem;
  color: var(--ink-soft);
  flex: 1;
}
.suggest-slot-actions {
  display: flex;
  gap: 8px;
}
.suggest-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

/* Admin-Dropdown — kollabierbares Menü für seltene One-off-Aktionen
   (Migrationen). Native <details>-Element mit eigenem Styling. */
.admin-dropdown {
  position: relative;
  display: inline-block;
}
.admin-dropdown > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.admin-dropdown > summary::-webkit-details-marker { display: none; }
.admin-dropdown-body {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 280px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
  padding: 6px;
  z-index: 50;
}
.admin-dropdown-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  text-align: left;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
}
.admin-dropdown-item:hover {
  background: var(--bg-soft);
}
.admin-dropdown-item:disabled {
  opacity: 0.5;
  cursor: wait;
}
.admin-dropdown-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
}
.admin-dropdown-hint {
  font-size: 0.74rem;
  color: var(--ink-muted);
}
/* Aspect-Ratio-Badge — pro Ratio eine andere Farbe, damit der User
   beim Scrollen durch die Mediathek sofort Bildformate erkennt.
   16:9/21:9 = cyan (landscape), 1:1 = neutral, 3:4/9:16 = magenta
   (portrait). */
.media-badge-ratio {
  background: rgba(10,10,10,0.06);
  color: var(--ink-soft);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 600;
  margin-right: 4px;
}
.media-badge-ratio[data-ratio="16:9"],
.media-badge-ratio[data-ratio="21:9"],
.media-badge-ratio[data-ratio="3:2"] {
  background: rgba(0, 215, 238, 0.14);
  color: #086d7c;
}
.media-badge-ratio[data-ratio="1:1"],
.media-badge-ratio[data-ratio="5:4"],
.media-badge-ratio[data-ratio="4:5"] {
  background: rgba(120, 120, 120, 0.14);
  color: #555;
}
.media-badge-ratio[data-ratio="3:4"],
.media-badge-ratio[data-ratio="2:3"],
.media-badge-ratio[data-ratio="9:16"] {
  background: rgba(217, 9, 254, 0.12);
  color: #8a08a3;
}
.media-badge-ratio[data-ratio="4:3"] {
  background: rgba(255, 154, 29, 0.14);
  color: #8a5510;
}
/* Archivierte Cards leicht gedimmt + Diagonale Andeutung — User sieht
   sofort dass das Asset nicht im Default-View landen würde, kann aber
   trotzdem klicken (Drawer → Aktivieren). */
.media-card--archived .media-card-thumb img {
  opacity: 0.5;
  filter: grayscale(0.4);
}
.media-card--archived .media-card-name { opacity: 0.7; }
.media-loading {
  padding: var(--space-4);
  color: var(--ink-muted);
  text-align: center;
}
.media-empty { margin-top: var(--space-3); }

/* Asset detail drawer */
.media-drawer-preview {
  margin: 0 0 var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}
.media-drawer-preview img {
  max-width: 100%;
  max-height: 280px;
  display: block;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bg-soft, #f5f5f4);
}
.media-usage {
  margin: 0;
}
.media-usage-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.media-usage-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: var(--bg-soft, #f5f5f4);
  border-radius: 12px;
  font-size: 0.85rem;
}
.media-usage-slot {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.72rem;
  padding: 2px 6px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink-soft);
}
.media-usage-title { flex: 1 1 auto; min-width: 0; }
.media-usage-id {
  font-size: 0.72rem;
  color: var(--ink-muted);
}

/* Picker modal — wide variant */
.modal-card-wide {
  max-width: 920px;
  width: calc(100vw - 40px);
}
.picker-head { margin-bottom: var(--space-2); }
.picker-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: var(--space-2) 0 var(--space-3);
}
.picker-toolbar input[type="search"] {
  flex: 1 1 auto;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 0.875rem;
}
.picker-grid {
  max-height: 50vh;
  overflow-y: auto;
  margin-top: 0;
}
.picker-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: var(--space-3);
}

@media (max-width: 820px) {
  .media-toolbar { flex-direction: column; align-items: stretch; }
  .media-toolbar .filter-group input[type="search"] { min-width: 0; width: 100%; }
  .media-toolbar .filter-actions { margin-left: 0; flex-wrap: wrap; }
  .media-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .modal-card-wide { width: calc(100vw - 16px); }
  .picker-grid { max-height: 60vh; }
}


/* =============================================================================
   BLACK-MODE — section appearance="dark"
   A reserved spotlight: the agent (or editor) picks ONE section per page
   to render dark. The whole section flips, plus the tiles inside get a
   borderless, monochrome treatment so the contrast against the rest of
   the page reads as a focused beat, not a colour-clash.
   ========================================================================== */

:root {
  --dark-bg: #0a0a0a;
  --dark-bg-soft: #1a1a1a;          /* slightly lifted so tile borders read */
  --dark-line: #3a3a38;              /* line was too close to bg — bump */
  --dark-ink: #fafaf9;               /* near-white, AAA on bg */
  --dark-ink-soft: #ececea;          /* was #c2c2bf — body/eyebrow stays bright */
  --dark-ink-muted: #c8c8c4;         /* was #8a8a87 — meta/status now AA-strong */
  --dark-accent: #ffffff;            /* eyebrow / live-dot — full white pop */
}

/* Generic section (everything but Hero/Contact own templates) */
.section--dark {
  background: var(--dark-bg);
  color: var(--dark-ink);
  border-bottom: 1px solid var(--dark-line);
}
.section--dark .eyebrow,
.section--dark .section-lead {
  color: var(--dark-ink-soft);
}
.section--dark .section-title {
  color: var(--dark-ink);
}

/* Tiles inside a dark section — flip the surface, keep the form */
.section--dark .tile {
  background: var(--dark-bg-soft);
  border-color: var(--dark-line);
  color: var(--dark-ink);
}
.section--dark .tile:hover {
  border-color: var(--dark-ink);
}
.section--dark .tile .tile-eyebrow {
  color: var(--dark-ink-muted);
}
.section--dark .tile .tile-title {
  color: var(--dark-ink);
}
.section--dark .tile p.tile-summary,
.section--dark .tile p.tile-oneliner,
.section--dark .tile .tile-meta {
  color: var(--dark-ink-soft);
}
.section--dark .tile .tile-tag {
  background: rgba(255,255,255,0.06);
  border-color: var(--dark-line);
  color: var(--dark-ink-soft);
}
.section--dark .tile.tile--flat {
  background: transparent;
  border: 0;
  border-left: 2px solid transparent;
  color: var(--dark-ink);
}
.section--dark .tile.tile--flat:hover {
  border-left-color: var(--dark-ink);
}

/* 3D tile with cover — keep the parallax + lift, but tone it for dark */
.section--dark .tile.tile--3d.tile--with-img {
  border-color: var(--dark-line);
}
.section--dark .tile.tile--3d.tile--with-img:hover {
  border-color: var(--dark-ink);
  box-shadow:
    0  2px  6px -2px rgba(0, 0, 0, 0.40),
    0 16px 32px -12px rgba(0, 0, 0, 0.55),
    0 32px 64px -24px rgba(0, 0, 0, 0.70);
}
.section--dark .tile.tile--3d.tile--with-img .tile-cover {
  border-bottom-color: var(--dark-line);
}

/* Tag-chip filter inside a dark section */
.section--dark .tag-chip {
  background: rgba(255,255,255,0.04);
  border-color: var(--dark-line);
  color: var(--dark-ink-soft);
}
.section--dark .tag-chip.active {
  background: var(--dark-ink);
  color: var(--dark-bg);
  border-color: var(--dark-ink);
}

/* AI-slot text drops the page-grey to soft white */
.section--dark .ai-slot {
  color: var(--dark-ink-soft);
}

/* Cluster-Grid spotlight tweaks (Service-tiles in dark) */
.section--dark .cluster-card {
  background: var(--dark-bg-soft);
  border-color: var(--dark-line);
  color: var(--dark-ink);
}

/* Hero in dark mode */
.hero--dark {
  background: var(--dark-bg);
  color: var(--dark-ink);
  border-bottom: 1px solid var(--dark-line);
}
.hero--dark .eyebrow {
  color: var(--dark-accent);
}
.hero--dark .hero-headline {
  color: var(--dark-ink);
}
.hero--dark .hero-sub,
.hero--dark .hero-sub p {
  color: var(--dark-ink-soft);
}
/* Dark Hero — Border-Akzent + Bg wandert auf Input + Buttons,
   nicht mehr auf den Container. */
.hero--dark .agent-prompt {
  background: transparent;
  border: 0;
}
.hero--dark .agent-prompt input {
  background: var(--dark-bg-soft);
  border: 1px solid var(--dark-line);
  color: var(--dark-ink);
}
.hero--dark .agent-prompt input::placeholder {
  color: var(--dark-ink-muted);
}
.hero--dark .agent-prompt > button {
  background: var(--dark-ink);
  color: var(--dark-bg);
}
.hero--dark .agent-prompt > button:hover {
  background: var(--dark-accent);
}
.hero--dark .agent-meta,
.hero--dark .mode-indicator {
  color: var(--dark-ink-muted);
}
.hero--dark .mode-indicator.live::before {
  background: var(--dark-accent);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15);
}
.hero--dark .ai-slot {
  color: var(--dark-ink-soft);
  border-left-color: var(--dark-ink-muted);  /* the vertical bar — was nearly invisible */
}

/* v2 beats inside dark hero/section — each beat carries an explicit
   color rule (line ~119), so the parent `.ai-slot { color: ... }`
   never wins. Repeat the dark mapping for every beat variant.   */
.hero--dark .beat-hook,
.section--dark .beat-hook,
.hero--dark .beat-move,
.section--dark .beat-move,
.hero--dark .beat-question,
.section--dark .beat-question {
  color: var(--dark-ink);
}
.hero--dark .beat-bridge,
.section--dark .beat-bridge,
.hero--dark .beat-reflection,
.section--dark .beat-reflection {
  color: var(--dark-ink-soft);
}
.hero--dark .beat-move,
.section--dark .beat-move {
  border-bottom-color: var(--dark-ink);
}

/* Contact in dark mode */
.section.kontakt--dark,
.section--dark#kontakt {
  background: var(--dark-bg);
  color: var(--dark-ink);
  border-bottom: 0;
}
.section.kontakt--dark .section-title,
.section--dark#kontakt .section-title { color: var(--dark-ink); }
.section.kontakt--dark .section-lead,
.section--dark#kontakt .section-lead { color: var(--dark-ink-soft); }
.section.kontakt--dark .btn,
.section--dark#kontakt .btn {
  background: var(--dark-ink);
  color: var(--dark-bg);
  border-color: var(--dark-ink);
}
.section.kontakt--dark .btn:hover,
.section--dark#kontakt .btn:hover {
  background: var(--dark-accent);
  border-color: var(--dark-accent);
}

/* Reduce motion — dark sections still feel calm if animations are off */
@media (prefers-reduced-motion: reduce) {
  .section--dark .tile.tile--3d.tile--with-img:hover { box-shadow: none; }
}


/* ==========================================================================
   MEDIATHEK — top-level browsable index
   Streaming-service feel for a B2B knowledge base. Cluster-tinted accents,
   filter chips, agent-curated entry block, per-card podcast playback.
   ========================================================================== */

.media-shell {
  background: var(--bg);
  color: var(--ink);
  min-height: 70vh;
  /* Tone variables — match the cluster palette of the rest of the site */
  --tone-sap: #2a4a8a;
  --tone-ai: #2f7d4a;
  --tone-btp: #6a3d8a;
  --tone-ops: #8a5a2a;
  --tone-neutral: #424242;
  --tone-warm: #b06a2a;
}

.media-hero {
  position: relative;
  padding: var(--space-7) 0 var(--space-6);
  background:
    radial-gradient(circle at 78% 22%, rgba(58, 84, 142, 0.08), transparent 55%),
    radial-gradient(circle at 18% 78%, rgba(106, 61, 138, 0.07), transparent 55%),
    var(--bg);
  border-bottom: 1px solid var(--line);
}
.media-hero-eyebrow {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-muted);
  margin-bottom: 0.75rem;
}
.media-hero-title {
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
  font-weight: 600;
}
.media-hero-sub {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 64ch;
  margin: 0 0 var(--space-5);
}

/* Recommendation block */
.media-recommend-card {
  background: var(--bg);
  border: 1px solid var(--ink);
  padding: var(--space-4);
  display: grid;
  gap: var(--space-3);
  position: relative;
  overflow: hidden;
  max-width: 880px;
}
.media-recommend-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(42,74,138,0.04), rgba(106,61,138,0.04) 60%, transparent);
  pointer-events: none;
}
.media-recommend-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.media-recommend-eyebrow {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink);
  font-weight: 600;
}
.media-recommend-listen {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--ink);
  color: var(--bg);
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  transition: background 120ms ease;
}
.media-recommend-listen:hover {
  background: var(--ink-soft);
}
.media-recommend-intro {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  font-style: italic;
}
.media-recommend-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.media-recommend-pick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  background: var(--bg);
  transition: border-color 120ms ease, transform 120ms ease;
}
.media-recommend-pick:hover {
  border-color: var(--ink);
  transform: translateY(-1px);
}
.media-recommend-kind {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 2px 6px;
  background: var(--tone-neutral);
  color: #fff;
  border-radius: 999px;
}
.media-recommend-kind--sap     { background: var(--tone-sap); }
.media-recommend-kind--ai      { background: var(--tone-ai); }
.media-recommend-kind--btp     { background: var(--tone-btp); }
.media-recommend-kind--ops     { background: var(--tone-ops); }
.media-recommend-kind--warm    { background: var(--tone-warm); }
.media-recommend-kind--neutral { background: var(--tone-neutral); }
.media-recommend-title {
  font-size: 0.9375rem;
  font-weight: 500;
}
.media-recommend-reason {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ink-muted);
  letter-spacing: 0.01em;
}
.media-recommend-loading,
.media-recommend-empty {
  padding: var(--space-3);
  border: 1px dashed var(--line);
  color: var(--ink-muted);
  font-size: 0.9375rem;
  max-width: 720px;
}
.media-recommend-status {
  margin-top: 8px;
  min-height: 0;
}
.media-recommend-status:empty { display: none; }

/* Body — single column. The grid takes full width; filters live in the
   header above it. This keeps the content centered no matter how many
   tag chips appear. */
.media-body {
  display: block;
  padding: var(--space-5) 0 var(--space-7);
}

/* Controls header — sits above the grid */
.media-controls {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
}

.media-filters-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-height: 0;
}
.media-filters-row::before {
  content: attr(data-axis-label);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-muted);
  font-weight: 600;
  margin-right: 8px;
  white-space: nowrap;
  align-self: center;
}
.media-filters-row[data-axis="kinds"]::before    { content: "Typ"; }
.media-filters-row[data-axis="clusters"]::before { content: "Cluster"; }
.media-filters-row[data-axis="tags"]::before     { content: "Tags"; }

/* Tag row can grow long — give it a soft scroll area on small screens
   but let it wrap naturally on desktop. */
.media-filters-row--tags {
  flex-wrap: wrap;
  max-height: 4.4em;            /* ~2 rows of chips */
  overflow: hidden;
  position: relative;
  transition: max-height 200ms ease;
}
.media-filters-row--tags.is-expanded {
  max-height: 24em;
}
.media-filters-row--tags::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 60px;
  height: 22px;
  background: linear-gradient(to right, transparent, var(--bg));
  pointer-events: none;
}
.media-filters-row--tags.is-expanded::after { display: none; }

.media-filter-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.media-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 0.8125rem;
  letter-spacing: 0.005em;
  border-radius: 999px;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease, transform 80ms ease;
}
.media-chip:hover {
  border-color: var(--ink);
}
.media-chip:active { transform: translateY(1px); }
.media-chip-count {
  font-size: 0.7rem;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.media-chip--on {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.media-chip--on .media-chip-count {
  color: rgba(255,255,255,0.7);
}
.media-chip--sap.media-chip--on { background: var(--tone-sap); border-color: var(--tone-sap); }
.media-chip--ai.media-chip--on  { background: var(--tone-ai);  border-color: var(--tone-ai); }
.media-chip--btp.media-chip--on { background: var(--tone-btp); border-color: var(--tone-btp); }
.media-chip--ops.media-chip--on { background: var(--tone-ops); border-color: var(--tone-ops); }
.media-chip--warm.media-chip--on{ background: var(--tone-warm);border-color: var(--tone-warm); }
.media-clear-filters {
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  cursor: pointer;
  font: inherit;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: border-color 120ms ease, color 120ms ease;
  align-self: stretch;
}
.media-clear-filters:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* Tag-row "alle Tags ▾" expand toggle */
.media-filter-toggle {
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  padding: 4px 10px;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-left: 4px;
}
.media-filter-toggle:hover { color: var(--ink-soft); }

/* Toolbar — search + sort + clear, all in one row at the top */
.media-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: stretch;
  margin-bottom: 0;
}
.media-search {
  flex: 1 1 360px;
  display: flex;
  align-items: stretch;
  border: 1px solid var(--ink);
  background: var(--bg);
  min-width: 0;
}
.media-search input {
  flex: 1;
  border: 0;
  outline: 0;
  padding: 10px 14px;
  font: inherit;
  color: var(--ink);
  background: transparent;
  min-width: 0;
}
.media-mic {
  border: 0;
  border-left: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  padding: 0 12px;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  position: relative;
}
.media-mic:hover { color: var(--ink); background: rgba(0,0,0,0.04); }
.media-mic.agent-mic--on { color: #d94a4a; }
.media-search-submit {
  border: 0;
  background: var(--ink);
  color: var(--bg);
  padding: 0 18px;
  cursor: pointer;
  font: inherit;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.media-search-submit:hover { background: var(--ink-soft); }

.media-sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}
.media-sort select {
  padding: 8px 28px 8px 10px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231a1a1a'><path d='M4 6l4 4 4-4z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

/* Applied filter chips above the grid */
.media-applied {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: var(--space-3);
  min-height: 0;
}
.media-applied:empty { display: none; }
.media-applied-label {
  font-size: 0.75rem;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-right: 4px;
}
.media-applied-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--ink);
  color: var(--bg);
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 0.8125rem;
  border-radius: 999px;
  transition: opacity 120ms ease;
}
.media-applied-chip:hover { opacity: 0.85; }
.media-applied-x { font-size: 1rem; line-height: 1; opacity: 0.8; }

/* Card grid — scoped under .media-shell to avoid colliding with the
   admin Mediathek (which also uses .media-grid / .media-card classes). */
.media-shell .media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
  min-height: 200px;
  width: 100%;
}
.media-shell .media-loading,
.media-shell .media-empty {
  grid-column: 1 / -1;
  padding: var(--space-5);
  text-align: center;
  color: var(--ink-muted);
  border: 1px dashed var(--line);
}
.media-shell .media-empty h3 { margin: 0 0 var(--space-2); color: var(--ink); }
.media-shell .media-empty p { margin: 0 0 var(--space-3); }
.media-shell .media-empty-icon {
  font-size: 3rem;
  color: var(--ink-muted);
  margin-bottom: var(--space-2);
}

.media-shell .media-card {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
  overflow: hidden;
  outline: 0;
}
.media-shell .media-card:hover,
.media-shell .media-card:focus-visible {
  border-color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -16px rgba(10,10,10,0.18);
}

/* Mediathek wrapper — host for the canonical .tile + the Anhören
   overlay. Wrapper is a <div> so the inner .tile can stay a <button>. */
.mediathek-card-wrap {
  position: relative;
  display: block;
}
.mediathek-card-wrap > .tile {
  width: 100%;
  height: 100%;
}
.mediathek-card-cluster {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding: 3px 8px;
  background: rgba(0, 0, 0, 0.55);
  color: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 999px;
  font-weight: 600;
  pointer-events: none;
  z-index: 2;
}
.mediathek-card-listen {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  z-index: 2;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 160ms ease, transform 160ms ease, background 120ms ease;
}
.mediathek-card-wrap:hover .mediathek-card-listen,
.mediathek-card-wrap:focus-within .mediathek-card-listen,
.mediathek-card-listen.is-playing,
.mediathek-card-listen:focus-visible {
  opacity: 1;
  transform: translateY(0);
}
.mediathek-card-listen:hover {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.mediathek-card-listen.is-playing {
  background: #2a7a3a;
  color: #fff;
  border-color: #2a7a3a;
}
.mediathek-card-listen.is-playing::before {
  content: "▶";
  display: inline-block;
  margin-right: 2px;
  animation: mediaPulse 1.4s ease-in-out infinite;
}

.media-card-cover {
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--tone-neutral), #1a1a1a);
  overflow: hidden;
}
.media-card-cover[data-tone="sap"]     { background: linear-gradient(135deg, var(--tone-sap), #1a2438); }
.media-card-cover[data-tone="ai"]      { background: linear-gradient(135deg, var(--tone-ai), #1a3424); }
.media-card-cover[data-tone="btp"]     { background: linear-gradient(135deg, var(--tone-btp), #2a1a3a); }
.media-card-cover[data-tone="ops"]     { background: linear-gradient(135deg, var(--tone-ops), #3a2a1a); }
.media-card-cover[data-tone="warm"]    { background: linear-gradient(135deg, var(--tone-warm), #3a2a18); }
.media-card-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 320ms ease;
}
.media-card:hover .media-card-cover img { transform: scale(1.04); }
.media-card-kind {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  border-radius: 999px;
  font-weight: 600;
}
.media-card-kind--sap     { color: var(--tone-sap); }
.media-card-kind--ai      { color: var(--tone-ai); }
.media-card-kind--btp     { color: var(--tone-btp); }
.media-card-kind--ops     { color: var(--tone-ops); }
.media-card-kind--warm    { color: var(--tone-warm); }
.media-card-cluster {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding: 3px 8px;
  background: rgba(0,0,0,0.4);
  color: rgba(255,255,255,0.92);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 999px;
  font-weight: 600;
}
.media-shell .media-card-body {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.media-shell .media-card-title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: calc(2 * 1.3em);
}
.media-card-summary {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  max-height: calc(3 * 1.5em);
  overflow: hidden;
}
.media-card-tags {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding-top: 6px;
}
.media-card-tag {
  font-size: 0.7rem;
  padding: 2px 8px;
  background: rgba(0,0,0,0.04);
  color: var(--ink-soft);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  transition: background 120ms ease, color 120ms ease;
}
.media-card-tag:hover {
  background: var(--ink);
  color: var(--bg);
}
.media-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--line);
  background: rgba(0,0,0,0.015);
}
.media-card-listen {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  transition: color 120ms ease;
}
.media-card-listen:hover { color: var(--ink); }
.media-card-listen.is-playing {
  color: #2a7a3a;
  font-weight: 600;
}
.media-card-listen.is-playing::before {
  content: "▶";
  display: inline-block;
  animation: mediaPulse 1.4s ease-in-out infinite;
}
@keyframes mediaPulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}
.media-card-readmore {
  font-size: 0.8125rem;
  color: var(--ink);
  letter-spacing: 0.04em;
  font-weight: 500;
}

/* Status + pagination */
.media-status {
  margin-top: var(--space-3);
  font-size: 0.8125rem;
  color: var(--ink-muted);
}
.media-pagination {
  margin-top: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  justify-content: center;
}
.media-page-btn {
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 0.875rem;
  transition: background 120ms ease, color 120ms ease;
}
.media-page-btn:hover:not(:disabled) {
  background: var(--ink);
  color: var(--bg);
}
.media-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.media-page-info {
  font-size: 0.875rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* Mobile — toolbar stacks vertically, filter rows wrap freely */
@media (max-width: 960px) {
  .media-shell .media-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .media-shell .media-sort {
    justify-content: space-between;
  }
  .media-shell .media-filters-row--tags {
    max-height: 6em;             /* ~3 rows on mobile */
  }
}
@media (max-width: 480px) {
  .media-shell .media-grid {
    grid-template-columns: 1fr;
  }
  .media-shell .media-hero { padding: var(--space-5) 0 var(--space-4); }
}


/* ==========================================================================
   ADMIN · Export-View
   ========================================================================== */

.export-stats {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--space-4);
  row-gap: 6px;
  margin: 0 0 var(--space-3);
  font-size: 0.9rem;
}
.export-stats dt {
  color: var(--ink-muted);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.export-stats dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-weight: 500;
}
.admin-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: var(--space-3);
}


/* ==========================================================================
   AGENT ACTIVITY STREAM — transparent process visibility
   ========================================================================== */

.agent-status-host {
  margin-top: 6px;
  min-height: 0;
}
.agent-status-host:empty { display: none; }

.agent-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  transition: opacity 200ms ease, transform 200ms ease;
}
.agent-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink);
  animation: agentStatusPulse 1.1s ease-in-out infinite;
}
@keyframes agentStatusPulse {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50%      { opacity: 1.0; transform: scale(1.15); }
}
.agent-status-text {
  white-space: nowrap;
}
.agent-status-elapsed {
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  margin-left: 2px;
}
.agent-status--done {
  border-color: rgba(60, 180, 80, 0.45);
  color: #2a7a3a;
}
.agent-status--done .agent-status-elapsed {
  color: rgba(42, 122, 58, 0.65);
}
.agent-status--error {
  border-color: rgba(220, 80, 60, 0.55);
  color: #b03e2e;
}
.agent-status--fade {
  opacity: 0;
  transform: translateY(-4px);
}

/* Hero-dark variant */
.hero--dark .agent-status {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--dark-line);
  color: var(--dark-ink-soft);
}
.hero--dark .agent-status-dot {
  background: var(--dark-ink);
}
.hero--dark .agent-status-elapsed {
  color: var(--dark-ink-muted);
}
.hero--dark .agent-status--done {
  border-color: rgba(110, 220, 130, 0.55);
  color: #6fdc88;
}
.hero--dark .agent-status--done .agent-status-elapsed {
  color: rgba(110, 220, 130, 0.7);
}

/* Skeleton lines — calmer than spinners, communicates "the surface where
   the answer will appear". Uses a subtle shimmer instead of a wheel. */
.agent-skel-line {
  display: block;
  height: 0.95em;
  margin: 0.5em 0;
  width: 78%;
  border-radius: 9px;
  background: linear-gradient(90deg,
    var(--line, rgba(0, 0, 0, 0.06)) 0%,
    rgba(0, 0, 0, 0.04) 40%,
    var(--line, rgba(0, 0, 0, 0.06)) 80%);
  background-size: 200% 100%;
  animation: agentSkelShimmer 1.4s linear infinite;
}
.agent-skel-line--mid  { width: 94%; }
.agent-skel-line--long { width: 62%; }
@keyframes agentSkelShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.agent-response--skeleton .agent-meta-row {
  opacity: 0.4;
}

/* Hero-dark — skeleton uses dark line for the bar */
.hero--dark .agent-skel-line {
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.04) 40%,
    rgba(255, 255, 255, 0.08) 80%);
  background-size: 200% 100%;
}


/* ==========================================================================
   PHASE 4c — UI-action highlight pulse for the SEA orchestrator
   ========================================================================== */

.ui-highlight-pulse {
  position: relative;
  animation: uiHighlightPulse 1.6s ease-in-out infinite;
  outline: 2px solid rgba(60, 180, 80, 0.65);
  outline-offset: 4px;
  border-radius: 15px;
}
@keyframes uiHighlightPulse {
  0%, 100% { outline-color: rgba(60, 180, 80, 0.20); }
  50%      { outline-color: rgba(60, 180, 80, 0.85); }
}


/* ==========================================================================
   PHASE 4a — Voice-In: mic button inside the agent prompt
   Sits between the input and the submit button. Hidden when the browser
   doesn't support SpeechRecognition (the JS sets [hidden]).
   ========================================================================== */

/* Mic/Speaker — eigenständige Pills DANEBEN, nicht mehr im
   Container drinstehend. align-self:stretch entfernt, border-left
   weg, eigenes border + border-radius. */
.agent-prompt #agent-mic,
.agent-prompt #agent-tts,
.agent-mic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  min-width: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line, rgba(0,0,0,0.08));
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-soft, #3a3a3a);
  cursor: pointer;
  flex: 0 0 auto;
  transition: color 120ms ease, background 120ms ease;
  position: relative;
  font: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
/* Small label visible only on wider viewports — improves discoverability
   without crowding the row. Auto-hidden on mobile via media query below. */
.agent-mic-text {
  display: inline-block;
  white-space: nowrap;
}
@media (max-width: 1024px) {
  .agent-mic-text { display: none; }
}
.agent-prompt #agent-mic:hover,
.agent-prompt #agent-tts:hover,
.agent-mic:hover {
  color: var(--ink, #1a1a1a);
  background: rgba(0, 0, 0, 0.04);
}
.agent-mic:focus-visible {
  outline: 2px solid var(--ink, #1a1a1a);
  outline-offset: -2px;
}
.agent-mic-icon { display: block; }
.agent-mic-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
}
.agent-mic--on .agent-mic-dot {
  background: #d94a4a;
  animation: micPulse 1.2s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(217, 74, 74, 0.6);
}
@keyframes micPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 74, 74, 0.55); }
  50%      { box-shadow: 0 0 0 6px rgba(217, 74, 74, 0); }
}
.agent-mic--on { color: #d94a4a; }

/* Speaker toggle (Phase 4b) — same shape as mic, different on-color. */
.agent-tts-toggle { color: var(--ink-soft, #3a3a3a); }
.agent-tts-toggle--on { color: #2a7a3a; }
.agent-tts-toggle--on .agent-mic-icon {
  filter: drop-shadow(0 0 4px rgba(60, 180, 80, 0.55));
}

/* Hero-dark variant — match the surrounding palette. Specificity bumped
   to override `.agent-prompt button` which sets the Berater-form's dark
   background. */
.hero--dark .agent-prompt #agent-mic,
.hero--dark .agent-prompt #agent-tts,
.hero--dark .agent-mic {
  color: var(--dark-ink-soft);
  border-color: var(--dark-line);
  background: transparent;
}
.hero--dark .agent-prompt #agent-mic:hover,
.hero--dark .agent-prompt #agent-tts:hover,
.hero--dark .agent-mic:hover {
  color: var(--dark-ink);
  background: rgba(255, 255, 255, 0.04);
}
.hero--dark .agent-mic--on { color: #ff7b7b; }
.hero--dark .agent-mic--on .agent-mic-dot { background: #ff7b7b; }
.hero--dark .agent-tts-toggle--on { color: #6fdc88; }


/* ==========================================================================
   SEA PHASE 2 — Admin debug widget ("Berater sieht…")
   Floating bottom-right pill that admins can expand to see what the
   Sales-Executive-Agent has observed about the visitor in the current
   session. Hidden by default via [hidden]; app.js removes the attribute
   when the logged-in user has role=admin.
   ========================================================================== */

.sea-debug {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9001;
  font-family: var(--font-sans, system-ui, -apple-system, "Segoe UI", sans-serif);
  font-size: 12px;
  line-height: 1.4;
  color: #f5f5f4;
}
/* Im Workspace-/Admin-Shell verdeckt die SEA-Debug-Pill sonst den
   Speichern-Button am rechten unteren Rand des Editors. Verstecken
   wenn das Content-Shell oder Admin-Shell sichtbar ist. */
body:has(#content-shell:not([hidden])) .sea-debug,
body:has(#admin-shell:not([hidden])) .sea-debug {
  display: none !important;
}
/* On mobile the bottom-right corner is the thumb's home — move the
   admin-only widget out of the way so it doesn't block "Kontakt" CTAs. */
@media (max-width: 720px) {
  .sea-debug {
    right: 8px;
    bottom: auto;
    top: calc(env(safe-area-inset-top, 0px) + 64px);
  }
  .sea-debug-panel {
    max-height: 50vh;
  }
}

.sea-debug-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(10, 10, 10, 0.92);
  color: #f5f5f4;
  cursor: pointer;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 24px -8px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 120ms ease;
}
.sea-debug-toggle:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.30);
}
.sea-debug-icon { font-size: 14px; }
.sea-debug-label { font-weight: 500; }
.sea-debug-label > span {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  color: #ececea;
  font-variant-numeric: tabular-nums;
}

.sea-debug-panel {
  margin-top: 8px;
  width: min(420px, calc(100vw - 32px));
  max-height: 60vh;
  overflow: auto;
  background: rgba(10, 10, 10, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  padding: 12px 14px;
  box-shadow: 0 16px 48px -16px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.sea-debug-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-bottom: 10px;
}
.sea-debug-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ececea;
  font-size: 11px;
  letter-spacing: 0.01em;
}
.sea-debug-chip strong {
  color: #ffffff;
  font-weight: 600;
}
.sea-debug-chip--pain {
  background: rgba(220, 100, 80, 0.10);
  border-color: rgba(220, 100, 80, 0.32);
}
.sea-debug-chip--cluster {
  background: rgba(120, 180, 240, 0.10);
  border-color: rgba(120, 180, 240, 0.32);
}
.sea-debug-chip--item {
  background: rgba(180, 220, 140, 0.10);
  border-color: rgba(180, 220, 140, 0.32);
}

.sea-debug-json {
  margin: 0;
  padding: 8px 10px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.45;
  color: #ececea;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 15px;
  white-space: pre-wrap;
  word-break: break-word;
}

.sea-debug-meta {
  margin-top: 8px;
  font-size: 10.5px;
  color: #c8c8c4;
  letter-spacing: 0.02em;
}

/* ============================================================
   ROUNDED-CORNER SWEEP — final pass for elements that didn't get a
   radius via their original rule. Token-based, so future re-theming
   only touches :root. Selectors target the most visible public-facing
   surfaces; admin-internal panels (cw-*, aud-*) keep their existing
   chrome unless explicitly listed.
   ============================================================ */

/* Hero chat input + send button — robuste "Buttons außerhalb"-
   Architektur. Container ist KEIN Pill mehr (kein border-radius,
   kein overflow:hidden) — Input und Buttons sind separate Pills
   mit eigenem border-radius. */
.agent-prompt {
  border-radius: 0;
  overflow: visible;
}
.agent-prompt input,
.agent-prompt textarea {
  border-radius: var(--radius-pill);
}
.agent-prompt > button {
  border-radius: var(--radius-pill);
}

/* Tags / pills / badges — keep as pills */
.tag,
.tag-light,
.tag-chip,
.pill,
.role-badge,
.aud-pill,
.btn-mini {
  border-radius: var(--radius-pill);
}

/* Cards — match tile rhythm */
.cluster-card,
.usecase-card,
.component-card,
.relation-card,
.modal-card,
.faq-item {
  border-radius: var(--radius);
}

/* Form controls — admin + public */
.form-stack input,
.form-stack textarea,
.form-stack select,
.demo-form textarea,
.demo-form input,
.demo-form select {
  border-radius: var(--radius-sm);
}
.form-error,
.form-success {
  border-radius: var(--radius-sm);
}

/* Hero / agent-status surfaces */
.agent-status,
.agent-status-host,
.agent-mic {
  border-radius: var(--radius-pill);
}

/* ==========================================================================
   Hero status LED — small physical-looking glowing dot in the top-right
   corner of every Hero / Mini-Hero. State driven by [data-led-state]:
     idle       → silver (no glow, calm)
     observing  → purple (slow pulse — passive monitoring)
     active     → turquoise (medium pulse — user engaging)
     generating → orange (fast pulse — request in flight)
   The visual model: a small bezel ring with a glass-like lens that emits
   a colored glow. Sizing is identical for maxi and mini hero so the
   indicator reads as one consistent system.
   ========================================================================== */
.hero-led {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
  cursor: help;
  transition: box-shadow 200ms ease;
  /* Maxi default — pill that fits dot + text. Mini overrides below. */
  padding: 6px 12px 6px 9px;
  border-radius: var(--radius-pill);
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,0.10), rgba(0,0,0,0.0) 65%),
    rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 1px 4px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  max-width: calc(100% - 28px);
}
.hero-led--mini {
  /* Mini-hero variant — dot only, no text. Compact bezel circle. */
  top: 10px;
  right: 12px;
  width: 18px;
  height: 18px;
  padding: 0;
  gap: 0;
  border-radius: 50%;
  justify-content: center;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.18), rgba(0,0,0,0.35) 70%),
    rgba(0, 0, 0, 0.45);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.20),
    inset 0 -1px 2px rgba(0, 0, 0, 0.45),
    0 1px 2px rgba(0, 0, 0, 0.35);
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* Header variant — public status-LED, lives inline in #public-header
   right of the routes nav. Overrides the absolute positioning of the
   base class and adopts the v2 glass-pill formula so it matches the
   nearby Login pill. */
.hero-led--header {
  position: static;
  top: auto;
  right: auto;
  padding: 6px 12px 6px 10px;
  gap: 8px;
  background: rgba(20, 20, 20, 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-pill);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  font-family: var(--font-prose);
  font-size: 12px;
  font-weight: 500;
  color: var(--paper);
  letter-spacing: 0.01em;
  cursor: default;
  /* Reserve a stable width so phase-text swaps don't push the
     hamburger / nav around. 200px holds every phase string in
     BRIDGE_PHASES + HERO_LED_LABELS comfortably. */
  min-width: 200px;
}
.hero-led--header .hero-led-text {
  display: inline;
  /* Long phase strings get truncated rather than wrapping the pill. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}
/* Spinner-Slot — nur sichtbar während busy. Schmaler rotierender Ring
   am linken Pill-Rand, signalisiert "Pipeline läuft". */
.hero-led-spinner {
  display: none;
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-top-color: rgba(255, 255, 255, 0.8);
  animation: hero-led-spin 0.8s linear infinite;
}
.hero-led--bridge-busy .hero-led-spinner {
  display: inline-block;
}
@keyframes hero-led-spin {
  to { transform: rotate(360deg); }
}
/* Live-Timer-Slot — zählt die Sekunden seit busy()-Start.
   Tabular-nums, damit "1.2s → 1.3s → 1.4s" nicht horizontal hüpft. */
.hero-led-timer {
  display: none;
  flex-shrink: 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  padding-left: 6px;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  margin-left: 2px;
}
.hero-led--bridge-busy .hero-led-timer {
  display: inline-block;
}
@media (prefers-reduced-motion: reduce) {
  .hero-led-spinner { animation: none; opacity: 0.7; }
}
/* Hide the label on narrow viewports — pill collapses to dot-only.
   Push the LED to the right so it sits next to the hamburger toggle. */
@media (max-width: 960px) {
  .hero-led--header { margin-left: auto; }
}
@media (max-width: 720px) {
  .hero-led--header { padding: 6px; gap: 0; width: 22px; min-width: 0; height: 22px; justify-content: center; }
  .hero-led--header .hero-led-text { display: none; }
}
.hero-led-dot {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--led-color, #9aa0a6);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.25) inset,
    0 0 6px 0 var(--led-glow, transparent);
  transition: background 200ms ease, box-shadow 300ms ease;
  flex: 0 0 auto;
}
.hero-led--mini .hero-led-dot {
  width: 8px;
  height: 8px;
}
.hero-led-text {
  font-family: inherit;
  font-weight: 500;
  line-height: 1;
  /* Reset legacy .mode-indicator::before pseudo-dot — the LED dot
     replaces it now. */
}
.hero-led .mode-indicator::before {
  content: none !important;
}

/* Mobile — collapse the badge to dot only, but keep the text accessible
   via the title/aria-label. Phones don't have room for the long label
   above the headline. */
@media (max-width: 720px) {
  .hero-led--maxi {
    padding: 0;
    gap: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background:
      radial-gradient(circle at 30% 30%, rgba(255,255,255,0.18), rgba(0,0,0,0.35) 70%),
      rgba(0, 0, 0, 0.45);
    border: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, 0.20),
      inset 0 -1px 2px rgba(0, 0, 0, 0.45),
      0 1px 2px rgba(0, 0, 0, 0.35);
    justify-content: center;
  }
  .hero-led--maxi .hero-led-text {
    display: none;
  }
}

/* --- States ------------------------------------------------------------- */

/* idle — silver, no glow */
.hero-led[data-led-state="idle"] {
  --led-color: linear-gradient(145deg, #d8d8d8, #9c9c9c);
  --led-glow: transparent;
}
.hero-led[data-led-state="idle"] .hero-led-dot {
  background:
    radial-gradient(circle at 30% 30%, #f0f0f0 0%, #b8b8b8 60%, #6e6e6e 100%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.25) inset,
    0 0 0 0 transparent;
}

/* observing — purple, slow pulse */
.hero-led[data-led-state="observing"] .hero-led-dot {
  background:
    radial-gradient(circle at 30% 30%, #d8b4fe 0%, #a855f7 55%, #6d28d9 100%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.25) inset,
    0 0 6px 1px rgba(168, 85, 247, 0.55);
  animation: heroLedPulse 2.6s ease-in-out infinite;
}

/* active — turquoise, medium pulse */
.hero-led[data-led-state="active"] .hero-led-dot {
  background:
    radial-gradient(circle at 30% 30%, #a7f3e8 0%, #14b8a6 55%, #0e7c70 100%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.25) inset,
    0 0 7px 1px rgba(20, 184, 166, 0.65);
  animation: heroLedPulse 1.6s ease-in-out infinite;
}

/* generating — orange, fast pulse */
.hero-led[data-led-state="generating"] .hero-led-dot {
  background:
    radial-gradient(circle at 30% 30%, #fed7aa 0%, #f97316 55%, #c2410c 100%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.25) inset,
    0 0 9px 2px rgba(249, 115, 22, 0.75);
  animation: heroLedPulse 0.9s ease-in-out infinite;
}

@keyframes heroLedPulse {
  0%, 100% { filter: brightness(1.0); transform: scale(1.0); }
  50%      { filter: brightness(1.25); transform: scale(1.08); }
}

/* Reduced motion — keep colors, drop the pulse */
@media (prefers-reduced-motion: reduce) {
  .hero-led-dot {
    animation: none !important;
  }
}

/* --- Agent-Bridge ------------------------------------------------------ */
/* Bridges short async waits by overriding the LED-text with cycling
   phase strings. The dot stays the LED-state colour (handled above);
   the text gets a soft fade-in on every phase swap so the change feels
   narrated rather than abrupt. Done-state replaces the dot with a
   green check-pulse for ~1 second to confirm completion. */

/* Soft fade on every phase swap. JS re-applies .hero-led-text--swap
   after a forced reflow so successive swaps re-trigger the animation. */
.hero-led--header .hero-led-text--swap {
  animation: bridgePhaseFade 240ms ease both;
}
@keyframes bridgePhaseFade {
  from { opacity: 0.35; transform: translateY(-1px); }
  to   { opacity: 1.0;  transform: translateY(0); }
}

/* Done-state — turn the dot green for the brief flash window. Matches
   the "active" hue palette but at higher saturation so it reads as
   a confirmation rather than steady state. */
.hero-led.hero-led--bridge-done .hero-led-dot {
  background:
    radial-gradient(circle at 30% 30%, #bbf7d0 0%, #22c55e 55%, #15803d 100%) !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.25) inset,
    0 0 9px 2px rgba(34, 197, 94, 0.75) !important;
  animation: bridgeDonePulse 700ms ease-out !important;
}
.hero-led--header.hero-led--bridge-done .hero-led-text {
  color: #6ee7a8;
}

@keyframes bridgeDonePulse {
  0%   { transform: scale(0.85); filter: brightness(1.0); }
  40%  { transform: scale(1.18); filter: brightness(1.35); }
  100% { transform: scale(1.0);  filter: brightness(1.0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-led--header .hero-led-text--swap,
  .hero-led.hero-led--bridge-done .hero-led-dot {
    animation: none !important;
  }
}

/* --- Layout-Skeleton --------------------------------------------------- */
/* Wird beim ersten Besuch einer Route gerendert während /api/layout
   läuft. Mimt Hero + 3×3 Grid, damit der Nutzer sofort eine populated
   Seite sieht. Shimmer-Animation signalisiert "lädt noch". */
.layout-skel { padding: 32px 0; }
.layout-skel--hero {
  padding: 96px 0 64px;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.04) 0%,
    rgba(0,0,0,0.02) 100%);
}
.layout-skel-bar {
  background: linear-gradient(90deg,
    rgba(0,0,0,0.06) 0%,
    rgba(0,0,0,0.10) 50%,
    rgba(0,0,0,0.06) 100%);
  background-size: 200% 100%;
  border-radius: 6px;
  animation: layoutSkelShimmer 1.6s ease-in-out infinite;
}
.layout-skel-bar--eyebrow      { width: 120px; height: 12px; margin-bottom: 18px; }
.layout-skel-bar--headline     { width: 70%;   height: 36px; margin-bottom: 14px; }
.layout-skel-bar--lead         { width: 60%;   height: 16px; margin-bottom: 8px; }
.layout-skel-bar--lead-short   { width: 40%;   height: 16px; }
.layout-skel-bar--section-title{ width: 200px; height: 22px; margin-bottom: 24px; }
.layout-skel-bar--tile-title   { width: 80%;   height: 18px; margin: 14px 0 10px; }
.layout-skel-bar--tile-body    { width: 95%;   height: 12px; margin-bottom: 6px; }
.layout-skel-bar--tile-body-short { width: 65%; height: 12px; }
.layout-skel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--space-4, 24px);
}
.layout-skel-tile {
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--r-card, 12px);
  background: var(--paper, #fff);
  padding: 16px;
}
.layout-skel-tile-cover {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  background: linear-gradient(90deg,
    rgba(0,0,0,0.06) 0%,
    rgba(0,0,0,0.10) 50%,
    rgba(0,0,0,0.06) 100%);
  background-size: 200% 100%;
  animation: layoutSkelShimmer 1.6s ease-in-out infinite;
}
@keyframes layoutSkelShimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .layout-skel-bar,
  .layout-skel-tile-cover {
    animation: none !important;
    background: rgba(0,0,0,0.06);
  }
}

/* ==========================================================================
   Agent response wrapper — sits BELOW the hero on the page background,
   not inside it. Keeps long answers off the hero photo and gives the
   reading area its own breathing room.
   ========================================================================== */
.agent-response-wrap {
  background: var(--bg, #ffffff);
  color: var(--ink);
  padding: var(--space-6) 0 var(--space-4);
  border-bottom: 1px solid var(--line);
  animation: fadeIn 280ms ease;
}
.agent-response-wrap[hidden] {
  display: none;
}
/* Reset any inherited hero spacing — this is a regular page section. */
.agent-response-wrap .agent-response {
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
}
/* The wrap supplies its own container width; .agent-response inside it
   should not stack a second container constraint. */
.agent-response-wrap .container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}
/* Status host gets a small bottom margin so the activity line and the
   answer don't collide. */
.agent-response-wrap .agent-status-host:not(:empty) {
  margin-bottom: var(--space-3);
}
/* Dark-mode: when the page is in dark appearance, the wrap follows. */
body.appearance-dark .agent-response-wrap {
  background: var(--dark-bg, #0a0a0a);
  color: var(--dark-ink, #f0f0f0);
  border-bottom-color: var(--dark-line, rgba(255, 255, 255, 0.08));
}


/* ============================================================
   Cost-Protection — Static-Fallback bei degraded-Mode
   Body bekommt .agent-degraded gesetzt, sobald /api/health meldet
   dass das Tagesbudget erreicht oder der Admin den Schalter aktiviert
   hat. Wir blenden Chat-affordances aus und zeigen einen Banner an.
   ============================================================ */
body.agent-degraded #agent-form,
body.agent-degraded .agent-prompt,
body.agent-degraded .agent-prompt--mini,
body.agent-degraded .dt-shared-bar,
body.agent-degraded .dt-chatbar-preview,
body.agent-degraded .agent-response-wrap {
  display: none !important;
}
body.agent-degraded .agent-degraded-banner {
  display: block;
}
.agent-degraded-banner {
  display: none;
  margin: 16px auto;
  max-width: 880px;
  padding: 16px 20px;
  border: 1px solid var(--hairline-light);
  border-left: 3px solid var(--ink);
  border-radius: var(--r-card);
  background: var(--paper-warm);
  color: var(--ink);
  font-family: var(--font-prose);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.agent-degraded-banner strong {
  font-weight: 600;
  margin-right: 6px;
}


/* ============================================================
   Visitor-Pill im Footer-Bottom — zeigt anonyme Sitzungs-Dauer
   und einen Reset-Button. Erscheint nur bei is_anonymous=true.
   ============================================================ */
.footer-visitor {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-family: var(--font-meta);
  font-size: 12px;
  color: var(--muted-light);
}
.footer-visitor-text {
  white-space: nowrap;
}
.footer-visitor-reset {
  background: transparent;
  border: 1px solid var(--hairline-light);
  color: var(--muted-light);
  padding: 3px 10px;
  border-radius: var(--r-pill);
  cursor: pointer;
  font: inherit;
  text-transform: lowercase;
  transition: border-color 120ms ease, color 120ms ease;
}
.footer-visitor-reset:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* ============================================================================
 * TILE-V2 — START
 *
 * Slot-basiertes Tile-System (siehe TILE-INVENTORY.md + static/tile-v2.js).
 * Erste Variante: portrait-text (Insights). Weitere Varianten kommen hier
 * dazu, jede in eigenem Block, KEINE Vermischung mit dem alten .tile-System.
 *
 * Design-Regeln (siehe Phase-1-Inventar):
 *   • EINE Regel pro Eigenschaft. Kein !important.
 *   • CSS-Variablen für alles Tunbare (--tile-clamp-lines, --tile-pad).
 *   • Variante = Klasse (.tile-v2--<name>), keine JS-Branches.
 *   • Slots sind explizit: header / body / footer.
 *
 * Ist nichts an V2 übersetzt → komplett entfernbar via Suchen-und-Löschen
 * von "TILE-V2 — START" bis "TILE-V2 — ENDE".
 * ============================================================================ */

.tile-v2 {
  /* Layout */
  display: flex;
  flex-direction: column;
  text-align: left;
  /* Mehr Atemraum zwischen Header → Body → Footer (vorher 12px). */
  gap: var(--tile-v2-gap, 18px);
  padding: var(--tile-v2-pad, 24px);
  /* Frame */
  background: var(--bg, #fff);
  border: 1px solid var(--line);
  border-radius: var(--radius, 16px);
  /* Button-Reset */
  font: inherit;
  color: inherit;
  cursor: pointer;
  /* Hover */
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.tile-v2:hover {
  transform: translateY(-2px);
  border-color: var(--ink);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
}
.tile-v2:focus-visible {
  outline: 2px solid var(--accent, var(--ink));
  outline-offset: 2px;
}

/* Customer-Steckbriefe sind in sich abgeschlossen (kein Detail-Level).
   Die Karte navigiert nicht → kein Pointer, kein Hover-Lift. Die Tags
   bleiben klickbar (Mediathek-Filter), behalten also ihren Pointer. */
.tile-v2--customer { cursor: default; }
/* Kunden-Karte: Höhe folgt dem Inhalt (kein festes Seitenverhältnis). Ein
   fixes A4-Hoch/Quadrat/Quer passt nie zum kurzen Steckbrief-Text — es
   entsteht entweder Leerraum oder (im Querformat) Clipping. Mit aspect-auto
   + min-height 0 sitzt der Text bündig; bei dem kurzen Text wirken die
   Karten von selbst leicht breiter-als-hoch ("quer"), und der Grid-Stretch
   gleicht eine Reihe auf identische Höhe an. (Portrait erzwingt sonst
   aspect 1/1.414 + min-height 380px.) */
.tile-v2--portrait.tile-v2--customer {
  aspect-ratio: auto;
  min-height: 0;
}
/* Dezentes Kronen-Icon oben rechts als Kunden-Marker (eigenes Inline-SVG,
   neutrale Form). Sitzt im oberen Padding-Bereich, klippt nicht. */
.tile-v2--customer::after {
  content: "";
  position: absolute;
  top: 16px;
  right: 18px;
  width: 18px;
  height: 18px;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23b3b3b3'%3E%3Cpath d='M4 17h16l1.2-9.2-5 3.6L12 4.6 7.8 11.4l-5-3.6L4 17Zm0 1.4h16V21H4Z'/%3E%3C/svg%3E");
  opacity: 0.85;
  pointer-events: none;
}
.tile-v2--customer:hover {
  transform: none;
  border-color: var(--line);
  box-shadow: none;
}
.tile-v2--customer .tile-v2__tag { cursor: pointer; }
/* Bildhöhe + Abstände optimieren (User-Feedback): das 16:9-Icon-Cover war zu
   hoch und der Default-Header (Titel) hatte unten keinen Abstand (kein Footer
   in der Bild-Variante) → 2-zeilige Titel liefen unten über. Cover flacher +
   Bottom-Padding unter dem Titel. */
.tile-v2--portrait.tile-v2--customer .tile-v2__cface .tile-v2__cover,
.tile-v2--portrait.tile-v2--customer > .tile-v2__cover {
  aspect-ratio: 16 / 7;
}
.tile-v2--customer .tile-v2__content {
  padding-bottom: 20px;
}
/* Hover-Überblendung (User-Direktive): Default zeigt die Bild-Variante
   (Cover/Icon + Titel); beim Hover/Focus blendet die Text-Variante als
   weisses Overlay an gleicher Stelle ein — KEINE neue Form, gleicher
   Karten-Look (helle Fläche, normaler dunkler Text). */
.tile-v2--portrait.tile-v2--customer { position: relative; }
.tile-v2--customer .tile-v2__creveal {
  position: absolute;
  inset: 0;
  background: var(--bg, #fff);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.tile-v2--customer:hover .tile-v2__creveal,
.tile-v2--customer:focus-within .tile-v2__creveal {
  opacity: 1;
  pointer-events: auto;
}
/* Steckbrief-Text im Overlay sichtbar machen: die Portrait-Regel
   `.tile-v2--portrait:not(.tile-v2--no-cover) .tile-v2__summary{display:none}`
   versteckt sonst die Summary (gleiche Spezifität, spätere Regel gewinnt).
   Höhere Spezifität (4 Klassen) erzwingt die Anzeige im creveal-Overlay. */
.tile-v2--portrait.tile-v2--customer .tile-v2__creveal .tile-v2__summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  overflow: hidden;
}

/* Branchen-Gruppierung der Kunden-Sektion: ein Block je Branche mit
   Überschrift, darunter das Portrait-Grid. Abstand zwischen den Blöcken. */
.customer-group + .customer-group { margin-top: 44px; }
.customer-group__title {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin: 0 0 18px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
/* Etwas mehr Abstand im Kunden-Grid (User-Wunsch): grösserer Gap → Karten
   minimal schmaler und mehr Luft zwischen den A4-Hochformat-Steckbriefen. */
.customer-group .tile-grid--portrait { gap: var(--space-6); }

/* Slots — fix in jeder Variante */
.tile-v2__header { flex: 0 0 auto; }
.tile-v2__body   {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  /* Garantierter Atemraum zwischen Body-Text und Footer/Tags — auch
     wenn die Summary geklemmt ist, soll unten Luft bleiben. */
  padding-bottom: 8px;
}
.tile-v2__footer { flex: 0 0 auto; margin-top: auto; }

/* Header-Inhalt */
.tile-v2__eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 8px;
  font-weight: 500;
}
.tile-v2__title {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
  /* Title-Clamp gegen Overflow bei langen deutschen Titeln (z. B.
     "SAP HCM-Suite: SuccessFactors, HCM und Concur — End-to-End fuer
     die Personalarbeit"). Max 3 Zeilen, dann ellipsis. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Body-Inhalt */
.tile-v2__summary {
  font-size: 0.875rem;
  /* Etwas grosszügiger als 1.5 — Lese-Atmen ohne den Block aufzublasen. */
  line-height: 1.6;
  color: var(--body-light, var(--ink-soft));
  margin: 0;
  /* Line-Clamp via Variable — vom Variante-Default oder Inline-Style. */
  display: -webkit-box;
  -webkit-line-clamp: var(--tile-clamp-lines, 5);
  line-clamp: var(--tile-clamp-lines, 5);
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Fallback für Browser die -webkit-box mit line-clamp nicht greifen
     lassen: harter max-height-Cap = clamp-Lines × line-height (1.6em).
     Plus text-overflow für die letzte sichtbare Zeile. */
  max-height: calc(var(--tile-clamp-lines, 5) * 1.6em);
  text-overflow: ellipsis;
}

/* Footer-Inhalt — Layout: vertikal mit Lesen-Sie-mehr OBEN, Tags UNTEN.
   Da .tile-v2__footer schon margin-top:auto hat, wird der Footer am
   Karten-Boden angedockt — Tags landen ganz unten. */
.tile-v2__footer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 16px;
}

.tile-v2__readmore {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 0.78;
  transition: opacity 160ms ease, gap 160ms ease;
}
.tile-v2:hover .tile-v2__readmore {
  opacity: 1;
  gap: 9px;
}
.tile-v2__arrow {
  display: inline-block;
  transition: transform 160ms ease;
  margin-left: 2px;
}
.tile-v2:hover .tile-v2__arrow {
  transform: translateX(2px);
}

/* Tags */
.tile-v2__tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-self: flex-start;
}
.tile-v2__tag {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  font-family: var(--font-mono, monospace);
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft, var(--ink-muted));
  background: transparent;
  white-space: nowrap;
}
/* Tags sind navigierbar (→ Mediathek-Filter): Klick-Affordance auf allen
   Chips, nicht nur Customer-Kacheln. */
.tile-v2__tag[data-tag] { cursor: pointer; }
.tile-v2__tag[data-tag]:hover {
  color: var(--ink);
  border-color: var(--ink);
}

/* Cover-Slot — wird nur gerendert wenn Variante showCover=true UND
   item ein Cover-Image hat. Default: 16:9 Banner oben mit object-fit:
   cover. Bei fehlendem Bild greift die `--empty`-Variante mit einem
   ruhigen Gradient als Platzhalter. */
.tile-v2__cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  /* Render-Hints via CSS-Variablen mit Defaults — slotCover() in
     tile-v2.js setzt sie inline pro Content-Item, wenn images.cover
     einen Object-Form Config liefert. */
  background: var(--cover-bg, var(--bg-alt, #f5f5f5));
  padding: var(--cover-pad, 0);
  flex: 0 0 auto;
}
.tile-v2__cover-img {
  width: 100%;
  height: 100%;
  object-fit: var(--cover-fit, cover);
  object-position: var(--cover-pos, center center);
  transform: scale(var(--cover-scale, 1));
  transform-origin: var(--cover-pos, center center);
  display: block;
  /* Padding-Box-Sizing damit padding den Bild-Bereich nicht beschneidet
     sondern als Innenabstand wirkt. */
  box-sizing: border-box;
}

/* ── Ken-Burns für WIDE-Cover ───────────────────────────────────────────
   Langsamer Kameraschwenk (object-position) + leichter Zoom (scale), aktiv
   wenn die Kachel nahe der Viewport-Mitte ist — .is-kenburns wird vom
   IntersectionObserver in app.js gesetzt/entfernt. Macht aus dem Cover-Crop
   ein Feature: die "Kamera" fährt über das ganze 16:9-Bild und zeigt den
   kompletten horizontalen Ablauf. Greift nur bei echtem Cover-Bild;
   prefers-reduced-motion → kein Schwenk (statischer Center-Crop). */
@media (prefers-reduced-motion: no-preference) {
  /* Animation IMMER anwenden, aber pausiert. .is-kenburns schaltet nur
     play-state auf running. So FRIERT das Bild beim Verlassen der Mitte an
     der zuletzt erreichten Position ein (kein Snap auf die Startposition),
     und beim Wiedereintritt wird FORTGESETZT statt neu gestartet.
     fill-mode:both hält vor dem ersten Lauf das from-Frame. */
  .tile-v2--wide .tile-v2__cover-img {
    animation: sfx-kenburns 18s ease-in-out infinite alternate;
    animation-play-state: paused;
    animation-fill-mode: both;
  }
  .tile-v2--wide.is-kenburns .tile-v2__cover-img {
    animation-play-state: running;
    will-change: object-position, transform;
  }
}
@keyframes sfx-kenburns {
  from { object-position: 15% 50%; transform: scale(1.04); }
  to   { object-position: 85% 50%; transform: scale(1.09); }
}

/* ── Kameraschwenk auf Portrait-Cover — bei Hover (wie WIDE) ─────────────
   Schwenk über transform: translate(), NICHT object-position (bei 3:4-Bildern
   in der ~16:9-Box gibt es horizontal keine Cover-Überlappung → object-position
   schwenkt dort nicht; translate nutzt die Zoom-Überlappung, ~22% Rand je
   Seite, < Überlappung → kein Gap).

   PAUSE-PRINZIP (User-Direktive, identisch zu WIDE): Die Animation ist IMMER
   angewandt, aber per default PAUSIERT (fill-mode both → hält das from-Frame =
   Basis). Nur die gehoverte Kachel schaltet auf running. Da man mit der Maus
   stets nur EINE Kachel hovert, ist immer nur EIN Bild animiert; alle anderen
   pausieren — frisch an der Basis, schon animierte FRIEREN an der zuletzt
   erreichten Position ein (kein Zurückfahren, kein Snap). Wiedereintritt setzt
   FORT statt neu zu starten. prefers-reduced-motion → kein Schwenk. */
@media (prefers-reduced-motion: no-preference) {
  .tile-v2--portrait .tile-v2__cover-img {
    animation: sfx-portrait-pan 9s ease-out infinite alternate;
    animation-play-state: paused;
    animation-fill-mode: both;
  }
  .tile-v2--portrait:hover .tile-v2__cover-img {
    animation-play-state: running;
    will-change: transform;
  }
}
@keyframes sfx-portrait-pan {
  /* from = Ruhezustand (paused): LINKS ausgerichtet — translateX(+20%) schiebt
     das (um 1.45 vergrösserte) Bild nach rechts, sodass die LINKE Bildkante an
     der Box-Kante sitzt. to = nach RECHTS geschwenkt: Bild gleitet nach links,
     der rechte Bildteil kommt in den Ausschnitt. ±20% < 22.5% Zoom-Überhang →
     kein Rand. Reiner Horizontal-Schwenk (kein vertikaler Versatz). */
  from { transform: translateX(20%) scale(var(--cover-scale, 1.45)); }
  to   { transform: translateX(-20%) scale(calc(var(--cover-scale, 1.45) + 0.05)); }
}
.tile-v2__cover--empty {
  background: linear-gradient(135deg, var(--bg-alt, #f5f5f5) 0%, #e8e8e8 100%);
}
/* Icon-Fallback-Cover (kein Bild): zentriertes Linien-Icon auf zartem
   Neutral-Verlauf — Cluster/Kind-Icon, Graustufen. Portrait + WIDE. */
.tile-v2__cover--icon {
  display: grid;
  place-items: center;
  min-height: 120px;
  background: linear-gradient(155deg, var(--paper-warm, #f4f5f7) 0%, #e9eaec 100%);
}
.tile-v2__cover--icon .tile-v2__cover-ico {
  color: var(--ink-muted, #6a6a6a);
  line-height: 0;
}
.tile-v2__cover--icon .tile-v2__cover-ico svg {
  width: 90px;
  height: 90px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Icon-im-Text-Form (display_form: icon-text): kleines Icon oben im Header,
   kein Cover-Band — die editorial Text-Karte bleibt erhalten. */
.tile-v2__head-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.tile-v2__head-row .tile-v2__eyebrow { margin: 0; font-size: 13px; }
.tile-v2__head-ico {
  display: inline-flex;
  color: var(--ink-muted, #6a6a6a);
  line-height: 0;
  flex: 0 0 auto;
}
.tile-v2__head-ico svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* WIDE: grösseres Icon-Cover-Icon — das Banner links ist hoch. */
.tile-v2--wide .tile-v2__cover--icon .tile-v2__cover-ico svg {
  width: 208px;
  height: 208px;
}
/* Dunkles Icon-Cover (display_tone: dark) — weiss auf schwarz (WoB). */
.tile-v2__cover--icon-dark {
  /* "Hell-Schwarz" mit klar sichtbarem Verlauf: ein weicher Lichtpunkt oben
     links (radialer Sheen) über einer diagonalen Aufhellung — unten rechts
     läuft es ins Tiefschwarz. Die Spreizung #45484f → #121318 plus der
     White-Alpha-Glow machen den Verlauf auch auf hellen Screens sichtbar. */
  background:
    radial-gradient(125% 100% at 26% 18%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 52%),
    linear-gradient(155deg, #45484f 0%, #26282f 50%, #121318 100%);
}
.tile-v2__cover--icon-dark .tile-v2__cover-ico {
  color: var(--paper, #fafafa);
}
/* Icon-im-Text: Lead eine Zeile kürzer als die Standard-Portrait-Karte. */
.tile-v2--icon-text .tile-v2__summary {
  -webkit-line-clamp: 4;
  line-clamp: 4;
  max-height: calc(4 * 1.5em);
}

/* Meta-Liste (Industry/Region · When/Where · Role) — kleine
   Mono-Pills ohne Border. Wird primär im Header (unter dem Titel)
   gezeigt; in compact-Variante alternativ im Footer. */
.tile-v2__meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 0.75rem;
  font-family: var(--font-mono, monospace);
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}
.tile-v2__meta-item::before {
  content: "·";
  margin-right: 8px;
  opacity: 0.5;
}
.tile-v2__meta-item:first-child::before {
  content: none;
  margin-right: 0;
}
/* Header-Meta — direkt unter dem Titel, mit kleinem Top-Spacing
   damit es vom Titel atmet, aber zur Summary näher steht. */
.tile-v2__meta--header {
  margin-top: 6px;
  margin-bottom: 0;
}

/* ======================================================================
 * Phase γ — KONSOLIDIERTER VARIANT LAYER (kind-uebergreifend)
 *
 * Drei generische Sizes ersetzen 6 kind-spezifische Variants:
 *
 *   .tile-v2--short   Listen-Row — Thumb 56x56 links, Title + (optional)
 *                   Meta-Footer. Kein Cover oben.
 *   .tile-v2--portrait   Standard-Card (default) — Cover 16:9 oben + Title +
 *                   3-4 Zeilen Lead + Tags + "Lesen Sie mehr".
 *   .tile-v2--pick   Feature-Card — Cover dominant (~50 % Hoehe) +
 *                   Title + Tags. Body versteckt. Hover-Lift.
 *
 * Editorial-Modifier (Default fuer md+lg ohne echtes Cover-Bild):
 *   .tile-v2--no-cover  Kein Cover-Block, 32x3 px Akzentlinie oben,
 *                       Body bleibt sichtbar. Spart graue Placeholder-
 *                       Bloecke bei den 90 % bildlosen Inhalten.
 *
 * Sonderfaelle (eigene Geometrie, behalten):
 *   .tile-v2--wide      16:9 Side-by-Side Hero-Banner (ServiceLead).
 *   .tile-v2--cluster   Service-Cluster-Karte mit Gradient-Header.
 *
 * Differenzierung pro Kind: Eyebrow-Text (KIND_EYEBROW) + Meta-Slot
 * (Industry/Region/Role/When). KEINE eigene Geometrie pro Kind.
 * ====================================================================== */

/* ---- SM — Listen-Row mit Thumb LINKS ------------------------------- */
.tile-v2--short {
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  min-height: 84px;
  aspect-ratio: auto;
  align-self: start;
  flex: 0 0 auto;
}
.tile-v2--short .tile-v2__thumb {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-alt, #f5f5f5);
}
.tile-v2--short .tile-v2__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
  display: block;
}
.tile-v2--short .tile-v2__content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tile-v2--short .tile-v2__header { display: block; }
.tile-v2--short .tile-v2__eyebrow { margin: 0 0 2px; font-size: 10px; }
.tile-v2--short .tile-v2__title {
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: calc(2 * 1.3em);
}
.tile-v2--short .tile-v2__body { flex: 0 1 auto; }
.tile-v2--short .tile-v2__summary {
  font-size: 0.8125rem;
  line-height: 1.4;
}
.tile-v2--short .tile-v2__footer {
  margin-top: 4px;
  padding-top: 4px;
  gap: 6px;
}
.tile-v2--short .tile-v2__tags {
  flex-wrap: nowrap;
  overflow: hidden;
  max-height: 1.8em;
}
.tile-v2--short .tile-v2__tag {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 0.65rem;
  padding: 2px 8px;
}

/* ---- MD — Standard-Card (default) ---------------------------------- */
/* A4-Portrait-Aspect (1:1.414) — konstante Tile-Hoehe ueber alle Items
   eines Grids. Vorher: min-height + content-driven Hoehe → Tiles in
   einer Reihe konnten unterschiedlich hoch sein (text-heavy vs cover-
   heavy). Jetzt: deterministisch, klare Visual-Rhythmik. */
.tile-v2--portrait {
  padding: 0;
  overflow: hidden;
  aspect-ratio: 1 / 1.414;
  /* Ruhe-Schatten (vorher keiner) — hebt die Karte vom abgedunkelten
     Hintergrund ab. */
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.15);
}
.tile-v2--portrait:hover {
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.22);
}
.tile-v2--portrait .tile-v2__cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
  margin: 0;
}
/* Bei sichtbarem Cover frisst der 16:9-Banner ~40 % der Karten-Hoehe —
   Lead-Text wird auf 3 Zeilen reduziert, damit Title + Lead + Tags
   ins verbleibende untere Drittel passen. (No-cover behaelt die
   6-Zeilen-Variable aus tile-v2.js, weil dort der Cover-Raum frei ist.) */
/* User-Direktive: Portrait-Karte MIT Cover-Bild → kein Body-Summary mehr
   (sonst Überlauf bei Refstory bzw. abgeschnittene 2 Zeilen bei Insight/
   Use-Case). Stattdessen Titel etwas grösser. Bildlose Karten (no-cover)
   behalten ihren vollen Lead-Text. */
.tile-v2--portrait:not(.tile-v2--no-cover) .tile-v2__summary {
  display: none;
}
.tile-v2--portrait:not(.tile-v2--no-cover) .tile-v2__title {
  font-size: 1.32rem;
  line-height: 1.22;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
/* Image-Portraits (echtes Cover-Bild): Titel stark vergrössert (User-Direktive).
   :has(.tile-v2__cover-img) trifft NUR Kacheln mit echtem Bild — Icon-Cover-
   und Icon-Text-Formen behalten die normale Titelgrösse. */
.tile-v2--portrait:has(.tile-v2__cover-img) .tile-v2__title {
  /* 2026-06-13: von 1.7rem auf 1.45rem zurückgenommen (User: "etwas
     kleiner" auf allen Bild-Kacheln) — Titel brechen seltener mit "…" ab. */
  font-size: 1.45rem;
  line-height: 1.18;
  font-weight: 400;   /* schlanke, editoriale Headline (User-Direktive) */
  letter-spacing: -0.02em;
  /* Auf 2 Zeilen begrenzen (Basis erbt clamp:3): 3 Zeilen à 1.7rem + Cover +
     Eyebrow + Footer sprengten die feste Portrait-Höhe → Tags wurden in der
     Mediathek (schmale Kacheln) abgeschnitten. */
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
/* Refstory mit Cover-Bild: der Meta-Streifen (Industrie · Region) lief
   sonst über die Kartenkante (Tags wurden abgeschnitten). Bei Cover wird
   er ausgeblendet → die Karte zeigt Bild + Titel + Tags, konsistent zu
   Insight/Use-Case. Die volle Meta bleibt auf der Detail-Seite. */
.tile-v2--portrait:not(.tile-v2--no-cover).tile-v2--refstory .tile-v2__meta {
  display: none;
}
.tile-v2--portrait .tile-v2__cover-img {
  width: 100%;
  height: 100%;
  object-fit: var(--cover-fit, cover);
  object-position: var(--cover-pos, center center);
  /* Basis-Zoom (1.45) + LINKS-Ausrichtung als STATISCHER Default (für ALLE,
     auch prefers-reduced-motion): translateX(20%) schiebt das vergrösserte Bild
     nach rechts, sodass die linke Bildkante an der Box sitzt → linker Bildteil
     sichtbar. Der Schwenk nach rechts läuft separat im no-preference-Block.
     translateX < Zoom-Überhang (22.5% bei 1.45) → kein Rand. Per-Bild
     --cover-scale überschreibt den Zoom weiterhin. */
  transform: translateX(20%) scale(var(--cover-scale, 1.45));
  transform-origin: var(--cover-pos, center center);
  display: block;
}
.tile-v2--portrait .tile-v2__cover--empty {
  background: linear-gradient(135deg,
    rgba(90, 101, 115, 0.18) 0%,
    rgba(90, 101, 115, 0.42) 55%,
    rgba(90, 101, 115, 0.62) 100%);
}
.tile-v2--portrait .tile-v2__header,
.tile-v2--portrait .tile-v2__body,
.tile-v2--portrait .tile-v2__footer {
  padding-left: 20px;
  padding-right: 20px;
}
.tile-v2--portrait .tile-v2__header { padding-top: 18px; }
.tile-v2--portrait .tile-v2__footer {
  padding-bottom: 20px;
  padding-top: 12px;
}
/* Portrait-Karten haben feste A4-Höhe (aspect-ratio 1/1.414, overflow:hidden).
   Eine zweite Tag-Reihe (Chips brechen bei schmalen Mediathek-Kacheln um)
   sprengt diese Höhe → der untere Chip wurde am Kartenboden abgeschnitten.
   Daher in Portrait die Tags auf EINE Reihe begrenzen: eine Chip-Reihe ist
   26px, die zweite beginnt bei ~32px → max-height 28px zeigt Reihe 1 voll und
   klippt Reihe 2 sauber weg (kein halb abgeschnittener Chip mehr). */
.tile-v2--portrait .tile-v2__tags {
  max-height: 28px;
  overflow: hidden;
}

/* ---- LG — Feature-Card (Cover dominant, Body versteckt) ------------ */
.tile-v2--pick {
  padding: 0;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  min-height: 460px;
  height: 100%;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}
.tile-v2--pick:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  border-color: var(--ink);
}
.tile-v2--pick .tile-v2__cover {
  flex: 0 0 50%;
  width: 100%;
  aspect-ratio: auto;     /* flex-basis steuert die Höhe */
  border-radius: 0;
  border-bottom: 1px solid var(--line);
  margin: 0;
  overflow: hidden;
}
.tile-v2--pick .tile-v2__cover-img {
  width: 100%;
  height: 100%;
  object-fit: var(--cover-fit, cover);
  object-position: var(--cover-pos, center center);
  transform: scale(var(--cover-scale, 1));
  transform-origin: var(--cover-pos, center center);
  display: block;
}
.tile-v2--pick .tile-v2__cover--empty {
  background: linear-gradient(135deg,
    rgba(90, 101, 115, 0.18) 0%,
    rgba(90, 101, 115, 0.42) 55%,
    rgba(90, 101, 115, 0.62) 100%);
}
.tile-v2--pick .tile-v2__header,
.tile-v2--pick .tile-v2__body,
.tile-v2--pick .tile-v2__footer {
  padding-left: 24px;
  padding-right: 24px;
}
.tile-v2--pick .tile-v2__header { padding-top: 20px; }
.tile-v2--pick .tile-v2__footer { padding-top: 16px; padding-bottom: 20px; }
.tile-v2--pick .tile-v2__body { display: none; }
/* Lange Titel: 2-Zeilen-Clamp + Tags-Nowrap (sonst sprengen sie den
   3:4-Container bei schmaleren Grid-Cells). */
.tile-v2--pick .tile-v2__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tile-v2--pick .tile-v2__tags {
  flex-wrap: nowrap;
  overflow: hidden;
  max-height: 1.8em;
}
.tile-v2--pick .tile-v2__tag {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* ---- No-Cover Editorial-Mode (md + lg ohne echtes Bild) ------------ */
/* Statt grauer Platzhalter-Block: reine Text-Karte mit 32x3 px schwarzer
   Akzentlinie oben links als visueller Anker. Konsistent mit Substack/
   NYT-Card-Sprache. Greift wenn slotCover() leer returnt (siehe
   suppressEmptyCover in tile-v2.js). */
.tile-v2--portrait.tile-v2--no-cover,
.tile-v2--pick.tile-v2--no-cover {
  position: relative;
  padding: 24px 20px 20px;
}
/* User-Direktive: kein Akzent-Anker mehr — reine Text-Karte ohne Deko.
   (Die ::before-Akzentlinie wurde bewusst entfernt.) */
/* Body wird auch bei lg sichtbar (lg default hat display:none) */
.tile-v2--pick.tile-v2--no-cover .tile-v2__body {
  display: block;
}
/* LG ohne Cover braucht kein 3:4-Aspect mehr — wird zur freien Editorial-Card */
.tile-v2--pick.tile-v2--no-cover {
  aspect-ratio: auto;
  height: auto;
  padding: 28px 24px 20px;
}
/* Header/Body/Footer padding reset (md+lg haben sonst eigenes side-padding) */
.tile-v2--portrait.tile-v2--no-cover .tile-v2__header,
.tile-v2--portrait.tile-v2--no-cover .tile-v2__body,
.tile-v2--portrait.tile-v2--no-cover .tile-v2__footer,
.tile-v2--pick.tile-v2--no-cover .tile-v2__header,
.tile-v2--pick.tile-v2--no-cover .tile-v2__body,
.tile-v2--pick.tile-v2--no-cover .tile-v2__footer {
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
}
.tile-v2--portrait.tile-v2--no-cover .tile-v2__title,
.tile-v2--pick.tile-v2--no-cover .tile-v2__title {
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

/* ---- WIDE_DET — Artikel-/Langform-Block (service + use_case) -------- */
/* KEINE Card: kein Rahmen, kein Hintergrund, keine seitlichen Abstände.
   Der Artikel spannt die volle Breite der normalen Section-Ausgabe
   (der .container gibt die Breite vor). Banner oben, darunter der volle
   Detail-Text zweispaltig. */
.tile-v2--wide-det {
  display: block;
  width: 100%;
  aspect-ratio: auto;
  height: auto;
  text-align: left;
  /* Grosse Kachel: Card-Chrome (Rahmen/Hintergrund/Radius). Horizontales
     Padding = Standard-Tile-Maß (--tile-v2-pad) → Inhalt fluchtet LINKS-bündig
     mit den übrigen Kacheln, nicht stärker eingerückt. Vertikal etwas mehr Luft
     fürs Artikel-Format. */
  background: var(--bg, #fff);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  padding: 30px var(--tile-v2-pad, 24px);
  cursor: pointer;
}
.tile-v2--wide-det .tile-v2__detbanner {
  width: 100%;
  max-height: 340px;
  overflow: hidden;
  border-radius: 10px;      /* nur das Bild leicht gerundet, kein Card-Rahmen */
  margin-bottom: 22px;
}
.tile-v2--wide-det .tile-v2__detbanner-img {
  width: 100%;
  height: 100%;
  max-height: 340px;
  object-fit: cover;
  display: block;
}
.tile-v2--wide-det .tile-v2__content {
  padding: 0;             /* keine seitlichen Abstände — volle Breite */
  max-width: none;
  margin: 0;
}
.tile-v2--wide-det .tile-v2__eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted, #6b6b6b);
}
.tile-v2--wide-det .tile-v2__title {
  /* Exakt im Stil der Bereichsüberschrift (.section-title): Inter Tight,
     font-weight 500, --ls-h2-Tracking (-0.02em), gleiche fluid-Size. So sieht
     der WIDE_DET-Aufmacher-Titel identisch zu den Section-Headlines aus. */
  font-family: var(--font-prose);
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: var(--ls-h2);
  font-weight: 500;
  color: var(--ink);
  margin: 8px 0 38px;   /* Luft Titel → Body (war 14px → 26px → 38px) */
  -webkit-line-clamp: unset;
  line-clamp: unset;
  display: block;
}
/* Voller Fliesstext (renderMiniMarkdown-Output) — ZWEISPALTIG.
   CSS-Multi-Column bricht den Text automatisch an Absatzgrenzen in zwei
   balancierte Spalten → halbe Höhe. break-inside:avoid verhindert, dass
   ein Absatz/Listenblock mitten in der Spalte zerrissen wird. Auf schmalen
   Viewports (Mobile) fällt es auf eine Spalte zurück. */
.tile-v2--wide-det .tile-v2__detbody {
  font-size: 1.02rem;
  line-height: 1.62;
  color: var(--ink, #1a1a1a);
  column-count: 2;
  column-gap: 48px;
}
.tile-v2--wide-det .tile-v2__detbody > * {
  break-inside: avoid;            /* Absatz/Liste nicht zwischen Spalten trennen */
}
.tile-v2--wide-det .tile-v2__detbody > * + * { margin-top: 0.85em; }
/* TOP-Ausrichtung der zwei Spalten: das ERSTE Element des detbody (= Kopf
   der linken Spalte) bekommt keinen Top-Margin. Der Browser trimmt den
   Top-Margin des ersten Elements der ZWEITEN Spalte ohnehin → ohne diese
   Regel sässe die linke Spalte um den Überschrift-Margin (~1.4em) tiefer
   als die rechte. So bilden Titel oben + beide Spaltenköpfe eine Linie. */
.tile-v2--wide-det .tile-v2__detbody > :first-child { margin-top: 0; }
.tile-v2--wide-det .tile-v2__detbody h2,
.tile-v2--wide-det .tile-v2__detbody h3 {
  font-size: 1.18rem;
  line-height: 1.3;
  margin-top: 1.4em;
  font-weight: 650;
  break-after: avoid;             /* Überschrift bleibt bei ihrem Folgeblock */
}
/* Inline-Fettdruck (**…** → <strong>/<b>) im Fliesstext: 600 (Semibold)
   statt Browser-Default 700 — Hervorhebungen betont, aber nicht klotzig. */
.tile-v2--wide-det .tile-v2__detbody strong,
.tile-v2--wide-det .tile-v2__detbody b {
  font-weight: 600;
}
@media (max-width: 760px) {
  .tile-v2--wide-det .tile-v2__detbody { column-count: 1; }
}
.tile-v2--wide-det .tile-v2__detbody ul,
.tile-v2--wide-det .tile-v2__detbody ol { padding-left: 1.3em; }
.tile-v2--wide-det .tile-v2__detbody li { margin-top: 0.3em; }
.tile-v2--wide-det .tile-v2__detbody code {
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.88em;
  background: rgba(0,0,0,0.05);
  padding: 1px 5px;
  border-radius: 4px;
}
/* Tags als vollbreite Fuesszeile UNTER beiden Spalten: column-span:all
   zwingt die zwei Textspalten, darueber auszubalancieren, und spannt die
   Tag-Reihe vollbreit am Ende. Trennlinie macht den Abschluss klar. */
.tile-v2--wide-det .tile-v2__detbody .tile-v2__tags {
  column-span: all;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line, #e6e6e6);
}

/* ════════════════════════════════════════════════════════════════════════
 * Section-Layouts — geteilt zwischen Section-Lab und Live-Renderer
 *
 * Die sec-*-Klassen definieren die Grid-Geometrie pro Section. Sie werden
 * sowohl von section-render.html (Lab-Iframes) als auch von app.js
 * (renderMediaMixedGrid, refreshMediaRecommend, relTile) auf die selben
 * Tile-Grids angewendet. Eine Änderung hier wirkt automatisch in beiden.
 *
 * Slot-Konfiguration (welche Stage pro Position) liegt in section-defs.js.
 * Tile-Geometrie (.tile-v2--pick etc.) liegt weiter unten in dieser Datei.
 * ════════════════════════════════════════════════════════════════════════ */

/* Header-Picks + Mediathek-Top — identische Hierarchie:
   1× Pick (2/4 Spalten, dominant) + 2× Short (je 1/4, Beifahrer) */
.sec-header-picks,
.sec-mediathek-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 720px) {
  .sec-header-picks,
  .sec-mediathek-top {
    grid-template-columns: 1fr;
  }
}

/* Was-passt-dazu — 3 gleichwertige Portraits */
.sec-was-passt {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 720px) {
  .sec-was-passt {
    grid-template-columns: 1fr;
  }
}

/* Mediathek-Tail — 3-spaltig auf Desktop, 1-spaltig auf Mobile */
.sec-mediathek-tail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 720px) {
  .sec-mediathek-tail {
    grid-template-columns: 1fr;
  }
}

/* ════════════════════════════════════════════════════════════════════════
 * Phase ζ — Agent-First-Stages (pick / portrait / short)
 *
 * Vier semantische Stages mit eigenen CSS-Hooks. Im Verhalten heute Aliase
 * von lg/md/sm, ABER mit zusätzlichen Editorial-Layouts für den Fall
 * "kein echtes Cover-Bild gesetzt" — dann wird ein dezidierter Editorial-
 * Hero (Cluster-getönter Gradient + Eyebrow) gerendert statt der alten
 * 32×3px-Akzentlinie.
 *
 * Inheritance: tile-v2--pick erbt das komplette Layout von tile-v2--pick
 * (selbe Slot-Struktur, gleiche line-clamps), wir setzen NUR die Hooks
 * für Editorial-Variation und ggf. kleinere Geometrie-Tweaks.
 * ════════════════════════════════════════════════════════════════════════ */

/* Stage: pick — Querformat-Hero (21/9), Cover/Editorial LINKS, Body RECHTS.
   Erbt von tile-v2--wide via Stage-Alias (siehe tile-v2.js::STAGE_ALIAS).
   Die wichtige Geometrie kommt also schon von .tile-v2--wide; wir setzen
   hier nur Pick-spezifische Tweaks:
     • aspect-ratio etwas breiter als wide (21/9 statt 16/9) — Pick darf
       als Hero ruhig stärker dominieren
     • mindesthöhe etwas grösser, damit der linke Editorial-Block
       genug Raum hat um zu atmen */
.tile-v2--pick {
  aspect-ratio: 21 / 9;
  min-height: 280px;
}

/* Stage: portrait (≈ md) — A4-Aspect, kopiere die Kern-Geometrie von md */
.tile-v2--portrait {
  aspect-ratio: 1 / 1.414;
  min-height: 380px;
}
.tile-v2--portrait .tile-v2__cover {
  aspect-ratio: 16 / 9;
}

/* Stage: short (≈ sm) — Listen-Row-Geometrie kopieren */
.tile-v2--short {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  min-height: 80px;
}

/* ──────────────────────────────────────────────────────────────────────
 * Pick OHNE Cover — quadratisch (1/1), 1-spaltig, 1/2 Breite.
 *
 * Statt 21/9 Querformat wechselt Pick.no-cover zu einer quadratischen
 * Form. Damit kann der Agent zwei Pick-Editorial-Tiles nebeneinander
 * platzieren (z.B. statt 1× breitem Pick-Cover bei Mediathek-Top, wenn
 * zwei wichtige bildlose Items zu zeigen sind).
 *
 * Layout-Implikationen:
 *   • aspect-ratio wechselt von 21/9 zu 1/1
 *   • Cover-Slot fällt weg (Renderer emittiert kein Reserve-Div bei pick)
 *   • Content nimmt 100% der Tile-Breite (statt 50% bei Cover-Mode)
 *   • Tile-Breite wird vom Section-Grid bestimmt — Agent kann pick·no-
 *     cover in eine "Short-Spalte" (1fr) statt "Pick-Spalte" (2fr) packen
 *
 * Wide-Variante behält bei no-cover 2-spaltig (Reserve-Slot) — nur pick
 * wechselt das Layout. Das ist der Unterschied zwischen den beiden:
 * wide = immer Querformat, pick = situativ.
 * ──────────────────────────────────────────────────────────────────── */
.tile-v2--pick.tile-v2--no-cover {
  aspect-ratio: 1 / 1;
  /* Override des wide-Grids (1fr 1fr) — Content soll volle Tile-Breite
     nehmen, nicht nur 50%. Vorher saß der Text in der ersten Grid-Spalte
     und ließ die zweite (Cover-Slot-Platz) leer = 50% leerer Raum rechts. */
  grid-template-columns: 1fr;
}
.tile-v2--pick.tile-v2--no-cover .tile-v2__content {
  padding: 20px 22px;
}
.tile-v2--pick.tile-v2--no-cover .tile-v2__title {
  font-size: 1.3rem;
  line-height: 1.22;
  letter-spacing: -0.005em;
}

/* Reserve-Cover für WIDE (nicht pick) — transparente Spalte erhält
   das 50/50-Layout im wide-no-cover-Fall ohne sichtbaren Marker. */
.tile-v2__cover--reserved {
  background: transparent;
  border: 0;
}

/* Pick ohne Cover behält dieselbe Geometrie wie Mit Bild — 2-spaltig,
   Text rechts in 50% Breite. Headline-Größe entspricht der wide-Default,
   keine no-cover-spezifische Override. */

/* Portrait OHNE Cover — A4-Seitenverhältnis (1/√2) bleibt erhalten.
   Ohne Cover ist mehr vertikaler Platz für Lead verfügbar (kein 16:9-
   Cover-Block oben), daher Clamp auf 9 Zeilen erhöht statt 5. Damit
   füllt der Lead den verfügbaren Raum unter Eyebrow + Headline und
   über dem Footer (Read-more + Tags) ohne overflow.
   aspect-ratio wird NICHT aufgelöst — die Form bleibt A4-Hochformat. */
.tile-v2--portrait.tile-v2--no-cover .tile-v2__summary {
  -webkit-line-clamp: 9;
  line-clamp: 9;
  max-height: calc(9 * 1.6em);
}

/* ════════════════════════════════════════════════════════════════════════
 * Phase θ — Member-Familie (member-card + member-mini)
 *
 * Eigene Render-Familie für Personen-Karten. Portrait quadratisch mit
 * Rundung (border-radius 10px), Initialen-Fallback mit Cluster-Gradient.
 * Kontakt-CTA als prominenter Button im Footer.
 * ════════════════════════════════════════════════════════════════════════ */

/* member-card — Profile-Card-Stil: rundes Portrait oben zentriert, danach
   alles textuell zentriert. Card wächst mit dem Inhalt (kein min-height-
   Zwang). */
.tile-v2--member-card {
  display: flex;
  flex-direction: column;
  aspect-ratio: auto;
  padding: 0;
  gap: 0;
  overflow: hidden;
  text-align: center;
}
.tile-v2--member-card .tile-v2__portrait {
  width: 140px;
  height: 140px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  margin: 28px auto 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2a2a2c 0%, #3e3e40 100%);
}
.tile-v2--member-card .tile-v2__portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.tile-v2--member-card .tile-v2__content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 24px 18px;
  gap: 10px;
}
.tile-v2--member-card .tile-v2__header {
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.tile-v2--member-card .tile-v2__eyebrow {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted, #7a7a78);
  margin: 0 0 2px;
}
.tile-v2--member-card .tile-v2__member-name {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin: 0;
}
.tile-v2--member-card .tile-v2__member-role {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink-soft, #3a3a38);
  line-height: 1.35;
  margin: 0;
}
.tile-v2--member-card .tile-v2__summary {
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--ink-soft, #3a3a38);
  margin: 4px 0 0;
  /* Bio darf 4 Zeilen — clampLines:4 aus VARIANT_DEFAULTS via CSS-Variable */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: calc(4 * 1.55em);
}
.tile-v2--member-card .tile-v2__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 6px;
}
.tile-v2--member-card .tile-v2__tag {
  font-size: 0.72rem;
  padding: 2px 8px;
  background: var(--bg-soft, #f7f7f5);
  border: 1px solid var(--line, #e3e3e0);
  border-radius: 999px;
  color: var(--ink-soft, #3a3a38);
  font-family: var(--font-mono, ui-monospace, monospace);
}
.tile-v2--member-card .tile-v2__footer {
  margin-top: auto;
  padding: 16px 0 0;
  border-top: 1px solid var(--line, #e3e3e0);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.tile-v2--member-card .tile-v2__member-cta-btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  background: var(--ink, #0a0a0a);
  color: #fff;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 120ms ease;
}
.tile-v2--member-card .tile-v2__member-cta-btn:hover {
  background: var(--ink-soft, #2a2a2c);
}
.tile-v2--member-card .tile-v2__member-cta-phone {
  font-size: 0.78rem;
  color: var(--ink-muted, #7a7a78);
  text-decoration: none;
  font-family: var(--font-mono, ui-monospace, monospace);
  white-space: nowrap;
}
.tile-v2--member-card .tile-v2__member-cta-phone:hover {
  color: var(--ink, #0a0a0a);
}

/* Initialen-Fallback (kein echtes Foto): Cluster-Gradient + große Initialen */
.tile-v2__portrait--initials {
  position: relative;
  overflow: hidden;
}
.tile-v2__portrait--initials::before {
  /* Subtile Stripe-Textur wie bei den Editorial-Heros — Markierung dass
     dies kein echtes Foto ist, sondern Initialen-Placeholder. */
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    135deg,
    rgba(255,255,255,0.04) 0px,
    rgba(255,255,255,0.04) 2px,
    transparent 2px,
    transparent 14px
  );
  pointer-events: none;
}
.tile-v2__portrait-initials {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.95);
}

/* Member-Avatar einheitlich dunkelgrau (User-Direktive). Die frühere
   Cluster-Farbcodierung (sap=blau, btp=lila, ai=grün, ops=braun) entfällt
   zugunsten eines ruhigen, neutralen Looks. Catch-all über die initials-
   Variante deckt auch Berater ohne erkannten Cluster ab. Weisse Initialen
   bleiben gut lesbar. */
.tile-v2__portrait--initials,
.tile-v2__portrait[data-cluster="sap"],
.tile-v2__portrait[data-cluster="btp"],
.tile-v2__portrait[data-cluster="ai"],
.tile-v2__portrait[data-cluster="ops"] {
  background: linear-gradient(135deg, #2f2f2f 0%, #4d4d4d 100%);
}

/* SFOUR-Logo-Farben — von member-mini genutzt, deterministisch via id-Hash.
   Werte aus den 4 Logo-Quadraten: Cyan #00D7EE, Grau #C7C7C7, Orange
   #FF9A1D, Magenta #D909FE. Gradients beginnen etwas dunkler damit weiße
   Initialen lesbar bleiben — Ausnahme: Grau, wo wir auf dunkle Initialen
   wechseln (siehe Override unten). */
.tile-v2__portrait[data-cluster="logo-cyan"]    { background: linear-gradient(135deg, #00a4c4 0%, #00d7ee 100%); }
.tile-v2__portrait[data-cluster="logo-orange"]  { background: linear-gradient(135deg, #d77800 0%, #ff9a1d 100%); }
.tile-v2__portrait[data-cluster="logo-magenta"] { background: linear-gradient(135deg, #b000d4 0%, #d909fe 100%); }
.tile-v2__portrait[data-cluster="logo-gray"]    { background: linear-gradient(135deg, #9a9a9a 0%, #c7c7c7 100%); }
/* Grau-Hintergrund hell → dunkle Initialen für Kontrast */
.tile-v2__portrait[data-cluster="logo-gray"] .tile-v2__portrait-initials {
  color: rgba(0, 0, 0, 0.78);
}

/* member-mini — Kompakte Listen-Row */
.tile-v2--member-mini {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  min-height: 76px;
  aspect-ratio: auto;
}
.tile-v2--member-mini .tile-v2__portrait {
  width: 56px;
  height: 56px;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tile-v2--member-mini .tile-v2__portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tile-v2--member-mini .tile-v2__portrait-initials {
  font-size: 1.1rem;
}
.tile-v2--member-mini .tile-v2__content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;     /* erlaubt text-overflow */
}
.tile-v2--member-mini .tile-v2__member-name {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tile-v2--member-mini .tile-v2__member-role {
  font-size: 0.8rem;
  color: var(--ink-muted, #7a7a78);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tile-v2--member-mini .tile-v2__member-mini-phone {
  flex-shrink: 0;
  font-size: 1.2rem;
  color: var(--ink-muted, #7a7a78);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 6px;
  transition: background 120ms ease, color 120ms ease;
}
.tile-v2--member-mini .tile-v2__member-mini-phone:hover {
  background: var(--bg-soft, #f7f7f5);
  color: var(--ink, #0a0a0a);
}

/* ----------------------------------------------------------------------
 * Variante F — cluster  (Service-Cluster-Karte mit abstraktem Header)
 *
 * Spezial-Variante für die Service-Cluster-Übersicht. Oberer Teil ist
 * ein abstrakter Gradient-Header mit dem Cluster-Code (SAP/BTP/AI/OPS),
 * unten kommt eyebrow ("12 Themen · Track A") + kurzer Titel. Kein
 * Body, keine Tags, kein Cover-Bild.
 * ---------------------------------------------------------------------- */
.tile-v2--cluster {
  aspect-ratio: 3 / 4;
  min-height: 360px;
  padding: 0;                    /* Header und Content haben eigenes padding */
  overflow: hidden;
}
.tile-v2--cluster .tile-v2__cluster-header {
  flex: 0 0 60%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.15) 0%, transparent 50%),
    linear-gradient(135deg, var(--ink) 0%, #2a2a2a 100%);
  color: #fff;
  border-bottom: 1px solid var(--line);
  /* Subtile Grid-Pattern für visuelle Tiefe */
  background-image:
    linear-gradient(135deg, var(--ink) 0%, #2a2a2a 100%),
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.05) 0%, transparent 50%);
}
.tile-v2--cluster .tile-v2__cluster-chip {
  font-family: var(--font-mono, monospace);
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.95);
}
.tile-v2--cluster .tile-v2__content {
  flex: 1 1 auto;
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}
.tile-v2--cluster .tile-v2__title {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.tile-v2--cluster .tile-v2__eyebrow {
  margin: 0 0 4px;
}

/* Cluster-Cards mit Cluster-Tönung — pro Cluster eine eigene Header-
   Background-Variante (über data-tile-kind="service" + data-cluster).
   Der Cluster-Code wird vom Render in clusterChip gesetzt → wir tönen
   nach .tile-v2__cluster-chip-Wert. */
.tile-v2--cluster:has(.tile-v2__cluster-chip:is(:not(:empty)))
  .tile-v2__cluster-header {
  /* fallback wenn :has nicht greift, oben definiert */
}

/* ----------------------------------------------------------------------
 * Variante A — wide  (16:9 Hero-Banner mit Cover links + Inhalt rechts)
 *
 * Erste Karte im ServiceLead-Grid oder als Stand-alone-Hero. Cover füllt
 * die linke Hälfte (full height), Header+Body+Footer stapeln rechts mit
 * grosser Typografie. Auf schmalen Viewports klappt das Layout zu einer
 * Spalte.
 * ---------------------------------------------------------------------- */
.tile-v2--wide {
  aspect-ratio: 16 / 9;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  /* Kräftigerer Ruhe-Schatten, damit die Karte vom (abgedunkelten)
     Hintergrund klar abhebt. */
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
}
.tile-v2--wide:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.24);
  border-color: var(--ink);
}
/* Wide-Hero OHNE echtes Bild → kein leerer Cover-Halbraum: einspaltig,
   höhenfrei (kein erzwungenes 16:9), reiner Text-Hero. */
.tile-v2--wide.tile-v2--no-cover {
  grid-template-columns: 1fr;
  aspect-ratio: auto;
}
.tile-v2--wide .tile-v2__cover {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;          /* Höhe folgt dem Grid-Track */
  border-radius: 0;
  border-right: 1px solid var(--line);
  border-bottom: 0;
  margin: 0;
}
.tile-v2--wide .tile-v2__cover-img {
  width: 100%;
  height: 100%;
  object-fit: var(--cover-fit, cover);
  object-position: var(--cover-pos, center center);
  transform: scale(var(--cover-scale, 1));
  transform-origin: var(--cover-pos, center center);
}
.tile-v2--wide .tile-v2__content {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3.5vw, 56px);
  gap: 16px;
  justify-content: center;
}
/* Body NICHT expandieren — sonst greift justify-content:center oben
   nicht, weil flex:1 1 auto den ganzen Restraum schluckt. Tags +
   Lesen-Sie-mehr ruecken dadurch direkt unter den Lead-Text statt
   am Karten-Boden zu kleben. */
.tile-v2--wide .tile-v2__body {
  flex: 0 0 auto;
}
.tile-v2--wide .tile-v2__title {
  font-size: clamp(1.75rem, 3.2vw, 2.7rem);  /* gross + schlank, leicht reduziert */
  font-weight: 400;                          /* schlank, editorial wie Portrait */
  line-height: 1.12;
  letter-spacing: -0.02em;
  max-width: 22ch;
}
.tile-v2--wide .tile-v2__summary {
  font-size: clamp(0.95rem, 1.1vw, 1.0625rem);
  line-height: 1.55;
  max-width: 48ch;
}
/* Footer im wide-Layout: kein margin-top:auto (würde im flex-Stack
   nichts ändern weil content vertikal zentriert ist), gap zwischen
   readmore und tags. */
.tile-v2--wide .tile-v2__footer {
  margin-top: 0;
  padding-top: 8px;
}
@media (max-width: 720px) {
  .tile-v2--wide {
    grid-template-columns: 1fr;
    aspect-ratio: auto;
  }
  .tile-v2--wide .tile-v2__cover {
    aspect-ratio: 16 / 9;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

/* Phase γ: Variante B (portrait-3d) + Variante E (compact) wurden
   entfernt — ihre Funktion uebernehmen jetzt die generischen Sizes
   .tile-v2--pick (war portrait-3d) und .tile-v2--short (war compact).
   Legacy-Aufrufer renderTileV2(item, "portrait-3d"/"compact")
   funktionieren weiter, weil tile-v2.js sie via _LEGACY_VARIANT_MAP
   auf die neuen Sizes umleitet. */

/* TILE-V2 — ENDE
 * ============================================================================ */

/* ============================================================================
 * DEFENSIVE OVERRIDE — Chat-Form-Container (.agent-prompt, .mini-hero-form,
 * .dp-cta-form) dürfen NIEMALS ein eigenes Pill/Oval um alle Kinder bilden.
 * Eine alte Vorschau/Cache-Variante könnte sonst noch border + border-radius
 * setzen → das ergibt das "ovale" Bild das der User mehrfach gemeldet hat.
 * Diese Regel kommt ganz am Ende und gewinnt im Cascade gegen frühere Regeln
 * gleicher Spezifität. Per !important auf die wenigen kritischen Properties,
 * damit auch !important-Regeln (z.B. aus alten Mobile-Media-Queries oder
 * Workspace-Preview-CSS) sicher überschrieben werden. Die Pill-Form lebt
 * jetzt ausschließlich auf den Kindern (input, button, mic, tts). */
.agent-prompt,
.mini-hero-form,
.dp-cta-form {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
}
/* Ausnahme: Der image-hero-Maxi-Hero darf weiter Glas-bg auf dem Input
   selbst tragen (eigene Regel oben), aber wir müssen auch dort die
   Glass-Optik vom Input erlauben — der Container bleibt transparent. */
.hero.hero--with-image .agent-prompt input {
  background: rgba(10, 10, 10, 0.40) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: var(--radius-pill) !important;
}
.hero.hero--with-image .agent-prompt #agent-mic,
.hero.hero--with-image .agent-prompt #agent-tts {
  background: rgba(10, 10, 10, 0.40) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: var(--radius-pill) !important;
}
.hero.hero--with-image .agent-prompt #agent-submit {
  background: #ffffff !important;
  color: var(--ink) !important;
  border-radius: var(--radius-pill) !important;
}

/* ============================================================================
 * Active State für Audio (TTS) + Voice (Mic) Buttons.
 * Reagiert auf BEIDE Signale gleichzeitig:
 *   1. Klasse: .agent-mic--on / .is-listening / .agent-tts-toggle--on
 *      (wird von app.js gesetzt — z.B. bindVoiceIn / bindVoiceOutToggle)
 *   2. aria-pressed="true" als Fallback — Browser-Standard für Toggle-Buttons.
 *      Selbst wenn ein Code-Pfad nur aria-pressed setzt aber die --on-Klasse
 *      vergisst, wird die Pille schwarz.
 *
 * Schwarze Pille + weiße Schrift analog zum Submit-Button. Hover-Farben
 * und Mic-Pulse-Animation bleiben erhalten. */
.agent-mic--on,
.is-listening,
.agent-tts-toggle--on,
.agent-mic[aria-pressed="true"],
.agent-tts-toggle[aria-pressed="true"],
.mini-hero-mic[aria-pressed="true"],
.mini-hero-tts[aria-pressed="true"],
.dp-cta-mic[aria-pressed="true"],
.dp-cta-tts[aria-pressed="true"],
.agent-prompt #agent-mic.agent-mic--on,
.agent-prompt #agent-mic.is-listening,
.agent-prompt #agent-tts.agent-tts-toggle--on,
.agent-prompt #agent-mic[aria-pressed="true"],
.agent-prompt #agent-tts[aria-pressed="true"],
.agent-prompt.agent-prompt--mini #agent-mic.agent-mic--on,
.agent-prompt.agent-prompt--mini #agent-mic.is-listening,
.agent-prompt.agent-prompt--mini #agent-tts.agent-tts-toggle--on,
.agent-prompt.agent-prompt--mini #agent-mic[aria-pressed="true"],
.agent-prompt.agent-prompt--mini #agent-tts[aria-pressed="true"],
.agent-prompt.agent-prompt--mini .mini-hero-mic.agent-mic--on,
.agent-prompt.agent-prompt--mini .mini-hero-mic.is-listening,
.agent-prompt.agent-prompt--mini .mini-hero-tts.agent-tts-toggle--on,
.agent-prompt.agent-prompt--mini .mini-hero-mic[aria-pressed="true"],
.agent-prompt.agent-prompt--mini .mini-hero-tts[aria-pressed="true"],
.agent-prompt.dp-cta-form .dp-cta-mic.agent-mic--on,
.agent-prompt.dp-cta-form .dp-cta-mic.is-listening,
.agent-prompt.dp-cta-form .dp-cta-tts.agent-tts-toggle--on,
.agent-prompt.dp-cta-form .dp-cta-mic[aria-pressed="true"],
.agent-prompt.dp-cta-form .dp-cta-tts[aria-pressed="true"],
.hero.hero--with-image .agent-prompt #agent-mic.agent-mic--on,
.hero.hero--with-image .agent-prompt #agent-mic.is-listening,
.hero.hero--with-image .agent-prompt #agent-tts.agent-tts-toggle--on,
.hero.hero--with-image .agent-prompt #agent-mic[aria-pressed="true"],
.hero.hero--with-image .agent-prompt #agent-tts[aria-pressed="true"] {
  background: var(--ink-deep, #050505) !important;
  color: var(--paper, #fafafa) !important;
  border-color: var(--ink-deep, #050505) !important;
}
/* Mic-Dot pulsiert rot gegen die schwarze Pille während Aufnahme.
   TTS-Icon bekommt weißes Glow gegen schwarze Pille. */
.agent-mic--on .agent-mic-dot,
.is-listening .agent-mic-dot,
.agent-mic[aria-pressed="true"] .agent-mic-dot {
  background: #ff7b7b !important;
}
.agent-tts-toggle--on .agent-mic-icon,
.agent-tts-toggle[aria-pressed="true"] .agent-mic-icon {
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.55)) !important;
}


/* ─────────────────────────────────────────────────────────────────────
   DISCOVERY-MODE (Mode 2 — Proaktive Sondierung)
   Pendant zu app/discover.py + window._discoveryMode.
   ─────────────────────────────────────────────────────────────────── */

/* Toggle-Button in der Chat-Form — Aktiv-State sichtbar (Accent + Glow) */
.agent-discover-toggle--active {
  background: linear-gradient(135deg, #5b8def 0%, #4a76d1 100%) !important;
  color: #ffffff !important;
  border-color: #4a76d1 !important;
  box-shadow: 0 0 0 3px rgba(91, 141, 239, 0.18),
              0 2px 8px rgba(91, 141, 239, 0.35);
}
.agent-discover-toggle--active:hover {
  background: linear-gradient(135deg, #6996f0 0%, #5582d8 100%) !important;
  color: #ffffff !important;
  opacity: 1;
}
.agent-discover-toggle--active .agent-mic-text {
  font-weight: 600;
}

/* Mode-Change-Notice — Floating Toast oben mittig.
   position:fixed, layout-unabhängig, sichtbar auf JEDER Page.
   class-driven opacity/transform statt CSS-animation, damit das JS
   den Lifecycle kontrollieren kann (kein Race-mit-Animation). */
.discover-mode-notice {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  z-index: 9999;
  max-width: 540px;
  padding: 14px 24px;
  background: linear-gradient(135deg, #5b8def 0%, #4a76d1 100%);
  border: none;
  border-radius: 12px;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 12px 36px rgba(74, 118, 209, 0.35),
              0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease, transform 320ms cubic-bezier(.34, 1.56, .64, 1);
}
.discover-mode-notice--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.discover-mode-notice--leaving {
  opacity: 0;
  transform: translateX(-50%) translateY(-8px);
  transition: opacity 380ms ease, transform 380ms ease;
}
.discover-mode-notice[data-mode="inactive"] {
  background: linear-gradient(135deg, #3a3a3a 0%, #1a1a1a 100%);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25),
              0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}
@media (max-width: 720px) {
  .discover-mode-notice {
    top: 64px;
    max-width: calc(100vw - 24px);
    padding: 12px 18px;
    font-size: 0.875rem;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   DISCOVERY-ACTIVE — Body-Klasse während Sondierung läuft.
   Suppress die Standard-Antwort-UI (agent-response, agent-status-host),
   damit Antwort + Tiles NICHT doppelt erscheinen (einmal in unserer
   Section + einmal im Legacy-Container). !important weil die Standard-
   Pipeline mehrfach hidden/display anpasst.
   ───────────────────────────────────────────────────────────────────── */
body.discovery-active #agent-status-host,
body.discovery-active #agent-response {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────────────────
   DISCOVERY-SECTION — Inline-Layout im Stil der Standard-Homepage.
   Pro Turn: Frage-Header → Antwort → optionale CTA-Karte → 3 Tiles.
   Section wächst nach unten. Member-Card am Ende, wird pro Turn
   aktualisiert. Status-Leiste oben (Schritt-Counter, Pain, Beenden).
   ───────────────────────────────────────────────────────────────────── */

.discover-section {
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Head — neutrale Status-Leiste im Standard-HP-Design (Black/White) */
.discover-section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding-bottom: 10px;
}
.discover-section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft, #666);
}
.discover-section-pain {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.05);
  color: var(--ink, #1a1a1a);
  font-size: 0.78rem;
  font-weight: 500;
  border: 1px solid rgba(0, 0, 0, 0.10);
}
.discover-section-stop {
  margin-left: auto;
  padding: 5px 14px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.18);
  color: var(--ink-soft, #555);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.discover-section-stop:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--ink, #1a1a1a);
  border-color: rgba(0, 0, 0, 0.32);
}

/* Visitor-Profile-Synopsis — Agent zeigt ab Turn 3, dass er die
   Geschichte mitfolgt. Sitzt zwischen Section-Head und den Turns,
   visuell als "Berater-Notiz" mit Diamant-Marker + linkem Border. */
.discover-section-synopsis {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 8px;
  padding: 14px 18px;
  background: rgba(0, 0, 0, 0.025);
  border-left: 3px solid var(--ink, #1a1a1a);
  border-radius: 0 8px 8px 0;
}
.discover-section-synopsis-icon {
  flex: 0 0 auto;
  color: var(--ink, #1a1a1a);
  font-size: 0.95rem;
  line-height: 1.55;
  margin-top: 1px;
}
.discover-section-synopsis-text {
  flex: 1;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink, #1a1a1a);
  font-style: italic;
}

/* Turn-Container — alle Turns übereinander, neueste unten */
.discover-turns {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

/* Ein Turn-Block: Frage-Header + Antwort + ggf. CTA-Karte + 3 Tiles */
.discover-turn {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Frage-Header — dezent grau, kleiner Pfeil */
.discover-turn-query {
  font-size: 0.85rem;
  color: var(--ink-soft, #666);
  padding: 8px 0 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.discover-turn-query-arrow {
  color: #5b8def;
  font-weight: 600;
  margin-right: 4px;
}
.discover-turn-query-label {
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.7rem;
  color: var(--ink-soft, #888);
  margin-right: 4px;
}
.discover-turn-query-text {
  color: var(--ink, #1a1a1a);
  font-weight: 400;
}

/* Antwort-Text — Standard agent-answer-Look */
.discover-turn-answer {
  font-size: 0.96rem;
  line-height: 1.65;
  color: var(--ink, #1a1a1a);
  max-width: 70ch;
}

/* CTA-Karte (Empfehlung) — wie .agent-cta-card aber inline */
.discover-turn-cta {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  padding: 22px 24px;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.discover-turn-cta-eyebrow {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft, #888);
}
.discover-turn-cta-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink, #1a1a1a);
}
.discover-turn-cta-btn {
  margin-top: 4px;
  align-self: flex-start;
  padding: 10px 18px;
  border-radius: 8px;
  background: #1a1a1a;
  color: #ffffff;
  border: none;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 140ms ease, transform 100ms ease;
}
.discover-turn-cta-btn:hover {
  background: #2a2a2a;
  transform: translateY(-1px);
}

/* 3-Tile-Grid — wie der Standard content-grid, max 3 Spalten */
.discover-turn-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.discover-turn-tiles > * {
  min-width: 0;
}

/* Pending-Indikator — leerer Turn-Stub während Antwort lädt */
.discover-turn--pending {
  opacity: 0.85;
}
.discover-turn-pending {
  font-size: 0.92rem;
  font-style: italic;
  color: var(--ink-soft, #777);
  padding: 16px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.discover-pending-dots {
  display: inline-flex;
  gap: 3px;
  align-items: center;
}
.discover-pending-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5b8def;
  animation: discoverDots 1.2s ease-in-out infinite;
}
.discover-pending-dots span:nth-child(2) { animation-delay: 0.15s; }
.discover-pending-dots span:nth-child(3) { animation-delay: 0.30s; }
@keyframes discoverDots {
  0%, 80%, 100% { opacity: 0.25; transform: scale(0.85); }
  40% { opacity: 1; transform: scale(1.1); }
}

/* Eingabefeld am Ende der Section — neutraler Look, wie agent-prompt */
.discover-input-row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 14px 16px;
  background: rgba(0, 0, 0, 0.025);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
}
.discover-input-field {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 18px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  background: #ffffff;
  color: var(--ink, #1a1a1a);
  font: inherit;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.discover-input-field:focus {
  border-color: rgba(0, 0, 0, 0.32);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}
.discover-input-field::placeholder {
  color: rgba(85, 85, 85, 0.55);
}
.discover-input-field:disabled {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(85, 85, 85, 0.6);
}
.discover-input-submit {
  flex: 0 0 auto;
  padding: 12px 22px;
  border-radius: 999px;
  background: #1a1a1a;
  color: #ffffff;
  border: 1px solid #1a1a1a;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 140ms ease, transform 100ms ease;
}
.discover-input-submit:hover:not(:disabled) {
  background: #2a2a2a;
  transform: translateY(-1px);
}
.discover-input-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.discover-input-row--end {
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.discover-input-row--end p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--ink-soft, #555);
  line-height: 1.55;
}
.discover-input-row--end a {
  color: #4a76d1;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.discover-input-end-btn {
  padding: 10px 18px;
  border-radius: 8px;
  background: #1a1a1a;
  color: #ffffff;
  border: none;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
}

/* Member-Card am Ende — eigene Sub-Section, klar als Anker erkennbar */
.discover-section-member {
  padding: 18px 22px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.discover-section-member-eyebrow {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft, #888);
}
/* Fallback-Member-Block (wenn _renderMemberTile nicht erreichbar) */
.discover-section-member-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.discover-section-member-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #1a1a1a;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  font-weight: 600;
  flex-shrink: 0;
}
.discover-section-member-info {
  flex: 1;
  min-width: 0;
}
.discover-section-member-info strong {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink, #1a1a1a);
}
.discover-section-member-role {
  font-size: 0.85rem;
  color: var(--ink-soft, #666);
  margin-top: 2px;
}
.discover-section-member-bio {
  font-size: 0.88rem;
  color: var(--ink, #1a1a1a);
  margin: 6px 0 0;
  line-height: 1.55;
}

/* Mobile-Anpassung für Section */
@media (max-width: 720px) {
  .discover-section { gap: 18px; }
  .discover-section-head { padding: 8px 12px; gap: 8px; }
  .discover-section-eyebrow { font-size: 0.72rem; }
  .discover-section-pain { font-size: 0.76rem; padding: 3px 8px; }
  .discover-section-stop { font-size: 0.76rem; padding: 4px 12px; }
  .discover-turns { gap: 28px; }
  .discover-turn { gap: 14px; }
  .discover-turn-answer { font-size: 0.92rem; }
  .discover-turn-cta { padding: 16px 18px; max-width: none; }
  .discover-turn-tiles { grid-template-columns: 1fr; gap: 12px; }
  .discover-input-row { padding: 14px; gap: 8px; flex-direction: column; align-items: stretch; }
  .discover-input-submit { width: 100%; }
  .discover-section-member { padding: 14px; }
  .discover-section-member-avatar { width: 48px; height: 48px; font-size: 0.95rem; }
}

/* ──────────────────────────────────────────────────────────────────────
   LEGACY: alte Chat-Panel-Styles (unbenutzt, behalten als Fallback
   falls jemand noch .discover-panel im DOM erzeugt)
   ────────────────────────────────────────────────────────────────────── */

.discover-panel {
  margin: 0 0 16px;
  padding: 0;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
  border: 1px solid rgba(91, 141, 239, 0.32);
  border-left: 3px solid #5b8def;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(91, 141, 239, 0.12);
  /* Sticky-Footer braucht definierte max-height für Stream-Scroll. */
  max-height: min(78vh, 720px);
}
.discover-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: linear-gradient(135deg,
    rgba(91, 141, 239, 0.12) 0%,
    rgba(91, 141, 239, 0.04) 100%);
  border-bottom: 1px solid rgba(91, 141, 239, 0.18);
}
.discover-panel-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #4a76d1;
}
.discover-panel-dot {
  color: #5b8def;
  animation: discoverPulse 1.8s ease-in-out infinite;
}
@keyframes discoverPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.discover-panel-pain {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(91, 141, 239, 0.14);
  color: #2e5cc0;
  font-size: 0.82rem;
  font-weight: 500;
  border: 1px solid rgba(91, 141, 239, 0.25);
}
.discover-panel-pain--diffuse {
  background: rgba(0, 0, 0, 0.04);
  color: var(--ink-soft, #666);
  border-color: rgba(0, 0, 0, 0.12);
  font-style: italic;
}
.discover-panel-stop {
  margin-left: auto;
  padding: 5px 12px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.14);
  color: var(--ink-soft, #555);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.discover-panel-stop:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--ink, #1a1a1a);
  border-color: rgba(0, 0, 0, 0.22);
}

/* Stream-Container — scrollbar, neueste Bubble unten. */
.discover-panel-stream {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #ffffff;
  scrollbar-width: thin;
  scrollbar-color: rgba(91, 141, 239, 0.3) transparent;
}
.discover-panel-stream::-webkit-scrollbar { width: 6px; }
.discover-panel-stream::-webkit-scrollbar-thumb {
  background: rgba(91, 141, 239, 0.3);
  border-radius: 3px;
}

/* Chat-Bubbles — User rechts, Agent links. */
.discover-bubble {
  display: flex;
  flex-direction: column;
  max-width: 82%;
  gap: 8px;
}
.discover-bubble--user {
  align-self: flex-end;
  align-items: flex-end;
}
.discover-bubble--agent {
  align-self: flex-start;
  align-items: flex-start;
}
.discover-bubble-body {
  padding: 11px 16px;
  border-radius: 18px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink, #1a1a1a);
  word-wrap: break-word;
}
.discover-bubble--user .discover-bubble-body {
  background: linear-gradient(135deg, #5b8def 0%, #4a76d1 100%);
  color: #ffffff;
  border-bottom-right-radius: 6px;
}
.discover-bubble--agent .discover-bubble-body {
  background: rgba(91, 141, 239, 0.07);
  border: 1px solid rgba(91, 141, 239, 0.16);
  border-bottom-left-radius: 6px;
}
.discover-bubble--pending .discover-bubble-body {
  font-style: italic;
  color: var(--ink-soft, #666);
}
.discover-bubble-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 2px;
  width: 100%;
}
.discover-bubble-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #5b8def 0%, #4a76d1 100%);
  color: #ffffff;
  border: 1px solid #4a76d1;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  align-self: flex-start;
  transition: transform 100ms ease, box-shadow 140ms ease;
  box-shadow: 0 2px 8px rgba(91, 141, 239, 0.22);
}
.discover-bubble-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(91, 141, 239, 0.32);
}
.discover-bubble-member {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 0.83rem;
  color: var(--ink-soft, #555);
  align-self: flex-start;
}
.discover-bubble-member strong {
  color: var(--ink, #1a1a1a);
  font-weight: 600;
}

/* Pending-Animation — "Antwort wird formuliert…" */
.discover-pending-dots {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  margin-right: 4px;
}
.discover-pending-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5b8def;
  animation: discoverDots 1.2s ease-in-out infinite;
}
.discover-pending-dots span:nth-child(2) { animation-delay: 0.15s; }
.discover-pending-dots span:nth-child(3) { animation-delay: 0.30s; }
@keyframes discoverDots {
  0%, 80%, 100% { opacity: 0.25; transform: scale(0.85); }
  40% { opacity: 1; transform: scale(1.1); }
}

/* Footer — Sticky-Reply-Form innerhalb des Panels.
   Position:sticky relativ zum Panel funktioniert hier nicht, weil
   Stream eigenen Scroll hat. Stattdessen: Footer ist ganz unten und
   bleibt durch flex-shrink:0 fixiert. */
.discover-panel-footer {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  background: linear-gradient(180deg, #fbfcfe 0%, #f4f6fb 100%);
  border-top: 1px solid rgba(91, 141, 239, 0.18);
  align-items: stretch;
}
.discover-panel-footer .discover-reply-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 11px 16px;
  border: 1px solid rgba(91, 141, 239, 0.3);
  border-radius: 999px;
  background: #ffffff;
  color: var(--ink, #1a1a1a);
  font: inherit;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.discover-panel-footer .discover-reply-input:focus {
  border-color: #5b8def;
  box-shadow: 0 0 0 3px rgba(91, 141, 239, 0.18);
}
.discover-panel-footer .discover-reply-input::placeholder {
  color: rgba(85, 85, 85, 0.55);
}
.discover-panel-footer .discover-reply-input:disabled {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(85, 85, 85, 0.6);
}
.discover-panel-footer .discover-reply-submit {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #4a76d1;
  background: linear-gradient(135deg, #5b8def 0%, #4a76d1 100%);
  color: #ffffff;
  font: inherit;
  font-size: 1.2rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 140ms ease, transform 100ms ease;
}
.discover-panel-footer .discover-reply-submit:hover {
  background: linear-gradient(135deg, #6996f0 0%, #5582d8 100%);
  transform: translateY(-1px);
}
.discover-panel-footer .discover-reply-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.discover-panel-footer--end {
  flex-direction: column;
  gap: 10px;
}
.discover-panel-footer--end p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink-soft, #555);
  line-height: 1.5;
}
.discover-panel-footer--end a {
  color: #4a76d1;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Mobile-Anpassung für Panel */
@media (max-width: 720px) {
  .discover-panel { max-height: 78vh; border-radius: 12px; }
  .discover-panel-head { padding: 10px 12px; gap: 8px; }
  .discover-panel-eyebrow { font-size: 0.72rem; }
  .discover-panel-pain { font-size: 0.76rem; padding: 3px 8px; }
  .discover-panel-stop { font-size: 0.76rem; padding: 4px 10px; }
  .discover-panel-stream { padding: 14px 12px; gap: 10px; }
  .discover-bubble { max-width: 92%; }
  .discover-bubble-body { padding: 10px 14px; font-size: 0.9rem; }
  .discover-panel-footer { padding: 10px 12px; gap: 6px; }
  .discover-panel-footer .discover-reply-input { padding: 9px 14px; font-size: 0.9rem; }
  .discover-panel-footer .discover-reply-submit { width: 40px; height: 40px; font-size: 1.05rem; }
}

/* Discovery-Block — über der Standard-Antwort, wenn aktiv */
/* Schlanke Discovery-Status-Leiste über der Antwort. Keine doppelten
   CTA-/Member-Karten — die kommen aus dem Backend-Override über die
   Legacy-Felder. Nur: laufende Sondierung sichtbar, Turn-Counter,
   Pain-Chip, Beenden-Button + Continue-Hint. */
.discover-block {
  margin: 0 0 14px;
  padding: 12px 16px;
  background: linear-gradient(135deg,
    rgba(91, 141, 239, 0.10) 0%,
    rgba(91, 141, 239, 0.04) 100%);
  border: 1px solid rgba(91, 141, 239, 0.32);
  border-left: 3px solid #5b8def;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.discover-block-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.discover-block-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #4a76d1;
  font-weight: 600;
  font-family: var(--font-mono, ui-monospace, monospace);
}
.discover-block-dot {
  color: #5b8def;
  font-size: 0.85em;
  animation: discoverPulse 2s ease-in-out infinite;
}
@keyframes discoverPulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}
.discover-block-pain {
  font-size: 0.875rem;
  color: var(--ink, #1a1a1a);
  font-weight: 500;
  padding: 3px 12px;
  background: #ffffff;
  border: 1px solid rgba(91, 141, 239, 0.25);
  border-radius: 999px;
}
.discover-block-pain--diffuse {
  color: var(--ink-muted, #777);
  font-style: italic;
}
.discover-block-stop {
  margin-left: auto;
  background: transparent;
  border: 1px solid rgba(91, 141, 239, 0.32);
  border-radius: 999px;
  padding: 3px 12px;
  font: inherit;
  font-size: 0.78rem;
  color: #4a76d1;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.discover-block-stop:hover {
  background: #5b8def;
  color: #fff;
  border-color: #5b8def;
}
.discover-block-hint {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ink-soft, #555);
  line-height: 1.5;
}
.discover-block-hint strong {
  color: var(--ink, #1a1a1a);
  font-weight: 600;
}

/* Aktions-Buttons in der Status-Leiste — sichtbar machen, was geht. */
.discover-block-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid rgba(91, 141, 239, 0.18);
}
.discover-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, transform 100ms ease;
  border: 1px solid transparent;
}
.discover-action--primary {
  background: linear-gradient(135deg, #5b8def 0%, #4a76d1 100%);
  color: #ffffff;
  border-color: #4a76d1;
  box-shadow: 0 2px 8px rgba(91, 141, 239, 0.25);
}
.discover-action--primary:hover {
  background: linear-gradient(135deg, #6996f0 0%, #5582d8 100%);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(91, 141, 239, 0.35);
}
.discover-action--secondary {
  background: #ffffff;
  color: #4a76d1;
  border-color: rgba(91, 141, 239, 0.45);
}
.discover-action--secondary:hover {
  background: rgba(91, 141, 239, 0.08);
  color: #4a76d1;
}
.discover-action--tertiary {
  background: transparent;
  color: var(--ink-soft, #555);
  border-color: rgba(0, 0, 0, 0.12);
}
.discover-action--tertiary:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--ink, #1a1a1a);
}

/* Inline-Antwort-Form im Discovery-Block — User muss nicht zum Hero
   zurückscrollen, das Antwort-Feld steht direkt unter den Aktionen.
   Submit forwardet an das Haupt-#agent-form (gleiche Pipeline). */
.discover-reply-form {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(91, 141, 239, 0.22);
  align-items: stretch;
}
.discover-reply-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid rgba(91, 141, 239, 0.35);
  border-radius: 999px;
  background: #ffffff;
  color: var(--ink, #1a1a1a);
  font: inherit;
  font-size: 0.92rem;
  outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.discover-reply-input:focus {
  border-color: #5b8def;
  box-shadow: 0 0 0 3px rgba(91, 141, 239, 0.18);
}
.discover-reply-input::placeholder {
  color: rgba(85, 85, 85, 0.55);
}
.discover-reply-input:disabled {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(85, 85, 85, 0.6);
}
.discover-reply-submit {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #4a76d1;
  background: linear-gradient(135deg, #5b8def 0%, #4a76d1 100%);
  color: #ffffff;
  font: inherit;
  font-size: 1.15rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 140ms ease, transform 100ms ease;
}
.discover-reply-submit:hover {
  background: linear-gradient(135deg, #6996f0 0%, #5582d8 100%);
  transform: translateY(-1px);
}
.discover-reply-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Input-Reply-Cue (legacy / fallback): falls jemand doch zum Hero-Input
   navigiert wird — kurzer Pulse-Ring zur Wiedererkennung. */
.agent-input--reply-cue {
  box-shadow: 0 0 0 4px rgba(91, 141, 239, 0.20),
              0 0 18px rgba(91, 141, 239, 0.35);
  animation: agentInputCue 1.4s ease-out 2;
  border-color: #5b8def !important;
}
@keyframes agentInputCue {
  0%   { box-shadow: 0 0 0 4px rgba(91, 141, 239, 0.32),
                     0 0 18px rgba(91, 141, 239, 0.50); }
  50%  { box-shadow: 0 0 0 8px rgba(91, 141, 239, 0.10),
                     0 0 24px rgba(91, 141, 239, 0.20); }
  100% { box-shadow: 0 0 0 4px rgba(91, 141, 239, 0.20),
                     0 0 18px rgba(91, 141, 239, 0.35); }
}

/* Member-Card im Discovery-Block (kompakt, NICHT die volle dp-member-card) */
.discover-member {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg, #fff);
  border: 1px solid var(--line, rgba(0,0,0,0.08));
  border-radius: 12px;
}
.discover-member-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ink, #1a1a1a);
  color: var(--bg, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.95rem;
  flex: 0 0 auto;
}
.discover-member-meta {
  flex: 1 1 auto;
  min-width: 0;
}
.discover-member-name {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink, #1a1a1a);
}
.discover-member-role {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ink-muted, #777);
}

/* CTA-Card im Discovery-Block */
.discover-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.discover-cta-label {
  font-size: 0.875rem;
  color: var(--ink-soft, #555);
}

/* Auto-Suggest-Banner (nach 2 reaktiven Turns) */
.discover-auto-suggest {
  margin-top: 16px;
  padding: 14px 16px;
  background: rgba(91, 141, 239, 0.05);
  border: 1px dashed rgba(91, 141, 239, 0.4);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.discover-auto-suggest p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--ink, #1a1a1a);
  line-height: 1.5;
}
.discover-auto-suggest-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.btn-text {
  background: transparent;
  border: none;
  color: var(--ink-muted, #777);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
  padding: 6px 10px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.btn-text:hover { color: var(--ink, #1a1a1a); }

/* Mobile-Anpassungen */
@media (max-width: 720px) {
  .discover-block { padding: 14px; }
  .discover-block-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .discover-member { gap: 10px; padding: 8px 10px; }
  .discover-member-avatar { width: 36px; height: 36px; font-size: 0.85rem; }
  .discover-reply-form { gap: 6px; }
  .discover-reply-input { padding: 9px 12px; font-size: 0.88rem; }
  .discover-reply-submit { width: 36px; height: 36px; font-size: 1rem; }
  .discover-block-actions .discover-action { font-size: 0.8rem; padding: 7px 11px; }
}

/* ============================================================
   CONTENT-INSPEKTOR — Debug-Overlay (app.js: SFXInspector)
   Beschriftet Sections + Tiles mit ID/Form/Variante. Badges sind
   pointer-events:none, blockieren also keine Klicks. Aktiv nur wenn
   ?inspect=1 ODER Admin-Toggle ODER Shift+I.
   ============================================================ */
.sfx-host { position: relative !important; }

.sfx-outline-sec {
  outline: 2px dashed rgba(217, 9, 254, 0.45);   /* Magenta = Section */
  outline-offset: -2px;
}
.sfx-outline-tile {
  outline: 1.5px dashed rgba(0, 215, 238, 0.6);   /* Cyan = Tile */
  outline-offset: -1px;
}

.sfx-badge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99998;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 10px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  padding: 2px 7px;
  white-space: nowrap;
  pointer-events: none;
  border-radius: 0 0 5px 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sfx-badge--sec {
  background: rgba(217, 9, 254, 0.92);            /* Magenta */
  color: #fff;
  font-weight: 600;
  z-index: 99997;
}
.sfx-badge--tile {
  background: rgba(0, 28, 34, 0.92);              /* dunkles Cyan-Schwarz */
  color: #6EE7F5;
  z-index: 99999;
}
/* Status-Schnellaktionen (Inspector) — oben rechts auf service/use_case/
   insight-Tiles. pointer-events:auto, damit klickbar (Badge ist es nicht). */
.sfx-actions {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 100000;
  display: flex;
  gap: 4px;
  padding: 4px;
  pointer-events: auto;
}
.sfx-act {
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  padding: 4px 8px;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.sfx-act--rev { background: rgba(255, 154, 29, 0.96); color: #1a1a1a; }  /* Orange = Review */
.sfx-act--off { background: rgba(217, 9, 254, 0.96); }                  /* Magenta = Deaktivieren */
.sfx-act:hover:not(:disabled) { filter: brightness(1.12); }
.sfx-act:disabled { cursor: default; opacity: 0.85; }
.sfx-act--done { background: rgba(0, 158, 96, 0.96) !important; color: #fff !important; }

/* Toggle-Pille unten links */
.sfx-toggle {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 100000;
  display: none;            /* JS schaltet auf flex */
  align-items: center;
  gap: 10px;
  font-family: "JetBrains Mono", Consolas, monospace;
}
.sfx-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  background: #1a1a1a;
  color: #e8e8e8;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
}
.sfx-toggle-btn.on {
  background: #d909fe;
  color: #fff;
  border-color: #d909fe;
}
.sfx-toggle-btn .sfx-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #666;
}
.sfx-toggle-btn.on .sfx-dot {
  background: #00D7EE;
  box-shadow: 0 0 6px #00D7EE;
}
.sfx-counter {
  font-size: 11px;
  color: #888;
  background: rgba(255, 255, 255, 0.9);
  padding: 4px 9px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ════════════════════════════════════════════════════════════════════════
 * Landing-Page-Modus (body.lp-mode) — Kampagnen-LP unter /lp/{slug}
 * Reduzierte Navigation (Attention-Ratio ~1:1) + dauerpräsente Sticky-CTA.
 * ════════════════════════════════════════════════════════════════════════ */
body.lp-mode .nav-route { display: none; }      /* Top-Routen ausblenden */
body.lp-mode { padding-bottom: 72px; }           /* Platz für Sticky-Bar */

.lp-sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 95;
  display: flex;
  justify-content: center;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line, #e6e6e6);
}
.lp-sticky-cta__btn {
  display: inline-block;
  background: var(--ink, #111);
  color: #fff;
  padding: 13px 28px;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.lp-sticky-cta__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

/* Canvas-Section (freistyle LP-Bereich, kind:canvas). Nur Design-Tokens. */
.lp-canvas__body { max-width: 70ch; font-size: var(--type-body-l); line-height: 1.62; color: var(--ink); }
.lp2-paths {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5, 24px);
  margin-top: var(--space-4, 20px);
}
.lp2-path {
  border: 1px solid var(--line);
  border-radius: var(--r-card, 21px);
  padding: 24px;
  background: var(--bg, #fff);
}
.lp2-path__key {
  font-family: var(--font-meta);
  letter-spacing: var(--ls-mono, 0.12em);
  text-transform: uppercase;
  color: var(--muted-light, #6a6a6a);
  font-size: var(--type-mono-label, 11px);
}
.lp2-path__fit {
  font-family: var(--font-prose);
  font-size: var(--type-body-l, 17px);
  line-height: 1.5;
  color: var(--ink);
  margin: 10px 0 0;
}
.lp2-cta {
  margin-top: var(--space-5, 24px);
  display: inline-block;
  background: var(--ink, #111);
  color: #fff;
  border: none;
  font: inherit;
  font-weight: 600;
  letter-spacing: var(--ls-tight, -0.015em);
  padding: 13px 26px;
  border-radius: var(--r-pill, 999px);
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.lp2-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,0.18); }
@media (max-width: 760px) { .lp2-paths { grid-template-columns: 1fr; } }

/* ════════ LP-Canvas-Embed-Wrapper (kind:canvas, canvas_layout:embed) ════════
 * Volle portierte Seite (.cs-doc) als LP-Bereich. Light-Surface (SFOUR) —
 * full-bleed, edge-to-edge; .cs-doc bringt eigene Tokens/Radien mit. */
.lp-canvas-embed { padding: 0; margin: 0; }
.lp-canvas-embed .cs-doc { border-radius: 0; }
/* Auf normalen Routen (AI/Home, NICHT im LP-Mode): Embed-Breite + Seitenränder
   ans SFOUR-Raster (.container: --max-width / --space-4) angleichen, damit die
   Kanten mit den umliegenden Sektionen fluchten. Im LP-Mode bleibt die
   schmalere Standalone-Lese-Spalte (980px). */
body:not(.lp-mode) .lp-canvas-embed .cs-wrap {
  max-width: var(--max-width);
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}
/* Detail-Page (detail_canvas) UND Landing-Page: der detail-artige Header
   (Titel/Lead/Bild-Panel) trägt die Identität → den canvas-eigenen Hero hier
   ausblenden (kein Doppel-Hero). Nur in diesen Kontexten; normale Routen
   (persona-Section) behalten den cs-hero als Section-Überschrift. */
.dp-shell .lp-canvas-embed .cs-hero,
body.lp-mode .lp-canvas-embed .cs-hero { display: none; }
.dp-shell .lp-canvas-embed .cs-wrap,
body.lp-mode .lp-canvas-embed .cs-wrap { padding-top: 0; }
/* Monochrome Linien-Icons (SVG, Lucide-Stil) in cs-Eyebrows/Cards/Bullets.
   Erben die Ink-Farbe via currentColor, Größe = Kontext-em (Eyebrow/Bullet
   ~15px, Card ~22px). Ersetzt die bunten Emoji — strikt grafischer SFOUR-Look. */
.cs-doc svg {
  width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.cs-doc .cs-cico { line-height: 1; color: var(--fg); }
.cs-doc .cs-bico { color: var(--fg); }

/* ════════ Classifier-Studio-Canvas (kind:canvas, embed) — SFOUR-getokt ════════
 * Aus imp/uebersicht.html portiert: Struktur unveraendert, Klassen `cs-`-praefixiert
 * (Isolation), Design-Tokens auf SFOUR gemappt — LIGHT-Surface, strikte Graustufen
 * (Style-Guide: Farbe nur in der SFOUR-Marke), Inter Tight / JetBrains Mono / SFOUR-
 * Radien. Reine Darstellung — Inhalt liegt im Canvas. */
.cs-doc{
  /* SFOUR Light-Surface + strikte Graustufen (Style-Guide §Surfaces & ink) */
  --bg:#ffffff; --bg2:#fafafa; --fg:#0a0a0a; --mut:#6a6a6a; --mut2:#a0a0a0;
  --line:#e8e8e8; --card:#ffffff;
  /* Bunt-Akzente auf Ink neutralisiert — keine Farb-Toene ausser Graustufen */
  --accent:#0a0a0a; --violet:#0a0a0a; --emerald:#0a0a0a; --cyan:#0a0a0a; --amber:#0a0a0a; --rose:#0a0a0a;
  font-family:var(--font-prose,"Inter Tight",sans-serif); color:var(--fg);
  border-radius:var(--r-card,21px);
}
.cs-doc *{box-sizing:border-box}
.cs-doc{margin:0;background:radial-gradient(1200px 600px at 70% -10%,rgba(91,140,255,.12),transparent),radial-gradient(900px 500px at 10% 110%,rgba(167,139,250,.10),transparent),var(--bg);color:var(--fg);
line-height:1.55;-webkit-font-smoothing:antialiased}
.cs-wrap{max-width:980px;margin:0 auto;padding:24px 20px 80px}
.cs-topbar{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:10;padding:10px 0;background:linear-gradient(var(--bg),rgba(10,14,23,.6));backdrop-filter:blur(6px)}
.cs-brand{display:flex;align-items:center;gap:10px;font-weight:700}
.cs-logo{width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,var(--accent),var(--violet));display:grid;place-items:center;color:#fff}
.cs-brand small{display:block;font-weight:400;color:var(--mut);font-size:11px}
.cs-spacer{flex:1}
.cs-langtoggle{display:inline-flex;gap:2px;border:1px solid var(--line);background:var(--card);border-radius:11px;padding:3px}
.cs-langbtn{border:0;background:transparent;color:var(--mut);font-weight:700;text-transform:uppercase;font-size:12px;padding:5px 11px;border-radius:8px;cursor:pointer}
.cs-langbtn.cs-on{background:rgba(91,140,255,.18);color:var(--accent)}
.cs-hero{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:24px;padding:42px 36px;
background:linear-gradient(135deg,rgba(91,140,255,.12),rgba(167,139,250,.06),transparent)}
.cs-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.cs-badge{display:inline-block;border:1px solid rgba(91,140,255,.3);background:rgba(91,140,255,.1);color:var(--accent);font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px}
.cs-badge.cs-dpp{border-color:rgba(52,211,153,.3);background:rgba(52,211,153,.1);color:var(--emerald)}
.cs-hero h1{font-size:34px;line-height:1.12;letter-spacing:-.02em;margin:0 0 16px;max-width:760px}
.cs-lead{color:#cbd5e1;font-size:16px;max-width:780px;margin:0}
.cs-stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.cs-stat{border:1px solid var(--line);background:var(--card);border-radius:16px;padding:10px 16px}
.cs-stat b{display:block;font-size:20px}.cs-stat span{font-size:12px;color:var(--mut)}
.cs-sec{margin-top:46px}
.cs-eyebrow{display:flex;align-items:center;gap:8px;color:var(--accent);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.cs-eyebrow .cs-ico{font-size:15px}
.cs-sec h2{font-size:24px;letter-spacing:-.01em;margin:0 0 18px}
.cs-prose p{color:#cbd5e1;font-size:14px;margin:0 0 12px}
.cs-two{display:grid;gap:18px;grid-template-columns:1fr 1fr}
.cs-grid{display:grid;gap:12px}
.cs-g2{grid-template-columns:repeat(2,1fr)}.cs-g3{grid-template-columns:repeat(3,1fr)}.cs-g4{grid-template-columns:repeat(4,1fr)}
.cs-card{border:1px solid var(--line);background:var(--card);border-radius:16px;padding:16px}
.cs-card .cs-cico{font-size:22px;margin-bottom:8px}
.cs-card .cs-ctitle{font-weight:700;font-size:14px;margin-bottom:4px}
.cs-card .cs-cbody{color:var(--mut);font-size:12.5px}
.cs-mini .cs-card{padding:14px}
.cs-bullets{display:flex;flex-direction:column;gap:10px}
.cs-bullet{display:flex;gap:10px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:11px 13px;font-size:13px;color:#cbd5e1}
.cs-bullet .cs-bico{font-size:15px;line-height:1.3}
.cs-bullet b{color:var(--fg)}
.cs-step{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:11px 13px;font-size:13px;color:var(--mut)}
.cs-step .cs-n{flex:0 0 24px;height:24px;border-radius:999px;background:rgba(91,140,255,.18);color:var(--accent);display:grid;place-items:center;font-weight:700;font-size:12px}
.cs-step b{color:var(--fg)}
.cs-callout{border:1px solid;border-radius:16px;padding:16px;margin-top:16px}
.cs-callout .cs-cotitle{font-weight:700;font-size:14px;margin-bottom:4px}
.cs-callout .cs-cobody{color:#cbd5e1;font-size:13px}
.cs-callout.cs-cyan{border-color:rgba(34,211,238,.3);background:rgba(34,211,238,.06)}
.cs-callout.cs-violet{border-color:rgba(167,139,250,.3);background:rgba(167,139,250,.06)}
.cs-callout.cs-emerald{border-color:rgba(52,211,153,.3);background:rgba(52,211,153,.06)}
table.cs-impact{width:100%;border-collapse:collapse;border:1px solid var(--line);border-radius:16px;overflow:hidden}
table.cs-impact th{background:rgba(255,255,255,.04);text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);padding:10px 14px}
table.cs-impact th:last-child{color:var(--emerald)}
table.cs-impact td{border-top:1px solid var(--line);padding:11px 14px;font-size:13px;vertical-align:top}
table.cs-impact td.cs-before{color:var(--mut)}table.cs-impact td.cs-after{color:#e2e8f0}
.cs-imp{margin-top:16px}
.cs-ic{border:1px solid rgba(91,140,255,.2);background:rgba(91,140,255,.06);border-radius:16px;padding:12px 16px}
.cs-ic b{display:block;color:var(--accent);font-size:14px}.cs-ic span{font-size:12px;color:var(--mut)}
.cs-cta{margin-top:40px;border:1px solid rgba(91,140,255,.25);border-radius:24px;padding:34px;text-align:center;
background:linear-gradient(135deg,rgba(91,140,255,.12),rgba(167,139,250,.08))}
.cs-cta h2{font-size:22px;margin:0 0 8px}.cs-cta p{color:#cbd5e1;font-size:14px;margin:0 auto;max-width:560px}
@media(max-width:860px){.cs-two{grid-template-columns:1fr}.cs-g3,.cs-g4{grid-template-columns:repeat(2,1fr)}.cs-hero h1{font-size:27px}}
@media(max-width:560px){.cs-g2,.cs-g3,.cs-g4{grid-template-columns:1fr}.cs-wrap{padding:16px 14px 60px}}

/* ── SFOUR-Feinschliff: Fonts ── */
.cs-doc .cs-eyebrow{font-family:var(--font-meta,monospace);letter-spacing:var(--ls-mono,.12em);font-weight:600}
.cs-doc .cs-hero h1{font-family:var(--font-prose);letter-spacing:var(--ls-h2,-.02em);font-weight:500;font-size:clamp(1.95rem,1rem + 2.4vw,2.75rem)}
.cs-doc .cs-sec h2,.cs-doc .cs-cta h2{font-family:var(--font-prose);letter-spacing:var(--ls-h2,-.02em);font-weight:500}
.cs-doc .cs-ctitle,.cs-doc .cs-cotitle,.cs-doc .cs-badge{font-weight:500}
/* Leichtere Typografie: Inline-Fett von 700 auf 600 dämpfen */
.cs-doc b,.cs-doc strong{font-weight:600}
/* ── SFOUR-Radien ── */
.cs-doc .cs-hero,.cs-doc .cs-cta{border-radius:var(--r-card,21px)}
.cs-doc .cs-card,.cs-doc .cs-callout,.cs-doc .cs-bullet,.cs-doc .cs-step,.cs-doc .cs-stat,.cs-doc .cs-ic,.cs-doc table.cs-impact{border-radius:var(--radius,18px)}
.cs-doc .cs-badge,.cs-doc .cs-langtoggle,.cs-doc .cs-langbtn{border-radius:var(--r-pill,999px)}
/* ── Light-Surface: Seite hell, dunkle Radial-Verlaeufe raus ── */
.cs-doc{background:var(--bg,#fff)}
.cs-doc .cs-hero{background:var(--bg2,#fafafa);border:1px solid var(--line)}
.cs-doc .cs-cta{background:var(--bg2,#fafafa);border:1px solid var(--line)}
/* ── Graustufen: Bunt-Flaechen/-Raender auf Ink/Line neutralisieren ── */
.cs-doc .cs-badge,.cs-doc .cs-badge.cs-dpp{border:1px solid var(--line);background:#fff;color:var(--fg)}
.cs-doc .cs-callout,.cs-doc .cs-callout.cs-cyan,.cs-doc .cs-callout.cs-violet,.cs-doc .cs-callout.cs-emerald{border:1px solid var(--line);background:var(--bg2,#fafafa)}
.cs-doc .cs-step .cs-n{background:var(--fg,#0a0a0a);color:#fff}
.cs-doc .cs-ic{border:1px solid var(--line);background:var(--bg2,#fafafa)}
.cs-doc table.cs-impact th{background:var(--bg2,#fafafa);color:var(--mut)}
.cs-doc table.cs-impact th:last-child{color:var(--fg)}
.cs-doc table.cs-impact td.cs-after{color:var(--fg)}
.cs-doc .cs-logo{background:var(--fg,#0a0a0a)}
/* ── Text auf Light: helle Dark-Theme-Farben -> Ink/Ink-soft ── */
.cs-doc .cs-lead,.cs-doc .cs-prose p,.cs-doc .cs-bullet,.cs-doc .cs-callout .cs-cobody,.cs-doc .cs-cta p{color:var(--ink-soft,#3a3a3a)}
.cs-doc .cs-bullet b,.cs-doc .cs-step b{color:var(--fg)}
/* ── Bilder im Canvas (cs-Designsystem) ── responsive, gerundet, mit
   optionaler Bildunterschrift (cs-figure). */
.cs-doc img{max-width:100%;height:auto;display:block}
.cs-doc .cs-figure{margin:0}
.cs-doc .cs-figure img{width:100%;border:1px solid var(--line);border-radius:var(--radius,18px);background:#fff}
.cs-doc .cs-figure figcaption{margin-top:10px;font-family:var(--font-prose);font-size:12.5px;line-height:1.5;color:var(--ink-soft,#3a3a3a)}
/* ── Inverse Hero (WoB) für Persona-Canvas-Sections ──
   Der cs-hero ist NUR in Persona-Sections sichtbar — Detail-Pages (.dp-shell)
   und LPs (body.lp-mode) blenden ihn per display:none aus. Dort als schwarzes
   Hero-Band mit weisser Schrift; der restliche Canvas bleibt hell. */
.lp-canvas-embed .cs-doc .cs-hero{background:var(--ink,#0a0a0a);border-color:rgba(255,255,255,.12)}
.lp-canvas-embed .cs-doc .cs-hero h1{color:#fff}
.lp-canvas-embed .cs-doc .cs-hero .cs-lead{color:rgba(255,255,255,.80)}
.lp-canvas-embed .cs-doc .cs-hero .cs-badge{border-color:rgba(255,255,255,.24);background:rgba(255,255,255,.08);color:#fff}
.lp-canvas-embed .cs-doc .cs-hero .cs-stat{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.06)}
.lp-canvas-embed .cs-doc .cs-hero .cs-stat b{color:#fff}
.lp-canvas-embed .cs-doc .cs-hero .cs-stat span{color:rgba(255,255,255,.62)}
/* ── About-Factsheet-Hero: dunkles Band im Mediathek-Hero-Stil (WoB) ──
   NUR auf der About-Route (data-route=about). Volle Breite (full-bleed),
   grosse Headline, Mono-Eyebrow (Badges), schlank — weiss auf schwarz wie
   der Mediathek-Hero. (Persona-Canvases auf Home/AI sind ohnehin WoB.) */
#layout-root[data-route="about"] .lp-canvas-embed .cs-doc .cs-hero{
  background:var(--ink,#0a0a0a);border:0;border-bottom:1px solid var(--hairline-dark,rgba(255,255,255,.08));border-radius:0;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  padding:36px calc(50vw - 50% + 32px) 32px;overflow:visible;
}
#layout-root[data-route="about"] .lp-canvas-embed .cs-doc .cs-hero h1{
  color:#fff;font-size:clamp(2.2rem,1rem + 3vw,3.3rem);line-height:1.05;letter-spacing:-.02em;margin:0 0 14px;max-width:900px;
}
#layout-root[data-route="about"] .lp-canvas-embed .cs-doc .cs-hero .cs-lead{
  color:rgba(255,255,255,.80);max-width:780px;font-size:1.05rem;
}
#layout-root[data-route="about"] .lp-canvas-embed .cs-doc .cs-hero .cs-badges{margin-bottom:14px;gap:0 18px}
#layout-root[data-route="about"] .lp-canvas-embed .cs-doc .cs-hero .cs-badge{
  background:transparent;border:0;color:rgba(255,255,255,.55);padding:0;
  font-family:var(--font-meta,monospace);text-transform:uppercase;letter-spacing:.1em;font-size:11px;font-weight:600;
}
#layout-root[data-route="about"] .lp-canvas-embed .cs-doc .cs-hero .cs-stats{margin-top:20px;gap:8px}
#layout-root[data-route="about"] .lp-canvas-embed .cs-doc .cs-hero .cs-stat{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);padding:8px 14px}
#layout-root[data-route="about"] .lp-canvas-embed .cs-doc .cs-hero .cs-stat b{color:#fff;font-size:18px}
#layout-root[data-route="about"] .lp-canvas-embed .cs-doc .cs-hero .cs-stat span{color:rgba(255,255,255,.6)}

/* ============================================================
   Mediathek-Podcast — Pin auf Karten + Playlist-Dock + Player
   ============================================================ */
/* Karten-Wrapper: wird zur Grid-Zelle; Tile füllt sie. Pin liegt absolut
   darüber (Sibling des Tiles → kein Klick-Konflikt, nicht von tile-overflow
   abgeschnitten). */
.mt-tile-wrap { position: relative; display: flex; min-width: 0; }
.mt-tile-wrap > .tile-v2 { flex: 1 1 auto; width: 100%; }

.mt-pin-btn {
  position: absolute; top: 10px; right: 10px; z-index: 4;
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 999px; cursor: pointer;
  background: rgba(250, 250, 250, 0.86);
  border: 1px solid var(--line, #e8e8e8);
  color: var(--ink-muted, #6a6a6a);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
  transition: transform .12s ease, background .12s ease, color .12s ease, box-shadow .12s ease;
}
.mt-pin-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mt-pin-btn:hover { transform: translateY(-1px); color: var(--ink, #0a0a0a); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16); }
.mt-pin-btn.is-pinned {
  background: var(--ink, #0a0a0a); color: var(--paper, #fafafa);
  border-color: var(--ink, #0a0a0a);
}
.mt-pin-btn.is-pinned svg { fill: currentColor; stroke: currentColor; }

/* Playlist-Dock. Zwei Modi:
   • .pod-dock--column  → in der Mediathek (schmal: untere Leiste; >=1440px:
     top-ausgerichtete rechte Spalte).
   • .pod-dock--floating → angeheftet, schwebt unten rechts, auf ALLEN Routen. */
.pod-dock[hidden] { display: none; }
.pod-dock {
  z-index: 60;
  display: flex; flex-direction: column;
  background: var(--paper, #fafafa);
  overflow: hidden;
}
.pod-dock.is-empty { display: none; }
/* Anker-Toggle im Header (Panel anheften). */
.pod-dock-title { margin-right: auto; }
.pod-dock-count { margin-left: 0; }
.pod-anchor {
  flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center;
  border: 0; background: transparent; border-radius: 8px; cursor: pointer;
  color: var(--ink-muted, #6a6a6a); transition: background .12s ease, color .12s ease;
}
.pod-anchor svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pod-anchor:hover { background: var(--line, #e8e8e8); color: var(--ink, #0a0a0a); }
.pod-anchor.is-on { background: var(--ink, #0a0a0a); color: var(--paper, #fafafa); }
.pod-anchor.is-on svg { fill: currentColor; }

/* Spalten-Modus, schmal = untere Leiste. */
.pod-dock--column {
  position: fixed; left: 0; right: 0; bottom: 0; top: auto;
  width: auto; max-height: 60vh;
  border: 1px solid var(--line, #e8e8e8); border-bottom: 0;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.16);
}
.pod-dock--column.is-empty { display: none; }

/* Schwebendes globales Mini-Panel (angeheftet, ausserhalb der Mediathek) —
   auf ALLEN Routen sichtbar (auch leer, sonst „bei Pin nicht überall da"). */
.pod-dock--floating {
  position: fixed; right: 20px; bottom: 20px; left: auto; top: auto;
  width: 300px; max-width: calc(100vw - 40px); max-height: 72vh; z-index: 80;
  border: 1px solid var(--line, #e8e8e8); border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.20);
}
.pod-dock--floating.is-empty { display: flex; }
.pod-dock-empty {
  padding: 4px 16px 16px;
  color: var(--ink-muted, #6a6a6a); font-size: 13px; line-height: 1.5;
}
.pod-dock-empty p { margin: 0; }
.pod-dock-empty-pin { font-size: 14px; }
.pod-dock-head {
  display: flex; align-items: center; gap: 9px;
  padding: 14px 16px; border-bottom: 1px solid var(--line, #e8e8e8);
}
.pod-dock-ic { display: grid; place-items: center; color: var(--ink, #0a0a0a); }
.pod-dock-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pod-dock-title { font-weight: 700; font-size: 14px; letter-spacing: -0.01em; color: var(--ink, #0a0a0a); }
.pod-dock-count {
  margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--ink, #0a0a0a); color: var(--paper, #fafafa);
  font-size: 12px; font-weight: 700;
}
.pod-dock-list { list-style: none; margin: 0; padding: 8px; overflow-y: auto; flex: 1 1 auto; }
.pod-mini {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 9px; border-radius: 12px; cursor: default;
  transition: background .12s ease;
}
.pod-mini + .pod-mini { margin-top: 2px; }
.pod-mini:hover { background: var(--paper-warm, #f4f5f7); }
.pod-mini-ic {
  flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 9px; background: var(--paper-warm, #f4f5f7);
  border: 1px solid var(--line, #e8e8e8); color: var(--ink-soft, #3a3a3a);
}
.pod-mini-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pod-mini-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.pod-mini-txt b { font-size: 13px; font-weight: 600; color: var(--ink, #0a0a0a); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod-mini-txt small { font-size: 11px; color: var(--ink-muted, #6a6a6a); text-transform: uppercase; letter-spacing: 0.06em; }
.pod-mini-play, .pod-mini-rm {
  flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center;
  border: 0; background: transparent; border-radius: 8px; cursor: pointer;
  color: var(--ink-muted, #6a6a6a); transition: background .12s ease, color .12s ease;
}
.pod-mini-play svg, .pod-mini-rm svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pod-mini-play svg { fill: currentColor; stroke: none; }
.pod-mini-play:hover, .pod-mini-rm:hover { background: var(--line, #e8e8e8); color: var(--ink, #0a0a0a); }
/* Aktiver (spielender) Beitrag — dunkel hervorgehoben. */
.pod-mini.is-playing { background: var(--ink, #0a0a0a); }
.pod-mini.is-playing .pod-mini-txt b,
.pod-mini.is-playing .pod-mini-play,
.pod-mini.is-playing .pod-mini-rm { color: var(--paper, #fafafa); }
.pod-mini.is-playing .pod-mini-txt small { color: rgba(255, 255, 255, 0.6); }
.pod-mini.is-playing .pod-mini-ic { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.18); color: var(--paper, #fafafa); }
.pod-mini.is-playing .pod-mini-play:hover, .pod-mini.is-playing .pod-mini-rm:hover { background: rgba(255, 255, 255, 0.16); }
/* Lade-Puls beim Generieren/Holen des Clips. */
.pod-mini.is-loading .pod-mini-ic { animation: podPulse 1s ease-in-out infinite; }
@keyframes podPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.pod-dock-note { min-height: 0; padding: 0 16px; color: var(--ink-muted, #6a6a6a); font-size: 12px; }
.pod-dock-note:not(:empty) { padding: 4px 16px 0; }
.pod-dock-controls {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; border-top: 1px solid var(--line, #e8e8e8);
}
.pod-ctl {
  display: grid; place-items: center; height: 38px; border-radius: 10px;
  border: 1px solid var(--line, #e8e8e8); background: var(--paper, #fafafa);
  color: var(--ink, #0a0a0a); cursor: pointer; transition: background .12s ease, transform .12s ease;
}
.pod-ctl svg { width: 16px; height: 16px; fill: currentColor; stroke: currentColor; stroke-width: 0; }
.pod-ctl:hover { transform: translateY(-1px); }
.pod-ctl-main {
  flex: 1 1 auto; gap: 8px; grid-auto-flow: column;
  background: var(--ink, #0a0a0a); color: var(--paper, #fafafa); border-color: var(--ink, #0a0a0a);
  font-size: 13px; font-weight: 700;
}
.pod-ctl-main svg { fill: currentColor; }
.pod-ctl:not(.pod-ctl-main) { width: 38px; }
.pod-ctl:not(.pod-ctl-main) svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pod-ctl:not(.pod-ctl-main):hover { background: var(--paper-warm, #f4f5f7); }

/* Body-Layout der Mediathek: links das Portrait-Grid, rechts (ab 1440px)
   das Podcast-Panel. Darunter bleibt das Panel die untere Leiste. */
.mt-main-body { display: block; }
.mt-main-gridcol { min-width: 0; }

@media (min-width: 1180px) {
  /* Spalten-Layout NUR wenn NICHT angeheftet (sonst schwebt das Panel global
     → kein reservierter Platz, Grid nutzt die volle Breite). */
  html:not(.pod-floating) .mt-main-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: var(--space-4);
    align-items: start;
  }
  /* Sortier-Zeile auf die Grid-Spalten-Breite begrenzen (= rechte Kante der
     Kacheln), nicht bis zur Panel-Kante — nur im Spalten-Modus. */
  html:not(.pod-floating) .mt-main-head { max-width: calc(100% - 260px - var(--space-4)); }
  .pod-dock--column {
    position: sticky; top: 89px; left: auto; right: auto; bottom: auto;
    width: 260px; max-height: calc(100vh - 109px); align-self: start;
    border: 1px solid var(--line, #e8e8e8); border-radius: 18px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12);
  }
  /* Leeres Panel auf breiten Screens als Spalte mit Hinweis sichtbar lassen. */
  .pod-dock--column.is-empty { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .mt-pin-btn, .pod-ctl, .pod-mini { transition: none; }
  .pod-mini.is-loading .pod-mini-ic { animation: none; }
}

/* ============================================================================
   Admin-Cockpit (#/cockpit) — mobile-first Betriebs-Ansicht.
   Eine Spalte, grosse Touch-Targets; Status-Farben bewusst als einzige
   "warnende" Farben im sonst monochromen System (Ops-Dashboard).
   ============================================================================ */
.ck-shell {
  max-width: 520px;
  margin: 0 auto;
  padding: 28px 20px 56px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ck-eyebrow {
  margin: 0 0 6px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted, #6a6a6a);
}
.ck-title {
  margin: 0 0 4px;
  font-size: clamp(28px, 6vw, 36px);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.ck-card {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 18px 18px 16px;
}
.ck-card-label {
  margin: 0 0 8px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-muted, #6a6a6a);
}
/* Status-Karte */
.ck-card--status {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.ck-status-dot {
  flex: 0 0 14px;
  width: 14px; height: 14px;
  margin-top: 4px;
  border-radius: 50%;
  background: #2c8a43;
  box-shadow: 0 0 0 4px rgba(44, 138, 67, 0.15);
}
[data-ck-state="off"] .ck-status-dot {
  background: #b3261e;
  box-shadow: 0 0 0 4px rgba(179, 38, 30, 0.15);
}
[data-ck-state="budget"] .ck-status-dot {
  background: #b3801e;
  box-shadow: 0 0 0 4px rgba(179, 128, 30, 0.15);
}
.ck-status-value {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
[data-ck-state="off"] .ck-status-value { color: #b3261e; }
[data-ck-state="budget"] .ck-status-value { color: #8a6414; }
.ck-status-sub {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-soft, #3a3a3a);
}
/* Not-Aus */
.ck-kill {
  appearance: none;
  border: 0;
  border-radius: 14px;
  min-height: 58px;
  padding: 16px 18px;
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  color: #fff;
  background: #b3261e;
  transition: background 140ms ease, transform 80ms ease;
}
.ck-kill:active { transform: scale(0.99); }
.ck-kill.is-armed {
  background: #7a120c;
  animation: ck-arm-pulse 1s ease-in-out infinite;
}
.ck-kill[data-mode="enable"] { background: #2c8a43; }
.ck-kill:disabled { opacity: 0.6; cursor: default; animation: none; }
@keyframes ck-arm-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(179, 38, 30, 0.35); }
  50%      { box-shadow: 0 0 0 8px rgba(179, 38, 30, 0); }
}
/* Token-Karte */
.ck-spend-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}
.ck-spend {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: clamp(34px, 9vw, 44px);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.ck-pct {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 15px;
  color: var(--ink-muted, #6a6a6a);
}
.ck-bar {
  height: 8px;
  border-radius: 4px;
  background: rgba(10, 10, 10, 0.08);
  overflow: hidden;
}
.ck-bar-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 4px;
  background: #2c8a43;
  transition: width 400ms ease;
}
.ck-bar-fill[data-tone="warm"] { background: #b3801e; }
.ck-bar-fill[data-tone="hot"]  { background: #b3261e; }
.ck-bar-scale {
  margin: 6px 0 14px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--ink-muted, #8a8a8a);
}
.ck-tok-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  border-top: 1px solid var(--hairline);
  padding-top: 14px;
}
.ck-tok-num {
  margin: 0 0 2px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.ck-tok-label {
  margin: 0;
  font-size: 11.5px;
  color: var(--ink-muted, #6a6a6a);
}
/* Live-Kennzahlen: aktive Nutzer / Top-Beiträge / Kosten-Sim / Feeds */
.ck-pct--soft { font-size: 12.5px; color: var(--ink-muted, #8a8a8a); align-self: center; }
.ck-simgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}
.ck-list { list-style: none; margin: 2px 0 0; padding: 0; }
.ck-li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--hairline);
}
.ck-list > .ck-li:last-child { border-bottom: 0; }
.ck-li-main {
  color: var(--ink); font-size: 14px; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ck-li-meta {
  flex: none; font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px; color: var(--ink-muted, #8a8a8a); font-variant-numeric: tabular-nums;
}
.ck-feed { padding: 9px 0; border-bottom: 1px solid var(--hairline); }
.ck-list--feed > .ck-feed:last-child { border-bottom: 0; }
.ck-feed-q { display: block; color: var(--ink); font-size: 14px; line-height: 1.35; }
.ck-feed-meta {
  display: block; margin-top: 3px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px; color: var(--ink-muted, #8a8a8a);
}
.ck-li--empty { color: var(--ink-muted, #8a8a8a); font-size: 13px; border-bottom: 0; padding: 6px 0; }
/* Top-Beitrag als Link → Detailseite */
.ck-li-link { color: var(--ink); text-decoration: none; }
.ck-li-link:hover, .ck-li-link:focus-visible { text-decoration: underline; }
/* Cluster-Filter-Chips über den Chat-Fragen */
.ck-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; }
.ck-chip {
  appearance: none; cursor: pointer;
  border: 1px solid var(--hairline); background: #fff;
  border-radius: var(--r-pill, 999px); padding: 4px 11px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11.5px; letter-spacing: .02em; color: var(--ink-muted, #6a6a6a);
}
.ck-chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
/* Tokenverbrauch-Kurve (Inline-SVG, full-width) */
.ck-spark-wrap { margin-top: 14px; border-top: 1px solid var(--hairline); padding-top: 12px; }
.ck-spark-cap {
  display: flex; justify-content: space-between; gap: 10px; margin: 0 0 6px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px; color: var(--ink-muted, #8a8a8a);
}
.ck-spark { width: 100%; height: 72px; }
.ck-spark-svg { width: 100%; height: 72px; display: block; }
.ck-spark-area { fill: var(--ink); opacity: 0.07; }
.ck-spark-line {
  stroke: var(--ink); stroke-width: 1.6;
  stroke-linejoin: round; stroke-linecap: round;
}
/* Fussbereich */
.ck-meta {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--ink-muted, #8a8a8a);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ck-refresh {
  appearance: none;
  border: 1px solid var(--hairline);
  background: #fff;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  cursor: pointer;
  color: var(--ink-soft, #3a3a3a);
}
.ck-back {
  font-size: 14px;
  color: var(--ink-soft, #3a3a3a);
  text-decoration: none;
}
.ck-back:hover { text-decoration: underline; }
/* Auf der Cockpit-Route stören die Public-Overlays (Persona-Switcher) —
   das ist eine Betriebs-Ansicht, kein Besucher-Kontext. */
body:has(#layout-root[data-route="cockpit"]) .persona-switcher { display: none; }

/* Kontakt-Seite: Consent-Checkbox (Pflichtfeld fürs /api/contact-Schema —
   das Formular hatte vorher gar keine Zustimmung und lief in HTTP 422). */
.kt-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0 4px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-soft, #3a3a3a);
  cursor: pointer;
}
.kt-consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--ink, #0a0a0a);
  cursor: pointer;
}
.kt-consent a {
  color: inherit;
  text-decoration: underline;
}

/* Sticky-Header-Versatz für programmatische Scrolls: scrollIntoView mit
   block:"start" richtet das Ziel an der Viewport-Oberkante aus — der
   70px-Header überdeckt dann den Anfang (z.B. Discovery-Turn: Frage-Kopf
   + erste Antwortzeilen unsichtbar). scroll-margin-top lässt den Browser
   automatisch früher stoppen. Gilt für alle Chat-Antwort-Ziele. */
.discover-turn,
.mini-hero-answer,
#agent-response-wrap {
  scroll-margin-top: 86px;
}

/* Partner-Quer-Karten — User-Direktive "wesentlich grössere Schrift":
   kurze Markennamen tragen grosse Typo. Überschreibt die 18px-Flat-
   Defaults nur im Partner-Quer-Raster (Home + About). */
.tile-grid--insights .tile--partner .tile-title {
  font-size: 2rem;            /* 32px statt 18px */
  line-height: 1.12;
}
.tile-grid--insights .tile--partner .tile-meta {
  font-size: 1.05rem;
}
.tile-grid--insights .tile--partner .tile-eyebrow {
  font-size: 0.8rem;
}

/* Starter-Fragen-Chips im Hero — vorbereitete Fragen statt statischer FAQ.
   Klick füllt die Agenten-Bar und feuert die Frage ab (siehe app.js
   _onStarterChipClick). order:3 setzt sie GANZ ans Ende — unter die
   Hinweiszeile (order:2), an die Stelle des früheren "Wie das
   funktioniert"-Links (User-Direktive). flex-basis:100% = eigene Zeile. */
.hero-starter-chips {
  order: 3;
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 0;
}
.hero-starter-chip {
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.2;
  padding: 7px 14px;
  border: 1px solid var(--hairline, rgba(0,0,0,0.14));
  border-radius: 999px;
  background: var(--paper, #fff);
  color: var(--ink, #111);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}
.hero-starter-chip:hover {
  background: var(--ink, #111);
  color: var(--paper, #fff);
  border-color: var(--ink, #111);
}
.hero-starter-chip:active { transform: translateY(1px); }
.hero-starter-chip:focus-visible {
  outline: 2px solid var(--accent, #2c8a43);
  outline-offset: 2px;
}
/* Genuin dunkler Hero (legacy single, appearance:dark) — heller Chip.
   NICHT dual-track-card: dort liegt die AKTIVE Seite (mit Form + Chips)
   auf hellem Grund, also greift die dunkle Basis-Schrift. */
.hero[data-surface="dark"] .hero-starter-chip {
  border-color: rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.06);
  color: var(--paper, #fff);
}
.hero[data-surface="dark"] .hero-starter-chip:hover {
  background: var(--paper, #fff);
  color: var(--ink, #111);
  border-color: var(--paper, #fff);
}

/* ============================================================
   Hero-Agentenleiste — Schwarz/Weiss-Schema (User-Direktive 2026-06-13)
   Auf der hellen, AKTIVEN Track-Seite des Dual-Track-Hero:
   • Starter-Chips: kleiner + W/B (weiss/Outline) → Hover B/W (gefüllt)
   • Form-Buttons (Sprechen/Anhören/Sondieren/Fragen): B/W (gefüllt) →
     Hover W/B. Jeweils Hover-Invert. (Dunkle Seite trägt keine Form.)
   ============================================================ */
.hero--dual-track .hero-starter-chip {
  font-size: 0.78rem;
  padding: 4px 11px;
  background: #ffffff;
  color: #0a0a0a;
  border: 1px solid #0a0a0a;
}
.hero--dual-track .hero-starter-chip:hover {
  background: #0a0a0a;
  color: #ffffff;
  border-color: #0a0a0a;
}
.hero--dual-track .agent-prompt #agent-submit,
.hero--dual-track .agent-prompt .agent-mic {
  background: #0a0a0a !important;
  color: #ffffff !important;
  border: 1px solid #0a0a0a !important;
}
.hero--dual-track .agent-prompt #agent-submit:hover,
.hero--dual-track .agent-prompt .agent-mic:hover {
  background: #ffffff !important;
  color: #0a0a0a !important;
  border-color: #0a0a0a !important;
}

/* Dunkle aktive Track-Seite (Track A = IT-Welt, schwarzer Grund) —
   "gerade umgekehrt" (User 2026-06-13): auf Schwarz sind die BUTTONS die
   prominenten (weiss gefüllt / schwarze Schrift), die CHIPS die dezenten
   (transparent + weisser Rand). Jeweils Hover-Invert. Spiegel der hellen
   Seite (dort Buttons schwarz gefüllt, Chips weisses Outline-Pill). */
.hero--dual-track .dt-side--a .agent-prompt #agent-submit,
.hero--dual-track .dt-side--a .agent-prompt .agent-mic {
  background: #ffffff !important;
  color: #0a0a0a !important;
  border: 1px solid #ffffff !important;
}
.hero--dual-track .dt-side--a .agent-prompt #agent-submit:hover,
.hero--dual-track .dt-side--a .agent-prompt .agent-mic:hover {
  background: transparent !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
}
/* Chips auf der dunklen Seite: dezenter Outline (transparent + weisser
   Rand + weisse Schrift), Hover -> weiss gefüllt / schwarze Schrift. */
.hero--dual-track .dt-side--a .hero-starter-chip {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.55);
}
.hero--dual-track .dt-side--a .hero-starter-chip:hover {
  background: #ffffff;
  color: #0a0a0a;
  border-color: #ffffff;
}

/* Service-Diode (User-Direktive 2026-06-13): oben rechts auf Service-
   Kacheln eine stets pulsierende Turquoise-LED — wie der Agent-Indikator
   im Header (active-State, Logo-Farbe #14b8a6). NUR kind=service, NUR in
   WIDE/WIDE_DET/Portrait. Reines CSS via ::after + vorhandene heroLedPulse-
   Keyframe. */
.tile-v2--service.tile-v2--wide,
.tile-v2--service.tile-v2--wide-det,
.tile-v2--service.tile-v2--portrait {
  position: relative;
}
.tile-v2--service.tile-v2--wide::after,
.tile-v2--service.tile-v2--wide-det::after,
.tile-v2--service.tile-v2--portrait::after {
  content: "";
  position: absolute;
  top: 16px;
  right: 16px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #a7f3e8 0%, #14b8a6 55%, #0e7c70 100%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.25) inset,
    0 0 7px 1px rgba(20, 184, 166, 0.65);
  animation: heroLedPulse 1.6s ease-in-out infinite;
  z-index: 3;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .tile-v2--service.tile-v2--wide::after,
  .tile-v2--service.tile-v2--wide-det::after,
  .tile-v2--service.tile-v2--portrait::after { animation: none; }
}

/* ============================================================
   Persona-Switcher in die Lücke zwischen Header und grossem Hero —
   NUR beim Dual-Track-Hero auf der Home (User-Direktive 2026-06-13).
   Die Cluster-/Mini-Hero-Routen behalten ihren integrierten Switcher
   (Mini-Pill) unverändert; dort wird NICHTS geändert.
   ============================================================ */
body:has(.hero--dual-track) > #persona-switcher {
  display: flex;
  position: static;
  transform: none;
  left: auto;
  top: auto;
  /* Volle Band-Breite (statt auto-zentriert als Flex-Item des Body-
     Columns) mit --paper als Hintergrund — so verschmilzt der Switcher-
     Bereich nahtlos mit dem --paper-Rahmen des Hero darunter; kein
     weisser Body-Streifen mehr. */
  align-self: stretch;
  width: 100%;
  background: var(--paper);
  justify-content: center;
  align-items: center;
  gap: 16px;
  /* Schmales Band direkt unter dem Header → kleiner Abstand zum Hero. */
  margin: 0;
  padding: 14px 0 10px;
  pointer-events: auto;
}
/* Nur der hero-interne Seam-Switcher des grossen Hero entfällt — er ist
   jetzt oben in der Lücke. Mini-Pill der Cluster-Routen bleibt. */
body:has(.hero--dual-track) .dt-seam-switcher { display: none !important; }

/* ============================================================
   Canvas (.cs-doc) an die Standard-Routen-Erscheinung angleichen
   (User-Direktive 2026-06-13):
   1. Volle Inhaltsbreite wie .container (--max-width) — auch im LP-Mode
      und auf Detail-Seiten (vorher 980px Lese-Spalte).
   2. Boxen = weisse Karten mit weichem Schatten auf --paper-Fläche
      (wie die Standard-Tiles), statt flacher Outline-Boxen auf Weiss.
   ============================================================ */
/* (1) Breite: alle Canvas-Kontexte auf die SFOUR-Container-Breite. */
.cs-doc .cs-wrap,
body.lp-mode .lp-canvas-embed .cs-wrap,
.dp-shell .lp-canvas-embed .cs-wrap {
  max-width: var(--max-width);
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}
/* (2a) Fläche = --paper wie die Route-Sektionen → weisse Karten + Schatten
   heben sich ab (auf der bisherigen weiss-getönten Fläche war der Schatten
   unsichtbar). Ersetzt den Farb-Bloom-Gradient. */
.cs-doc { background: var(--paper); }
/* (2b) Boxen = weisse Karten mit weichem Schatten + dezenter Hairline. */
.cs-doc .cs-card,
.cs-doc .cs-callout,
.cs-doc .cs-bullet,
.cs-doc .cs-step,
.cs-doc .cs-stat,
.cs-doc .cs-ic {
  background: #ffffff;
  border-color: var(--hairline-light, rgba(0, 0, 0, 0.06));
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.05), 0 10px 28px rgba(16, 24, 40, 0.07);
}
/* Hero + CTA: neutrale weisse Karte mit Schatten statt Farb-Bloom. */
.cs-doc .cs-hero,
.cs-doc .cs-cta {
  background: #ffffff;
  border-color: var(--hairline-light, rgba(0, 0, 0, 0.06));
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.05), 0 12px 34px rgba(16, 24, 40, 0.08);
}
/* Farbig getönte Callouts ebenfalls auf neutrale weisse Karte. */
.cs-doc .cs-callout.cs-cyan,
.cs-doc .cs-callout.cs-violet,
.cs-doc .cs-callout.cs-emerald {
  background: #ffffff;
  border-color: var(--hairline-light, rgba(0, 0, 0, 0.06));
}

/* Hero ist jetzt eine weisse Karte → der Lead darf nicht mehr weiss sein
   (alter Dark-Hero-Rest, ~Z.17483). Auf dunkle SFOUR-Ink zurückholen. */
.lp-canvas-embed .cs-doc .cs-hero .cs-lead { color: var(--ink-soft, #3a3a3a); }

/* Abschluss-Callouts (.cs-callout: "Nutzen: …", "Gläsern in jedem Schritt",
   "Ehrlich statt versteckt", "Warum mehrere Standards …") als PLAIN Text
   statt Box (User-Direktive 2026-06-13): kein Hintergrund/Rahmen/Schatten/
   Card-Padding — liest sich als abschliessende Bemerkung, nicht als Karte.
   Der bold Titel bleibt als Lead-in. Content-Karten (.cs-card) und
   DIE-IDEE-Bullets (.cs-bullet) bleiben Boxen mit Schatten. */
.cs-doc .cs-callout,
.cs-doc .cs-callout.cs-cyan,
.cs-doc .cs-callout.cs-violet,
.cs-doc .cs-callout.cs-emerald {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  margin-top: 16px;
}

/* ============================================================
   Black-Mode-Bereich im Canvas (.cs-dark): dunkle Bandfläche mit hellem
   Text + Dunkel-Glas-Karten — gibt dem Canvas dieselbe Light/Dark-
   Rhythmik wie die Standard-Routen. Auf eine Sektion anwenden via
   class="cs-sec cs-dark" bzw. "cs-cta cs-dark". (User-Direktive 2026-06-13)
   ============================================================ */
.cs-doc .cs-dark {
  background: var(--ink, #0a0a0a);
  color: var(--body-dark, #c8c8c4);
  border: 0;
  border-radius: var(--r-card, 21px);
  padding: clamp(28px, 3vw, 44px) clamp(22px, 3vw, 40px);
  margin-top: 28px;
  box-shadow: 0 14px 40px rgba(10, 14, 23, 0.18);
}
/* Überschriften + Bold hell */
.cs-doc .cs-dark h2,
.cs-doc .cs-dark .cs-ctitle,
.cs-doc .cs-dark .cs-cotitle,
.cs-doc .cs-dark b,
.cs-doc .cs-dark strong { color: #ffffff; }
/* Fliesstext gedämpft-hell */
.cs-doc .cs-dark .cs-prose p,
.cs-doc .cs-dark .cs-cbody,
.cs-doc .cs-dark .cs-cobody,
.cs-doc .cs-dark .cs-bullet,
.cs-doc .cs-dark .cs-lead,
.cs-doc .cs-dark p { color: var(--body-dark, #c8c8c4); }
/* Eyebrow hell-gedämpft (Mono bleibt) */
.cs-doc .cs-dark .cs-eyebrow { color: var(--muted-dark, #a0a0a0); }
/* Icons hell (currentColor) */
.cs-doc .cs-dark .cs-cico,
.cs-doc .cs-dark .cs-bico,
.cs-doc .cs-dark .cs-eyebrow .cs-ico { color: #ffffff; }
/* Innere Karten → Dunkel-Glas statt weiss */
.cs-doc .cs-dark .cs-card,
.cs-doc .cs-dark .cs-bullet,
.cs-doc .cs-dark .cs-stat,
.cs-doc .cs-dark .cs-step,
.cs-doc .cs-dark .cs-ic {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}
/* CTA-Button auf Dunkel → hell gefüllt, damit er trägt */
.cs-doc .cs-dark .lp2-cta {
  background: #ffffff;
  color: var(--ink, #0a0a0a);
  border-color: #ffffff;
}

/* Bullets im Canvas plain statt Box (User-Direktive 2026-06-13): weniger
   Box-Dichte. Icon + bold Lead + Text als saubere Liste — kein weisser
   Kasten, kein Schatten, kein Rahmen. Content-Karten (.cs-card) und
   Steps bleiben Boxen ("sonst genau so"). */
.cs-doc .cs-bullet {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 4px 0;
}

/* ── Glossar: Inline-Begriff (dezenter Hover-Tooltip) ── */
.gloss { text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--ink-muted, #6a6a6a); cursor: help; }
.gloss:hover, .gloss:focus-visible { text-decoration-style: solid; text-decoration-color: var(--ink, #0a0a0a); outline: none; }

/* ── Glossar: Akkordeon-Index nach dem CTA (je Kategorie aufklappbar) ── */
.dp-glossary { max-width: var(--max-prose); margin: 2.5rem auto 0; padding: 1.5rem 32px 0; border-top: 1px solid var(--line, #e8e8e8); }
.dp-glossary-inner { display: block; }
.dp-glossary-title { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted, #6a6a6a); margin: 0 0 1rem; }
.dp-gloss-ac { display: grid; gap: .55rem; }
.dp-gloss-ac-group { border: 1px solid var(--line, #e8e8e8); border-radius: 12px; background: var(--card, #fff); overflow: hidden; }
.dp-gloss-ac-head { display: flex; align-items: center; gap: .7rem; padding: .8rem .95rem; cursor: pointer; list-style: none; color: var(--ink, #0a0a0a); transition: background .15s; }
.dp-gloss-ac-head::-webkit-details-marker { display: none; }
.dp-gloss-ac-head:hover { background: var(--paper, #f4f6f9); }
.dp-gloss-ac-head:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ink, #0a0a0a); border-radius: 12px; }
.dp-gloss-ac-ico { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 auto; border-radius: 8px; background: var(--paper, #f4f6f9); color: var(--ink, #0a0a0a); }
.dp-gloss-ac-group[open] .dp-gloss-ac-ico { background: var(--ink, #0a0a0a); color: #fff; }
.dp-gloss-ac-ico svg { width: 18px; height: 18px; }
.dp-gloss-ac-label { flex: 1 1 auto; min-width: 0; font-size: .95rem; font-weight: 700; }
.dp-gloss-ac-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.3rem; height: 1.3rem; padding: 0 .35rem; border-radius: 999px; background: var(--paper, #f4f6f9); color: var(--ink-muted, #6a6a6a); font-size: .74rem; font-weight: 700; }
.dp-gloss-ac-chevwrap { display: inline-flex; flex: 0 0 auto; color: var(--ink-muted, #6a6a6a); }
.dp-gloss-ac-chev { width: 18px; height: 18px; transition: transform .2s ease; }
.dp-gloss-ac-group[open] .dp-gloss-ac-chev { transform: rotate(180deg); }
.dp-gloss-ac-panel { padding: .3rem 1rem 1.05rem; border-top: 1px solid var(--line, #e8e8e8); }
.dp-gloss-ac-item { padding: .85rem 0 0; }
.dp-gloss-ac-item + .dp-gloss-ac-item { margin-top: .85rem; border-top: 1px solid var(--line, #e8e8e8); }
.dp-gloss-ac-term { font-size: .98rem; font-weight: 700; line-height: 1.25; color: var(--ink, #0a0a0a); margin: 0; }
.dp-gloss-ac-full { font-weight: 500; font-size: .85rem; color: var(--ink-muted, #6a6a6a); }
.dp-gloss-ac-desc { margin: .4rem 0 0; font-size: .9rem; line-height: 1.55; color: var(--ink-soft, #3a3a3a); }

@media (max-width: 640px) {
  .dp-glossary { padding-left: 24px; padding-right: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .dp-gloss-ac-chev { transition: none; }
}