/* ============================================================
   Slide-System v2 — 12-Spalten-Raster, L1–L7 Layouts, E1–E17 Elemente
   Single source of truth for all Reveal.js presentations.
   Used by: overview.html · storyview.html · techview.html

   TO CHANGE THEME: edit only the :root variables below.
   All colors, fonts, and spacing cascade from there.
   Design-Spec: docs/styleguide-v2-source.html (Referenz, adoptiert aus css-style-guides/b/)
   ============================================================ */

/* ── Theme Variables (swap here to change theme) ────────── */
:root {
  /* Core palette */
  --navy:               #1a3a5c;   /* dark blue — headings, nav, dark surfaces */
  --accent:             #C9873F;   /* warm gold — one accent active per slide */
  --ink:                #3E4A5C;   /* strong text, card headings */
  --ink-body:           #66707D;   /* running body text */
  --ink-soft:           #8A93A0;   /* captions, muted labels */
  --positive:           #4C9C7B;   /* good news, success */
  --warning:            #d98a3d;   /* caution, amber states */
  --negative:           #c0392b;   /* problems, bad metrics */

  /* Title slide (on dark gradient background) */
  --color-title-text:   #ffffff;
  --color-title-sub:    rgba(255,255,255,0.78);
  --color-title-meta:   rgba(255,255,255,0.32);
  --color-kpi-positive: #4cd98a;   /* bright green on dark bg */
  --color-kpi-negative: #ff7a7a;   /* bright red on dark bg */
  --color-kpi-warning:  #ffc66d;   /* bright amber on dark bg */

  /* Card surfaces — Standard-Theme ist Blau-Grau (Kay-Entscheidung 2026-07-13).
     Swap diese zwei Variablen um zu retheme, Alternativen: Beige (#F3F1EC/#E4E0D6),
     Grün — siehe Styleguide §5. */
  --card:               #EDEFF2;
  --card-border:        #DCE2E8;

  /* Sentiment-tinted surfaces (boxes, facts) — default folgt --card, damit die zwei
     Swap-Variablen wirklich die ganze Palette bestimmen (Styleguide v2 §5) */
  --bg-box-default:     var(--card);
  --bg-box-positive:    #eef6f0;
  --bg-box-negative:    #fbeeec;
  --bg-box-warning:     #faf0e3;
  --bg-table-alt:       #F5F7F9;
  --bg-table-hl:        #eef6f0;

  /* Typography */
  --font-base-size:     17px;  /* exakt wie STYLEGUIDE.html .slide (Design-Spec, docs/styleguide-v2-source.html Z.42) */
  --font-ui:            -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Spacing — global corner radius (all rounded elements) */
  --radius-card:        5px;
  --radius-box:         5px;

  /* Raster (Styleguide v2 §2): Canvas 1024×720, Rand 56/56/40, feste Kopfzone 170px */
  --frame-side:         56px;
  --frame-bottom:       40px;
  --head-zone:          150px;
}

/* ── Base ─────────────────────────────────── */
/* font-family explizit setzen — sonst erbt .reveal Reveal.js' Theme-Font
   (theme/white.css: "Source Sans Pro", Helvetica, sans-serif). Diese Fonts
   laden kein echtes Weight-100-Schnitt, wodurch font-weight:100 (Title-Slide
   h2, siehe unten) CSS-seitig gesetzt aber optisch wirkungslos war — der
   Browser rundet auf die nächste tatsächlich geladene Schriftschnittstärke.
   --font-ui (System-Font-Stack, wie index-template.html) hat echte Thin-Schnitte. */
.reveal { font-size: var(--font-base-size); font-family: var(--font-ui); }
.reveal h1, .reveal h2, .reveal h3, .reveal h4 { text-transform: none; }
/* kein h1 mehr im Generator — Title-Slide nutzt jetzt render_head() wie jede andere Slide */
/* Kay 2026-07-14: h2 ist der technische Slide-Titel (Reihenfolge/Wegweiser), nicht die
   Kernbotschaft — deshalb klein. .lead/.statement tragen die eigentliche Botschaft und sind
   bewusst grösser (siehe dort). .title-slide/.closing h2 sind eigene, spezifischere Regeln
   weiter unten und bleiben von dieser Basisregel unberührt. */
.reveal h2 { font-size: 1.5em; color: var(--navy); margin: 0 0 0.4em; text-align: left; line-height: 1.3; font-weight: 300; font-family: var(--font-ui); }
.reveal .subline { font-size: 0.86em; color: var(--ink-body); font-weight: 200; letter-spacing: normal; margin-top: 0; margin-bottom: 0; max-width: 68ch; text-align: left; display: block; line-height: 1.5; }
.slide-kicker { font-size: 0.68em; font-weight: 100; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.6em; display: block; text-align: left; }
.slide-subtitle { font-size: 0.84em; color: var(--ink-body); margin-top: -0.8em; margin-bottom: 1.4em; line-height: 1.5; }
.reveal p, .reveal li { color: var(--ink-body); line-height: 1.5; text-align: left; }
.reveal ul { margin: 0; padding-left: 1.1em; }
.reveal li { margin-bottom: 5px; font-size: 0.86em; }
.reveal strong { color: var(--ink); }
.reveal em { color: var(--accent); font-style: normal; font-weight: 600; }
.reveal .slide-number { display: none !important; }
.reveal img { max-width: 100%; border-radius: var(--radius-card); }

/* Content slides: fixed 56/56/40 frame around the content, so every slide sits
   in the same canvas position regardless of what's inside (Styleguide v2 §2). */
.reveal .slides > section { text-align: left; padding: var(--frame-side) var(--frame-side) var(--frame-bottom); box-sizing: border-box; height: 100%; }
/* display:flex nur auf der aktiven Slide setzen — sonst überschreibt es Reveal.js'
   eigenes display:none für inaktive Slides und alle Slides werden gleichzeitig sichtbar.
   !important nötig, weil Reveal.js beim Wechsel display:block INLINE auf die aktive
   Slide setzt (per JS) — das schlägt jede normale Stylesheet-Regel, exakt das gleiche
   Problem, das .title-slide/.closing weiter unten schon mit !important lösen. */
.reveal .slides > section.present { display: flex !important; flex-direction: column; }
.reveal .slides > section.title-slide,
.reveal .slides > section.closing { text-align: center; }
/* Head zone: kicker + h2 + subline stack naturally at the top of .slide-head, which
   reserves the fixed 170px zone — subline always sits directly under the title,
   regardless of title length (was previously min-height on h2 alone, which pushed
   subline down towards the content zone instead of anchoring it to the title).
   flex:0 0 var(--head-zone) statt min-height — exakt wie STYLEGUIDE.html .head
   (flex:0 0 170px): eine STARRE Höhe, die nie wächst. min-height hätte die Zone bei
   zweizeiligen Titeln wachsen lassen, wodurch die Content-Zone pro Slide
   unterschiedlich hoch startete (Kay-Feedback: "springt immer noch"). Konsequenz:
   Titel/Subline müssen in 170px passen (Typografie ist dafür ausgelegt, siehe
   Styleguide-Spec "hält auch zweizeilig in der 170px-Kopfzone") — kein Überlauf-Fallback. */
.slide-head { flex: 0 0 var(--head-zone); overflow: hidden; }
/* Elemente schrumpfen auf ihren Inhalt und zentrieren sich als Gruppe vertikal in der
   Inhaltszone (Styleguide v2 Prinzip 3) — einzige Ausnahme ist E1 KPI-Reihe (volle Höhe).
   Trennlinie sitzt hier (nicht an .subline), damit sie an derselben Stelle steht, egal
   ob eine Subline vorhanden ist oder nicht. */
.content-zone { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0; border-top: 1px solid #f5f5f5; }

/* Tables: no cell borders, rounded header row (border-collapse: separate) */
.reveal table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.82em; margin: 0.4em 0; }
.reveal table th { background: var(--navy); color: #fff; padding: 7px 10px; text-align: left; font-weight: 600; }
.reveal table thead th:first-child { border-top-left-radius: var(--radius-card); }
.reveal table thead th:last-child  { border-top-right-radius: var(--radius-card); }
.reveal table td { padding: 7px 10px; vertical-align: top; }
.reveal table tr:nth-child(even) td { background: var(--bg-table-alt); }
tr.hl td { background: var(--bg-table-hl) !important; font-weight: 600; }
.caption { font-size: 0.63em; color: var(--ink-soft); margin-top: 4px; text-align: center; font-style: italic; }

/* ── Nav bar ──────────────────────────────────── */
#nav {
  position: fixed; top: 0; left: 0; right: 0; height: 34px;
  background: var(--navy); display: none;
  z-index: 9999; padding: 0 14px; gap: 0;
}
#nav .chs { display: flex; flex: 1; gap: 2px; }
#nav .ch { flex: 1; text-align: center; font-size: 10px; font-family: var(--font-ui); font-weight: 600; color: rgba(255,255,255,0.4); padding: 5px 3px; cursor: pointer; border-radius: 3px; transition: all 0.18s; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#nav .ch .n { display: block; font-size: 7px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.55; margin-bottom: 1px; }
#nav .ch:hover { color: rgba(255,255,255,0.78); background: rgba(255,255,255,0.08); }
#nav .ch.active { color: #fff; background: rgba(201,135,63,0.5); }
#nav .ch.done { color: rgba(255,255,255,0.52); }
.reveal .controls { display: none !important; }
.reveal .progress { display: none !important; }

/* ── Slide ticks ──────────────────────────────── */
#slideticks {
  position: fixed;
  bottom: 12px;
  left: 0; right: 0;
  height: 60px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 130px;
  z-index: 9998;
  pointer-events: none;
}
.stk-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  width: 22px;
  cursor: pointer;
  pointer-events: auto;
}
/* Large invisible click target around each tick (does not shift layout) */
.stk-wrap::before {
  content: "";
  position: absolute;
  left: 50%; transform: translateX(-50%);
  width: 36px; top: -16px; bottom: -6px;
}
/* Chapter label above the tick line — transparent by default */
.stk-ch-label {
  display: block;
  height: 11px;
  line-height: 11px;
  font-size: 8px;
  font-family: var(--font-ui);
  color: transparent;
  white-space: nowrap;
  max-width: 86px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  letter-spacing: 0.02em;
  transition: color 0.18s, font-weight 0.18s;
  align-self: flex-start;
  margin-left: 50%;   /* label starts at tick center */
}
.stk {
  width: 1px;
  height: 11px;  /* regular = half of chapter tick */
  background: rgba(26, 58, 92, 0.2);
  border-radius: 1px;
  transition: background 0.18s, width 0.12s, height 0.12s;
}
.stk-num {
  font-size: 10px;
  line-height: 1;
  color: rgba(26, 58, 92, 0.3);
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  transition: color 0.18s;
}
.stk-wrap.stk-past .stk     { background: rgba(26, 58, 92, 0.5); }
.stk-wrap.stk-past .stk-num { color: rgba(26, 58, 92, 0.5); }
.stk-wrap.stk-current .stk     { background: var(--navy); width: 2px; height: 28px; }
.stk-wrap.stk-current .stk-num { color: var(--navy); font-weight: 700; }
/* Chapter start ticks: taller + visible label */
.stk-wrap.stk-chapter .stk-ch-label       { color: rgba(26, 58, 92, 0.32); }
.stk-wrap.stk-chapter .stk                { height: 26px; }
.stk-wrap.stk-chapter.stk-current .stk-ch-label { color: var(--navy); font-weight: 700; }
/* Light hover on marker + number */
.stk-wrap:hover .stk     { background: rgba(26, 58, 92, 0.6); }
.stk-wrap:hover .stk-num { color: rgba(26, 58, 92, 0.7); }

/* ── Prev / next arrows (flank the tick bar) ───── */
.nav-arrow {
  position: fixed;
  bottom: 12px;
  height: 60px;
  width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  cursor: pointer;
  pointer-events: auto;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: rgba(26, 58, 92, 0.55);
  user-select: none;
  padding: 0;
  transition: color 0.18s;
}
.nav-arrow:hover { color: var(--navy); }
#nav-prev { left: 16px; }
#nav-next { right: 16px; }
.nav-arrow.nav-hidden { display: none; }

/* ── Left nav — Xusni-style (Variant B) ─────────── */
#leftnav {
  position: fixed;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9998;
  display: flex;
  flex-direction: column;
  padding: 16px 0;
  border-left: 1px solid rgba(26, 58, 92, 0.1);
}
.ln-item {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 9px;
  cursor: pointer;
  padding-left: 4px;
}
.ln-item.ln-chapter          { height: 20px; margin-top: 8px; }
.ln-item.ln-chapter:first-child { margin-top: 0; }
.ln-tick {
  width: 5px;
  height: 1px;
  background: rgba(26, 58, 92, 0.18);
  flex-shrink: 0;
  transition: width 0.18s, height 0.18s, background 0.18s;
}
.ln-item.ln-chapter  .ln-tick { width: 9px; background: rgba(26, 58, 92, 0.28); }
.ln-item.ln-past     .ln-tick { background: rgba(26, 58, 92, 0.42); }
.ln-item.ln-current  .ln-tick { width: 16px; height: 2px; background: var(--accent); }
.ln-item:hover       .ln-tick { background: var(--accent); }
.ln-label {
  font-size: 7px;
  color: rgba(26, 58, 92, 0.3);
  font-family: var(--font-ui);
  white-space: nowrap;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.18s, font-weight 0.18s;
}
.ln-item.ln-current .ln-label { color: var(--accent); font-weight: 700; letter-spacing: 0.04em; }
.ln-item:hover      .ln-label { color: var(--accent); }

/* ── Nav variant toggle ──────────────────────────── */
body:not(.nav-left) #leftnav                { display: none !important; }
body.nav-left       #slideticks             { display: none !important; }
body.nav-left       #progress-track        { display: none !important; }

/* ── Custom progress bar ──────────────────────── */
#progress-track {
  position: fixed;
  bottom: 0;
  left: 130px; right: 130px;
  height: 10px;
  background: rgba(26, 58, 92, 0.1);
  z-index: 9997;
}
#progress-fill {
  height: 100%;
  background: var(--navy);
  width: 0%;
  transition: width 0.25s ease;
}

/* ── Nav inverted (on dark title / closing slides) ── */
body.nav-invert .stk                              { background: rgba(255,255,255,0.4); }
body.nav-invert .stk-num                          { color: rgba(255,255,255,0.55); }
body.nav-invert .stk-wrap.stk-past .stk           { background: rgba(255,255,255,0.6); }
body.nav-invert .stk-wrap.stk-past .stk-num       { color: rgba(255,255,255,0.6); }
body.nav-invert .stk-wrap.stk-current .stk        { background: #fff; }
body.nav-invert .stk-wrap.stk-current .stk-num    { color: #fff; }
body.nav-invert .stk-wrap.stk-chapter .stk-ch-label              { color: rgba(255,255,255,0.55); }
body.nav-invert .stk-wrap.stk-chapter.stk-current .stk-ch-label  { color: #fff; }
body.nav-invert .stk-wrap:hover .stk              { background: #fff; }
body.nav-invert .stk-wrap:hover .stk-num          { color: #fff; }
body.nav-invert .nav-arrow                        { color: rgba(255,255,255,0.55); }
body.nav-invert .nav-arrow:hover                  { color: #fff; }
body.nav-invert #progress-track                   { background: rgba(255,255,255,0.2); }
body.nav-invert #progress-fill                    { background: #fff; }

/* ── Title slide — gleiche Kopfzone/Content-Zone-Struktur wie jede andere Slide,
   nur Farben invertiert (dunkler Hintergrund, helle Schrift). Kein Sonderlayout mehr. */
.title-slide { display: flex !important; flex-direction: column; text-align: center; }
/* Gleiche Größen wie header h1/.tagline in index-template.html (3.5rem/1rem bei 16px
   Basis) — umgerechnet auf die 17px-Slide-Basis: 56px/17=3.29em, 16px/17=0.94em. */
.title-slide h2 { font-size: 3.29em; font-weight: 100; color: #fff; letter-spacing: -0.01em; }
.title-slide .subline { font-size: 0.94em; color: rgba(255,255,255,0.78); }
.title-slide .content-zone,
.closing .content-zone { border-top-color: rgba(255,255,255,0.15); }
/* KPI-Reihe wie E1 im Slide-System: Border-Left-Akzent statt Box-Pille */
.title-slide .kpi-row { display: flex; gap: 28px; justify-content: center; }
.title-slide .kpi { border-left: 3px solid rgba(255,255,255,0.25); padding-left: 14px; text-align: left; }
.title-slide .kpi .v { font-size: 1.8em; font-weight: 500; color: var(--color-title-text); line-height: 1; }
.title-slide .kpi .l { font-size: 0.62em; color: rgba(255,255,255,0.6); margin-top: 6px; line-height: 1.4; }
.title-slide .kpi.red   { border-left-color: var(--color-kpi-negative); }
.title-slide .kpi.amber { border-left-color: var(--color-kpi-warning); }
.title-slide .kpi.green { border-left-color: var(--color-kpi-positive); }
/* Start-CTA: nutzt .closing-links als Wrapper (gleiche Skalierung), nur der margin-top ist eigen */
.title-cta { margin-top: 2.4em; }
/* View-Teaser: automatisch aus hub.view_cards[view], sitzt zwischen KPI-Reihe und
   Start-CTA — derselbe Text, den die Hub-Karte für diese View zeigt. */
.view-teaser { margin-top: 2em; text-align: center; }
.view-teaser-heading { font-size: 0.85em; font-weight: 500; color: var(--accent); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5em; }
.title-slide .view-teaser-desc { font-size: 0.88em; color: rgba(255,255,255,0.75); max-width: 52ch; margin: 0 auto; line-height: 1.5; }
.title-cta .c-link { cursor: pointer; }
.title-slide .kpi.red   .v { color: var(--color-kpi-negative); }
.title-slide .kpi.amber .v { color: var(--color-kpi-warning); }
.title-slide .kpi.green .v { color: var(--color-kpi-positive); }
.title-slide .meta { color: var(--color-title-meta); font-size: 0.68em; margin-top: 2em; }

/* ── Title-Slide L6-Experiment (Versuch, aktuell nur zh-tram-data/storyview) ──
   Bewusst eigenes Markup statt render_head()/.slide-head — das L6-Layout spannt
   die GANZE Slide-Höhe als Zeile auf, nicht Kopfzone+Content-Zone übereinander,
   die starre 150px-Kopfzonen-Regel passt hier nicht (gleiche Ausnahme-Logik wie
   bei .chart-cols, siehe dort). */
/* L6-Experiment v2: Titel/Subline sitzen jetzt in der normalen Kopfzone
   (render_head(), Standard-.slide-head) — .title-split ist nur noch der
   Wrapper für die zweispaltige Content-Zone (Teaser+Start links, KPI-Row rechts). */
.title-split-cols { display: flex; align-items: center; gap: 48px; height: 100%; text-align: left; }
.title-split-left { flex: 0 0 33.33%; display: flex; flex-direction: column; justify-content: center; }
.title-split-left .view-teaser { text-align: left; margin-top: 0; }
.title-split-left .view-teaser-desc { margin: 0; max-width: none; }
.title-split-left .closing-links { justify-content: flex-start; }
.title-split-right { flex: 1; display: flex; align-items: center; justify-content: center; }
/* Bei 4 KPIs mit längeren Labels reicht die Breite der rechten Spalte nicht immer für
   eine Reihe — nowrap (Standard bei .kpi-row) hätte den Wert selbst mitten im Text
   umgebrochen. Wrap erlauben, dann geht's als 2×2 auf statt Text zu quetschen. */
/* Grid statt Flex-Wrap: flex-wrap bricht "greedy" um (so viele wie in eine
   Zeile passen, z.B. 3+1) — Grid mit auto-fit erzwingt ein sauberes 2×2,
   sobald 4 KPIs nicht mehr in eine Reihe passen (Kay: "2 Reihen 2 Spalten"). */
.title-split-right .kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, max-content));
  justify-content: center;
  gap: 1.6em 28px;
  /* Als Flex-Kind hat der Grid-Container sonst keine echte Breite, gegen die
     auto-fit rechnen kann — kollabiert dann auf 1 Spalte statt 2. */
  width: 100%;
}

/* ── Layout ───────────────────────────────────── */
.cols { display: flex; gap: 26px; align-items: flex-start; }
.cols > div { flex: 1; }
.w60 { flex: 1.5 !important; } .w40 { flex: 0.67 !important; }
.w55 { flex: 1.2 !important; } .w45 { flex: 0.9 !important; }
.w50 { flex: 1 !important; }

/* ── 12-Spalten-Grid (Styleguide v2 §2/§6) ──────
   Utility für Elemente, die sich über L1–L7 verteilen. Spans per Inline-Style
   (grid-template-columns/gap) aus dem Generator, Grundverhalten hier. ── */
.g12 { display: grid; grid-template-columns: repeat(12, 1fr); align-items: center; }
.g12.top { align-items: flex-start; }

/* ── Boxes ────────────────────────────────────── */
.box { background: var(--bg-box-default); padding: 9px 13px; border-radius: var(--radius-box); margin: 7px 0; font-size: 0.85em; line-height: 1.6; color: var(--ink-body); }
.box.red   { background: var(--bg-box-negative); }
.box.green { background: var(--bg-box-positive); }
.box.amber { background: var(--bg-box-warning); }

/* ── E1 — KPI-Reihe (figures) ───────────────────
   flex+center statt grid(4) — sonst wirkt eine Reihe mit weniger als 4 Werten
   linksbündig statt als zentrierte Gruppe (gleiches Muster wie .title-slide .kpi-row). */
.metric-row { display: flex; justify-content: center; gap: 24px; }
.metric { border-left: 3px solid var(--card-border); padding-left: 18px; text-align: left; display: flex; flex-direction: column; justify-content: center; }
.metric .val { font-size: 2em; font-weight: 600; color: var(--ink); line-height: 1; }
.metric .lbl { font-size: 0.62em; color: var(--ink-soft); margin-top: 8px; line-height: 1.4; }
.metric.good .val { border-left-color: var(--positive); }
.metric.good .val { color: var(--positive); }
.metric.good { border-left-color: var(--positive); }
.metric.warn { border-left-color: var(--warning); }
.metric.warn .val { color: var(--warning); }
.metric.bad  { border-left-color: var(--negative); }
.metric.bad  .val { color: var(--negative); }

/* ── Agenda / Inhalt slide — einfach L6 (4+8, Gap 24px) ──
   Kay-Feedback 2026-07-22: "mach doch einfach L6 Schmal+Breit" statt eigener
   36%/Gap-Tuning-Werte und Wrapper-Konstruktion — Titel-Block links (span 4,
   linksbündig), Aufzählung rechts (span 8, linksbündig). Grid statt Flex, damit
   Gap und Spans exakt wie beim generischen .g12-Grid rechnen (Flex-Basis in %
   plus Gap hätte über 100% hinaus überlaufen). margin: auto 0 zentriert den
   Block vertikal in der Section (kein .content-zone-Wrapper hier, siehe Generator). */
.agenda-cols { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: center; margin: auto 0; }
.agenda-head { grid-column: span 4; }
.agenda-head .subline { margin-bottom: 0; }
/* justify-self: center statt einer eigenen Wrapper-Konstruktion (Kay-Feedback
   2026-07-22, zweite Runde) — reines Grid-Item-Alignment, keine zusätzliche HTML-
   Ebene. .agenda-list schrumpft dadurch auf Inhaltsbreite und zentriert sich als
   EIN Block im 8-Spalten-Bereich; die Items selbst bleiben untereinander linksbündig
   (align-items:stretch default auf dem intern flex-column .agenda-list). */
.agenda-list { grid-column: span 8; justify-self: center; display: flex; flex-direction: column; }
/* L1-Agenda-Variante: Liste horizontal zentrieren statt volle Breite zu füllen
   (vertikale Zentrierung kommt bereits von .content-zone). align-self statt
   margin:auto, weil .agenda-list in .content-zone (flex-column) sitzt. */
.agenda-list-center { flex: 0 0 auto; align-self: center; }
.agenda-list .ag-item { display: flex; align-items: baseline; gap: 14px; padding: 7px 0; }
.agenda-list .ag-num { color: var(--accent); font-weight: 700; font-size: 0.85em; min-width: 1.5em; font-variant-numeric: tabular-nums; }
.agenda-list .ag-label { color: var(--navy); font-weight: 600; font-size: 0.98em; }
.agenda-list .ag-sub { color: var(--ink-body); font-size: 0.8em; line-height: 1.4; margin: 0 0 2px 1.5em; padding-left: 14px; }
.agenda { display: flex; flex-direction: column; gap: 4px; }
.agenda .agenda-item { display: flex; align-items: baseline; gap: 14px; padding: 6px 0; }
.agenda .num { color: var(--accent); font-weight: 700; font-size: 0.85em; min-width: 1.5em; }
.agenda .label { color: var(--navy); font-weight: 600; font-size: 0.98em; }

/* ── Fact + text rows (figures_with_context, scenarios) ── */
.kv-list { display: flex; flex-direction: column; gap: 10px; }
.kv-row { display: flex; gap: 12px; align-items: stretch; }
.kv-fact { flex: 0 0 118px; background: var(--card); border-radius: var(--radius-card); padding: 10px 10px; text-align: left; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.kv-fact .fv { font-size: 1.55em; font-weight: 700; color: var(--ink); line-height: 1; }
.kv-fact .fl { font-size: 0.6em; color: var(--ink-soft); margin-top: 5px; line-height: 1.4; }
.kv-fact.red   .fv { color: var(--negative); }
.kv-fact.green .fv { color: var(--positive); }
.kv-fact.amber .fv { color: var(--warning); }
.kv-text { flex: 1; background: var(--bg-box-default); border-radius: var(--radius-card); padding: 10px 14px; font-size: 0.82em; color: var(--ink-body); line-height: 1.55; display: flex; align-items: center; }
/* Title/Copy gestapelt (E-Szenarien) statt inline mit "—" — eigener Block, damit er nicht vom
   äusseren .kv-text flex-row-Verhalten erfasst wird. */
.kv-text-stack { display: block; }
.kv-title { font-weight: 700; color: var(--ink); }
.kv-copy { color: var(--ink-body); margin-top: 0.2em; }

/* ── Myth-busting (contrasts) ─────────────────── */
.myth-rows { display: flex; flex-direction: column; gap: 24px; margin-top: 0.6em; }
.myth-row-pair { display: flex; gap: 10px; align-items: stretch; }
.myth-assume { background: var(--bg-box-negative); border-radius: var(--radius-box); padding: 12px 14px; color: #6a1414; }
.myth-finding { background: var(--bg-box-positive); border-radius: var(--radius-box); padding: 12px 14px; color: #1a4a2e; }
/* Box-Titel (wie pf-title) + Icon mit Abstand zum Text */
.myth-label { display: block; font-size: 0.68em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 7px; }
.myth-assume .myth-label { color: var(--negative); }
.myth-finding .myth-label { color: var(--positive); }
.myth-assume .myth-label::before { content: "✗  "; }
.myth-finding .myth-label::before { content: "✓  "; }
.myth-text { font-size: 0.8em; line-height: 1.5; }
.myth-row-pair .myth-assume { flex: 1; margin: 0; }
.myth-row-pair .myth-arrow { display: flex; align-items: center; color: var(--accent); font-size: 1.3em; flex-shrink: 0; padding: 0 2px; }
.myth-row-pair .myth-finding { flex: 1; margin: 0; }

/* ── Variant badge ────────────────────────────── */
.var-badge { display: inline-block; font-size: 0.65em; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; background: var(--accent); color: #fff; border-radius: var(--radius-box); padding: 2px 9px; margin-bottom: 6px; }
.var-badge.v2 { background: var(--navy); }

/* ── E7 — Steps (process steps) ───────────────── */
.steps { display: grid; gap: 20px; margin: 10px 0 0; }
.step { position: relative; padding-top: 2.6em; padding-left: 20px; text-align: left; border-left: 1px solid var(--card-border); }
.step .sn { position: absolute; top: 0; left: 18px; width: 1.8em; height: 1.8em; border-radius: 50%; background: var(--navy); color: #fff; font-size: 0.8em; font-weight: 800; display: flex; align-items: center; justify-content: center; line-height: 1; }
.step .sl { font-size: 0.85em; font-weight: 700; color: var(--ink); margin-bottom: 0.3em; text-transform: none; letter-spacing: normal; display: block; }
.step p { font-size: 0.72em; color: var(--ink-body); margin: 0; line-height: 1.5; text-align: left; }

/* ── E8 — Timeline (vertical, connecting line) ── */
.timeline { position: relative; display: flex; flex-direction: column; gap: 20px; padding-left: 4px; }
.timeline::before { content: ""; position: absolute; left: 28px; top: -50px; bottom: -50px; width: 1px; background: var(--card-border); }
.tl-item { position: relative; display: flex; gap: 18px; align-items: flex-start; z-index: 1; }
.tl-num { width: 44px; height: 44px; border-radius: 11px; background: #fff; border: 2px solid var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.85em; color: var(--accent); flex: none; }
.tl-item h4 { font-size: 0.88em; font-weight: 700; margin: 0 0 0.25em; color: var(--ink); }
.tl-item p { font-size: 0.76em; color: var(--ink-body); margin: 0; line-height: 1.5; }
.tl-item.climax .tl-num { background: var(--positive); border-color: var(--positive); color: #fff; }
.tl-item.climax h4 { color: var(--positive); }
.tl-item.negative .tl-num { background: var(--negative); border-color: var(--negative); color: #fff; }
.tl-item.negative h4 { color: var(--negative); }
.tl-item.warning .tl-num { background: var(--warning); border-color: var(--warning); color: #fff; }
.tl-item.warning h4 { color: var(--warning); }

/* ── E9 — Horizontale Timeline ─────────────────── */
.h-timeline { display: flex; flex-direction: column; gap: 20px; }
.ht-line-row { position: relative; display: flex; }
.ht-line-row::before { content: ""; position: absolute; top: 7px; left: 0; right: 0; height: 1px; background: var(--card-border); }
.ht-dot-wrap { flex: 1; display: flex; justify-content: center; }
.ht-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--navy); position: relative; z-index: 1; }
.ht-labels { display: flex; }
/* Linksbündig statt zentriert (Kay-Feedback 2026-07-23): kürzere Headlines lesen sich
   linksbündig konsistenter mit dem Rest des Decks. */
.ht-label { flex: 1; text-align: left; padding: 0 10px; }
.ht-label h4 { font-size: 0.85em; font-weight: 700; margin: 0 0 0.35em; color: var(--ink); }
.ht-label p { font-size: 0.8em; color: var(--ink-body); margin: 0; line-height: 1.5; }

/* ── Hero number ──────────────────────────────── */
.hero { text-align: center; margin: 0.5em 0 0.6em; }
.hero .hv { font-size: 3.2em; font-weight: 700; color: var(--positive); line-height: 1; }
.hero .hl { font-size: 0.76em; color: var(--ink-body); margin-top: 5px; line-height: 1.5; }

/* ── Recommendation cards ─────────────────────── */
.reco-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 10px; }
/* Im 50/50-Cols-Layout (Reco-Card neben Hinweis-Box, Kay-Feedback 2026-07-21: "gleiche
   Top haben") würde der Standard-margin-top die Reco-Card gegenüber der Box im Nachbar-
   .w50 nach unten verschieben — hier auf 0, da .cols selbst schon die Abstände regelt. */
.cols .reco-grid { margin-top: 0; }
.reco { background: var(--card); border-radius: var(--radius-card); padding: 18px 22px; }
.reco .rn { font-size: 0.68em; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); margin-bottom: 1em; }
.reco strong { display: block; font-size: 0.88em; color: var(--ink); margin-bottom: 7px; line-height: 1.35; }
.reco ul { list-style: none; padding-left: 0; margin: 0; }
.reco li { font-size: 0.82em; color: var(--ink-body); margin-bottom: 4px; }

/* ── E2/E3 — Karten (sections, tools) ─────────── */
.pf-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 0.7em; }
.pf-grid.top { align-items: flex-start; }
.pf-card { background: var(--card); border-radius: var(--radius-card); padding: 22px 24px; }
/* Optionales highlight: true (item-level, siehe "sections" in generate_html_from_json.py) —
   sanfter blauer Ton statt des neutralen Grau, für eine einzelne hervorzuhebende Card. */
.pf-card.highlight { background: rgba(26,58,92,0.07); border: 1px solid rgba(26,58,92,0.16); }
.pf-card.highlight .pf-title { color: var(--navy); }
.pf-card .pf-title { font-size: 0.68em; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); margin-bottom: 1em; }
/* Optionale Zweitzeile unter dem Karten-Titel (Kay-Feedback 2026-07-21), z.B.
   "Betrachtung Jahre, Quartale und Monate" unter "Langfristige Zeitebene". */
.pf-card .pf-sub { font-size: 0.85em; font-weight: 600; color: var(--ink); margin: -0.6em 0 0.8em; }
.pf-card p { font-size: 0.82em; color: var(--ink-body); line-height: 1.5; margin: 0; }
.pf-card ul { padding-left: 1em; margin: 0; }
.pf-card li { font-size: 0.81em; color: var(--ink-body); margin-bottom: 4px; line-height: 1.5; }
/* Nummern-Badge vor dem Section-Label (sections numbered: true) */
.pf-num { display: inline-flex; align-items: center; justify-content: center; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--accent); color: #fff; font-size: 0.85em; margin-right: 0.5em; vertical-align: middle; }
/* Text-Variante (sections layout: text) — Label + Punkte als zweispaltiger Fließtext */
.sec-text { column-count: 2; column-gap: 2.4em; margin-top: 0.7em; }
/* Nach einer Karten-Reihe (.pf-grid) braucht der Text mehr Abstand — gleiches
   Muster wie bei KPI-Row/Tabelle/Steps + folgendem Statement. */
.reveal .pf-grid + .sec-text { margin-top: 2em; }
.sec-text-block { break-inside: avoid; margin-bottom: 0.9em; font-size: 0.85em; line-height: 1.5; color: var(--ink-body); }
.sec-text-label { display: block; font-weight: 700; color: var(--accent); text-transform: uppercase; font-size: 0.82em; letter-spacing: 0.05em; margin-bottom: 2px; }

/* Einzelne Box neben einem Ring (Kay-Feedback 2026-07-22) — die Box füllt sonst die
   ganze .w50-Spalte, Textzeilen laufen zu lang. margin:0 5em zieht sie auf lesbare
   Zeilenlänge zusammen, ohne die Spaltenbreite selbst (und damit die Ring-Zentrierung
   daneben) anzufassen. */
.box-narrow .box-grid { margin: 0 5em; }

/* ── E4 — Rings (Donut-Ringe, nur echte Anteile) ── */
.rings { display: grid; gap: 28px; justify-items: center; align-items: center; }
.ring-wrap { text-align: center; }
.ring { width: 132px; height: 132px; border-radius: 50%; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; }
.ring-inner { width: 126px; height: 126px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-weight: 100; font-size: 2em; color: var(--ink); }
/* Label global so klein/dezent wie .metric .lbl in der KPI-Reihe (Kay-Feedback 2026-07-23:
   erst nur auf .combo gescoped, jetzt bewusst global — Ring-/Value-Peer-Beschriftung soll
   überall einheitlich klein sein, nicht nur neben einer KPI-Reihe). */
.ring-wrap .l { font-size: 0.62em; font-weight: 400; color: var(--ink-soft); margin-top: 8px; line-height: 1.4; }

/* ── E5 — Ring + Value (gleichwertig nebeneinander) ── */
.combo { display: grid; gap: 28px; justify-items: center; align-items: center; }
.value-peer { text-align: center; }
.value-peer .v { font-size: 2em; font-weight: 500; color: var(--ink); line-height: 1; }
.value-peer .l { font-size: 0.62em; font-weight: 400; color: var(--ink-soft); margin-top: 8px; line-height: 1.4; }

/* ── E6 — Box-Grid (3 neutral + 1 hervorgehoben) ── */
.box-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.box-item { border: 1px solid var(--card-border); border-left: 3px solid var(--ink); border-radius: var(--radius-box); padding: 18px 22px; font-size: 0.85em; font-weight: 400; line-height: 1.5; color: var(--ink); }
.box-item strong { font-weight: 700; }
.box-item.highlight { border: 1.5px solid var(--accent); border-left: 1.5px solid var(--accent); }
/* Echte Aufzählung innerhalb einer Box (Kay-Feedback 2026-07-21), z.B. Airline-Namen
   statt Fließtext — Browser-Default-Margins zurückgesetzt, Marker bleiben sichtbar. */
/* display:block nötig — Reveal.js' Basis-Theme setzt <ul> auf inline-block, was hier
   (Liste folgt direkt auf Fließtext im selben .box-item) zu einer Nebeneinander- statt
   Untereinander-Anordnung führte. */
.box-item ul { display: block; margin: 0.5em 0 0; padding-left: 1.2em; }
.box-item li { margin-bottom: 2px; }

/* ── E10 — Funnel (echte Verengung/Filterung) ──── */
.funnel { display: flex; flex-direction: column; gap: 3px; }
.fu-step { background: var(--card); border: 1px solid var(--card-border); display: flex; align-items: center; justify-content: center; font-size: 0.85em; font-weight: 700; color: var(--ink); padding: 16px; margin: 0 auto; box-sizing: border-box; }

/* ── E11 — Process Arrows (kompakt, ohne Erklärtext) ── */
.arrows { display: flex; gap: 14px; }
.arrow-chip { flex: 1; background: var(--card); border: 1px solid var(--card-border); padding: 18px 22px; text-align: center; font-weight: 800; font-size: 0.88em; color: var(--ink); clip-path: polygon(0 0, 92% 0, 100% 50%, 92% 100%, 0 100%, 8% 50%); }
.arrow-chip.current { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── E12 — Value-Row (große Zahlen, optional Zitat) ── */
.value-row { display: grid; gap: 28px; justify-items: center; }
.value-item { text-align: center; }
.value-item .v { font-size: 3em; font-weight: 500; color: var(--accent); line-height: 1; }
.value-item .l { font-size: 0.72em; font-weight: 700; margin-top: 0.35em; color: var(--ink); }
.value-item .d { font-size: 0.68em; color: var(--ink-soft); margin-top: 0.25em; line-height: 1.5; }
.quote { font-style: italic; color: var(--ink-body); font-size: 0.88em; line-height: 1.5; }

/* ── E13 — Fact-Grid (dichtes Zahlen-Raster) ───── */
.fact-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; background: var(--card-border); }
.fact-cell { background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 16px 6px; }
.fact-cell .v { font-size: 1.4em; font-weight: 500; color: var(--accent); }
.fact-cell .l { font-size: 0.55em; color: var(--ink-soft); text-align: center; line-height: 1.25; }

/* ── E15/E17 — Statement callout (emphatic sentence) ── */
.reveal blockquote.statement {
  font-size: 1.8em; line-height: 1.35; color: var(--navy);
  font-weight: 400; text-align: center; max-width: 860px;
  margin: 0.7em auto; padding: 0.4em 0.6em;
  background: none; box-shadow: none; border: none; font-style: normal;
}
/* Gewichts-Varianten (Kay, 2026-07-15): blockquote.statement komplett in bold/thin statt
   normal — als Modifier-Klasse auf dem Element selbst (Spezifität > Basisregel oben, kein
   !important nötig). ZUSÄTZLICH generische .sw-* Utility-Klassen für gemischte Gewichte
   INNERHALB eines Statements/.statement-lead (als <span> im text-Feld, z.B. Einleitung
   normal, Kernsatz fett, Schluss normal) — funktioniert überall, da span keine eigene
   konkurrierende Regel hat und die explizite Gewichtsangabe immer gewinnt. */
.reveal blockquote.statement.sw-bold { font-weight: 600; }
.reveal blockquote.statement.sw-thin { font-weight: 100; }
/* layout: wide (Kay-Feedback 2026-07-17) — Statement neben anderem Content (z.B.
   Metric-Row/Table/Contrasts) soll die volle Content-Zone-Breite nutzen statt der
   860px-Kappung, bleibt aber zentriert gesetzt. */
/* width:100% zusätzlich zu max-width:none nötig — margin:auto (Basisregel) verhindert
   sonst das Flex-Stretch von .content-zone (auto-Margins gewinnen gegen align-items:stretch),
   Element würde sich trotz aufgehobener Kappung weiter auf die Textbreite schrumpfen. */
.reveal blockquote.statement.wide { max-width: none; width: 100%; margin-left: 0; margin-right: 0; }
.sw-thin { font-weight: 100; }
.sw-normal { font-weight: 400; }
.sw-bold { font-weight: 600; }
/* KONVENTION (Kay, 2026-07-14, Wert auf 2em reduziert 2026-07-17): Größerer Abstand
   NUR nach einem "schweren" Vorgänger-Element (KPI-Row/.metric-row, Tabelle, Steps,
   Arrows, Karten-Reihe/.pf-grid, Empfehlungen) vor dem nächsten Block (Statement,
   Card-Reihe, Text-Spalten) ist IMMER 2em — als eigene Regel auf margin-top, statt den
   Basiswert selbst zu erhöhen. Grund: .content-zone ist ein Flex-Container,
   dort kollabieren Margins zwischen Geschwistern NICHT (anders als im
   normalen Blockfluss) — würde man stattdessen die Basis auf 2em setzen und
   bei gestapelten Callout-Statements (mehrere blockquote.statement
   hintereinander) nur den margin-top der zweiten Blockquote wieder senken,
   bliebe trotzdem margin-bottom:2em an der ersten stehen und die Lücke
   summiert sich auf ~2.7em statt der gewünschten ~0.7em.
   Neue Kombination "schweres Element + Folge-Block" gefunden, die noch nicht
   in der Liste unten steht? → einfach als weiteren Selektor ergänzen, gleiche
   Regel (margin-top: 2em), kein neues Konzept nötig. */
/* .reveal-Präfix ist Pflicht, nicht Kosmetik: ".reveal blockquote.statement"
   hat 2 Klassen (0,2,1) — ohne den Präfix hätte z.B. "table + blockquote.statement"
   nur 1 Klasse (0,1,2) und würde TROTZ passendem Selektor gegen die Basisregel
   verlieren (Klassenzahl schlägt Elementzahl bei der CSS-Spezifität). */
.reveal .metric-row + blockquote.statement,
.reveal table + blockquote.statement,
.reveal .myth-rows + blockquote.statement,
.reveal .steps + blockquote.statement,
.reveal .reco-grid + blockquote.statement,
.reveal .arrows + blockquote.statement,
.reveal .arrows + .pf-grid,
.reveal .metric-row + .pf-grid,
.reveal .metric-row + .metric-row,
.reveal .metric-row + .rings,
.reveal .pf-grid + .text-cols-head,
.reveal table + .text-lead-copy,
.reveal .metric-row + .text-lead-copy,
.reveal .box-grid + .box-grid,
.reveal .sections-block + .box-grid,
.reveal .pf-grid + .box-grid,
.reveal .box-grid + .rings,
.reveal .rings + .box-grid,
.reveal .box-grid + .cols,
.reveal .sections-block + .cols,
.reveal .arrows + .text-cols-head,
.reveal .h-timeline + .text-cols-head,
.reveal .text-lead-copy + .sections-block { margin-top: 2em; }

/* .metric-row direkt vor .combo (E5 Ring+Value) wirkt zu eng mit nur 2em, weil beide
   Reihen optisch sehr unterschiedlich aussehen (Kay-Feedback 2026-07-23) — eigene
   5em-Regel statt in der allgemeinen 2em-Liste oben. */
.reveal .metric-row + .combo { margin-top: 5em; }
/* .reco-grid direkt vor .box-grid: die Box-Reihe gehört inhaltlich zur Empfehlung darüber
   (z. B. "→ Informationen teilen" als Fortsetzung der Reco-Karten), kein neuer Gedankenblock
   wie sonst bei .box-grid-Folgen — daher nur 1em statt der allgemeinen 2em (Kay-Feedback 2026-07-23). */
.reveal .reco-grid + .box-grid { margin-top: 1em; }
/* Wenn eine .metric-row unmittelbar vor .combo steht, soll sie optisch wie dessen
   Fortsetzung wirken statt zentriert mit fixem Gap zu schweben — also auf dieselbe
   Spalten-Verteilung wechseln (Kay-Feedback 2026-07-23). Nur für dieses Sibling-Paar,
   nicht global, weil .metric-row sonst überall zentriert-mit-Gap bleiben soll. */
.metric-row:has(+ .combo) { display: grid; grid-template-columns: repeat(4, 1fr); justify-items: stretch; gap: 28px; }

/* Optionale Gruppen-Überschrift über einer Sections-Reihe (nicht pro Karte) — siehe
   item_type "sections", Feld `heading` in generate_html_from_json.py. */
.content-heading { font-size: 1em; font-weight: 700; color: var(--ink); margin: 0 0 0.8em; }
.reveal blockquote.statement::before,
.reveal blockquote.statement::after { content: none; }
/* In a two-column layout the statement reads as left-aligned body text */
.cols .reveal blockquote.statement,
.cols blockquote.statement { text-align: left; max-width: none; margin: 0; font-size: 1.05em; }

/* ── E14–E17 — Reine Text-Slides ────────────────
   E15 (1 Aussage) → zentrierte Lead. E16 (Absätze) → untereinander.
   E14 (Copy 2-spaltig mit Headline je Spalte) → .text-cols-head.
   E17 (Statement + Copy gemischt) → .text-lead-copy. ── */
.statement-lead { text-align: center; font-size: 1.8em; font-weight: 600; color: var(--ink);
  max-width: 46ch; margin: 0.4em auto 0; line-height: 1.3; }
.statement-cols { display: flex; align-items: flex-start; gap: 2.8em; margin-top: 0.2em; }
.statement-col { flex: 1; margin: 0; font-weight: 400; font-size: 0.92em;
  line-height: 1.5; color: var(--ink-body); }

/* E14 — zweispaltige Copy, je Spalte eigene Headline, Gap 72px */
.text-cols-head { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; }
.text-cols-head h4 { font-size: 1em; font-weight: 700; margin: 0 0 0.5em; color: var(--ink); }
.text-cols-head p { font-size: 0.85em; color: var(--ink-body); line-height: 1.5; margin: 0; }

/* E16 — zwei Absätze untereinander */
.text-stack { max-width: 64ch; }
.text-stack p { font-size: 0.92em; color: var(--ink-body); line-height: 1.5; margin: 0 0 1.1em; }
.text-stack p:last-child { margin-bottom: 0; }

/* E17 — große These oben, erklärender Absatz darunter, zentriert als ein Block */
.text-lead-copy { text-align: center; max-width: 76ch; margin: 0 auto; }
.text-lead-copy-left { text-align: left; margin: 0; max-width: none; }
.text-lead-copy .lead { font-size: 1.8em; font-weight: 600; color: var(--ink); line-height: 1.3; margin: 0 0 0.7em; }
.text-lead-copy .copy { font-size: 0.88em; color: var(--ink-body); line-height: 1.5; margin: 0; }
/* Mehrere .copy-Absätze (Kay-Feedback 2026-07-21: "copy" als Liste, echter Absatzumbruch)
   brauchen sichtbaren Abstand — sonst kollabieren sie zu einem einzigen Textblock. */
.text-lead-copy .copy + .copy { margin-top: 0.9em; }

/* Zusatztext unter einem Element (E2–E13, 40px Abstand) */
.extra-text { margin-top: 40px; }
.extra-text p { font-size: 0.9em; color: var(--ink-body); line-height: 1.5; margin: 0 0 1em; max-width: 72ch; }
.extra-text p:last-child { margin-bottom: 0; }
.extra-text-2col { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.extra-text-2col p { font-size: 0.9em; color: var(--ink-body); line-height: 1.5; margin: 0; }

/* ── Zweispaltiges Bild-Layout innerhalb der Content-Zone: Text + Bild nebeneinander ── */
/* Kopfzone bleibt der normale fixe 170px-Vertrag (render_head steht davor, ausserhalb von
   .chart-cols) — .chart-cols füllt nur die Content-Zone darunter, dort stehen Bild und
   Beschreibung/Statement nebeneinander (Kay-Feedback 2026-07-14). */
.chart-cols { display: flex; align-items: center; gap: 2.5em; flex: 1 1 auto; }
.chart-cols-head { flex: 0 0 40%; }
.chart-cols-caption { font-size: 0.82em; color: var(--ink-soft); line-height: 1.55; margin-top: 0.4em; }
/* Bullets statt Fließtext neben Bild/Code (Kay-Feedback 2026-07-23) — bessere Lesbarkeit,
   wenn mehrere kurze Einzelschritte aufgezählt werden. Gleiche Textgröße wie .chart-cols-caption. */
.chart-cols-list { font-size: 0.82em; color: var(--ink-body); line-height: 1.6; margin: 0.6em 0 0; padding-left: 1.1em; }
.chart-cols-list li { margin-bottom: 7px; }
.chart-cols-caption + .chart-cols-list { margin-top: 0.9em; }
/* Inline-Code in Bullets/Fließtext auf hellem Grund (z.B. fl_direction, ABS()) —
   .code-block code (dunkler Codeblock) bleibt davon unberührt, eigene Regel. */
.chart-cols-list code, .chart-cols-caption code, .reveal li code, .reveal p code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.92em;
  background: var(--card); color: var(--ink); padding: 1px 5px; border-radius: 3px;
}
/* Statement/Copy-Blöcke NACH der Caption (image_right mit Extra-Content) lesen links wie
   normaler Fließtext, nicht zentriert wie der Standard-Callout. */
.chart-cols-head .reveal blockquote.statement,
.chart-cols-head blockquote.statement { text-align: left; max-width: none; margin: 0.8em 0 0; font-size: 1.3em; }
.chart-cols-img { flex: 1; display: flex; justify-content: center; }
.chart-cols-img img { max-width: 100%; max-height: 62vh; }
/* image_left (Kay 2026-07-14): Bild 2/3 links, Text 1/3 rechts — Bild so gross wie möglich.
   align-items:stretch (statt center) gibt der Bild-Spalte die VOLLE Content-Zonen-Höhe zur
   Verfügung, object-fit:contain nutzt sie maximal aus (Breite ODER Höhe limitiert, je nach
   Bild-Seitenverhältnis) ohne Verzerrung — keine max-width/max-height-Deckelung wie bei
   image_right (dort ist der Text die Priorität, hier explizit das Bild). */
.chart-cols-reverse { align-items: stretch; }
.chart-cols-reverse .chart-cols-head { flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; }
.chart-cols-img-large { flex: 2; justify-content: center; align-items: stretch; }
.chart-cols-img-large a { display: flex; width: 100%; }
.chart-cols-img-large img { width: 100%; height: 100%; object-fit: contain; margin: 0; max-width: none; max-height: none; display: block; }

/* ── Code + Copy (chart-cols mit Codeblock statt Bild, Kay 2026-07-21) ──
   Gleiche .chart-cols/.chart-cols-reverse/.chart-cols-head-Struktur wie image_left/
   image_right — nur .chart-cols-code statt .chart-cols-img, damit der Copy-Text auf
   beiden Seiten (Code oder Bild) exakt gleich formatiert bleibt. */
/* align-self: center überschreibt gezielt das align-items:stretch von .chart-cols-reverse
   (das ist für .chart-cols-img-large gedacht, siehe oben) — sonst klebt der Code-Block
   an der vollen Zeilenhöhe fest statt vertikal zu zentrieren (Kay-Feedback 2026-07-23). */
.chart-cols-code { flex: 1.2; min-width: 0; align-self: center; }
.code-block-label { font-size: 0.68em; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.9em; }
/* font-size 0.6em statt 0.8em (Kay-Feedback 2026-07-23): 0.8em wirkte, nachdem der
   Vererbungs-Bug behoben war, zu groß und ließ SQL/DAX-Zeilen in der Split-Spalte
   umbrechen — das jagged Zeilenende sah aus wie ein Rahmen um den Codeblock. */
.code-block { background: var(--navy); color: rgba(255,255,255,0.88); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.6em; line-height: 1.5; padding: 20px 22px; border-radius: var(--radius-card); overflow: auto; max-height: 62vh; }
/* width:100% explizit (Kay-Feedback 2026-07-23: der weiße Codetext soll die Box komplett
   ausfüllen, nicht auf die längste Zeile schrumpfen) — pre ist zwar block-level und würde das
   im Normalfall automatisch tun, aber explizit macht die Absicht klar und schließt jede
   Schrumpf-Quelle (z.B. Scrollbar-Gutter von overflow:auto) sauber aus. */
.code-block pre { margin: 0; width: 100%; box-sizing: border-box; white-space: pre-wrap; word-break: break-word; font-size: inherit; line-height: inherit; }
/* font-size/line-height explizit auf inherit, sonst gewinnt reveal.css' eigene .reveal pre code-Regel
   gegen unseren Container-Wert, weil sie font-size direkt auf <code> setzt (Kay-Feedback 2026-07-22). */
.code-block code { font-family: inherit; color: inherit; background: none; padding: 0; border: none; font-size: inherit; line-height: inherit; }

/* ── Chart: one full-size image per slide (no shadow) ── */
.chart-single { text-align: center; margin: 0.3em 0; }
.chart-single .chart-tile { display: inline-block; border-radius: var(--radius-card); overflow: hidden; text-decoration: none; max-width: 100%; }
.chart-single img { max-width: 100%; max-height: 350px; display: block; }
.chart-single .caption { margin-top: 6px; }
/* Chart + folgendes Element (meist ein Statement) teilen sich die Content-Zone —
   kleinere Chart-Höhe, damit beides ohne Overflow Platz hat. */
.content-zone .chart-single:not(:only-child) img { max-height: 220px; }
/* Alleinstellungsfall (chart_refs als einziger Content-Typ, kein Statement danach) —
   Bild darf die Content-Zone maximal ausfüllen. */
.content-zone .chart-single:only-child img { max-height: 480px; }
.chart-tile-html { display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--bg-box-default); border-radius: var(--radius-card); padding: 13px 10px; text-decoration: none; color: var(--accent); font-size: 0.8em; font-weight: 700; }

/* ── Link grid (slide context) ────────────────── */
.links-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 0.6em; }
.quick-link { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--radius-card); text-decoration: none; color: var(--accent); background: var(--bg-box-default); font-size: 0.85em; font-weight: 600; }
.quick-link::before { content: "→"; font-weight: 700; }

/* ── Closing stats + links ────────────────────── */
.closing-stats { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 1.6em; }
.closing-stat { background: rgba(255,255,255,0.10); border-radius: var(--radius-card); padding: 9px 16px; text-align: center; }
.closing-stat .v { font-size: 1.4em; font-weight: 700; color: #fff; line-height: 1; }
.closing-stat .v.green { color: var(--color-kpi-positive); }
.closing-stat .l { font-size: 0.58em; color: rgba(255,255,255,0.5); margin-top: 3px; }
.closing-links { display: flex; gap: 18px; justify-content: center; font-size: 0.72em; margin-top: 2.8em; }
.closing-links a, .c-link { display: flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: var(--radius-card); text-decoration: none; color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.10); font-size: 0.95em; font-weight: 500; }
.c-link::before { content: "→"; font-weight: 700; }
.closing-links a:hover, .c-link:hover { background: rgba(255,255,255,0.18); }
/* Zweispaltiges Closing-Layout (Kay-Feedback 2026-07-14, role:closing + layout:split):
   Text + Primary-Link links (2/3 Breite), übrige Links gestapelt rechts (1/3) — Primary-Link
   bleibt im normalen .c-link-Stil, nur die Platzierung macht ihn prominent, keine eigene
   Akzent-Optik mehr (Kay: "so groß und im Style wie vorher"). */
.closing-split { display: flex; gap: 3em; align-items: stretch; margin-top: 2.8em; text-align: left; }
.closing-split-left { flex: 2; }
.closing-split-left .text-lead-copy { text-align: left; margin: 0; max-width: none; }
.closing-split-left .closing-links { justify-content: flex-start; margin-top: 1.6em; }
/* Rechte Spalte (Kay-Feedback 2026-07-14): Buttons NICHT auf volle Spaltenbreite stretchen
   (align-items:center statt stretch — Breite bleibt am eigenen Label-Inhalt orientiert), als
   Block horizontal zentriert, die ganze Button-Reihe vertikal mittig zur linken Spalte (dank
   .closing-split align-items:stretch bekommt diese Spalte dieselbe Höhe wie die linke). */
.closing-split-right { flex: 1; display: flex; flex-direction: column; justify-content: center; }
/* align-items:stretch + width:fit-content: die Spalte schrumpft auf die Breite des breitesten
   Buttons, ALLE Buttons stretchen dann auf genau diese Breite — echte Gleichbreite ohne auf die
   volle rechte Spalte zu strecken (Kay-Feedback 2026-07-14: "minimal unterschiedlich breit"). */
.closing-links-col { flex-direction: column; align-items: stretch; width: fit-content; margin: 0 auto; }
.closing-links-col .c-link { justify-content: center; }
.closing-divider { width: 60px; border-top: 1px solid rgba(255,255,255,0.2); margin: 0.8em auto; }

/* ── Closing — gleiche Kopfzone/Content-Zone-Struktur wie jede andere Slide,
   nur Farben invertiert (dunkler Hintergrund, helle Schrift). ── */
.closing { display: flex !important; flex-direction: column; text-align: center; }
/* Kein max-width/margin:auto-Box-Centering mehr — das hat h2 (760px) und
   .subline (640px) auf UNTERSCHIEDLICHE Boxbreiten zentriert, wodurch beide
   Boxen verschieden weit links anfingen (Subline wirkte "mittig" statt mit
   dem Titel linksbündig). Jetzt wie .title-slide: volle Breite, Text darin
   linksbündig (per .reveal h2/.reveal .subline). */
/* Kay-Feedback 2026-07-21: weight 100 auf großer weißer Fläche wirkte zu hart — 300 statt 100. */
.closing h2 { font-size: 3.29em; font-weight: 300; color: #fff; letter-spacing: -0.01em; line-height: 1.2; }
.closing .subline { font-size: 0.94em; color: rgba(255,255,255,0.78); }
.closing blockquote.statement { color: rgba(255,255,255,0.92); max-width: 720px; font-weight: 300; margin: 0.5em auto 0; }
/* process_arrows (Dashboard-Teaser-Zeile) auf dunklem Closing-Hintergrund — ohne Override erbt
   .arrow-chip die hellen Standardfarben (var(--card)/var(--ink)) und ist auf #3E4A5C unlesbar. */
.closing .arrows { margin-top: 1.6em; }
.closing .arrow-chip { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.18); color: rgba(255,255,255,0.9); }
/* E17 (.text-lead-copy) auf dunklem Closing-Hintergrund — ohne diese Overrides erbt .lead/.copy
   die dunklen Standardfarben (var(--ink)/var(--ink-body)) und ist auf #3E4A5C fast unlesbar. */
.closing .text-lead-copy .lead { color: #fff; }
.closing .text-lead-copy .copy { color: rgba(255,255,255,0.78); }
.closing .text-lead-copy .copy strong { color: #fff; }
.closing .arrow-row { display: flex; gap: 18px; margin-top: 1.8em; justify-content: center; align-items: center; }
/* KPI-Box wie E1 im Slide-System: Border-Left-Akzent statt Box-Pille */
.closing .kpi-box { border-left: 3px solid rgba(255,255,255,0.25); padding-left: 14px; text-align: left; min-width: 0; }
.closing .kpi-box .v { font-size: 2.1em; font-weight: 500; color: #fff; line-height: 1; }
.closing .kpi-box.red   { border-left-color: var(--color-kpi-negative); }
.closing .kpi-box.green { border-left-color: var(--color-kpi-positive); }
.closing .kpi-box .l { font-size: 0.64em; color: rgba(255,255,255,0.55); margin-top: 6px; }

/* ── Highlighted best row (comparison table) ──── */
tr.hl-green td { background: var(--bg-box-positive) !important; font-weight: 700; }