/* ============================================================
   programmdoku.css — Programm-Doku (ADR-092): Seiten in Kahf OS und der Folienbetrachter
   Farben nur aus farben.css. Der Betrachter läuft als eigene Seite (/api/programm-doku/folien/…).
   ============================================================ */

/* ---------- In Kahf OS ---------- */
.pd-module { color: var(--text-leise); margin: 0 0 8px; }
.pd-punkte { margin: 0; padding-left: 20px; line-height: 1.5; }
.pd-punkte li + li { margin-top: 4px; }
.pd-befehl { background: var(--flow-karte-hell); border: 1px solid var(--rand); border-radius: 10px; padding: 12px; overflow-x: auto;
  white-space: pre-wrap; word-break: break-all; font-size: 14px; }

/* ---------- Folienbetrachter ---------- */
body.pf { margin: 0; background: var(--hintergrund); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; }
.pf-app { max-width: 1400px; margin: 0 auto; padding: 16px; box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; }
.pf-laden { padding: 24px; }
.pf-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.pf-zurueck { color: var(--akzent-text); text-decoration: none; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.pf-kopf h1 { font-size: 20px; margin: 0; flex: 1 1 240px; }
.pf-stand { color: var(--text-leise); font-size: 14px; }
.pf-rahmen { position: relative; width: 100%; overflow: hidden; border-radius: 12px; box-shadow: var(--schatten); background: var(--karte); }
.pf-buehne { position: absolute; top: 0; left: 0; width: 1920px; height: 1080px; transform-origin: 0 0; }
.pf-folie, .pf-folie > section { width: 1920px; height: 1080px; box-sizing: border-box; overflow: hidden; }
.pf-folie * { box-sizing: border-box; }
.pf-folie p, .pf-folie h1, .pf-folie h2, .pf-folie h3, .pf-folie ul, .pf-folie ol { margin: 0; }
.pf-folie img { max-width: 100%; }
.pf-bild-fehlt { display: flex; align-items: center; justify-content: center; min-height: 200px; padding: 24px; border: 3px dashed var(--rand);
  border-radius: 16px; color: var(--text-leise); font-size: 32px; text-align: center; }
.pf-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.pf-leiste button, .pf-kapitel { min-height: 44px; min-width: 44px; padding: 8px 16px; border-radius: 10px; border: 1px solid var(--rand);
  background: var(--karte); color: var(--text); font: inherit; cursor: pointer; }
.pf-leiste button.pf-haupt { background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); font-weight: 650; }
.pf-leiste button:focus-visible, .pf-kapitel:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
.pf-leiste button:disabled { opacity: .45; cursor: default; }
.pf-zaehler { min-width: 72px; text-align: center; font-variant-numeric: tabular-nums; }
.pf-kapitel { max-width: 100%; }
.pf-notiz { background: var(--karte); border: 1px solid var(--rand); border-radius: 12px; padding: 16px; white-space: pre-line; line-height: 1.5; }
.pf-notiz[hidden] { display: none; }
.pf-notiz b { display: block; margin-bottom: 6px; }
@media (max-width: 600px) {
  .pf-app { padding: 8px; }
  .pf-leiste .pf-kapitel { order: 5; flex: 1 1 100%; }
}
@media print {
  .pf-kopf, .pf-leiste { display: none; }
}