/* ============================================================================
   HerrKI — Folienmodus  https://www.herrki.de/<slug>/folien   (neu 2026-09-05)

   WAS: Dieses Stylesheet wird NUR im Folienmodus zusaetzlich zu style.css geladen
   (index.php, Zweig $hk_folien). Es blendet den normalen Seitenrahmen aus und baut
   die Vollbild-Buehne, in die assets/js/folien.js die Kapitel-Knoten einhaengt.

   WARUM kein "transform: scale" / kein "zoom": die interaktiven Module rechnen ihre
   Mauskoordinaten ueber getBoundingClientRect(). Jede Skalierung wuerde sie verschieben.
   Vergroessert wird deshalb ueber die WURZEL-Schriftgroesse (html.fo-root) — dadurch
   wachsen alle rem-Masse aus style.css (Abstaende, Kaesten, Tabellen, Quiz) proportional
   mit, und die Geometrie bleibt echt.

   WICHTIG: Die Buehne .fo-buehne haengt bewusst INNERHALB von .kapitel-inhalt, weil
   style.css (".kapitel-inhalt h2/h3/p/ul/li") und zwei kapitel/<slug>/stil.css mit genau
   diesem Nachfahren-Selektor arbeiten. Ausserhalb wuerde das Kapitel seine Optik verlieren.
   ========================================================================== */

/* ---------------------------------------------------------------- Rahmen aus
   ALLE ausblendenden Regeln haengen an `html.fo-root` — diese Klasse setzt folien.js erst,
   wenn es den Kapitelinhalt gefunden hat. Ohne JavaScript (oder wenn das Einlesen scheitert)
   bleibt die Seite damit die ganz normale Kapitelseite statt einer weissen Flaeche. */
html.fo-root body.folien-modus{overflow:hidden;background:#fff;font-size:1rem;line-height:1.45}
html.fo-root body.folien-modus .topbar,
html.fo-root body.folien-modus .sidebar,
html.fo-root body.folien-modus .sidebar-overlay,
html.fo-root body.folien-modus .kapitel-kopf,
html.fo-root body.folien-modus .kapitel-nav,
html.fo-root body.folien-modus .kapitel-fuss,
html.fo-root body.folien-modus .seiten-fuss,
html.fo-root body.folien-modus .kapitel-toc,
html.fo-root body.folien-modus .zitierbox,
html.fo-root body.folien-modus .folien-aufruf{display:none!important}
html.fo-root body.folien-modus .layout{padding-top:0;min-height:0;display:block}
html.fo-root body.folien-modus .inhalt{padding:0;margin:0;max-width:none}
/* Reste im Inhaltscontainer (leerer Einstiegskasten, uebersprungene Bloecke) verstecken —
   ihre Kinder stecken laengst in den Folien. */
html.fo-root body.folien-modus .kapitel-inhalt > *:not(.fo-buehne){display:none!important}

/* Schriftgroesse der Buehne: EINE Stellschraube fuer alles (siehe Kopfkommentar).
   1920 px -> ~34 px, 1280 px -> ~24 px, 360 px -> 18 px. */
html.fo-root{font-size:clamp(18px, 1.45vw + 0.35rem, 34px)}

/* ---------------------------------------------------------------- Buehne */
.fo-buehne{position:fixed;inset:0;z-index:9000;background:#fff;color:var(--hk-text);
  display:flex;flex-direction:column}
.fo-kopf,.fo-fuss{flex:0 0 auto;display:flex;align-items:center;gap:.9em;
  height:52px;padding:0 14px;font-size:14px;line-height:1.3;color:var(--hk-text-soft)}
.fo-kopf{border-bottom:1px solid var(--hk-rahmen)}
.fo-fuss{border-top:1px solid var(--hk-rahmen)}
.fo-kopf .wortmarke{font-size:17px}
.fo-kap{margin-left:.5em;white-space:nowrap}
.fo-blocktitel{margin-left:auto;text-align:right;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;max-width:62%;color:var(--hk-blau)}
.fo-quelle{font-size:13px;color:var(--hk-text-soft);text-decoration:none;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:34%}
.fo-quelle:hover{color:var(--hk-blau);text-decoration:underline}
.fo-balken{flex:1 1 auto;height:4px;background:var(--hk-rahmen);border-radius:999px;overflow:hidden;
  min-width:40px}
.fo-balken i{display:block;height:100%;width:0;background:var(--hk-blau);transition:width .15s}
.fo-zaehler{white-space:nowrap;font-variant-numeric:tabular-nums}
.fo-knoepfe{display:flex;gap:4px;flex:0 0 auto}
.fo-btn{background:#fff;color:var(--hk-blau);border:1px solid var(--hk-blau);border-radius:6px;
  padding:3px 9px;font:inherit;font-size:13px;line-height:1.4;cursor:pointer;min-height:28px}
.fo-btn:hover{background:var(--hk-blau-hell)}
.fo-btn.fo-an{background:var(--hk-blau);color:#fff}

/* ---------------------------------------------------------------- Folien */
.fo-mitte{position:relative;flex:1 1 auto;min-height:0}
.fo-folie{position:absolute;inset:0;display:none;justify-content:center;outline:none}
.fo-folie.fo-aktiv{display:flex}
/* Messrahmen: gleiche Geometrie wie eine echte Folie, aber unsichtbar und ohne Maus.
   visibility:hidden behaelt das Layout — nur so lassen sich Hoehen echt messen. */
.fo-mess{display:flex!important;visibility:hidden;pointer-events:none}
.fo-inhalt{flex:0 1 1500px;min-width:0;height:100%;overflow:hidden;
  padding:clamp(8px,1.1vh,20px) clamp(12px,2vw,34px);box-sizing:border-box}
.fo-inhalt.fo-scroll{overflow-y:auto}
.fo-scrollhinweis{position:absolute;right:10px;bottom:8px;background:var(--hk-blau-hell);
  color:var(--hk-blau);border:1px solid var(--hk-blau);border-radius:999px;
  padding:2px 10px;font-size:12px;pointer-events:none}

/* Groessen im Inhalt: alles in rem, damit es mit html.fo-root mitwaechst.
   Doppelte Klasse .fo-buehne .fo-inhalt schlaegt die Regeln aus style.css. */
.fo-buehne .fo-inhalt h2{font-size:1.9rem;line-height:1.15;margin:0 0 .5rem}
.fo-buehne .fo-inhalt h3{font-size:1.3rem;line-height:1.2;margin:.7rem 0 .35rem}
.fo-buehne .fo-inhalt h4{font-size:1.1rem;margin:.6rem 0 .3rem}
.fo-buehne .fo-inhalt p{margin:0 0 .55rem}
.fo-buehne .fo-inhalt ul,.fo-buehne .fo-inhalt ol{margin:0 0 .55rem 1.3rem}
.fo-buehne .fo-inhalt li{margin-bottom:.25rem}
.fo-buehne .fo-inhalt img,.fo-buehne .fo-inhalt figure{max-height:78%;object-fit:contain}
.fo-buehne .fo-inhalt figure{margin:0 0 .55rem;text-align:center}
.fo-buehne .fo-inhalt figcaption{font-size:.8rem;color:var(--hk-text-soft);margin-top:.25rem}
.fo-buehne .fo-inhalt pre,.fo-buehne .fo-inhalt .code-block{max-width:100%;overflow:auto;
  font-size:.62rem;line-height:1.45;margin:.5rem 0}
.fo-buehne .fo-inhalt .tabelle-scroll{margin:.5rem 0;overflow-x:auto}
.fo-buehne .fo-inhalt table{width:100%}
.fo-buehne .fo-inhalt th,.fo-buehne .fo-inhalt td{font-size:.78rem;padding:.3rem .45rem}
.fo-buehne .fo-inhalt .info-box,.fo-buehne .fo-inhalt .warn-box,
.fo-buehne .fo-inhalt .erfolg-box,.fo-buehne .fo-inhalt .fehler-box{margin:.5rem 0;padding:.6rem .75rem}
.fo-buehne .fo-inhalt .interactive-box,.fo-buehne .fo-inhalt .quiz{margin:.3rem 0;padding:.7rem .8rem}
.fo-buehne .fo-inhalt .quiz-option{font-size:.85rem;padding:.4rem .6rem;margin:.25rem 0}
.fo-buehne .fo-inhalt .quiz-erklaerung{font-size:.8rem;margin-top:.4rem}
.fo-buehne .fo-inhalt .output{font-size:.62rem;padding:.5rem .7rem;margin:.4rem 0}
.fo-buehne .fo-inhalt .card,.fo-buehne .fo-inhalt .example-card{margin:.5rem 0;padding:.7rem .8rem}
/* Hinweiszeile ueber fortgesetzten Elementen (Tabellen, Listen, Kaesten) */
.fo-fort{font-size:.7rem;color:var(--hk-text-soft);margin:0 0 .15rem;font-style:italic}
/* Geteilte Kaesten (.fo-teil = Huelle eines aufgeteilten Elements): der obere und untere
   Innenabstand wird NICHT je Teil wiederholt. Ohne das fressen mehrere ineinander
   geschachtelte Kaesten (einzelne Kapitel setzen "padding:2rem" als Inline-Stil, das
   ist im Folienmodus wegen der groesseren Wurzelschrift bis zu 68 px) die halbe Folie auf.
   !important ist noetig, weil Inline-Stile sonst gewinnen. */
.fo-buehne .fo-inhalt .fo-teil{padding-top:.3rem!important;padding-bottom:.3rem!important;
  margin-top:0!important;margin-bottom:.3rem!important}

/* ---------------------------------------------------------------- Titel-/Schlussfolie */
.fo-sonder{display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;gap:.5rem}
.fo-sonder .fo-gross{font-size:2.4rem;line-height:1.15;color:var(--hk-blau);font-weight:700;margin:0}
.fo-sonder .fo-marke-gross{font-size:2rem}
.fo-sonder .fo-lead{font-size:1.1rem;color:var(--hk-text-soft);max-width:34em;margin:0}
.fo-sonder .fo-meta{font-size:.85rem;color:var(--hk-text-soft);margin:0}
.fo-sonder a{color:var(--hk-blau)}
.fo-sonder .fo-lizenz{font-size:.7rem;color:var(--hk-text-soft)}

/* ---------------------------------------------------------------- Zeichen-Overlay */
.fo-canvas{position:absolute;inset:0;z-index:5;pointer-events:none;touch-action:none}
body.fo-stift .fo-canvas{pointer-events:auto;cursor:crosshair}
.fo-stiftleiste{position:absolute;left:50%;transform:translateX(-50%);bottom:10px;z-index:6;
  display:none;gap:6px;background:#fff;border:1px solid var(--hk-blau);border-radius:8px;padding:5px 8px;
  box-shadow:var(--hk-schatten)}
body.fo-stift .fo-stiftleiste{display:flex}
.fo-farbe{width:26px;height:26px;border-radius:50%;border:2px solid var(--hk-rahmen);cursor:pointer;
  padding:0;background:#fff}
.fo-farbe.fo-an{border-color:var(--hk-text);box-shadow:0 0 0 2px #fff inset}
.fo-farbe[data-fofarbe="rot"]{background:#A82626}
.fo-farbe[data-fofarbe="blau"]{background:#272798}
.fo-farbe[data-fofarbe="radierer"]{background:repeating-linear-gradient(45deg,#fff,#fff 4px,#ddd 4px,#ddd 8px)}

/* ---------------------------------------------------------------- Overlays */
.fo-overlay{position:absolute;inset:0;z-index:20;display:none;align-items:center;justify-content:center;
  background:rgba(20,24,32,.62);padding:16px}
.fo-overlay.fo-auf{display:flex}
.fo-kasten{background:#fff;border-radius:10px;padding:18px 22px;max-width:900px;max-height:100%;
  overflow:auto;font-size:15px;line-height:1.6;color:var(--hk-text);box-shadow:0 8px 30px rgba(0,0,0,.35)}
.fo-kasten h3{font-size:18px;color:var(--hk-blau);margin:0 0 .6em}
.fo-kasten dl{display:grid;grid-template-columns:auto 1fr;gap:.25em .9em;margin:0}
.fo-kasten dt{font-weight:700;white-space:nowrap}
.fo-kasten dd{margin:0}
.fo-uebersicht ol{margin:0;padding-left:1.4em}
.fo-uebersicht li{margin:.15em 0}
.fo-uebersicht button{background:none;border:0;color:var(--hk-blau);font:inherit;cursor:pointer;
  text-align:left;padding:.1em 0}
.fo-uebersicht button:hover{text-decoration:underline}
.fo-hinweis-toast{position:absolute;left:50%;transform:translateX(-50%);top:12px;z-index:30;
  background:var(--hk-blau);color:#fff;border-radius:6px;padding:6px 14px;font-size:14px;
  opacity:0;transition:opacity .2s;pointer-events:none}
.fo-hinweis-toast.fo-auf{opacity:1}

/* Fehlerfall: kein Kapitelinhalt gefunden */
.fo-fehler{padding:24px;font-size:16px}
.fo-fehler a{color:var(--hk-blau)}

/* ---------------------------------------------------------------- Handy */
@media (max-width:700px){
  .fo-kopf,.fo-fuss{height:42px;font-size:12px;padding:0 8px;gap:.5em}
  .fo-kopf .wortmarke{font-size:14px}
  .fo-btn{padding:2px 6px;font-size:12px;min-height:26px}
  .fo-quelle{display:none}
  .fo-blocktitel{max-width:55%}
  .fo-sonder .fo-gross{font-size:1.7rem}
}

/* ---------------------------------------------------------------- Druck (nett, kein Muss) */
@media print{
  .fo-buehne{position:static;height:auto}
  .fo-kopf,.fo-fuss,.fo-canvas,.fo-stiftleiste,.fo-overlay,.fo-mess{display:none!important}
  .fo-mitte{position:static}
  .fo-folie{position:static;display:flex!important;page-break-after:always;min-height:90vh}
  .fo-inhalt{overflow:visible;height:auto}
}