/* =============================================================================
   ZZ KARTE — die Kollektionskachel der Collection.   [hausbauteil-quelle]

   ES GIBT GENAU ZWEI STILE (Operator 2026-08-24):

     .zz-karte--bild    Eine Kollektion MIT hinterlegtem Motiv. Das Bild traegt,
                        der Name steht unten im Verlauf. Gilt fuer Space, Mars,
                        Moon, Earth, Aurum.
     .zz-karte--wort    Eine Kollektion OHNE Motiv. Der Name steht mittig und
                        traegt allein. Das ist der Stil, den Universe und Galaxy
                        schon hatten; ab hier gilt er fuer JEDE bildlose
                        Kollektion.

   DER DRITTE STIL IST WEG. Vorher gab es eine dritte Bauform: das riesige
   durchscheinende Wort als Hintergrund (`.tile`, Schriftgroesse bis 7rem, ohne
   Umbruchregel). Bei "ADAM&EVE" - acht Zeichen in einer Spalte von rund 380 px -
   lief das Wort aus seinem Kasten; genau der Befund des Operators. Der Stil war
   nicht zu reparieren, sondern zu streichen: eine Kollektion hat ein Motiv oder
   sie hat keins, ein drittes gibt es nicht.

   OFFEN ODER ANGEKUENDIGT — UND NIE NUR ueber die FARBE (R28d)
   Beide Stile kennen zwei Zustaende. Der Unterschied liegt in der FORM, nicht
   in einem Farbton:
     offen        durchgezogener Rand, Fusszeile "Discover"
     angekuendigt gestrichelter Rand, Fusszeile "To Be Continued", drei Punkte
   In Graustufen bleibt beides unterscheidbar.

   FARBE. Die Karte bringt keine eigene Farbe mit. Sie rechnet mit `--zz-ac` -
   dem Akzent, den die Seite setzt (je Kategorie ein eigener). Faellt der aus,
   greift der Haus-Sand. Kein Farbliteral in dieser Datei (R30).

   GROESSEN. Beschriftungen laufen auf 0.875rem (14 px). Das ist der Boden aus
   R4, und die Kachel lag vorher darunter - 10 px und 10,5 px, lesbar auf dem
   Schreibtisch und nicht auf dem Telefon. Die Dichte entsteht ueber die
   Sperrung, nicht ueber kleinere Schrift.

   DIE WORTMARKE STEHT NICHT IN DIESER DATEI. Wo eine Karte die Marke des
   Hauses zeigt, laedt die Seite `zz-mark.css` und setzt `.zz-mark` bzw. das
   faltbare Monogramm `.zz-mark--faltbar` (NotoSerifDisplay ExtraCondensed,
   Sperrung -0.2em, Gewicht 700 auf den drei Zeichen). Eine Karte baut die
   Marke nie selbst nach - es gibt genau eine Definition, und sie liegt dort.

   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.
   ============================================================================= */

/* --------------------------------------------------------------- Der Rost */
/* R7: die Spaltenzahl steht nicht fest, die Mindestbreite schon. Unter 360 px
   steht eine Karte allein, statt drei auf Streichholzbreite zu schrumpfen. */
.zz-karten{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
  gap:var(--zz-s-4);
  width:100%;
}
@media (min-width:640px){ .zz-karten{gap:var(--zz-s-5)} }

/* ------------------------------------------------------------- Die Karte */
.zz-karte{
  position:relative;
  display:flex;
  flex-direction:column;
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--zz-panel);
  border:1px solid var(--zz-line);
  color:var(--zz-ink);
  text-decoration:none;
  transition:border-color var(--zz-t-base) var(--zz-ease),
             transform var(--zz-t-base) var(--zz-ease);
}
a.zz-karte:hover{border-color:var(--zz-ac,var(--zz-sand));transform:translateY(-3px)}
.zz-karte:focus-visible{outline:2px solid var(--zz-ac,var(--zz-sand));outline-offset:3px}

/* Angekuendigt: gestrichelt. Das ist die Form-Aussage, die auch in Graustufen
   traegt - "hier ist noch nichts" sieht man am Rand, nicht an der Farbe. */
.zz-karte--kommt{border-style:dashed}

/* --------------------------------------------------- Stil 1: mit Motiv */
.zz-karte--bild{justify-content:flex-end}
.zz-karte__bild{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:.78;
  transition:transform var(--zz-t-slow) var(--zz-ease),opacity var(--zz-t-slow) var(--zz-ease);
}
.zz-karte__bild.is-verdeckt{opacity:0}
a.zz-karte--bild:hover .zz-karte__bild:not(.is-verdeckt){transform:scale(1.06);opacity:.92}

/* Der Verlauf traegt den Text. Ohne ihn steht heller Text auf hellem Motiv -
   der Kontrast waere nicht mehr messbar, sondern vom Bild abhaengig (R5). */
.zz-karte__schleier{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,
    rgb(0 0 0 / .18) 0%, transparent 34%,
    rgb(0 0 0 / .58) 74%, rgb(0 0 0 / .92) 100%);
}

/* -------------------------------------------------- Stil 2: ohne Motiv */
/* Universe und Galaxy hatten diesen Aufbau schon: mittig, ruhig, der Name
   traegt allein. Ab hier gilt er fuer jede bildlose Kollektion. */
.zz-karte--wort{
  justify-content:center;
  align-items:center;
  text-align:center;
  background:
    radial-gradient(120% 80% at 50% 0,rgb(255 255 255 / .05),transparent 60%),
    var(--zz-panel);
}

/* ------------------------------------------------------------- Der Inhalt */
.zz-karte__inhalt{
  position:relative;z-index:2;
  display:flex;flex-direction:column;
  padding:var(--zz-s-5);
  gap:var(--zz-s-2);
  min-width:0;                       /* sonst sprengt ein langes Wort das Raster */
}
.zz-karte--wort .zz-karte__inhalt{align-items:center;gap:var(--zz-s-4)}

.zz-karte__kennung{
  font-family:var(--zz-sans);
  font-size:0.875rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--zz-ac,var(--zz-sand));font-weight:600;
  display:flex;align-items:center;gap:var(--zz-s-2);
}
/* Die zwei Striche links und rechts der Kennung gibt es nur in der Wort-Karte;
   in der Bild-Karte steht die Kennung linksbuendig und braucht keine Fassung. */
.zz-karte--wort .zz-karte__kennung::before,
.zz-karte--wort .zz-karte__kennung::after{
  content:'';width:14px;height:1px;background:currentColor;opacity:.7;
}

/* Der Name. Display-Schrift, Regular - dasselbe Gewicht wie der Mantel der
   Wortmarke, damit Kollektionsname und Haus zueinander passen.
   R75: ein langer Name bricht mit Trennung, statt aus dem Kasten zu laufen. */
.zz-karte__name{
  font-family:var(--zz-display);
  font-weight:400;
  font-size:clamp(1.9rem,4.4vw,2.6rem);
  line-height:1;
  text-transform:uppercase;
  letter-spacing:-.02em;
  hyphens:auto;
  overflow-wrap:break-word;
  max-width:100%;
  text-wrap:balance;
}
.zz-karte--kommt .zz-karte__name{color:var(--zz-ink-dim)}
.zz-karte--kommt:hover .zz-karte__name{color:var(--zz-ink)}

.zz-karte__text{
  font-family:var(--zz-sans);
  font-size:.875rem;line-height:1.45;
  color:var(--zz-ink-dim);
  max-width:32ch;
  text-wrap:pretty;
}
.zz-karte--wort .zz-karte__text{display:none}   /* die Wort-Karte bleibt ruhig */

/* Die Fusszeile sagt den Zustand IN WORTEN - nicht in Farbe (R28d). */
.zz-karte__fuss{
  display:flex;align-items:center;gap:var(--zz-s-3);
  margin-top:var(--zz-s-2);
  font-family:var(--zz-sans);
  font-size:0.875rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--zz-ac,var(--zz-sand));font-weight:600;
  white-space:nowrap;
}
.zz-karte--bild .zz-karte__fuss{justify-content:space-between;width:100%}
.zz-karte--kommt .zz-karte__fuss{color:var(--zz-ink-dim)}
.zz-karte__pfeil{transition:transform var(--zz-t-base) var(--zz-ease);display:inline-block}
a.zz-karte:hover .zz-karte__pfeil{transform:translateX(4px)}

.zz-karte__punkte{display:flex;gap:var(--zz-s-2)}
.zz-karte__punkte span{
  width:5px;height:5px;border-radius:var(--zz-r-pill);
  background:currentColor;opacity:.35;
}
.zz-karte--kommt:hover .zz-karte__punkte span{opacity:.7}

/* R28c: die Karte bewegt sich nur, wenn Bewegung gewuenscht ist. */
@media (prefers-reduced-motion: reduce){
  .zz-karte,.zz-karte__bild,.zz-karte__pfeil{transition-duration:.01ms}
  a.zz-karte:hover{transform:none}
  a.zz-karte--bild:hover .zz-karte__bild{transform:none}
}