/* Erklärwerk: Grundlagen-Seite und Präsentation.
   Alle Farben über die Tokens von style.css; die einzige feste Farbe steht bei
   .concept-figure .media-frame und ist dort begründet. */

/* --- Übersicht ---------------------------------------------------------- */

.concept-index {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
  gap: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.concept-index li {
  border-bottom: 1px solid var(--rule);
}

.concept-index a {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 0.15rem 1rem;
  align-items: baseline;
  padding: 1rem 1rem 1rem 0;
  text-decoration: none;
}

.concept-index a:hover .concept-index-title {
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.22em;
}

.concept-index a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.concept-index-number {
  grid-row: span 2;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.concept-index-title {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.25;
}

.concept-index-group {
  grid-column: 2;
  color: var(--copy);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.index-total {
  margin-top: 1.5rem;
  font-size: 0.9rem;
}

/* --- Konzeptabschnitte --------------------------------------------------- */

/* Dreizehn Abschnitte hintereinander: der Abstand von .section (bis 7,5 rem
   oben und unten) ergäbe eine Seite, die überwiegend aus Leerraum besteht.
   Die Trennlinie übernimmt, was dort der Abstand leistet. */
.section.concept {
  padding-block: clamp(3rem, 5.5vw, 5rem);
  border-top: 1px solid var(--rule);
}

.concept-head {
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

/* Keine Breitenbegrenzung: Der Nutzer will Überschriften ohne erzwungenen
   Zeilenumbruch (19.09.2026). Ein Umbruch bleibt nur, wo der Bildschirm
   schmaler ist als die Zeile. */
.concept-head h2 {
  font-size: clamp(1.9rem, 3vw, 2.6rem);
}

.concept-figure {
  margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
}

/* Die Erklärgrafiken tragen feste dunkle Tinte (#17302D) und einen
   transparenten Hintergrund. Auf den beiden dunklen Themen (Nachtlabor,
   Lichtpause-Dunkelvariante) wäre die Schrift sonst unlesbar. Deshalb in allen
   vier Themen dieselbe helle Fläche wie bei .benchmark-data-figure. */
.concept-figure .media-frame {
  border: 1px solid color-mix(in srgb, var(--teal) 24%, transparent);
  border-radius: 1.25rem;
  background: #f4f2e8;
}

.concept-figure .media-frame img {
  width: 100%;
  height: auto;
  aspect-ratio: 1600 / 900;
  object-fit: contain;
}

.concept-figure figcaption {
  max-width: 64rem;
}

/* Der Konzepttext ist derselbe Text, der vorgelesen wird (Schema 1.3.0); er
   kann mehrere Absätze haben, deshalb das Raster mit Abstand. */
.concept-copy {
  display: grid;
  gap: 1rem;
  max-width: 52rem;
  font-size: 1.05rem;
  line-height: 1.7;
}

/* Zusatzfolie eines Konzepts: derselbe Aufbau (Grafik, Text, Ton, Belege)
   als zweiter Block im Abschnitt, durch eine Linie vom ersten getrennt. Die
   Überschrift bleibt eine Stufe unter der des Konzepts, weil sie dasselbe
   Konzept fortsetzt. */
.concept-part {
  margin-top: clamp(2.75rem, 5vw, 4.5rem);
  padding-top: clamp(1.75rem, 3vw, 2.75rem);
  border-top: 1px solid var(--rule);
}

.concept-part-head {
  margin-bottom: clamp(1.5rem, 2.5vw, 2.25rem);
}

.concept-part-head h3 {
  font-size: clamp(1.45rem, 2.4vw, 2.2rem);
  line-height: 1.15;
}

/* --- Audio-Leiste und Transkript ---------------------------------------- */

.audio-block {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  border: 1px solid var(--rule);
  background: var(--paper-strong);
}

.audio-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  padding: 0.9rem 1.15rem;
}

.audio-bar audio {
  flex: 1 1 18rem;
  min-width: 0;
  max-width: 34rem;
  height: 2.5rem;
}

.audio-duration {
  color: var(--copy);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.audio-pending {
  color: var(--copy);
  font-size: 0.85rem;
}

.audio-block .transcript {
  border-top: 1px solid var(--rule);
}

.audio-block .transcript > summary {
  padding: 0.7rem 1.15rem;
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.audio-block .transcript > summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

.transcript-body {
  display: grid;
  gap: 0.9rem;
  max-width: 52rem;
  padding: 0 1.15rem 1.25rem;
}

.section .transcript-body p {
  font-size: 0.95rem;
  line-height: 1.7;
}

/* --- Belege -------------------------------------------------------------- */

.evidence-title {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  margin-bottom: 0.75rem;
  color: var(--accent);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}

.evidence-list {
  display: grid;
  gap: 0.45rem;
  max-width: 52rem;
  list-style: none;
  border-top: 1px solid var(--rule);
  padding-top: 0.75rem;
}

.section .evidence-list li {
  font-size: 0.9rem;
  line-height: 1.55;
}

.evidence-list a {
  color: var(--ink);
}

/* Die Detailansicht aus js/main.js hängt am body, nicht im main; sie lässt
   sich deshalb nicht über eine Elternklasse ansprechen. Diese Datei wird nur
   auf den Erklärwerk-Seiten geladen, die Regeln gelten damit genau dort.

   Zwei Eingriffe: die helle Fläche, weil die Grafiken feste dunkle Tinte auf
   transparentem Grund tragen und der Dialog dunkel ist. Und das Einpassen:
   style.css zwingt das Bild mit `min-width: 100%; min-height: 100%` über die
   Fensterkanten hinaus, damit man sich in Kartenbilder hineinschieben kann.
   Eine Zeichnung im Format 16:9 soll dagegen ganz zu sehen sein — gemessen
   18.09.2026: 1600 × 900 in einem Rahmen von 1227 × 798 verlangte sonst
   Schieben in beiden Richtungen, auf dem Telefon über 1210 Pixel. */
.image-lightbox .lightbox-image-wrap {
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 1rem;
}

.image-lightbox .lightbox-image-wrap img {
  width: auto;
  min-width: 0;
  max-width: 100%;
  height: auto;
  min-height: 0;
  max-height: 100%;
  background: #f4f2e8;
  object-fit: contain;
}

/* --- Abschluss ----------------------------------------------------------- */

.next-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.next-steps li {
  padding: 1.5rem 1.5rem 1.5rem 0;
  border-bottom: 1px solid var(--rule);
}

.next-steps h3 {
  margin-bottom: 0.5rem;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
}

.section .next-steps p {
  font-size: 0.92rem;
}

/* --- Schmale Anzeigen ---------------------------------------------------- */

@media (max-width: 46rem) {
  .concept-index a {
    grid-template-columns: 2.5rem minmax(0, 1fr);
  }

  .concept-figure .media-frame {
    border-radius: 0.75rem;
  }

  .audio-bar audio {
    flex-basis: 100%;
  }
}

/* --- Druck --------------------------------------------------------------- */

@media print {
  /* style.css setzt im Druck nur auf den direkten Kindern von main schwarze
     Schrift; `.section p { color: var(--copy) }` ist spezifischer und gewann,
     sodass die Lesetexte als helles Grau auf Weiß druckten. Über die Tokens
     erbt jedes Kind die Druckfarben. */
  .page-hero,
  .section {
    background: #fff !important;
    color: #000 !important;
    --copy: #1a1a1a;
    --accent: #444;
    --rule: #bbb;
  }

  /* Der Player druckt als leerer Kasten; das Transkript trägt denselben Text
     und wird deshalb aufgeklappt gedruckt. */
  .audio-bar,
  .concept-index,
  .index-total {
    display: none !important;
  }

  .audio-block {
    border: 0;
  }

  /* Ein geschlossenes details druckt nur seine Zusammenfassung. Chrome blendet
     den Inhalt über ::details-content und content-visibility aus; das ist der
     vorgesehene Weg, ihn für den Druck wieder sichtbar zu machen. */
  .audio-block .transcript::details-content {
    content-visibility: visible;
    block-size: auto;
  }

  .audio-block .transcript > summary {
    padding-left: 0;
    color: #000 !important;
  }

  .transcript-body {
    padding-left: 0;
  }

  .audio-block .transcript[open] > summary::marker,
  .audio-block .transcript > summary::marker {
    content: "";
  }

  .section.concept {
    break-before: page;
    padding-block: 0;
  }

  .concept-figure,
  .audio-block {
    break-inside: avoid;
  }
}

/* --- Präsentation -------------------------------------------------------- */
/* Die Folienregeln (Vollbild, Folientext, Steuerleiste, Handout-Druck) stehen
   in dieser Datei, weil Präsentation und Grundlagen dieselben Bausteine zeigen
   — Grafik, Audio-Block, Transkript.

   Zwei Ansichten aus einem HTML: Ohne JavaScript bleiben alle fünfzehn Folien
   untereinander stehen (Handout). Erst `js/presentation.js` setzt am body
   `data-presentation="ready"`; von da an ist genau eine Folie sichtbar. Jede
   Regel des Vortragsmodus hängt deshalb an diesem Attribut, keine an `.js`. */

.slide {
  padding-block: clamp(2rem, 4vw, 3.5rem);
  border-top: 1px solid var(--rule);
}

.slide:first-child {
  border-top: 0;
}

.slide h1,
.slide h2 {
  font-size: clamp(1.9rem, 3vw, 2.6rem);
}

.slide-lede {
  max-width: 46rem;
  margin-top: 1rem;
  font-size: 1.05rem;
}

.slide-figure {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

/* Dieselbe helle Fläche wie auf der Grundlagen-Seite: Die Zeichnungen tragen
   feste dunkle Tinte auf transparentem Grund und wären auf den dunklen Themen
   sonst unlesbar. */
.slide-figure .media-frame {
  border: 1px solid color-mix(in srgb, var(--teal) 24%, transparent);
  border-radius: 1.25rem;
  background: #f4f2e8;
}

.slide-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1600 / 900;
  object-fit: contain;
}

/* Der Folientext steht im HTML mit `hidden`, damit der Vortrag ohne Umschalten
   startet. Im Handout und im Druck gehört er zum Blatt; `display` überstimmt
   das Attribut, und weil die Sichtbarkeit aus dem Stil kommt, nimmt auch der
   Screenreader ihn dann wieder auf. */
body:not([data-presentation="ready"]) .slide-text[hidden] {
  display: block;
}

.slide-text {
  max-width: 46rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  border-left: 3px solid var(--accent);
  padding-left: 1.15rem;
}

.slide-text h3 {
  margin-bottom: 0.6rem;
  color: var(--accent);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.slide-text ul {
  display: grid;
  gap: 0.5rem;
  list-style: none;
}

.slide-text li {
  font-size: 1.05rem;
  line-height: 1.5;
}

.slide-text li::before {
  margin-right: 0.6rem;
  color: var(--accent);
  content: "—";
}

/* Der Hinweis erscheint, wenn eine Aufnahme fehlt oder der Browser die
   Wiedergabe verweigert; das Skript nimmt dafür `hidden` weg. */
.slide-alert {
  margin-top: 1.25rem;
  border-left: 3px solid var(--accent);
  padding-left: 1.15rem;
  font-weight: 700;
}

.deck-hint {
  margin-top: 1rem;
  font-size: 0.9rem;
}

.deck-start {
  margin-top: 2rem;
}

.deck-ways {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  list-style: none;
  border-top: 1px solid var(--rule);
}

.deck-ways li {
  padding: 1.25rem 1.5rem 1.25rem 0;
  border-bottom: 1px solid var(--rule);
}

.deck-ways h3 {
  margin-bottom: 0.4rem;
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
}

.section .deck-ways p {
  font-size: 0.92rem;
}

.deck-roles {
  max-width: 46rem;
  margin-top: 1.75rem;
}

.deck-updated {
  margin-top: 1rem;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

/* --- Steuerleiste -------------------------------------------------------- */

/* Ohne JavaScript bedienen die Knöpfe nichts; sie bleiben dann verborgen,
   statt als tote Schaltflächen im Handout zu stehen. Dieselbe Begründung gilt
   für den Startknopf und den Tastaturhinweis auf der Titelfolie. */
.deck-controls,
body:not([data-presentation="ready"]) .deck-start,
body:not([data-presentation="ready"]) .deck-hint {
  display: none;
}

body[data-presentation="ready"] .deck-controls {
  position: sticky;
  z-index: 4;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 0.75rem;
  align-items: center;
  border-top: 1px solid var(--rule);
  background: var(--paper-strong);
  padding: 0.75rem clamp(1rem, 4vw, 2rem);
}

.deck-button {
  min-height: 2.75rem;
  border: 1px solid var(--rule);
  background: transparent;
  padding: 0.6rem 1.05rem;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
}

.deck-button:hover {
  border-color: var(--accent);
}

.deck-button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.deck-button-primary {
  border-color: var(--teal-bright);
  background: var(--teal-bright);
  color: var(--night);
}

.deck-button-primary:hover {
  border-color: var(--night-ink);
  background: var(--night-ink);
  color: var(--paper);
}

.deck-counter {
  margin-left: auto;
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.deck-progress {
  width: 8rem;
  height: 0.4rem;
  border: 1px solid var(--rule);
  background: transparent;
  /* Firefox und Chrome zeichnen `progress` mit eigenen Pseudoelementen; ohne
     die Appearance-Rücknahme bliebe die Systemfarbe stehen, die auf dem
     dunklen Thema nicht zu sehen ist. */
  appearance: none;
}

.deck-progress::-webkit-progress-bar {
  background: transparent;
}

.deck-progress::-webkit-progress-value {
  background: var(--accent);
}

.deck-progress::-moz-progress-bar {
  background: var(--accent);
}

/* Der Titelwechsel wird angesagt, nicht gezeigt: Er steht schon als
   Überschrift auf der Folie. */
.deck-live {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Vortragsmodus ------------------------------------------------------- */

body[data-presentation="ready"] .slide {
  display: none;
}

body[data-presentation="ready"] .slide.is-active {
  display: block;
  border-top: 0;
  min-height: calc(100vh - 16rem);
}

/* Die Einblendanimation von style.css verbirgt jeden Block, bis der
   IntersectionObserver ihn erreicht hat. Auf einer Folie, die eben erst von
   display:none kommt, hieße das: Der Audio-Block blitzt bei jedem Wechsel auf.
   Im Vortragsmodus zählt der Beobachter deshalb nicht. */
body[data-presentation="ready"] .slide [data-reveal] {
  transform: none;
  opacity: 1;
  transition: none;
}

/* Folienwechsel: Die neue Folie gleitet ein Stück herein, die verlassene
   gleitet in die Gegenrichtung hinaus und verblasst dabei. Die Richtung setzt
   js/presentation.js am Deck (`data-deck-direction`); vorwärts kommt die
   Folie von rechts. Die verlassene Folie liegt absolut über der Deckfläche,
   damit sie den Platz der neuen nicht verschiebt. Die Sekunde steht auch als
   TRANSITION im Skript, das die Klasse `is-leaving` danach entfernt und im
   Vortrag den Ton der neuen Folie so lange zurückhält. */
.deck {
  position: relative;
}

body[data-presentation="ready"] .deck {
  --deck-shift: 2.5rem;
  overflow-x: clip;
}

body[data-presentation="ready"] .deck[data-deck-direction="backward"] {
  --deck-shift: -2.5rem;
}

body[data-presentation="ready"] .slide.is-active {
  /* Die neue Folie liegt über der verlassenen: Absolut gesetzte Elemente
     malen sonst über ihre Nachbarn, und die alte Folie stünde während des
     Wechsels vor der neuen. */
  position: relative;
  z-index: 1;
  animation: deck-slide-in 1000ms var(--ease) both;
}

body[data-presentation="ready"] .slide.is-leaving {
  display: block;
  position: absolute;
  inset: 0 0 auto 0;
  border-top: 0;
  pointer-events: none;
  animation: deck-slide-out 1000ms var(--ease) both;
}

@keyframes deck-slide-in {
  from { opacity: 0; transform: translateX(var(--deck-shift)); }
  to { opacity: 1; transform: none; }
}

@keyframes deck-slide-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateX(calc(var(--deck-shift) * -1)); }
}

/* Die Sprungauswahl sitzt in der Steuerleiste zwischen den Knöpfen und dem
   Zähler; sie ist ein natives select im Kleid der Knöpfe. Die Breite ist
   begrenzt, damit ein langer Folientitel die Leiste nicht sprengt — der
   Browser kürzt ihn mit Auslassungspunkten. */
.deck-select {
  /* Wächst bis 22rem, schrumpft bis 10rem: Bei 390 px teilt sie sich so die
     Zeile mit Zähler und Fortschrittsbalken (gemessen 19.09.2026: Leiste
     208 px hoch mit eigener Zeile, 175 px geteilt). */
  flex: 1 1 10rem;
  min-width: 0;
  min-height: 2.75rem;
  max-width: min(22rem, 100%);
  border: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  padding: 0.6rem 0.75rem;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.86rem;
  font-weight: 700;
  text-overflow: ellipsis;
  cursor: pointer;
}

.deck-select:hover {
  border-color: var(--accent);
}

.deck-select:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Im Vortrag steht die Grafik neben Titel, Folientext und Player auf einem
   Bildschirm; ohne Höhengrenze schöbe sie alles andere unter die Kante.
   `object-fit: contain` füllt den Rahmen mit der hellen Fläche auf. */
body[data-presentation="ready"] .slide-figure .media-frame {
  height: min(52vh, 56vw);
}

body[data-presentation="ready"] .slide-figure img {
  height: 100%;
  aspect-ratio: auto;
}

/* Im Vortrag blättert der Klick auf die rechte oder linke Bildhälfte. Die
   Grafik füllt den halben Bildschirm; bliebe sie anklickbar, öffnete sie die
   Detailansicht aus js/main.js, und zum Blättern blieben nur die Ränder —
   gemessen 18.09.2026: zweimal Klick bei x=1200 ohne Folienwechsel. Über die
   Tastatur bleibt die Detailansicht erreichbar, der Rahmen behält Fokus und
   Enter. Im Handout gilt die Regel nicht. */
body[data-presentation="ready"] .slide-figure .media-frame {
  pointer-events: none;
  /* js/main.js macht jeden Lightbox-Rahmen zum Knopf, css/style.css setzt dazu
     `cursor: zoom-in`. Im Vortrag tut der Mausklick dort nichts anderes als
     überall sonst auf der Folie: er blättert. Der Zeiger sagt das auch. */
  cursor: default;
}

/* Vollbild liegt auf dem Deck, nicht auf dem Dokument: Kopf- und Fußzeile der
   Website gehören nicht in den Vortrag. Ohne eigenen Hintergrund zeichnete der
   Browser die Folie auf Schwarz. */
.deck:fullscreen {
  overflow-y: auto;
  background: var(--paper);
}

/* --- Bühne im Vollbild ----------------------------------------------------
   Im Vollbild ist die Grafik der Kern: Titel und Dachzeile rücken zusammen,
   die Grafik nimmt die ganze verbleibende Höhe, und Player, Transkript und
   Steuerung werden zur Schublade am unteren Rand (Nutzer, 20.09.2026: „die
   Grafiken sind im Vollbild viel zu klein“). Vorher galt die Fensterregel
   `height: min(52vh, 56vw)` auch dort, und auf 1920 × 1080 blieb die
   Zeichnung bei 562 px Höhe.

   Die Regeln hängen an `data-deck-fullscreen`, das js/presentation.js bei
   jedem fullscreenchange setzt — `:fullscreen` allein ließe sich in einer
   Messung ohne Nutzergeste nicht auslösen. Die Griffzeile bleibt immer
   sichtbar (Start/Pause, Umschalter); Reihe und Audio-Block sind bei
   `data-deck-tray="closed"` nach unten hinausgeschoben. Der Audio-Block der
   aktiven Folie ist fest über der Steuerreihe verankert und wächst mit dem
   Transkript nach oben, höchstens bis zur halben Höhe. */
.deck[data-deck-fullscreen="true"] {
  --tray-handle: 3.4rem;
  --tray-row: 3.9rem;
}

.deck[data-deck-fullscreen="true"] .slide.is-active {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-height: 100vh;
  height: 100vh;
  padding: 0.9rem clamp(1rem, 3vw, 2.5rem) calc(var(--tray-handle) + 0.75rem);
  border-top: 0;
}

.deck[data-deck-fullscreen="true"] .slide.is-active .slide-shell {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  max-width: none;
  padding: 0;
}

.deck[data-deck-fullscreen="true"] .slide.is-active h1,
.deck[data-deck-fullscreen="true"] .slide.is-active h2 {
  max-width: none;
  margin-top: 0.2rem;
  font-size: clamp(1.3rem, 2.2vw, 2rem);
}

.deck[data-deck-fullscreen="true"] .slide.is-active .slide-lede {
  margin-top: 0.4rem;
}

.deck[data-deck-fullscreen="true"] .slide.is-active .slide-figure {
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  min-height: 0;
  margin-top: 0.75rem;
}

.deck[data-deck-fullscreen="true"] .slide.is-active .slide-figure .media-frame {
  box-sizing: border-box;
  width: auto;
  max-width: 100%;
  height: 100%;
  aspect-ratio: 1600 / 900;
  margin-inline: auto;
}

/* Der Folienwechsel gleitet im Fenster mit `transform`; ein transformiertes
   Element wird aber zum Bezugsrahmen für `position: fixed` seiner Kinder, und
   der Audio-Block der Folie säße dann an der Folie statt am Bildschirmrand
   (gemessen 20.09.2026: 39 px über der Steuerreihe). Im Vollbild blendet die
   Folie deshalb nur, ohne Verschiebung. */
.deck[data-deck-fullscreen="true"] .slide.is-active {
  animation-name: deck-fade-in;
}

.deck[data-deck-fullscreen="true"] .slide.is-leaving {
  animation-name: deck-fade-out;
}

@keyframes deck-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes deck-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

.deck[data-deck-fullscreen="true"] .slide.is-active .slide-figure img {
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
}

.deck[data-deck-fullscreen="true"] .slide.is-active .slide-text {
  flex: 0 0 auto;
  margin-top: 0.75rem;
}

.deck[data-deck-fullscreen="true"] .slide.is-active .slide-text li {
  font-size: 0.95rem;
}

/* Eröffnung und Schluss haben keine Grafik; ihr Inhalt darf scrollen. */
.deck[data-deck-fullscreen="true"] .slide-opening.is-active,
.deck[data-deck-fullscreen="true"] .slide-closing.is-active {
  height: auto;
  min-height: 100vh;
}

/* Die Schublade: Steuerung fest unten, Griffzeile oben drin. */
.deck[data-deck-fullscreen="true"] .deck-controls {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 6;
  display: block;
  padding: 0;
  transition: transform 260ms var(--ease);
}

.deck[data-deck-fullscreen="true"][data-deck-tray="closed"] .deck-controls {
  transform: translateY(var(--tray-row));
}

.deck-tray-handle {
  display: none;
}

.deck[data-deck-fullscreen="true"] .deck-tray-handle {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  align-items: center;
  height: var(--tray-handle);
  padding: 0 1rem;
}

.deck[data-deck-fullscreen="true"] .deck-tray-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.6rem 0.75rem;
  align-items: center;
  height: var(--tray-row);
  border-top: 1px solid var(--rule);
  padding: 0 clamp(1rem, 3vw, 2rem);
  overflow-x: auto;
}

.deck[data-deck-fullscreen="true"] .deck-tray-row .deck-button,
.deck[data-deck-fullscreen="true"] .deck-tray-handle .deck-button {
  min-height: 2.4rem;
  padding: 0.4rem 0.9rem;
  white-space: nowrap;
}

.deck[data-deck-fullscreen="true"] .deck-tray-row .deck-progress {
  min-width: 8rem;
}

/* Start/Pause steht im Vollbild in der Griffzeile; die Reihe zeigt den Knopf
   nicht noch einmal. */
.deck[data-deck-fullscreen="true"] .deck-tray-row [data-deck="play"] {
  display: none;
}

.deck[data-deck-fullscreen="true"] .slide.is-active .audio-block {
  position: fixed;
  right: 0;
  bottom: calc(var(--tray-handle) + var(--tray-row));
  left: 0;
  z-index: 5;
  max-height: 50vh;
  margin: 0;
  border-width: 1px 0 0;
  overflow-y: auto;
  transition: transform 260ms var(--ease), visibility 260ms;
}

.deck[data-deck-fullscreen="true"][data-deck-tray="closed"] .slide.is-active .audio-block {
  visibility: hidden;
  transform: translateY(calc(100% + var(--tray-handle) + var(--tray-row)));
}

@media (prefers-reduced-motion: reduce) {
  .deck[data-deck-fullscreen="true"] .deck-controls,
  .deck[data-deck-fullscreen="true"] .slide.is-active .audio-block {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-presentation="ready"] .slide.is-active {
    animation: none;
  }
  body[data-presentation="ready"] .slide.is-leaving {
    display: none;
  }
}

/* --- Niedrige Fenster im Vortrag -----------------------------------------
   Bei 1280 × 720, dem kleinsten Beamer-Maß, blieben von 720 px nach Kopfzeile
   der Site, Titel, Abständen und Audio-Leiste keine 330 px für das Bild, und
   41 der 59 Folien endeten unter der Fensterkante (gemessen 19.09.2026 mit
   tools/audit_browser.mjs: Unterkante der Schale gegen die Fensterhöhe).
   Unter 820 px Höhe rücken Titel, Abstände und Leiste zusammen. Der
   Platzhalter „Audio folgt“ entfällt, das Transkript bleibt aufklappbar; die
   Rahmen der Kapitelbilder legen sich um das Bild, statt es in 16:9 zu
   letterboxen — ein Diagramm im Seitenverhältnis 1,42 verlor dort ein
   Drittel seiner Höhe an leere Fläche. */
@media (max-height: 820px) {
  body[data-presentation="ready"] .slide.is-active {
    min-height: 0;
    padding-block: 0.75rem 0.5rem;
  }
  body[data-presentation="ready"] .slide h1,
  body[data-presentation="ready"] .slide h2 {
    max-width: none;
    font-size: clamp(1.4rem, 2.4vw, 2rem);
  }
  body[data-presentation="ready"] .slide-lede {
    margin-top: 0.5rem;
    font-size: 0.95rem;
  }
  body[data-presentation="ready"] .slide-figure,
  body[data-presentation="ready"] .slide-body {
    margin-top: 0.75rem;
  }
  body[data-presentation="ready"] .slide-figure .media-frame {
    height: min(46vh, 56vw);
  }
  body[data-presentation="ready"] .slide-body-media .slide-figure .media-frame,
  body[data-presentation="ready"] .slide-body-split .slide-figure .media-frame,
  body[data-presentation="ready"] .slide-chapter .slide-figure .media-frame {
    width: fit-content;
    max-width: 100%;
    height: min(38vh, 44vw);
    margin-inline: auto;
    aspect-ratio: auto;
  }
  body[data-presentation="ready"] .slide-body-media .slide-figure img,
  body[data-presentation="ready"] .slide-body-split .slide-figure img,
  body[data-presentation="ready"] .slide-chapter .slide-figure img {
    width: auto;
    height: 100%;
    max-height: none;
  }
  body[data-presentation="ready"] .slide-figure figcaption {
    margin-top: 0.3rem;
    font-size: 0.72rem;
  }
  body[data-presentation="ready"] .slide-footnote {
    margin-top: 0.5rem;
    font-size: 0.78rem;
  }
  body[data-presentation="ready"] .slide-evidence {
    margin-top: 0.4rem;
    font-size: 0.76rem;
  }
  body[data-presentation="ready"] .audio-block {
    margin-top: 0.75rem;
  }
  body[data-presentation="ready"] .audio-bar:has(.audio-pending) {
    display: none;
  }
  body[data-presentation="ready"] .audio-block .transcript {
    border-top: 0;
  }
  body[data-presentation="ready"] .audio-block .transcript > summary {
    padding: 0.4rem 1rem;
  }
  body[data-presentation="ready"] .slide-table table,
  body[data-presentation="ready"] .slide-body-table .slide-table table {
    font-size: 0.8rem;
  }
  body[data-presentation="ready"] .slide-table th,
  body[data-presentation="ready"] .slide-table td {
    padding: 0.25rem 0.6rem 0.25rem 0;
  }
}

@media (max-width: 46rem) {
  .slide-figure .media-frame {
    border-radius: 0.75rem;
  }

  body[data-presentation="ready"] .slide-figure .media-frame {
    height: auto;
  }

  body[data-presentation="ready"] .slide-figure img {
    height: auto;
    aspect-ratio: 1600 / 900;
  }

  .deck-counter {
    margin-left: 0;
  }
}

/* --- Präsentation im Druck ----------------------------------------------- */

@media print {
  /* Der Vortragsmodus zeigt eine Folie; gedruckt werden alle fünfzehn, jede
     auf einem Blatt. Ohne diese Rücknahme käme ein einzelnes Blatt aus dem
     Drucker, weil `display: none` an allen übrigen Folien hängt. */
  body[data-presentation="ready"] .slide,
  .slide {
    display: block;
    animation: none;
    border-top: 0;
    padding-block: 0;
    break-after: page;
  }

  body[data-presentation="ready"] .slide.is-active {
    min-height: 0;
    /* `animation: none` steht schon an `.slide`, verliert aber gegen die
       Einblendung an `.is-active` (eine Klasse mehr). Chrome startet die
       Animation im Druckdokument neu, und ihr erstes Bild ist `opacity: 0` —
       gemessen 18.09.2026 mit --print-to-pdf: Blatt 1 der Präsentation kam
       vollständig leer heraus, die Titelfolie fehlte. */
    animation: none;
  }

  /* Das letzte Blatt braucht keinen Umbruch; sonst wirft der Drucker eine
     leere sechzehnte Seite aus. */
  .slide-closing {
    break-after: auto;
  }

  .slide-text[hidden] {
    display: block;
  }

  .deck-controls,
  .deck-hint,
  .deck-start,
  .slide-alert {
    display: none !important;
  }

  /* Eine Folie ist ein Blatt: Grafik, Titel, Folientext und Transkript müssen
     zusammen auf eine Seite passen. Gemessen 18.09.2026 mit Chrome
     --print-to-pdf: ohne Höhengrenze belegte Folie 1 zwei Seiten. */
  body[data-presentation="ready"] .slide-figure .media-frame,
  .slide-figure .media-frame {
    height: auto;
    max-height: 8cm;
    border-color: #bbb;
  }

  body[data-presentation="ready"] .slide-figure img,
  .slide-figure img {
    max-height: 8cm;
    aspect-ratio: 1600 / 900;
  }

  .slide h1,
  .slide h2 {
    font-size: 1.6rem;
  }

  .slide-text li {
    font-size: 0.95rem;
  }

  .slide .transcript-body p {
    font-size: 0.85rem;
    line-height: 1.5;
  }
}

/* --- Kapitelfolien der Präsentation --------------------------------------
   Die dreizehn Konzeptfolien tragen eine Zeichnung im festen Format 16:9. Die
   Kapitel aus den Benchmarks bringen anderes mit: querformatige Diagramme,
   fast quadratische Kartenausschnitte und Tabellen. Drei Anordnungen genügen
   dafür — nur Bild, nur Tabelle, beides nebeneinander. Welche gilt, entscheidet
   der Renderer über eine Modifikatorklasse an `.slide-body`; im Stylesheet
   steht keine Fallunterscheidung nach Folien-ID. */

.slide-chapter .slide-lede {
  max-width: 52rem;
}

.slide-body {
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
}

.slide-body-split {
  display: grid;
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: start;
}

/* Erst ab dieser Breite steht eine Tabelle neben einem Diagramm, ohne dass
   eine der beiden Spalten unter ihre Lesbarkeit fällt. Darunter (Telefon,
   schmales Fenster) stehen sie untereinander — das ist der Vorgabewert des
   Grids und braucht keine eigene Regel. */
@media (min-width: 62rem) {
  /* Die Tabelle bekommt die breitere Spalte. Das Bild ist in dieser Anordnung
     höhenbegrenzt und wird von `object-fit: contain` ohnehin nicht breiter als
     sein Seitenverhältnis erlaubt; zusätzliche Breite bliebe dort leer, der
     Tabelle dagegen erspart sie einen Umbruch je Zelle. */
  .slide-body-split {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  }
}

.slide-body .slide-figure {
  margin-top: 0;
}

/* Kartenausschnitte und Bildschirmansichten sind fast quadratisch. Der Rahmen
   der Konzeptfolien ist 16:9 und füllt den Rest mit heller Fläche — bei einer
   822 × 828 großen Karte wären das zwei Drittel der Breite. Deshalb legt sich
   der Rahmen hier um das Bild statt umgekehrt. */
.slide-figure-tall img {
  width: auto;
  max-width: 100%;
  max-height: 26rem;
  aspect-ratio: auto;
  margin-inline: auto;
}

.slide-figure-tall .media-frame {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

/* --- Tabellenfolie ------------------------------------------------------- */

.slide-table {
  overflow-x: auto;
}

.slide-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(0.78rem, 0.95vw, 0.95rem);
  line-height: 1.35;
}

/* Die Unterschrift steht unter der Tabelle, nicht darüber: Im Vortrag liest
   man erst die Zahlen und dann, woher sie kommen. `caption-side` ist die
   einzige Möglichkeit dafür, ein <caption> gehört nach HTML an den Anfang. */
.slide-table caption {
  caption-side: bottom;
  padding-top: 0.6rem;
  color: var(--copy);
  font-size: 0.82em;
  text-align: left;
}

.slide-table th,
.slide-table td {
  padding: 0.4rem 0.7rem 0.4rem 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}

.slide-table thead th {
  color: var(--accent);
  font-family: var(--font-sans);
  font-size: 0.82em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.slide-table tbody th {
  font-weight: 600;
}

/* Zahlenspalten rechtsbündig, damit die Stellen untereinander stehen. Die
   erste Spalte trägt immer die Beschriftung und bleibt links. */
.slide-table tbody td:nth-child(n + 2) {
  font-variant-numeric: tabular-nums;
}

.slide-table tbody tr:last-child th,
.slide-table tbody tr:last-child td {
  border-bottom: 0;
}

/* --- Fußnote und Beleg --------------------------------------------------- */

.slide-footnote {
  margin-top: 1rem;
  max-width: 52rem;
  color: var(--copy);
  font-size: 0.86rem;
  line-height: 1.5;
}

.slide-evidence {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  margin-top: 0.9rem;
  list-style: none;
  font-size: 0.82rem;
}

.slide-evidence a {
  color: var(--copy);
}

/* `figcaption` ist in style.css ein zweispaltiges Grid (Bildindex links,
   Beschreibung rechts). Die Kapitelfolien haben nur einen Satz; ohne diese
   Rücknahme landete er in der linken Spalte von 8 rem und brach dort um —
   gemessen 18.09.2026 auf #alps-b20: Kasten 529 px breit, Text nach 16 Zeichen
   umgebrochen. */
.slide-figure figcaption {
  display: block;
  margin-top: 0.5rem;
  padding-top: 0;
  color: var(--copy);
  font-size: 0.78rem;
}

/* --- Kapitelfolien im Vortragsmodus -------------------------------------- */

/* Im Vortrag steht alles auf einem Bildschirm. Die Höhengrenze für die
   Konzeptgrafik (52vh) ist für eine Folie mit Tabelle daneben zu hoch — dort
   teilen sich Bild und Tabelle die Breite, und das Bild darf die Höhe nicht
   allein bestimmen. Die Werte sind am Browser gegengelesen, siehe den
   Messteil des Berichts zu dieser Aufgabe. */
body[data-presentation="ready"] .slide-body-split .slide-figure .media-frame {
  height: min(38vh, 32vw);
}

/* 46vh statt 48vh seit dem 19.09.2026: Mit Tonspur (Audioleiste 69 px)
   endete b08-costs bei 1280 × 720 und sichtbarer Kopfleiste 12 px unter der
   Fensterkante; tools/audit_browser.mjs misst bei Scrollposition 0. Diese
   Regel steht nach dem 820-px-Block und gewinnt bei gleicher Spezifität. */
body[data-presentation="ready"] .slide-body-media .slide-figure .media-frame {
  height: min(46vh, 52vw);
}

body[data-presentation="ready"] .slide-chapter .slide-figure .media-frame {
  height: min(34vh, 40vw);
}

/* Im Vortrag bestimmt die Höhe des Rahmens die Größe des Bildes; die Breite
   folgt aus dem Seitenverhältnis. `fit-content` am Rahmen verhindert, dass er
   als leere Fläche über die ganze Spalte steht. */
body[data-presentation="ready"] .slide-figure-tall img {
  width: auto;
  height: 100%;
  max-height: none;
}

/* Eine Tabellenfolie ohne Bild darf die ganze Höhe nutzen; mehr als acht
   Zeilen lässt der Validator ohnehin nicht zu. */
body[data-presentation="ready"] .slide-body-table .slide-table table {
  font-size: clamp(0.8rem, 1vw, 1rem);
}

@media (max-width: 46rem) {
  body[data-presentation="ready"] .slide-body-split .slide-figure .media-frame,
  body[data-presentation="ready"] .slide-body-media .slide-figure .media-frame,
  body[data-presentation="ready"] .slide-chapter .slide-figure .media-frame {
    height: auto;
  }
}

/* --- Kapitelfolien im Druck ---------------------------------------------- */

@media print {
  /* Bild und Tabelle bleiben auch auf dem Blatt nebeneinander; untereinander
     bräuchte eine Folie mit sieben Tabellenzeilen zwei Seiten. */
  .slide-body-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .slide-table table {
    font-size: 0.78rem;
  }

  .slide-table th,
  .slide-table td {
    border-bottom-color: #bbb;
  }

  .slide-footnote,
  .slide-evidence {
    font-size: 0.72rem;
  }

  /* Eine Tabelle darf nicht mitten auf dem Blatt abreißen. */
  .slide-table table {
    break-inside: avoid;
  }
}