/* Produktkarten (Marian 20.10.2026): erst A1 „Eselsohr“ (Umdrehen), seit dem Abend v1 „Seite umblättern“ aus /vorschau/produktkarten-ecke.
   Die Infos liegen unter dem Foto. Antippen irgendwo: eine Knicklinie wandert von unten rechts nach oben links, das Foto schlägt sich um wie eine
   Buchseite (das umgeschlagene Stück zeigt Papier), darunter liegen die Infos. Nochmal antippen: die Seite legt sich zurück (public/js/produkte.js).
   Das Eselsohr unten rechts zieht sich beim ersten Erscheinen des Regals einmal leicht hoch, am Computer auch beim Darüberfahren.
   Infos eingesetzt von entwuerfe/produktkarten/einbau.py aus texte.json. Nur Saison-Tokens: passt in jede Saison.
   Prüfung: entwuerfe/produktkarten/test-produktkarten.mjs */

/* --t läuft von 0 (zu) bis 1 (offen) als registrierte Eigenschaft; --w/--h (Innenmaße der Karte) setzt produkte.js.
   Knicklinie x + y = c mit c = (1 − t)(w + h): das Foto (.pk-vorne) zeigt nur x + y ≤ c, .pk-lasche ist das an der Linie gespiegelte Stück.
   min-width: 0, sonst zählt das Raster die volle Fotobreite als Mindestbreite und die Karten werden am Handy 700 px breit (Fehler vom 20.10.2026). */
@property --t { syntax: "<number>"; inherits: true; initial-value: 0; }
.shelf .item[data-pk] { --t: 0; --c: calc((1 - var(--t)) * (var(--w, 1000px) + var(--h, 1000px)));
  position: relative; overflow: hidden; min-width: 0; isolation: isolate; grid-template-rows: 1fr; cursor: pointer;
  background: var(--paper); border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--line)); border-radius: 14px; -webkit-tap-highlight-color: transparent; }
.shelf .item[data-pk].pk-gedreht { --t: 1; }
/* Übergänge mit #shelf (höheres Gewicht als bewegung.css 11 „Einblenden mit Schwung“): das Umblättern läuft immer, auch nach schnellem Scrollen
   (fx-sofort schaltete sonst alles ab), und das Einblenden (opacity, translate, gestaffelt) bleibt erhalten. Fehler vom 20.10.2026. */
#shelf .item[data-pk] { transition: --t .95s cubic-bezier(.45, .05, .25, 1), opacity .9s ease calc(var(--fx-i, 0) * 110ms),
  translate 1.05s cubic-bezier(.2, .7, .2, 1) calc(var(--fx-i, 0) * 110ms); }
#shelf .item[data-pk].fx-sofort, #shelf .item[data-pk].fx-vor { transition: --t .95s cubic-bezier(.45, .05, .25, 1); }
html.fx-hover .shelf .item[data-pk]:hover img { scale: none; }   /* statt Zoom: Karte hebt sich, Eselsohr zieht hoch */
@media (hover: hover) { .shelf .item[data-pk]:hover { translate: 0 -3px; } }

/* Foto mit Bildunterschrift: eine Lage über den Infos, beschnitten an der Knicklinie */
.pk-vorne { position: relative; z-index: 1; display: grid; grid-template-rows: auto 1fr; height: 100%; background: var(--cream);
  clip-path: polygon(0 0, min(var(--c), var(--w, 1000px)) 0, min(var(--c), var(--w, 1000px)) min(max(var(--c) - var(--w, 1000px), 0px), var(--h, 1000px)),
    max(var(--c) - var(--h, 1000px), 0px) min(var(--c), var(--h, 1000px)), 0 min(var(--c), var(--h, 1000px))); }
.shelf .item[data-pk] .pk-vorne > img, .shelf .item[data-pk] .pk-vorne > .cap { border: 0; border-radius: 0; }
/* Das umgeschlagene Stück: Papier mit leichtem Gold, Schatten nur an der Kante; nur während des Blätterns zu sehen */
.pk-lasche-w { position: absolute; inset: 0; z-index: 2; pointer-events: none; filter: drop-shadow(-4px -4px 6px rgba(50, 35, 15, .28)); }
.pk-lasche { position: absolute; left: 0; top: 0; width: var(--w, 1000px); height: var(--h, 1000px); transform-origin: 0 0;
  transform: translate(var(--c), var(--c)) matrix(0, -1, -1, 0, 0, 0);
  background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 30%, var(--paper)) 0%, var(--paper) 55%, color-mix(in srgb, var(--gold) 18%, var(--paper)) 100%);
  clip-path: polygon(min(var(--c), var(--w, 1000px)) min(max(var(--c) - var(--w, 1000px), 0px), var(--h, 1000px)), var(--w, 1000px) min(max(var(--c) - var(--w, 1000px), 0px), var(--h, 1000px)),
    var(--w, 1000px) var(--h, 1000px), max(var(--c) - var(--h, 1000px), 0px) var(--h, 1000px), max(var(--c) - var(--h, 1000px), 0px) min(var(--c), var(--h, 1000px))); }
.shelf .item[data-pk]:not(.pk-gedreht) .pk-lasche { visibility: hidden; transition: visibility 0s .95s; }

/* Eselsohr: umgeschlagene Ecke unten rechts am Foto, zeigt „hier lässt sich blättern“ */
.pk-ohr { position: absolute; right: 0; bottom: 0; z-index: 3; width: 26px; height: 26px; pointer-events: none; transform-origin: 100% 100%;
  background: linear-gradient(135deg, transparent 50%, color-mix(in srgb, var(--gold) 55%, var(--paper)) 50%, color-mix(in srgb, var(--gold) 82%, var(--gold-d)) 100%);
  border-radius: 6px 0 14px 0; filter: drop-shadow(-1px -1px 1.5px rgba(60, 40, 10, .28));   /* Schatten nur an der Faltkante */
  transition: scale .35s cubic-bezier(.3, .7, .3, 1.4), opacity .2s; }
@media (hover: hover) { .shelf .item[data-pk]:not(.pk-gedreht):hover .pk-vorne > .pk-ohr { scale: 1.5; } }
.shelf .item[data-pk].pk-gedreht .pk-vorne > .pk-ohr { opacity: 0; }

/* Infos: Papier mit feinem Goldrahmen (wie der Gutschein „Gerahmt“), liegen flach unter dem Foto */
.pk-rueck { position: absolute; inset: 0; z-index: 0; border-radius: 13px; background: var(--paper); cursor: pointer; }
.pk-rueck::before { content: ""; position: absolute; inset: 7px; border: 1px solid color-mix(in srgb, var(--gold-d) 38%, transparent); border-radius: 9px; pointer-events: none; }
.pk-info { position: relative; display: flex; flex-direction: column; height: 100%; padding: 22px 22px 16px; color: var(--ink); text-align: left; overflow: hidden; }
.pk-marke { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 10.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-d); }
.pk-feder { width: 26px; flex: none; aspect-ratio: 382/187; background: var(--gold-d); -webkit-mask: url("/img/feder.png") center/contain no-repeat; mask: url("/img/feder.png") center/contain no-repeat; }
.pk-name { margin: 8px 0 0; font: 500 22px/1.1 var(--serif); color: var(--deep); }
.pk-essenz { margin: 8px 0 0; font: italic 400 16.5px/1.35 var(--serif); color: var(--ink); }
.pk-zeilen { display: grid; gap: 9px; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid color-mix(in srgb, var(--gold) 60%, transparent); }
.pk-zeilen div { display: grid; grid-template-columns: 46px 1fr; gap: 8px; }
.pk-zeilen dt { font: 700 9.5px/1.75 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pk-zeilen dd { margin: 0; font-size: 13.5px; line-height: 1.42; }
.pk-fuss { margin: auto 0 0; padding: 12px 30px 0 0; font-size: 12px; color: var(--muted); }

/* Unsichtbarer Knopf über der ganzen Karte: Tastatur und Vorleseprogramme; Tippen landet auf ihm und wird in produkte.js gezählt.
   Fokusrahmen innen, weil die Karte überstehendes abschneidet */
.pk-knopf { position: absolute; inset: 0; z-index: 3; margin: 0; padding: 0; border: 0; border-radius: 13px; background: transparent; color: transparent; cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
.pk-knopf:focus-visible { outline: 2px solid var(--gold-d); outline-offset: -5px; }

/* Handy und Computer: voller Text. Tablet (vier schmale Karten, rund 166 px): nur Satz und Inhaltsstoffe */
@media (max-width: 1099px) { .pk-essenz { font-size: 15.5px; } .pk-info { padding: 18px 18px 14px; } }
@media (min-width: 760px) and (max-width: 1099px) {
  .pk-zeilen div:not(:nth-child(2)) { display: none; } .pk-zeilen div { grid-template-columns: 1fr; gap: 2px; }
  .pk-name { font-size: 18px; } .pk-essenz { font-size: 14px; } .pk-info { padding: 14px 12px 10px; } .pk-marke { font-size: 9px; letter-spacing: .12em; } .pk-feder { width: 20px; }
  .pk-fuss { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #shelf .item[data-pk], #shelf .item[data-pk].fx-sofort, #shelf .item[data-pk].fx-vor { transition: none; } .pk-ohr { transition: none; }
  .shelf .item[data-pk]:not(.pk-gedreht) .pk-lasche { transition: none; }
}
/* Preis auf der Rückseite (Marian 20.10.2026, Hub „Produkte“, src/produkte.js): je Größe Preis, daneben Inhalt und Grundpreis (je 1 l bzw. 1 kg).
   Leer = unsichtbar, dann steht der Inhalt wie bisher im Fuß; mit Preis fällt der Inhalt im Fuß weg (sonst doppelt). */
.pk-preis { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: baseline; gap: 3px 10px; margin: auto 0 0; padding: 11px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--gold) 60%, transparent); }
.pk-preis:empty { display: none; }
.pk-pz { display: contents; }
.pk-pz b { font: 600 19px/1.15 var(--serif); color: var(--deep); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pk-pz small { font-size: 11.5px; line-height: 1.3; color: var(--muted); }
.pk-preis:not(:empty) + .pk-fuss { margin-top: 0; padding-top: 5px; }
.pk-preis:not(:empty) ~ .pk-fuss .pk-menge { display: none; }
@media (min-width: 760px) and (max-width: 1099px) {
  .pk-preis { grid-template-columns: 1fr; gap: 0; padding: 8px 22px 0 0; }
  .pk-pz b { font-size: 16px; } .pk-pz small { font-size: 10.5px; margin-bottom: 2px; }
}