/* =============================================================================
   ZZ MARK — die Wortmarke des Hauses als EIN Bauteil.   [hausbauteil-quelle]

   Bis heute stand die Wortmarke in jeder Seite noch einmal neu im Stylesheet:
   im Hub mit Mantel-Gewicht 400, auf den sieben Kategorieseiten mit 200, bei
   Goldberg gar nicht. Dieselbe Marke sah an drei Orten verschieden aus, und
   eine Korrektur musste an jedem Ort einzeln nachgezogen werden. Ab hier gibt
   es EINE Definition, und sie rechnet ausschliesslich mit den Haus-Merkmalen
   aus `/zz.css` (`--zz-*`). Kein Farbliteral, keine eigene Skala (R30).

   DAS GESETZ DER MARKE (Operator 2026-08-24)
   1. Der Mantel ABA / INGO laeuft auf REGULAR (400). Nicht ExtraLight.
      Die frueheren 200 liessen ABA und INGO neben den fetten Z verschwinden -
      aus zwei Metern Abstand blieb "Z & Z" stehen, und das ist nicht die Marke.
   2. Die drei Zeichen Z, &, Z tragen BOLD (700). Der Akzent entsteht durch das
      Gewicht, nie durch Farbe - die Marke ist immer EINFARBIG.
   3. HINTER DER WORTMARKE STEHT NICHTS. Kein Schraegstrich, kein Kategoriename,
      kein "A ZABA & ZINGO House". Wer den Ort benennen will, benennt ihn an
      einer anderen Stelle der Seite, nicht am Logo.

   ZWEI BAUFORMEN, EIN MARKUP
     .zz-mark              die volle Wortmarke, steht ruhig.
     .zz-mark--faltbar     das Monogramm ZZ (Sperrung -0.2em). Ein Klick faehrt
                           ABA, das Kaufmanns-Und und INGO aus; der zweite
                           faehrt sie wieder ein.

   Beide tragen dasselbe Markup. Die Bauform entscheidet nur, ob der Mantel
   eingefahren ist. Deshalb steht die vollstaendige Marke IMMER im Dokument -
   auch eingefahren, auch fuer die Sprachausgabe, auch fuer eine Suchmaschine.
   Das Markengesetz verlangt die ausgeschriebene Wortfolge; eingefahren ist ein
   Zustand der Darstellung, keine Kuerzung des Namens.

   DIE BREITE MISST DAS JAVASCRIPT, NICHT DIESES STYLESHEET. `max-width` auf
   einen grosszuegigen Schaetzwert zu setzen laesst die Bewegung ungleichmaessig
   laufen: erst schnell durch die Luft, dann Stillstand. `zz-mark.js` misst die
   natuerliche Breite jedes Mantelstuecks einmal und legt sie als `--zz-mark-w`
   an das Stueck. Ohne JavaScript bleibt die Marke offen stehen - siehe unten.
   ============================================================================= */

/* Die Schrift der Marke ist NICHT verhandelbar: NotoSerifDisplay
   ExtraCondensed, im Haus als `--zz-logo` gefuehrt (Alias "Zaba Logo").
   Keine Ersatzschrift, keine Testschrift - `zz.css` haelt die Zuordnung, und
   diese Datei referenziert nur das Merkmal, damit es genau einen Ort gibt, an
   dem die Schrift der Marke steht. */
.zz-mark{
  font-family:var(--zz-logo);
  font-weight:400;                 /* Gesetz 1: der Mantel laeuft auf Regular */
  text-transform:uppercase;
  letter-spacing:-.044em;
  line-height:1;
  white-space:nowrap;
  color:currentColor;              /* Gesetz 2: einfarbig, erbt vom Umfeld */
  display:inline-flex;
  align-items:baseline;
  background:none;
  border:0;
  padding:0;
  margin:0;
  font-size:inherit;
}

/* Gesetz 2: Akzent ueber Gewicht. Die drei Zeichen, sonst nichts. */
.zz-mark .zz-mark__z{font-weight:700}
.zz-mark .zz-mark__amp{font-weight:700;padding:0 .15em}

/* Groessen. Die Marke ist Display-Schrift; unter 24 px verliert die
   ExtraCondensed ihre Form, deshalb ist 18 px die Untergrenze und nur fuer die
   Fusszeile gedacht, wo sie neben Lesetext steht. */
.zz-mark--sm{font-size:18px}
.zz-mark--md{font-size:clamp(30px,5vw,40px)}
.zz-mark--lg{font-size:clamp(40px,8vw,72px)}

/* ---------------------------------------------------------------------------
   FALTBARE BAUFORM — das Monogramm faehrt aus.

   Der Auslaufweg: `max-width` traegt die Bewegung, `opacity` traegt die
   Erscheinung, und die Sperrung wandert von -0.2em (Monogramm: die zwei Z
   stehen ineinander) auf -0.044em (Marke: normale Sperrung). Drei Merkmale in
   einer Bewegung, gleiche Dauer, gleiche Kurve - sonst laufen sie auseinander.
   Dauer und Kurve stammen aus der Haus-Skala; die Marke faehrt auf der langen
   Stufe, weil eine Marke sich nicht hastig aufbaut.
--------------------------------------------------------------------------- */
.zz-mark--faltbar{
  letter-spacing:-.2em;                      /* Monogramm-Sperrung */
  cursor:pointer;
  /* R28b: die Beruehrflaeche traegt 44 px, auch wenn das Monogramm schmaler
     ist. Der Innenabstand steht in der Haus-Skala, nicht als Zahl. */
  min-height:44px;
  padding:0 var(--zz-s-1);
  align-items:center;
  transition:letter-spacing var(--zz-t-slow) var(--zz-ease);
}
.zz-mark--faltbar.is-offen{letter-spacing:-.044em}

/* Das Mantelstueck. Eingefahren ist es 0 breit und unsichtbar - aber es steht
   weiter im Dokument, also liest die Sprachausgabe die volle Marke. */
.zz-mark--faltbar .zz-mark__aus{
  display:inline-block;
  max-width:0;
  opacity:0;
  overflow:hidden;
  vertical-align:baseline;
  transition:max-width var(--zz-t-slow) var(--zz-ease),
             opacity var(--zz-t-base) var(--zz-ease);
}
.zz-mark--faltbar.is-offen .zz-mark__aus{
  max-width:var(--zz-mark-w);
  opacity:1;
}

/* DER MESSZUSTAND. `zz-mark.js` schaltet ihn fuer einen Wimpernschlag ein, um
   die natuerliche Breite des Mantels zu lesen - im OFFENEN Zustand, denn nur
   der wird spaeter ausgeliefert.

   Die erste Fassung mass am geschlossenen Element. Dort gilt aber die
   Monogramm-Sperrung -0.2em; ausgefahren gilt -0.044em, und der Text wird
   dadurch breiter. Der Deckel sass rund 15 Prozent zu eng, und die Marke stand
   als "ZAB &ZING" in der Leiste - das letzte O abgeschnitten. Wer den
   Pruefstand anders aufruft als den Betrieb, misst den Betrieb nicht
   (memory:feedback_eichung_ruft_anders_auf_als_betrieb). */
.zz-mark--misst,
.zz-mark--misst .zz-mark__aus{transition:none}
.zz-mark--misst .zz-mark__aus{max-width:none;opacity:1}

/* Der Fokusring. R26: die Marke ist im faltbaren Zustand eine Schaltflaeche,
   also muss sie mit der Tastatur erreichbar UND sichtbar fokussiert sein. */
.zz-mark--faltbar:focus-visible{
  outline:2px solid var(--zz-sand);
  outline-offset:4px;
}

/* R28c: wer weniger Bewegung eingestellt hat, bekommt den Zustandswechsel
   ohne Weg. Der Wechsel selbst bleibt - nur die Strecke faellt weg. */
@media (prefers-reduced-motion: reduce){
  .zz-mark--faltbar,
  .zz-mark--faltbar .zz-mark__aus{transition-duration:.01ms}
}

/* Ohne JavaScript bleibt die Marke offen. Das ist die richtige Richtung: eine
   nicht ausfahrbare Marke, die vollstaendig dasteht, ist ein kleiner Verlust -
   ein Monogramm, das sich nie oeffnen laesst, ist ein Markenschaden.
   `zz-mark.js` setzt `zz-mark-js` an das Wurzelelement, sobald es laeuft. */
html:not(.zz-mark-js) .zz-mark--faltbar{letter-spacing:-.044em;cursor:default}
html:not(.zz-mark-js) .zz-mark--faltbar .zz-mark__aus{max-width:none;opacity:1}