/* Bewegung & Übergänge. Nur transform/opacity, Hover nur mit Maus, reduzierte Bewegung respektiert. */
:root {
  --ease-out-stark: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out-stark: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  interpolate-size: allow-keywords;
}

/* ---------- Seitenübergänge (Chrome/Edge/Safari 18.2+, sonst normaler Wechsel) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-raus 180ms var(--ease-out-stark) both; }
::view-transition-new(root) { animation: vt-rein 240ms var(--ease-out-stark) both; }
::view-transition-group(produkt-bild) { animation-duration: 320ms; animation-timing-function: var(--ease-in-out-stark); }
@keyframes vt-raus { to { opacity: 0; } }
@keyframes vt-rein { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Einblenden beim Scrollen, gestaffelt ---------- */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease-out-stark), transform 600ms var(--ease-out-stark); transition-delay: calc(var(--i, 0) * 60ms); }
.js .reveal.sichtbar { opacity: 1; transform: none; }

/* ---------- Hero: langsamer Zoom beim Laden ---------- */
.hero-zoom { animation: hero-zoom 1800ms var(--ease-out-stark) both; }
@keyframes hero-zoom { from { transform: scale(1.07); } }
.hero-rein > * { animation: hero-rein 700ms var(--ease-out-stark) both; }
.hero-rein > :nth-child(2) { animation-delay: 60ms; }
.hero-rein > :nth-child(3) { animation-delay: 120ms; }
.hero-rein > :nth-child(4) { animation-delay: 180ms; }
.hero-rein > :nth-child(5) { animation-delay: 240ms; }
@keyframes hero-rein { from { opacity: 0; transform: translateY(14px); } }

/* ---------- Laufband ---------- */
.laufband { overflow: hidden; border-block: 1px solid var(--linie); padding-block: 14px; }
.laufband-spur { display: flex; gap: 48px; width: max-content; animation: laufband 40s linear infinite; }
.laufband-spur span { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; font-weight: 600; font-size: .95rem; }
.laufband-spur span::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--akzent); margin-left: 36px; }
@media (hover: hover) and (pointer: fine) { .laufband:hover .laufband-spur { animation-play-state: paused; } }
@keyframes laufband { to { transform: translateX(-50%); } }

/* ---------- Produktkarte: zweites Bild beim Darüberfahren ---------- */
.karte-bild .bild-2 { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 280ms ease; }
@media (hover: hover) and (pointer: fine) {
  .karte:hover .karte-bild .bild-2 { opacity: 1; }
}

/* ---------- Ladeplatzhalter ---------- */
.skelett { position: relative; overflow: hidden; background: var(--bg-alt); border-radius: var(--radius); }
.skelett::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); animation: schimmer 1.4s linear infinite; }
.skelett-karte { aspect-ratio: 4 / 5.6; }
@keyframes schimmer { to { transform: translateX(100%); } }

/* ---------- Warenkorb-Zähler & Drawer ---------- */
.drawer { transition: transform 420ms var(--ease-drawer); }
.overlay { transition: opacity 300ms var(--ease-out-stark); }

/* ---------- Akkordeon weich auf/zu (wo unterstützt) ---------- */
details::details-content { block-size: 0; overflow: hidden; transition: block-size 260ms var(--ease-out-stark), content-visibility 260ms allow-discrete; }
details[open]::details-content { block-size: auto; }

/* ---------- Druck-Feedback ---------- */
.icon-btn, .schnell, .merken, .chip, .option-werte button, .menge button { transition: transform 140ms var(--ease-out-stark), background-color 200ms ease, color 200ms ease, border-color 200ms ease; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root), ::view-transition-group(produkt-bild) { animation: none; }
  .js .reveal { transform: none; transition: opacity 200ms ease; transition-delay: 0ms; }
  .hero-zoom, .hero-rein > * { animation: none; }
  .laufband-spur { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .laufband-spur [aria-hidden="true"] { display: none; }
  .skelett::after { animation: none; }
  details::details-content { transition: none; }
}

/* ===================================================================
   Feinschliff nach Emil Kowalskis Design-Engineering-Regeln
   =================================================================== */

/* Handy: kein grauer Tipp-Blitz, kein Doppeltipp-Zoom-Verzögerung, Seite scrollt nicht mit */
html { -webkit-tap-highlight-color: transparent; }
a, button, label, summary, select { touch-action: manipulation; }
.btn, .btn-rand, .icon-btn, .schnell, .merken, .chip { -webkit-user-select: none; user-select: none; }
.drawer-inhalt, .mobil-menue, .filter, .suche-treffer, dialog.modal { overscroll-behavior: contain; }

/* Druckfeedback: subtil, 160 ms */
.btn, .btn-rand { transition: background-color 200ms ease, color 200ms ease, transform 160ms var(--ease-out-stark); }
.btn:active, .btn-rand:active { transform: scale(0.97); }
.icon-btn:active, .schnell:active, .merken:active, .chip:active, .option-werte button:active, .menge button:active { transform: scale(0.97); }

/* Produktkarte: ein Effekt (Bildwechsel), Schatten nur über opacity */
.karte { overflow: visible; isolation: isolate; transform: translateZ(0); transition: transform 200ms var(--ease-out-stark); }
.karte::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: var(--schatten-gross); opacity: 0; transition: opacity 200ms ease; pointer-events: none; }
.karte-bild { border-radius: var(--radius) var(--radius) 0 0; }
.karte-bild img, .karte:hover .karte-bild img { transform: none; transition: none; }
.karte-bild .bild-2 { transition: opacity 200ms ease; }
@media (hover: hover) {
  .karte:hover { transform: none; box-shadow: var(--schatten); }
}
@media (hover: hover) and (pointer: fine) {
  .karte:hover { transform: translateY(-2px); }
  .karte:hover::before { opacity: 1; }
}

/* Kacheln mit Bild: dezent und unter 300 ms, nur mit Maus */
.tier-kachel img, .kategorie-kachel img, .mega-kachel img { transition: transform 300ms var(--ease-out-stark); }
@media (hover: hover) { .tier-kachel:hover img, .kategorie-kachel:hover img, .mega-kachel:hover img { transform: none; } }
@media (hover: hover) and (pointer: fine) { .tier-kachel:hover img, .kategorie-kachel:hover img, .mega-kachel:hover img { transform: scale(1.03); } }

/* Plan-Karten (ZENIT): Schatten über opacity */
.plan-karte { overflow: visible; position: relative; isolation: isolate; transition: transform 200ms var(--ease-out-stark); }
.plan-karte:hover { box-shadow: none; }
.plan-karte::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: var(--schatten-gross); opacity: 0; transition: opacity 200ms ease; pointer-events: none; }
.plan-bild { border-radius: var(--radius) var(--radius) 0 0; }
@media (hover: hover) and (pointer: fine) {
  .plan-karte:hover { transform: translateY(-2px); }
  .plan-karte:hover::before { opacity: 1; }
}

/* Gratisversand-Balken: transform statt width */
.versand-balken .fuellung { width: 100%; transform-origin: left center; transition: none; }

/* Warenkorb: schliessen schneller als öffnen */
.drawer:not(.offen) { transition-duration: 240ms; }
.overlay:not(.offen) { transition-duration: 200ms; }

/* Panels, die hereingleiten: Drawer-Kurve */
@media (max-width: 880px) {
  .filter { transition: transform 360ms var(--ease-drawer); }
  .filter:not(.offen) { transition-duration: 220ms; }
  .sticky-kauf { transition: transform 280ms var(--ease-drawer); }
}

/* Mega-Menü (ZENIT): kurzes Einblenden beim Öffnen, Schliessen sofort */
.mega:not([hidden]) {
  transition: opacity 180ms var(--ease-out-stark), transform 180ms var(--ease-out-stark);
  @starting-style { opacity: 0; transform: translateY(-6px); }
}

/* Handy-Menü: weich einblenden, ohne Bewegung */
.mobil-menue:not([hidden]) {
  transition: opacity 200ms ease;
  @starting-style { opacity: 0; }
}

/* Lightbox: nicht aus dem Nichts, zentriert */
dialog.lightbox[open] img {
  transition: opacity 200ms var(--ease-out-stark), transform 200ms var(--ease-out-stark);
  @starting-style { opacity: 0; transform: scale(0.97); }
}

@media (prefers-reduced-motion: reduce) {
  .karte, .plan-karte, .tier-kachel img, .kategorie-kachel img, .mega-kachel img { transition: none; }
  .karte:hover, .plan-karte:hover, .tier-kachel:hover img, .kategorie-kachel:hover img, .mega-kachel:hover img { transform: none; }
  .mega:not([hidden]) { @starting-style { transform: none; } }
  dialog.lightbox[open] img { @starting-style { transform: none; } }
}