@charset "UTF-8";
/* Violetter Premium-Look mit klaren Ebenen.
   Ebenen: pflaumenvioletter Hintergrund → sichtbar hellere Karten → Produktbühnen in Perlmutt-Flieder
   mit Podest, Kontaktschatten und Lichtreflex. Akzente: kräftiges Violett, Lavendel, zurückhaltendes Rosé,
   Mint nur für abgeschlossene Schritte. */
:root {
  color-scheme: dark;
  --bg: #1c1131; --bg-top: #271743; --bg-bottom: #160d28;
  --surface: #2d1f4d; --surface-2: #3a2963; --surface-3: #4a3480; --field: #170d2b;
  --ink: #f8f5ff; --ink-2: #ddd3f5; --ink-3: #bcafde;
  --violet: #8b5cf6; --violet-strong: #7c3aed; --violet-deep: #6d28d9;
  --lavender: #c4b5fd; --rose: #f5b3cf; --mint: #6ee7b7;
  --pearl: #f6f1ff; --lilac: #ddd0fb; --lilac-deep: #bba8ef;
  --line: rgba(196, 181, 253, .2); --line-strong: rgba(196, 181, 253, .42);
  --shadow: rgba(9, 3, 22, .6); --glow: rgba(139, 92, 246, .45);
  --stage-light: radial-gradient(80% 62% at 26% 6%, rgba(255, 255, 255, .96), rgba(255, 255, 255, 0) 58%);
  --stage-base: linear-gradient(180deg, #f1eaff 0%, #ddd0fb 58%, #c6b3f2 100%);
  --text: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.22, .7, .24, 1);
  /* Device insets may also come from the browser; Telegram controls add a second layer. */
  --safe-top: calc(max(env(safe-area-inset-top, 0px), var(--telegram-safe-top, 0px)) + var(--telegram-content-safe-top, 0px));
  --safe-right: calc(max(env(safe-area-inset-right, 0px), var(--telegram-safe-right, 0px)) + var(--telegram-content-safe-right, 0px));
  --safe-bottom: calc(max(env(safe-area-inset-bottom, 0px), var(--telegram-safe-bottom, 0px)) + var(--telegram-content-safe-bottom, 0px));
  --safe-left: calc(max(env(safe-area-inset-left, 0px), var(--telegram-safe-left, 0px)) + var(--telegram-content-safe-left, 0px));
  --app-viewport-height: 100vh; --viewport-bottom-offset: 0px;
  --gutter-left: max(16px, var(--safe-left)); --gutter-right: max(16px, var(--safe-right));
  font-family: var(--text);
  font-synthesis: none; -webkit-font-smoothing: antialiased;
}

/* ---------- Grundlagen ---------- */
* { box-sizing: border-box; }
html { scroll-padding-top: calc(72px + var(--safe-top)); scroll-padding-bottom: calc(96px + var(--safe-bottom)); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: var(--app-viewport-height); color: var(--ink); background: var(--bg); font-size: 15px; line-height: 1.5; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(85% 55% at 100% 0%, rgba(139, 92, 246, .34), transparent 62%), radial-gradient(70% 45% at 0% 100%, rgba(245, 179, 207, .1), transparent 62%), linear-gradient(180deg, var(--bg-top) 0%, var(--bg) 42%, var(--bg-bottom) 100%); }
button, input, select, textarea { font: inherit; }
button, a, input, summary, label { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { cursor: pointer; color: inherit; }
a { color: inherit; text-decoration: none; }
svg { display: block; flex-shrink: 0; }
.line-icon, a > svg, button > svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3, p, dt, dd { overflow-wrap: break-word; }
h1, h2 { text-wrap: balance; }
::selection { color: #fff; background: var(--violet-strong); }
button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--lavender); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }
[hidden] { display: none !important; }
.skip-link { position: fixed; top: -100px; left: var(--gutter-left); z-index: 40; padding: 12px 18px; border-radius: 999px; color: #fff; background: var(--violet-strong); font-weight: 600; }
.skip-link:focus { top: calc(8px + var(--safe-top)); }

/* ---------- Kopfzeile ---------- */
.site-header { position: sticky; top: 0; z-index: 20; padding-top: var(--safe-top); background: #1c1131; border-bottom: 1px solid var(--line); box-shadow: 0 10px 24px -20px var(--shadow); view-transition-name: site-header; }
.header-inner { max-width: 640px; min-height: 60px; margin: 0 auto; padding: 6px var(--gutter-right) 6px var(--gutter-left); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; font-size: 13px; font-weight: 750; letter-spacing: .22em; line-height: 1.2; color: var(--ink); }
.brand > span:last-child { overflow-wrap: anywhere; }
.brand-mark { width: 26px; height: 28px; color: var(--lavender); }
.brand-mark svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.brand img { object-fit: contain; border-radius: 7px; }
.header-actions { flex-shrink: 0; display: flex; align-items: center; gap: 6px; }
.demo-badge { white-space: nowrap; display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; color: var(--lavender); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); font-size: 11px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.header-info { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-2); transition: background-color .18s ease, color .18s ease; }
.header-info svg { width: 21px; height: 21px; }
.header-info[aria-current="page"] { color: var(--ink); background: var(--surface-2); }
.admin-link { min-height: 44px; display: inline-flex; align-items: center; padding: 0 8px; color: var(--lavender); font-size: 14px; font-weight: 700; }
.header-inner:has(.admin-link:not([hidden])) { flex-wrap: wrap; gap: 2px 8px; }
.header-inner:has(.admin-link:not([hidden])) .brand { flex: 1 1 100px; }
.header-inner:has(.admin-link:not([hidden])) .demo-badge { display: none; }
.private-context { max-width: 640px; margin: 0 auto; padding: 10px var(--gutter-right) 10px var(--gutter-left); display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; line-height: 1.5; color: var(--ink-2); background: #241640; border-bottom: 1px solid var(--line); }
.private-context > span { flex-basis: 100%; }
.private-context a { display: inline-flex; min-height: 44px; align-items: center; color: var(--lavender); font-weight: 650; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Seitenrahmen ---------- */
.main-content { width: 100%; max-width: 640px; margin: 0 auto; min-height: max(0px, calc(var(--app-viewport-height) - 61px - var(--safe-top))); padding: 0 var(--gutter-right) calc(28px + var(--safe-bottom) + var(--viewport-bottom-offset)) var(--gutter-left); }
.view { animation: view-in .32s var(--ease) both; }
.eyebrow, .product-index, .detail-overline { font-size: 12px; font-weight: 750; letter-spacing: .14em; line-height: 1.4; text-transform: uppercase; color: var(--lavender); }
.page-footer { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); text-align: center; }
.footer-brand { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 750; letter-spacing: .2em; color: var(--ink-2); }
.footer-brand svg { width: 20px; height: 22px; color: var(--lavender); }
.footer-note { color: var(--ink-3); font-size: 13px; line-height: 1.6; max-width: 280px; }

/* ---------- Buttons ---------- */
.button { min-height: 52px; width: 100%; border-radius: 16px; border: 0; padding: 12px 22px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-size: 16px; font-weight: 650; line-height: 1.3; text-align: center; transition: transform .18s var(--ease), background-color .18s ease, box-shadow .18s ease, opacity .18s ease; }
.button-primary { color: #fff; background: linear-gradient(135deg, var(--violet-strong), var(--violet-deep)); box-shadow: 0 14px 28px -14px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .24), inset 0 0 0 1px rgba(221, 208, 251, .22); }
.button-primary:not(:disabled):active { background: linear-gradient(135deg, #6d28d9, #5b21b6); }
.button-secondary { color: var(--ink); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-strong), inset 0 1px 0 rgba(255, 255, 255, .06); }
.button-secondary:not(:disabled):active { background: var(--surface-3); }
.button > svg { width: 18px; height: 18px; }
.button:not(:disabled):active { transform: scale(.97); transition-duration: .06s; }
.button:disabled { opacity: .5; cursor: default; box-shadow: none; }
.text-link { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; color: var(--lavender); font-weight: 650; }
.text-link > svg { width: 16px; height: 16px; }
.icon-button { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; background: var(--surface-2); border: 0; border-radius: 50%; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.icon-button > svg { width: 20px; height: 20px; }
.back-link { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; padding-right: 8px; color: var(--ink-2); font-size: 15px; font-weight: 650; transition: transform .18s var(--ease); }
.back-link > svg { width: 20px; height: 20px; color: var(--lavender); }
.back-link:active { transform: scale(.97); }

/* ---------- Gemeinsame Bühnenbausteine ---------- */
/* Podest: Deckfläche in Perlmutt, Seitenband in Flieder. */
.podium { position: absolute; left: 50%; transform: translateX(-50%); pointer-events: none; }
.podium::before { content: ""; position: absolute; left: 0; right: 0; top: 30%; bottom: 0; border-radius: 0 0 50% 50% / 0 0 62% 62%; background: linear-gradient(90deg, #6f55bd 0%, #a690e6 24%, #e2d8ff 42%, #b59ff0 66%, #5f46ad 100%); box-shadow: 0 16px 24px -12px rgba(9, 3, 22, .7); }
.podium::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 60%; border-radius: 50%; background: radial-gradient(70% 80% at 36% 34%, #ffffff 0%, #efe8ff 42%, #cdbcf5 100%); box-shadow: inset 0 -3px 6px rgba(90, 60, 170, .28), inset 0 2px 2px rgba(255, 255, 255, .85); }
/* Weicher Kontaktschatten, leicht nach rechts versetzt (Licht von oben links). */
.contact-shadow { position: absolute; pointer-events: none; border-radius: 50%; background: radial-gradient(closest-side, rgba(40, 18, 88, .62), rgba(40, 18, 88, .22) 55%, transparent); }

/* ---------- Übersicht: Hero ---------- */
.direct-catalog { padding-top: 6px; }
.catalog-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 46%); align-items: center; gap: 4px; padding: 8px 0 14px; }
.hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.catalog-hero h1 { font-size: clamp(34px, 10vw, 46px); font-weight: 800; line-height: 1; letter-spacing: -.035em; background: linear-gradient(180deg, #ffffff 25%, var(--lavender)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.catalog-meta { color: var(--ink-2); font-size: 14px; line-height: 1.45; }
.demo-entry { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 4px; padding: 0 14px 0 12px; border-radius: 999px; color: var(--ink); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-strong), 0 10px 20px -14px var(--shadow); font-size: 14px; font-weight: 700; transition: transform .18s var(--ease), background-color .18s ease; }
.demo-entry svg { width: 18px; height: 18px; color: var(--mint); }
.demo-entry:active { transform: scale(.97); background: var(--surface-3); }
.hero-stage { position: relative; aspect-ratio: 4 / 5; }
.hero-disc { position: absolute; inset: 4% -4% 14%; border-radius: 50%; background: radial-gradient(closest-side, rgba(221, 208, 251, .5), rgba(139, 92, 246, .3) 52%, rgba(139, 92, 246, 0)); }
.hero-stage .podium { width: 66%; height: 16%; bottom: 4%; }
.hero-shadow { left: 31%; right: 23%; bottom: calc(15.2% - 6px); height: 12px; animation: shadow-breathe 6s ease-in-out 1s infinite; }
.hero-float { position: absolute; inset: 2% 0 18%; z-index: 1; display: flex; justify-content: center; align-items: flex-end; animation: float 6s ease-in-out 1s infinite; }
.hero-float img { height: 100%; width: auto; max-width: 100%; object-fit: contain; transform: rotate(-6deg); transform-origin: 50% 100%; filter: drop-shadow(-6px 18px 18px rgba(9, 3, 22, .55)) drop-shadow(0 0 22px rgba(196, 181, 253, .35)); }

/* ---------- Übersicht: Produktkarten ---------- */
.product-list { display: grid; gap: 14px; }
.product-card { position: relative; min-width: 0; display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); align-items: center; gap: 14px; padding: 10px 14px 10px 10px; border-radius: 24px; background: var(--surface); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px var(--line), 0 22px 36px -24px var(--shadow); transition: transform .18s var(--ease), box-shadow .2s ease; }
/* Produktbühne in Perlmutt-Flieder: hebt sich klar von der Karte ab. */
.product-art { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 18px; background: var(--stage-light), var(--stage-base); box-shadow: inset 0 -26px 30px -22px rgba(96, 66, 180, .45), inset 0 1px 0 rgba(255, 255, 255, .9), 0 10px 20px -14px rgba(9, 3, 22, .7); }
/* Vordergrund: ein ruhiger Lichtreflex über dem Bild. */
.product-art::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, .26) 40%, rgba(255, 255, 255, 0) 52%); }
.product-art::after { content: ""; position: absolute; z-index: 0; left: 30%; right: 16%; bottom: calc(8% - 5px); height: 10px; border-radius: 50%; background: radial-gradient(closest-side, rgba(40, 18, 88, .55), rgba(40, 18, 88, .2) 55%, transparent); }
.product-art img { position: absolute; z-index: 1; left: 6%; top: 5%; width: 88%; height: 87%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 0 .6px rgba(46, 22, 96, .6)) drop-shadow(5px 9px 9px rgba(60, 30, 120, .28)); transition: transform .2s var(--ease); }
.product-copy { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.product-index { font-size: 11px; }
.product-name { font-size: clamp(18px, 5vw, 21px); font-weight: 750; line-height: 1.2; letter-spacing: -.015em; -webkit-hyphens: auto; hyphens: auto; }
.product-short { color: var(--ink-2); font-size: 13.5px; line-height: 1.4; }
.product-price { margin-top: 8px; font-size: 18px; font-weight: 800; line-height: 1.35; font-variant-numeric: tabular-nums; }
.price-label { display: block; color: var(--ink-3); font-size: 12px; line-height: 1.4; }
.product-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--lavender); font-size: 14px; font-weight: 700; }
.product-more svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.product-card:active { transform: scale(.985); transition-duration: .07s; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px var(--line-strong), 0 14px 26px -22px var(--shadow); }
.product-card:active .product-art img { transform: translateY(-3px); }
.product-card:active .product-more svg { transform: translateX(3px); }
.product-card:focus-visible { outline: 3px solid var(--lavender); outline-offset: 3px; }

/* Bodenspiegelung nur für die eingebauten, freigestellten Fläschchen, nie für hochgeladene Fotos. */
.product-art img:is([src*="vial-"], [src*="/builtin-"]) { -webkit-box-reflect: below 2px linear-gradient(transparent 78%, rgba(0, 0, 0, .26)); }
.product-tilt img:is([src*="vial-"], [src*="/builtin-"]) { -webkit-box-reflect: below 1px linear-gradient(transparent 86%, rgba(0, 0, 0, .22)); }

/* Preise: regulär gedämpft und durchgestrichen, reduziert in Rosé. */
.price-pair { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; max-width: 100%; vertical-align: baseline; white-space: normal; }
.price-regular { color: var(--ink-3); font-size: .78em; font-weight: 500; text-decoration: line-through; text-decoration-color: var(--rose); text-decoration-thickness: 2px; white-space: nowrap; }
.price-effective { color: var(--rose); font-size: inherit; font-weight: 800; white-space: nowrap; }

/* ---------- Leere Liste, Fehler, Laden ---------- */
.empty-state, .error-state { padding: 32px 22px; border-radius: 24px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); text-align: center; }
.empty-state h2, .error-state h1 { font-size: 24px; font-weight: 750; line-height: 1.25; }
.empty-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--surface-2); color: var(--lavender); margin: 0 auto 16px; }
.empty-state p, .error-state p { font-size: 15px; line-height: 1.7; color: var(--ink-2); margin: 12px 0 22px; }
.error-state { margin-top: 28px; }
.loading-state { min-height: 55vh; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 16px; color: var(--ink-2); font-size: 15px; text-align: center; }
.loader { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--line-strong); border-top-color: var(--lavender); animation: spin 1s linear infinite; }
.noscript-note { margin: 20px; padding: 20px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }

/* ---------- Produktdetail ---------- */
.detail-page { padding-top: 6px; }
.detail-page > .back-link, .tracking-page > .back-link { margin-left: -4px; }
.detail-layout { display: flex; flex-direction: column; gap: 22px; margin-top: 8px; }
.detail-head { display: flex; flex-direction: column; gap: 6px; }
.detail-overline { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.product-badge { color: var(--ink-3); }
.detail-head h1 { font-size: clamp(30px, 8.6vw, 42px); font-weight: 800; line-height: 1.04; letter-spacing: -.03em; -webkit-hyphens: auto; hyphens: auto; }
.detail-lede { color: var(--ink-2); font-size: 17px; line-height: 1.45; }
.detail-media { min-width: 0; container-type: inline-size; }
/* Studiobühne: Hintergrundwand, Podest, Kontaktschatten, Produkt, Lichtreflex als Vordergrund. */
.detail-visual {
  position: relative; overflow: hidden; isolation: isolate; width: 100%;
  height: min(92vw, 40vh, 460px); min-height: 250px; border-radius: 28px;
  background: var(--stage-light), radial-gradient(48% 46% at 88% 34%, rgba(245, 179, 207, .4), rgba(245, 179, 207, 0) 72%), var(--stage-base);
  box-shadow: inset 0 -46px 50px -34px rgba(96, 66, 180, .5), inset 0 1px 0 rgba(255, 255, 255, .9), 0 30px 54px -34px var(--shadow);
  touch-action: pan-y;
}
@supports (width: 1cqw) { .detail-visual { height: min(92cqw, 40vh, 460px); } }
.detail-visual .podium { width: 52%; height: 14%; bottom: 7%; }
.stage-shadow { left: 37%; right: 27%; bottom: calc(16.8% - 7px); height: 14px; animation: shadow-breathe 6s ease-in-out 1.6s infinite; }
.product-float { position: absolute; inset: 7% 0 18.5%; z-index: 1; display: flex; justify-content: center; align-items: flex-end; perspective: 700px; animation: float 6s ease-in-out 1.6s infinite; }
.product-tilt { height: 100%; width: 100%; display: flex; justify-content: center; align-items: flex-end; transform-origin: 50% 90%; transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform .7s cubic-bezier(.2, .8, .2, 1); animation: vial-turn .9s var(--ease) .35s backwards; }
.product-tilt.is-tilting { transition-duration: .12s; }
.product-tilt img { height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 0 .6px rgba(46, 22, 96, .6)) drop-shadow(8px 16px 16px rgba(60, 30, 120, .32)); }
.stage-sheen { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; border-radius: inherit; background: linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .22) 41%, rgba(255, 255, 255, 0) 52%); transform: translateX(var(--sheen-shift, 0px)); transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.stage-sheen::after { content: ""; position: absolute; inset: -10% -60%; opacity: 0; background: linear-gradient(105deg, rgba(255, 255, 255, 0) 44%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 56%); transform: translateX(-55%); animation: light-sweep 1.1s cubic-bezier(.45, .1, .25, 1) .8s both; }
.image-caption { color: var(--ink-3); font-size: 12px; text-align: center; line-height: 1.5; margin-top: 10px; }
.detail-info { min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.selection-summary { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; padding: 16px 18px; border-radius: 20px; background: var(--surface); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px var(--line); }
.selection-summary > div { min-width: 0; }
.selection-price-label { font-size: 12px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.selection-price { margin-top: 2px; font-size: 34px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.selection-price .price-regular { font-size: 17px; }
.selected-variant { color: var(--ink-2); font-size: 15px; font-weight: 600; text-align: right; padding-bottom: 6px; }
.variant-fieldset { padding: 0; margin: 0; border: 0; min-width: 0; }
.variant-fieldset legend { padding: 0; margin-bottom: 10px; font-size: 12px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.variant-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(92px, 100%), 1fr)); gap: 8px; }
.variant-options.has-discount { grid-template-columns: repeat(auto-fit, minmax(min(132px, 100%), 1fr)); }
.variant-option { position: relative; min-width: 0; }
.variant-option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.variant-option label { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 68px; height: 100%; padding: 10px 6px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); text-align: center; cursor: pointer; pointer-events: none; transition: background-color .25s ease, box-shadow .25s ease, transform .25s var(--ease); }
.variant-name { font-size: 15px; font-weight: 700; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; }
.variant-price { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.has-discount .variant-price { font-size: 14px; }
.has-discount .price-pair { justify-content: center; }
.variant-option input:checked + label { background: linear-gradient(160deg, var(--violet-strong), var(--violet-deep)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), inset 0 0 0 1px rgba(221, 208, 251, .45), 0 12px 24px -12px var(--glow); transform: translateY(-2px); }
.variant-option input:checked + label .variant-name { color: #fff; }
.variant-option input:checked + label .variant-price, .variant-option input:checked + label .price-effective { color: #fff; }
.variant-option input:checked + label .price-regular { color: #ece4ff; }
.variant-option input:active + label { transform: scale(.97); }
.variant-option input:focus-visible + label { outline: 3px solid var(--lavender); outline-offset: 2px; }
.detail-note { color: var(--ink-3); font-size: 13px; line-height: 1.6; }
.detail-description { color: var(--ink-2); font-size: 16px; line-height: 1.7; max-width: 62ch; }
.product-facts { display: flex; flex-direction: column; gap: 8px; }
.facts-title { font-size: 12px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.spec-list { margin: 0; }
.spec-row { display: grid; grid-template-columns: 8em minmax(0, 1fr); gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.5; }
.spec-row:last-child { border-bottom: 1px solid var(--line); }
.spec-row dt { color: var(--ink-3); }
.spec-row dd { margin: 0; min-width: 0; }
.features { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.features li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.features li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--lavender); }
/* Angeheftete Leiste mit deckender Fläche: zeigt den aktuellen Beispielpreis und „Weiter“. */
.detail-action { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 14px; margin: 24px calc(-1 * var(--gutter-right)) 0 calc(-1 * var(--gutter-left)); padding: 10px var(--gutter-right) calc(10px + var(--safe-bottom) + var(--viewport-bottom-offset)) var(--gutter-left); background: #21143a; border-top: 1px solid var(--line); box-shadow: 0 -16px 28px -20px var(--shadow); }
.detail-action .button { flex: 1 1 auto; width: auto; min-width: 0; }
.action-price { flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.action-label { font-size: 11px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.action-amount { display: block; margin-top: 2px; font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.action-amount .price-pair { flex-wrap: nowrap; gap: 6px; }

/* V3: Claudes Kartenbühnen und Scan-Knopf. Kundenansicht und private Admin-Vorschau.
   Eine lebende Zeichenfläche; Ruheposter liegen ohne eigene Render-Schleife darunter. */
.product-art[data-scan-card] { position: relative; isolation: isolate; display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 18px; background: var(--stage-light), var(--stage-base); box-shadow: 0 10px 20px -14px rgba(9, 3, 22, .7); }
.product-art[data-scan-card]::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit; box-shadow: inset 0 -26px 30px -22px rgba(96, 66, 180, .45), inset 0 1px 0 rgba(255, 255, 255, .9); }
[data-scan-card] .podium { bottom: 8%; width: 58.7%; height: 23.6%; }
[data-scan-card] .podium::after { height: 66%; background: radial-gradient(70% 80% at 40% 38%, #d6caf1 0%, #cdbeed 55%, #c4b4e6 100%); box-shadow: inset 0 -2px 3px rgba(90, 60, 170, .16), inset 0 1px 1px rgba(255, 255, 255, .7); }
[data-scan-card] .podium::before { top: 33%; border-radius: 0 0 50% 50% / 0 0 50% 50%; background: linear-gradient(90deg, #62578a 0%, #7a6ca6 22%, #8376aa 36%, #786ba1 52%, #6c5f97 70%, #574b78 100%); box-shadow: none; }
[data-scan-card] .art-shadow { left: 31%; right: 25%; bottom: calc(25.3% - 5px); height: 10px; }
[data-scan-card] .art-image { position: absolute; z-index: 1; inset: 4.8% 0 25.3%; display: flex; justify-content: center; align-items: flex-end; }
[data-scan-card] .art-image img { height: 100%; width: auto; max-width: 92%; object-fit: contain; object-position: 50% 100%; transform: none; transform-origin: 50% 92%; filter: drop-shadow(0 0 .6px rgba(46, 22, 96, .6)) drop-shadow(5px 9px 9px rgba(60, 30, 120, .28)); }
[data-scan-card] .art-poster, [data-scan-card] .stage3d-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
[data-scan-card] .art-poster { z-index: 2; opacity: 0; }
[data-scan-card].has-poster .art-poster { opacity: 1; }
[data-scan-card] .stage3d-canvas { z-index: 3; opacity: 1; transition: none; }
.scan-media { display: flex; flex-direction: column; align-items: center; }
.scan-media .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.scan-media .stage2d { position: relative; overflow: hidden; isolation: isolate; width: 100%; height: min(104vw, 50vh, 520px); min-height: 290px; border-radius: 28px; background: var(--stage-light), radial-gradient(48% 46% at 88% 34%, rgba(245, 179, 207, .4), rgba(245, 179, 207, 0) 72%), var(--stage-base); box-shadow: 0 30px 54px -34px var(--shadow); touch-action: pan-y; }
@supports (width: 1cqw) { .scan-media .stage2d { height: min(104cqw, 50vh, 520px); } }
.scan-media .stage2d::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit; box-shadow: inset 0 -46px 50px -34px rgba(96, 66, 180, .5), inset 0 1px 0 rgba(255, 255, 255, .9); }
.scan-media .stage3d-canvas { position: absolute; inset: 0; z-index: 2; display: block; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.scan-media .is-ready .stage3d-canvas { opacity: 1; }
.scan-media .stage2d-image { position: absolute; inset: 7% 0 22%; z-index: 1; display: flex; justify-content: center; align-items: flex-end; }
.scan-media .stage-shadow { animation: none; left: 34%; right: 28%; bottom: calc(20.1% - 7px); height: 14px; }
.scan-media .stage2d-image img { height: 100%; width: auto; max-width: 86%; object-fit: contain; object-position: 50% 100%; transform-origin: 50% 92%; filter: drop-shadow(0 0 .6px rgba(46, 22, 96, .6)) drop-shadow(8px 16px 16px rgba(60, 30, 120, .32)); }
:is([data-scan-card], .scan-media) .scan-beam { position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 24%; pointer-events: none; opacity: 0; transform: translateY(-100%); background: linear-gradient(180deg, rgba(196, 181, 253, 0) 0%, rgba(196, 181, 253, .14) 52%, rgba(221, 208, 251, .4) 84%, rgba(255, 255, 255, .95) 96.5%, rgba(255, 255, 255, 0) 100%); }
:is([data-scan-card], .scan-media) .scan-frame { position: absolute; z-index: 3; inset: 0; pointer-events: none; border-radius: inherit; opacity: 0; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85), inset 0 0 26px rgba(196, 181, 253, .55); transition: opacity .25s ease; }
:is([data-scan-card].is-scanning, .scan-media .is-scanning) .scan-beam { animation: image-scan 2.4s cubic-bezier(.45, .05, .3, 1) both; }
:is([data-scan-card].is-scanning .art-image, .scan-media .is-scanning .stage2d-image) img { animation: image-settle 2.4s var(--ease) both; }
:is([data-scan-card].is-scan-static, .scan-media .is-scan-static) .scan-frame { opacity: 1; }
@keyframes image-scan { 0% { transform: translateY(-100%); opacity: 0; } 8%, 86% { opacity: 1; } 100% { transform: translateY(330%); opacity: 0; } }
@keyframes image-settle { 0% { transform: scale(.982); } 45% { transform: scale(1.012); } 100% { transform: none; } }
.scan-media .scan-button { position: relative; z-index: 5; overflow: hidden; margin-top: -26px; min-height: 52px; min-width: 148px; max-width: 100%; padding: 0 28px 0 24px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 999px; color: var(--ink); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-strong), inset 0 1px 0 rgba(255, 255, 255, .08), 0 14px 26px -18px var(--glow); font-size: 16px; font-weight: 700; letter-spacing: .02em; transition: transform .18s var(--ease), background-color .2s ease, box-shadow .2s ease; }
.scan-media .scan-button:not(:disabled):active { transform: scale(.97); background: var(--surface-3); transition-duration: .06s; }
.scan-media .scan-button:disabled { opacity: .5; cursor: default; }
.scan-media .scan-icon { width: 22px; height: 22px; color: var(--lavender); }
.scan-media .scan-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.scan-media .scan-label { text-align: center; }
.scan-media .scan-progress { position: absolute; left: 18px; right: 18px; bottom: 7px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--lavender), #ffffff); transform: scaleX(0); transform-origin: 0 50%; opacity: 0; }
.scan-media .scan-button.is-running { cursor: default; box-shadow: inset 0 0 0 1px rgba(196, 181, 253, .7), 0 14px 26px -16px var(--glow); }
.scan-media .scan-button.is-running .scan-progress { opacity: 1; transform: scaleX(1); transition: transform var(--scan-duration, 3.4s) linear; }
.scan-media .scan-button.is-running .scan-icon { animation: scan-icon .9s ease-in-out infinite alternate; }
@keyframes scan-icon { from { opacity: 1; } to { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .scan-media .scan-button.is-running .scan-icon { animation: none; } }

/* Privater Musikschalter aus Claudes Prototyp; keine automatische Wiedergabe. */

#private-context .sound-switch { min-height: 44px; max-width: 100%; display: inline-flex; align-items: center; gap: 9px; padding: 0 5px 0 12px; border: 0; border-radius: 999px; color: var(--ink-2); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); font-size: 13px; font-weight: 750; letter-spacing: .04em; transition: background-color .25s ease, color .25s ease, box-shadow .25s ease, transform .18s var(--ease); }
#private-context .sound-switch:active { transform: scale(.97); }
#private-context .sound-glyph { position: relative; flex: 0 0 18px; width: 18px; height: 18px; color: var(--lavender); }
#private-context .sound-note { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: opacity .2s ease; }
#private-context .sound-bars { position: absolute; inset: 1px 1px; display: flex; align-items: flex-end; justify-content: space-between; opacity: 0; transition: opacity .2s ease; }
#private-context .sound-bars i { width: 3.4px; height: 100%; border-radius: 2px; background: var(--mint); transform-origin: 50% 100%; transform: scaleY(.35); }
#private-context .sound-track { position: relative; flex: 0 0 42px; width: 42px; height: 26px; border-radius: 999px; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-strong), inset 0 2px 4px rgba(9, 3, 22, .35); transition: background-color .25s ease; }
#private-context .sound-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(180deg, #ffffff, #e4dcfb); box-shadow: 0 2px 6px rgba(9, 3, 22, .45); transition: transform .3s var(--ease); }
#private-context .sound-switch[aria-checked="true"] { color: var(--ink); background: var(--surface-2); box-shadow: inset 0 0 0 1px rgba(196, 181, 253, .6), 0 8px 18px -12px var(--glow); }
#private-context .sound-switch[aria-checked="true"] .sound-track { background: linear-gradient(135deg, var(--violet-strong), var(--violet-deep)); }
#private-context .sound-switch[aria-checked="true"] .sound-knob { transform: translateX(16px); }
#private-context .sound-switch.is-playing .sound-note { opacity: 0; }
#private-context .sound-switch.is-playing .sound-bars { opacity: 1; }
#private-context .sound-switch.is-playing .sound-bars i { animation: private-sound-bar 1.6s ease-in-out infinite; }
#private-context .sound-switch.is-playing .sound-bars i:nth-child(2) { animation-delay: -.5s; animation-duration: 1.9s; }
#private-context .sound-switch.is-playing .sound-bars i:nth-child(3) { animation-delay: -1.1s; animation-duration: 1.4s; }
#private-context .sound-switch:disabled { opacity: .55; cursor: default; }
#private-context .private-sound-status { flex: 1 0 100%; min-width: 0; color: var(--ink-3); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
@keyframes private-sound-bar { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
@media (max-width: 359px) { [data-private-3d] .stage-controls .button { font-size: 14px; } }
@media (max-height: 640px) { [data-private-3d] .stage3d { min-height: 220px; height: min(80vw, 46vh, 360px); } }
@media (min-width: 600px) and (min-height: 641px) { [data-private-3d] .stage3d { height: min(70vh, 560px); } }
@media (prefers-reduced-motion: reduce) {
  #private-context .sound-switch.is-playing .sound-bars i { animation: none; transform: scaleY(.7); }
  #private-context .sound-switch:active { transform: none; }
}

/* ---------- Tracking – Designvorschau (nur private Vorschau) ---------- */
.tracking-page { padding-top: 6px; display: flex; flex-direction: column; gap: 18px; }
.tracking-head { display: flex; flex-direction: column; gap: 8px; }
.tracking-head h1 { font-size: clamp(28px, 8vw, 38px); font-weight: 800; line-height: 1.08; letter-spacing: -.03em; }
.tracking-notice { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; background: rgba(245, 179, 207, .12); box-shadow: inset 0 0 0 1px rgba(245, 179, 207, .5); color: #ffe1ee; font-size: 15px; font-weight: 650; line-height: 1.4; }
.tracking-notice svg { width: 20px; height: 20px; color: var(--rose); }
.tracking-card { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); align-items: center; gap: 14px; padding: 10px 14px 10px 10px; border-radius: 24px; background: var(--surface); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px var(--line), 0 22px 36px -24px var(--shadow); }
.tracking-parcel { position: relative; aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: var(--stage-light), var(--stage-base); box-shadow: inset 0 -22px 26px -20px rgba(96, 66, 180, .45), inset 0 1px 0 rgba(255, 255, 255, .9); }
.tracking-parcel svg { position: absolute; inset: 6%; width: 88%; height: 88%; }
.parcel-box { transition: transform .6s var(--ease); }
.parcel-open, .parcel-closed, .parcel-speed, .parcel-check { transition: opacity .45s ease, transform .45s var(--ease); }
.parcel-check, .parcel-speed { transform-box: fill-box; transform-origin: center; }
.tracking-parcel[data-step="0"] .parcel-closed, .tracking-parcel:not([data-step="0"]) .parcel-open { opacity: 0; }
.tracking-parcel .parcel-speed { opacity: 0; transform: translateX(8px); }
.tracking-parcel[data-step="2"] .parcel-speed { opacity: 1; transform: none; }
.tracking-parcel[data-step="2"] .parcel-box { transform: translateX(6px); }
.tracking-parcel .parcel-check { opacity: 0; transform: scale(.5); }
.tracking-parcel[data-step="3"] .parcel-check { opacity: 1; transform: none; }
.tracking-meta { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tracking-label { font-size: 12px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.tracking-id { font-size: 22px; font-weight: 800; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.tracking-status { color: var(--ink-2); font-size: 14px; line-height: 1.45; }
.tracking-progress { position: relative; }
.tracking-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-rows: 1fr; }
/* Linie zwischen der ersten und letzten Markierung; vier gleich hohe Zeilen. */
.tracking-line { position: absolute; left: 21px; width: 3px; top: 12.5%; bottom: 12.5%; border-radius: 3px; background: rgba(196, 181, 253, .28); }
.tracking-line-fill { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, var(--mint), var(--violet)); transform-origin: 50% 0; transform: scaleY(0); transition: transform .7s var(--ease); }
.tracking-progress[data-step="1"] .tracking-line-fill { transform: scaleY(.3334); }
.tracking-progress[data-step="2"] .tracking-line-fill { transform: scaleY(.6667); }
.tracking-progress[data-step="3"] .tracking-line-fill { transform: scaleY(1); }
.tracking-step { display: flex; }
.tracking-step-button { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 8px 10px 8px 0; border: 0; border-radius: 16px; background: none; color: var(--ink); text-align: left; cursor: pointer; transition: background-color .2s ease; }
.tracking-step-button:active { background: rgba(196, 181, 253, .08); }
.step-marker { display: grid; place-items: center; flex: 0 0 45px; width: 45px; height: 45px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line-strong); color: var(--ink-3); transition: background-color .3s ease, box-shadow .3s ease, color .3s ease; }
.step-marker svg { width: 20px; height: 20px; }
.step-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.step-title-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.step-title { font-size: 16px; font-weight: 750; line-height: 1.3; }
.step-state { font-size: 12px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.step-text { color: var(--ink-2); font-size: 13.5px; line-height: 1.4; }
.tracking-step.is-done .step-marker { background: #1f3b3a; box-shadow: inset 0 0 0 1.5px var(--mint); color: var(--mint); }
.tracking-step.is-done .step-state { color: var(--mint); }
.tracking-step.is-current .step-marker { background: linear-gradient(160deg, var(--violet), var(--violet-deep)); box-shadow: inset 0 0 0 1.5px rgba(221, 208, 251, .6), 0 0 0 6px rgba(139, 92, 246, .22); color: #fff; animation: marker-in .45s var(--ease) both; }
.tracking-step.is-current .step-state { color: var(--lavender); }
.tracking-step.is-current .tracking-step-button { background: rgba(139, 92, 246, .14); }
.tracking-step.is-upcoming .step-title { color: var(--ink-2); }
.tracking-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tracking-controls [data-track-play] { grid-column: 1 / -1; }
.tracking-controls .button { min-height: 50px; padding: 10px 14px; font-size: 15px; }
.tracking-footnote { color: var(--ink-3); font-size: 13px; line-height: 1.6; }

/* ---------- Häufige Fragen ---------- */
.page-intro { padding-top: 24px; display: flex; flex-direction: column; gap: 8px; }
.page-intro h1 { font-size: clamp(30px, 9vw, 40px); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; }
.page-intro > p:not(.eyebrow) { color: var(--ink-2); font-size: 15px; line-height: 1.7; max-width: 62ch; }
.faq-list { display: grid; gap: 10px; margin-top: 22px; }
.faq-item { border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.faq-item summary { min-height: 60px; cursor: pointer; padding: 14px 16px; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 15px; font-weight: 700; line-height: 1.4; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ""; flex-shrink: 0; width: 9px; height: 9px; margin: -4px 4px 0 0; border-right: 2px solid var(--lavender); border-bottom: 2px solid var(--lavender); transform: rotate(45deg); transition: transform .2s var(--ease); }
.faq-item[open] summary::after { transform: rotate(225deg); margin-top: 4px; }
.faq-item p { color: var(--ink-2); font-size: 15px; line-height: 1.75; padding: 0 16px 18px; max-width: 62ch; }
.why-section { margin-top: 36px; }
.why-section > .eyebrow { margin-bottom: 6px; }
.why-section h2 { font-size: 24px; font-weight: 750; line-height: 1.2; }
.why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; margin-top: 20px; }
.why-item { display: flex; flex-direction: column; gap: 8px; }
.why-item > .line-icon { width: 44px; height: 44px; padding: 11px; border-radius: 50%; color: var(--lavender); background: var(--surface-2); }
.why-item h3 { font-size: 15px; font-weight: 700; line-height: 1.4; }
.why-item p { font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.quote-card { margin: 32px 0 0; padding: 24px 18px; border-radius: 22px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 18px; line-height: 1.55; color: var(--ink); text-align: center; }
.quote-card svg { width: 22px; height: 24px; color: var(--lavender); margin: 0 auto 10px; }
.home-return { margin-top: 28px; }

/* ---------- Auswahl-Vorschau und Bestätigung ---------- */
.selection-dialog { position: fixed; top: var(--safe-top); right: var(--safe-right); bottom: calc(var(--safe-bottom) + var(--viewport-bottom-offset)); left: var(--safe-left); margin: auto; width: min(380px, calc(100% - 32px - var(--safe-left) - var(--safe-right))); max-height: max(0px, calc(var(--app-viewport-height) - 32px - var(--safe-top) - var(--safe-bottom))); color: var(--ink); padding: 26px 22px 22px; background: var(--surface); border: 0; border-radius: 26px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px var(--line-strong), 0 34px 80px -24px rgba(5, 2, 14, .9); overflow-y: auto;
  opacity: 0; transform: translateY(16px) scale(.98);
  transition: opacity .24s ease, transform .3s var(--ease), overlay .3s allow-discrete, display .3s allow-discrete; }
.selection-dialog[open] { opacity: 1; transform: none; }
@starting-style { .selection-dialog[open] { opacity: 0; transform: translateY(16px) scale(.98); } }
.selection-dialog::backdrop { background-color: rgba(14, 7, 26, 0); transition: background-color .24s ease, overlay .3s allow-discrete, display .3s allow-discrete; }
.selection-dialog[open]::backdrop { background-color: rgba(14, 7, 26, .74); }
@starting-style { .selection-dialog[open]::backdrop { background-color: rgba(14, 7, 26, 0); } }
.dialog-close { position: absolute; top: 10px; right: 10px; background: var(--surface-2); color: var(--ink-2); }
.dialog-icon { width: 48px; height: 48px; border-radius: 50%; color: var(--lavender); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-strong); display: grid; place-items: center; margin-bottom: 16px; }
.selection-dialog .eyebrow { margin-bottom: 4px; }
.selection-dialog h2 { font-size: 26px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }
.dialog-product { font-size: 18px; font-weight: 700; margin-top: 20px; }
.dialog-variant { font-size: 15px; color: var(--ink-2); margin-top: 6px; }
.dialog-price { font-size: 28px; font-weight: 800; color: var(--ink); margin-top: 14px; font-variant-numeric: tabular-nums; }
.dialog-price .price-label { display: inline; font-size: 13px; font-weight: 500; color: var(--ink-3); margin-left: 6px; }
.dialog-notice { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 18px; color: var(--ink-2); font-size: 14px; line-height: 1.7; }
.dialog-done { margin-top: 22px; }
.dialog-actions { display: flex; gap: 10px; margin-top: 22px; }
.dialog-actions .button { flex: 1; min-height: 48px; padding: 10px 12px; font-size: 15px; }
.contact-design-buttons { display: grid; gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.contact-design-button { width: 100%; min-height: 52px; padding: 12px 16px; border: 0; border-radius: 16px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink); font-size: 16px; font-weight: 650; line-height: 1.4; cursor: pointer; transition: transform .18s var(--ease), background-color .18s ease; }
.contact-design-button:active { transform: scale(.97); background: var(--surface-3); }
.contact-design-notice { color: var(--ink-2); font-size: 14px; line-height: 1.6; margin-top: 12px; min-height: 3.2em; }
body:has(dialog[open]) { overflow: hidden; }

/* ---------- Privater Editor: nur für freigegebene Konten sichtbar ---------- */
.admin-page { padding-top: 18px; padding-bottom: max(24px, var(--safe-bottom)); min-width: 0; }
.admin-page h1 { font-size: 32px; font-weight: 800; line-height: 1.1; letter-spacing: -.03em; margin: 6px 0 10px; }
.admin-page h2 { font-size: 21px; font-weight: 750; margin: 20px 0 10px; }
.admin-page .back-link { margin: 0 0 14px -4px; }
.admin-intro, .admin-count { color: var(--ink-2); font-size: 15px; line-height: 1.6; }
.admin-status { margin: 12px 0 16px; padding: 11px 14px; border-radius: 14px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink); font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.admin-status[role="alert"] { background: rgba(245, 179, 207, .12); box-shadow: inset 0 0 0 1px rgba(245, 179, 207, .55); color: #ffe1ee; }
.admin-top-actions, .admin-maintenance { display: grid; gap: 10px; margin: 16px 0; }
.admin-list { list-style: none; padding: 0; margin: 12px 0 24px; display: grid; gap: 12px; }
.admin-card { min-width: 0; padding: 12px; border-radius: 22px; background: var(--surface); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px var(--line), 0 18px 30px -24px var(--shadow); }
.admin-entry { display: flex; align-items: center; gap: 14px; padding: 0 2px 12px; min-width: 0; }
.admin-entry img { flex: 0 0 64px; width: 64px; height: 84px; padding: 6px 8px 4px; object-fit: contain; object-position: 50% 100%; border-radius: 14px; background: var(--stage-light), var(--stage-base); }
.admin-entry > span { min-width: 0; }
.admin-entry strong { display: block; font-size: 17px; font-weight: 750; line-height: 1.3; overflow-wrap: anywhere; }
.admin-entry small { display: block; margin-top: 4px; color: var(--ink-3); font-size: 13px; line-height: 1.5; }
.admin-edit-label { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; color: var(--lavender); font-size: 14px; font-weight: 650; }
.admin-edit-label svg { width: 16px; height: 16px; }
.admin-row-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-row-actions .button { flex: 1 1 80px; width: auto; min-height: 44px; padding: 8px 10px; font-size: 14px; border-radius: 12px; }
.admin-page .button { white-space: normal; }
.admin-actions { display: grid; gap: 10px; margin-top: 24px; }
.admin-hint { color: var(--ink-2); font-size: 14px; line-height: 1.65; margin: 10px 0 18px; }
.admin-field { display: flex; flex-direction: column; gap: 7px; margin: 18px 0; font-size: 14px; font-weight: 650; min-width: 0; }
.admin-field input, .admin-field textarea, .admin-field select { width: 100%; min-width: 0; min-height: 48px; padding: 11px 13px; border: 0; border-radius: 12px; background: var(--field); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink); font-size: 16px; font-weight: 400; scroll-margin-top: 85px; }
.admin-field textarea { resize: vertical; line-height: 1.6; min-height: 110px; }
.admin-field input:focus, .admin-field textarea:focus, .admin-field select:focus { outline: 3px solid var(--lavender); outline-offset: 1px; }
.admin-field small { color: var(--ink-3); font-size: 13px; font-weight: 400; line-height: 1.55; }
.admin-check { display: flex; align-items: center; gap: 12px; min-height: 48px; font-size: 15px; line-height: 1.5; }
.admin-check input { width: 22px; height: 22px; flex: 0 0 22px; accent-color: var(--violet); }
.admin-picture, .admin-variants { min-width: 0; margin: 24px 0; padding: 14px 14px 2px; border: 0; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.admin-picture legend, .admin-variants legend { padding: 0 6px; font-size: 12px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.admin-image-preview { width: 100%; height: 180px; padding: 12px; object-fit: contain; border-radius: 16px; background: var(--stage-light), var(--stage-base); }
.admin-upload { display: flex; flex-direction: column; gap: 10px; font-size: 14px; font-weight: 650; }
.admin-upload input { max-width: 100%; width: 100%; color: var(--ink-2); font-size: 14px; font-weight: 400; }
.admin-upload input::file-selector-button { min-height: 44px; margin-right: 8px; padding: 8px 14px; border: 0; border-radius: 12px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink); font-weight: 650; }
.admin-variant { border-top: 1px solid var(--line); padding-bottom: 16px; margin-top: 14px; }
.admin-variants > .button { margin: 12px 0 16px; }
#admin-backups .button { margin: 10px 0; }

/* ---------- Bewegung ----------
   Schweben nur im Hero und im Detail, nie in allen Karten. Erscheinen der ersten sichtbaren Karten,
   Druckreaktion, Übergang Liste ↔ Detail, Einschwenken, Neigung, Varianten-, Dialog- und Tracking-Wechsel.
   Nur Opazität und Transformation. */
.catalog-page.is-staggered { animation: none; }
.product-card.is-entering { animation: card-in .55s var(--ease) both; animation-delay: var(--enter-delay, 0ms); }
.product-card.is-entering .product-art img { animation: art-settle .7s var(--ease) both; animation-delay: calc(var(--enter-delay, 0ms) + 80ms); }
html[data-nav] .view { animation: none; }
::view-transition-group(product-hero) { animation-duration: .46s; animation-timing-function: cubic-bezier(.22, .8, .22, 1); }
::view-transition-old(product-hero), ::view-transition-new(product-hero) { height: 100%; object-fit: cover; animation-duration: .32s; }
::view-transition-group(site-header), ::view-transition-old(site-header), ::view-transition-new(site-header) { animation: none; }
::view-transition-old(root) { animation: .2s ease both fade-out; }
::view-transition-new(root) { animation: .4s var(--ease) .05s both view-in; }
html[data-nav="back"]::view-transition-new(root) { animation: .3s ease both fade-in; }
/* Nicht sichtbare Bühnen und ausgeblendete Seiten bewegen sich nicht weiter. */
.is-offscreen, .is-offscreen *, .is-offscreen::before, .is-offscreen::after, .is-offscreen *::before, .is-offscreen *::after,
html.is-page-hidden *, html.is-page-hidden *::before, html.is-page-hidden *::after { animation-play-state: paused !important; }
@keyframes view-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes card-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes art-settle { from { opacity: 0; transform: translateY(10%); } to { opacity: 1; transform: none; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes shadow-breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.84); opacity: .65; } }
@keyframes vial-turn { from { opacity: 0; transform: rotateY(-26deg) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes light-sweep { 0% { opacity: 0; transform: translateX(-55%); } 15%, 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(55%); } }
@keyframes marker-in { from { transform: scale(.82); } to { transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Breiten und kurze Höhen ---------- */
/* Schmale Telefone (z. B. 360 und 375 px): kompakter Kopf, damit „DEIN KATALOG“ einzeilig bleibt. */
@media (max-width: 389px) {
  .brand { font-size: 12px; gap: 7px; letter-spacing: .14em; }
  .brand-mark { width: 22px; height: 24px; }
  .demo-badge { padding: 0 8px; letter-spacing: .04em; }
  .header-actions { gap: 2px; }
}
@media (max-width: 359px) {
  :root { --gutter-left: max(14px, var(--safe-left)); --gutter-right: max(14px, var(--safe-right)); }
  .header-inner { gap: 8px; }
  .brand { gap: 6px; letter-spacing: .1em; }
  .brand-mark { width: 20px; height: 22px; }
  .product-card { gap: 10px; padding-right: 10px; }
  .tracking-card { grid-template-columns: minmax(0, 36%) minmax(0, 1fr); gap: 10px; }
}
/* Kurze Bildschirme: kompakterer Hero und Kontextstreifen, damit die erste Karte sichtbar beginnt. */
@media (max-height: 640px) {
  .private-context { padding-top: 4px; padding-bottom: 4px; gap: 0 14px; font-size: 12.5px; }
  .catalog-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 34%); padding: 2px 0 8px; }
  .catalog-hero h1 { font-size: 30px; }
  .hero-copy { gap: 5px; }
  .catalog-meta { font-size: 13px; }
  .demo-entry { margin-top: 2px; font-size: 13px; }
  .hero-stage { aspect-ratio: 1 / 1; }
  .detail-visual { min-height: 220px; }
  .selection-summary { padding: 12px 14px; }
}
@media (min-width: 600px) {
  .catalog-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 40%); }
  .catalog-hero h1, .page-intro h1 { font-size: 52px; }
  .product-card { grid-template-columns: minmax(0, 34fr) minmax(0, 66fr); gap: 22px; }
  .product-name { font-size: 23px; }
  .detail-head h1 { font-size: 48px; }
  .detail-visual { max-width: 560px; margin-inline: auto; }
  .admin-actions { grid-template-columns: 1fr 1fr; }
}

/* Reduzierte Bewegung: alles sofort und ruhend, Statuswechsel unmittelbar, vollständig bedienbar. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .button:not(:disabled):active, .product-card:active, .back-link:active, .contact-design-button:active, .demo-entry:active, .variant-option input:active + label { transform: none; opacity: .8; }
  .product-card:active .product-art img { transform: none; }
  .stage-sheen { transform: none; }
}