/* Klebeabstand des Kartenstapels, 2026-09-15.

   `20260906/home-effects.css` ist eingefroren und setzt `--deck-top: 108px`, unter 760 px `86px`.
   Der Wert passt zu einem rund 900 px hohen Fenster; bei 1240 px stehen die Karten oben und darunter
   bleiben 613 px leer. Der Abstand waechst hier mit der Fensterhoehe, bis die Karte mittig steht —
   nach oben nie naeher als die 108 px, die die Kopfzeile freihaelt, nach unten begrenzt, damit der
   Stapel bei sehr hohen Fenstern nicht aus dem Blick rutscht. Weil dieses Blatt zuletzt laedt, muss
   es den schmalen Fall selbst mitfuehren; sonst uebernaehme die Untergrenze von 108 px dort die 86 px
   der eingefrorenen Regel.

   Die Registrierung ist nicht Zierde: `home-scroll.js` (geladen als Modul aus `probe.js`) liest
   `getComputedStyle(deck).getPropertyValue('--deck-top')` und entscheidet damit, ob der Stapel
   ueberhaupt kleben darf — eine Karte, die nicht ins Fenster passt, muss im normalen Fluss bleiben.
   Eine nicht registrierte Custom Property liefert dort den unaufgeloesten Text: aus `clamp(...)`
   wird `parseFloat` -> NaN, der Vergleich wird falsch und der Stapel bleibt ganz aus. Registriert
   liefert dieselbe Abfrage die gerechnete Laenge. */
@property --deck-top { syntax: "<length>"; inherits: true; initial-value: 108px; }
.product-deck { --deck-card: 33rem; --deck-top: clamp(108px, calc(50svh - var(--deck-card) / 2), 21rem); }
@media (max-width: 760px) {
  .product-deck { --deck-top: clamp(86px, calc(50svh - var(--deck-card) / 2), 21rem); }
}

/* Ab 1500 px waechst die Flaeche (`20260917-wide/wide.css`) und mit ihr die Aufnahme in der Karte,
   also auch die Kartenhoehe, auf die `--deck-top` zentriert. Gemessen: 1224 px breite Karte -> 533 px
   hoch, 1704 px -> 694 px; die Hoehe folgt der Breite linear, weil die Aufnahme 1360:712 haelt und
   64 Prozent der Karte einnimmt. Bleibt es bei 33rem, zentriert `--deck-top` auf eine zu niedrige
   Karte und `home-scroll.js` schaltet den Stapel auf niedrigen Fenstern frueher ab. */
@media (min-width: 1500px) {
  .product-deck { --deck-card: calc(.335 * (var(--max) - 2 * var(--gutter)) + 122px); }
}