/* Duftwelten-Karussell (aus Labor 06): Flakons auf einem 3D-Ring, Scroll dreht, Bühnenfarbe folgt der Duftfamilie.
   Ohne JavaScript und bei prefers-reduced-motion: ruhiges Raster, jede Karte ein Link. */
.kar{--c:43,103,112;--hh:64px;--tb:0px;position:relative;width:100vw;margin-left:calc(50% - 50vw);background:#10120f;color:#fff;font-family:'Qamer Grotesk',system-ui,sans-serif;margin-top:var(--sp-7,64px)}
.kar-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kar-stage{position:relative;padding:72px 4vw 56px;background:#2b6770}
.kar-giant{display:none}
.kar-ring{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.kar-ring li{position:relative;aspect-ratio:4/5;overflow:hidden}
.kar-ring a{display:block;height:100%}
.kar-ring img{width:100%;height:100%;object-fit:cover;display:block}
.kar-tag{position:absolute;left:0;right:0;bottom:0;padding:34px 14px 12px;display:grid;gap:2px;background:linear-gradient(transparent,rgba(0,0,0,.72))}
.kar-tag b{font:800 17px/1.1 'Qamer Grotesk',system-ui,sans-serif;letter-spacing:-.01em}
.kar-tag i{font:400 13px/1.2 'Qamer Grotesk',system-ui,sans-serif;font-style:normal;opacity:.9}
.kar-info{display:none}
.kar a:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 6px #000}
@media (max-width:767px){.kar{--tb:72px}}
/* Ruhiger Zustand mobil (Mobil R1): Wischreihe statt acht Fotos untereinander; scrollt nur innen, nie die Seite seitwärts */
@media (max-width:767px){
  .kar:not(.is-live) .kar-ring{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:72%;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding-bottom:6px}
  .kar:not(.is-live) .kar-ring li{scroll-snap-align:start}
}

@media (prefers-reduced-motion:no-preference){
  .kar.is-live .kar-track{height:540vh;position:relative}
  .kar.is-live .kar-stage{--cw:min(31vw,46svh);position:sticky;top:var(--hh);height:calc(100svh - var(--hh) - var(--tb));padding:0;overflow:hidden;background:radial-gradient(90% 90% at 60% 45%,rgb(var(--c)) 0%,rgba(var(--c),.55) 45%,#0b0d0b 100%)}
  .kar.is-live .kar-giant{display:block;position:absolute;left:50%;top:46%;margin:0;transform:translate(-50%,-50%);font:800 25vw/.8 'Qamer Grotesk',system-ui,sans-serif;letter-spacing:-.06em;color:rgba(255,255,255,.14);white-space:nowrap;text-transform:uppercase;will-change:transform}
  .kar.is-live .kar-scene{position:absolute;inset:0;perspective:1500px;perspective-origin:64% 42%}
  .kar.is-live .kar-ring{display:block;position:absolute;left:64%;top:44%;width:var(--cw);aspect-ratio:4/5;transform-style:preserve-3d;transform:translate(-50%,-50%);will-change:transform}
  .kar.is-live .kar-ring li{position:absolute;inset:0;backface-visibility:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.7);will-change:transform,filter,opacity}
  .kar.is-live .kar-tag{display:none}
  .kar.is-live .kar-info{display:grid;position:absolute;z-index:5;left:4vw;bottom:88px;gap:8px;justify-items:start;max-width:26vw}
  .kar.is-live .kar-info p{margin:0}
  .kar.is-live .kar-fam{font:600 13px/1 'Qamer Grotesk',system-ui,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.85)}
  .kar.is-live .kar-nm{font:800 clamp(34px,4vw,68px)/.95 'Qamer Grotesk',system-ui,sans-serif;letter-spacing:-.04em}
  .kar.is-live .kar-note{font:600 clamp(15px,1.4vw,20px)/1.2 'Qamer Grotesk',system-ui,sans-serif;margin-bottom:8px!important}
  .kar.is-live .kar-info.sw .kar-fam,.kar.is-live .kar-info.sw .kar-nm,.kar.is-live .kar-info.sw .kar-note{animation:kar-sw .5s cubic-bezier(.2,.8,.2,1)}
  .kar-buy{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 30px;background:#fff;color:#10120f;font:600 14px/1 'Qamer Grotesk',system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
  .kar-buy svg{margin-left:12px;width:18px;height:18px}
  .kar-buy:hover{transform:translateY(-2px)}
  @keyframes kar-sw{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:no-preference) and (max-width:767px){
  .kar.is-live .kar-stage{--cw:56vw}
  .kar.is-live .kar-ring{left:50%;top:34%}
  .kar.is-live .kar-scene{perspective-origin:50% 42%}
  .kar.is-live .kar-info{max-width:calc(100% - 8vw)}
  .kar.is-live .kar-giant{font-size:34vw;top:30%}
  .kar.is-live .kar-info{bottom:84px}
  .kar.is-live .kar-nm{font-size:34px}
}