/* =============================================================================
   ZZ COLLECTION — Kopf, Nav und Hero der Collection.   [hausbauteil-quelle]

   Vorher trug jede der acht Seiten ihr eigenes Stylesheet: der Hub eines mit
   Mantel-Gewicht 400 und Kartenbreite 382 px, die sieben Kategorieseiten eines
   mit Gewicht 200 und einem starren Dreispalter. Dieselben Bauteile, acht
   Definitionen, acht Orte fuer jede Korrektur. Ab hier gibt es eine.

   DER AKZENT KOMMT VON DER SEITE, NICHT VON HIER. Jede Seite setzt `--zz-ac`
   auf ihre Kategoriefarbe; dieses Stylesheet liest das Merkmal nur. Faellt es
   aus, greift der Haus-Sand. Kein Farbliteral (R30).

   DIE WORTMARKE liegt in `zz-mark.css` - NotoSerifDisplay ExtraCondensed,
   Sperrung -0.2em im Monogramm, Gewicht 700 auf Z, & und Z. Diese Datei
   bestimmt nur, WO die Marke steht, nie WIE sie aussieht. Und sie stellt
   nichts hinter sie: die Leiste hat links die Marke und rechts die Navigation,
   dazwischen Luft (Operator 2026-08-24, Gesetz 3 der Marke).

   MARKEN-MECHANIK, zum Nachschlagen an einem Ort: das Monogramm laeuft mit
   `letter-spacing:-.2em` (das "-200") und `font-weight:700` auf den drei
   Zeichen Z, & und Z, Schrift NotoSerifDisplay ExtraCondensed. Definiert ist
   das ausschliesslich in `zz-mark.css`; diese Datei wiederholt es nicht,
   sondern setzt nur die Klasse.
   ============================================================================= */

/* ------------------------------------------------------- Anker (R3) */
/* EIN Behaelter, EIN Rand. Kopfleiste, Hero, Kartenband und Fuss messen
   dieselbe Kante - sonst sieht die Seite zufaellig aus. */
.zz-c{
  --zz-c-max:1400px;
  --zz-c-pad:clamp(1.5rem,4vw,6rem);
  --zz-c-kopf:68px;
  --zz-c-rand:max(var(--zz-c-pad),calc(50vw - var(--zz-c-max)/2 + var(--zz-c-pad)));
}
.zz-c-wrap{max-width:var(--zz-c-max);margin-inline:auto;width:100%;padding-inline:var(--zz-c-pad)}

body.zz-c{
  font-family:var(--zz-sans);
  color:var(--zz-ink);
  background:var(--zz-bg-deep);
  min-height:100dvh;
  display:flex;flex-direction:column;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* ---------------------------------------------------------- Kopfleiste */
.zz-c-kopf{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--zz-s-4);
  padding:var(--zz-s-3) var(--zz-c-rand);
  background:var(--zz-bg-deep);
}
/* Links steht die Marke. Rechts die Navigation. Dazwischen NICHTS - kein
   Schraegstrich, kein Kategoriename. Wo der Ort benannt werden muss, benennt
   ihn der Hero, nicht das Logo. */
.zz-c-kopf__marke{display:flex;align-items:center;min-width:0}

.zz-c-zurueck{
  font-family:var(--zz-sans);
  font-size:0.875rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--zz-ink-dim);font-weight:600;
  display:inline-flex;align-items:center;gap:var(--zz-s-2);
  min-height:44px;                       /* R28b */
  transition:color var(--zz-t-fast) var(--zz-ease);
}
.zz-c-zurueck:hover{color:var(--zz-ac,var(--zz-sand))}
.zz-c-zurueck:focus-visible{outline:2px solid var(--zz-ac,var(--zz-sand));outline-offset:3px}

/* ----------------------------------------------------------- Navigation */
.zz-c-nav{display:flex;flex-wrap:wrap;gap:var(--zz-s-5);justify-content:flex-end;align-items:center}
.zz-c-menue{position:relative}
.zz-c-menue__kopf{
  cursor:pointer;display:inline-flex;align-items:center;gap:var(--zz-s-2);
  font-family:var(--zz-sans);
  font-size:0.875rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--zz-ink-dim);font-weight:600;
  min-height:44px;                       /* R28b */
  padding:0;background:none;border:0;white-space:nowrap;
  transition:color var(--zz-t-fast) var(--zz-ease);
}
.zz-c-menue__kopf:hover,.zz-c-menue.is-offen .zz-c-menue__kopf{color:var(--zz-ac,var(--zz-sand))}
.zz-c-menue__kopf:focus-visible{outline:2px solid var(--zz-ac,var(--zz-sand));outline-offset:3px}
.zz-c-menue__pfeil{
  width:5px;height:5px;
  border-inline-end:1.2px solid currentColor;border-block-end:1.2px solid currentColor;
  transform:translateY(-1px) rotate(45deg);
  transition:transform var(--zz-t-base) var(--zz-ease);
}
.zz-c-menue.is-offen .zz-c-menue__pfeil{transform:translateY(1px) rotate(-135deg)}

/* Das Panel laeuft ueber die volle Breite und sitzt exakt unter der Leiste.
   R78: es haengt am Wurzel-Stapel (position:fixed am Kopfelement, das selbst
   nichts abschneidet), nicht in einem Vorfahren mit overflow:hidden. */
.zz-c-panel{
  position:fixed;inset-inline:0;inset-block-start:var(--zz-c-kopf);z-index:30;
  display:none;align-items:stretch;flex-wrap:wrap;gap:var(--zz-s-4);
  padding:var(--zz-s-7) var(--zz-c-rand) var(--zz-s-6);
  background:var(--zz-bg-deep);
  opacity:0;transform:translateY(-22px);pointer-events:none;
  transition:opacity var(--zz-t-slow) var(--zz-ease),transform var(--zz-t-slow) var(--zz-ease);
}
.zz-c-menue.is-offen .zz-c-panel{opacity:1;transform:none;pointer-events:auto}
/* Im Panel laufen dieselben Karten wie in der Uebersicht, nur kompakter. Es
   ist KEINE eigene Kachelbauform - sonst waeren es wieder drei Stile. */
.zz-c-panel .zz-karte{flex:0 1 clamp(196px,21vw,260px);min-width:0}
.zz-c-panel .zz-karte__name{font-size:clamp(1.5rem,2.2vw,1.95rem)}
.zz-c-panel .zz-karte__text{display:none}

.zz-c-schliessen{
  position:absolute;inset-block-start:var(--zz-s-3);inset-inline-end:var(--zz-c-rand);
  display:inline-flex;align-items:center;gap:var(--zz-s-2);
  min-height:44px;padding:0 var(--zz-s-2);   /* R28b */
  cursor:pointer;background:none;border:0;color:var(--zz-ink-dim);
  transition:color var(--zz-t-fast) var(--zz-ease);
}
.zz-c-schliessen:hover{color:var(--zz-ac,var(--zz-sand))}
.zz-c-schliessen:focus-visible{outline:2px solid var(--zz-ac,var(--zz-sand));outline-offset:3px}
.zz-c-braille{font-size:22px;line-height:1;letter-spacing:.06em}
.zz-c-schliessen__wort{font-family:var(--zz-sans);font-size:0.875rem;letter-spacing:.2em;text-transform:uppercase}

/* Der Klappknopf traegt DBE in Brailleschrift - die Marke steht schon auf der
   Ware, deshalb ist sie hier kein Symbol, sondern Text mit Bedeutung (R2/R28). */
.zz-c-klapp{
  display:none;background:none;border:0;cursor:pointer;color:var(--zz-ink);
  min-height:44px;min-width:44px;                /* R28b */
  align-items:center;justify-content:center;
  transition:color var(--zz-t-fast) var(--zz-ease);
}
.zz-c-klapp:hover{color:var(--zz-ac,var(--zz-sand))}
.zz-c-klapp:focus-visible{outline:2px solid var(--zz-ac,var(--zz-sand));outline-offset:3px}
.zz-c-klapp .zz-c-braille{font-size:26px}

/* ------------------------------------------------------------- Der Hero */
.zz-c-hero{
  position:relative;
  padding:calc(var(--zz-c-kopf) + var(--zz-s-6)) var(--zz-c-pad) var(--zz-s-6);
  max-width:var(--zz-c-max);margin-inline:auto;width:100%;
}
/* Der grosse Hero laeuft ueber die VOLLE Breite - der bewegte Grund gehoert an
   die Kante des Fensters, nicht in einen 1400 px breiten Kasten mit Rand.
   Das Raster gilt fuer den INHALT, und der holt es sich selbst. */
.zz-c-hero--gross{
  max-width:none;
  padding-inline:0;
  min-height:78vh;
  display:flex;flex-direction:column;justify-content:flex-end;
}
.zz-c-hero--gross .zz-c-hero__in{
  max-width:var(--zz-c-max);
  margin-inline:auto;
  padding:0 var(--zz-c-pad) var(--zz-s-7);
}

/* KEIN `height:100%` am Schirm. Der Hero hat nur `min-height`, keine feste
   Hoehe - eine Prozenthoehe rechnet dagegen auf `auto`, und dann traegt das
   Element seine eigene Groesse statt der des Kastens. Gemessen sah man das an
   einem schwarzen Streifen unter dem bewegten Grund. `inset:0` allein spannt
   sauber ueber den ganzen Kasten. */
.zz-c-hero__schirm{position:absolute;inset:0;width:auto;height:auto;display:block;touch-action:none}
.zz-c-hero__schleier{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 0%,transparent 40%,rgb(0 0 0 / .55) 100%);
}
.zz-c-hero__in{position:relative;z-index:2;width:100%}

.zz-c-eyebrow{
  font-family:var(--zz-sans);
  font-size:0.875rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--zz-ac,var(--zz-sand));font-weight:600;
  margin-block-end:var(--zz-s-4);
  display:flex;align-items:center;gap:var(--zz-s-3);
}
.zz-c-eyebrow::before{content:'';width:24px;height:1px;background:currentColor;flex:0 0 auto}

.zz-c-titel{
  font-family:var(--zz-display);font-weight:200;
  font-size:clamp(3rem,11vw,7rem);line-height:.95;letter-spacing:-.025em;
  text-wrap:balance;
}
.zz-c-titel em{font-style:italic;color:var(--zz-ac,var(--zz-sand));font-weight:400}
.zz-c-lead{
  font-family:var(--zz-sans);
  font-size:clamp(1rem,1.4vw,1.15rem);
  color:var(--zz-ink-dim);max-width:40rem;
  margin-block-start:var(--zz-s-4);
  text-wrap:pretty;
}

/* ------------------------------------------------------ Kategorieband */
.zz-c-band{
  max-width:var(--zz-c-max);margin-inline:auto;width:100%;
  padding:var(--zz-s-5) var(--zz-c-pad) var(--zz-s-8);
  display:flex;flex-direction:column;gap:var(--zz-s-5);
}
.zz-c-reihe{display:flex;flex-direction:column;gap:var(--zz-s-4)}

/* Die Kategoriezeile traegt den Namen UND die Farbe. Der Name ist der Traeger,
   die Farbe der Zusatz - in Graustufen bleibt die Zeile vollstaendig (R28d). */
.zz-c-marke{
  display:flex;align-items:center;gap:var(--zz-s-3);width:100%;
  font-family:var(--zz-sans);
  font-size:0.875rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--zz-ac,var(--zz-sand));font-weight:600;
  min-height:44px;                       /* R28b */
  transition:color var(--zz-t-fast) var(--zz-ease);
}
.zz-c-marke:hover{color:var(--zz-ink)}
.zz-c-marke:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.zz-c-marke__punkt{
  width:10px;height:10px;border-radius:var(--zz-r-pill);
  background:currentColor;flex:0 0 auto;
}
.zz-c-marke__linie{flex:1;height:1px;background:currentColor;opacity:.30}
.zz-c-marke__gehe{
  display:inline-flex;align-items:center;gap:var(--zz-s-2);
  font-size:0.875rem;letter-spacing:.18em;white-space:nowrap;
}
.zz-c-marke__pfeil{transition:transform var(--zz-t-base) var(--zz-ease);display:inline-block}
.zz-c-marke:hover .zz-c-marke__pfeil{transform:translateX(4px)}

/* ---------------------------------------------------------- Der Schnitt */
/* Die Ueberschrift ueber dem Kartenraster der Kategorieseite. */
.zz-c-schnitt{margin-block-end:var(--zz-s-6)}
.zz-c-schnitt__lbl{
  font-family:var(--zz-sans);
  font-size:0.875rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--zz-ac,var(--zz-sand));font-weight:600;
  display:flex;align-items:center;gap:var(--zz-s-3);
}
.zz-c-schnitt__lbl::after{content:'';flex:1;height:1px;background:currentColor;opacity:.30}
.zz-c-schnitt h2{
  font-family:var(--zz-display);font-weight:200;
  font-size:clamp(2rem,5vw,3.4rem);line-height:1;
  text-transform:uppercase;letter-spacing:-.02em;
  margin-block-start:var(--zz-s-4);
  text-wrap:balance;
}
.zz-c-schnitt h2 em{font-style:italic;color:var(--zz-ac,var(--zz-sand));font-weight:400}

/* ---------------------------------------------------------- Der Fussrand */
/* Ueber dem Haus-Fuss steht eine schmale Zeile mit der Marke. Sie ist auf
   allen neun Seiten gleich gebaut und traegt denselben Wortlaut. */
.zz-c-signatur{
  border-block-start:1px solid var(--zz-line);
  background:var(--zz-bg-deep);
  padding:var(--zz-s-6) var(--zz-c-pad);
}
.zz-c-signatur__in{
  max-width:var(--zz-c-max);margin-inline:auto;
  display:flex;flex-direction:column;align-items:flex-start;
  gap:var(--zz-s-3);
  color:var(--zz-ink-dim);
}
.zz-c-signatur__zusatz{
  font-family:var(--zz-sans);
  font-size:0.875rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
}

/* --------------------------------------------------------- Telefon (R6) */
/* Die Grundform oben ist bereits bei 360 px vollstaendig bedienbar; hier wird
   nur die Navigation auf das Vollbild-Blatt umgestellt, weil sieben
   Kategorien nebeneinander in keine Telefonleiste passen. */
@media (max-width:780px){
  .zz-c-kopf{padding:var(--zz-s-2) var(--zz-c-pad);z-index:70}
  .zz-c-klapp{display:inline-flex;position:relative;z-index:72}
  .zz-c-nav{
    position:fixed;inset:0;z-index:60;
    display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;
    gap:0;background:var(--zz-bg-deep);overflow-y:auto;
    padding:calc(env(safe-area-inset-top,0px) + 4.6rem) var(--zz-c-pad) var(--zz-s-8);
    opacity:0;visibility:hidden;transform:translateY(-18px);pointer-events:none;
    transition:opacity var(--zz-t-slow) var(--zz-ease),transform var(--zz-t-slow) var(--zz-ease),
               visibility 0s linear var(--zz-t-slow);
  }
  .zz-c-nav.is-offen{
    opacity:1;visibility:visible;transform:none;pointer-events:auto;
    transition:opacity var(--zz-t-slow) var(--zz-ease),transform var(--zz-t-slow) var(--zz-ease),visibility 0s;
  }
  .zz-c-menue{width:100%;border-block-start:1px solid var(--zz-line)}
  .zz-c-menue__kopf{padding-block:var(--zz-s-4);width:100%;justify-content:space-between;font-size:1rem}
  .zz-c-panel{
    position:static;display:flex;flex-direction:column;align-items:stretch;
    gap:var(--zz-s-4);background:transparent;padding:0;
    transform:none;opacity:1;pointer-events:auto;
    max-height:0;overflow:hidden;
    transition:max-height var(--zz-t-slow) var(--zz-ease);
  }
  .zz-c-menue.is-offen .zz-c-panel{max-height:6000px;padding-block:var(--zz-s-1) var(--zz-s-5)}
  .zz-c-panel .zz-karte{flex:0 0 auto;width:100%}
  .zz-c-panel .zz-karte__name{font-size:clamp(1.9rem,7vw,2.6rem)}
  .zz-c-schliessen{display:none}
  .zz-c-hero--gross{min-height:64vh}
}
@media (min-width:781px){ .zz-c-kopf{padding:var(--zz-s-4) var(--zz-c-rand)} }

/* R28c */
@media (prefers-reduced-motion: reduce){
  .zz-c-panel,.zz-c-nav,.zz-c-menue__pfeil,.zz-c-marke__pfeil{transition-duration:.01ms}
}