/* =============================================================================
   Developer Onboarding Deck — 16:9, Arctic White (glass, ice mesh)
   ============================================================================= */

@import './design-tokens.css';

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --ob-slide-w: 1280px;
  --ob-slide-h: 720px;
  --ob-font: 'Outfit', system-ui, -apple-system, sans-serif;
  --ob-ink: var(--palette-arctic-ink);
  --ob-blue: var(--palette-arctic-blue-700);
  --ob-blue-soft: rgba(29, 78, 216, 0.12);
  --ob-glass-bg: rgba(255, 255, 255, 0.75);
  --ob-glass-border: rgba(255, 255, 255, 0.98);
  --ob-glass-shadow:
    0 1px 3px rgba(14, 100, 200, 0.06),
    0 6px 24px rgba(14, 100, 200, 0.08),
    0 20px 56px rgba(14, 100, 200, 0.07),
    inset 0 1px 0 #fff;
  --ob-mesh:
    radial-gradient(ellipse 70% 65% at 5% 10%, rgba(147, 197, 253, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse 55% 55% at 95% 90%, rgba(96, 165, 250, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 50% 50%, rgba(219, 234, 254, 0.2) 0%, transparent 55%);
  /* type scale */
  --ob-t-hero: clamp(3.1rem, 5.4vw, 4.2rem);
  --ob-t-h2: clamp(2.15rem, 3.4vw, 2.7rem);
  --ob-t-body: 1.28rem;
  --ob-t-card: 1.08rem;
  --ob-t-label: 0.72rem;
  /* Richtmaß: Schrift in eingebetteten SVG-Diagrammen soll >= 80% der
     Fließtext-Schrift auf derselben Folie erreichen. Der gerenderte SVG-Font
     skaliert mit der Bildbreite; die konkrete Umsetzung erfolgt über eine
     reduzierte Körperschrift auf gestapelten Diagramm-Folien plus eine
     Diagramm-Box, die die Restflaeche voll nutzt. Siehe rule
     presentation-deck-layout.mdc. */
  --ob-t-diagram-body: 1.1rem;
  --ob-diagram-vs-body-min: 0.8;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  overflow: hidden;
  font-family: var(--ob-font);
  background: var(--palette-arctic-bg);
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.onboarding-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100%;
  background: var(--palette-arctic-bg);
}

.onboarding-slides {
  width: var(--ob-slide-w);
  height: var(--ob-slide-h);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow:
    0 4px 6px rgba(14, 100, 200, 0.07),
    0 24px 48px rgba(14, 100, 200, 0.1);
  border-radius: var(--radius-md);
  background: var(--palette-arctic-bg);
}

/* ── Slide base ───────────────────────────────────────────────────────────── */
.slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 36px 56px 28px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s ease, transform 0.45s ease;
  pointer-events: none;
  isolation: isolate;
  color: var(--ob-ink);
  background: var(--palette-arctic-bg);
  /* Safety-Net: keine Inhalte dürfen die Folienkante (1280x720) verlassen.
     Scroll bleibt innerhalb von .slide-body / .slide-diagram-side moeglich. */
  overflow: hidden;
}

.slide::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--ob-mesh);
}

.slide > * { position: relative; z-index: 1; }

.slide.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.slide--hero {
  justify-content: center;
  align-items: flex-start;
  overflow: hidden;
  padding: 56px 64px;
}

.slide--hero::after {
  content: '';
  position: absolute;
  bottom: -15%;
  right: -8%;
  width: 50%;
  height: 55%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(147, 197, 253, 0.18) 0%, transparent 68%);
}

.slide--hero > * { z-index: 1; }

.slide--hero .ob-kicker {
  color: rgba(14, 100, 200, 0.55);
  margin-bottom: 1.75rem;
}

.slide--hero h1.ob-title {
  font-size: var(--ob-t-hero);
  font-weight: 800;
  line-height: 1.08;
  margin-bottom: var(--space-05);
  color: var(--ob-ink);
  letter-spacing: -0.03em;
  max-width: 900px;
}

.slide--hero .ob-title em {
  font-style: normal;
  color: var(--ob-blue);
}

.slide--hero p.ob-subtitle {
  font-size: 1.45rem;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(7, 20, 40, 0.72);
  max-width: 42rem;
}

.slide--hero .hero-fn {
  font-size: 0.55em;
  font-weight: 600;
  vertical-align: super;
  margin-left: 0.06em;
  color: var(--ob-blue);
}

.slide--hero p.ob-hero-footnote {
  font-size: 0.92rem;
  line-height: 1.45;
  color: rgba(7, 20, 40, 0.58);
  max-width: 38rem;
  margin-top: 1rem;
}

/* ── Content ──────────────────────────────────────────────────────────────── */
.slide--content { color: var(--ob-ink); }

.slide--diagram .slide-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.slide-diagram-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--diagram-safe-inset);
  box-sizing: border-box;
  overflow: visible;
}

/* Gestapelte Diagramme: Bild füllt die Wrap-Box; object-fit: contain wahrt
   das Seitenverhältnis. Sorgt dafür, dass das SVG die verfügbare Breite/
   Hoehe ausnutzt und interne Schrift möglichst gross skaliert (Ziel:
   >= var(--ob-diagram-vs-body-min) × Körperschrift). Split-Layouts nutzen
   eine eigene, spezifischere Regel weiter unten. */
.slide-diagram-wrap img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 24px rgba(14, 100, 200, 0.08));
}

/* Gestapeltes Diagramm-Layout (kein Split, nicht .slide--dense): Körpertext
   unter dem Diagramm wird auf --ob-t-diagram-body reduziert, damit der
   Diagramm-Bereich mehr Flaeche bekommt und die SVG-Label-Schrift das
   80%-Ziel erreicht. .slide--dense bringt eigene (noch kleinere) Groesse
   (1.05rem) mit und wird hier nicht ueberschrieben. Nicht-Diagramm-Kinder
   von .slide-body schrumpfen nicht (flex-shrink: 0); zusaetzliche Resthoehe
   geht damit an .slide-diagram-wrap (flex: 1). */
.slide--diagram:not(.slide--diagram-split):not(.slide--dense) .slide-body {
  font-size: var(--ob-t-diagram-body);
  line-height: 1.5;
}
.slide--diagram:not(.slide--diagram-split):not(.slide--dense) .slide-body p {
  font-size: var(--ob-t-diagram-body);
  line-height: 1.5;
}
.slide--diagram:not(.slide--diagram-split):not(.slide--dense) .slide-body .callout p,
.slide--diagram:not(.slide--diagram-split):not(.slide--dense) .slide-body .callout__follow {
  font-size: var(--ob-t-diagram-body);
  line-height: 1.5;
}
.slide--diagram:not(.slide--diagram-split) .slide-body > :not(.slide-diagram-wrap) {
  flex-shrink: 0;
}

#onboarding-slide-9 .slide-body {
  font-size: 1.1rem;
  line-height: 1.52;
}
#onboarding-slide-9 h2.ob-heading {
  margin-bottom: var(--space-06);
}
#onboarding-slide-9 .ob-context-slide {
  display: flex;
  flex-direction: column;
  gap: var(--space-05);
  flex: 1;
  min-height: 0;
}
#onboarding-slide-9 .ob-context-h {
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--ob-blue);
  margin: 0 0 var(--space-03);
  line-height: 1.28;
}
#onboarding-slide-9 .ob-context-slide .ob-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-03);
}
#onboarding-slide-9 .ob-context-slide .ob-list li {
  font-size: 1.12rem;
  line-height: 1.48;
  padding-left: 1.35em;
  position: relative;
  color: rgba(7, 20, 40, 0.88);
}
#onboarding-slide-9 .ob-context-slide .ob-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--ob-blue);
  font-weight: 700;
}

/* Folie 10: Wiederholungs-Regel */
#onboarding-slide-10 .slide-body {
  flex: 1;
  min-height: 0;
}
#onboarding-slide-10 .slide-body > p:first-of-type {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: var(--space-03);
}
#onboarding-slide-10 .slide-body .bento {
  margin-bottom: var(--space-04);
}
#onboarding-slide-10 .bento-card {
  min-height: 7.25rem;
}
#onboarding-slide-10 .bento-card h3 {
  font-size: 0.82rem;
  margin-bottom: var(--space-03);
}
#onboarding-slide-10 .bento-card p {
  font-size: 1.12rem;
  line-height: 1.48;
}
#onboarding-slide-10 .repeat-rule-stack {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-04);
  min-height: 0;
}
#onboarding-slide-10 .repeat-rule-stack > p {
  font-size: 1.15rem;
  line-height: 1.45;
  margin: 0;
  color: rgba(7, 20, 40, 0.92);
}
#onboarding-slide-10 .repeat-rule-stack .ob-list--repeat-rule {
  margin-top: 0;
  gap: var(--space-03);
}
#onboarding-slide-10 .repeat-rule-stack .ob-list--repeat-rule li {
  font-size: 1.08rem;
  line-height: 1.5;
}

/* Folie 12: Was ist ein Harness? */
#onboarding-slide-12 h2.ob-heading {
  margin-bottom: var(--space-06);
}
#onboarding-slide-12 .bento-card h3 {
  font-size: 0.78rem;
}
#onboarding-slide-12 .bento-card p {
  font-size: 1.1rem;
}
#onboarding-slide-12 .slide-body .bento {
  margin-bottom: var(--space-06);
}
#onboarding-slide-12 .harness-def-lower {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-05);
  min-height: 0;
}
#onboarding-slide-12 .ob-list--harness-def {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-03);
}
#onboarding-slide-12 .ob-list--harness-def li {
  font-size: 1.12rem;
  line-height: 1.48;
  padding-left: 1.35em;
  position: relative;
  color: rgba(7, 20, 40, 0.88);
}
#onboarding-slide-12 .ob-list--harness-def li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--ob-blue);
  font-weight: 700;
}
#onboarding-slide-12 .harness-def-foot p {
  margin-bottom: var(--space-03);
  font-size: 1.1rem;
  line-height: 1.48;
}
#onboarding-slide-12 .harness-def-foot p:last-child {
  margin-bottom: 0;
}

/* Zwei Spalten: Diagramm links, Text rechts (Abstraktionspyramide, Production, …) */
.slide-diagram-row {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: var(--space-05);
  flex: 1;
  min-height: 0;
  align-items: stretch;
}

.slide-diagram-row.slide-diagram-row--diagram-wide {
  grid-template-columns: minmax(0, 5.5fr) minmax(11rem, 0.45fr);
  gap: var(--space-04);
}

.slide-diagram-row .slide-diagram-wrap {
  flex: none;
  align-self: stretch;
  max-height: none;
  overflow: hidden;
  padding: var(--diagram-safe-inset);
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 0;
}

.slide-diagram-row .slide-diagram-wrap img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center top;
}

/* Folie 14 Gates-Pyramide: rechte Spalte — Oberkante Text an sichtbarer Pyramide */
#onboarding-slide-14 .slide-diagram-side {
  padding-top: calc(var(--diagram-safe-inset) + clamp(1.45rem, 3.2vw, 2.2rem));
}

/* Folie 16: gestapeltes Layout — größerer Fließtext (Diagramm oben) */
#onboarding-slide-16 .slide-body > p {
  font-size: 1.12rem;
  line-height: 1.48;
}

.slide-diagram-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-02);
  min-width: 0;
  min-height: 0;
  padding-top: var(--diagram-safe-inset);
  box-sizing: border-box;
  overflow: auto;
  /* Sehr schmale Split-Spalten (z. B. 11rem bei --diagram-wide) brauchen das,
     damit lange Woerter/URLs die Spaltenbreite nicht sprengen. */
  overflow-wrap: anywhere;
}

.slide-diagram-side p {
  margin-bottom: 0;
  /* Kompakter als Standard-Fliesstext: die schmale Spalte neben dem Diagramm
     muss auch text-reiche Folien (3-4 Absaetze) sicher unterbringen.
     Verhaeltnis zur Koerper-Schrift auf Stacked-Folien bleibt gewahrt; siehe
     --ob-diagram-vs-body-min in presentation-deck-layout.mdc. */
  font-size: calc(var(--ob-t-body) * 0.86);
  line-height: 1.42;
}

.animate-draw { animation: ob-float-in 0.9s ease-out 0.15s both; }

@keyframes ob-float-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Section label ────────────────────────────────────────────────────────── */
.ob-slide-header {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(14, 100, 200, 0.5);
  border-bottom: 1px solid rgba(147, 197, 253, 0.45);
  padding-bottom: var(--space-02);
  margin-bottom: var(--space-03);
  flex-shrink: 0;
}

/* ── Heading ──────────────────────────────────────────────────────────────── */
h2.ob-heading {
  font-size: var(--ob-t-h2);
  font-weight: 700;
  color: var(--ob-blue);
  margin-bottom: var(--space-05);
  line-height: 1.18;
  flex-shrink: 0;
  letter-spacing: -0.025em;
}

.slide--probdet h2.ob-heading {
  margin-bottom: var(--space-06);
}

/* Konzept-Deck (index.html, Arctic White): Folie 3 — halber Abstand Titel–Diagramm,
   zusätzlich y-Abstände (Überschrift → Diagramm → Callouts) um 30 % reduziert,
   Scrollbar unterdrückt. */
body:not(.onboarding-kinetic) #agentic-slide-3 h2.ob-heading {
  margin-bottom: calc(var(--space-05) / 2 * 0.7);
}
body:not(.onboarding-kinetic) #agentic-slide-3 .slide-body {
  overflow: hidden;
  min-height: 0;
}
body:not(.onboarding-kinetic) #agentic-slide-3 .slide-diagram-wrap {
  flex: 0 0 auto;
  padding-top: calc(var(--diagram-safe-inset) * 0.7);
  padding-bottom: calc(var(--diagram-safe-inset) * 0.7);
}
body:not(.onboarding-kinetic) #agentic-slide-3 .slide-body > div[style*="grid-template-columns"] {
  margin-top: calc(var(--space-03) * 0.7);
}

/* ── Body text ────────────────────────────────────────────────────────────── */
.slide-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  font-size: var(--ob-t-body);
  line-height: 1.6;
  display: flex;
  flex-direction: column;
}

.slide-body p {
  font-size: var(--ob-t-body);
  margin-bottom: var(--space-04);
  color: rgba(7, 20, 40, 0.88);
}

.slide-body p:last-child { margin-bottom: 0; }
.slide-body strong { color: var(--ob-ink); font-weight: 700; }

.slide-body .ob-list--repeat-rule {
  list-style: none;
  margin: var(--space-04) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  flex-shrink: 0;
}
.slide-body .ob-list--repeat-rule li {
  font-size: 1.05rem;
  line-height: 1.45;
  padding-left: 1.35em;
  position: relative;
  color: rgba(7, 20, 40, 0.88);
}
.slide-body .ob-list--repeat-rule li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--ob-blue);
  font-weight: 700;
}
.slide-body .ob-list--repeat-rule li code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.88em;
  background: var(--ob-blue-soft);
  padding: 0.08em 0.3em;
  border-radius: 4px;
}

/* Bento: content-height rows; space below before next block (footer line) */
.slide-body .bento {
  flex: 0 1 auto;
  align-items: start;
  margin-bottom: var(--space-06);
}
.slide-body .callout:last-child { flex: 1; display: flex; align-items: center; }
.slide-body .copilot-bar-wrap { flex: 1; display: flex; flex-direction: column; justify-content: center; }

/* ── Bento / Glass cards ──────────────────────────────────────────────────── */
.bento {
  display: grid;
  gap: var(--space-04);
}
.bento--2 { grid-template-columns: 1fr 1fr; }
.bento--3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 1280px) { .bento--3 { grid-template-columns: 1fr; } }

.bento-card {
  position: relative;
  border: 1px solid var(--ob-glass-border);
  border-radius: 22px;
  padding: var(--space-05) var(--space-05);
  background: var(--ob-glass-bg);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  box-shadow: var(--ob-glass-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.35s ease;
}

.bento-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, transparent 55%);
  pointer-events: none;
}

.bento-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(147, 197, 253, 0.65), transparent);
  pointer-events: none;
}

.bento--3 .bento-card:nth-child(1) { transform: perspective(700px) rotateY(4deg) rotateX(-1.5deg); }
.bento--3 .bento-card:nth-child(2) { transform: perspective(700px) rotateX(-2deg) translateY(-6px); }
.bento--3 .bento-card:nth-child(3) { transform: perspective(700px) rotateY(-4deg) rotateX(-1.5deg); }
.bento--3 .bento-card:hover {
  transform: perspective(700px) rotateY(0) rotateX(0) translateY(-8px) !important;
  box-shadow: 0 28px 80px rgba(14, 100, 200, 0.14), inset 0 1px 0 #fff;
}

.bento-card h3 {
  position: relative;
  z-index: 1;
  font-size: var(--ob-t-label);
  font-weight: 700;
  color: var(--ob-blue);
  margin-bottom: var(--space-02);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.bento-card p {
  position: relative;
  z-index: 1;
  font-size: var(--ob-t-card);
  margin: 0;
  color: rgba(7, 20, 40, 0.82);
  line-height: 1.55;
}

.bento-card--brand { border-left: 3px solid var(--palette-arctic-blue-500); }
.bento-card--accent { border-left: 3px solid var(--ob-blue); background: rgba(255, 255, 255, 0.82); }
.bento-card--tertiary {
  border-left: 3px solid var(--palette-bento-tertiary);
  background: rgba(255, 255, 255, 0.78);
}

/* ── Callout ──────────────────────────────────────────────────────────────── */
.callout {
  border: 1px solid rgba(147, 197, 253, 0.35);
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: var(--space-04) var(--space-05);
  border-radius: var(--radius-md);
  margin-top: var(--space-04);
  box-shadow: 0 4px 20px rgba(14, 100, 200, 0.06);
}

.callout p {
  font-size: 1.15rem;
  margin: 0;
  color: rgba(7, 20, 40, 0.88);
  line-height: 1.6;
}

.callout .ob-list--callout {
  margin: var(--space-03) 0 var(--space-04);
  color: rgba(7, 20, 40, 0.86);
}

.callout .ob-list--callout li {
  margin: 0.4em 0;
  font-size: 1.05rem;
  line-height: 1.5;
}

.callout__follow {
  margin: 0;
  margin-top: var(--space-02);
  font-size: 1.15rem;
  color: rgba(7, 20, 40, 0.88);
  line-height: 1.6;
}

.callout--provoke {
  border-color: rgba(29, 78, 216, 0.25);
  background: rgba(219, 234, 254, 0.45);
}

/* Callout mit folgendem Fließtext: Abstand (Harness diagrams: presentation-callout-rhythm.css) */
.slide-body .callout:not(:last-child) {
  margin-bottom: var(--space-05);
}

/* ── Links ────────────────────────────────────────────────────────────────── */
.ob-link { color: var(--ob-blue); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ob-link:hover { color: var(--palette-arctic-blue-500); }

/* ── Copilot bar ──────────────────────────────────────────────────────────── */
.copilot-bar-wrap { margin: var(--space-04) 0; }

.copilot-bar-label {
  font-size: 0.95rem;
  color: rgba(20, 60, 130, 0.55);
  margin-bottom: var(--space-03);
}

.copilot-bar-track {
  height: 36px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-md);
  border: 1px solid rgba(147, 197, 253, 0.4);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.copilot-bar-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 10%;
  background: linear-gradient(90deg, var(--palette-arctic-blue-500), var(--ob-blue));
  border-radius: var(--radius-md);
  animation: ob-grow-bar 1.2s ease-out 0.3s both;
}

@keyframes ob-grow-bar {
  from { width: 0; }
  to   { width: 10%; }
}

.copilot-bar-note {
  margin-top: var(--space-03);
  font-size: 1rem;
  color: rgba(20, 60, 130, 0.5);
}

/* ── Roadmap ──────────────────────────────────────────────────────────────── */
.roadmap-lede {
  margin: 0 0 0.5rem;
  max-width: 72ch;
  font-size: 0.98rem;
  line-height: 1.45;
  color: rgba(7, 20, 40, 0.88);
}

.roadmap-note {
  margin: 0 0 var(--space-04);
  max-width: 72ch;
  font-size: 0.85rem;
  line-height: 1.4;
  color: rgba(7, 20, 40, 0.65);
}

.roadmap-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-03);
  flex: 1;
}

.roadmap-cell {
  border: 1px solid var(--ob-glass-border);
  border-radius: 16px;
  padding: var(--space-04);
  background: var(--ob-glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--ob-glass-shadow);
  display: flex;
  flex-direction: column;
}

.roadmap-cell strong {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ob-blue);
  margin-bottom: var(--space-02);
  flex-shrink: 0;
}

.roadmap-cell p {
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0;
  color: rgba(7, 20, 40, 0.82);
}

@media (max-width: 1280px) { .roadmap-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── Topic grid ───────────────────────────────────────────────────────────── */
.topic-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-03);
  flex: 1;
}

.topic-pill {
  border: 1px solid rgba(147, 197, 253, 0.35);
  border-radius: 16px;
  padding: var(--space-04);
  font-size: 1.05rem;
  line-height: 1.48;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 2px 12px rgba(14, 100, 200, 0.05);
  display: flex;
  flex-direction: column;
}

.topic-pill strong {
  display: block;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ob-blue);
  margin-bottom: var(--space-02);
}

.slide-body .topic-pill p.topic-pill__lead {
  margin: 0 0 var(--space-02);
  font-size: 1em;
  line-height: 1.4;
  font-weight: 600;
  color: rgba(7, 20, 40, 0.9);
}

.topic-pill__list {
  margin: 0;
  padding-left: 1.1em;
  list-style: disc;
  font-size: 0.9rem;
  line-height: 1.4;
  color: rgba(7, 20, 40, 0.8);
}

.topic-pill__list li {
  margin: 0.12em 0;
}

/* ── Reveal ───────────────────────────────────────────────────────────────── */
.reveal-item {
  opacity: 0;
  transform: translateY(8px);
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.4s ease, transform 0.4s ease, max-height 0.5s ease;
}

.reveal-item.is-revealed {
  opacity: 1;
  transform: translateY(0);
  max-height: 600px;
}

/* ── Nav ──────────────────────────────────────────────────────────────────── */
#ob-slide-nav {
  position: absolute;
  bottom: 14px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: var(--space-03);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(147, 197, 253, 0.4);
  border-radius: var(--radius-md);
  padding: 6px 12px;
  z-index: 50;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 4px 16px rgba(14, 100, 200, 0.08);
}

#ob-slide-counter {
  color: var(--ob-ink);
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  min-width: 52px;
  text-align: center;
  font-weight: 600;
}

#ob-reveal-hint {
  color: rgba(20, 60, 130, 0.55);
  font-size: 0.65rem;
  max-width: 200px;
  line-height: 1.3;
}

#ob-progress-bar {
  position: absolute;
  top: 0; left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--palette-arctic-blue-500), var(--ob-blue));
  transition: width 0.35s ease;
  z-index: 9999;
}

/* ── Code ─────────────────────────────────────────────────────────────────── */
code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: rgba(219, 234, 254, 0.65);
  color: var(--ob-ink);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(147, 197, 253, 0.35);
}

/* ── Dense override ───────────────────────────────────────────────────────── */
.slide--dense .slide-body { font-size: 1.05rem; }
.slide--dense .slide-body p { font-size: 1.05rem; }
.slide--dense h2.ob-heading { margin-bottom: var(--space-05); }

/* ── Closing slide 20 ─────────────────────────────────────────────────────── */
.ob-hero-bento {
  width: 100%;
  max-width: 920px;
  align-items: stretch;
  gap: var(--space-06);
}
.ob-hero-bento .bento-card { padding: var(--space-05); }
.ob-hero-bento__next { margin-bottom: var(--space-04); }

/* =============================================================================
   Agentic-Konzept-Deck (presentation/index.html) — gemeinsam mit Onboarding-SSoT
   ============================================================================= */

.callout--accent {
  border-color: rgba(96, 165, 250, 0.45);
  border-left: 4px solid var(--palette-arctic-blue-500);
  background: rgba(219, 234, 254, 0.45);
}

.callout--success {
  border-left: 4px solid var(--color-success);
  background: var(--color-bg-success-subtle);
}

.agenda-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-04);
}

.agenda-item {
  display: flex;
  align-items: center;
  gap: var(--space-03);
  padding: var(--space-03) var(--space-04);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 2px 16px rgba(14, 100, 200, 0.07);
  transition: box-shadow 0.2s ease;
}

.agenda-item:hover {
  box-shadow: 0 8px 28px rgba(14, 100, 200, 0.12);
}

.agenda-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ob-blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  font-weight: 700;
  flex-shrink: 0;
}

.agenda-text {
  font-size: var(--font-size-sm);
  color: rgba(7, 20, 40, 0.88);
}

.badge {
  display: inline-block;
  background: var(--ob-blue);
  color: #fff;
  padding: 2px var(--space-02);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1.6;
}

.badge--accent {
  background: var(--palette-arctic-blue-500);
}

.badge--success {
  background: var(--color-success);
}

.badge--muted {
  background: var(--palette-gray-500);
}

.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-03);
}

.compare-card {
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: var(--radius-md);
  padding: var(--space-04);
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 12px rgba(14, 100, 200, 0.06);
}

.compare-card h4 {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--ob-blue);
  margin-bottom: var(--space-02);
  border-bottom: 2px solid rgba(147, 197, 253, 0.6);
  padding-bottom: var(--space-01);
}

.compare-card ul {
  list-style: none;
  margin-left: 0;
  padding: 0;
}

.compare-card li {
  font-size: var(--font-size-xs);
  line-height: 1.5;
  color: rgba(7, 20, 40, 0.88);
  margin-bottom: 4px;
}

.slide-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.slide-body th {
  background: linear-gradient(180deg, var(--palette-arctic-blue-700) 0%, #1e40af 100%);
  color: #fff;
  padding: var(--space-02) var(--space-03);
  text-align: left;
  font-weight: 600;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.slide-body td {
  padding: var(--space-02) var(--space-03);
  border-bottom: 1px solid rgba(147, 197, 253, 0.35);
  background: rgba(255, 255, 255, 0.55);
}

.slide-body tr:nth-child(even) td {
  background: rgba(219, 234, 254, 0.35);
}

.slide-body tr:hover td {
  background: rgba(147, 197, 253, 0.2);
}

.slide--dense .slide-body table {
  font-size: var(--font-size-xs);
}

.slide--dense .slide-body table th,
.slide--dense .slide-body table td {
  padding: var(--space-01) var(--space-02);
  line-height: 1.35;
}

.slide--dense .slide-body table th {
  font-size: 0.65rem;
  letter-spacing: 0.04em;
}

.slide--dense h2.ob-heading {
  margin-bottom: var(--space-04);
}

.slide--dense .ob-slide-header {
  margin-bottom: var(--space-03);
}

/* Legacy-Klasse: Diagramm außerhalb slide-body — weiterhin nutzbar */
.diagram-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-03) 0;
  min-height: 0;
}

.diagram-container img,
.diagram-container svg {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  filter: drop-shadow(0 8px 24px rgba(14, 100, 200, 0.08));
}

.slide--diagram .slide-body > .diagram-container {
  flex: 1;
  min-height: 0;
}