/* hilfmirmal v11 · Präsentationen zum n8n-Lernpfad (n8n/praesentationen/, erzeugt von tools/kurs-n8n-folien.py).
   Wird nach schale.css und kurs-n8n.css geladen: Tokens (--paper, --ink, --blue, --kurs-*), Inter, Instrument Serif und
   JetBrains Mono kommen von dort. Hier nur Klassen mit fo- (plus .fo-seite auf body).

   Drei Ansichten derselben Folien:
   - Lesefassung (Vorgabe, ohne JavaScript und auf schmalen Bildschirmen): Folien untereinander, normale Schriftgrößen
   - Präsentation (assets/v11/folien.js setzt data-ansicht="praesentation" ab 1024 × 610 px, dann ist die Folie
     mindestens 900 px breit): eine Folie im Format 16:9, alles in
     Einheiten der Folienbreite (--u = 1cqw), Steuerung unten rechts auf der Folie, Erklärung darunter
   - Druck und PDF (@media print, nur auf den Teilen und in der Druckfassung): eine Folie je Seite, 1280 × 720 px,
     ohne Schatten, mit Fußzeile, Antworten offen, ohne Erklärungen
   Auf dem Handy (bis 640 px) steht Fließtext nicht unter 14 px. In der Lesefassung schalten Ketten (senkrecht unter
   900 px, Etikett der Zweige über dem Kasten unter 400 px) und Tabellen (Karten ab drei Spalten unter 640 px, mit zwei
   Spalten unter 310 px) nach der Breite der Folie um, nicht nach der des Fensters.
   Innerhalb einer Folie richtet sich jede Größe nach --u: 1 u ist ein Hundertstel der Folienbreite.
   Untergrenze: Kleine Etiketten (Kicker, Kopfzeile, Tabellenköpfe, Namen und Typen in Ketten, Zweige, Name, Marke,
   Fußzeile) werden nie kleiner als --fo-min-etikett: 12 px wie .fo-eyebrow der Website, in rem, damit die
   Schriftgröße des Browsers mitzählt (auf dem Handy also feste Werte). Nur in einer Präsentation mit Folien unter
   1000 px Breite 11 px, sonst liefen dichte Folien über; gemessen für alle Teile von 900 bis 1180 px Folienbreite. */

@font-face{font-family:'Caveat';font-weight:600;font-display:swap;src:url('../../fonts/Caveat-600.woff2?v=1c591acd') format('woff2')}

/* ---------- Seite (Grundlagen wie im Inline-Stil der Kursseiten, die hier fehlen) ---------- */
.fo-seite,.fo-druckseite{--fo-ease:cubic-bezier(.16,1,.3,1);margin:0;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
/* ohne Spezifität wie *{} im Kursstil: .wrap und .kn-abschluss behalten ihr content-box aus kurs-n8n.css */
:where(.fo-seite,.fo-druckseite) :where(*,*::before,*::after){box-sizing:border-box}
.fo-seite button{font:inherit;color:inherit}
.fo-wrap{margin:0 auto;padding-top:20px;padding-bottom:clamp(40px,7vh,80px)}
.fo-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.fo-seitenkopf{margin:0 0 clamp(20px,3.5vh,34px)}
.fo-seitenkopf>:not(.fo-meta){max-width:46rem}   /* die Meta-Zeile darf breiter sein als der Text darüber */
.fo-eyebrow{margin:0 0 .5rem;color:var(--blue-deep);font:600 .76rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.fo-seitenkopf h1{margin:0;font-size:clamp(2.2rem,1.5rem + 2.6vw,3.4rem);line-height:1.04;text-wrap:balance}
.fo-seitenkopf-gross h1{font-size:clamp(2.5rem,1.6rem + 3vw,4rem)}
.fo-seitenkopf h1 em{color:var(--blue);font-style:italic}
.fo-vorspann{margin:.8rem 0 0;color:var(--ink-2);font-size:clamp(1.02rem,.96rem + .3vw,1.18rem);line-height:1.55;max-width:40rem}
.fo-seitenkopf .kn-autor{margin-top:.7rem}
.fo-meta{display:flex;flex-wrap:wrap;gap:.35rem 1.3rem;margin:.9rem 0 0;padding:0;list-style:none;color:var(--ink-3);font-size:.92rem}
.fo-meta a{color:var(--blue-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.fo-meta a:hover{color:var(--blue)}
.fo-pdf-link{font-weight:600}
.fo-leer{color:var(--ink-2)}

/* ---------- Werkzeugleiste über der Präsentation ---------- */
.fo-leiste{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.5rem .6rem;margin:0 0 .9rem}
.fo-leiste[hidden]{display:none}
/* In der Lesefassung auf großen Bildschirmen bleibt die Leiste oben stehen: Der gedrückte Schalter „Alle Folien
   untereinander“ ist so von jeder Folie aus zu sehen und zu erreichen (folien.js holt beim Umschalten die aktuelle Folie
   unter die Leiste und nimmt beim Zurückschalten die Folie, die oben steht). Die Seite scrollt unter ihr durch. */
.fo-deck[data-ansicht="lesen"] .fo-leiste{position:sticky;top:0;z-index:3;margin-bottom:.3rem;padding:.6rem 0;background:var(--cream);box-shadow:0 0 0 100vmax var(--cream);clip-path:inset(0 -100vmax)}   /* Fläche über die ganze Breite, ohne Überlauf */
/* Unter der stehenden Leiste: Wohin der Browser rollt (Tab, auch rückwärts, Sprung zu #folie-N, scrollIntoView), steht
   unter ihr, samt Fokusrahmen. Die Folien behalten ihren scroll-margin-top von 1rem darüber. */
html:has(.fo-deck[data-ansicht="lesen"]>.fo-leiste:not([hidden])){scroll-padding-top:5rem}
.fo-hinweis{margin:0 auto 0 0;color:var(--ink-3);font-size:.88rem}
.fo-deck:not([data-ansicht="praesentation"]) .fo-hinweis{display:none}   /* Pfeile und Wischen blättern nur dort */
.fo-knopf-klein{display:inline-flex;align-items:center;min-height:44px;padding:.5rem 1.05rem;border:1.5px solid var(--line);border-radius:999px;background:transparent;color:var(--ink-2);font:500 .92rem/1.2 var(--sans);cursor:pointer}
.fo-knopf-klein:hover{color:var(--ink);background:var(--paper);border-color:var(--kurs-linie-2)}
.fo-knopf-klein:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.fo-knopf-klein[aria-pressed="true"]{color:var(--ink);font-weight:600;background:var(--paper);border-color:var(--paper);box-shadow:var(--shadow)}
.fo-knopf-klein[hidden]{display:none}
/* Kurs-Untermenü auf einem Teil: „Präsentationen“ ist der Bereich der Seite (aria-current="true"), aussehen wie die
   aktuelle Seite in kurs-n8n.css */
.kn-unter a[aria-current="true"]{color:var(--ink);font-weight:600;background:var(--paper);border-color:var(--paper);box-shadow:var(--shadow)}

/* ---------- Folien: Lesefassung (Vorgabe) ---------- */
.fo-deck{--u:clamp(8.4px,6.4px + .5vw,10.5px);--fo-min-etikett:.75rem;position:relative}
.fo-deck:focus{outline:none}
.fo-deck:focus-visible{outline:2px solid var(--blue);outline-offset:8px;border-radius:30px}
.fo-buehne{position:relative;display:grid;gap:clamp(18px,3vh,28px);container-type:inline-size}
.fo-folie{margin:0;scroll-margin-top:1rem}
.fo-rahmen{position:relative;display:grid;grid-template-rows:auto 1fr;min-width:0;background:var(--paper);color:var(--ink);border-radius:26px;box-shadow:var(--card-shadow),0 0 0 1px var(--line);overflow:hidden;container:fo-folie / inline-size;font-family:var(--sans)}
.fo-kopf{display:flex;justify-content:space-between;gap:calc(var(--u) * 2);margin:0;padding:calc(var(--u) * 2.4) calc(var(--u) * 4.2) 0;color:var(--blue-deep);font:600 max(calc(var(--u) * .95),var(--fo-min-etikett))/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.fo-kopf-nr{flex:none;font-variant-numeric:tabular-nums;color:var(--ink-3)}
/* Schmale Folie (Handy): in der Kopfzeile nur „Teil N“, der Titel stünde in Versalien auf zwei bis drei Zeilen und
   steht ohnehin im Seitenkopf */
@container fo-folie (max-width:639.98px){.fo-kopf-titel{display:none}}
.fo-inhalt{display:flex;flex-direction:column;gap:calc(var(--u) * 1.5);min-width:0;min-height:0;padding:calc(var(--u) * 1.6) calc(var(--u) * 4.2) calc(var(--u) * 3.4);font-size:calc(var(--u) * 2.05);line-height:1.45;color:var(--ink-2)}
.fo-fuss{display:none}

/* Text in der Folie */
.fo-inhalt>*{flex-shrink:0;margin:0}   /* nichts staucht still: Überlauf misst der Bau */
.fo-inhalt p{margin:0}
.fo-ueberschrift{margin:0;color:var(--ink);font:400 calc(var(--u) * 4.3)/1.05 var(--serif);letter-spacing:-.01em;text-wrap:balance}
.fo-ueberschrift em,.fo-satz em{color:var(--blue);font-style:italic}
.fo-inhalt strong{color:var(--ink);font-weight:600}
.fo-inhalt a:not([class]){color:var(--blue-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.fo-inhalt a:not([class]):hover{color:var(--blue)}
.fo-inhalt :focus-visible,.fo-notiz :focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
/* Inline-Code bricht an den Stellen, die der Bau setzt (<wbr> nach . ( _ und vor [, fmt.code_html), Wörter nur als letzter
   Ausweg (break-word): So bleibt in Tabellen jede Spalte so breit wie das längste Stück Code zwischen zwei Umbruchstellen */
.fo-inhalt code{padding:.08em .35em;border-radius:.3em;background:var(--sand);color:var(--ink);font:400 .86em/1.3 var(--mono);overflow-wrap:break-word}
.fo-inhalt ul,.fo-inhalt ol:not([class]){display:grid;gap:calc(var(--u) * .75);margin:0;padding:0;list-style:none}
.fo-inhalt ul:not([class])>li{position:relative;padding-left:calc(var(--u) * 1.9)}
.fo-inhalt ul:not([class])>li::before{content:"";position:absolute;left:calc(var(--u) * .35);top:.6em;width:calc(var(--u) * .62);height:calc(var(--u) * .62);border-radius:50%;background:var(--sky-2)}
.fo-inhalt ol:not([class]){counter-reset:fo-punkt}
.fo-inhalt ol:not([class])>li{position:relative;padding-left:calc(var(--u) * 2.9);counter-increment:fo-punkt}
/* Zähler mittig auf der ersten Zeile: Zeile 2.05u × 1.45 hoch, Kreis 2.05u, also (2.97u - 2.05u) / 2 Abstand oben */
.fo-inhalt ol:not([class])>li::before{content:counter(fo-punkt);position:absolute;left:0;top:calc(var(--u) * .46);display:grid;place-items:center;width:calc(var(--u) * 2.05);height:calc(var(--u) * 2.05);border-radius:50%;background:var(--sky-pale);color:var(--blue-deep);font:600 calc(var(--u) * 1.3)/1 var(--sans);font-variant-numeric:tabular-nums}

/* Tabelle */
.fo-tabelle{max-width:100%;overflow-x:auto}
.fo-tabelle table{width:100%;border-collapse:collapse;font-size:calc(var(--u) * 1.68);line-height:1.35}
.fo-tabelle th{padding:0 calc(var(--u) * 1.1) calc(var(--u) * .7) 0;border-bottom:2px solid var(--sky-2);color:var(--blue-deep);font:600 max(calc(var(--u) * .95),var(--fo-min-etikett))/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;text-align:left;vertical-align:bottom}
/* Feldnamen im Tabellenkopf so, wie man sie tippt: nicht in Versalien, nicht kleiner als das Etikett */
.fo-tabelle th code{font-size:1em;letter-spacing:0;text-transform:none}
.fo-tabelle td{padding:calc(var(--u) * .62) calc(var(--u) * 1.1) calc(var(--u) * .62) 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.fo-tabelle td:first-child{color:var(--ink);font-weight:500}
.fo-tabelle tr:last-child td{border-bottom:0}

/* Codeblock */
.fo-code{margin:0;padding:calc(var(--u) * 1.1) calc(var(--u) * 1.5);border-radius:calc(var(--u) * 1.1);background:var(--sand);color:var(--ink);font:400 calc(var(--u) * 1.62)/1.45 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere}
.fo-code code{padding:0;background:none;font:inherit;overflow-wrap:inherit}
/* Code so, wie man ihn abtippt: keine Ligaturen (JetBrains Mono setzt sonst => als Doppelpfeil), keine Silbentrennung.
   Steht nach allen font-Kurzschreibungen für Code, die font-variant-ligatures sonst zurücksetzen. */
.fo-inhalt code,.fo-code,.fo-code code{font-variant-ligatures:none;font-feature-settings:"liga" 0,"calt" 0;-webkit-hyphens:manual;hyphens:manual}
/* Kennungen wie B-01 brechen nicht am Bindestrich (der Bau wickelt sie ein, Zahl und Einheit verbindet er mit U+00A0) */
.fo-nobr{white-space:nowrap}
/* String-Literale im Code (fmt.code_html) brechen nie um, jedes Leerzeichen darin bleibt sichtbar und zählt mit */
code .fo-nobr{white-space:pre}

/* Merksatz und Achtung: Etikett in Handschrift */
.fo-merke,.fo-achtung{display:flex;align-items:baseline;gap:calc(var(--u) * 1.2);padding:calc(var(--u) * 1) calc(var(--u) * 1.6);border-radius:calc(var(--u) * 1.4);background:var(--sky-pale);color:var(--ink)}
.fo-achtung{background:var(--kurs-warn-hell)}
.fo-merke-label,.fo-achtung-label{flex:none;margin:0;color:var(--blue);font:600 calc(var(--u) * 2.35)/1 'Caveat',cursive;transform:rotate(-3deg)}
.fo-achtung-label{color:var(--kurs-warn)}
.fo-merke>:not(.fo-merke-label),.fo-achtung>:not(.fo-achtung-label){min-width:0}

/* Kette: Kästen mit Pfeilen wie im n8n-Canvas */
.fo-kette{margin:0;display:grid;gap:calc(var(--u) * .8)}
.fo-kette-titel{color:var(--blue-deep);font:600 max(calc(var(--u) * .9),var(--fo-min-etikett))/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase}
/* Raster: eine Spalte je Kasten (data-glieder aus dem Bau), alle gleich breit. Die Kästen stehen in der mittleren
   Zeile und sind dort gleich hoch, auch wenn ein Name umbricht. Eine Verzweigung (data-gabel) bekommt eine breitere
   Spalte über alle drei Zeilen: Ist sie höher, wachsen die Zeilen darüber und darunter, die Kästen bleiben mittig. */
.fo-kette-liste{--fo-glieder:1;display:grid;grid-template-columns:repeat(var(--fo-glieder),minmax(0,1fr));grid-template-rows:1fr auto 1fr;column-gap:calc(var(--u) * 2.6);margin:0;padding:0;list-style:none}
.fo-kette-liste[data-glieder="2"]{--fo-glieder:2}
.fo-kette-liste[data-glieder="3"]{--fo-glieder:3}
.fo-kette-liste[data-glieder="4"]{--fo-glieder:4}
.fo-kette-liste[data-glieder="5"]{--fo-glieder:5}
.fo-kette-liste[data-glieder="6"]{--fo-glieder:6}
.fo-kette-liste[data-glieder="7"]{--fo-glieder:7}
.fo-kette-liste[data-gabel]{grid-template-columns:repeat(var(--fo-glieder),minmax(0,1fr)) minmax(0,1.5fr)}
.fo-glied{position:relative;grid-row:2;display:flex;min-width:0}
.fo-glied>.fo-kasten{flex:1}
.fo-glied+.fo-glied::before{content:"";position:absolute;left:calc(var(--u) * -2.15);top:50%;width:calc(var(--u) * 1.7);height:2px;background:var(--ink-3)}
.fo-glied+.fo-glied::after{content:"";position:absolute;left:calc(var(--u) * -.75);top:50%;width:calc(var(--u) * .6);height:calc(var(--u) * .6);border-top:2px solid var(--ink-3);border-right:2px solid var(--ink-3);transform:translate(-50%,-50%) rotate(45deg)}
.fo-kasten{display:flex;flex-direction:column;justify-content:center;gap:calc(var(--u) * .25);min-height:calc(var(--u) * 5.6);padding:calc(var(--u) * .9) calc(var(--u) * 1.1);border:2px solid var(--sky-2);border-radius:calc(var(--u) * 1);background:var(--paper);text-align:center}
.fo-kasten-trigger{border-color:var(--kurs-start);border-radius:calc(var(--u) * 2.6) calc(var(--u) * 1) calc(var(--u) * 1) calc(var(--u) * 2.6);background:var(--kurs-start-hell)}
.fo-kasten-name{color:var(--ink);font:600 max(calc(var(--u) * 1.45),var(--fo-min-etikett))/1.25 var(--sans);-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
.fo-kasten-typ{color:var(--ink-3);font:400 max(calc(var(--u) * 1.08),var(--fo-min-etikett))/1.25 var(--sans)}
.fo-gabel{grid-row:1 / 4;align-self:center;display:block}
/* Klammer links, je Zweig ein Strich nach rechts zur Beschriftung. Beschriftungen in einer Spalte (subgrid), damit
   alle Zweigkästen an derselben Kante beginnen. .fo-kette davor: .fo-inhalt ul setzt sonst padding und gap zurück. */
.fo-kette .fo-zweige{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:calc(var(--u) * .8) calc(var(--u) * .7);margin:0;padding:0 0 0 calc(var(--u) * 1.2);list-style:none;border-left:2px solid var(--ink-3)}
.fo-zweig{position:relative;grid-column:1 / -1;display:grid;grid-template-columns:max-content minmax(0,1fr);grid-template-columns:subgrid;column-gap:calc(var(--u) * .7);align-items:center}
.fo-zweig::before{content:"";position:absolute;left:calc(var(--u) * -1.2);top:50%;width:calc(var(--u) * .9);height:2px;background:var(--ink-3)}
.fo-zweig-label{justify-self:start;padding:.15em .55em;border-radius:999px;background:var(--sand);color:var(--ink-2);font:500 max(var(--u),var(--fo-min-etikett))/1.2 var(--mono)}
.fo-zweig .fo-kasten{min-width:0;min-height:calc(var(--u) * 4.4);padding-block:calc(var(--u) * .6)}

/* Zwei Spalten */
.fo-spalten{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u) * 1.6)}
.fo-spalte{display:grid;align-content:start;gap:calc(var(--u) * .6);padding:calc(var(--u) * 1.4) calc(var(--u) * 1.6);border-radius:calc(var(--u) * 1.4);background:var(--sky-air);box-shadow:inset 0 0 0 1px var(--line)}
.fo-spalte-titel{margin:0;color:var(--blue-deep);font:600 max(calc(var(--u) * .95),var(--fo-min-etikett))/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.fo-spalte p{color:var(--ink);font-size:calc(var(--u) * 2.25);line-height:1.35}

/* Titelfolie */
.fo-typ-titel .fo-rahmen{background:radial-gradient(120% 90% at 0% 0%,var(--sky-pale) 0,var(--sky-air) 45%,var(--paper) 80%)}
.fo-typ-titel .fo-inhalt{gap:calc(var(--u) * 1.4);padding-top:calc(var(--u) * 3)}
.fo-titel-kicker{color:var(--blue-deep);font:600 max(calc(var(--u) * 1.05),var(--fo-min-etikett))/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.fo-typ-titel .fo-ueberschrift{font-size:calc(var(--u) * 6.4);line-height:.98;max-width:14em}
.fo-typ-titel .fo-inhalt>p:not([class]){max-width:42em;font-size:calc(var(--u) * 1.95)}
.fo-typ-titel .fo-inhalt>figure.fo-kette:first-of-type{margin-top:auto}
.fo-typ-titel .fo-kette{max-width:calc(var(--u) * 78)}
.fo-typ-titel .fo-kette:has(.fo-gabel){max-width:none}
.fo-typ-titel .fo-kasten{min-height:calc(var(--u) * 4.6);padding-block:calc(var(--u) * .6)}
.fo-typ-titel .fo-kasten-name{font-size:max(calc(var(--u) * 1.3),var(--fo-min-etikett))}
.fo-typ-titel .fo-kasten-typ{font-size:max(calc(var(--u) * .9),var(--fo-min-etikett))}
.fo-marke{display:flex;align-items:center;gap:calc(var(--u) * .8);margin-top:calc(var(--u) * 1.6)!important;color:var(--ink-3);font:500 max(calc(var(--u) * 1.05),var(--fo-min-etikett))/1.2 var(--sans)}
.fo-marke-zeichen{flex:none;width:calc(var(--u) * 2.6);height:calc(var(--u) * 2.6);background:url('../brand/emblem-oktopus-128.webp?v=e51106d3') center/contain no-repeat}

/* Ein Satz */
.fo-typ-satz .fo-inhalt{justify-content:center;gap:calc(var(--u) * 1.6)}
.fo-typ-satz .fo-ueberschrift{color:var(--blue-deep);font:600 max(calc(var(--u) * 1.05),var(--fo-min-etikett))/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.fo-satz{max-width:20em;color:var(--ink);font:400 calc(var(--u) * 5.6)/1.05 var(--serif);letter-spacing:-.01em;text-wrap:balance}
.fo-satz-klein{max-width:38em;font-size:calc(var(--u) * 2.05)}

/* Fragen zum Selbstcheck */
.fo-fragen{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u) * 1);margin:0;padding:0;list-style:none;counter-reset:fo-frage}
.fo-fragen>li{position:relative;display:grid;align-content:start;gap:calc(var(--u) * .3);padding:calc(var(--u) * 1) calc(var(--u) * 1.6) calc(var(--u) * 1) calc(var(--u) * 4.6);border-radius:calc(var(--u) * 1.4);background:var(--sky-air);box-shadow:inset 0 0 0 1px var(--line);counter-increment:fo-frage}
.fo-fragen>li::before{content:counter(fo-frage);position:absolute;left:calc(var(--u) * 1.5);top:calc(var(--u) * .5);color:var(--blue);font:400 calc(var(--u) * 3.4)/1 var(--serif)}
.fo-frage{color:var(--ink);font-size:calc(var(--u) * 1.85);font-weight:500;line-height:1.35}
.fo-antwort{font-size:calc(var(--u) * 1.55);line-height:1.4}
.fo-antwort summary{display:inline-flex;align-items:center;gap:.45em;min-height:44px;color:var(--blue-deep);font-weight:600;cursor:pointer;list-style:none}
.fo-antwort summary::-webkit-details-marker{display:none}
.fo-antwort summary::before{content:"";width:.5em;height:.5em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg)}
.fo-antwort[open] summary::before{transform:rotate(45deg)}
.fo-antwort p{margin:0;color:var(--ink-2)}

/* Weiter im Kurs */
.fo-typ-weiter .fo-inhalt{gap:calc(var(--u) * 1.8)}
.fo-karten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--u) * 1.3);margin:0;padding:0;list-style:none}
.fo-karten>li{display:flex;min-width:0}
.fo-karten>li:first-child{grid-row:span 2}
.fo-karten[data-anzahl="1"]{grid-template-columns:minmax(0,1fr)}
.fo-karte{display:flex;flex:1;flex-direction:column;gap:calc(var(--u) * .45);padding:calc(var(--u) * 1.3) calc(var(--u) * 1.5);border-radius:calc(var(--u) * 1.4);background:var(--sky-air);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);text-decoration:none}
.fo-karte:hover{background:var(--sky-pale)}
.fo-karte:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.fo-karte-kicker{color:var(--blue-deep);font:600 max(calc(var(--u) * .9),var(--fo-min-etikett))/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.fo-karte-titel{font:400 calc(var(--u) * 2.35)/1.1 var(--serif)}
.fo-karte-liste{display:grid;gap:calc(var(--u) * .3);margin-top:calc(var(--u) * .5);color:var(--ink-2);font-size:calc(var(--u) * 1.45);line-height:1.3}
/* Lektionen ab 10 erscheinen im Lernpfad erst mit dem Schalter „Fortgeschritten“: Satz dazu unten in der Karte */
.fo-karte-hinweis{margin-top:auto;padding-top:calc(var(--u) * .7);color:var(--ink-3);font-size:calc(var(--u) * 1.3);line-height:1.35}
.fo-erik{display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--u) * 1.2) calc(var(--u) * 1.6);margin-top:auto!important}
.fo-erik-bild{flex:none;width:calc(var(--u) * 4.4);height:calc(var(--u) * 4.4);border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--paper),0 0 0 4.5px var(--sky-2)}
.fo-erik-text{display:flex;flex-direction:column;gap:.3em;flex:1 1 13em;min-width:0;margin:0}
.fo-erik-name{padding-left:.6em;color:var(--ink-3);font-size:max(calc(var(--u) * .95),var(--fo-min-etikett));font-weight:600;letter-spacing:.04em}
.fo-erik-blase{display:block;padding:.65em 1em;border-radius:1.1em 1.1em 1.1em .35em;background:var(--sky-pale);color:var(--ink);font-size:calc(var(--u) * 1.5);font-weight:500;line-height:1.4}

/* Knöpfe (Übersicht und Weiter-Folie) */
.fo-knopf{display:inline-flex;align-items:center;justify-content:center;gap:.65rem;min-height:44px;padding:.85rem 1.4rem;border:1.5px solid var(--ink);border-radius:999px;background:var(--ink);color:var(--paper);font:600 1rem/1.2 var(--sans);text-decoration:none;white-space:nowrap}
.fo-knopf::after{content:"";flex:none;width:.42rem;height:.42rem;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}
.fo-knopf:hover{background:var(--blue);border-color:var(--blue)}
.fo-knopf:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.fo-knopf-kontur{background:transparent;color:var(--ink)}
.fo-knopf-kontur::after{display:none}
.fo-knopf-kontur:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.fo-rahmen .fo-knopf{font-size:max(calc(var(--u) * 1.25),14px);padding:.8em 1.3em}

/* Erklärung unter der Folie */
.fo-notiz{max-width:46rem;margin:clamp(12px,2vh,18px) 0 0;padding:0 clamp(4px,1.5vw,12px)}
.fo-notiz-text:focus{outline:none}   /* fokussierbar nur per Klick (folien.js, tabindex -1), damit Bild ab dort scrollt */
.fo-notiz summary{display:inline-flex;align-items:center;gap:.5em;min-height:44px;color:var(--blue-deep);font:600 .78rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;list-style:none}
.fo-notiz summary::-webkit-details-marker{display:none}
.fo-notiz summary::before{content:"";width:.45rem;height:.45rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg)}
.fo-notiz[open] summary::before{transform:rotate(45deg)}
.fo-notiz summary:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}
.fo-notiz-text{display:grid;gap:.7em;color:var(--ink-2);font-size:clamp(1rem,.96rem + .2vw,1.1rem);line-height:1.6}
.fo-notiz-text p{margin:0}
.fo-notiz-text code{padding:.08em .35em;border-radius:5px;background:var(--sand);font:400 .9em var(--mono);font-variant-ligatures:none;font-feature-settings:"liga" 0,"calt" 0;overflow-wrap:break-word}
.fo-notiz-text a{color:var(--blue-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}

/* Steuerung auf der Folie (nur Präsentation): deckt genau die sichtbare Folie ab, Knöpfe unten rechts */
.fo-steuerung{position:absolute;left:0;top:0;z-index:2;width:100%;aspect-ratio:16/9;pointer-events:none}
.fo-steuerung[hidden]{display:none}
.fo-steuer-pille{position:absolute;right:1.4cqw;bottom:1.2cqw;display:flex;align-items:center;gap:2px;padding:4px;border-radius:999px;background:var(--paper);box-shadow:0 0 0 1px var(--line),0 12px 28px -18px rgba(29,43,54,.55);pointer-events:auto}
.fo-steuer-knopf{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer}
.fo-steuer-knopf svg{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.fo-steuer-knopf:hover{background:var(--sky-pale)}
.fo-steuer-knopf:disabled{color:var(--kurs-linie-2);background:transparent;cursor:default}
.fo-steuer-knopf:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.fo-zaehler{min-width:4.6em;margin:0;color:var(--ink-2);font:600 .9rem/1 var(--sans);font-variant-numeric:tabular-nums;text-align:center}

/* ---------- Präsentation: eine Folie, 16:9 ---------- */
.fo-deck[data-ansicht="praesentation"]{--u:1cqw}
/* Höhe: Die Folie lässt 6.5rem frei. Das reicht über ihr für die Werkzeugleiste oder unter ihr für den Schalter
   „Erklärung zur Folie“ samt einer Zeile Text: Nach dem Blättern holt folien.js Folie und Schalter ins Bild, die Leiste
   dazu, wenn auch sie passt. */
.fo-deck[data-ansicht="praesentation"] .fo-buehne{touch-action:pan-y pinch-zoom;display:block;max-width:calc((100vh - 6.5rem) * 16 / 9);max-width:calc((100svh - 6.5rem) * 16 / 9)}
/* Werkzeugleiste so breit wie die Folie: Begrenzt die Fensterhöhe die Folie, enden beide an derselben Kante */
.fo-deck[data-ansicht="praesentation"] .fo-leiste{max-width:calc((100vh - 6.5rem) * 16 / 9);max-width:calc((100svh - 6.5rem) * 16 / 9)}
.fo-deck[data-ansicht="praesentation"] .fo-folie[hidden]{display:none}
.fo-deck[data-ansicht="praesentation"] .fo-rahmen{aspect-ratio:16/9}
/* Unten bleibt so viel Platz wie die Steuerung hoch ist (44 px Knopf und 4 px Rand oben und unten, 1.2u Abstand zur
   Kante, 4 px Luft), mindestens 6u: Passt der Inhalt in die Folie, liegt kein Kasten und keine Zeile unter ihr. */
.fo-deck[data-ansicht="praesentation"] .fo-inhalt{overflow:hidden;padding-bottom:max(calc(var(--u) * 6),calc(56px + var(--u) * 1.2))}
.fo-deck[data-ansicht="praesentation"] .fo-kopf-nr{visibility:hidden}
/* Aufgeklappte Antworten dürfen auf kleinen Bildschirmen in der Folie scrollen, frei von der Steuerung (Platz oben) */
.fo-deck[data-ansicht="praesentation"] .fo-typ-fragen .fo-inhalt{overflow-y:auto}

/* Kleine Präsentation: Unter 1100 px Folienbreite braucht die Steuerung unten mehr als 6u. Dafür stehen die Folien
   etwas dichter: Abstände oben und zwischen den Blöcken, Tabellenzeilen, auf der Titelfolie Abstände und Rand oben.
   Etiketten ab 11 px (Folie unter 1000 px). Gemessen mit allen Teilen von 900 bis 1180 px: keine Folie zu voll,
   nichts unter der Steuerung. */
@container (max-width:1099.98px){
  .fo-deck[data-ansicht="praesentation"] .fo-rahmen>.fo-kopf{padding-top:calc(var(--u) * 2)}
  .fo-deck[data-ansicht="praesentation"] .fo-folie:not(.fo-typ-titel) .fo-rahmen>.fo-inhalt{gap:calc(var(--u) * 1.2);padding-top:calc(var(--u) * 1.2)}
  .fo-deck[data-ansicht="praesentation"] .fo-typ-titel .fo-rahmen>.fo-inhalt{gap:var(--u);padding-top:calc(var(--u) * 1.8)}
  .fo-deck[data-ansicht="praesentation"] .fo-tabelle td{padding-block:calc(var(--u) * .5)}
}
@container (max-width:999.98px){
  .fo-deck[data-ansicht="praesentation"] .fo-rahmen>*{--fo-min-etikett:.6875rem}
}

/* Vollbild: nur die Folie, mittig. „Vollbild beenden“ bleibt erreichbar (Touch-Geräte ohne Escape) und steht über
   der Folie, rechtsbündig mit ihr: Die Folie ist um die Höhe der Leiste (44 px Knopf, 8 px Abstand) kleiner, sonst
   läge der Knopf auf 16:9-Bildschirmen auf ihrer Ecke. */
.fo-deck:fullscreen{--fo-voll:min(96vw,calc((96vh - 52px) * 16 / 9));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:2vh 2vw;background:var(--greige)}
.fo-deck:fullscreen .fo-notiz,.fo-deck:fullscreen .fo-hinweis,.fo-deck:fullscreen [data-fo-ansicht]{display:none}
.fo-deck:fullscreen .fo-leiste{width:var(--fo-voll);max-width:none;margin:0}
.fo-deck:fullscreen [data-fo-vollbild]{background:var(--paper);border-color:var(--line)}
.fo-deck:fullscreen .fo-buehne{width:var(--fo-voll);max-width:none}
.fo-deck:fullscreen .fo-rahmen{box-shadow:none}
.fo-deck::backdrop{background:var(--greige)}

/* ---------- Übersicht der Teile ---------- */
.fo-teile{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,21rem),1fr));gap:clamp(1rem,.8rem + 1vw,1.5rem);margin:0;padding:0;list-style:none}
.fo-teil{display:flex;min-width:0}
.fo-teil-karte{display:flex;flex:1;flex-direction:column;gap:.55rem;min-width:0;padding:clamp(1.3rem,1rem + 1vw,1.9rem);border-top:5px solid var(--sky-2);border-radius:26px;background:var(--paper);box-shadow:var(--card-shadow)}
.fo-teil-nr{margin:0;color:var(--blue-deep);font:600 .76rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.fo-teil-titel{margin:0;font-size:clamp(1.65rem,1.35rem + 1vw,2.15rem);line-height:1.08}
.fo-teil-unter{margin:0;color:var(--ink-2);line-height:1.5}
.fo-teil-meta{margin:0;color:var(--ink-3);font-size:.9rem}
.fo-teil-aktion{display:flex;flex-wrap:wrap;align-items:flex-start;align-content:flex-start;gap:.6rem;margin:auto 0 0;padding-top:.8rem}
.fo-teil-aktion .fo-knopf{flex:none;padding:.75rem 1.2rem;font-size:.97rem}

/* ---------- Handy und schmale Fenster (Lesefassung) ---------- */
@media (max-width:640px){
  .fo-rahmen{border-radius:20px}
  .fo-kopf{padding:14px 18px 0}
  .fo-inhalt{padding:10px 18px 22px;gap:14px}
  .fo-ueberschrift{font-size:calc(var(--u) * 3.3)}
  .fo-typ-titel .fo-ueberschrift{font-size:calc(var(--u) * 4.8)}
  .fo-satz{font-size:calc(var(--u) * 3.6)}
  .fo-spalten,.fo-fragen{grid-template-columns:minmax(0,1fr)}
  .fo-karten{grid-template-columns:minmax(0,1fr)}
  .fo-karten>li:first-child{grid-row:auto}
  .fo-merke,.fo-achtung{flex-direction:column;gap:6px}
  .fo-hinweis{display:none}
  .fo-tabelle table{font-size:calc(var(--u) * 1.75)}
  .fo-tabelle td{-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:10 4 4;overflow-wrap:break-word}
  .fo-tabelle th{overflow-wrap:break-word}
  /* Fließtext nicht unter 14 px (--u ist hier 8,4 bis 9,6 px) */
  .fo-code{font-size:max(calc(var(--u) * 1.6),.875rem)}
  .fo-inhalt :not(pre,th)>code{font-size:max(.86em,.875rem)}
  .fo-erik-blase{font-size:max(calc(var(--u) * 1.5),.875rem)}
  .fo-karte-liste{font-size:max(calc(var(--u) * 1.45),.875rem)}
  .fo-karte-hinweis{font-size:max(calc(var(--u) * 1.3),.875rem)}
  .fo-antwort{font-size:max(calc(var(--u) * 1.55),.875rem)}
}

/* ---------- Schmale Folien (Lesefassung): nach der Breite der Folie, nicht des Fensters ----------
   In der Lesefassung hängt --u an der Fensterbreite, die Folie ist schmaler als 100u. Ketten und breite Tabellen
   schalten deshalb nach der Folienbreite um (Container fo-folie = .fo-rahmen). Präsentation (Folie ab 900 px) und
   Druck (1280 px) bleiben unberührt. Gemessen mit allen Teilen von 320 bis 1023 px Fensterbreite (Folie 280 bis
   983 px) und quer gehaltenen Handys: Kein Wort eines Kastens läuft über mehr als zwei Zeilen, und keine Tabelle
   scrollt waagrecht. */
@container fo-folie (max-width:899.98px){
  /* Ketten senkrecht, wenn die Folie schmaler ist als die kleinste Präsentation (900 px), alle gleich, auch zwei Ketten
     auf einer Folie: Mit Verzweigung oder ab fünf Kästen würden Kästen sonst zu schmal und Wörter zerbrochen. Der Pfeil
     zur Verzweigung trifft die Klammer, die dafür etwas eingerückt ist. */
  .fo-deck:not([data-ansicht="praesentation"]) .fo-kette-liste{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:calc(var(--u) * 2.6)}
  .fo-deck:not([data-ansicht="praesentation"]) :is(.fo-glied,.fo-gabel){grid-row:auto}
  .fo-deck:not([data-ansicht="praesentation"]) .fo-glied+.fo-glied::before{left:50%;top:calc(var(--u) * -2.15);width:2px;height:calc(var(--u) * 1.7)}
  .fo-deck:not([data-ansicht="praesentation"]) .fo-glied+.fo-glied::after{left:50%;top:calc(var(--u) * -.8);transform:translate(-50%,-50%) rotate(135deg)}
  .fo-deck:not([data-ansicht="praesentation"]) .fo-glied+.fo-gabel::before{left:calc(var(--u) * 1.6)}
  .fo-deck:not([data-ansicht="praesentation"]) .fo-glied+.fo-gabel::after{left:calc(var(--u) * 1.6 + 1px)}
  .fo-deck:not([data-ansicht="praesentation"]) .fo-kette .fo-zweige{margin-left:calc(var(--u) * 1.6)}
  .fo-deck:not([data-ansicht="praesentation"]) .fo-kasten{min-height:0}
}
/* Handy hochkant (Folie unter 400 px): Das Etikett eines Zweigs steht über seinem Kasten. Daneben nähme die Spalte der
   Etiketten, so breit wie das längste (Geschäftsführung), den Kästen den Platz, ihre Namen liefen über vier Zeilen.
   Der Strich von der Klammer zeigt auf die Mitte des Etiketts (Zeilenhöhe 1.2 und Rand .15em: 1.5 Schriftgrößen hoch). */
@container fo-folie (max-width:399.98px){
  .fo-deck:not([data-ansicht="praesentation"]) .fo-kette .fo-zweige{grid-template-columns:minmax(0,1fr)}
  .fo-deck:not([data-ansicht="praesentation"]) .fo-zweig{row-gap:4px}
  .fo-deck:not([data-ansicht="praesentation"]) .fo-zweig::before{top:calc(max(var(--u),var(--fo-min-etikett)) * .75 - 1px)}
}
/* Tabellen ab drei Spalten (data-karten aus dem Bau) unter 640 px Folienbreite als Karten: je Zeile die erste Zelle als
   Titel, darunter jede weitere Zelle als Raster aus genau zwei Teilen, links ihre Spaltenüberschrift (data-label),
   rechts ihr Inhalt (span.fo-zelle, auch wenn er aus Text, Code und Links besteht). Die Überschriften bleiben für
   Screenreader im Kopf der Tabelle; das Label davor ist für sie ausgeblendet (Alternativtext ""). */
@container fo-folie (max-width:639.98px){
  .fo-deck:not([data-ansicht="praesentation"]) .fo-tabelle[data-karten] :is(table,tbody,tr,td){display:block}
  .fo-deck:not([data-ansicht="praesentation"]) .fo-tabelle[data-karten] thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .fo-deck:not([data-ansicht="praesentation"]) .fo-tabelle[data-karten] tr{display:grid;grid-template-columns:minmax(min-content,9fr) minmax(0,16fr);column-gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
  .fo-deck:not([data-ansicht="praesentation"]) .fo-tabelle[data-karten] tr:first-child{padding-top:0}
  .fo-deck:not([data-ansicht="praesentation"]) .fo-tabelle[data-karten] tr:last-child{padding-bottom:0;border-bottom:0}
  /* Die Etikettspalte ist mindestens so breit wie das längste Wort ihres Etiketts: Etiketten brechen zwischen Wörtern,
     nie mitten im Wort und ohne Trennstrich (Spaltennamen sind oft Feldnamen wie naechster_schritt). Die Zellen einer
     Karte teilen sich die Spalten der Zeile (subgrid), so beginnt jeder Inhalt an derselben Kante. */
  .fo-deck:not([data-ansicht="praesentation"]) .fo-tabelle[data-karten] td{display:grid;grid-column:1 / -1;grid-template-columns:minmax(min-content,9fr) minmax(0,16fr);grid-template-columns:subgrid;gap:10px;padding:3px 0;border:0}
  .fo-deck:not([data-ansicht="praesentation"]) .fo-tabelle[data-karten] td::before{content:attr(data-label);content:attr(data-label) / "";color:var(--ink-3);font-size:.8125rem;font-weight:500;line-height:1.45;-webkit-hyphens:manual;hyphens:manual;padding-top:.1em}
  .fo-deck:not([data-ansicht="praesentation"]) .fo-tabelle[data-karten] td:first-child{display:block;grid-column:1 / -1;contain:inline-size;padding-bottom:5px;color:var(--ink);font-weight:600}   /* der Titel bestimmt die Spalten nicht mit */
  .fo-deck:not([data-ansicht="praesentation"]) .fo-tabelle[data-karten] td:first-child::before{content:none}
}
/* Sehr schmale Folien (unter 310 px, Handys unter 352 px: iPhone SE der ersten Generation, Display-Zoom, Galaxy Fold
   außen): Auch Tabellen mit zwei Spalten stehen als Karten, sonst schnitte ungetrenntes Literal in der ersten Spalte
   ($('Profil anlegen')) die zweite ab. Dieselben Regeln wie oben, nur für data-spalten="2". */
@container fo-folie (max-width:309.98px){
  .fo-deck:not([data-ansicht="praesentation"]) .fo-tabelle[data-spalten="2"] :is(table,tbody,tr,td){display:block}
  .fo-deck:not([data-ansicht="praesentation"]) .fo-tabelle[data-spalten="2"] thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .fo-deck:not([data-ansicht="praesentation"]) .fo-tabelle[data-spalten="2"] tr{display:grid;grid-template-columns:minmax(min-content,9fr) minmax(0,16fr);column-gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
  .fo-deck:not([data-ansicht="praesentation"]) .fo-tabelle[data-spalten="2"] tr:first-child{padding-top:0}
  .fo-deck:not([data-ansicht="praesentation"]) .fo-tabelle[data-spalten="2"] tr:last-child{padding-bottom:0;border-bottom:0}
  .fo-deck:not([data-ansicht="praesentation"]) .fo-tabelle[data-spalten="2"] td{display:grid;grid-column:1 / -1;grid-template-columns:minmax(min-content,9fr) minmax(0,16fr);grid-template-columns:subgrid;gap:10px;padding:3px 0;border:0}
  .fo-deck:not([data-ansicht="praesentation"]) .fo-tabelle[data-spalten="2"] td::before{content:attr(data-label);content:attr(data-label) / "";color:var(--ink-3);font-size:.8125rem;font-weight:500;line-height:1.45;-webkit-hyphens:manual;hyphens:manual;padding-top:.1em}
  .fo-deck:not([data-ansicht="praesentation"]) .fo-tabelle[data-spalten="2"] td:first-child{display:block;grid-column:1 / -1;contain:inline-size;padding-bottom:5px;color:var(--ink);font-weight:600}
  .fo-deck:not([data-ansicht="praesentation"]) .fo-tabelle[data-spalten="2"] td:first-child::before{content:none}
}

/* ---------- Bewegung nur, wenn erwünscht ---------- */
@media (prefers-reduced-motion:no-preference){
  .fo-deck[data-ansicht="praesentation"] .fo-folie:not([hidden]) .fo-rahmen{animation:fo-ein .32s var(--fo-ease,ease-out)}
  .fo-knopf,.fo-knopf-klein,.fo-steuer-knopf,.fo-karte{transition:background-color .2s,border-color .2s,color .2s}
  .fo-notiz summary::before{transition:transform .2s}
}
@keyframes fo-ein{from{opacity:.35;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- Druck und PDF: eine Folie je Seite, 1280 × 720 px ----------
   Nur auf den Teilen (body.fo-deckseite, Druck mit Strg+P) und in der Druckfassung für das PDF (body.fo-druckseite):
   eigene Seitengröße als benannte Seite, alles außer den Folien ausgeblendet. Die Übersicht druckt normal. */
@page fo-folie{size:1280px 720px;margin:0}
@media print{
  html:has(>.fo-deckseite),html:has(>.fo-druckseite),.fo-deckseite,.fo-druckseite{margin:0;padding:0;background:#fdfdfc!important}
  .fo-deckseite,.fo-druckseite{page:fo-folie}
  .fo-deckseite :is(.hmm-skip,.hmm-kopf,.hmm-krumen,.hmm-fuss,.hmm-menue,.kn-unter,.kn-abschluss,.fo-seitenkopf,.fo-leiste,
  .fo-steuerung,.fo-notiz),.fo-deck .fo-sr{display:none!important}
  .fo-deckseite .fo-wrap{max-width:none!important;margin:0!important;padding:0!important}
  .fo-deck{--u:12.8px}
  .fo-buehne{display:block!important;max-width:none!important;container-type:normal}
  .fo-folie,.fo-folie[hidden]{display:block!important;break-after:page;page-break-after:always;break-inside:avoid}
  .fo-folie:last-of-type{break-after:auto;page-break-after:auto}
  .fo-rahmen{width:1280px;height:720px;aspect-ratio:auto;border-radius:0;box-shadow:none!important;grid-template-rows:auto 1fr;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .fo-rahmen *{animation:none!important;transition:none!important}
  .fo-inhalt{overflow:hidden;padding-bottom:calc(var(--u) * 6)}
  .fo-kopf-nr{display:none}
  .fo-fuss{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;margin:0;padding:0 calc(var(--u) * 4.2) calc(var(--u) * 2.2);color:var(--ink-3);font:500 max(calc(var(--u) * .9),var(--fo-min-etikett))/1.2 var(--sans);letter-spacing:.06em}
  /* Titelfolie: Die Marke steht schon auf der Folie, die Fußzeile zeigt dort nur die Seitenzahl */
  .fo-typ-titel .fo-fuss>span:first-child{visibility:hidden}
  .fo-erik-bild{box-shadow:none;border:2px solid var(--sky-2)}
  .fo-antwort summary{display:none}
  .fo-antwort p{padding-top:calc(var(--u) * .2);border-top:1px solid var(--line)}
  /* Antworten im Druck immer zu sehen, auch zugeklappte (folien.js öffnet sie zusätzlich vor dem Druck) */
  .fo-antwort::details-content{display:block;content-visibility:visible}
  .fo-teil{break-inside:avoid}
}