/* App-Gefühl. Immer: kein Doppeltipp-Zoom (Pinch bleibt auf der Webseite möglich). Mit der Klasse „app-mode“ (iPhone-App oder zum
   Home-Bildschirm hinzugefügte Webapp, gesetzt in gestures.js) zusätzlich: nichts markieren, kein Gummiband, Druck-Rückmeldung, Übergänge. */
html, body, button, a, input, select, summary, label { touch-action: manipulation; }

html.app-mode, html.app-mode body { overscroll-behavior: none; }
html.app-mode body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
html.app-mode a, html.app-mode img { -webkit-touch-callout: none; -webkit-user-drag: none; }
html.app-mode input, html.app-mode textarea { -webkit-user-select: text; user-select: text; }
html.app-mode ::-webkit-scrollbar { display: none; }
html.app-mode { -webkit-text-size-adjust: 100%; }

/* Druck-Rückmeldung wie bei nativen Knöpfen */
html.app-mode .tile, html.app-mode .chip, html.app-mode .primary, html.app-mode .opt, html.app-mode .thumb,
html.app-mode #nav button, html.app-mode .cart-item .stepper button, html.app-mode .back, html.app-mode .crumb {
  transition: transform .12s ease, opacity .12s ease, background-color .15s ease;
}
html.app-mode .tile:active, html.app-mode .chip:active, html.app-mode .primary:active, html.app-mode .opt:active,
html.app-mode .thumb:active, html.app-mode #nav button:active, html.app-mode .back:active, html.app-mode .crumb:active { transform: scale(.95); opacity: .85; }

/* Übergänge beim Wechsel der Ansicht (die Produktseite schiebt sich von rechts herein; nur Deckkraft bei Liste/Warenkorb,
   damit die fest positionierte Kategorie-Auswahl nicht an der Animation hängt) */
@keyframes view-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes view-in-right { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } }
html.app-mode main > section:not([hidden]) { animation: view-in .2s ease-out; }
html.app-mode main > #view-detail:not([hidden]) { animation: view-in-right .24s cubic-bezier(.2, .8, .2, 1); }

/* Wischen vom linken Rand: Ansicht folgt dem Finger */
main.swiping { will-change: transform; box-shadow: -12px 0 24px rgba(0, 0, 0, .35); }

@media (prefers-reduced-motion: reduce) { html.app-mode main > section:not([hidden]) { animation: none !important; } }

/* ---------- Farbschema „Violett“ (nur iPhone-App: html.theme-violet, gesetzt in gestures.js) ----------
   Palette:  #0E0B1D tiefes Violett-Schwarz · #2A1E4D dunkles Violett · #5A3B8C Violett · #8B7CC7 helles Violett · #C9C2E3 Lavendel · #3A3A52 Schiefer
   Das Design (ios.css) besteht aus Variablen; hier bekommen sie die violetten Werte – immer dunkel, unabhängig vom System. */
html.theme-violet:root {
  color-scheme: dark;
  --bg: #0E0B1D; --surface: #1A1334; --surface-2: #2A1E4D; --well: #F1EEFA;
  --border: rgba(139, 124, 199, .3); --hair: rgba(139, 124, 199, .18);
  --text: #F3F0FF; --muted: rgba(201, 194, 227, .74);
  --accent: #A596E0; --accent-soft: rgba(139, 124, 199, .26); --on-accent: #120C28;
  --good: #7BE0A4; --danger: #FF8A9B; --heart: #FF6F91;
  --seg-on: #5A3B8C; --glass-rgb: 201, 194, 227; --ga-scale: .2; --glass-card-line: rgba(201, 194, 227, .22); --rim: rgba(255, 255, 255, .22);
  --blob-1: rgba(139, 92, 246, .55); --blob-2: rgba(90, 59, 140, .65); --blob-3: rgba(255, 111, 145, .28);
  --glass: rgba(26, 19, 52, .74); --glass-strong: rgba(42, 30, 77, .92); --glass-line: rgba(139, 124, 199, .3);
  --shadow-s: 0 1px 2px rgba(0, 0, 0, .45); --shadow-m: 0 12px 36px rgba(0, 0, 0, .6);
}
html.theme-violet .seg button.active { background: #5A3B8C; color: #fff; }
html.theme-violet .seg { background: rgba(139, 124, 199, .18); }
html.theme-violet .chip.active { background: #C9C2E3; color: #0E0B1D; border-color: #C9C2E3; }
html.theme-violet .primary, html.theme-violet .badge, html.theme-violet .tile .score, html.theme-violet .qc-size[aria-pressed="true"], html.theme-violet .badge-pill.new { background: #5A3B8C; color: #fff; }
html.theme-violet .primary:disabled { background: #3A3A52; }
html.theme-violet .searchbar input { background: #1A1334; border: 1px solid rgba(139, 124, 199, .3); }
html.theme-violet .h-look { background: linear-gradient(135deg, #5A3B8C, #8B7CC7 75%, #C9C2E3); }
html.theme-violet .h-swipe { background: linear-gradient(135deg, #2A1E4D, #7A4FB0 70%, #B38BE8); }
html.theme-violet .h-cap { background: linear-gradient(135deg, #3A3A52, #5A3B8C 60%, #8B7CC7); }
html.theme-violet .h-fill { background: linear-gradient(135deg, #14102B, #2A1E4D 60%, #5A3B8C); }
html.theme-violet dialog::backdrop, html.theme-violet .qb-backdrop.open { background: rgba(14, 11, 29, .7); }
html.theme-violet .lb { background: rgba(14, 11, 29, .96); }
html.theme-violet .img-boxes .crop { box-shadow: 0 0 0 100vmax rgba(14, 11, 29, .62); border-color: #C9C2E3; }
html.theme-violet .pl-copy.ok { border-color: #C9C2E3; color: #C9C2E3; }
html.theme-violet .deck-tag { background: rgba(14, 11, 29, .6); }