/* Detailansicht sanfter (18.10.2026, Micha: „wenn ich einen Artikel groß mache, soll das nicht so ruppig sich groß machen,
   ein bisschen sachter und sanfter“). Vorher: 0,24 s Einblenden und 2 % Hochrutschen, alles auf einmal. Jetzt dunkelt der
   Hintergrund langsamer ab, das Fenster gleitet aus etwas Tiefe mit einem Hauch Vergrößerung herein und bremst weich ab,
   danach kommen Bild und Textbausteine sanft nacheinander. Schließen ruhig und etwas schneller; store.js hideModal wartet
   bei der Detailansicht 380 ms und lässt den Hintergrund gleichzeitig aufhellen. Nach winter-start.css geladen. */
.modal-backdrop { transition: opacity .45s ease; }

/* Laptop: Fenster in der Mitte. Beim Öffnen gilt der Übergang von .open, beim Schließen der ohne. */
@media (min-width: 681px) {
  .product-dialog { transform: translate(-50%, calc(-50% + 16px)) scale(.985); transition: opacity .32s ease, transform .38s cubic-bezier(.4, 0, .6, 1); }
  .product-dialog.open { transform: translate(-50%, -50%); transition: opacity .5s ease, transform .75s cubic-bezier(.16, 1, .3, 1); }
}
/* Handy: das Fenster kommt wie bisher von unten (styles.css), nur weicher. */
@media (max-width: 680px) {
  .product-dialog { transition: opacity .32s ease, transform .38s cubic-bezier(.4, 0, .6, 1); }
  .product-dialog.open { transition: opacity .45s ease, transform .65s cubic-bezier(.16, 1, .3, 1); }
}

/* Inhalt nacheinander: erst das Bild, dann die Textbausteine von oben nach unten. */
.product-dialog.open .dialog-image { animation: detail-bild .7s ease .08s backwards; }
.product-dialog.open .dialog-content > * { animation: detail-zeile .65s cubic-bezier(.16, 1, .3, 1) .48s backwards; }
.product-dialog.open .dialog-content > :nth-child(1) { animation-delay: .16s; }
.product-dialog.open .dialog-content > :nth-child(2) { animation-delay: .2s; }
.product-dialog.open .dialog-content > :nth-child(3) { animation-delay: .24s; }
.product-dialog.open .dialog-content > :nth-child(4) { animation-delay: .28s; }
.product-dialog.open .dialog-content > :nth-child(5) { animation-delay: .32s; }
.product-dialog.open .dialog-content > :nth-child(6) { animation-delay: .36s; }
.product-dialog.open .dialog-content > :nth-child(7) { animation-delay: .4s; }
.product-dialog.open .dialog-content > :nth-child(8) { animation-delay: .44s; }
@keyframes detail-bild { from { opacity: 0; } }
@keyframes detail-zeile { from { opacity: 0; transform: translateY(10px); } }

/* Schon in der Tasche (31.10.2026, Micha: „Tasche anschauen“ statt „Bereits in deiner Tasche“): Der Knopf bleibt
   klickbar und öffnet die Tasche. Ausgefüllt wie beim Drüberfahren, damit man sieht, dass das Stück drin ist; die Farben
   drehen sich im hellen Modus über die Tokens mit. Gleich nach dem Hineinlegen ploppt er kurz auf (is-frisch, store.js). */
.product-dialog .add-to-bag.is-in-bag,
:root[data-theme="light"] .product-dialog .add-to-bag.is-in-bag { border-color: var(--paper); background: var(--paper); color: var(--black); box-shadow: none; }
.product-dialog .add-to-bag.is-frisch { animation: tasche-drin .5s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes tasche-drin { 0% { transform: scale(.96); } 55% { transform: scale(1.02); } 100% { transform: none; } }

/* Ein Zeichen statt „✓ … ↗“ (05.11.2026, Micha: „das Häkchen erkennt man nicht richtig“): dunkler Kreis mit hellem Haken,
   größere Schrift als der normale Knopf. Beim Hineinlegen ploppt der Kreis auf und der Haken zieht sich selbst. */
.product-dialog .add-to-bag.is-in-bag { gap: 11px; font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.bag-check { flex: none; width: 22px; height: 22px; }
.bag-check circle { fill: currentColor; }
.bag-check path { fill: none; stroke: var(--paper); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.add-to-bag.is-frisch .bag-check { animation: haken-kreis .42s cubic-bezier(.3, 1.6, .5, 1) both; }
.add-to-bag.is-frisch .bag-check path { stroke-dasharray: 1; animation: haken-zug .32s .14s ease-out both; }
@keyframes haken-kreis { from { opacity: 0; transform: scale(.4); } }
@keyframes haken-zug { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .product-dialog, .product-dialog.open { transition: opacity .2s ease; }
  .product-dialog.open :is(.dialog-image, .dialog-content > *) { animation: none; }
  .product-dialog .add-to-bag.is-frisch, .add-to-bag.is-frisch .bag-check, .add-to-bag.is-frisch .bag-check path { animation: none; }
}