/* ── Slideshow (Folien zur Folge) ────────────────────────────────────────────
   Text slides rendered from the production slide JSON.
   Desktop: 16:9 stage, text scales with the stage width (container units),
   JS shrinks text on dense slides until it fits.
   Phone: slides grow to their content; all slides share the tallest height,
   so the page doesn't jump while clicking through.
   Without JS: all slides are shown one below the other.                     */

.slideshow {
  --sl-bg:      #ffffff;
  --sl-ink:     var(--fg, #1c1c1e);
  --sl-soft:    var(--fg-soft, #3a3a3c);
  --sl-muted:   var(--muted, #6e6e73);
  --sl-accent:  var(--accent, #1a4f7a);
  --sl-pale:    var(--accent-pale, #e8f0f8);
  --sl-line:    var(--border, #e5e5ea);
  width: min(1180px, calc(100vw - 3rem));
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin: 0.5rem 0 2.25rem;
}

.slides {
  container-type: inline-size;
  display: grid;
  gap: 1rem;
}

.slide {
  --fs: 2.5cqi;
  font-family: var(--font-ui);
  font-size: var(--fs);
  line-height: 1.38;
  color: var(--sl-ink);
  background: var(--sl-bg);
  border: 1px solid var(--sl-line);
  border-radius: var(--radius-lg, 10px);
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 28px rgba(26,79,122,.08);
  aspect-ratio: 16 / 9;
  padding: 4.2cqi 5.2cqi 3.6cqi;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}

/* JS on: stack slides in one grid cell, show only the active one */
.slideshow.is-ready .slides { gap: 0; }
.slideshow.is-ready .slide { grid-area: 1 / 1; visibility: hidden; }
.slideshow.is-ready .slide.is-active { visibility: visible; }
.slideshow.is-ready .slide.is-active { animation: sl-in .22s ease-out; }
@keyframes sl-in { from { opacity: .35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .slideshow.is-ready .slide.is-active { animation: none; }
}

/* ── Slide parts ─────────────────────────────────────────────────────────── */
.sl-kicker {
  font-size: .62em;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sl-muted);
  margin-bottom: .5em;
}

.sl-title {
  font-size: 1.62em;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.18;
  color: var(--sl-accent);
  padding-bottom: .45em;
  margin-bottom: .75em;
  border-bottom: 2px solid var(--sl-pale);
}

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

.sl-list { list-style: none; display: flex; flex-direction: column; gap: .55em; }
.sl-list li { position: relative; padding-left: 1.15em; color: var(--sl-soft); }
.sl-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .52em;
  width: .42em; height: .42em;
  border-radius: 2px;
  background: var(--sl-accent);
}
.sl-list strong { color: var(--sl-ink); font-weight: 700; }

ol.sl-list { counter-reset: sl; }
ol.sl-list li { padding-left: 1.75em; counter-increment: sl; }
ol.sl-list li::before {
  content: counter(sl);
  width: 1.3em; height: 1.3em; top: .02em;
  border-radius: 50%;
  font-size: .82em;
  font-weight: 700;
  line-height: 1.3em;
  text-align: center;
  color: #fff;
}

.sl-fazit {
  margin-top: auto;
  align-self: flex-start;
  background: var(--sl-pale);
  color: var(--sl-accent);
  font-weight: 600;
  border-left: .22em solid var(--sl-accent);
  border-radius: 0 6px 6px 0;
  padding: .45em .9em .45em .75em;
}
.sl-body > .sl-list, .sl-body > .sl-cols { margin-bottom: .9em; }
.sl-fazit::before { content: "→ "; }

/* begriff */
.slide--begriff .sl-term {
  font-family: var(--font-text, Georgia, serif);
  font-size: 2.5em;
  line-height: 1.08;
  color: var(--sl-accent);
  margin-bottom: .22em;
}
.slide--begriff .sl-def {
  font-family: var(--font-text, Georgia, serif);
  font-style: italic;
  font-size: 1.12em;
  color: var(--sl-soft);
  padding-bottom: .8em;
  margin-bottom: .9em;
  border-bottom: 2px solid var(--sl-pale);
}

/* spalten */
.sl-cols { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 1.3em; }
.sl-col {
  background: #fafbfc;
  border: 1px solid var(--sl-line);
  border-top: .22em solid var(--sl-accent);
  border-radius: 6px;
  padding: .8em 1em 1em;
}
.sl-col h3 { font-size: 1.08em; line-height: 1.2; color: var(--sl-ink); }
.sl-col .sl-line { font-size: .78em; color: var(--sl-muted); margin: .2em 0 .7em; }
.sl-col .sl-list { gap: .4em; font-size: .92em; }

/* zeitleiste */
.sl-timeline {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
  gap: .6em;
  position: relative;
  margin: .3em 0 1.1em;
  padding-top: 1.85em;
}
.sl-timeline::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: .55em;
  height: .16em;
  background: var(--sl-line);
  border-radius: 1px;
}
.sl-timeline li { position: relative; }
.sl-timeline li::before {
  content: "";
  position: absolute;
  left: 0; top: -1.62em;
  width: .7em; height: .7em;
  border-radius: 50%;
  background: var(--sl-bg);
  border: .16em solid var(--sl-accent);
}
.sl-timeline .sl-when { display: block; font-size: .74em; font-weight: 700; color: var(--sl-accent); letter-spacing: .02em; }
.sl-timeline .sl-what { display: block; color: var(--sl-soft); line-height: 1.25; }
.sl-timeline li.is-key::before { background: var(--sl-accent); }
.sl-timeline li.is-key .sl-what { color: var(--sl-ink); font-weight: 700; }

/* bild */
.slide--bild .sl-media { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.25fr 1fr; gap: 1.6em; }
.slide--bild figure { min-height: 0; display: flex; flex-direction: column; }
.slide--bild img {
  flex: 1; min-height: 0; width: 100%;
  object-fit: contain; object-position: left top;
  border-radius: 4px;
}
.slide--bild figcaption { font-size: .62em; color: var(--sl-muted); margin-top: .5em; line-height: 1.35; }
.slide--bild .sl-noimg {
  flex: 1; display: grid; place-items: center;
  background: var(--surface, #f5f5f7); border-radius: 4px;
  color: var(--sl-muted); font-size: .8em; text-align: center; padding: 1em;
}

/* Titel- und Schlussfolie */
.slide--cover {
  background: linear-gradient(135deg, #1a4f7a 0%, #123a5a 100%);
  border-color: transparent;
  color: #fff;
  justify-content: center;
  padding-left: 7cqi;
}
.slide--cover .sl-kicker { color: rgba(255,255,255,.72); margin-bottom: 1.4em; }
.slide--cover .sl-num { font-size: .95em; font-weight: 600; color: rgba(255,255,255,.85); margin-bottom: .2em; }
.slide--cover .sl-big { font-size: 3.1em; font-weight: 750; line-height: 1.05; letter-spacing: -.02em; }
.slide--cover .sl-sub { font-family: var(--font-text, Georgia, serif); font-style: italic; font-size: 1.35em; color: rgba(255,255,255,.9); margin-top: .55em; max-width: 34em; }
.slide--cover .sl-note { margin-top: auto; font-size: .6em; color: rgba(255,255,255,.65); }
.slide--cover.slide--end .sl-big { font-size: 2.2em; }
.slide--cover.slide--end > :first-child { margin-top: auto; }

/* ── Controls ────────────────────────────────────────────────────────────── */
.sl-controls { display: none; }
.slideshow.is-ready .sl-controls {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: .75rem;
  font-size: .85rem;
  color: var(--sl-muted);
}
.sl-btn {
  font: inherit;
  display: inline-grid;
  place-items: center;
  min-width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  border: 1px solid var(--sl-line);
  background: var(--sl-bg);
  color: var(--sl-accent);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.sl-btn:hover:not(:disabled) { background: var(--sl-pale); border-color: var(--sl-pale); }
.sl-btn:focus-visible { outline: 2px solid var(--sl-accent); outline-offset: 2px; }
.sl-btn:disabled { opacity: .35; cursor: default; }
.sl-btn svg { width: 1.15rem; height: 1.15rem; }
.sl-count { font-variant-numeric: tabular-nums; min-width: 4.2em; text-align: center; }
.sl-progress { flex: 1; height: 4px; background: var(--sl-line); border-radius: 2px; overflow: hidden; }
.sl-progress span { display: block; height: 100%; background: var(--sl-accent); border-radius: 2px; transition: width .2s; }
.sl-btn--fs { border-radius: var(--radius, 6px); }

.slideshow.is-ready .slides { cursor: pointer; }
.slideshow.is-ready .slides:focus-visible { outline: 2px solid var(--sl-accent); outline-offset: 4px; border-radius: var(--radius-lg, 10px); }

/* ── Fullscreen ──────────────────────────────────────────────────────────── */
.slideshow:fullscreen {
  left: 0; transform: none;
  width: 100vw; height: 100vh;
  margin: 0;
  background: #0f1720;
  display: flex; flex-direction: column; justify-content: center;
  padding: 2vh 2vw;
}
.slideshow:fullscreen .slides { width: min(96vw, calc((100vh - 7rem) * 16 / 9)); margin: 0 auto; }
.slideshow:fullscreen .slide { border: 0; border-radius: 0; box-shadow: none; }
.slideshow:fullscreen .sl-controls { width: min(96vw, calc((100vh - 7rem) * 16 / 9)); margin: .75rem auto 0; color: #c7ced6; }
.slideshow:fullscreen .sl-progress { background: #2a3440; }

/* ── Small screens: let slides grow, fixed readable type ─────────────────── */
@container (max-width: 640px) {
  .slide {
    --fs: 1rem;
    aspect-ratio: auto;
    padding: 1.25rem 1.2rem 1.35rem;
    line-height: 1.45;
  }
  .sl-title { font-size: 1.3em; }
  .slide--cover { padding: 1.75rem 1.4rem; }
  .slide--cover .sl-big { font-size: 2em; }
  .slide--begriff .sl-term { font-size: 1.9em; }
  .sl-cols { grid-template-columns: minmax(0, 1fr); gap: .8em; }
  .sl-timeline { grid-template-columns: minmax(0, 1fr); padding: 0 0 0 1.4em; gap: .7em; }
  .sl-timeline::before { left: .3em; right: auto; top: .3em; bottom: .3em; width: .14em; height: auto; }
  .sl-timeline li::before { left: -1.4em; top: .25em; }
  .slide--bild .sl-media { grid-template-columns: minmax(0, 1fr); }
  .slide--bild img { max-height: 55vh; }
  .sl-fazit { margin-top: 1em; }
}

@media (max-width: 480px) {
  .slideshow { width: calc(100vw - 2rem); }
  .sl-progress { display: none; }
}

/* Phones: controls above the slide (always reachable), each slide only as tall as it needs. */
@media (max-width: 688px) {
  .slideshow.is-ready { display: flex; flex-direction: column; }
  .slideshow.is-ready .sl-controls { order: -1; margin: 0 0 .6rem; }
  .slideshow.is-ready .slide:not(.is-active) { display: none; }
}