/* =========================================================
   AIDEATION · Keynote-Deck
   produktentdecker.com CI „Ink & Signal“
   Leinwand 1920 × 1080, Reveal.js skaliert auf jede Auflösung
   ========================================================= */

/* ---------- Schriften: Archivo, Inter, JetBrains Mono über Google Fonts (Link im Kopf von index.html) ---------- */

/* ---------- Tokens ---------- */
:root {
  /* Headline-Schrift: EINE Zeile. Für den Live-Look „Ink & Amber“
     hier 'Instrument Serif' eintragen und die Datei in fonts/ ablegen. */
  --font-display: 'Archivo', 'Inter', system-ui, sans-serif;
  --font-text: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Ink & Signal */
  --paper: #faf9f7;
  --paper-deep: #efefea;
  --line: #d9d9d2;
  --ink: #121212;
  --ink-soft: #3d3c37;
  --muted: #6b6b66;
  --muted-soft: #93938c;
  --signal: #c1440e;
  --signal-light: #e8672a;
  --signal-wash: #f6e9e0;

  /* dunkle Folien */
  --night: #121212;
  --night-card: #1d1c1a;
  --night-line: #34322e;
  --on-night: #f3f1ec;
  --on-night-muted: #a6a49c;

  /* Bewegung: eine Kurve für alles */
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);
  --dur: 0.8s;
  --stagger: 90ms;
}

/* ---------- Reveal-Grundgerüst ---------- */
html, body { background: var(--night); }

.reveal {
  font-family: var(--font-text);
  font-size: 34px;
  font-weight: 400;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01' 0, 'cv11' 1;
}
.reveal .slides { text-align: left; }
.reveal .slides > section {
  height: 100%;
  top: 0;
  padding: 0;
  box-sizing: border-box;
}
.reveal ::selection { background: var(--signal); color: var(--paper); }

.stage {
  position: absolute;
  inset: 0;
  padding: 104px 128px 96px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.reveal section.light { color: var(--ink); }
.reveal section.dark { color: var(--on-night); }
.reveal section.signal { color: var(--paper); }

/* ---------- Typografie ---------- */
.kicker {
  font-family: var(--font-text);
  font-size: 26px;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal);
  margin: 0 0 20px;
}
.dark .kicker { color: var(--signal-light); }

.display {
  font-family: var(--font-display);
  font-size: 220px;
  font-weight: 820;
  line-height: 0.92;
  letter-spacing: -0.035em;
  margin: 0;
}
.title {
  font-family: var(--font-display);
  font-size: 84px;
  font-weight: 740;
  line-height: 1.04;
  letter-spacing: -0.022em;
  margin: 0;
  max-width: 1664px;
}
.statement {
  font-family: var(--font-display);
  font-size: 150px;
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 0;
}
.lead {
  font-size: 40px;
  line-height: 1.35;
  color: var(--ink-soft);
  margin: 0;
}
.dark .lead { color: var(--on-night-muted); }
.quote {
  font-family: var(--font-text);
  font-style: italic;
  font-weight: 420;
  font-size: 44px;
  line-height: 1.3;
  margin: 0;
}
.body { font-size: 32px; line-height: 1.4; margin: 0; }
.small { font-size: 26px; line-height: 1.4; color: var(--muted); margin: 0; }
.dark .small { color: var(--on-night-muted); }
.accent { color: var(--signal); }
.dark .accent { color: var(--signal-light); }
.mono { font-family: var(--font-mono); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- Icons ---------- */
.ico { width: 64px; height: 64px; flex: none; color: currentColor; }
.reveal svg use { stroke: currentColor; fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.reveal section:has(.kmini) .title { max-width: 1420px; }

/* =========================================================
   MOTION
   ========================================================= */

/* Einblenden beim Betreten einer Folie: .in (+ Varianten) */
@keyframes pe-rise   { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
@keyframes pe-fade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes pe-left   { from { opacity: 0; transform: translateX(-120px); } to { opacity: 1; transform: none; } }
@keyframes pe-right  { from { opacity: 0; transform: translateX(120px); } to { opacity: 1; transform: none; } }
@keyframes pe-pop    { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes pe-ground { from { transform: translateY(105%); } to { transform: none; } }
@keyframes pe-draw   { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pe-type   { from { opacity: 0; } to { opacity: 1; } }

.reveal .slides section.present .in {
  animation: pe-rise var(--dur) var(--ease) both;
  animation-delay: calc(var(--d, 0ms) + var(--i, 0) * var(--stagger));
}
.reveal .slides section.present .in.fade  { animation-name: pe-fade; }
.reveal .slides section.present .in.left  { animation-name: pe-left; }
.reveal .slides section.present .in.right { animation-name: pe-right; }
.reveal .slides section.present .in.pop   { animation-name: pe-pop; }
.reveal .slides section.present .in.ground { animation-name: pe-ground; animation-duration: 1.1s; }

/* Linien zeichnen: Pfad mit pathLength="1" */
.draw { stroke-dasharray: 1; stroke-dashoffset: 0; }
.reveal .slides section.present .draw.in {
  animation-name: pe-draw;
  animation-duration: 1.2s;
}

/* Schreibmaschine: JS zerlegt .type in Zeichen-Spans */
.type .ch { display: inline; }
.reveal .slides section.present .type .ch {
  animation: pe-type 0.01s linear both; /* linear statt steps(1): steps rundet bei langen Verzögerungen auf 0, letzte Zeichen blieben unsichtbar */
  animation-delay: calc(var(--d, 0ms) + var(--c) * 26ms);
}

/* Klick-Schritte (Reveal-Fragmente) */
.reveal .slides section .fragment {
  opacity: 0;
  visibility: hidden;
  transform: translateY(28px);
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    visibility var(--dur) var(--ease),
    clip-path 1s var(--ease-io),
    filter var(--dur) var(--ease);
  transition-delay: calc(var(--i, 0) * var(--stagger));
  will-change: opacity, transform;
}
.reveal .slides section .fragment.visible {
  opacity: 1;
  visibility: inherit;
  transform: none;
}
.reveal .slides section .fragment.f-fade { transform: none; }
.reveal .slides section .fragment.f-left { transform: translateX(-80px); }
.reveal .slides section .fragment.f-right { transform: translateX(80px); }
.reveal .slides section .fragment.f-pop { transform: scale(0.92); }
.reveal .slides section .fragment.f-left.visible,
.reveal .slides section .fragment.f-right.visible,
.reveal .slides section .fragment.f-pop.visible { transform: none; }
.reveal .slides section .fragment.f-wipe {
  opacity: 1;
  transform: none;
  clip-path: inset(0 100% 0 0);
}
.reveal .slides section .fragment.f-wipe.visible { clip-path: inset(0 0 0 0); }
/* f-act: immer sichtbar, löst nur einen Zustandswechsel aus */
.reveal .slides section .fragment.f-act {
  opacity: 1;
  visibility: inherit;
  transform: none;
}

/* Durchstreichen, das sich zeichnet (auch über mehrere Zeilen) */
.strike {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 56%;
  background-size: 0% 4px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 0.7s var(--ease-io);
}
.strike.on,
.reveal .slides section.present .strike.in-strike { background-size: 100% 4px; }
.reveal .slides section.present .strike.in-strike { transition-delay: var(--sd, 0ms); }

/* Druck/PDF: Reveal steckt jede Folie in eine .pdf-page, die Folie braucht ihre volle Höhe */
html.reveal-print .reveal .slides .pdf-page > section { height: 100%; }

/* Druck/PDF: alles im Endzustand, keine Bewegung */
html.reveal-print *,
html.reveal-print *::before,
html.reveal-print *::after {
  animation: none !important;
  transition: none !important;
}
html.reveal-print .strike.in-strike { background-size: 100% 4px; }
html.reveal-print #s01 .display .ai { color: var(--signal-light); }
html.reveal-print #s16 .tab.open { border-color: var(--signal); }

@media (prefers-reduced-motion: reduce) {
  .reveal .slides section.present .in,
  .reveal .slides section.present .type .ch { animation-duration: 0.01s !important; animation-delay: 0s !important; }
  .reveal .slides section .fragment { transform: none !important; transition-duration: 0.2s !important; transition-delay: 0s !important; }
}

/* =========================================================
   BAUTEILE
   ========================================================= */

/* Karten */
.card {
  background: #ffffff;
  border: 1.5px solid var(--line);
  border-radius: 20px;
  padding: 36px 40px;
  box-sizing: border-box;
}
.dark .card { background: var(--night-card); border-color: var(--night-line); }
.card.ink { background: var(--ink); border-color: var(--ink); color: var(--on-night); }

.pill {
  display: inline-block;
  font-size: 24px;
  font-weight: 650;
  border-radius: 999px;
  padding: 8px 22px;
  background: var(--ink);
  color: var(--paper);
  white-space: nowrap;
}

/* Bild-Slots: Nachbau, bis ein Bild in assets/ liegt */
.slot { position: relative; margin: 0; }
.slot > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
}
.slot[data-fit='cover'] > img { object-fit: cover; }
.slot.filled > .standin { visibility: hidden; }

/* App-Fenster (Nachbau für Screenshots) */
.win {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(18, 18, 18, 0.08);
}
.win .bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 18px;
  background: var(--paper-deep);
  border-bottom: 1.5px solid var(--line);
  flex: none;
}
.win .bar i { width: 12px; height: 12px; border-radius: 50%; background: var(--line); }
.win .bar span { margin-left: 10px; font-size: 24px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win .body { flex: 1; padding: 22px; display: flex; gap: 16px; min-height: 0; }
.sk { background: var(--paper-deep); border-radius: 8px; }
.sk.s { background: var(--line); }
.sk.a { background: var(--signal-wash); }

/* Küchen-Miniatur (Folien 11 bis 14) */
.kmini {
  position: absolute;
  top: 104px;
  right: 128px;
  width: 200px;
  display: grid;
  grid-template-columns: 1fr 34px;
  grid-template-rows: repeat(3, 16px) auto;
  gap: 6px 14px;
  align-items: center;
}
.kmini b { display: block; height: 16px; border-radius: 4px; background: var(--line); grid-column: 1; }
.kmini b.top { border-radius: 4px 4px 2px 2px; }
.kmini i {
  grid-column: 2;
  grid-row: 1 / span 3;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid var(--line);
  box-sizing: border-box;
  justify-self: center;
}
.kmini em {
  grid-column: 1 / span 2;
  font-style: normal;
  font-size: 24px;
  font-weight: 600;
  color: var(--muted);
  margin-top: 8px;
  white-space: nowrap;
  justify-self: end;
}
.kmini em strong { color: var(--signal); font-weight: 650; }
.dark .kmini b { background: var(--night-line); }
.dark .kmini i { border-color: var(--night-line); }
.dark .kmini em { color: var(--on-night-muted); }
.dark .kmini em strong { color: var(--signal-light); }
.kmini[data-layer='oben'] b.top,
.kmini[data-layer='mitte'] b.mid,
.kmini[data-layer='unten'] b.bot { background: var(--signal); }
.kmini[data-layer='mensch'] i { border-color: var(--signal); background: var(--signal); }
.reveal .slides section.present .kmini b,
.reveal .slides section.present .kmini i { transition: background 0.6s var(--ease) 0.5s, border-color 0.6s var(--ease) 0.5s; }

/* Cockpit-Reiter */
.tabs { display: flex; flex-wrap: wrap; gap: 12px; }
.tab {
  font-size: 26px;
  font-weight: 650;
  padding: 12px 22px;
  border-radius: 12px;
  border: 2px solid var(--line);
  background: #ffffff;
  color: var(--ink);
  white-space: nowrap;
  transition: border-color 0.6s var(--ease), background 0.6s var(--ease), color 0.6s var(--ease);
}
.tab.closed { border-style: dashed; color: var(--muted); background: transparent; }

/* =========================================================
   FOLIEN
   ========================================================= */

/* ---------- 01 · Cover ---------- */
#s01 .stage { justify-content: space-between; }
#s01 .display { font-size: 260px; display: flex; }
#s01 .display span { display: inline-block; }
#s01 .display .ai { transition: color 1.2s var(--ease); }
.reveal .slides section#s01.present .display .ai { color: var(--signal-light); transition-delay: 1.5s; }
#s01 .sub { font-family: var(--font-display); font-weight: 420; font-size: 60px; line-height: 1.15; letter-spacing: -0.01em; color: var(--on-night-muted); margin: 36px 0 0; max-width: 1300px; }
#s01 .who { display: flex; flex-direction: column; gap: 6px; }
#s01 .who .name { font-size: 34px; font-weight: 650; margin: 0; }

/* ---------- 02 · Ideen-Friedhof ---------- */
#s02 .yard {
  flex: 1;
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 28px;
  overflow: hidden;
  padding: 0 24px;
  border-bottom: 4px solid var(--ink-soft);
}
#s02 .stone {
  flex: 1;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  text-align: center;
  background: var(--paper-deep);
  border: 2px solid var(--line);
  border-bottom: none;
  border-radius: 150px 150px 6px 6px;
  padding: 78px 26px 34px;
}
#s02 .stone .yr { font-family: var(--font-mono); font-size: 24px; color: var(--muted); margin: 0; }
#s02 .stone h3 { font-family: var(--font-display); font-size: 36px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; margin: 0; }
#s02 .stone .cause { font-size: 26px; line-height: 1.3; color: var(--signal); margin: 0; }
#s02 .stone.last { background: #ffffff; }

/* ---------- 03 · Fünfzehn Monate später ---------- */
#s03 .grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 28px;
  min-height: 0;
}
#s03 .slot { border-radius: 16px; min-height: 0; }
#s03 .standin { position: absolute; inset: 0; }
#s03 .win .body { flex-direction: column; }
#s03 .tile .slot { transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
#s03 .tile .tag {
  position: absolute;
  bottom: 22px;
  right: 22px;
  z-index: 2;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--signal);
  color: var(--paper);
  border-radius: 999px;
  padding: 6px 18px;
}
#s03 .grid:has(.revive.visible) .tile:not(.hero) .slot { opacity: 0.55; }
#s03 .slot > img { object-position: top center; }
#s03 .slot[data-slot='03-screen-3'] > img,
#s03 .slot[data-slot='03-screen-6'] > img { object-position: center; }
#s03 .grid:has(.revive.visible) .tile.hero .slot { transform: scale(1.04); }
#s03 .grid:has(.revive.visible) .tile.hero .win { border-color: var(--signal); box-shadow: 0 24px 70px rgba(193, 68, 14, 0.22); }

/* ---------- 04 · Die falsche Geschichte ---------- */
#s04 .row { flex: 1; display: flex; align-items: center; gap: 120px; }
#s04 .dots { display: grid; grid-template-columns: repeat(10, 40px); gap: 16px; flex: none; }
#s04 .dot {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #3a3834;
  transition: background 0.9s var(--ease), box-shadow 0.9s var(--ease);
  transition-delay: calc(var(--k, 0) * 6ms);
}
#s04 .row:has(.legend.visible) .dot.one { background: var(--signal-light); box-shadow: 0 0 0 9px rgba(232, 103, 42, 0.2); }
#s04 .row:has(.legend.visible) .dot.nine { background: #8a4424; }
#s04 .row:has(.legend.visible) .dot.rest { background: #2a2826; }
#s04 .side { display: flex; flex-direction: column; gap: 56px; }
#s04 .legend { display: flex; flex-direction: column; gap: 22px; }
#s04 .legend p { display: flex; align-items: center; gap: 22px; margin: 0; font-size: 38px; }
#s04 .legend .sw { width: 30px; height: 30px; border-radius: 50%; flex: none; }
#s04 .ask { font-family: var(--font-display); font-size: 72px; font-weight: 740; line-height: 1.08; letter-spacing: -0.02em; margin: 0; max-width: 980px; }
#s04 .src { position: absolute; left: 128px; bottom: 56px; }

/* ---------- 05 · Mr. Interface und Mr. Architecture ---------- */
#s05 .duo { flex: 1; display: grid; grid-template-columns: 1fr 380px 1fr; gap: 40px; min-height: 0; }
#s05 .person { display: flex; flex-direction: column; gap: 14px; }
#s05 .photo { flex: 1; border-radius: 16px; overflow: hidden; background: var(--paper-deep); min-height: 0; }
#s05 .photo > img { object-position: center 28%; }
#s05 .photo .standin { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
#s05 .photo .standin span {
  width: 200px; height: 200px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #ffffff; border: 2px solid var(--line);
  font-family: var(--font-display); font-size: 72px; font-weight: 760; color: var(--ink-soft);
}
#s05 .person .who { font-size: 26px; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal); margin: 10px 0 0; }
#s05 .person h3 { font-family: var(--font-display); font-size: 56px; font-weight: 740; letter-spacing: -0.015em; line-height: 1.05; margin: 0; }
#s05 .person p.body { color: var(--ink-soft); }
#s05 .mid { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; text-align: center; }
#s05 .mid .big { font-family: var(--font-display); font-size: 120px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--signal); margin: 0; }
#s05 .mid .small { color: var(--ink-soft); max-width: 300px; }
#s05 .mid hr { width: 120px; border: none; border-top: 3px solid var(--line); margin: 28px 0; }

/* ---------- 06 · Nicht Schulungen. Cockpits. ---------- */
#s06 .stage { justify-content: center; gap: 0; }
#s06 .kicker { color: var(--paper); opacity: 0.85; }
#s06 .statement { font-size: 176px; }
#s06 .statement span { display: block; }
#s06 .quote { color: var(--paper); margin-top: 64px; font-size: 52px; }

/* ---------- 07 · Vom Kopf zur App (Kochbuch-Stufen) ---------- */
#s07 .kb { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; min-height: 0; }
#s07 .kb-step { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 26px 26px 30px; border: 1.5px solid var(--line); border-radius: 20px; background: #ffffff; box-sizing: border-box; }
#s07 .kb-step.ink { background: var(--night); border-color: var(--night); color: var(--on-night); box-shadow: 0 26px 70px rgba(18, 18, 18, 0.22); }
#s07 .kb-ill { width: 100%; height: 200px; color: var(--ink); overflow: visible; }
#s07 .kb-step.ink .kb-ill { color: var(--on-night); }
#s07 .kb-ill path,
#s07 .kb-ill rect,
#s07 .kb-ill circle { fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
#s07 .kb-ill .acc { stroke: var(--signal); }
#s07 .kb-step.ink .kb-ill .acc { stroke: var(--signal-light); }
#s07 .kb-n { margin: 6px 0 0; font-family: var(--font-display); font-size: 40px; font-weight: 740; letter-spacing: -0.015em; line-height: 1.08; }
#s07 .kb-line { margin: 0; font-size: 26px; line-height: 1.35; color: var(--muted); min-height: 70px; }
#s07 .kb-step.ink .kb-line { color: var(--on-night-muted); }
#s07 .kb-ai { margin-top: auto; padding-top: 16px; border-top: 1.5px dashed var(--line); width: 100%; min-height: 118px; box-sizing: border-box; }
#s07 .kb-step.ink .kb-ai { border-top-color: var(--night-line); }
#s07 .kb-ai .l { margin: 0 0 6px; font-size: 20px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal); }
#s07 .kb-step.ink .kb-ai .l { color: var(--signal-light); }
#s07 .kb-ai .v { margin: 0; font-size: 30px; font-weight: 650; line-height: 1.2; }
#s07 .kb-step.ink .kb-ai .v { color: var(--signal-light); }
/* Stufe 4 zeichnet sich erst, wenn der Klick sie sichtbar macht */
#s07 .draw4 { stroke-dasharray: 1; stroke-dashoffset: 0; }
.reveal .slides section#s07 .kb-step.visible .draw4 { animation: pe-draw 1s var(--ease-io) both; animation-delay: calc(0.25s + var(--j, 0) * 110ms); }
#s07 .foot { min-height: 50px; }

/* ---------- 08 · Drei Schichten (Küche) ---------- */
#s08 .kitchen { flex: 1; display: grid; grid-template-columns: 1fr 400px; gap: 56px; min-height: 0; }
#s08 .stack { display: flex; flex-direction: column; }
#s08 .layer {
  flex: 1;
  display: grid;
  grid-template-columns: 112px 360px 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 0 40px;
  border: 2px solid var(--line);
  border-top: none;
}
#s08 .layer .ico { width: 88px; height: 88px; }
#s08 .layer .lbl { font-size: 24px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal); margin: 0 0 4px; }
#s08 .layer h3 { font-family: var(--font-display); font-size: 54px; font-weight: 750; letter-spacing: -0.015em; line-height: 1; margin: 0; }
#s08 .layer .body { color: var(--ink-soft); }
#s08 .layer.top {
  background: var(--paper-deep);
  border-top: 10px solid var(--ink-soft);
  border-radius: 10px 10px 0 0;
}
#s08 .layer.mid { background: var(--signal-wash); }
#s08 .layer.bot { background: var(--ink); border-color: var(--ink); color: var(--on-night); border-radius: 0 0 18px 18px; }
#s08 .layer.bot .lbl { color: var(--signal-light); }
#s08 .layer.bot .body { color: var(--on-night-muted); }
#s08 .layer.bot .pill { background: var(--paper); color: var(--ink); }
#s08 .flame { transform-box: fill-box; transform-origin: 50% 90%; }
#s08 .layer.bot.visible .flame use { stroke: var(--signal-light); }
#s08 .layer.bot.visible .flame {
  animation: flame-on 1.2s var(--ease) 0.4s both, flame-flicker 3.4s ease-in-out 1.8s infinite;
}
@keyframes flame-on { from { transform: scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes flame-flicker { 0%, 100% { transform: scale(1, 1); } 45% { transform: scale(0.96, 1.05); } 70% { transform: scale(1.03, 0.97); } }
#s08 .chef {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 22px;
  text-align: center;
  border: 2.5px dashed var(--signal);
  border-radius: 20px;
  padding: 40px 32px;
  position: relative;
}
#s08 .chef .ico { width: 132px; height: 132px; color: var(--signal); }
#s08 .chef h3 { font-family: var(--font-display); font-size: 54px; font-weight: 750; letter-spacing: -0.015em; line-height: 1.02; margin: 0; }
#s08 .chef .body { color: var(--ink-soft); }
#s08 .chef .hf { font-weight: 700; color: var(--signal); }
#s08 .chef .point { position: absolute; left: -58px; top: 18%; width: 60px; height: 24px; color: var(--signal); }

/* ---------- 09 · Die Regeln, die keiner liest ---------- */
#s09 .row { flex: 1; display: grid; grid-template-columns: 680px 1fr; gap: 110px; align-items: center; min-height: 0; }
/* Dokumente und Rezeptbuch liegen in derselben Rasterzelle: die PDFs laufen mittig ins Buch */
#s09 .left { display: grid; }
#s09 .docs, #s09 .book { grid-area: 1 / 1; }
#s09 .book { align-self: center; z-index: 2; }
#s09 .docs { display: flex; flex-direction: column; gap: 16px; }
#s09 .doc {
  display: flex; align-items: center; gap: 18px;
  font-family: var(--font-mono);
  font-size: 26px;
  color: var(--on-night-muted);
  background: var(--night-card);
  border: 1.5px solid var(--night-line);
  border-radius: 10px;
  padding: 18px 26px;
  transform: rotate(var(--r, 0deg));
  transition: transform 1.1s var(--ease-io), opacity 0.9s var(--ease);
  transition-delay: calc(var(--k, 0) * 90ms);
}
#s09 .doc .ico { width: 34px; height: 34px; color: var(--muted); }
#s09 .doc em { font-style: normal; color: #6f6d66; margin-left: auto; font-size: 24px; }
#s09 .row:has(.absorb.visible) .doc { transform: translateY(calc(var(--to) * 1px)) scale(0.55); opacity: 0; }
#s09 .book {
  display: flex; align-items: center; gap: 26px;
  background: var(--signal-wash);
  color: var(--ink);
  border-radius: 16px;
  padding: 26px 32px;
}
#s09 .book .ico { width: 72px; height: 72px; color: var(--signal); }
#s09 .book .lbl { font-size: 24px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal); margin: 0 0 2px; }
#s09 .book h3 { font-family: var(--font-display); font-size: 44px; font-weight: 750; margin: 0; letter-spacing: -0.01em; }
#s09 .right { display: flex; flex-direction: column; gap: 40px; }
#s09 .right .big { font-family: var(--font-display); font-size: 64px; font-weight: 740; line-height: 1.1; letter-spacing: -0.02em; margin: 0; }

/* ---------- 10 · Creativity in Borders ---------- */
#s10 .stage { justify-content: center; gap: 72px; }
#s10 .framed { position: relative; display: inline-block; padding: 30px 52px 40px; margin-left: -52px; }
/* Rahmen zeichnet sich in vier Strichen: oben, rechts, unten, links */
#s10 .framed .b { position: absolute; background: var(--signal); }
#s10 .framed .t  { left: 0; top: 0; width: 100%; height: 6px; transform-origin: left center; }
#s10 .framed .r  { right: 0; top: 0; width: 6px; height: 100%; transform-origin: center top; }
#s10 .framed .bt { left: 0; bottom: 0; width: 100%; height: 6px; transform-origin: right center; }
#s10 .framed .l  { left: 0; top: 0; width: 6px; height: 100%; transform-origin: center bottom; }
@keyframes bx { from { transform: scaleX(0); } to { transform: none; } }
@keyframes by { from { transform: scaleY(0); } to { transform: none; } }
.reveal .slides section#s10.present .framed .t  { animation: bx 0.45s var(--ease-io) 0.9s both; }
.reveal .slides section#s10.present .framed .r  { animation: by 0.3s var(--ease-io) 1.35s both; }
.reveal .slides section#s10.present .framed .bt { animation: bx 0.45s var(--ease-io) 1.65s both; }
.reveal .slides section#s10.present .framed .l  { animation: by 0.3s var(--ease-io) 2.1s both; }
#s10 .statement { font-size: 168px; }
#s10 .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
#s10 .card { display: flex; flex-direction: column; gap: 16px; }
#s10 .card .ico { width: 64px; height: 64px; color: var(--signal); }
#s10 .card h3 { font-family: var(--font-display); font-size: 44px; font-weight: 740; margin: 0; letter-spacing: -0.01em; }
#s10 .card .body { color: var(--ink-soft); }

/* ---------- 11 · Vorher. Nachher. ---------- */
#s11 .vs { flex: 1; display: flex; align-items: center; gap: 44px; min-height: 0; }
#s11 .side { display: flex; flex-direction: column; gap: 18px; }
#s11 .side .lbl { font-size: 24px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0; }
#s11 .side.after .lbl { color: var(--signal); }
#s11 .mini { width: 744px; height: 419px; border-radius: 12px; overflow: hidden; box-shadow: 0 18px 50px rgba(18, 18, 18, 0.12); }
#s11 .mini .standin { position: absolute; inset: 0; }
#s11 .arrow { width: 72px; height: 40px; color: var(--signal); flex: none; margin-top: 40px; }
#s11 .claim { display: flex; align-items: baseline; gap: 36px; }
#s11 .claim .big { font-family: var(--font-display); font-size: 104px; font-weight: 800; letter-spacing: -0.03em; color: var(--signal); margin: 0; line-height: 1; }

/* hässliche Folie (Vorher) */
.ugly { background: #ffffff; padding: 22px 26px; box-sizing: border-box; font-family: 'Times New Roman', Times, serif; color: #1a1a8c; height: 100%; position: relative; }
.ugly h4 { margin: 0 0 8px; font-size: 30px; text-align: center; text-decoration: underline; font-weight: 700; color: #0b2fbf; text-shadow: 2px 2px 0 #ffcc00; }
.ugly ul { margin: 0; padding-left: 26px; font-size: 18px; line-height: 1.3; }
.ugly li:nth-child(2) { color: #c00; font-size: 21px; font-weight: 700; }
.ugly li:nth-child(4) { font-family: 'Comic Sans MS', 'Chalkboard SE', cursive; color: #138a13; }
.ugly li:nth-child(6) { font-size: 15px; color: #555; }
.ugly .burst { position: absolute; right: 26px; top: 80px; width: 120px; height: 120px; background: #ffd400; color: #d00000; font: 900 22px/120px Arial, sans-serif; text-align: center; transform: rotate(-14deg); clip-path: polygon(50% 0, 61% 32%, 98% 22%, 70% 50%, 98% 78%, 61% 68%, 50% 100%, 39% 68%, 2% 78%, 30% 50%, 2% 22%, 39% 32%); }
.ugly .img1 { position: absolute; left: 34px; bottom: 26px; width: 210px; height: 92px; background: #8fb7e6; border: 3px solid #333; transform: rotate(-2deg); }
.ugly .img2 { position: absolute; left: 290px; bottom: 40px; width: 150px; height: 110px; background: #c7d98b; border: 1px dotted #c00; }
.ugly .foot { position: absolute; right: 18px; bottom: 10px; font: 13px Arial, sans-serif; color: #999; }

/* veredelte Folie (Nachher), fiktive Haus-CI */
.clean { background: #f7f8fa; height: 100%; box-sizing: border-box; padding: 30px 36px 22px; font-family: var(--font-text); color: #1d2a44; display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: auto 1fr auto; gap: 14px 28px; }
.clean .eyebrow { grid-column: 1 / -1; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #0f8a8a; }
.clean h4 { grid-column: 1; margin: 0; font-size: 30px; line-height: 1.1; font-weight: 750; letter-spacing: -0.01em; }
.clean .pic { grid-column: 2; grid-row: 2 / span 2; border-radius: 6px; background: linear-gradient(135deg, #cfe3e6, #9cc6cb); }
.clean ul { grid-column: 1; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; align-self: start; }
.clean li { font-size: 16px; line-height: 1.35; padding-left: 16px; border-left: 3px solid #0f8a8a; }
.clean .fn { grid-column: 1 / -1; font-size: 11px; color: #6b7280; border-top: 1px solid #d5d9e0; padding-top: 8px; }

/* ---------- 12 · Ein halber Satz, fünf Kanäle ---------- */
#s12 .row { flex: 1; display: grid; grid-template-columns: 540px 72px 1fr; gap: 32px; align-items: center; min-height: 0; }
#s12 .voice { display: flex; flex-direction: column; gap: 24px; }
#s12 .voice .lbl { display: flex; align-items: center; gap: 16px; font-size: 24px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal-light); margin: 0; }
#s12 .voice .lbl .ico { width: 44px; height: 44px; }
#s12 .wave { display: flex; align-items: center; gap: 6px; height: 56px; }
#s12 .wave i { --h: calc(16% + var(--k) * 7%); width: 8px; border-radius: 4px; background: var(--signal-light); height: var(--h); }
.reveal .slides section#s12.present .wave i { animation: wave 0.9s ease-in-out calc(0.5s - var(--k) * 110ms) 3 both; }
@keyframes wave { 0%, 100% { height: var(--h); } 50% { height: 100%; } }
#s12 .bubble { font-style: italic; font-size: 42px; line-height: 1.3; background: var(--night-card); border: 1.5px solid var(--night-line); border-radius: 28px 28px 28px 6px; padding: 32px 38px; margin: 0; min-height: 230px; box-sizing: border-box; }
#s12 .arrow { width: 72px; height: 52px; color: var(--signal-light); }
/* Folie 12: echtes Durchlauf-Video aus demo-backup, Nachbau bleibt als Rückfall */
#s12 .s12-media { display: flex; align-items: center; }
#s12 .s12-video { display: none; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 14px; background: #F3F2EC; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
#s12 .s12-media.has-video .s12-video { display: block; }
#s12 .s12-media.has-video .standin { display: none; }
#s12 .out { position: relative; height: 100%; min-height: 0; }
#s12 .out .standin { display: flex; flex-direction: column; justify-content: center; gap: 14px; height: 100%; }
#s12 .ch-card { display: grid; grid-template-columns: 210px 1fr auto; align-items: center; gap: 20px; background: var(--night-card); border: 1.5px solid var(--night-line); border-radius: 14px; padding: 18px 26px; }
#s12 .ch-card b { font-size: 30px; font-weight: 700; }
#s12 .ch-card span { font-size: 26px; color: var(--on-night-muted); }
#s12 .ch-card em { font-style: normal; font-size: 24px; font-weight: 700; color: var(--signal-light); }
#s12 .foot .body b { color: var(--signal-light); }

/* ---------- 13 · Einmal denken, jeden Monat wissen ---------- */
#s13 .row { flex: 1; display: grid; grid-template-columns: 430px 1fr 1fr; gap: 36px; min-height: 0; }
#s13 .today { display: flex; flex-direction: column; justify-content: center; gap: 10px; background: var(--paper-deep); border-color: var(--line); }
#s13 .today .big { font-family: var(--font-display); font-size: 112px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--signal); margin: 0; }
#s13 .today .body { color: var(--ink-soft); }
#s13 .cfg { display: flex; flex-direction: column; justify-content: center; gap: 22px; }
#s13 .cfg .lbl, #s13 .rep .lbl { font-size: 24px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal); margin: 0; }
#s13 .field { display: flex; flex-direction: column; gap: 8px; }
#s13 .field span { font-size: 24px; font-weight: 650; color: var(--muted); }
#s13 .field div { font-size: 28px; color: var(--ink); background: var(--paper); border: 1.5px solid var(--line); border-radius: 10px; padding: 14px 18px; min-height: 40px; position: relative; overflow: hidden; }
#s13 .field div > em { font-style: normal; display: block; }
#s13 .go { align-self: flex-start; font-size: 28px; font-weight: 700; color: var(--paper); background: var(--ink); border-radius: 999px; padding: 16px 52px; margin: 4px 0 0; transition: background 0.4s var(--ease), transform 0.4s var(--ease); }
#s13 .row:has(.f-go.visible) .go { background: var(--signal); transform: scale(0.96); }
#s13 .rep { display: flex; flex-direction: column; gap: 18px; position: relative; }
#s13 .rep .standin { display: flex; flex-direction: column; gap: 18px; height: 100%; }
#s13 .rep .hd { display: flex; flex-direction: column; gap: 6px; }
#s13 .rep h3 { font-family: var(--font-display); font-size: 40px; font-weight: 740; margin: 0; }
#s13 .rep .cyc { font-size: 24px; font-weight: 700; color: var(--signal); white-space: nowrap; }
#s13 .bars { display: flex; flex-direction: column; gap: 14px; }
#s13 .bars p { display: grid; grid-template-columns: 196px 1fr; align-items: center; gap: 16px; margin: 0; font-size: 24px; color: var(--ink-soft); white-space: nowrap; }
#s13 .bars i { display: block; height: 22px; border-radius: 6px; background: var(--line); transform-origin: left; }
#s13 .bars i.hi { background: var(--signal); }
.reveal .slides section#s13 .rep.visible .bars i { animation: grow 1s var(--ease) both; animation-delay: calc(0.3s + var(--k) * 110ms); }
@keyframes grow { from { transform: scaleX(0); } to { transform: none; } }
#s13 .alert { display: flex; gap: 14px; align-items: flex-start; font-size: 26px; line-height: 1.35; background: var(--signal-wash); border-radius: 12px; padding: 16px 20px; margin: 0; }
#s13 .alert b { color: var(--signal); }

/* ---------- 14 · Kein Friedhof mehr ---------- */
#s14 .flow { flex: 1; display: flex; align-items: center; min-height: 0; }
#s14 .step { flex: 1; display: flex; flex-direction: column; gap: 18px; align-self: stretch; justify-content: center; }
#s14 .step .ico { width: 72px; height: 72px; color: var(--signal); }
#s14 .step .lbl { font-size: 24px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal); margin: 0; }
#s14 .step .txt { font-size: 38px; line-height: 1.3; margin: 0; }
#s14 .step .txt.q { font-style: italic; }
#s14 .step.ink .ico, #s14 .step.ink .lbl { color: var(--signal-light); }
#s14 .step .figs { display: flex; flex-direction: column; gap: 6px; }
#s14 .step .figs b { font-family: var(--font-display); font-size: 64px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: var(--paper); }
#s14 .step .figs span { font-size: 26px; color: var(--on-night-muted); }
#s14 .link { width: 110px; height: 40px; flex: none; color: var(--signal); }
#s14 .link path { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.8s var(--ease-io); }
#s14 .link.visible path { stroke-dashoffset: 0; }

/* ---------- 15 · Zeit ---------- */
#s15 .row { flex: 1; display: grid; grid-template-columns: 500px 1fr; gap: 72px; min-height: 0; }
#s15 .then { display: flex; flex-direction: column; justify-content: center; gap: 18px; transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transform-origin: left center; }
#s15 .then .big { font-family: var(--font-display); font-size: 150px; font-weight: 820; letter-spacing: -0.035em; line-height: 0.95; margin: 0; }
#s15 .then .body { color: var(--on-night-muted); max-width: 520px; }
/* .then hat eine Einblend-Animation, die die Deckkraft hält: gedimmt werden die Kinder */
#s15 .then > * { transition: opacity 0.9s var(--ease); }
#s15 .row:has(.times.visible) .then { transform: scale(0.9); }
#s15 .row:has(.times.visible) .then > * { opacity: 0.45; }
#s15 .row:has(.times.visible) .then .strike { background-size: 100% 8px; }
#s15 .then .strike { background-size: 0% 8px; background-position: 0 58%; }
#s15 .times { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 24px; }
#s15 .t { display: flex; flex-direction: column; justify-content: center; gap: 8px; background: var(--night-card); border: 1.5px solid var(--night-line); border-radius: 18px; padding: 28px 40px; }
#s15 .t b { font-family: var(--font-display); font-size: 88px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--signal-light); }
#s15 .t span { font-size: 30px; color: var(--on-night-muted); }
.reveal .slides section#s15 .times.visible .t { animation: pe-rise 0.8s var(--ease) both; animation-delay: calc(0.15s + var(--k) * 140ms); }

/* ---------- 16 · Euer Cockpit (neutral) ----------
   Platzhalter für Kundenlogo und Kundenfarbe (--brand); Klick 3 lässt die Farbe durch drei Marken laufen.
   Zustände per Klick: .s2 (Präsentationen), .s3 (Bilder), .claim (Satz + geschlossene Reiter). */
#s16 .stage { gap: 36px; }
@property --brand { syntax: '<color>'; inherits: true; initial-value: #3B5BDB; }
#s16 .cm {
  --brand: #3B5BDB;
  --brand-dark: color-mix(in srgb, var(--brand) 78%, #000000);
  --brand-wash: color-mix(in srgb, var(--brand) 12%, #ffffff);
  --cm-cream: #F4F5F7;
  --cm-dark: #25282A;
  --cm-ink: #101010;
  --cm-ink2: #4B5563;
  --cm-ink3: #6B7280;
  --cm-line: #E5E7EB;
  --cm-serif: var(--font-display);
  --cm-sans: var(--font-text);
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  background: #ffffff; border: 1.5px solid var(--cm-line); border-radius: 18px; overflow: hidden;
  box-shadow: 0 26px 70px rgba(18, 18, 18, 0.12);
  font-family: var(--cm-sans); font-weight: 400; color: var(--cm-ink);
}

/* Kopfzeile */
#s16 .cm-bar { display: flex; align-items: center; gap: 20px; height: 78px; padding: 0 28px; border-top: 6px solid var(--brand); border-bottom: 1.5px solid var(--cm-line); flex: none; }
#s16 .cm-logo { font-size: 18px; font-weight: 700; letter-spacing: 0.06em; color: var(--cm-ink3); padding: 8px 14px; border: 1.5px dashed #c9ccd3; border-radius: 8px; white-space: nowrap; }
#s16 .cm-product { font-size: 18px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cm-ink3); padding-left: 18px; border-left: 1.5px solid var(--cm-line); }
#s16 .cm-tabs { display: flex; gap: 6px; margin-left: 16px; flex: 1; }
#s16 .cm-tab { font-size: 21px; padding: 8px 14px; border-radius: 8px; border: 1.5px solid transparent; color: var(--cm-ink2); white-space: nowrap; transition: background 0.5s var(--ease), color 0.5s var(--ease), border-color 0.5s var(--ease), opacity 0.5s var(--ease); }
#s16 .cm-tab.closed { border: 1.5px dashed #cfccc4; color: var(--cm-ink3); opacity: 0.75; }
#s16 .cm-user { width: 44px; height: 44px; border-radius: 50%; background: var(--brand); color: #ffffff; font-weight: 700; font-size: 17px; display: flex; align-items: center; justify-content: center; flex: none; }

/* aktiver Reiter je Zustand */
#s16 .cm-tab.t-social,
#s16 .stage:has(.s2.visible) .cm-tab.t-praes,
#s16 .stage:has(.s3.visible) .cm-tab.t-bilder { background: var(--brand-wash); color: var(--brand-dark); font-weight: 700; }
#s16 .stage:has(.s2.visible) .cm-tab.t-social { background: transparent; color: var(--cm-ink2); font-weight: 300; }
#s16 .stage:has(.s3.visible) .cm-tab.t-praes { background: transparent; color: var(--cm-ink2); font-weight: 300; }

/* Körper: Seitenleiste + Arbeitsfläche */
#s16 .cm-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 290px 1fr; }
#s16 .cm-side { position: relative; border-right: 1.5px solid var(--cm-line); background: var(--cm-cream); }
#s16 .cm-side .x { padding: 26px 24px; display: flex; flex-direction: column; gap: 8px; }
#s16 .cm-lbl { margin: 14px 0 2px; font-size: 15px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cm-ink3); }
#s16 .cm-lbl:first-child { margin-top: 0; }
#s16 .cm-check { margin: 0; font-size: 20px; display: flex; align-items: center; gap: 10px; color: var(--cm-ink2); }
#s16 .cm-check::before { content: ''; width: 18px; height: 18px; border-radius: 4px; border: 1.5px solid #c9c6bd; background: #ffffff; flex: none; }
#s16 .cm-check.on::before { background: var(--brand); border-color: var(--brand); }
#s16 .cm-select { margin: 0; font-size: 20px; padding: 9px 12px; border: 1.5px solid var(--cm-line); border-radius: 8px; background: #ffffff; display: flex; justify-content: space-between; align-items: center; }
#s16 .cm-select::after { content: '▾'; color: var(--cm-ink3); }
#s16 .cm-btn { margin: 18px 0 0; font-size: 20px; font-weight: 700; text-align: center; padding: 12px; border-radius: 8px; background: var(--brand); color: #ffffff; }

#s16 .cm-main { display: flex; flex-direction: column; min-height: 0; padding: 24px 34px 26px; gap: 14px; }
#s16 .cm-greet { font-family: var(--cm-serif); font-weight: 720; font-size: 38px; line-height: 1.15; letter-spacing: -0.02em; margin: 0; color: var(--cm-ink); }
#s16 .cm-area { position: relative; flex: 1; min-height: 0; }
#s16 .cm-area > .x { display: flex; flex-direction: column; gap: 14px; }

/* Ansichten umschalten */
#s16 .x { position: absolute; inset: 0; overflow: clip; overflow-clip-margin: 10px; opacity: 0; visibility: hidden; transition: opacity 0.45s var(--ease), visibility 0.45s; }
#s16 .x.x-social { opacity: 1; visibility: inherit; }
#s16 .stage:has(.s2.visible) .x.x-social { opacity: 0; visibility: hidden; }
#s16 .stage:has(.s2.visible) .x.x-praes { opacity: 1; visibility: inherit; }
#s16 .stage:has(.s3.visible) .x.x-praes { opacity: 0; visibility: hidden; }
#s16 .stage:has(.s3.visible) .x.x-bilder { opacity: 1; visibility: inherit; }

/* Statuszeile: Agent arbeitet, dann fertig */
@keyframes cm-pulse { 50% { opacity: 0.2; } }
@keyframes cm-out { from { opacity: 1; } to { opacity: 0; } }
#s16 .cm-status { position: relative; height: 28px; font-size: 19px; flex: none; }
#s16 .cm-status span { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 10px; white-space: nowrap; }
#s16 .cm-status .run { color: var(--brand-dark); transition: opacity 0.4s var(--ease); }
#s16 .cm-status .run i { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); animation: cm-pulse 1s ease-in-out infinite; }
#s16 .cm-status .done { color: var(--cm-ink2); font-weight: 700; opacity: 0; transition: opacity 0.4s var(--ease); }
.reveal .slides section#s16.present .x-social .cm-status .run { animation: cm-out 0.4s ease 3.4s both; }
.reveal .slides section#s16.present .x-social .cm-status .done { animation: pe-fade 0.4s ease 3.4s both; }
#s16 .stage:has(.s2.visible) .x-praes .cm-status .run { opacity: 0; transition-delay: 2.4s; }
#s16 .stage:has(.s2.visible) .x-praes .cm-status .done { opacity: 1; transition-delay: 2.4s; }

/* Ansicht 1: Redaktionskalender */
#s16 .cm-week { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: auto 1fr; gap: 10px 14px; align-items: start; }
#s16 .cm-week .d { font-size: 16px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cm-ink3); padding-bottom: 6px; border-bottom: 1.5px solid var(--cm-line); }
#s16 .post { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1.5px solid var(--cm-line); border-radius: 12px; background: #ffffff; box-shadow: 0 6px 18px rgba(16, 16, 16, 0.05); }
#s16 .post b { font-size: 15px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-dark); }
#s16 .post .pic { height: 200px; border-radius: 8px; overflow: hidden; display: flex; align-items: flex-end; padding: 12px 14px; box-sizing: border-box; }
#s16 .post .pic em { font-family: var(--cm-serif); font-style: normal; font-weight: 760; font-size: 28px; line-height: 1.05; letter-spacing: -0.02em; }
#s16 .post .pic.red { background: var(--brand); color: #ffffff; }
#s16 .post .pic.dark { background: var(--cm-dark); color: #ffffff; }
#s16 .post .pic.pink { background: var(--brand-wash); color: var(--brand-dark); }
#s16 .post .pic.photo { padding: 0; }
#s16 .post .pic.photo img { width: 100%; height: 100%; object-fit: cover; }
#s16 .post p { margin: 0; font-size: 18px; line-height: 1.3; color: var(--cm-ink2); }
#s16 .post.empty { border-style: dashed; background: transparent; box-shadow: none; align-items: center; justify-content: center; min-height: 210px; text-align: center; }
#s16 .post.empty b { font-size: 40px; color: var(--cm-ink3); letter-spacing: 0; }
.reveal .slides section#s16.present .x-social .post { animation: pe-pop 0.6s var(--ease) both; animation-delay: calc(1.1s + var(--k) * 420ms); }

/* Ansicht 2: Folien-Galerie */
#s16 .cm-slides { display: grid; grid-template-columns: repeat(3, 300px); gap: 18px; align-content: start; }
#s16 .sl { position: relative; aspect-ratio: 16 / 9; box-sizing: border-box; border-radius: 8px; border: 1.5px solid var(--cm-line); background: #ffffff; padding: 14px 16px 14px 22px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; box-shadow: 0 8px 24px rgba(16, 16, 16, 0.07); opacity: 0; transform: translateY(16px) scale(0.97); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
#s16 .stage:has(.s2.visible) .sl { opacity: 1; transform: none; transition-delay: calc(0.5s + var(--k) * 260ms); }
#s16 .sl::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--brand); }
#s16 .sl em { font-family: var(--cm-serif); font-style: normal; font-weight: 700; font-size: 20px; line-height: 1.15; letter-spacing: -0.01em; }
#s16 .sl span { height: 8px; width: 80%; border-radius: 4px; background: #e5e2da; }
#s16 .sl span.s { width: 50%; }
#s16 .sl.cover { background: var(--brand); border-color: var(--brand); color: #ffffff; justify-content: flex-end; }
#s16 .sl.cover::before { display: none; }
#s16 .sl.cover em { font-size: 24px; }
#s16 .sl.img { padding: 0; }
#s16 .sl.img::before { z-index: 2; }
#s16 .sl.img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#s16 .sl.img em { position: absolute; left: 22px; top: 14px; z-index: 1; background: #ffffff; padding: 2px 10px; border-radius: 4px; font-size: 20px; }
#s16 .sl.quote { background: var(--cm-cream); justify-content: center; }
#s16 .sl.chart .bars { flex: 1; display: flex; align-items: flex-end; gap: 16px; padding: 0 6px; }
#s16 .sl.chart .bars i { flex: 1; height: var(--h); background: var(--cm-dark); border-radius: 3px 3px 0 0; }
#s16 .sl.chart .bars i:last-child { background: var(--brand); }
#s16 .sl.end { background: var(--cm-dark); border-color: var(--cm-dark); color: #ffffff; justify-content: space-between; }
#s16 .sl.end .mark { width: 40px; height: 40px; border-radius: 10px; background: var(--brand); }

/* Ansicht 3: Bilder-Bibliothek */
#s16 .cm-search { display: flex; align-items: center; gap: 14px; border: 1.5px solid var(--cm-ink); border-radius: 10px; padding: 12px 18px; font-size: 22px; flex: none; }
#s16 .cm-search::before { content: ''; width: 18px; height: 18px; border: 2.5px solid var(--cm-ink3); border-radius: 50%; flex: none; }
#s16 .cm-search .q { display: inline-block; white-space: nowrap; padding-right: 4px; border-right: 2px solid var(--brand); clip-path: inset(0 100% 0 0); transition: clip-path 1.1s steps(24) 0.4s; }
#s16 .stage:has(.s3.visible) .cm-search .q { clip-path: inset(0 0 0 0); }
#s16 .cm-imgs { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 12px; }
#s16 .cm-imgs img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; outline: 3px solid transparent; outline-offset: 3px; opacity: 0; transform: scale(0.96); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease), filter 0.6s var(--ease), outline-color 0.6s var(--ease); }
#s16 .stage:has(.s3.visible) .cm-imgs img { opacity: 1; transform: none; transition-delay: calc(0.3s + var(--k) * 70ms), calc(0.3s + var(--k) * 70ms), 1.9s, 1.9s; }
#s16 .stage:has(.s3.visible) .cm-imgs img:not(.hit) { filter: grayscale(1) opacity(0.35); }
#s16 .stage:has(.s3.visible) .cm-imgs img.hit { outline-color: var(--brand); }
#s16 .cm-tags { margin: 0; display: flex; gap: 10px; flex: none; opacity: 0; transition: opacity 0.5s var(--ease); }
#s16 .stage:has(.s3.visible) .cm-tags { opacity: 1; transition-delay: 2.3s; }
#s16 .cm-tags span { font-size: 18px; font-weight: 700; padding: 6px 12px; border-radius: 6px; background: var(--brand-wash); color: var(--brand-dark); }

/* Klick 3: die geschlossenen Reiter leuchten auf, der Satz erscheint */
@keyframes cm-glow { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--brand) 18%, transparent); } }
@keyframes cm-brand { 0% { --brand: #3B5BDB; } 30% { --brand: #0E9F6E; } 62% { --brand: #C2185B; } 100% { --brand: #3B5BDB; } }
.reveal .slides section#s16 .stage:has(.claim.visible) .cm { animation: cm-brand 3.6s ease-in-out 0.3s 1 both; }
#s16 .stage:has(.claim.visible) .cm-tab.closed { opacity: 1; color: var(--brand-dark); border-color: var(--brand); animation: cm-glow 1.3s ease-in-out calc(0.2s + var(--k) * 220ms) 2; }
#s16 .claim { color: var(--ink-soft); }
#s16 .claim b { color: var(--signal); }


/* ---------- 16b · Maßkonfektion statt Monolith ---------- */
#s16b .mk { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; align-items: end; }
#s16b .mk-step { height: var(--h); box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 26px 32px 30px; border: 1.5px solid var(--line); border-radius: 20px; background: #ffffff; }
#s16b .mk-step.ink { background: var(--night); border-color: var(--night); color: var(--on-night); box-shadow: 0 26px 70px rgba(18, 18, 18, 0.22); }
#s16b .mk-ill { width: 100%; max-width: 300px; flex: 1 1 0; min-height: 0; height: auto; color: var(--ink); overflow: visible; }
#s16b .mk-step.ink .mk-ill { color: var(--on-night); }
#s16b .mk-ill path,
#s16b .mk-ill rect { fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
#s16b .mk-ill .acc { stroke: var(--signal); }
#s16b .mk-step.ink .mk-ill .acc { stroke: var(--signal-light); }
#s16b .mk-k { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal); }
#s16b .mk-step.ink .mk-k { color: var(--signal-light); }
#s16b .mk-n { margin: 0; font-family: var(--font-display); font-size: 64px; font-weight: 780; letter-spacing: -0.02em; line-height: 1; }
#s16b .mk-l { margin: 0; font-size: 28px; line-height: 1.35; color: var(--muted); }
#s16b .mk-step.ink .mk-l { color: var(--on-night-muted); }
#s16b .draw5 { stroke-dasharray: 1; stroke-dashoffset: 0; }
.reveal .slides section#s16b .mk-step.visible .draw5 { animation: pe-draw 1s var(--ease-io) both; animation-delay: calc(0.25s + var(--j, 0) * 110ms); }
#s16b .mk-claim { display: flex; align-items: baseline; gap: 40px; min-height: 96px; }
#s16b .mk-s { margin: 0; font-family: var(--font-display); font-size: 72px; font-weight: 800; letter-spacing: -0.025em; line-height: 1; white-space: nowrap; }
#s16b .mk-sub { margin: 0; font-size: 30px; line-height: 1.35; color: var(--ink-soft); max-width: 820px; }

/* ---------- 17 · Bedienen. Und wachsen. ---------- */
#s17 .map { position: absolute; inset: 0; }
#s17 .map svg { position: absolute; inset: 0; width: 1920px; height: 1080px; overflow: visible; }
#s17 .map path { fill: none; stroke: var(--on-night-muted); stroke-width: 4; stroke-linecap: round; }
#s17 .map path.back { stroke: var(--signal-light); stroke-dasharray: 0.012 0.012; }
#s17 .node { position: absolute; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
#s17 .node .lbl { font-size: 24px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal-light); margin: 0; }
#s17 .node h3 { font-family: var(--font-display); font-size: 52px; font-weight: 740; margin: 0; letter-spacing: -0.015em; line-height: 1.05; }
#s17 .hub { left: 128px; top: 470px; width: 400px; height: 180px; align-items: center; background: var(--signal); border-radius: 18px; color: var(--paper); }
#s17 .hub .lbl { color: var(--paper); opacity: 0.85; }
#s17 .way { left: 820px; width: 972px; height: 180px; padding: 28px 44px; background: var(--night-card); border: 1.5px solid var(--night-line); border-radius: 18px; }
#s17 .way.a { top: 330px; }
#s17 .way.b { top: 610px; }
#s17 .note { position: absolute; left: 820px; top: 836px; width: 972px; }
.reveal .slides section#s17 .wire {
  opacity: 1;
  visibility: visible;
  transform: none;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1s var(--ease-io);
}
.reveal .slides section#s17 .wire.visible { stroke-dashoffset: 0; }
#s17 .reveal-back path { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 18 · Lernen, das zu euch passt ---------- */
#s18 .path { position: relative; flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); align-items: start; padding-top: 30px; min-height: 0; }
#s18 .rail { position: absolute; left: 10%; right: 10%; top: 76px; height: 4px; background: var(--line); }
#s18 .rail i { position: absolute; inset: 0; background: var(--ink); transform-origin: left; }
.reveal .slides section#s18.present .rail i { animation: grow 2.2s var(--ease-io) 0.3s both; }
#s18 .st { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
#s18 .st .n { width: 96px; height: 96px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--ink); color: var(--paper); font-family: var(--font-display); font-size: 44px; font-weight: 780; }
#s18 .st.last .n { background: var(--signal); }
#s18 .st h3 { font-family: var(--font-display); font-size: 40px; font-weight: 740; margin: 8px 0 0; letter-spacing: -0.01em; }
#s18 .st .small { color: var(--ink-soft); max-width: 280px; }
#s18 .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
#s18 .cards .body b { color: var(--signal); }

/* ---------- 19 · Welcher Reiter wäre eurer? ---------- */
#s19 .stage { justify-content: space-between; }
#s19 .tab { background: transparent; border-color: var(--night-line); color: var(--on-night-muted); }
#s19 .tab.q { font-family: var(--font-display); font-size: 40px; font-weight: 800; line-height: 1; padding: 10px 36px; background: var(--signal); border-color: var(--signal); color: var(--paper); box-shadow: 0 0 0 0 rgba(232, 103, 42, 0.5); }
.reveal .slides section#s19.present .tab.q { animation: pe-right 1s var(--ease) 1.4s both, q-glow 2.8s ease-in-out 2.6s 2; }
@keyframes q-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(232, 103, 42, 0); } 50% { box-shadow: 0 0 0 18px rgba(232, 103, 42, 0.18); } }
#s19 .statement { font-size: 150px; max-width: 1500px; }
#s19 .motto { font-family: var(--font-display); font-size: 56px; font-weight: 500; color: var(--on-night-muted); margin: 40px 0 0; }
#s19 .motto b { color: var(--on-night); font-weight: 700; }

/* =========================================================
   FASSUNG v03 · 20.10.2026 · neue Folien aus der Storyline v02
   ========================================================= */

/* ---------- 01 · Rolle unter dem Namen ---------- */
#s01 .who .role { font-size: 26px; color: var(--on-night-muted); margin: 0; }

/* ---------- 02 · Wo die Neugierigen sich treffen ---------- */
#c02 .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
#c02 .stat { display: flex; flex-direction: column; gap: 14px; }
#c02 .stat .big { font-family: var(--font-display); font-size: 132px; font-weight: 800; letter-spacing: -0.035em; line-height: 1; color: var(--signal); margin: 0; }
#c02 .stat.ink .big { color: var(--signal-light); }
#c02 .stat .body { color: var(--ink-soft); }
#c02 .stat.ink .body { color: var(--on-night-muted); }
#c02 .quote { margin-top: auto; max-width: 1560px; }

/* ---------- 03 · London: die 2–4 % leuchten mit dem Klick ---------- */
#c03 .head .quote { color: var(--on-night-muted); margin-top: 22px; font-size: 52px; }
#c03 .stats { margin-top: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
#c03 .stat { display: flex; flex-direction: column; gap: 14px; transition: border-color 0.8s var(--ease), background 0.8s var(--ease); }
#c03 .stat > * { transition: opacity 0.8s var(--ease), color 0.8s var(--ease); }
#c03 .stat .big { font-family: var(--font-display); font-size: 112px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--on-night); margin: 0; white-space: nowrap; }
#c03 .stat .big .ar { color: var(--on-night-muted); font-weight: 500; }
#c03 .stat .body { color: var(--on-night-muted); }
#c03 .stage:has(.f-hl.visible) .stat:not(.key) > * { opacity: 0.35; }
#c03 .stage:has(.f-hl.visible) .stat.key { border-color: var(--signal-light); background: #2a1a12; }
#c03 .stage:has(.f-hl.visible) .stat.key .big { color: var(--signal-light); }

/* ---------- 04 · Barcelona ---------- */
#c04 .stage { flex-direction: row; gap: 80px; }
#c04 .ph { width: 700px; flex: none; display: flex; flex-direction: column; gap: 14px; }
#c04 .ph .frame { flex: 1; border-radius: 18px; overflow: hidden; position: relative; background: var(--paper-deep); }
#c04 .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 52% 40%; }
.reveal .slides section#c04.present .ph img { animation: kb 9s var(--ease) both; }
@keyframes kb { from { transform: scale(1.14); } to { transform: none; } }
#c04 .ph .credit { font-size: 22px; color: var(--muted); margin: 0; }
#c04 .txt { flex: 1; display: flex; flex-direction: column; gap: 48px; min-width: 0; }
#c04 .rows { display: flex; flex-direction: column; gap: 26px; }
#c04 .rows p { display: grid; grid-template-columns: 330px 1fr; align-items: baseline; gap: 28px; margin: 0; }
#c04 .rows b { white-space: nowrap; font-family: var(--font-display); font-size: 80px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--signal); }
#c04 .rows span { font-size: 32px; line-height: 1.3; color: var(--ink-soft); }
#c04 .end { margin: auto 0 0; font-family: var(--font-display); font-size: 56px; font-weight: 740; line-height: 1.12; letter-spacing: -0.015em; }

/* ---------- 06 · Und einer davon lebt wieder ---------- */
#c06 .stage { gap: 40px; }
#c06 .row { flex: 1; display: flex; align-items: center; gap: 56px; min-height: 0; }
#c06 .stone { width: 360px; height: 480px; flex: none; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; text-align: center; background: #ffffff; border: 2px solid var(--line); border-radius: 160px 160px 8px 8px; padding: 88px 28px 38px; }
#c06 .stone .yr { font-family: var(--font-mono); font-size: 24px; color: var(--muted); margin: 0; }
#c06 .stone h3 { font-family: var(--font-display); font-size: 38px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; margin: 0; }
#c06 .stone .cause { font-size: 28px; color: var(--muted); margin: 0; }
#c06 .row:has(.arrow.visible) .strike { background-size: 100% 4px; }
#c06 .arrow { width: 110px; height: 60px; flex: none; color: var(--signal); }
#c06 .arrow path { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.8s var(--ease-io) 0.25s; }
#c06 .arrow.visible path { stroke-dashoffset: 0; }
#c06 .shot { flex: 1; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
#c06 .shot .lbl { font-size: 24px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal); margin: 0; }
#c06 .shot img { display: block; width: 100%; height: auto; aspect-ratio: 1300 / 530; border-radius: 16px; border: 1.5px solid var(--line); background: #ffffff; box-shadow: 0 24px 64px rgba(18, 18, 18, 0.12); }
#c06 .quote { font-size: 52px; }

/* ---------- 10 · Blumenstrauß: erst die Bedürfnisse, mit dem Klick die Lösungen ---------- */
#c10 .stage { gap: 40px; }
#c10 .bouquet { flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(2, 1fr); gap: 22px; min-height: 0; }
#c10 .tile { display: flex; flex-direction: column; gap: 14px; background: #ffffff; border: 1.5px solid var(--line); border-radius: 18px; padding: 28px 26px; box-sizing: border-box; min-width: 0; transition: border-color 0.6s var(--ease); }
#c10 .tile h3 { font-family: var(--font-display); font-size: 33px; font-weight: 720; line-height: 1.14; letter-spacing: -0.01em; margin: 0; }
#c10 .tile .sol { font-size: 26px; line-height: 1.35; color: var(--signal); margin: auto 0 0; opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
#c10 .tile.ink { background: var(--ink); border-color: var(--ink); color: var(--on-night); }
#c10 .tile.ink .sol { color: var(--signal-light); }
#c10 .stage:has(.f-sol.visible) .sol { opacity: 1; transform: none; }
#c10 .stage:has(.f-sol.visible) .tile:not(.ink) { border-color: #e9c9b6; }
html.reveal-print #c10 .sol { opacity: 1; transform: none; }

/* ---------- 18 · Vorher/Nachher mit echten Folien ---------- */
#s11 .mini { background: #ffffff; }
#s11 .claim .big { font-size: 88px; }

/* ---------- Arbeitsfolie ---------- */
#w01 .stage { gap: 40px; }
#w01 table { border-collapse: collapse; width: 100%; font-size: 28px; }
#w01 th { text-align: left; font-size: 22px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding: 0 24px 14px 0; border-bottom: 2px solid var(--ink); }
#w01 td { padding: 18px 24px 18px 0; border-bottom: 1.5px solid var(--line); vertical-align: top; line-height: 1.35; }
#w01 td:first-child { font-family: var(--font-mono); font-size: 24px; color: var(--signal); white-space: nowrap; width: 110px; }
#w01 td:last-child { white-space: nowrap; color: var(--ink-soft); width: 220px; }

/* London: Titel ausgleichen, „AI-Modellen“ nicht am Bindestrich trennen */
.nb { white-space: nowrap; }
#c03 .title { text-wrap: balance; }
#c02 .title { text-wrap: balance; }

/* Folie 10: fünf Beispiele plus „… und viele andere mehr“ (22.10.) */
#c10 .bouquet { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 24px; }
#c10 .tile { padding: 32px 36px; }
#c10 .tile h3 { font-size: 46px; }
#c10 .tile .sol { font-size: 32px; }
#c10 .tile.more { background: transparent; border: 2px dashed var(--line); justify-content: center; }
#c10 .tile.more h3 { font-weight: 500; font-style: italic; color: var(--muted); }
#c10 .stage:has(.f-sol.visible) .tile.more { border-color: var(--line); }

/* Folie 19: Logo und Mandant im Video neutral abdecken (22.10.) */
#s12 .vidwrap { position: relative; width: 100%; }
#s12 .vmask { position: absolute; top: 0.4%; height: 4.4%; background: #f2f1ec; border-radius: 6px; }
#s12 .vmask.m1 { left: 0.5%; width: 8%; }
#s12 .vmask.m2 { left: 88.6%; width: 10.8%; }
#s08 .title { text-wrap: balance; }
#s15 .t span { line-height: 1.35; }