/* =====================================================================
   Vorlage Cards – für reveal.js 6
   Zwei Teile:
     (1) THEME    – Farben & Schrift über reveals eigene --r-*-Variablen
                    (gleiches Muster wie die Original-Themes, z. B. white.css)
     (2) TEMPLATE – randloses Karten-Layout + Bausteine (.cardslide, .card, …)
   Benötigtes Markup: siehe README-Cards.md
   Blauen Rahmen aktivieren: --r-frame:#152337 und --r-pad:16px setzen.
   ===================================================================== */

/* ---------- (1) THEME – an reveals Variablensystem angedockt ---------- */
:root{
  /* Design-Tokens des Hausstils */
  --marine:#2C4A6E; --marine-d:#1E3452; --grau:#6B7B7B;
  --gruen:#639922; --orange:#D97706; --rot:#D14A4A;
  --petrol:#0E7C7B;                      /* Akzent der aktuellen Hervorhebung */
  --black:#0B1818; --paper:#FFFFFF; --line:#E7EBEF;

  /* reveals Standard-Theme-Variablen mit unseren Werten */
  --r-frame:#FFFFFF;                     /* Rahmen-/Letterbox-Farbe; blauer Rahmen: #152337 */
  --r-background-color:var(--r-frame);
  --r-main-font:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --r-main-color:var(--black);
  --r-heading-font:var(--r-main-font);
  --r-heading-color:var(--black);
  --r-heading-font-weight:800;
  --r-heading-text-transform:none;
  --r-link-color:var(--marine);
  --r-link-color-hover:var(--marine-d);
  --r-selection-background-color:rgba(44,74,110,.25);

  /* Template-Steuerung */
  --r-pad:0px;                           /* Rahmenbreite; blauer Rahmen: 16px */
}

/* Reveals Fragment-Hervorhebung "highlight-current-blue" nutzt sonst ein grelles
   Web-Blau (#1b91ff). Hier auf das ruhige Petrol des Hausstils gesetzt - keine
   Ampel-Bedeutung (gruen/orange/rot), passt zum Marine. Gilt fuer alle Decks
   mit diesem Theme. */
.reveal .fragment.highlight-current-blue.current-fragment{ color:var(--petrol); }

/* reveals Basis mit unseren Variablen (Überschriften stylt das Template unten) */
.reveal-viewport{ background-color:var(--r-background-color); }
html, body{ background:var(--r-frame); }
/* dunkle Folien: ganze Seite dunkel, damit an den Kanten kein heller Streifen durchscheint */
.reveal-viewport.has-dark-background{ background-color:var(--marine-d); }
html.has-dark-background, body.has-dark-background{ background:var(--marine-d); }
.reveal{ font-family:var(--r-main-font); color:var(--r-main-color); }
.reveal ::selection{ background:var(--r-selection-background-color); text-shadow:none; }

/* ---------- (2) TEMPLATE – randloses Karten-Layout ----------
   height/top mit !important, WEIL reveal beide als Inline-Style setzt
   (JS-Layout) – nur so lässt sich das Vollflächen-Layout sicher überschreiben.
   padding/background/box-sizing brauchen KEIN !important (höhere Spezifität
   durch :not(.stack)/.stack + später geladen genügt).
   Nur echte Folien, nicht der vertikale Stapel-Container .stack. */
.reveal .slides > section:not(.stack),
.reveal .slides > section.stack > section{
  height:720px !important; top:0 !important;
  padding:var(--r-pad); box-sizing:border-box;
  background:transparent;   /* Rahmen kommt vom Viewport (--r-background-color); transparent = keine hellen Kanten-Streifen auf dunklen Folien */
}
.cardslide{
  box-sizing:border-box; height:100%;
  background:var(--paper); border-radius:var(--r-pad);   /* Rundung = Rahmenbreite */
  box-shadow:none;
  padding:38px 54px 34px; display:flex; flex-direction:column;
  text-align:left; color:var(--black); overflow:hidden;
}

/* ---- Kopfzeile in der Karte ---- */
.s-top{ display:flex; align-items:baseline; gap:20px; padding-bottom:15px; border-bottom:2px solid var(--line); }
.s-label{ font-size:21px; font-weight:700; letter-spacing:.28em; text-transform:uppercase; color:var(--marine); }
.s-hint{ margin-left:auto; font-size:19px; color:var(--grau); }

/* ---- Action-Titel ---- */
.reveal .cardslide h2{ font-size:38px; line-height:1.14; font-weight:800; letter-spacing:-.01em;
  color:var(--black); text-transform:none; margin:22px 0 0; max-width:94%; }
.s-body{ flex:1; display:flex; flex-direction:column; justify-content:center; margin-top:20px; min-height:0; }
.s-note{ margin-top:auto; padding-top:18px; font-size:19px; color:var(--grau); line-height:1.4; }

/* ---- Titelfolie ---- */
.title .cardslide{ justify-content:center; }
.title .s-label{ font-size:23px; color:var(--marine); font-weight:700; letter-spacing:.28em; text-transform:uppercase; }
.t-big{ font-size:84px; font-weight:800; letter-spacing:-.02em; line-height:1.02; margin:24px 0 0; }
.t-sub{ font-size:29px; color:var(--marine); font-weight:600; margin:22px 0 0; max-width:82%; }
.t-rule{ width:150px; height:8px; background:var(--marine); border-radius:4px; margin:28px 0 24px; }
.t-author{ font-size:20px; color:var(--grau); }

/* ---- Abschnitts-Trenner (dunkle Karte) ---- */
.divider .cardslide{ background:var(--marine-d); color:#EAF1FB; justify-content:center; align-items:flex-start; }
.divider .d-kicker{ font-size:22px; font-weight:700; letter-spacing:.28em; text-transform:uppercase; color:#9DB4D6; }
.reveal .divider h2{ color:#fff; font-size:60px; margin:16px 0 0; max-width:90%; }
.divider .d-rule{ width:150px; height:8px; background:#4E6C93; border-radius:4px; margin-top:28px; }

/* ---- Nummerierte Listen (Lernziele / Auftrag) ---- */
.goals,.auftrag{ list-style:none; margin:0; display:flex; flex-direction:column; gap:16px; }
.goal,.astep{ display:flex; gap:20px; align-items:flex-start; font-size:25px; line-height:1.3; }
.goal .n,.astep .n{ flex:0 0 auto; width:44px; height:44px; border-radius:50%; background:var(--marine); color:#fff;
  font-size:22px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.astep .n{ border-radius:11px; }
.goal b{ font-weight:700; } .goal span{ color:#2b3a3a; }

/* ---- Karten ---- */
.cards{ display:grid; grid-template-columns:repeat(var(--n,3),minmax(0,1fr)); gap:20px; align-items:stretch; }
.card{ background:#fff; border:2px solid var(--line); border-radius:20px; padding:24px 22px;
  display:flex; flex-direction:column; gap:11px; box-shadow:0 14px 28px -16px rgba(28,52,82,.20); }
.card .chip{ width:34px; height:7px; border-radius:4px; background:var(--marine); }
.card .tag{ font-size:15px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--marine); }
.card .name{ font-size:24px; font-weight:700; line-height:1.16; overflow-wrap:break-word; hyphens:auto; }
.card .txt{ font-size:19px; line-height:1.34; color:#39484a; }
.card.c-gruen .chip{ background:var(--gruen);} .card.c-gruen .tag{ color:var(--gruen);}
.card.c-orange .chip{ background:var(--orange);} .card.c-orange .tag{ color:var(--orange);}
.card.c-marine .chip{ background:var(--marine);} .card.c-marine .tag{ color:var(--marine);}

/* ---- Vergleich (2 Spalten) ---- */
.vs{ display:grid; grid-template-columns:1fr auto 1fr; gap:20px; align-items:stretch; }
.vs.plain{ grid-template-columns:1fr 1fr; }
.col{ border-radius:20px; padding:24px 24px; display:flex; flex-direction:column; gap:14px; }
.col.before{ background:#F5F6F8; border:2px solid var(--line); }
.col.after{ background:rgba(99,153,34,.09); border:2px solid rgba(99,153,34,.30); }
.col.marine{ background:rgba(44,74,110,.06); border:2px solid rgba(44,74,110,.22); }
.col h4{ font-size:19px; letter-spacing:.06em; text-transform:uppercase; margin:0; }
.col.before h4{ color:var(--grau);} .col.after h4{ color:var(--gruen);} .col.marine h4{ color:var(--marine); }
.col ul{ list-style:none; margin:0; display:flex; flex-direction:column; gap:12px; }
.col li{ font-size:21px; line-height:1.3; color:#2b3a3a; position:relative; padding-left:28px; }
.col li::before{ content:""; position:absolute; left:0; top:8px; width:15px; height:15px; border-radius:50%; }
.col.before li::before{ background:var(--grau);} .col.after li::before{ background:var(--gruen);} .col.marine li::before{ background:var(--marine); }
.vs .arrow{ display:flex; align-items:center; color:var(--marine); font-size:52px; }

/* ---- Timeline ---- */
.tl{ display:flex; }
.tl .node{ flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; position:relative; padding:0 10px; }
.tl .node::before{ content:""; position:absolute; top:24px; left:-50%; width:100%; height:4px; background:var(--line); }
.tl .node:first-child::before{ display:none; }
.tl .dot{ width:50px; height:50px; border-radius:50%; background:var(--marine); color:#fff; display:flex;
  align-items:center; justify-content:center; font-weight:800; font-size:18px; z-index:1; box-shadow:0 0 0 8px #fff; }
.tl .yr{ font-size:30px; font-weight:800; color:var(--marine); margin-top:14px; }
.tl .tx{ font-size:19px; line-height:1.3; color:#39484a; margin-top:8px; }

/* ---- Zahlen ---- */
.nums{ display:grid; grid-template-columns:repeat(var(--n,3),1fr); gap:28px; }
.num{ text-align:center; }
.num .v{ font-size:104px; font-weight:800; line-height:.9; letter-spacing:-.03em; color:var(--marine); }
.num.n-gruen .v{ color:var(--gruen); }
.num .u{ font-size:24px; font-weight:700; color:var(--grau); }
.num .l{ font-size:20px; line-height:1.3; color:#39484a; margin-top:10px; }

/* ---- Semantische Boxen ---- */
.kbox{ border-radius:22px; padding:28px 28px; display:flex; flex-direction:column; gap:16px; }
.kbox .kh{ display:flex; align-items:center; gap:16px; font-size:25px; font-weight:800; }
.kbox .kh .badge{ font-size:15px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:6px 14px; border-radius:10px; color:#fff; }
.kbox ul{ list-style:none; margin:0; display:flex; flex-direction:column; gap:13px; }
.kbox li{ font-size:24px; line-height:1.3; display:flex; gap:16px; color:#22312f; }
.kbox li .tick{ flex:0 0 auto; width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; }
.kbox li .tick svg{ width:19px; height:19px; stroke:#fff; fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.b-merke{ background:rgba(44,74,110,.07); border:2px solid rgba(44,74,110,.25); }
.b-merke .kh{ color:var(--marine);} .b-merke .badge{ background:var(--marine);} .b-merke .tick{ background:var(--marine);}
.b-ok{ background:rgba(99,153,34,.09); border:2px solid rgba(99,153,34,.30); }
.b-ok .kh{ color:var(--gruen);} .b-ok .badge{ background:var(--gruen);} .b-ok .tick{ background:var(--gruen);}
.b-achtung{ background:rgba(217,119,6,.09); border:2px solid rgba(217,119,6,.30); }
.b-achtung .kh{ color:var(--orange);} .b-achtung .badge{ background:var(--orange);} .b-achtung .tick{ background:var(--orange);}
/* kompakte Hinweisbox: schlichtes Einleitungswort (Merke/Achtung/…), KEINE Pille.
   Farbe zeigt zusätzlich die Funktion:
   marine = Hinweis/Merke · orange = Achtung/Pathologie · grün = Normwert/ok */
.kbox.compact{ padding:14px 20px; gap:0; border-radius:12px; margin-top:6px; }
/* Box direkt im s-body (ohne gap-Wrapper) braucht eigenen Abstand zum Inhalt darüber */
.s-body > .kbox.compact{ margin-top:22px; }
.s-body > .kbox.compact + .kbox.compact{ margin-top:12px; }
/* … und derselbe Abstand NACH einer Box, wenn darunter noch Inhalt folgt.
   Ohne diese Regel klebt eine Liste direkt unter dem Kasten. */
.s-body > .kbox.compact + *:not(.kbox){ margin-top:22px; }
/* Label läuft als einleitendes Wort IM Fließtext mit (keine eigene Zeile, keine Pille) */
.kbox.compact{ display:block; }
.kbox.compact .kh{ display:inline; font-size:inherit; margin:0; }
.kbox.compact .ktext{ display:inline; }
.kbox.compact .kh .badge{ background:none !important; padding:0; border-radius:0;
  font-size:inherit; font-weight:800; letter-spacing:.02em; text-transform:none; }
.kbox.compact .kh .badge::after{ content:" · "; font-weight:700; opacity:.55; }
.kbox.compact.b-merke   .kh .badge{ color:var(--marine); }
.kbox.compact.b-achtung .kh .badge{ color:var(--orange); }
.kbox.compact.b-ok      .kh .badge{ color:var(--gruen); }
.kbox.compact.b-merke{ border:1.5px solid rgba(44,74,110,.18); border-left:6px solid var(--marine); }
.kbox.compact.b-achtung{ border:1.5px solid rgba(217,119,6,.20); border-left:6px solid var(--orange); }
.kbox.compact.b-ok{ border:1.5px solid rgba(99,153,34,.20); border-left:6px solid var(--gruen); }
.kbox .ktext{ font-size:19px; line-height:1.36; color:#22312f; }
.kbox .ktext.long{ font-size:16px; line-height:1.32; }

/* ---- Schlichte Aufzählung ohne Box/Häkchen ---- */
.blist{ list-style:none; margin:0; display:flex; flex-direction:column; gap:11px; }
.blist li{ font-size:21px; line-height:1.3; color:#22312f; position:relative; padding-left:28px; }
.blist li::before{ content:""; position:absolute; left:2px; top:10px; width:10px; height:10px; border-radius:50%; background:var(--marine); }

/* Schlichte zwei Spalten (KEINE Kacheln) – für zwei benannte Blöcke pro Folie */
.cols2{ display:grid; grid-template-columns:1fr 1fr; gap:14px 44px; align-items:start; }
.cols2 .colh{ font-size:18px; letter-spacing:.04em; text-transform:uppercase; color:var(--marine); font-weight:800; margin:0 0 8px; }
.cols2 ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.cols2 li{ font-size:20px; line-height:1.28; color:#22312f; position:relative; padding-left:24px; }
.cols2 li::before{ content:""; position:absolute; left:2px; top:9px; width:9px; height:9px; border-radius:50%; background:var(--marine); }
/* schlichter Fließtext (Quellen/Urheberrecht) */
.plaintext{ display:flex; flex-direction:column; gap:14px; font-size:22px; line-height:1.45; color:#2b3a3a; }
.plaintext.small{ font-size:19px; }

/* ---- Tabelle ---- */
.tablewrap{ width:100%; }              /* Tabelle NICHT direkt als Flex-Kind – sonst brechen die Zeilen */
.ltable{ width:100%; border-collapse:collapse; font-size:20px; }
.ltable th{ text-align:left; font-size:15px; letter-spacing:.08em; text-transform:uppercase; color:var(--marine);
  border-bottom:2px solid var(--line); padding:10px 14px; }
.ltable td{ padding:11px 14px; border-bottom:1px solid var(--line); color:#2b3a3a; line-height:1.25; }
.ltable td:last-child, .ltable th:last-child{ text-align:right; font-weight:700; color:var(--marine); white-space:nowrap; }
/* Spaltenköpfe durchgängig fett */
.ltable th{ font-weight:800; }
/* Wertetabelle: alle Spalten gleichwertig (kein Sonderstil für die letzte Spalte) */
/* Datenzelle der letzten Spalte: kein Sonderstil (nicht fett, nicht rechtsbündig) */
.ltable.vals td:last-child{
  text-align:left; font-weight:inherit; color:inherit; white-space:normal; }
/* Spaltenkopf der letzten Spalte: wie alle anderen Köpfe – fett und marine */
.ltable.vals th:last-child{
  text-align:left; white-space:normal; font-weight:800; color:var(--marine); }
.ltable.vals th{ font-weight:800; color:var(--marine); }
/* Zahlen sauber untereinander */
.ltable.vals td{ font-variant-numeric:tabular-nums; }
.ltable.vals td:first-child{ font-weight:600; }
.ltable.prose td:last-child{ text-align:left; font-weight:inherit; color:inherit; white-space:normal; }
.ltable.prose th:last-child{ text-align:left; white-space:normal; }
.ltable.prose td:first-child{ font-weight:600; color:var(--marine); white-space:nowrap; }
/* Ampel-Staffelung der Zeilen */
.ltable tr.r-ok   td{ background:rgba(99,153,34,.10); }
.ltable tr.r-warn td{ background:rgba(217,119,6,.10); }
.ltable tr.r-bad  td{ background:rgba(209,74,74,.12); }
.ltable tr.r-ok   td:first-child{ box-shadow:inset 4px 0 0 var(--gruen); }
.ltable tr.r-warn td:first-child{ box-shadow:inset 4px 0 0 var(--orange); }
.ltable tr.r-bad  td:first-child{ box-shadow:inset 4px 0 0 #D14A4A; }
/* Kompakte Variante für lange Tabellen (viele Zeilen) */
.ltable.compact{ font-size:18px; }
.ltable.compact th{ padding:7px 12px; font-size:14px; }
.ltable.compact td{ padding:7px 12px; line-height:1.2; }
.ltable tr.sum td{ border-top:2px solid var(--marine); border-bottom:none; font-weight:800; color:var(--marine); }
.ltable tr.sum td:first-child{ text-transform:uppercase; letter-spacing:.06em; font-size:17px; }

/* ---- Quiz ---- */
.quiz{ display:flex; flex-direction:column; gap:22px; }
.q .qt{ font-size:26px; font-weight:700; margin-bottom:13px; }
.opts{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:15px; }
.opts.two{ grid-template-columns:1fr 1fr; }
.opt{ text-align:left; font-family:inherit; cursor:pointer; background:#fff; border:2px solid var(--line);
  border-radius:16px; padding:18px 16px; font-size:21px; line-height:1.24; color:#22312f; display:flex; align-items:center; gap:13px; transition:.14s; }
.opt:hover{ border-color:var(--marine); background:rgba(44,74,110,.04); }
.opt .mk{ flex:0 0 auto; width:28px; height:28px; border-radius:50%; border:2px solid var(--line); display:flex; align-items:center; justify-content:center; }
.opt .mk svg{ width:17px; height:17px; stroke:#fff; fill:none; stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round; opacity:0; }
.opt.correct{ background:rgba(99,153,34,.12); border-color:var(--gruen); }
.opt.correct .mk{ background:var(--gruen); border-color:var(--gruen);} .opt.correct .mk svg{ opacity:1; }
.opt.wrong{ background:rgba(209,74,74,.10); border-color:var(--rot); }
.opt.wrong .mk{ background:var(--rot); border-color:var(--rot); }
.opt.wrong .mk svg{ display:none; }
.opt.wrong .mk::after{ content:'\2717'; color:#fff; font-size:16px; font-weight:800; line-height:1; }
.q.done .opt{ cursor:default; } .q.done .opt:not(.correct):not(.wrong){ opacity:.5; }
.q-hint{ font-size:19px; color:var(--orange); font-weight:600; margin-top:11px; display:none; }
.q.done .q-hint{ display:block; }
.outcome{ display:flex; gap:14px; align-items:center; background:rgba(217,119,6,.09); border:2px solid rgba(217,119,6,.28);
  border-radius:16px; padding:18px 22px; font-size:22px; color:#6b4409; margin-top:6px; }

/* ---- Zusammenfassung (dunkle Karte) ---- */
.sumdark .cardslide{ background:var(--marine-d); color:#EAF1FB; }
.sumdark .s-top{ border-color:rgba(255,255,255,.18); }
.sumdark .s-label{ color:#BFD2EC; } .sumdark .s-hint{ color:#9DB4D6; }
.reveal .sumdark h2{ color:#fff; }
ul.sum{ list-style:none; margin:0; display:flex; flex-direction:column; gap:16px; }
ul.sum li{ display:flex; gap:18px; font-size:25px; line-height:1.3; }
ul.sum li .tick{ flex:0 0 auto; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.15);
  display:flex; align-items:center; justify-content:center; }
ul.sum li .tick svg{ width:20px; height:20px; stroke:#fff; fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }

/* ---- kleine Quellen-Zeile ---- */
.srclist{ list-style:none; margin:0; display:flex; flex-direction:column; gap:12px; }
.srclist li{ font-size:20px; line-height:1.35; color:#39484a; padding-left:18px; position:relative; }
.srclist li::before{ content:""; position:absolute; left:0; top:11px; width:8px; height:8px; border-radius:50%; background:var(--marine); }

/* =====================================================================
   reveal-Bedienelemente + Customcontrols (fingerfreundlich am Board)
   ===================================================================== */
/* Navigationspfeile: reveal-Standardposition (unten rechts), Marine; hoch/runter kleiner */
.reveal .progress{ color:var(--marine); height:5px; }
.reveal .controls{ color:var(--marine); }   /* Farbe der Nav-Pfeile; Größe/Position: Smallcontrol. Toolbar/Stift bringen ihr CSS selbst mit. */

/* Foliennummer dezent oben rechts – ohne Hintergrund, ohne Unterstrich */
.reveal .slide-number{ background:transparent; color:var(--marine); top:14px; right:18px; bottom:auto; left:auto;
  font-size:14px; font-weight:400; padding:0; }
.reveal .slide-number a{ color:inherit; text-decoration:none; }
/* Auf dunklen Folien (Trenner, Zusammenfassung) hell setzen. Die Klasse
   has-dark-background vergibt reveal selbst - abgeleitet aus data-background-color. */
.reveal.has-dark-background .slide-number{ color:#EAF1FB; }
@media print{
  /* Im Druck baut reveal je Blatt eine eigene Nummer. Sie haengt NICHT in der
     Sektion, sondern daneben in der Seite - deshalb ueber die Seite ansprechen,
     sonst bliebe sie auf dunklen Blaettern marineblau auf marineblau. */
  .pdf-page:has(section.has-dark-background) .slide-number-pdf{ color:#EAF1FB; }
  .reveal .slides section.has-dark-background .slide-number{ color:#EAF1FB; }
}

/* =====================================================================
   Druck / PDF-Export
   Nur die eigenen Layout-Zwänge (erzwungene Höhe/Padding) lösen und die
   eigene Leiste ausblenden – Seitenaufteilung, Hintergründe und das
   Ausblenden der Bedienelemente macht reveal selbst (native print-pdf).
   Sauberes PDF:  index.html?print-pdf  aufrufen → dann Drucken / Als PDF.
   ===================================================================== */
@media print{
  .reveal .slides > section:not(.stack),
  .reveal .slides > section.stack > section{
    height:auto !important; top:auto !important; padding:0 !important; background:transparent !important;
  }
  .cardslide{ height:auto !important; box-shadow:none; border-radius:0; }
}

.reveal .fly-l.visible{ animation:fly-l .62s cubic-bezier(.16,.84,.28,1) both; }
.reveal .fly-r.visible{ animation:fly-r .62s cubic-bezier(.16,.84,.28,1) both; }
@keyframes fly-l{0%{transform:translateX(-115%);opacity:0}60%{opacity:1}72%{transform:translateX(10px)}84%{transform:translateX(-5px)}93%{transform:translateX(2px)}100%{transform:translateX(0);opacity:1}}
@keyframes fly-r{0%{transform:translateX(115%);opacity:0}60%{opacity:1}72%{transform:translateX(-10px)}84%{transform:translateX(5px)}93%{transform:translateX(-2px)}100%{transform:translateX(0);opacity:1}}
@media (prefers-reduced-motion:reduce){.reveal .fly-l.visible,.reveal .fly-r.visible{animation:none}}

.reveal .fly-u.visible{ animation:fly-u .5s cubic-bezier(.18,.86,.32,1.06) both; }
@keyframes fly-u{0%{transform:translateY(46px);opacity:0}70%{opacity:1}100%{transform:translateY(0);opacity:1}}
@media (prefers-reduced-motion:reduce){.reveal .fly-u.visible{animation:none}}


/* ---- Verticator an die untere Navigation angleichen ----------------------
   Voreingestellt ist die Leiste sehr blass: .6 auf der Liste und noch einmal .6
   auf jedem Punkt bei 40 % Größe – zusammen gut ein Drittel Deckkraft. Auf dem
   Smartboard aus fünf Metern ist davon nichts mehr zu sehen. Hier: dieselbe Farbe
   und Deckkraft wie die Pfeile unten rechts, größere Punkte, und ein schmalerer
   Innenabstand, damit die Leiste weiter nach außen rückt und den Folieninhalt
   nicht mehr streift. Die Klasse .visible steht nur mit drin, um die Regeln des
   Plugins zu überstimmen – dessen CSS wird nachgeladen und käme sonst zuletzt. */
html .reveal ul.verticator.visible{ opacity:.9; }
html .reveal ul.verticator.visible:hover{ opacity:1; }
.reveal ul.verticator.visible .verticator-holder{ padding:7px; }   /* fest, damit die Spalte beim Ändern der Größe stehen bleibt */
/* Die Punkte selbst sind kleiner als ihre Schaltfläche: Das Antippen am Board
   braucht die volle Fläche, das Auge nur einen kleinen Punkt – so wirkt die
   Leiste so leicht wie die Pfeile unten, ohne dass man daneben tippt. */
.reveal ul.verticator.visible li a::after{ opacity:.5; transform:translateZ(0) scale(.42); }
.reveal ul.verticator.visible li a:hover::after{ opacity:.85; transform:translateZ(0) scale(.62); }
.reveal ul.verticator.visible li.active a::after{ opacity:1; transform:translateZ(0) scale(.72); }


/* ---- Abbildung antippen → Lightbox (Multimodal) -------------------------
   Die Buchabbildungen liegen in voller Auflösung im Ordner medien/, auf der
   Folie stehen sie aber auf 500 px heruntergerechnet. Die Lupe der Bedienleiste
   vergrößert nur diese verkleinerte Darstellung – unscharf, die Auflösung ist
   ja schon weg. Multimodal lädt beim Antippen die Originaldatei.
   Der Auslöser umschließt das Bild und ändert am Layout nichts: line-height:0
   verhindert den Zeilenabstand, den ein <a> als Inline-Element sonst unter dem
   Bild erzeugt. Zu sehen ist nur das kleine Zeichen oben rechts – ohne das
   weiß am Board niemand, dass sich die Abbildung öffnen lässt. */
/* Der Auslöser umschließt das Bild eng: width:auto am <img> ersetzt das
   width:100% aus dem Inline-Style, sodass die Box nicht mehr die ganze
   Kartenbreite einnimmt, sondern genau so breit ist wie die Abbildung selbst.
   Deshalb steht das Zeichen an der Ecke des Bildes und nicht irgendwo im
   leeren Raum daneben. Höhe/max-height aus dem Inline-Style bleiben. */
.s-body a.zoombild{ position:relative; display:block; align-self:center;
  max-width:100%; max-height:100%; line-height:0; cursor:zoom-in; }
.s-body a.zoombild > img{ width:auto !important; max-width:100%; }
/* Das Zeichen sitzt in der Ecke der Abbildung und damit auf dem Motiv. Damit
   es nicht wie ein Teil der Abbildung aussieht, bekommt es eine helle Fläche
   mit der Linienfarbe als Rand - dieselbe Sprache wie die übrigen Bedien-
   elemente der Folie. */
.s-body a.zoombild::after{
  content:""; position:absolute; top:8px; right:8px; width:30px; height:30px;
  border-radius:9px; background-color:rgba(255,255,255,.88); border:1px solid var(--line);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7B7B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M21 3l-7 7M9 21H3v-6M3 21l7-7'/%3E%3C/svg%3E");
  background-position:center; background-size:17px 17px; background-repeat:no-repeat;
  opacity:.62; transition:opacity .15s; pointer-events:none;
}
.s-body a.zoombild:hover::after{ opacity:1; }
/* Im Druck und in der Übersicht ist nichts anzutippen – Zeichen weg. */
@media print{ .s-body a.zoombild::after{ display:none; } }
.reveal.overview .s-body a.zoombild::after{ display:none; }

/* Die Lightbox selbst wird über die Optionen in cards-setup.js eingefärbt.
   Hier nur, was dort nicht erreichbar ist: der Vorhang soll auch über den
   Rahmen des Vortrags laufen, und auf dunklen Folien bleibt er derselbe. */
.multimodal{ backdrop-filter:blur(1.5px); }
/* Ein Hauch Luft ringsum, damit die Lightbox als Schicht über der Folie
   lesbar bleibt und nicht bündig am Bildschirmrand klebt. */
.multimodal .mm-max .mm-dialog{ max-width:97%; max-height:97%; }


/* ---- Bruchrechnung ohne Formel-Plugin -----------------------------------
   Für die Rechenwege im Unterricht (Tropfenzahl, Dosierung, Bilanz) braucht
   es kein MathJax/KaTeX: ein Zähler, ein Strich, ein Nenner. Das bleibt in
   der Hausschrift, skaliert mit der Folie, druckt sauber und kostet nichts.
   .formel richtet die Bestandteile auf der Höhe des Bruchstrichs aus. */
.formel{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:16px; font-size:31px; line-height:1.2; margin:10px 0; }
.formel .op{ font-weight:700; color:var(--marine); }
.formel .fx{ font-weight:600; }
.formel .erg{ font-weight:800; color:var(--marine); }
.bruch{ display:inline-flex; flex-direction:column; align-items:center; text-align:center;
  vertical-align:middle; }
.bruch .z{ padding:0 .55em .12em; border-bottom:3px solid var(--marine); }
.bruch .n{ padding:.12em .55em 0; }
/* kleinere Variante für den Bruch mitten im Fließtext */
.bruch.klein{ font-size:.82em; }
.bruch.klein .z{ border-bottom-width:2px; }


/* ---- Pressebeleg neben dem Inhalt --------------------------------------- */
.presse{ display:grid; grid-template-columns:390px 1fr; gap:34px; align-items:start; }
.presse .beleg{ display:flex; flex-direction:column; gap:10px; }
.presse .beleg img{ width:100%; border:2px solid var(--line); border-radius:14px; display:block; }
.presse .beleg .cap{ font-size:16px; line-height:1.35; color:var(--grau); }


/* ---- Film auf der Folie -------------------------------------------------
   Das Video bekommt die ganze Resthöhe der Karte, behält aber sein
   Seitenverhältnis. min-height:0 ist nötig, weil ein Flex-Kind sonst nicht
   unter seine Inhaltshöhe schrumpft und der Film die Quellenzeile
   überdecken würde. Im Druck (PDF) bleibt das Standbild stehen. */
.s-body > .film{ flex:1; min-height:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px; }
.s-body > .film video{ min-height:0; max-height:100%; max-width:100%; width:auto;
  display:block; background:#0B1818; border:2px solid var(--line); border-radius:14px; }
/* Der Verweis auf die Quelle steht in der Quellenzeile, nicht zusaetzlich
   unter dem Film - sonst steht dieselbe Angabe zweimal auf der Folie. */
.s-note a{ color:var(--marine); }

/* Standbild fuer den Ausdruck. cards-setup.js legt es beim Start neben den
   Film; am Bildschirm ist es unsichtbar. Im Druck ist es umgekehrt: Der Film
   selbst druckt sich nicht (Chrome gibt weder Bild noch Poster zuverlaessig
   aus) und wuerde ausserdem mit seiner vollen Hoehe die Quellenzeile von der
   Seite schieben - genau die Zeile, in der die URL des Originals steht. */
.s-body > .film img.filmdruck{ display:none; }
@media print{
  .s-body > .film{ flex:none; }
  .s-body > .film video{ display:none; }
  .s-body > .film img.filmdruck{ display:block; width:auto; max-width:100%; max-height:430px;
    border:2px solid var(--line); border-radius:14px; }
}

/* In der Weitergabe-Fassung wird der Film durch das anklickbare Standbild
   ersetzt (paket.py). Es sieht aus wie der Film, oeffnet aber das Original
   beim Anbieter - so wandert die Videodatei nicht mit. */
.s-body > .film a.filmlink{ flex:1; min-height:0; display:flex; flex-direction:column;
  align-items:center; gap:12px; text-decoration:none; }
.s-body > .film a.filmlink .bild{ flex:1; min-height:0; position:relative; display:block; line-height:0; }
.s-body > .film a.filmlink img{ height:100%; width:auto; max-width:100%; display:block;
  border:2px solid var(--line); border-radius:14px; }
.s-body > .film a.filmlink .bild::after{
  content:""; position:absolute; inset:0; margin:auto; width:94px; height:94px; border-radius:50%;
  background-color:rgba(255,255,255,.92);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232C4A6E'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
  background-position:54% center; background-size:40px 40px; background-repeat:no-repeat;
  box-shadow:0 10px 28px rgba(11,24,24,.34); }
.s-body > .film a.filmlink .hinweis{ font-size:19px; line-height:1.35; color:var(--marine);
  font-weight:600; text-align:center; }


/* ---- Abbildung neben dem Text -------------------------------------------
   Zweispaltig: links die Abbildung mit Bildunterschrift, rechts der Text.
   Die Höhe der Abbildung wird am <img> gesetzt (height + object-fit), weil
   der Auslöser .zoombild die Breite selbst bestimmt. --bt ändert die
   Spaltenbreite, wenn eine Abbildung mehr Platz braucht. */
.s-body > .bildtext{ flex:1; min-height:0; display:grid;
  grid-template-columns:var(--bt, 380px) 1fr; gap:34px; align-items:start; }
.bildtext .bild{ display:flex; flex-direction:column; gap:10px; align-items:center; }
.bildtext .bild .cap{ font-size:16px; line-height:1.35; color:var(--grau); text-align:center; }
.bildtext .bild img{ border:2px solid var(--line); border-radius:14px; background:#fff; }
.bildtext .txt{ display:flex; flex-direction:column; gap:16px; min-width:0; }
/* Zwei Abbildungen nebeneinander vergleichen */
.s-body > .bildpaar{ flex:1; min-height:0; display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:start; }
.bildpaar figure{ margin:0; display:flex; flex-direction:column; gap:10px; align-items:center; }
.bildpaar figure img{ border:2px solid var(--line); border-radius:14px; background:#fff; }
.bildpaar figcaption{ font-size:17px; line-height:1.35; color:#2b3a3a; text-align:center; }
.bildpaar figcaption b{ color:var(--marine); }
/* Enger gesetzter Vergleich, wenn beide Spalten viel Text tragen */
.vs.eng .col{ padding:18px 20px; gap:10px; }
.vs.eng .col h4{ font-size:18px; }
.vs.eng .col li{ font-size:19px; line-height:1.26; padding-left:24px; }
.vs.eng .col li::before{ top:6px; width:12px; height:12px; }

/* =====================================================================
   Kapitelanzeige: Das Plugin chapters bringt sein CSS seit 1.5.0 selbst
   mit (Balken, Segmente, Trennzeichen, Farben) – hier steht bewusst
   nichts mehr dazu. Farben und Höhe lassen sich in cards-setup.js unter
   "chapters" setzen. Die helle Foliennummer auf dunklen Folien bleibt
   oben bei den allgemeinen Regeln, sie gilt auch ohne das Plugin.
   ===================================================================== */