/* Gemeinsame Mechanik fuer alle Kapitel-Slideshows (Website/Slideshows/<episode>/index.html).
   Nutzt die Farbvariablen aus css/landing.css - eigenes Design-System bewusst vermieden.

   Kein Scrollen, kein Letterboxing: .slideshow-stage nimmt IMMER die volle Breite und Hoehe des
   Viewports ein (width/height:100%, egal welches Seitenverhaeltnis das Fenster hat - anders als
   eine feste 16:9-Leinwand bleibt so nie ungenutzter Rand oben/unten oder seitlich). Der Content
   selbst skaliert stattdessen ueber die CSS-Variable --stage-scale (von slideshow.js anhand der
   kleineren Viewport-Dimension berechnet, Referenz 900px = Stage-Hoehe bei 1600x900) - dadurch
   bleiben Text/Bilder proportional zueinander und werden nicht verzerrt, wachsen/schrumpfen aber
   gleichmaessig mit jeder Fenstergroesse und jedem Seitenverhaeltnis mit. */

.slideshow-viewport {
 position: relative;
 height: calc(100vh - 60px - 90px);
 margin-top: 60px;
 margin-bottom: 90px;
 display: flex;
 align-items: center;
 justify-content: center;
 overflow-x: hidden;
 overflow-y: auto;
}

.slideshow-stage {
 position: relative;
 width: 100%;
 height: 100%;
 --stage-scale: 1;
}

.slide {
 position: absolute;
 inset: 0;
 display: none;
 flex-direction: column;
 justify-content: center;
 padding: calc(56px * var(--stage-scale)) calc(72px * var(--stage-scale));
 opacity: 0;
 overflow: hidden;
}

 .slide.active {
  display: flex;
  opacity: 1;
 }

.slide.slide-center {
 align-items: center;
 justify-content: center;
 text-align: center;
}

/* Reveal-Animation: jedes Element mit r1..r8 blendet gestaffelt ein, sobald die Folie aktiv wird.
   Verhindert, dass beim Folienwechsel alle Infos gleichzeitig erscheinen. */
.slide .reveal {
 opacity: 0;
 transform: translateY(18px);
}

 .slide.active .reveal {
  animation: slideReveal .55s cubic-bezier(.2,.7,.3,1) forwards;
 }

.reveal.r1 { animation-delay: .05s; }
.reveal.r2 { animation-delay: .2s; }
.reveal.r3 { animation-delay: .35s; }
.reveal.r4 { animation-delay: .5s; }
.reveal.r5 { animation-delay: .65s; }
.reveal.r6 { animation-delay: .8s; }
.reveal.r7 { animation-delay: .95s; }
.reveal.r8 { animation-delay: 1.1s; }

@keyframes slideReveal {
 from { opacity: 0; transform: translateY(18px); }
 to   { opacity: 1; transform: translateY(0); }
}

/* Callout-Badges sind absolut positioniert und zentrieren sich per translate(-50%,-50%) auf ihrem
   Punkt - die normale .reveal-Verschiebung wuerde diese Zentrierung ueberschreiben. Eigene,
   Positions-sichere "Pop-in"-Animation (Skalierung statt Verschiebung). */
.slide-callout.reveal {
 opacity: 0;
 transform: translate(-50%, -50%) scale(.4);
}

 .slide.active .slide-callout.reveal {
  animation: calloutReveal .45s cubic-bezier(.34,1.56,.64,1) forwards;
 }

@keyframes calloutReveal {
 from { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
 to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.slide-eyebrow {
 color: var(--steel);
 font-weight: 700;
 font-size: calc(15px * var(--stage-scale));
 text-transform: uppercase;
 letter-spacing: .06em;
 margin-bottom: calc(4px * var(--stage-scale));
 text-align: center;
}

.slide-title {
 font-size: calc(30px * var(--stage-scale));
 font-weight: 800;
 letter-spacing: -.01em;
 margin-bottom: calc(12px * var(--stage-scale));
 line-height: 1.15;
 text-align: center;
}

/* Groessere Titel-Varianten fuer Center-Folien (Kapitel-Einstieg/Abschluss) - ersetzen die
   frueheren Inline-Styles (style="font-size:56px"/"48px"), damit auch diese mit --stage-scale
   mitskalieren statt bei jeder Fenstergroesse gleich gross zu bleiben. */
.slide-title-hero { font-size: calc(56px * var(--stage-scale)); }
.slide-title-medium { font-size: calc(52px * var(--stage-scale)); }
.slide-title-large { font-size: calc(48px * var(--stage-scale)); }

.slide-body p {
 color: var(--muted);
 font-size: calc(16px * var(--stage-scale));
 line-height: 1.4;
 margin-bottom: calc(8px * var(--stage-scale));
}

.slide-hook {
 font-size: calc(18px * var(--stage-scale));
 font-weight: 700;
 margin-bottom: calc(8px * var(--stage-scale));
}

/* Vertikale Folie: Titel oben (siehe .slide-eyebrow/.slide-title), darunter Screenshot,
   zuunterst der erklaerende Text - so liest man Bild und Beschreibung in derselben Reihenfolge
   wie beim eigentlichen Vorfuehren der App. Screenshot bekommt bewusst den meisten Platz
   (bis zu 90% der Folienbreite), Titel und Text bleiben kompakt, damit alles ohne Scrollen in
   die 900px hohe Leinwand passt. Feste 80px-Abstaende (statt automatischer Zentrierung im
   Rest-Raum) sorgen fuer einen gleichbleibenden Rhythmus Titel -> Bild -> Text. */
.slide-stack {
 min-height: 0;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: calc(10px * var(--stage-scale));
 margin-top: calc(80px * var(--stage-scale));
}

/* max-width bleibt bewusst fixe px (nicht skaliert) - das ist eine Lesbarkeits-Obergrenze fuer
   die Zeilenlaenge, die auch auf sehr grossen Bildschirmen nicht ueberschritten werden soll. */
.slide-text {
 width: 100%;
 max-width: 1000px;
 margin: calc(80px * var(--stage-scale)) auto 0;
 text-align: center;
 flex-shrink: 0;
}

 .slide-text .slide-body {
  display: flex;
  gap: calc(32px * var(--stage-scale));
  justify-content: center;
  flex-wrap: wrap;
 }

 .slide-text .slide-body p {
  flex: 1 1 320px;
  max-width: 460px;
  text-align: left;
  margin-bottom: 0;
 }

/* Screenshot + nummerierte Callout-Badges (dieselben fx/fy-Positionen wie in der PowerPoint).
   display:inline-block laesst den Wrapper exakt auf die tatsaechlich gerenderte Bildgroesse
   schrumpfen (statt auf volle Breite) - nur so bleiben die prozentual positionierten Badges
   praezise auf dem Bild, egal ob Breite oder Hoehe die begrenzende Dimension ist. */
.slide-shot-wrap {
 position: relative;
 display: inline-block;
 max-width: 90%;
 flex-shrink: 1;
 min-height: 0;
}

 .slide-shot-wrap img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(380px * var(--stage-scale));
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: 0 24px 60px -30px rgba(0,0,0,.35);
 }

.slide-callout {
 position: absolute;
 width: calc(32px * var(--stage-scale));
 height: calc(32px * var(--stage-scale));
 border-radius: 50%;
 background: var(--steel);
 color: #fff;
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: 800;
 font-size: calc(15px * var(--stage-scale));
 transform: translate(-50%, -50%);
 box-shadow: 0 6px 16px -4px rgba(37,99,235,.6);
 border: 2px solid #fff;
}

.slide-legend {
 margin-top: calc(10px * var(--stage-scale));
 display: flex;
 flex-direction: column;
 gap: calc(8px * var(--stage-scale));
}

.slide-legend-row {
 flex-direction: row;
 flex-wrap: wrap;
 justify-content: center;
 gap: calc(8px * var(--stage-scale)) calc(24px * var(--stage-scale));
 max-width: 100%;
}

.slide-legend-item {
 display: flex;
 align-items: center;
 gap: calc(9px * var(--stage-scale));
 font-size: calc(16px * var(--stage-scale));
 color: var(--muted);
 white-space: nowrap;
}

.slide-legend-badge {
 width: calc(24px * var(--stage-scale));
 height: calc(24px * var(--stage-scale));
 border-radius: 50%;
 background: var(--steel);
 color: #fff;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 font-size: calc(13px * var(--stage-scale));
 font-weight: 800;
 flex-shrink: 0;
}

/* Navigation: Pfeile + Punkte, fixiert am unteren Rand - bewusst AUSSERHALB von .slideshow-stage,
   damit sie nicht mitskaliert und immer bequem bedienbar bleibt. */
.slide-nav {
 position: fixed;
 bottom: 22px;
 left: 0;
 right: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 20px;
 z-index: 50;
}

.slide-nav-btn {
 width: 46px;
 height: 46px;
 border-radius: 50%;
 border: 1px solid var(--border);
 background: var(--surface);
 color: var(--parchment);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.2rem;
 cursor: pointer;
 transition: border-color .15s, transform .15s, background .15s;
}

 .slide-nav-btn:hover:not(:disabled) {
  border-color: var(--steel);
  transform: translateY(-2px);
 }

 .slide-nav-btn:disabled {
  opacity: .35;
  cursor: default;
 }

 .slide-nav-btn.is-speaking {
  border-color: var(--steel);
  color: var(--steel);
  background: rgba(37,99,235,.1);
 }

.slide-dots {
 display: flex;
 align-items: center;
 gap: 8px;
}

.slide-dot {
 width: 9px;
 height: 9px;
 border-radius: 50%;
 background: var(--border);
 border: none;
 padding: 0;
 cursor: pointer;
 transition: background .15s, transform .15s;
}

 .slide-dot.active {
  background: var(--steel);
  transform: scale(1.3);
 }

.slide-counter {
 position: fixed;
 top: 74px;
 right: max(24px, 5vw);
 font-size: .85rem;
 color: var(--muted);
 z-index: 50;
}