/* =============================================================================
   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)}