/* QAMER R2 – animierte Komponenten + neue Abschnitte. Lädt NACH ../components.css. */

/* ---------- Grundbewegung ---------- */
html.js [data-reveal]{opacity:0;transform:translateY(var(--reveal-y));transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out);transition-delay:calc(var(--i,0) * var(--reveal-stagger))}
html.js [data-reveal].is-in{opacity:1;transform:none}
html.js [data-reveal="fade"]{transform:none}
html.js [data-reveal="scale"]{transform:scale(.94)}
html.js [data-reveal="scale"].is-in{transform:none}
.btn{transition:background var(--dur-fast) var(--ease-out),transform var(--dur-instant) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.btn:hover{transform:translateY(var(--lift-y));box-shadow:var(--shadow-2)}
.btn:active{transform:scale(var(--press-scale));box-shadow:none}
.card-product,.world-tile,.choice,.slot{transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-fast),background var(--dur-fast)}
.card-product:hover{transform:translateY(var(--lift-y));box-shadow:var(--shadow-2)}
.card-product .photo{transition:transform var(--dur-slow) var(--ease-out)}
.card-product:hover .photo{transform:scale(1.05) rotate(-1.5deg)}
.world-tile{position:relative;overflow:hidden;isolation:isolate}
.world-tile::after{content:"";position:absolute;inset:-40% -20%;background:radial-gradient(closest-side,rgba(255,255,255,.28),transparent 70%);transform:translateX(-60%);transition:transform var(--dur-slow) var(--ease-out);z-index:-1}
.world-tile:hover{transform:translateY(var(--lift-y));box-shadow:var(--shadow-2)}
.world-tile:hover::after{transform:translateX(30%)}
.nav a,.tabbar a{transition:background var(--dur-fast),color var(--dur-fast)}
.count.bump{animation:bump var(--dur-slow) var(--ease-pop)}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.5)}100%{transform:scale(1)}}
.site-header{transition:box-shadow var(--dur-base)}
.site-header.scrolled{box-shadow:var(--shadow-1)}

/* ---------- Ankündigungsleiste ---------- */
.announce{background:var(--c-announce-bg);color:var(--c-announce-fg);font-size:var(--fs-sm)}
.announce .wrap{display:flex;align-items:center;justify-content:center;gap:var(--sp-3);min-height:var(--target-min);position:relative}
.announce-track{display:grid;flex:1;text-align:center;overflow:hidden}
.announce-track>p{grid-area:1/1;margin:0;display:flex;justify-content:center;align-items:center;gap:var(--sp-2);flex-wrap:wrap;opacity:0;transform:translateY(8px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out);pointer-events:none}
.announce-track>p.on{opacity:1;transform:none;pointer-events:auto}
html:not(.js) .announce-track>p:not(:first-child){display:none}
.announce a{color:inherit;font-weight:var(--fw-semibold)}
.announce-pause{flex:none;min-width:var(--target-min);min-height:var(--target-min);border:0;background:none;color:inherit;cursor:pointer;border-radius:var(--r-pill);display:grid;place-items:center}
.announce-pause svg{width:16px;height:16px;fill:currentColor}
.announce-pause:focus-visible{outline-color:#fff;box-shadow:none}
.opt{display:inline-block;font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:.04em;padding:1px 8px;border-radius:var(--r-pill);border:1px dashed currentColor;vertical-align:middle}
.opt-box{border:1.5px dashed var(--c-line-strong);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);background:var(--c-surface)}

/* Kopf-Icons */
.icon-btn{display:inline-grid;place-items:center;width:var(--target-min);height:var(--target-min);border-radius:var(--r-pill);color:var(--c-ink);background:none;border:0;cursor:pointer;text-decoration:none}
.icon-btn:hover{background:var(--c-surface-alt)}
.icon-btn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6}
.search-form{display:none}
@media(min-width:1100px){.search-form{display:block;position:relative}.search-form .input{width:200px;min-height:40px;border-radius:var(--r-pill);padding-left:var(--sp-4);transition:width var(--dur-slow) var(--ease-out)}.search-form .input:focus{width:280px}}

/* ---------- Hero mit Duftwolke ---------- */
.clip-x{overflow-x:clip}
.hero-r2{position:relative;display:grid;gap:var(--sp-5);padding:var(--sp-6) 0 var(--sp-7);isolation:isolate}
@media(min-width:768px){.hero-r2{grid-template-columns:1.1fr 1fr;align-items:center;padding:var(--sp-8) 0}}
.cloud{position:absolute;inset:-10% -20% auto -20%;height:120%;z-index:-1;overflow:hidden;pointer-events:none;filter:blur(56px);opacity:.28}
.cloud i{position:absolute;border-radius:50%;width:46vmin;height:46vmin;background:var(--c);animation:drift var(--dur-ambient) var(--ease-in-out) infinite alternate;animation-delay:var(--d,0s)}
.cloud i:nth-child(1){--c:var(--c-cloud-1);left:5%;top:10%}
.cloud i:nth-child(2){--c:var(--c-cloud-2);right:8%;top:0;--d:-3s;width:38vmin;height:38vmin}
.cloud i:nth-child(3){--c:var(--c-cloud-3);left:38%;top:42%;--d:-6s;width:34vmin;height:34vmin}
@keyframes drift{from{transform:translate(-6%,-4%) scale(1)}to{transform:translate(8%,6%) scale(1.18)}}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .cloud{opacity:.35}}
:root[data-theme="dark"] .cloud{opacity:.35}
.hero-title .w{display:inline-block;overflow:hidden;vertical-align:top}
.hero-title .w>span{display:inline-block;transform:translateY(105%);animation:rise var(--dur-reveal) var(--ease-out) forwards;animation-delay:calc(var(--i) * 90ms + 100ms)}
@keyframes rise{to{transform:none}}
html:not(.js) .hero-title .w>span{transform:none;animation:none}
.hero-media{position:relative;display:grid;place-items:center}
.flakon{width:min(78%,360px);filter:drop-shadow(0 24px 24px rgba(27,31,29,.22));animation:float 6s var(--ease-in-out) infinite alternate;background:none!important}
@keyframes float{from{transform:translateY(-8px) rotate(-1.5deg)}to{transform:translateY(10px) rotate(1.5deg)}}
.wisp{position:absolute;bottom:55%;width:10px;height:10px;border-radius:50%;background:var(--c-primary);opacity:0;animation:wisp 4.8s var(--ease-out) infinite;animation-delay:var(--d)}
@keyframes wisp{0%{opacity:0;transform:translate(0,0) scale(.4)}20%{opacity:.45}100%{opacity:0;transform:translate(var(--x),-140px) scale(2.2)}}
.video-ph{position:absolute;right:0;bottom:-8px;display:flex;align-items:center;gap:var(--sp-2);background:var(--c-surface);color:var(--c-ink);border:1px solid var(--c-line-strong);border-radius:var(--r-pill);padding:6px var(--sp-4) 6px 6px;font-size:var(--fs-sm);font-weight:var(--fw-medium);min-height:var(--target-min);cursor:pointer;box-shadow:var(--shadow-2);text-decoration:none}
.video-ph .play{width:36px;height:36px;border-radius:50%;background:var(--c-primary);display:grid;place-items:center;position:relative}
.video-ph .play::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--c-primary);animation:ping 2.2s var(--ease-out) infinite}
@keyframes ping{from{transform:scale(1);opacity:.7}to{transform:scale(1.7);opacity:0}}
.video-ph svg{width:14px;height:14px;fill:var(--c-on-primary);margin-left:2px}
.trustbar{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);list-style:none;padding:var(--sp-4) 0;margin:0;color:var(--c-muted);font-size:var(--fs-sm);border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line);justify-content:center}
.trustbar li{display:flex;align-items:center;gap:var(--sp-2)}
.trustbar svg{width:18px;height:18px;stroke:var(--c-primary);fill:none;stroke-width:1.8;flex:none}

/* ---------- Sterne ---------- */
.stars{display:inline-flex;gap:2px;color:var(--c-star);vertical-align:middle}
.stars svg{width:18px;height:18px;fill:currentColor}
.stars .off{color:var(--c-line-strong)}
html.js .stars [data-reveal-star]{transform:scale(0);transition:transform var(--dur-slow) var(--ease-pop);transition-delay:calc(var(--s) * 70ms + 200ms)}
html.js .is-in .stars [data-reveal-star],html.js .stars.is-in [data-reveal-star]{transform:none}
.rating-line{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1) var(--sp-2);font-size:var(--fs-sm);min-width:0}
.rating-line .ph{white-space:nowrap}

/* ---------- Kundenstimmen-Karussell ---------- */
.reviews-head{display:flex;align-items:end;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-4)}
.car-ctrl{display:flex;gap:var(--sp-2)}
.car-ctrl button{width:var(--target-min);height:var(--target-min);border-radius:50%;border:1.5px solid var(--c-line-strong);background:var(--c-surface);color:var(--c-ink);cursor:pointer;display:grid;place-items:center;transition:background var(--dur-fast),transform var(--dur-instant)}
.car-ctrl button:hover{background:var(--c-surface-alt)}.car-ctrl button:active{transform:scale(var(--press-scale))}
.car-ctrl svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.carousel{display:grid;grid-auto-flow:column;grid-auto-columns:88%;gap:var(--sp-3);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:var(--sp-2) var(--gutter) var(--sp-4);margin:0 calc(var(--gutter) * -1);scrollbar-width:none;list-style:none}
.carousel::-webkit-scrollbar{display:none}
@media(min-width:600px){.carousel{grid-auto-columns:48%}}
@media(min-width:1000px){.carousel{grid-auto-columns:32%}}
.review{scroll-snap-align:start;display:flex;flex-direction:column;gap:var(--sp-3);background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-lg);padding:var(--sp-5);transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base)}
.review:hover{transform:translateY(var(--lift-y));box-shadow:var(--shadow-2)}
.review header{display:flex;align-items:center;gap:var(--sp-3)}
.avatar{width:56px;height:56px;border-radius:50%;flex:none;display:grid;place-items:center;font-family:var(--font-display);font-size:1.5rem;color:#fff;background:var(--bg,var(--c-primary));position:relative;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.verified{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);color:var(--c-ok);font-weight:var(--fw-semibold)}
.verified svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5}
.review blockquote{margin:0;font-size:var(--fs-base);flex:1}
.review .bought{font-size:var(--fs-xs);color:var(--c-muted)}
.ph-text{font-style:italic;color:var(--c-muted);border-left:3px dashed var(--c-line-strong);padding-left:var(--sp-3)}
.dots{display:flex;justify-content:center;gap:var(--sp-1);list-style:none;padding:0;margin:0}
.dots button{width:var(--target-min);height:24px;border:0;background:none;cursor:pointer;display:grid;place-items:center;padding:0}
.dots button::before{content:"";width:8px;height:8px;border-radius:99px;background:var(--c-line-strong);transition:width var(--dur-base) var(--ease-out),background var(--dur-fast)}
.dots button[aria-current="true"]::before{width:24px;background:var(--c-primary)}

/* ---------- Läden ---------- */
.stores{display:grid;gap:var(--sp-4)}
@media(min-width:768px){.stores{grid-template-columns:repeat(2,1fr)}}
.store{display:grid;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-lg);overflow:hidden;transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base)}
.store:hover{transform:translateY(var(--lift-y));box-shadow:var(--shadow-2)}
.store-img{aspect-ratio:4/3;position:relative;overflow:hidden;background:var(--c-surface-alt)}
.store-img img{display:block;width:100%;height:100%;object-fit:cover}
.store-body{padding:var(--sp-5);display:grid;gap:var(--sp-2)}
.store-body h3{margin:0}
.pin{display:inline-flex;align-items:center;gap:var(--sp-2)}
.pin svg{width:20px;height:20px;stroke:var(--c-accent);fill:none;stroke-width:1.8}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:var(--sp-2);max-width:760px;margin:0 auto}
.faq details{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-md);transition:border-color var(--dur-fast),box-shadow var(--dur-base)}
.faq details[open]{border-color:var(--c-primary);box-shadow:var(--shadow-1)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);min-height:var(--target-min);padding:var(--sp-3) var(--sp-4);cursor:pointer;font-weight:var(--fw-medium);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform var(--dur-base) var(--ease-out)}
.faq details[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.faq .ans{padding:0 var(--sp-4) var(--sp-4);color:var(--c-muted)}
@supports (interpolate-size:allow-keywords){
  .faq{interpolate-size:allow-keywords}
  .faq details::details-content{block-size:0;overflow:hidden;opacity:0;transition:block-size var(--dur-base) var(--ease-out),opacity var(--dur-base),content-visibility var(--dur-base) allow-discrete}
  .faq details[open]::details-content{block-size:auto;opacity:1}
}

/* ---------- Newsletter ---------- */
.newsletter{background:var(--c-surface-alt);border-radius:var(--r-lg);padding:var(--sp-6) var(--sp-5);display:grid;gap:var(--sp-5);position:relative;overflow:hidden}
@media(min-width:768px){.newsletter{grid-template-columns:1fr 1fr;align-items:center;padding:var(--sp-7)}}
.nl-row{display:flex;gap:var(--sp-2);flex-wrap:wrap}.nl-row .input{flex:1 1 220px;border-radius:var(--r-pill);padding-inline:var(--sp-4)}
.consent{display:flex;gap:var(--sp-3);align-items:flex-start;font-size:var(--fs-sm);color:var(--c-muted);margin-top:var(--sp-3)}
.consent input{width:22px;height:22px;accent-color:var(--c-primary);flex:none;margin-top:2px}
.nl-ok{display:none;align-items:center;gap:var(--sp-3)}
.newsletter.done .nl-form{display:none}.newsletter.done .nl-ok{display:flex}
.check{width:44px;height:44px;border-radius:50%;background:var(--c-ok-bg);display:grid;place-items:center;color:var(--c-ok);flex:none}
.check svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:3;stroke-dasharray:30;stroke-dashoffset:30}
.newsletter.done .check svg,.is-ok .check svg{animation:draw var(--dur-slow) var(--ease-out) forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---------- Fußzeile ---------- */
.footer-r2{background:var(--c-surface);border-top:1px solid var(--c-line);margin-top:var(--sp-8);padding:var(--sp-7) 0 var(--sp-5);color:var(--c-muted);font-size:var(--fs-sm)}
.foot-cols{display:grid;gap:var(--sp-6)}
@media(min-width:768px){.foot-cols{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.foot-cols h2{font-family:var(--font-body);font-size:var(--fs-xs);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--c-ink);margin-bottom:var(--sp-2)}
.foot-cols ul{list-style:none;margin:0;padding:0}
.foot-cols a{display:inline-flex;align-items:center;min-height:var(--target-min);color:var(--c-muted);text-decoration:none;position:relative}
.foot-cols a:hover{color:var(--c-ink);text-decoration:underline}
.social{display:flex;gap:var(--sp-2)}
.social a{width:var(--target-min);height:var(--target-min);justify-content:center;border:1px solid var(--c-line-strong);border-radius:50%;color:var(--c-ink);transition:background var(--dur-fast),transform var(--dur-base) var(--ease-pop)}
.social a:hover{background:var(--c-surface-alt);transform:translateY(var(--lift-y)) scale(1.06);text-decoration:none}
.social svg{width:20px;height:20px;fill:currentColor}
.pay{display:flex;flex-wrap:wrap;gap:var(--sp-2);list-style:none;padding:0;margin:var(--sp-5) 0 var(--sp-3)}
.pay li{display:grid;place-items:center;height:30px;min-width:50px;padding:0 var(--sp-2);border:1px solid var(--c-line-strong);border-radius:var(--r-sm);background:var(--c-bg);color:var(--c-ink);font-size:11px;font-weight:var(--fw-semibold);letter-spacing:.02em;white-space:nowrap}
.legal-line{border-top:1px solid var(--c-line);padding-top:var(--sp-4);margin-top:var(--sp-4);display:flex;flex-wrap:wrap;gap:0 var(--sp-4);justify-content:space-between;align-items:center}

/* WhatsApp-Knopf entfällt (Beta 3, Inhaber 11.10.2026): WhatsApp nur noch als Weiterleitung aus dem Duftberater, siehe qamer-beta3.css .berater-wa */

/* ---------- Toast + Warenkorb-Feedback ---------- */
.toast{position:fixed;left:50%;bottom:calc(72px + var(--sp-4));transform:translate(-50%,24px);opacity:0;z-index:40;background:var(--c-ink);color:var(--c-bg);padding:var(--sp-3) var(--sp-5);border-radius:var(--r-pill);display:flex;align-items:center;gap:var(--sp-3);box-shadow:var(--shadow-2);transition:transform var(--dur-slow) var(--ease-pop),opacity var(--dur-base);pointer-events:none;max-width:calc(100vw - 32px)}
.toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast a{color:inherit;font-weight:var(--fw-semibold);min-height:var(--target-min);display:inline-flex;align-items:center}
@media(min-width:768px){.toast{bottom:var(--sp-6)}}
.btn-cart{position:relative;overflow:hidden}
.btn-cart .lbl{display:inline-flex;align-items:center;gap:var(--sp-2);transition:transform var(--dur-base) var(--ease-out),opacity var(--dur-base)}
.btn-cart .done{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:var(--sp-2);transform:translateY(100%);transition:transform var(--dur-base) var(--ease-out)}
.btn-cart .done svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:3;stroke-dasharray:30;stroke-dashoffset:30}
.btn-cart.is-done .lbl{transform:translateY(-120%);opacity:0}
.btn-cart.is-done .done{transform:none}
.btn-cart.is-done .done svg{animation:draw var(--dur-slow) var(--ease-out) .1s forwards}
.fly{position:fixed;z-index:60;width:14px;height:14px;border-radius:50%;background:var(--c-accent);pointer-events:none;transition:transform 700ms var(--ease-in-out),opacity 700ms}
@media(prefers-reduced-motion:reduce){.fly{display:none}}

/* ---------- Lade-Zustände: Skeleton ---------- */
.skel{position:relative;overflow:hidden;background:var(--c-surface-alt);border-radius:var(--r-md)}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);animation:shimmer 1.4s var(--ease-in-out) infinite}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .skel::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent)}}
:root[data-theme="dark"] .skel::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent)}
@keyframes shimmer{to{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){.skel::after{animation:none}}
.skel-line{height:14px;margin:var(--sp-2) 0}.skel-img{aspect-ratio:1/1}

/* ---------- Duftfinder: Frage-Wechsel + Duftwolke ---------- */
.q-stage{position:relative;min-height:420px}
.q-panel{display:none}
.q-panel.on{display:block;animation:qin var(--dur-slow) var(--ease-out) both}
.q-panel.back.on{animation-name:qin-back}
.q-panel.out{display:block;position:absolute;inset:0;animation:qout var(--dur-base) var(--ease-in) both;pointer-events:none}
.q-panel.out.back{animation-name:qout-back}
@keyframes qin{from{opacity:0;transform:translateX(32px)}to{opacity:1;transform:none}}
@keyframes qin-back{from{opacity:0;transform:translateX(-32px)}to{opacity:1;transform:none}}
@keyframes qout{to{opacity:0;transform:translateX(-32px)}}
@keyframes qout-back{to{opacity:0;transform:translateX(32px)}}
.q-panel .choice{animation:choice-in var(--dur-slow) var(--ease-out) both;animation-delay:calc(var(--i,0) * 50ms + 80ms)}
@keyframes choice-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.choice:active{transform:scale(var(--press-scale))}
.choice:has(input:checked){animation:pop var(--dur-slow) var(--ease-pop)}
@keyframes pop{0%{transform:scale(.97)}60%{transform:scale(1.015)}100%{transform:scale(1)}}
.progress i{transition:width var(--dur-slow) var(--ease-out)}
.progress-meta{display:flex;justify-content:space-between;font-size:var(--fs-sm);color:var(--c-muted);margin-bottom:var(--sp-2)}
.cloudbox{display:none;text-align:center;padding:var(--sp-7) 0}
.cloudbox.on{display:block}
.cloud-orb{position:relative;width:min(70vw,260px);aspect-ratio:1;margin:0 auto var(--sp-5);filter:blur(0)}
.cloud-orb i{position:absolute;inset:18%;border-radius:50%;background:var(--c);mix-blend-mode:multiply;filter:blur(14px);opacity:.85;animation:orbit calc(var(--dur-cloud) * 1.2) var(--ease-in-out) infinite alternate}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .cloud-orb i{mix-blend-mode:screen}}
:root[data-theme="dark"] .cloud-orb i{mix-blend-mode:screen}
.cloud-orb i:nth-child(1){--c:var(--c-cloud-1);--x:-34%;--y:-18%}
.cloud-orb i:nth-child(2){--c:var(--c-cloud-2);--x:30%;--y:-24%;animation-delay:-.4s}
.cloud-orb i:nth-child(3){--c:var(--c-cloud-3);--x:-8%;--y:32%;animation-delay:-.8s}
.cloud-orb i:nth-child(4){--c:var(--c-cloud-4);--x:24%;--y:24%;animation-delay:-1.1s}
.cloud-orb.settle i{animation:settle var(--dur-slow) var(--ease-out) forwards}
@keyframes orbit{0%{transform:translate(var(--x),var(--y)) scale(.7)}100%{transform:translate(calc(var(--x) * -.4),calc(var(--y) * -.4)) scale(1.15)}}
@keyframes settle{to{transform:translate(0,0) scale(.6);opacity:.4}}
.results .card{opacity:0;transform:translateY(24px) scale(.98);animation:card-in var(--dur-reveal) var(--ease-out) forwards;animation-delay:calc(var(--i) * 140ms)}
@keyframes card-in{to{opacity:1;transform:none}}
.matchbar{height:6px;background:var(--c-surface-alt);border-radius:99px;overflow:hidden;margin:var(--sp-1) 0}
.matchbar i{display:block;height:100%;width:0;background:var(--c-primary);border-radius:inherit;transition:width 1100ms var(--ease-out) .4s}
.results .on .matchbar i,.results .card.fill .matchbar i{width:var(--p)}

/* ---------- Duftprofil ---------- */
.pyramid{display:grid;gap:var(--sp-2)}
.pyramid>div{background:var(--c-surface-alt);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);border-left:4px solid var(--n,var(--c-primary));font-size:var(--fs-sm)}
.pyramid b{display:block;font-size:var(--fs-xs);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--c-muted)}
.meter{display:grid;grid-template-columns:110px 1fr auto;gap:var(--sp-3);align-items:center;font-size:var(--fs-sm);margin:var(--sp-2) 0}
.meter .bar{height:8px;background:var(--c-surface-alt);border-radius:99px;overflow:hidden}
.meter .bar i{display:block;height:100%;width:0;background:var(--c-primary);border-radius:inherit;transition:width 1000ms var(--ease-out) calc(var(--i,0) * 120ms)}
.is-in .meter .bar i,.meter.is-in .bar i{width:var(--p)}
.price-tween{display:inline-block;transition:transform var(--dur-base) var(--ease-pop)}
.price-tween.tick{animation:bump var(--dur-slow) var(--ease-pop)}
.mini-bar{position:fixed;left:0;right:0;top:0;transform:translateY(-110%);transition:transform var(--dur-slow) var(--ease-out);background:var(--c-surface);border-bottom:1px solid var(--c-line);z-index:25;padding:var(--sp-2) 0}
.mini-bar.on{transform:none}
.mini-bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}

/* ---------- Probenset ---------- */
.slots-r2{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sp-2);list-style:none;padding:0;margin:var(--sp-3) 0}
.vial{aspect-ratio:3/4;border:2px dashed var(--c-line-strong);border-radius:var(--r-md);position:relative;overflow:hidden;display:grid;place-items:end center;color:var(--c-muted);font-size:var(--fs-xs);text-align:center;padding:4px;min-width:0;background:var(--c-surface)}
.vial::before{content:"";position:absolute;left:0;right:0;bottom:0;height:0;background:var(--v,var(--c-primary));opacity:.9;transition:height var(--dur-slow) var(--ease-out)}
.vial b{position:relative;z-index:1;font-weight:var(--fw-medium);line-height:1.15;word-break:break-word}
.vial.filled{border-style:solid;border-color:var(--c-primary);color:#fff;animation:pop var(--dur-slow) var(--ease-pop)}
.vial.filled::before{height:100%}
.vial.filled b{text-shadow:0 1px 2px rgba(0,0,0,.45)}
.vial.shake{animation:shake var(--dur-slow) var(--ease-in-out)}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.setcount{display:flex;align-items:center;gap:var(--sp-3)}
.ring{--p:0;width:56px;height:56px;border-radius:50%;background:conic-gradient(var(--c-primary) calc(var(--p) * 1%),var(--c-surface-alt) 0);display:grid;place-items:center;transition:--p var(--dur-slow) var(--ease-out)}
@property --p{syntax:"<number>";inherits:false;initial-value:0}
.ring span{width:44px;height:44px;border-radius:50%;background:var(--c-bg);display:grid;place-items:center;font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:70;overflow:hidden}
.confetti i{position:absolute;top:-10px;width:8px;height:12px;background:var(--c);animation:fall 1.6s var(--ease-in) forwards;animation-delay:var(--d)}
@keyframes fall{to{transform:translate(var(--x),105vh) rotate(540deg);opacity:.2}}
@media(prefers-reduced-motion:reduce){.confetti{display:none}}
.chip-btn{display:inline-flex;align-items:center;min-height:var(--target-min);padding:0 var(--sp-4);border:1.5px solid var(--c-line-strong);border-radius:var(--r-pill);background:var(--c-surface);color:var(--c-ink);cursor:pointer;font:inherit;font-size:var(--fs-sm);transition:background var(--dur-fast),border-color var(--dur-fast),transform var(--dur-instant)}
.chip-btn[aria-pressed="true"]{background:var(--c-primary);border-color:var(--c-primary);color:var(--c-on-primary)}
.chip-btn:active{transform:scale(var(--press-scale))}
.filter-row{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin:var(--sp-3) 0}
.sold{opacity:.7}.sold .photo{filter:grayscale(1)}
.notify{font-size:var(--fs-sm)}
@media(min-width:1100px){#sbtn{display:none}}
/* Korrekturen nach Sichtprüfung */
.grid>*{min-width:0}
@media(max-width:479px){.grid .btn{padding:0 var(--sp-3);font-size:var(--fs-sm)}.card-product .btn-cart .lbl{white-space:nowrap}}
.card-product h3{overflow-wrap:anywhere}
[hidden]{display:none!important}
.results.static .matchbar i{transition:none}
@media(max-width:479px){
  .nav .cart-link{font-size:0;gap:0;padding:0 var(--sp-2)}
  .nav .cart-link::before{content:"";width:22px;height:22px;margin-right:var(--sp-2);background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M3 4h2l2 12h11l2-8H6'/%3E%3Ccircle cx='9' cy='20' r='1'/%3E%3Ccircle cx='17' cy='20' r='1'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M3 4h2l2 12h11l2-8H6'/%3E%3Ccircle cx='9' cy='20' r='1'/%3E%3Ccircle cx='17' cy='20' r='1'/%3E%3C/svg%3E") center/contain no-repeat}
  .nav .count{font-size:var(--fs-xs)}
}
.no-anim *,.no-anim *::before{transition-duration:0s!important;transition-delay:0s!important}