@import url("../fonts/zz-glock.css");
/* =============================================================================
   ZZ CONSENT — Stil der Einwilligungsschicht.  hausbauteil-quelle
   Dies IST das Hausbauteil der Einwilligungsschicht (von 40+ Seiten geladen),
   kein danebengestelltes Zweitdesign: es fuehrt die Marken-Token `--zz-*` fort
   und faellt nur auf die ZABA-CI-Werte zurueck, wo `/zz.css` fehlt (Hub-Landing).

   Rechnet mit den Marken-Merkmalen aus /zz.css (`--zz-*`), faellt aber auf die
   ZABA-CI-Werte zurueck, damit die Schicht auch auf Seiten ohne zz.css (Hub-
   Landing) richtig steht: Flaeche #1c1b18, Schrift #f3eee4, Akzent #A53A2A,
   PP Neue Montreal + Noto Serif Display, abgerundet.

   GLEICHWERTIGKEIT IST GEOMETRIE UND FARBE. Die drei Knoepfe jeder Ebene
   teilen EINE Klasse `.zzc-knopf` und EIN Raster mit gleichen Spalten. Keine
   Klasse darf einen von ihnen groesser, bunter oder fetter machen.

   TELEFON ZUERST. Unter 560 px stapeln die Knoepfe in voller Breite, jeder
   gleich hoch. Erweitert wird nur mit min-width.
   ============================================================================= */
.zzc{
  --zzc-bg:var(--zz-panel,#1c1b18);
  --zzc-bg2:var(--zz-panel-2,#16140f);
  --zzc-ink:var(--zz-ink,#f3eee4);
  /* Leiser Ton: 72 % der Schrift ueber der Flaeche — der Haus-Ton mit 62 % traegt auf
     der zweiten Flaeche im Creme-Thema nur 4,38:1 (gemessen 2026-08-22), 72 % traegt. */
  --zzc-dim:rgba(243,238,228,.72);
  --zzc-dim:color-mix(in srgb,var(--zzc-ink) 72%,transparent);
  --zzc-line:var(--zz-line-strong,rgba(243,238,228,.22));
  --zzc-accent:var(--zz-accent,#A53A2A);
  --zzc-r:var(--zz-r-lg,14px);
  --zzc-rk:var(--zz-r-md,10px);
  --zzc-sans:var(--zz-sans,"PP Neue Montreal","PPNeue",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif);
  --zzc-display:var(--zz-display,"Noto Serif Display ExtraCondensed","NotoSerifDisplay",Georgia,serif);
  --zzc-hover:color-mix(in srgb,var(--zzc-ink) 10%,transparent);
  font-family:var(--zzc-sans);font-size:16px;line-height:1.5;font-weight:400;
  color:var(--zzc-ink);letter-spacing:-.005em;-webkit-font-smoothing:antialiased;
  box-sizing:border-box;
}
.zzc *,.zzc *::before,.zzc *::after{box-sizing:inherit}
.zzc h2,.zzc p,.zzc ul,.zzc dl,.zzc dd{margin:0}
.zzc ul{padding:0;list-style:none}
.zzc a{color:var(--zzc-ink);text-decoration:underline;text-underline-offset:.15em}
.zzc a:hover{color:var(--zzc-ink)}
.zzc :focus-visible{outline:2px solid var(--zzc-accent);outline-offset:2px}

/* ------------------------------------------------------------- Ebene 1
   hausbauteil-quelle — EINE Leiste ueber die VOLLE Seitenbreite (Operator-Vorgabe
   v2): keine zentrierte Karte, keine max-width, keine seitlichen Raender. Der
   Balken spannt von links nach rechts; der Inhalt sitzt in einem Wrap. */
.zzc-e1{position:fixed;left:0;right:0;bottom:0;z-index:2147483000;padding:0;
  pointer-events:none}
.zzc-karte{pointer-events:auto;margin:0;width:100%;max-width:none;background:var(--zzc-bg);
  border:0;border-top:1px solid var(--zzc-line);border-radius:0;
  padding:16px 20px;box-shadow:0 -12px 40px var(--zz-schatten,rgba(0,0,0,.35))}
.zzc-bar{display:flex;flex-direction:column;gap:14px;width:100%;max-width:1200px;margin:0 auto;align-items:stretch}
.zzc-bar-text{min-width:0}
.zzc-bar-tat{display:flex;flex-direction:column;gap:10px}
@media (min-width:900px){
  .zzc-bar{flex-direction:row;align-items:center;gap:28px}
  .zzc-bar-text{flex:1 1 auto}
  .zzc-bar-tat{flex:0 0 auto;align-items:flex-end;min-width:340px}
}
.zzc-marke{font-family:var(--zzc-display);font-weight:700;font-size:1rem;letter-spacing:-.12em;
  color:var(--zzc-dim);margin-right:.35em}
.zzc-titel{font-family:var(--zzc-display);font-weight:200;text-transform:uppercase;
  font-size:clamp(1.6rem,2.4vw,2.1rem);line-height:.96;letter-spacing:-.01em;margin-bottom:10px}
.zzc-e2 .zzc-titel{font-family:var(--zzc-sans);font-weight:600;text-transform:none;font-size:1.25rem;line-height:1.25;letter-spacing:-.005em}
.zzc-satz{color:var(--zzc-dim);font-size:.9375rem;margin-bottom:0}

/* --- die Knoepfe: EIN Raster, EINE Klasse. Anzahl je preset (2 oder 3). --- */
.zzc-knoepfe{display:grid;grid-template-columns:1fr;gap:8px;width:100%}
@media (min-width:560px){
  .zzc-knoepfe-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .zzc-knoepfe-2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:900px){
  .zzc-bar-tat .zzc-knoepfe-2{min-width:340px}
  .zzc-bar-tat .zzc-knoepfe-3{min-width:480px}
}
.zzc-knopf{display:block;width:100%;min-height:48px;margin:0;padding:12px 14px;
  border:1px solid var(--zzc-ink);border-radius:0;background:transparent;
  color:var(--zzc-ink);font:inherit;font-size:.6875rem;font-weight:500;line-height:1.2;
  letter-spacing:.16em;text-transform:uppercase;
  letter-spacing:0;text-align:center;cursor:pointer;
  transition:background-color var(--zz-t-fast,160ms) ease}
.zzc-knopf:hover{background:var(--zzc-hover)}
.zzc-knopf:disabled{opacity:.5;cursor:not-allowed}
.zzc-knopf-klein{width:auto;min-height:40px;padding:8px 14px;font-size:.9375rem}

/* --- Fuss der Karte: Verweise + Sprache --- */
.zzc-fuss{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;
  margin-top:14px;font-size:.875rem;color:var(--zzc-dim)}
.zzc-verweise{display:flex;gap:14px;flex-wrap:wrap}
/* Beruehrflaeche (WCAG 2.5.8): jeder Verweis mindestens 24 px hoch — die Hauswache
   mass 21 px (gemessen 2026-08-22). */
.zzc-verweise a,.zzc-fusslink{display:inline-flex;align-items:center;min-height:24px;padding:2px 0}
.zzc-sprachen{display:flex;gap:2px}
.zzc-sprache{background:transparent;border:0;color:var(--zzc-dim);font:inherit;font-size:.875rem;
  padding:6px 8px;min-width:32px;min-height:32px;border-radius:6px;cursor:pointer;text-decoration:none}
.zzc-sprache:hover{background:var(--zzc-hover);color:var(--zzc-ink)}
.zzc-sprache[aria-current="true"]{color:var(--zzc-ink);text-decoration:underline;text-underline-offset:.2em}

/* ------------------------------------------------------------- Ebene 2 */
.zzc-e2{position:fixed;inset:0;z-index:2147483001;display:flex;align-items:flex-end;justify-content:center}
@media (min-width:768px){.zzc-e2{align-items:center;padding:24px}}
.zzc-schleier{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.zzc-blatt{position:relative;width:100%;max-width:760px;max-height:100dvh;overflow:auto;
  background:var(--zzc-bg);color:var(--zzc-ink);border:1px solid var(--zzc-line);
  border-radius:var(--zzc-r) var(--zzc-r) 0 0;padding:20px 20px 16px;outline:none}
@media (min-width:768px){.zzc-blatt{max-height:90vh;border-radius:var(--zzc-r);padding:28px 28px 20px}}
html.zzc-offen{overflow:hidden}
.zzc-blattkopf{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:8px}
.zzc-blattkopf .zzc-titel{font-size:1.5rem;margin:0}
.zzc-x{flex:none;width:40px;height:40px;border:1px solid var(--zzc-line);border-radius:50%;
  background:transparent;color:var(--zzc-ink);font-size:1.5rem;line-height:1;cursor:pointer}
.zzc-x:hover{background:var(--zzc-hover)}
.zzc-kats{display:flex;flex-direction:column;gap:12px;margin:16px 0}
.zzc-kat{border:1px solid var(--zzc-line);border-radius:var(--zzc-rk);padding:14px 16px;background:var(--zzc-bg2)}
.zzc-katkopf{display:flex;align-items:center;justify-content:space-between;gap:12px}
.zzc-kattitel{font-weight:600;font-size:1.0625rem}
.zzc-kattitel em{font-style:normal;font-weight:400;color:var(--zzc-dim);font-size:.875rem;margin-left:6px}
.zzc-katsatz{color:var(--zzc-dim);font-size:.9375rem;margin-top:8px}

/* --- Schalter: echtes Kaestchen (R27), visuell als Schieber, fokussierbar --- */
.zzc-schalter{position:relative;display:flex;align-items:center;gap:12px;cursor:pointer;min-height:32px}
.zzc-schalter input{position:absolute;opacity:0;width:44px;height:24px;margin:0;left:0;top:50%;transform:translateY(-50%);cursor:pointer}
.zzc-schalter input+span{flex:none;position:relative;width:44px;height:24px;border-radius:999px;
  border:1px solid var(--zzc-ink);background:transparent;transition:background-color 160ms ease}
.zzc-schalter input+span::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;
  background:var(--zzc-ink);transition:left 160ms ease}
.zzc-schalter input:checked+span{background:var(--zzc-accent);border-color:var(--zzc-accent)}
.zzc-schalter input:checked+span::after{left:23px;background:#fffada}
.zzc-schalter input:focus-visible+span{outline:2px solid var(--zzc-accent);outline-offset:2px}
.zzc-schalter input:disabled{cursor:default}
.zzc-schalter input:disabled+span{opacity:.55}

.zzc-details{flex:none;background:transparent;border:1px solid var(--zzc-line);border-radius:999px;
  color:var(--zzc-ink);font:inherit;font-size:.875rem;padding:6px 12px;min-height:32px;cursor:pointer}
.zzc-details:hover{background:var(--zzc-hover)}
.zzc-dienste{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.zzc-dienst{border-top:1px solid var(--zzc-line);padding-top:10px}
.zzc-dname{font-weight:600;margin-bottom:2px}
.zzc-dzweck{font-size:.9375rem;color:var(--zzc-dim)}
.zzc-dzweck a{color:var(--zzc-ink);margin-left:.5em}
.zzc-status{display:inline-block;font-weight:400;font-size:.875rem;color:var(--zzc-dim);border:1px solid var(--zzc-line);
  border-radius:999px;padding:1px 8px;margin-left:6px;vertical-align:middle}
.zzc-dienst dl{display:grid;grid-template-columns:1fr;gap:2px 12px;font-size:.9375rem}
@media (min-width:560px){.zzc-dienst dl{grid-template-columns:9em 1fr}}
.zzc-dienst dt{color:var(--zzc-dim)}
.zzc-dienst dd{color:var(--zzc-ink)}
.zzc-fehler{border:1px solid var(--zzc-accent);border-radius:var(--zzc-rk);padding:12px 14px}
.zzc-stand{margin-top:12px;font-size:.875rem;color:var(--zzc-dim)}
/* hausbauteil-quelle — Ablehnen auf Ebene 2: gut sichtbarer sekundaerer Knopf,
   nicht versteckt, in voller Breite unter den beiden Hauptknoepfen. */
.zzc-e2ablehnen{margin-top:10px;text-align:center}
.zzc-linkknopf{display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  width:100%;padding:10px 14px;background:transparent;border:1px solid var(--zzc-line);
  border-radius:var(--zzc-rk);color:var(--zzc-ink);font:inherit;font-size:.9375rem;font-weight:500;
  text-decoration:underline;text-underline-offset:.15em;cursor:pointer;
  transition:background-color var(--zz-t-fast,160ms) ease}
.zzc-linkknopf:hover{background:var(--zzc-hover)}
.zzc-dienst dd a{color:var(--zzc-ink);word-break:break-word}

/* --------------------------------------------- Platzhalter + Fussverweis */
.zzc-platzhalter{border:1px dashed var(--zz-line-strong,rgba(243,238,228,.22));border-radius:var(--zz-r-md,10px);
  padding:16px;display:flex;flex-direction:column;gap:10px;align-items:flex-start;
  font-family:var(--zz-sans,"PP Neue Montreal","PPNeue",system-ui,sans-serif);font-size:.9375rem}
.zzc-platzhalter p{margin:0}
.zzc-fusslink{font:inherit;color:inherit;text-decoration:underline;text-underline-offset:.15em;cursor:pointer}
footer .links .zzc-fusslink{margin-left:0}
.zzc-fusszeile{margin:24px auto;text-align:center;font-size:.875rem;
  font-family:var(--zz-sans,"PP Neue Montreal","PPNeue",system-ui,sans-serif)}

@media (prefers-reduced-motion:reduce){
  .zzc *{transition:none!important}
}
@media print{.zzc{display:none!important}}

/* Ebene 1 in der Form der Lesestrecke: Einstellungen leise, Nur Notwendiges
   mit Rand, Alles zulassen als volle Fläche in Tinte auf Creme. */
.zzc-e1 .zzc-einstellungen{border-color:var(--zzc-line);color:var(--zzc-dim)}
.zzc-e1 .zzc-akzeptieren{background:var(--zzc-ink);color:var(--zzc-bg)}
.zzc-e1 .zzc-akzeptieren:hover{background:transparent;color:var(--zzc-ink)}

/* =============================================================================
   LV-FUNKTION + DREI DESIGNS (Operator 26.10.2026: "Funktion wie LV, maximale
   Akzeptanz, es geht um das Design"). Farben nur Paper/Ink (ZZR-057), Raster
   16 / 48 px. Der Zustimmungsknopf ist gefuellt, "Einstellungen" umrandet,
   "Nur Notwendiges" ein Textlink oben rechts (Vorbild louisvuitton.com).
   ============================================================================= */
.zzc-lv{--zzc-bg:#F3EEE4;--zzc-bg2:color-mix(in srgb,#141311 5%,#F3EEE4);--zzc-ink:#141311;--zzc-dim:color-mix(in srgb,#141311 78%,#F3EEE4);
  --zzc-line:rgba(20,19,17,.16);--zzc-hover:rgba(20,19,17,.06);--zzc-accent:#141311}
.zzc-lv .zzc-karte{position:relative;box-shadow:none}
.zzc-lv .zzc-knoepfe-lv{display:grid;grid-template-columns:1fr;gap:10px;width:100%;min-width:0}
.zzc-e1.zzc-lv .zzc-knoepfe-lv button{min-height:50px;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase}
.zzc-lv .zzc-primaer{background:var(--zzc-ink);color:var(--zzc-bg);border-color:var(--zzc-ink)}
.zzc-lv .zzc-primaer:hover{background:var(--zzc-ink);opacity:.88}
.zzc-lvnein{position:absolute;top:10px;right:16px;min-height:32px;padding:4px 0;background:none;border:0;
  font:inherit;font-size:.8125rem;line-height:1.3;color:var(--zzc-ink);text-decoration:underline;
  text-underline-offset:.2em;cursor:pointer;text-align:right;max-width:calc(100% - 32px)}
@media (min-width:900px){.zzc-lvnein{right:48px}}
.zzc-footer{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;margin-top:10px;font-size:.875rem;color:var(--zzc-dim)}
.zzc-lv .zzc-titel{margin-bottom:12px}

/* A - wie LV: Karte in der Mitte, Seite abgedunkelt */
.zzc-v-a{top:0;display:flex;align-items:center;justify-content:center;padding:16px;
  background:rgba(20,19,17,.5);pointer-events:auto}
.zzc-v-a .zzc-karte{width:100%;max-width:520px;border:0;padding:56px 24px 20px}
@media (min-width:900px){.zzc-v-a .zzc-karte{padding:60px 40px 28px}.zzc-v-a .zzc-lvnein{right:24px}}
.zzc-v-a .zzc-bar{flex-direction:column;align-items:stretch;gap:22px;max-width:none}
.zzc-v-a .zzc-bar-tat{min-width:0;align-items:stretch}
.zzc-v-a .zzc-titel{font-size:clamp(2rem,7vw,2.6rem)}

/* B - leise Leiste unten, volle Breite, Seite bleibt sichtbar */
.zzc-v-b .zzc-karte{padding:46px 16px 16px;border-top:1px solid var(--zzc-line)}
.zzc-v-b .zzc-bar{max-width:none}
@media (min-width:560px){.zzc-v-b .zzc-knoepfe-lv{grid-template-columns:1fr 1fr}}
@media (min-width:900px){
  .zzc-v-b .zzc-karte{padding:24px 48px 20px}
  .zzc-v-b .zzc-lvnein{top:8px}
  .zzc-v-b .zzc-bar{padding-top:20px}
  .zzc-v-b .zzc-bar-tat{min-width:460px}
  .zzc-v-b .zzc-titel{font-size:1.9rem}
}

/* C - Markenmoment: Vollbild in Ink, grosser Satz, dieselben Knoepfe */
.zzc-v-c{top:0;display:flex;pointer-events:auto;
  --zzc-bg:#141311;--zzc-bg2:color-mix(in srgb,#F3EEE4 6%,#141311);--zzc-ink:#F3EEE4;--zzc-dim:color-mix(in srgb,#F3EEE4 76%,#141311);
  --zzc-line:rgba(243,238,228,.2);--zzc-hover:rgba(243,238,228,.08);--zzc-accent:#F3EEE4}
.zzc-v-c .zzc-karte{display:flex;flex-direction:column;justify-content:flex-end;min-height:100%;
  border:0;padding:64px 16px 24px}
@media (min-width:900px){.zzc-v-c .zzc-karte{padding:72px 48px 48px}}
.zzc-v-c .zzc-bar{max-width:none;flex-direction:column;align-items:flex-start;gap:28px}
.zzc-v-c .zzc-titel{font-size:clamp(3.2rem,12vw,8rem);line-height:.88;margin-bottom:18px}
.zzc-v-c .zzc-satz{max-width:34em}
.zzc-v-c .zzc-bar-tat{width:100%;max-width:520px;min-width:0;align-items:stretch}

/* Schrift nach ZZR-011 (Operator 26.10.2026, Point Zero): Glock NUR an der
   Headline, immer Versalien. Fliesstext, Knoepfe, Links, Sprachen: PP Neue
   Montreal. Glock laeuft breiter und wirkt groesser als die Hausschrift -
   deshalb kleinere Headline-Groessen und mehr Zeilenabstand (ZZR-101). */
.zzc-lv{--zzc-sans:"PP Neue Montreal","PPNeue",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --zzc-display:var(--zz-h1,"Glock Grotesk",system-ui,sans-serif);font-family:var(--zzc-sans);letter-spacing:0}
.zzc-lv .zzc-titel{font-family:var(--zzc-display);text-transform:var(--zz-h1-case,uppercase);font-weight:500;
  line-height:1.08;letter-spacing:0;margin-bottom:16px}
.zzc-lv .zzc-satz{font-family:var(--zzc-sans);font-size:.9375rem;line-height:1.6;letter-spacing:0}
.zzc-e1.zzc-lv .zzc-knoepfe-lv button,.zzc-lvnein,.zzc-lv .zzc-footer,.zzc-lv .zzc-verweise a,.zzc-lv .zzc-sprache{font-family:var(--zzc-sans)}
.zzc-e1.zzc-lv .zzc-knoepfe-lv button{font-weight:500}
.zzc-v-a .zzc-titel{font-size:clamp(1.5rem,4.2vw,1.875rem)}
.zzc-v-b .zzc-titel{font-size:1.5rem}
.zzc-v-c .zzc-titel{font-size:clamp(2.25rem,9vw,4.5rem);line-height:1.04;margin-bottom:20px}
.zzc-e2.zzc-lv .zzc-titel{font-size:1.375rem;line-height:1.1}

/* Einstellungen eckig wie die Ebene 1 (Operator 26.10.2026): aeussere und innere
   Flaechen ohne Rundung. Einzige Rundung bleibt der ZZ-Schalter selbst. Overlay eckig. */
.zzc-lv *{border-radius:0}
.zzc-e2.zzc-lv button.zzc-speichern,.zzc-e2.zzc-lv button.zzc-akzeptieren{min-height:50px;font-family:var(--zzc-sans);font-size:.75rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.zzc-e2.zzc-lv button.zzc-akzeptieren{background:var(--zzc-ink);color:var(--zzc-bg);border-color:var(--zzc-ink)}
/* Der ZZ-Schalter von ZZ (wie "Mode" in der Navigation, zz-nav-varianten.css):
   Pille 36 x 20, runde Scheibe mit ZZ, rollt beim Einschalten wie ein Reifen. */
.zzc-lv .zzc-schalter input{width:36px;height:20px}
.zzc-lv .zzc-schalter input+span{width:36px;height:20px;border-radius:10px;border:0;background:var(--zzc-line);transition:background .2s ease}
.zzc-lv .zzc-schalter input+span::after{content:"ZZ";top:2px;left:2px;width:16px;height:16px;border-radius:50%;border:0;
  background:var(--zzc-ink);color:var(--zzc-bg);display:flex;align-items:center;justify-content:center;
  font-family:var(--zz-logo,"Noto Serif Display ExtraCondensed","NotoSerifDisplay",Didot,serif);font-weight:700;font-size:8px;
  letter-spacing:-.2em;text-indent:-.2em;line-height:1;transform:translateX(0) rotate(0deg);
  transition:transform .6s cubic-bezier(.2,.8,.2,1),background .3s ease,color .3s ease}
.zzc-lv .zzc-schalter input:checked+span{background:var(--zzc-ink)}
.zzc-lv .zzc-schalter input:checked+span::after{left:2px;transform:translateX(16px) rotate(360deg);background:var(--zzc-bg);color:var(--zzc-ink)}
@media (prefers-reduced-motion:reduce){.zzc-lv .zzc-schalter input+span::after{transition:none}}
/* A am Handy: Karte fast vollflaechig, ringsum derselbe Abstand (16 px). */
@media (max-width:599px){
  .zzc-v-a{padding:16px;align-items:stretch}
  .zzc-v-a .zzc-karte{max-width:none;display:flex;flex-direction:column;justify-content:flex-end;padding:56px 16px 16px}
  .zzc-v-a .zzc-lvnein{right:16px}
}

/* ZZ-Schalter groesser und weicher (Operator 26.10.2026): 44 x 24, Scheibe 20 px.
   Die Rolle beschleunigt und bremst (ease-in-out), 700 ms, Drehung im selben Takt. */
.zzc-lv .zzc-schalter input{width:44px;height:24px}
.zzc-lv .zzc-schalter input+span{width:44px;height:24px;border-radius:12px;transition:background .5s cubic-bezier(.65,0,.35,1)}
.zzc-lv .zzc-schalter input+span::after{width:20px;height:20px;font-size:9.5px;
  transition:transform .7s cubic-bezier(.65,0,.35,1),background .5s cubic-bezier(.65,0,.35,1),color .5s cubic-bezier(.65,0,.35,1)}
.zzc-lv .zzc-schalter input:checked+span::after{transform:translateX(20px) rotate(360deg)}

/* Einstellungen ab Tablet wie die Karte A (Operator 26.10.2026): gleiche Flaeche,
   gleiche Abdunklung, ringsum 48 px Abstand, Inhalt 40 px eingerueckt, eckig. */
@media (min-width:600px){
  .zzc-e2.zzc-lv{align-items:center;padding:48px}
  .zzc-e2.zzc-lv .zzc-schleier{background:rgba(20,19,17,.5)}
  .zzc-e2.zzc-lv .zzc-schleier+div{max-width:720px;max-height:calc(100dvh - 96px);border:0;padding:40px 40px 32px}
  .zzc-e2.zzc-lv .zzc-kats{gap:10px;margin:24px 0}
  .zzc-e2.zzc-lv .zzc-kat{padding:18px 20px}
}

/* Lange Headline der Einstellungen (DATENSCHUTZEINSTELLUNGEN) passt am Handy in
   eine Zeile, nie im Wort gebrochen: Groesse folgt der Breite. */
.zzc-e2.zzc-lv .zzc-titel{font-size:clamp(.8125rem,4vw,1.375rem);min-width:0;overflow-wrap:normal;hyphens:none}
.zzc-e2.zzc-lv .zzc-titel{max-width:calc(100% - 52px)}

/* H1 moeglichst zwei Zeilen, nie drei (Operator 26.10.2026, ZZR-105): Die Groesse
   folgt der Breite des Textkastens (Container-Einheit cqi). 8,4 cqi laesst die
   laengste Zeile ("SIE ENTSCHEIDEN,") in Glock-Versalien auf eine Zeile. */
.zzc-lv .zzc-bar-text{container-type:inline-size;min-width:0}
.zzc-v-a .zzc-titel{font-size:min(clamp(1.5rem,4.2vw,1.875rem),8.4cqi)}
.zzc-v-b .zzc-titel{font-size:min(1.5rem,8.4cqi)}
.zzc-v-c .zzc-titel{font-size:min(clamp(2.25rem,9vw,4.5rem),8.4cqi)}
.zzc-v-c .zzc-bar-text{align-self:stretch;width:100%}

/* Sauberer Satz der H1 (Operator 27.10.2026): Glock-Versalien brauchen Luft. Zeilen
   kleben nicht, Zeichen stossen nicht zusammen. Zwei Zeilen bleiben (ZZR-105). */
.zzc-lv .zzc-titel{line-height:1.3;letter-spacing:.04em;font-variant-ligatures:none;font-feature-settings:"liga" 0,"dlig" 0,"clig" 0}
.zzc-v-c .zzc-titel{line-height:1.28}
.zzc-v-a .zzc-titel{font-size:min(clamp(1.5rem,4.2vw,1.875rem),7.6cqi)}
.zzc-v-b .zzc-titel{font-size:min(1.5rem,7.6cqi)}
.zzc-v-c .zzc-titel{font-size:min(clamp(2.25rem,9vw,4.5rem),7.6cqi)}
/* Unterstreichung schneidet nicht in Unterlaengen (g, p, y). */
.zzc-lv a,.zzc-lvnein,.zzc-lv .zzc-sprache[aria-current="true"]{text-underline-offset:.28em;text-decoration-thickness:1px;text-decoration-skip-ink:auto}
/* A am Telefon: Der 16-px-Rand zeigt nur noch ruhiges Ink, keine lesbaren Seitenreste
   (Operator 27.10.2026). Ab Tablet bleibt die Seite sichtbar abgedunkelt. */
@media (max-width:599px){.zzc-v-a{background:#141311}}
/* A auf kleinen Telefonen (z. B. 320 x 640): Ist die Karte hoeher als der Schirm,
   scrollt sie in sich; der Inhalt sitzt unten, oben wird nichts abgeschnitten. */
@media (max-width:599px){
  .zzc-v-a .zzc-karte{justify-content:flex-start;max-height:100%;overflow-y:auto;overscroll-behavior:contain}
  .zzc-v-a .zzc-karte>.zzc-bar{margin-top:auto}
}
/* C auf kleinen Telefonen: Vollbild scrollt in sich, Inhalt unten, nie unter "Nur Notwendiges". */
@media (max-width:599px){
  .zzc-v-c{overflow-y:auto;overscroll-behavior:contain}
  .zzc-v-c .zzc-karte{justify-content:flex-start;height:auto;flex:1 0 auto}
  .zzc-v-c .zzc-karte>.zzc-bar{margin-top:auto}
}
/* B auf kleinen Telefonen: Leiste hoechstens bildschirmhoch, scrollt dann in sich. */
@media (max-width:599px){.zzc-v-b .zzc-karte{max-height:100vh;max-height:100dvh;overflow-y:auto;overscroll-behavior:contain}}
@media (max-width:599px){.zzc-v-c{display:block}.zzc-v-c .zzc-karte{min-height:100%}}
/* Kleine Telefone (Hall-of-Fame-Pruefung 27.10.2026): CTA bleibt einzeilig, B hat Luft
   zwischen "Nur Notwendiges" und H1 (mind. 16 px). */
@media (max-width:359px){.zzc-e1.zzc-lv .zzc-knoepfe-lv button{letter-spacing:.08em;padding-left:8px;padding-right:8px}}
.zzc-v-b .zzc-karte{padding-top:60px}
@media (max-width:899px){.zzc-v-a .zzc-karte{padding-top:60px}}
/* Hover und Fokus der gefuellten CTA (Befund Hall of Fame 27.10.2026): Schrift bleibt in
   der Gegenfarbe; vorher wurden Schrift und Flaeche beide Ink und der Text verschwand. */
.zzc-e1.zzc-lv .zzc-primaer:hover,.zzc-e1.zzc-lv .zzc-primaer:focus-visible,
.zzc-e2.zzc-lv button.zzc-akzeptieren:hover,.zzc-e2.zzc-lv button.zzc-akzeptieren:focus-visible{background:var(--zzc-ink);color:var(--zzc-bg);opacity:.86}