/* ==========================================================================
   Zertifikatsplattform · Seiten-Layout (AP7)
   Ergänzt tokens.css + components.css (Design-System v2.1, unverändert aus
   Desktop/BSI-Zertifikate/design/ übernommen) um alles, was die Artboards als
   feste 1440-px-Flächen zeigen, im Betrieb aber fließen muss:
     1. Seitenrahmen, Sprunglink, Fokus
     2. Kopf (Landing) mit Mobil-Menü, App-Rahmen (Seitenleiste, Tab-Leiste)
     3. Abschnitte, Raster-Helfer, Responsive (≤ 1023 / ≤ 767 px)
     4. Prosa (Markdown aus CMS/Lektionen), Randspalte, Lösungen
     5. Formulare/Trainer-Optionen als echte <input> (Design: .z-opt)
     6. Kompatibilität: Klassen der AP1-Templates (.z-knopf, .z-karte …)
   Regeln wie components.css: nur var(--z-*), keine Farbwerte, Radius 0,
   keine Marken-Präfixe. Marken unterscheiden sich ausschließlich über Tokens.
   ========================================================================== */

/* ---- 1. Seitenrahmen ------------------------------------------------------ */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body.z-root{margin:0;min-height:100vh;display:flex;flex-direction:column;
  /* components.css setzt overflow:hidden (Artboards). Im Browser würde das den
     Viewport sperren; angeschnittene Motive clippen ihre Abschnitte selbst. */
  overflow:visible}
.z-seite{flex:1 0 auto;display:flex;flex-direction:column;min-width:0}
.z-innen{max-width:1440px;margin-left:auto;margin-right:auto;width:100%}
.z-skip{position:absolute;left:8px;top:-200px;z-index:1000;padding:14px 18px;background:var(--z-ink);color:var(--z-on-ink);font-weight:700;text-decoration:none}
.z-skip:focus{top:8px;outline:3px solid var(--z-focus);outline-offset:2px}
:where(.z-root) :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid var(--z-focus);outline-offset:3px}
:where(.z-root) img{max-width:100%;height:auto}
[hidden]{display:none!important}
.z-clip{position:relative;overflow:hidden}
.z-stack{display:flex;flex-direction:column;gap:var(--z-space-4)}
.z-stack-lg{display:flex;flex-direction:column;gap:var(--z-space-6)}
.z-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--z-space-4)}
.z-grow{flex-grow:1}
.z-mt-4{margin-top:var(--z-space-4)}.z-mt-5{margin-top:var(--z-space-5)}.z-mt-6{margin-top:var(--z-space-6)}.z-mt-7{margin-top:var(--z-space-7)}
.z-maxch{max-width:68ch}
.z-link-offen{text-decoration:none}   /* interner Link auf eine (noch) fehlende Seite */
/* Lange deutsche Komposita (Display-Titel aus Daten, Glossar) umbrechen statt
   die Seite zu verbreitern; Display-Größen skalieren unterhalb von 1440 px. */
:where(.z-root) :where(h1,h2,h3,h4,.z-display,.z-h1,.z-h2,.z-h3,.z-link,.z-lead){overflow-wrap:break-word;hyphens:auto}
.z-d-xl{font-size:min(var(--z-fs-d-xl),11vw)}
.z-d-l{font-size:min(var(--z-fs-d-l),7.8vw)}
.z-d-m{font-size:min(var(--z-fs-d-m),6vw)}
/* Sekundärtext auf Akzentfläche: keine kleine dunkle Schrift auf dem Akzent
   (DESIGN-SYSTEM §11) – Schrift folgt --z-on-accent. */
.z-fill-accent :is(.z-muted,.z-faint,.z-foot){color:inherit}
.z-seg{flex-wrap:wrap;max-width:100%}
/* Stempel ohne Deckkraft-Übergang: Die Siegel-Schrift behält während der
   Animation ihren Kontrast (automatische axe-Prüfung direkt nach dem Laden). */
@keyframes z-stamp-app{0%{transform:scale(1.25)}60%{transform:scale(.97)}100%{transform:scale(1)}}
.z-stamp{animation-name:z-stamp-app}

/* ---- 2a. Kopf der Verkaufsseite ------------------------------------------ */
.z-kopfzeile{position:relative;z-index:20;background:var(--z-bg)}
.z-kopfzeile .z-nav{max-width:1440px;margin:0 auto;box-sizing:border-box;border-bottom:0}
.z-kopfzeile{border-bottom:4px solid var(--z-line)}
.z-nav-links a[aria-current="page"]{border-bottom-color:var(--z-nav-active-line);background:var(--z-nav-active-bg);color:var(--z-nav-active-fg);padding-left:var(--z-nav-active-pad);padding-right:var(--z-nav-active-pad)}
.z-nav-aktionen{display:flex;align-items:center;gap:24px}
.z-menue{display:none;position:relative}
.z-menue>summary{list-style:none;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;cursor:pointer}
.z-menue>summary::-webkit-details-marker{display:none}
.z-menue-panel{position:absolute;right:0;top:56px;width:min(92vw,360px);display:flex;flex-direction:column;background:var(--z-bg);border:4px solid var(--z-line);box-shadow:var(--z-shadow-offset) var(--z-shadow-offset) 0 var(--z-ink);padding:8px 0}
.z-menue-panel a{display:flex;align-items:center;min-height:48px;padding:0 20px;font-weight:500;text-decoration:none;color:var(--z-text)}
.z-menue-panel a:hover{background:var(--z-paper-2)}
.z-menue-panel .z-btn{margin:8px 20px 12px}
.z-menue[open] .z-icon-auf{display:none}
.z-menue:not([open]) .z-icon-zu{display:none}

/* ---- 2b. Fußzeile ---------------------------------------------------------- */
.z-fusszeile{margin-top:auto;padding-top:64px;padding-bottom:40px}
.z-fuss-raster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--z-grid-gutter);row-gap:32px}
.z-fuss-marke{grid-column:1 / span 4;display:flex;flex-direction:column;gap:16px}
.z-fuss-spalte{grid-column:span 2;display:flex;flex-direction:column;gap:10px}
.z-fuss-spalte:last-child{grid-column:span 2}
.z-fuss-spalte a,.z-fuss-spalte button.z-textknopf{font-size:var(--z-fs-small);text-decoration:none;color:var(--z-text)}
.z-fuss-spalte a:hover,.z-fuss-spalte button.z-textknopf:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.z-fuss-unten{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;padding-top:20px;margin-top:40px;border-top:var(--z-line-w) solid var(--z-line)}
.z-fuss-unten .z-foot{max-width:860px}
.z-fuss-knoepfe{display:flex;flex-wrap:wrap;gap:12px}
.z-fuss-knoepfe .z-btn{min-height:44px}
.z-textknopf{border:0;background:transparent;padding:0;cursor:pointer;font:inherit;color:inherit;text-align:left}

/* ---- 2c. App-Rahmen --------------------------------------------------------- */
.z-app{display:flex;flex:1 0 auto;min-height:100vh}
.z-app .z-side{position:sticky;top:0;height:100vh;overflow-y:auto}
.z-app .z-side a[aria-current="page"]{background:var(--z-accent);color:var(--z-on-accent);font-weight:700}
.z-app-haupt{flex-grow:1;display:flex;flex-direction:column;min-width:0}
.z-app-inhalt{padding:40px 48px 64px;flex-grow:1;max-width:1184px;width:100%;box-sizing:border-box}
.z-app-inhalt-breit{max-width:none}
.z-apptop .z-wordmark{font-size:20px}
.z-avatar{display:grid;place-items:center;width:40px;height:40px;background:var(--z-ink);color:var(--z-on-ink);font-family:var(--z-font-mono);font-size:13px;flex:none}
.z-tabbar{display:none}
.z-dash{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-content:start}
.z-dash>.z-span-12{grid-column:1 / -1}
.z-dash>.z-span-7{grid-column:span 7}
.z-dash>.z-span-5{grid-column:span 5}
.z-dash>.z-span-6{grid-column:span 6}
.z-block-body{padding:24px;display:flex;flex-direction:column;gap:14px}
.z-block-head .z-tag{border-color:var(--z-on-ink);color:var(--z-on-ink)}
.z-block-head .z-tag-warn,.z-block-head .z-tag-ok,.z-block-head .z-tag-bad{color:inherit}
.z-block-head .z-tag-ok{color:var(--z-on-ok)}.z-block-head .z-tag-warn{color:var(--z-on-warn)}.z-block-head .z-tag-bad{color:var(--z-on-bad)}
.z-marke-linie{position:relative}
.z-bereitschaft-marke{position:absolute;top:-6px;width:4px;height:28px;background:var(--z-ink);margin-left:-2px}

/* ---- 3. Abschnitte ----------------------------------------------------------- */
.z-abschnitt{padding-top:112px}
.z-abschnitt-ende{padding-bottom:112px}
.z-sec>.z-sec-num{grid-column:1 / span 2}
.z-sec>.z-sec-titel{grid-column:3 / span 6}
.z-sec>.z-sec-lead{grid-column:10 / span 3}
.z-sec>.z-sec-titel-breit{grid-column:3 / span 10}
.z-g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--z-grid-gutter);row-gap:var(--z-space-6)}
.z-c1-4{grid-column:1 / span 4}.z-c1-6{grid-column:1 / span 6}.z-c1-7{grid-column:1 / span 7}.z-c1-8{grid-column:1 / span 8}
.z-c3-8{grid-column:3 / span 8}.z-c3-10{grid-column:3 / span 10}
.z-c5-8{grid-column:5 / span 8}.z-c6-7{grid-column:6 / span 7}.z-c7-6{grid-column:7 / span 6}
.z-c8-5{grid-column:8 / span 5}.z-c9-4{grid-column:9 / span 4}.z-c10-3{grid-column:10 / span 3}
.z-s3{grid-column:span 3}.z-s4{grid-column:span 4}.z-s6{grid-column:span 6}
.z-kopfbereich{padding-top:56px;padding-bottom:64px}
.z-brotkrumen{display:flex;flex-wrap:wrap;gap:10px}
.z-brotkrumen a{text-decoration:none}
.z-brotkrumen a:hover{text-decoration:underline}
.z-hero{position:relative;overflow:hidden;padding-top:52px;padding-bottom:64px;min-height:560px}
/* Motivfläche angeschnitten hinter dem Siegel (oben rechts), nie unter Text:
   Die Motivfarbe ist je Marke hell (Rot/Orange) oder dunkel (Anthrazit/Messing). */
.z-hero-form{position:absolute;right:-140px;top:-140px;width:460px;height:460px}
.z-hero-inhalt{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--z-grid-gutter);row-gap:40px;align-items:start}
/* Titel über die volle Breite, Siegel liegt oben rechts darüber (Artboard 01) */
.z-hero-titel{grid-column:1 / -1;grid-row:1}
.z-hero-siegel{grid-column:10 / span 3;grid-row:1;justify-self:end;align-self:start;position:relative;z-index:1}
.z-hero-text{grid-column:1 / span 6;display:flex;flex-direction:column;gap:28px}
.z-hero-fakten{grid-column:7 / span 6;align-self:end}
.z-hero-claim{font-size:34px;font-weight:700;line-height:1.12;letter-spacing:-0.015em}
.z-knopfgruppe{display:flex;flex-wrap:wrap}
.z-knopfgruppe .z-btn+.z-btn-secondary{border-left-width:0}
.z-schritte{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--z-grid-gutter);row-gap:32px;margin-top:48px}
.z-schritte-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.z-schritt{border-top:6px solid var(--z-line);padding-top:12px;display:flex;flex-direction:column;gap:12px}
.z-schritt.is-akzent{border-top-color:var(--z-motif-color)}
.z-zeilen{border-bottom:3px solid var(--z-line)}
.z-zeile{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--z-grid-gutter);row-gap:12px;border-top:3px solid var(--z-line);padding:28px 0;align-items:start}
.z-punkte{display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;padding:20px 0;border-top:3px solid var(--z-line)}
.z-punkte:last-child{border-bottom:3px solid var(--z-line)}
.z-liste-quadrat li{display:flex;gap:10px}
.z-liste-quadrat li::before{content:"";flex:none;width:8px;height:8px;margin-top:.55em;background:currentColor}
.z-liste-linien li{border-top:3px solid var(--z-line);padding:12px 0;font-weight:500}
.z-liste-linien{border-bottom:3px solid var(--z-line)}
.z-module{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px;border-bottom:3px solid var(--z-line);margin-top:48px}
.z-module li{display:grid;grid-template-columns:64px minmax(0,1fr) 80px;gap:12px;align-items:baseline;padding:16px 0;border-top:3px solid var(--z-line)}
.z-preis{font-family:var(--z-font-display);font-weight:var(--z-display-weight);font-stretch:var(--z-display-stretch);letter-spacing:-0.04em;line-height:.9;font-variant-numeric:lining-nums}
.z-preis-xl{font-size:96px}.z-preis-l{font-size:72px}.z-preis-m{font-size:48px}
.z-preiskarte{padding:28px;display:flex;flex-direction:column;gap:16px}
.z-preiskarte-rahmen{border:3px solid var(--z-line)}
.z-cta-band{padding-top:48px;padding-bottom:48px}
.z-faq details{border-top:3px solid var(--z-line)}
.z-faq details:last-child{border-bottom:3px solid var(--z-line)}
.z-faq summary{list-style:none;display:grid;grid-template-columns:64px minmax(0,1fr) 44px;align-items:center;min-height:76px;padding:12px 0;cursor:pointer;font-size:22px;font-weight:700;line-height:1.25;letter-spacing:-0.01em}
.z-faq summary::-webkit-details-marker{display:none}
.z-faq summary .z-mono{font-size:14px;font-weight:500;color:var(--z-accent-text)}
.z-faq details[open] .z-plus::after{display:none}
.z-faq .z-faq-a{padding-bottom:28px}
.z-hinweisband{display:flex;flex-wrap:wrap;align-items:center;gap:24px 40px;padding-top:28px;padding-bottom:28px}
.z-status-gueltig{background:var(--z-ok);color:var(--z-on-ok)}
.z-status-ungueltig{background:var(--z-bad);color:var(--z-on-bad)}
.z-status-offen{background:var(--z-paper-3);color:var(--z-text)}
.z-siegel-rechts{display:flex;flex-direction:column;align-items:flex-end;gap:16px}
.z-zertifikat-muster{position:relative;min-height:460px;background:var(--z-sheet);color:var(--z-text);padding:28px;display:flex;flex-direction:column}
.z-kasten{border-top:6px solid var(--z-line);padding-top:12px;display:flex;flex-direction:column;gap:6px}
.z-kasten-akzent{border-top-color:var(--z-motif-color)}

/* ---- Preisumschalter Privat/Firma (ohne JS: beide Preise sichtbar) ------- */
.z-preiswahl{display:inline-flex}
.z-preis-netto,.z-preis-brutto{display:block}
.z-preise:has(input[value="privat"]:checked) .z-preis-netto{display:none}
.z-preise:has(input[value="firma"]:checked) .z-preis-brutto{display:none}
.z-seg label:has(input:checked){background:var(--z-ink);color:var(--z-on-ink)}
.z-seg label:has(input:focus-visible){outline:3px solid var(--z-focus);outline-offset:2px}

/* ---- 4. Prosa (Markdown) ------------------------------------------------------ */
.z-prosa{font-size:var(--z-fs-body);line-height:1.65;max-width:720px}
.z-prosa>*+*{margin-top:1em}
.z-prosa h2{font-size:28px;font-weight:700;line-height:1.2;letter-spacing:-0.015em;margin-top:1.8em;padding-top:14px;border-top:var(--z-line-w-heavy) solid var(--z-line)}
.z-prosa h3{font-size:var(--z-fs-h4);font-weight:700;line-height:1.3;margin-top:1.6em}
.z-prosa h4{font-size:var(--z-fs-body);font-weight:700;margin-top:1.4em}
.z-prosa h2+*,.z-prosa h3+*{margin-top:.6em}
.z-prosa ul{padding-left:0}
.z-prosa ul>li{position:relative;padding-left:22px}
.z-prosa ul>li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;background:var(--z-motif-color)}
.z-prosa ol{list-style:decimal;padding-left:1.6em}
.z-prosa ol>li::marker{font-family:var(--z-font-mono);font-weight:600;color:var(--z-accent-text)}
.z-prosa li+li{margin-top:.4em}
.z-prosa a{color:var(--z-text);font-weight:500;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.z-prosa a:hover{color:var(--z-accent-text)}
.z-prosa strong{font-weight:700}
.z-prosa blockquote{border-left:6px solid var(--z-motif-color);background:var(--z-sheet);padding:14px 18px}
.z-prosa blockquote>*+*{margin-top:.6em}
.z-prosa code{font-family:var(--z-font-mono);font-size:.92em;background:var(--z-code-bg);padding:.06em .36em}
.z-prosa pre{background:var(--z-term-bg);color:var(--z-term-fg);padding:16px 20px;overflow-x:auto;font-family:var(--z-font-mono);font-size:var(--z-term-font-size)}
.z-prosa pre code{background:transparent;padding:0;color:inherit}
.z-tabellen-rahmen{max-width:100%;overflow-x:auto}
.z-tabellen-rahmen:focus-visible{outline:3px solid var(--z-focus);outline-offset:2px}
.z-prosa table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.4}
.z-prosa th{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-align:left;padding:10px 12px 10px 0;border-bottom:3px solid var(--z-line);vertical-align:bottom}
.z-prosa td{padding:12px 12px 12px 0;border-bottom:1px solid var(--z-line-soft);vertical-align:top}
.z-prosa hr{height:0;border:0;border-top:var(--z-line-w) solid var(--z-line)}
.z-prosa small{font-size:var(--z-fs-foot);color:var(--z-text-3)}
.z-prosa img{display:block}
.z-prosa .footnote{font-size:var(--z-fs-foot);color:var(--z-text-2)}
.z-prosa details{border:3px solid var(--z-line);padding:0 18px}
.z-prosa details>summary{min-height:48px;display:flex;align-items:center;font-weight:700;cursor:pointer}
.z-prosa details[open]>summary{border-bottom:1px solid var(--z-line-soft);margin-bottom:12px}
.z-prosa details[open]{padding-bottom:16px}

/* Wissen-/SEO-Layout: Artikel + Randspalte */
.z-artikel{display:grid;grid-template-columns:minmax(0,1fr) 320px;column-gap:64px;align-items:start}
.z-artikel-rand{position:sticky;top:24px;display:flex;flex-direction:column;gap:24px}
.z-toc a{display:block;padding:6px 0;font-size:var(--z-fs-small);text-decoration:none;color:var(--z-text)}
.z-toc a:hover{text-decoration:underline}

/* Lektion: Text 680 px, Randspalte 280 px (Sidenotes wie im Artboard 07) */
.z-lektion-layout{padding:48px 48px 56px 72px}
.z-lektion-text{max-width:680px;margin-right:344px;font-size:18px;line-height:1.7}
.z-lektion-text>*+*{margin-top:1em}
.z-lektion-text h2{font-size:28px;font-weight:700;line-height:1.2;letter-spacing:-0.015em;margin-top:1.6em}
.z-lektion-text h3{font-size:var(--z-fs-h3);font-weight:700;margin-top:1.4em}
.z-lektion-text ul>li{position:relative;padding-left:22px}
.z-lektion-text ul>li::before{content:"";position:absolute;left:2px;top:.68em;width:8px;height:8px;background:var(--z-motif-color)}
.z-lektion-text ol{list-style:decimal;padding-left:1.6em}
.z-lektion-text table{width:100%;border-collapse:collapse;font-size:15px}
.z-lektion-text th{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-align:left;padding:10px 12px 10px 0;border-bottom:3px solid var(--z-line)}
.z-lektion-text td{padding:12px 12px 12px 0;border-bottom:1px solid var(--z-line-soft)}
.z-lektion-text code{font-family:var(--z-font-mono);font-size:.92em;background:var(--z-code-bg);padding:.06em .36em}
.z-lektion-text a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.z-rand{float:right;clear:right;width:280px;margin-right:-344px;margin-top:0;border-top:6px solid var(--z-line);padding-top:12px;font-size:var(--z-fs-small);line-height:1.5;color:var(--z-text-2)}
.z-rand>*+*{margin-top:.5em}
.z-rand strong:first-child{display:block;color:var(--z-accent-text);font-size:var(--z-fs-label);letter-spacing:.08em;text-transform:uppercase}
.z-loesung{border:3px solid var(--z-line);background:var(--z-sheet);padding:0 18px}
.z-loesung>summary{list-style:none;min-height:52px;display:flex;align-items:center;gap:12px;font-size:16px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;cursor:pointer}
.z-loesung>summary::-webkit-details-marker{display:none}
.z-loesung>summary::before{content:"+";font-family:var(--z-font-mono);font-size:20px;width:20px}
.z-loesung[open]>summary::before{content:"–"}
.z-loesung[open]{padding-bottom:18px}
.z-loesung[open]>summary{border-bottom:1px solid var(--z-line-soft);margin-bottom:12px}
.z-lernkarte-stapel{position:relative;margin-right:16px;margin-bottom:16px}
.z-lernkarte-stapel::before,.z-lernkarte-stapel::after{content:"";position:absolute;inset:0}
.z-lernkarte-stapel::before{transform:translate(16px,16px);background:var(--z-ink)}
.z-lernkarte-stapel::after{transform:translate(8px,8px);background:var(--z-accent)}
.z-lernkarte-blatt{position:relative;z-index:1;min-height:220px;background:var(--z-sheet);border:3px solid var(--z-line);display:flex;flex-direction:column;gap:14px;padding:24px 32px}
.z-lernkarte-blatt>summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;gap:14px}
.z-lernkarte-blatt>summary::-webkit-details-marker{display:none}
.z-lernkarte-frage{font-size:28px;font-weight:700;line-height:1.2;letter-spacing:-0.015em}
.z-lernkarte-blatt[open] .z-lernkarte-tipp{display:none}
.z-abschluss{padding:28px;display:flex;flex-wrap:wrap;align-items:center;gap:20px}

/* ---- 5. Trainer: Optionen als echte Eingaben ------------------------------- */
.z-frage-titel{font-size:36px;font-weight:700;line-height:1.15;letter-spacing:-0.02em}
.z-optionen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.z-optionen-1sp{grid-template-columns:minmax(0,1fr)}
label.z-opt{position:relative;min-height:80px}
label.z-opt>input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
label.z-opt:has(input:checked){background:var(--z-ink);color:var(--z-on-ink)}
label.z-opt:has(input:checked) .z-opt-key{background:var(--z-accent);color:var(--z-on-accent)}
label.z-opt:has(input:focus-visible){outline:3px solid var(--z-focus);outline-offset:3px}
label.z-opt:has(input:disabled){cursor:default}
label.z-opt.is-correct,label.z-opt.is-wrong,label.z-opt.is-dim{background:var(--z-sheet);color:var(--z-text)}
label.z-opt.is-dim{color:var(--z-text-3)}
label.z-opt.is-correct .z-opt-key{background:var(--z-ok);color:var(--z-on-ok)}
label.z-opt.is-wrong .z-opt-key{background:var(--z-bad);color:var(--z-on-bad)}
.z-opt-haken{font-family:var(--z-font-mono);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.z-janein{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 24px;align-items:center;padding:14px 0;border-top:3px solid var(--z-line)}
.z-janein:last-child{border-bottom:3px solid var(--z-line)}
.z-janein.is-correct{border-left:6px solid var(--z-ok);padding-left:12px}
.z-janein.is-wrong{border-left:6px solid var(--z-bad);padding-left:12px}
.z-janein .z-seg label{min-height:44px;padding:0 16px}
.z-lueckentext{font-size:22px;line-height:2.1}
.z-luecke{display:inline-flex;align-items:stretch;vertical-align:middle;border:3px solid var(--z-line);background:var(--z-sheet);margin:0 4px}
.z-luecke input{border:0;background:transparent;min-width:6ch;width:12ch;height:44px;padding:0 10px;font-family:var(--z-font-mono);font-size:18px;font-weight:500;color:var(--z-text)}
.z-luecke input:focus{outline:3px solid var(--z-focus);outline-offset:-3px}
.z-luecke.is-wrong{border-color:var(--z-bad)}.z-luecke.is-correct{border-color:var(--z-ok)}
.z-reihenfolge li{display:grid;grid-template-columns:80px minmax(0,1fr);gap:16px;align-items:center;padding:12px 0;border-top:3px solid var(--z-line)}
.z-reihenfolge input{height:48px;width:72px;border:var(--z-line-w) solid var(--z-line-input);background:var(--z-sheet);font-family:var(--z-font-mono);font-size:18px;text-align:center}
.z-trainer{display:flex;flex:1 0 auto;min-height:calc(100vh - 72px)}
.z-trainer-stand{width:400px;flex:none;padding:40px 48px;display:flex;flex-direction:column;gap:8px}
.z-trainer-haupt{flex-grow:1;padding:44px 56px 40px;display:flex;flex-direction:column;gap:24px;min-width:0}
.z-trainer-zellen{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));gap:4px;margin-top:24px}
.z-trainer-zellen>span{height:16px;border:2px solid var(--z-on-accent)}
.z-trainer-zellen>span.is-done{background:var(--z-on-accent)}
.z-trainer-zellen>span.is-bad{background:transparent;border-style:dashed}
.z-trainer-zellen>span.is-cur{background:var(--z-ink);border-color:var(--z-ink)}
.z-warum{border-top:12px solid var(--z-line);padding-top:18px;display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px}
.z-trainer-fuss{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:auto}
.z-navigator-raster{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px}
.z-navigator-raster button{min-height:44px;border:2px solid var(--z-line);background:var(--z-sheet);color:var(--z-text);font-family:var(--z-font-mono);font-size:13px;font-weight:500;cursor:pointer}
.z-navigator-raster button.ist-beantwortet{background:var(--z-ink);color:var(--z-on-ink);border-color:var(--z-ink)}
.z-navigator-raster button.ist-aktuell{background:var(--z-accent);color:var(--z-on-accent);border-color:var(--z-accent)}
.z-navigator-raster button.ist-markiert{box-shadow:inset 0 -6px 0 var(--z-warn)}
.z-pruefung{display:grid;grid-template-columns:minmax(0,1fr) 360px;flex:1 0 auto}
.z-pruefung-haupt{padding:44px 56px;display:flex;flex-direction:column;gap:24px;min-width:0}
.z-pruefung-rand{padding:32px;display:flex;flex-direction:column;gap:20px;border-left:4px solid var(--z-line)}
.z-timer-gross{font-size:34px;line-height:1.1;white-space:nowrap}
.z-timer.timer-knapp{color:var(--z-warn)}
.z-timer.timer-kritisch{color:var(--z-bad)}

/* ---- Dialog im Fluss (Abgabe, Consent) --------------------------------------- */
.z-dialog-fluss{position:relative;max-width:720px;background:var(--z-paper);border:4px solid var(--z-line);box-shadow:var(--z-shadow-offset) var(--z-shadow-offset) 0 var(--z-ink);padding:32px;display:flex;flex-direction:column;gap:18px}
.z-cmp{position:fixed;left:0;right:0;bottom:0;z-index:50;border-top:4px solid var(--z-line);padding-top:20px;padding-bottom:20px}
.z-cmp-innen{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between}
.z-cmp-innen p{max-width:760px}
.z-cmp-auswahl{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center}
.z-cmp-auswahl legend{float:left;margin-right:8px}
.z-cmp-auswahl label{display:inline-flex;gap:6px;align-items:center;min-height:44px}

/* ---- 6. Kompatibilität AP1-Templates (Admin, Konto, Recht …) --------------- */
.z-altlayout{padding-top:40px;padding-bottom:64px}
:where(.z-altlayout) :where(h1){font-size:var(--z-fs-h1);font-weight:700;line-height:1.05;letter-spacing:-0.02em;margin:0 0 24px}
:where(.z-altlayout) :where(h2){font-size:var(--z-fs-h3);font-weight:700;line-height:1.2;margin:32px 0 12px}
:where(.z-altlayout) :where(h3){font-size:var(--z-fs-h4);font-weight:700;margin:20px 0 8px}
:where(.z-altlayout) :where(p,ul,ol,table,form,dl){margin:0 0 14px}
:where(.z-altlayout) :where(ul){list-style:square;padding-left:1.4em}
:where(.z-altlayout) :where(ol){list-style:decimal;padding-left:1.6em}
:where(.z-altlayout) :where(a:not([class])){font-weight:500;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
:where(.z-altlayout) :where(details){margin:0 0 12px}
:where(.z-altlayout) :where(summary){cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center}
.z-inline{display:inline}
.z-klein{font-size:var(--z-fs-small)}
.z-leise{color:var(--z-text-2)}
.z-hinweis{font-size:13px;line-height:1.45;color:var(--z-text-3)}
.z-karte{border:3px solid var(--z-line);background:var(--z-sheet);padding:24px;margin-bottom:24px}
.z-karte>:last-child{margin-bottom:0}
.z-raster{display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(min(100%,18rem),1fr));margin-bottom:24px}
.z-raster>.z-karte{margin-bottom:0}
.z-knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border:3px solid var(--z-line);background:transparent;color:var(--z-text);font-family:var(--z-font-sans);font-size:15px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;line-height:1.1;text-decoration:none;cursor:pointer;vertical-align:middle;margin:0 8px 8px 0}
.z-knopf:hover{background:var(--z-text);color:var(--z-bg)}
.z-knopf--primaer{background:var(--z-accent);border-color:var(--z-accent);color:var(--z-on-accent)}
.z-knopf--primaer:hover{background:var(--z-accent-hover);border-color:var(--z-accent-hover);color:var(--z-on-accent)}
.z-knopf--klein{min-height:44px;padding:0 14px;font-size:13px;border-width:2px}
.z-knopf--schlicht{border-color:transparent;padding:0 4px;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.z-knopf--schlicht:hover{background:transparent;color:var(--z-accent-text)}
.z-knopf[disabled]{background:var(--z-paper-3);border-color:var(--z-paper-3);color:var(--z-text-3);cursor:not-allowed}
.z-feld{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.z-feld>label{font-size:14px;font-weight:700;line-height:1.3}
.z-feld :where(input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],input[type=tel],input[type=url],input[type=search],select,textarea){display:block;width:100%;min-height:52px;padding:0 14px;border:var(--z-line-w) solid var(--z-line-input);border-radius:var(--z-radius);background:var(--z-sheet);font-size:16px;color:var(--z-text)}
.z-feld :where(textarea){min-height:128px;padding:12px 14px;line-height:1.5}
.z-feld :where(input,select,textarea):focus{outline:3px solid var(--z-focus);outline-offset:0}
.z-feld :where(input[type=checkbox],input[type=radio]){width:22px;height:22px;accent-color:var(--z-motif-color)}
.z-meldungen{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}
.z-meldung{padding:14px 18px 16px;background:var(--z-sheet);border-top:var(--z-line-w-heavy) solid var(--z-line);font-size:15px;line-height:1.5}
.z-meldung--success{background:var(--z-ok-tint);border-top-color:var(--z-ok)}
.z-meldung--error{background:var(--z-bad-tint);border-top-color:var(--z-bad)}
.z-meldung--info{background:var(--z-warn-tint);border-top-color:var(--z-warn)}
:is([data-surface="ink"],[data-surface="deep"]) :is(.z-meldung--success,.z-meldung--error,.z-meldung--info){color:var(--z-ink)}
.z-tabelle{width:100%;border-collapse:collapse;font-size:15px;line-height:1.4}
.z-tabelle th{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-align:left;padding:10px 12px 10px 0;border-bottom:3px solid var(--z-line);vertical-align:bottom}
.z-tabelle td{padding:12px 12px 12px 0;border-bottom:1px solid var(--z-line-soft);vertical-align:top}
.z-tabelle-rolle{display:block;overflow-x:auto}
.z-badge{display:inline-flex;align-items:center;height:24px;padding:0 8px;border:2px solid var(--z-line);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;vertical-align:middle}
.z-badge--ok{background:var(--z-ok);border-color:var(--z-ok);color:var(--z-on-ok)}
.z-badge--warn{background:var(--z-warn);border-color:var(--z-warn);color:var(--z-on-warn)}
.z-badge--fehler{background:var(--z-bad);border-color:var(--z-bad);color:var(--z-on-bad)}
.z-fortschritt{position:relative;height:10px;background:var(--z-progress-track);margin:8px 0 14px}
.z-fortschritt>span{position:absolute;left:0;top:0;bottom:0;background:var(--z-progress-fill)}
.z-option{display:block;padding:14px 16px;border:3px solid var(--z-line);background:var(--z-sheet);margin-bottom:8px}
.z-option--richtig{border-color:var(--z-ok)}
.z-option--falsch{border-color:var(--z-bad)}
.z-lernkarte{min-height:10rem;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;text-align:center}
.z-navigator{display:flex;flex-wrap:wrap;gap:4px;margin:16px 0}

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width:1180px){
  .z-artikel{grid-template-columns:minmax(0,1fr)}
  .z-artikel-rand{position:static}
  .z-lektion-text{margin-right:0}
  .z-rand{float:none;width:auto;margin:1.2em 0}
  .z-lektion-layout{padding:40px 32px 56px}
  .z-pruefung{grid-template-columns:minmax(0,1fr)}
  .z-pruefung-rand{border-left:0;border-top:4px solid var(--z-line)}
}
@media (max-width:1023px){
  .z-nav{height:64px;gap:12px;padding:0 8px 0 20px}
  .z-nav-links,.z-nur-desktop{display:none!important}
  .z-menue{display:block;margin-left:auto}
  .z-hero-titel,.z-hero-siegel,.z-hero-text,.z-hero-fakten{grid-column:1 / -1;grid-row:auto}
  .z-hero-siegel{justify-self:start;order:-1}
  .z-hero-siegel .z-seal{font-size:6px!important}
  .z-hero{min-height:0}
  .z-hero-form{width:220px;height:220px;right:-100px;top:-110px}
  .z-sec>.z-sec-num,.z-sec>.z-sec-titel,.z-sec>.z-sec-lead,.z-sec>.z-sec-titel-breit{grid-column:1 / -1}
  .z-sec{row-gap:12px}
  .z-g>*{grid-column:1 / -1!important}
  .z-zeile>*{grid-column:1 / -1!important}
  .z-schritte,.z-schritte-5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .z-module{grid-template-columns:minmax(0,1fr)}
  .z-dash>*{grid-column:1 / -1!important}
  .z-fuss-marke{grid-column:1 / -1}
  .z-fuss-spalte,.z-fuss-spalte:last-child{grid-column:span 6}
  .z-app .z-side{display:none}
  .z-tabbar{display:grid;position:sticky;bottom:0;z-index:30}
  .z-app-inhalt{padding:28px 20px 48px}
  .z-trainer{flex-direction:column}
  .z-trainer-stand{width:auto;padding:24px 20px}
  .z-trainer-stand .z-num{font-size:88px!important}
  .z-trainer-haupt{padding:24px 20px 32px}
  .z-pruefung-haupt{padding:24px 20px}
  .z-pruefung-rand{padding:24px 20px}
  .z-apptop{padding:0 20px;gap:12px}
}
@media (max-width:767px){
  .z-d-xl{font-size:var(--z-fs-d-xl)}.z-d-l{font-size:var(--z-fs-d-l)}.z-d-m{font-size:var(--z-fs-d-m)}
  .z-abschnitt{padding-top:64px}
  .z-abschnitt-ende{padding-bottom:64px}
  .z-kopfbereich{padding-top:32px;padding-bottom:40px}
  .z-sec-num{font-size:56px}
  .z-hero{padding-top:28px}
  .z-hero-claim{font-size:24px}
  .z-schritte,.z-schritte-5{grid-template-columns:minmax(0,1fr)}
  .z-fuss-spalte,.z-fuss-spalte:last-child{grid-column:1 / -1}
  .z-facts{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .z-fact-value{font-size:28px!important}
  .z-num{font-size:var(--z-fs-num)!important}
  .z-preis-xl{font-size:64px}.z-preis-l{font-size:52px}
  .z-optionen{grid-template-columns:minmax(0,1fr)}
  .z-opt{grid-template-columns:48px minmax(0,1fr) auto;gap:14px;font-size:16px!important}
  .z-frage-titel{font-size:24px}
  .z-warum{grid-template-columns:minmax(0,1fr)}
  .z-faq summary{grid-template-columns:44px minmax(0,1fr) 32px;font-size:18px;min-height:64px}
  .z-faq .z-faq-a{padding:0 0 24px 0}
  .z-module li{grid-template-columns:52px minmax(0,1fr)}
  .z-module li>:last-child{display:none}
  .z-lernkarte-frage{font-size:21px}
  .z-lernkarte-blatt{padding:20px}
  .z-lektion-text{font-size:17px}
  .z-lektion-layout{padding:28px 20px 48px}
  .z-btn-lg{min-height:56px;padding:0 20px;font-size:16px}
  .z-btn{white-space:normal;text-align:center}
  .z-knopfgruppe .z-btn{width:100%}
  .z-knopfgruppe .z-btn+.z-btn-secondary{border-left-width:3px;border-top-width:0}
  .z-dialog-fluss{padding:20px}
  .z-block-body{padding:20px!important}
  .z-table th,.z-tabelle th{white-space:normal}
  .z-tabelle{table-layout:fixed}
  .z-tabelle th,.z-tabelle td{overflow-wrap:anywhere}
  .z-tag{white-space:normal;height:auto;min-height:28px;padding-top:4px;padding-bottom:4px}
  .z-seg label{flex:1 1 auto}
  .z-display{overflow-wrap:anywhere;hyphens:auto}
  .z-trainer-zellen{grid-template-columns:repeat(10,minmax(0,1fr))}
  .z-lueckentext{font-size:18px}
  .z-timer-gross{font-size:32px}
  .z-zertifikat-muster{min-height:0}
  .z-knopf{width:100%;margin-right:0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}
@media print{
  .z-kopfzeile,.z-fusszeile,.z-cmp,.z-skip,.z-tabbar{display:none!important}
}

/* ---- AP37: Newsletter (Footer-Formular, Freebie-Seite) --------------------- */
.z-fuss-newsletter{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:12px 32px;align-items:start;padding-top:24px;border-top:var(--z-line-w) solid var(--z-line)}
.z-fuss-newsletter form{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.z-fuss-newsletter .z-field{flex:1 1 240px;margin:0}
.z-fuss-newsletter .z-einwilligung{flex:1 1 100%;margin:0}
.z-einwilligung{font-size:var(--z-fs-small);color:var(--z-muted, inherit);line-height:1.5}
@media (max-width: 760px){.z-fuss-newsletter{grid-template-columns:1fr}}
/* AP34 – Reflow bei 320 px (WCAG 1.4.10, E2E 11): Die Wortmarke darf
   schrumpfen, damit der Menüknopf im Bild bleibt; Siegel der Verifikation kleiner. */
@media (max-width:479px){
  .z-nav .z-wordmark{min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;font-size:18px}
  .z-nav .z-wordmark .z-mark{flex:none}
  .z-menue{flex:none}
  .z-siegel-rechts .z-seal{font-size:9px!important}
}
@media (max-width:359px){
  .z-nav .z-wordmark{font-size:16px;gap:8px}
}

/* ---- AP40: Rechtsseiten-Entwurf (Staging), fachliche Prüfung, Kontakt ---- */
.z-entwurf-banner{display:flex;flex-wrap:wrap;gap:4px 12px;padding:14px 18px 16px;background:var(--z-warn-tint);border:var(--z-line-w-heavy) solid var(--z-warn);color:var(--z-ink);line-height:1.5}
.z-entwurf-banner strong{flex:1 1 100%}
mark.z-marker{background:var(--z-warn-tint);color:var(--z-ink);outline:2px solid var(--z-warn);outline-offset:1px;padding:0 2px}
mark.z-marker code{background:transparent}
/* Lange URLs/E-Mail-Adressen und Marker in Rechtstexten umbrechen (Reflow 320 px) */
.z-prosa{overflow-wrap:break-word}
.z-prosa :is(a,code,mark){overflow-wrap:anywhere}
.z-pruefhinweis{display:inline-block;margin:0;padding:4px 10px;border:var(--z-line-w) solid var(--z-line);background:var(--z-paper-2);color:var(--z-text-2);font-size:var(--z-fs-small)}
/* AP51: offene [PLATZHALTER] (nur Staging/Admin sichtbar) und Autorenbox unter Ratgebern */
.z-platzhalter{background:var(--z-accent-tint);color:var(--z-text);outline:2px dashed var(--z-accent-text);outline-offset:1px;padding:0 2px}
.z-autorenbox{display:flex;flex-direction:column;gap:8px;padding:20px 24px;border-top:var(--z-line-w) solid var(--z-line);background:var(--z-sheet)}
.z-autorenbox h2{margin:0}
.z-autorenbox p,.z-autorenbox ul{margin:0}
.z-kontakt-raster{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:32px 48px;align-items:start}
.z-kontakt-raster address{font-style:normal;line-height:1.6}
.z-kontakt-raster form{display:grid;gap:16px}
@media (max-width: 760px){.z-kontakt-raster{grid-template-columns:1fr}}