/** Shopify CDN: Minification failed

Line 3501:9 Unexpected "("
Line 5228:74 Unexpected "("

**/
/* SQUISH RITUAL – Theme CSS. Generiert aus apps/studio/src/preview/{storefront,storefront-v2,scene,product-world}.css + scripts/theme-extras.css (node scripts/build-theme-css.mjs; Parity-Test prüft). */
.sf {
  --sf-bg: #fff8f2;
  --sf-ink: #171318;
  --sf-muted: rgba(23, 19, 24, 0.62);
  --sf-line: rgba(23, 19, 24, 0.1);
  --sf-strawberry: #ff4f7b;
  --sf-butter: #ffd84d;
  --sf-jelly: #77ddf7;
  --sf-mint: #73e5b0;
  --sf-lilac: #b595ff;
  --sf-radius: 28px;
  --sf-shadow: 0 18px 40px rgba(23, 19, 24, 0.12);
  --p-primary: var(--sf-strawberry);
  --p-secondary: var(--sf-butter);
  --p-accent: var(--sf-lilac);
  --p-surface: var(--sf-bg);
  --p-surface-alt: #ffeede;
  --p-ink: var(--sf-ink);
  --p-glow: #ffc9d6;
  --p-on-primary: #171318;
  --m-squish-x: 1.04;
  --m-squish-y: 0.96;
  --m-spring-dur: 420ms;
  --m-float-amp: 6px;
  --m-float-dur: 5200ms;
  --m-rebound-delay: 0ms;
  background: var(--sf-bg);
  color: var(--sf-ink);
  font-family: var(--font-body);
  min-height: 100dvh;
  overflow-x: hidden;
}
.sf * {
  box-sizing: border-box;
}
/* D3: feines Papier-/Foam-Grain über dem gesamten Seitenhintergrund (SVG-
   Noise, ~5 % Deckung) – nimmt digitalen Flächen die Glätte, ohne Muster. */
.sf::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%27180%27 height=%27180%27><filter id=%27n%27><feTurbulence type=%27fractalNoise%27 baseFrequency=%270.85%27 numOctaves=%272%27 stitchTiles=%27stitch%27/></filter><rect width=%27180%27 height=%27180%27 filter=%27url(%23n)%27/></svg>");
  background-size: 180px 180px;
}
.sf h1,
.sf h2,
.sf h3 {
  font-family: var(--font-headline);
  letter-spacing: -0.02em;
  margin: 0;
}
.sf a {
  color: inherit;
  text-decoration: none;
}
.sf img,
.sf video {
  max-width: 100%;
  display: block;
}
.sf .wrap {
  width: min(1200px, calc(100% - 32px));
  margin-inline: auto;
}
.sf .section {
  padding: clamp(64px, 9vw, 128px) 0;
}
.sf .eyebrow {
  font: 700 11px/1.2 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sf-muted);
}
.sf .h-xl {
  font-size: clamp(34px, 7vw, 76px);
  line-height: 0.98;
  font-weight: 800;
}
.sf .h-l {
  font-size: clamp(26px, 4vw, 44px);
  line-height: 1.05;
  font-weight: 800;
}
.sf .h-m {
  font-size: clamp(20px, 2.6vw, 28px);
  line-height: 1.15;
  font-weight: 700;
}
.sf .lead {
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.5;
  color: var(--sf-muted);
  max-width: 60ch;
}
.sf .muted {
  color: var(--sf-muted);
}
.sf .small {
  font-size: 13px;
  line-height: 1.5;
}

/* ---- Buttons: drücken sich zusammen und federn zurück ---- */
.sf .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 22px;
  border-radius: 999px;
  border: 2px solid var(--sf-ink);
  background: var(--sf-ink);
  color: #fff8f2;
  font: 700 15px/1 var(--font-body);
  cursor: pointer;
  transition: transform var(--m-spring-dur) cubic-bezier(0.34, 1.56, 0.64, 1), background 160ms, color 160ms;
  transform-origin: 50% 100%;
}
.sf .btn:hover {
  transform: translateY(-1px);
}
.sf .btn:active {
  transform: scale(var(--m-squish-x), var(--m-squish-y));
  transition-duration: 90ms;
}
.sf .btn:focus-visible {
  outline: 3px solid var(--sf-butter);
  outline-offset: 3px;
}
.sf .btn.magnet {
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), background 160ms, color 160ms;
}
.sf .btn.primary {
  background: var(--p-primary);
  border-color: var(--p-primary);
  color: var(--p-on-primary);
}
.sf .btn.secondary {
  background: transparent;
  color: var(--sf-ink);
}
.sf .btn.small {
  min-height: 40px;
  padding: 0 14px;
  font-size: 13px;
}
.sf .btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.sf .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 0 0 1px rgba(23, 19, 24, 0.08), 0 1px 2px rgba(23, 19, 24, 0.05);
  font: 600 13px/1 var(--font-body);
  cursor: pointer;
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 160ms, background 160ms;
}
.sf .chip:active {
  transform: scale(1.04, 0.94);
}
.sf .chip[aria-pressed="true"],
.sf .chip.on {
  background: var(--sf-ink);
  box-shadow: none;
  color: #fff8f2;
}
.sf .chip:focus-visible {
  outline: 3px solid var(--sf-butter);
  outline-offset: 2px;
}
.sf .badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  font: 700 11px/1 var(--font-body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--p-surface-alt);
  color: var(--sf-ink);
}
.sf .badge.warn {
  background: var(--sf-butter);
}
.sf .badge.info {
  background: var(--sf-jelly);
}
.sf .badge.demo {
  background: var(--sf-lilac);
}

/* ---- Announcement + Header ---- */
.sf .announcement {
  background: var(--sf-ink);
  color: #fff8f2;
  font: 600 12px/1.2 var(--font-body);
  text-align: center;
  padding: 9px 16px;
  letter-spacing: 0.02em;
}
.sf .header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 248, 242, 0.86);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid var(--sf-line);
}
.sf .header .wrap {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  min-height: 64px;
}
/* QA1: der sticky .header (65px, siehe .sf .header oben) hatte keinen Scroll-Offset –
   ein direkter Sprung/Scroll zu einer Section-Überschrift (z. B. Deep-Link auf #faq-title)
   landete die Überschrift exakt unter dem fixierten Header. Section-Überschriften bekommen
   daher denselben Sticky-Offset wie die Hero-Kapitel (siehe storefront-v2.css `top: 84px`). */
.sf h1[id],
.sf h2[id] {
  scroll-margin-top: 72px;
}
.sf .nav {
  display: none;
  gap: 20px;
  font: 600 14px/1 var(--font-body);
}
.sf .nav a {
  padding: 8px 0;
  border-bottom: 2px solid transparent;
}
.sf .nav a:hover {
  border-color: var(--sf-ink);
}
@media (min-width: 900px) {
  .sf .nav {
    display: flex;
    justify-content: center;
  }
}
.sf .icons {
  display: flex;
  gap: 4px;
}
.sf .iconbtn {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 0;
  background: transparent;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  position: relative;
  color: var(--sf-ink);
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1), background 160ms;
}
.sf .iconbtn:hover {
  background: rgba(23, 19, 24, 0.06);
}
.sf .iconbtn:active {
  transform: scale(1.06, 0.92);
}
.sf .iconbtn:focus-visible {
  outline: 3px solid var(--sf-butter);
}
.sf .iconbtn .count {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--sf-strawberry);
  color: #fff;
  font: 700 11px/18px var(--font-body);
  text-align: center;
  padding: 0 5px;
}
.sf .logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.sf .logo svg {
  height: 26px;
  width: auto;
}
/* Schmale Viewports: keine leere Mittelspalte, Logo skaliert mit – sonst überläuft die Kopfzeile (360/390) */
@media (max-width: 899px) {
  .sf .header .wrap {
    grid-template-columns: auto auto;
    justify-content: space-between;
    gap: 8px;
  }
  .sf .logo svg {
    height: clamp(16px, 5.5vw, 26px);
  }
}

/* ---- Hero ---- */
.sf .hero {
  position: relative;
  min-height: min(88dvh, 820px);
  display: grid;
  align-items: end;
  overflow: hidden;
  background: linear-gradient(160deg, var(--p-glow), var(--sf-bg) 55%, var(--p-surface-alt));
}
.sf .hero .art {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.sf .hero .art .float {
  width: min(70vw, 560px);
  animation: sf-float var(--m-float-dur) ease-in-out infinite;
  filter: drop-shadow(0 30px 40px rgba(23, 19, 24, 0.18));
}
.sf .hero .art img,
.sf .hero .art video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Produktbild: bleibt ein schwebendes Objekt auf dem Verlauf (kein Vollbild-Zoom) */
.sf .hero.has-image .art .float {
  width: min(58vw, 520px);
  border-radius: 28px;
  overflow: hidden;
}
.sf .hero.has-image .art .float img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
@media (min-width: 900px) {
  .sf .hero.has-image .art {
    justify-content: end;
    padding-right: 6vw;
  }
  .sf .hero.has-image .content {
    max-width: 560px;
  }
}
/* Video: vollflächig, Text hell auf dunklem Verlauf */
.sf .hero.has-video .art .float {
  width: 100%;
  height: 100%;
  animation: none;
  filter: none;
}
.sf .hero .content {
  position: relative;
  padding: 32px 0 44px;
  display: grid;
  gap: 16px;
  max-width: 640px;
}
.sf .hero.has-video .content {
  color: #fff8f2;
}
.sf .hero.has-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23, 19, 24, 0) 30%, rgba(23, 19, 24, 0.72) 100%);
  pointer-events: none;
}
.sf .hero .content > * {
  position: relative;
  z-index: 1;
}
.sf .hero.has-video .lead {
  color: rgba(255, 248, 242, 0.85);
}
@media (max-width: 899px) {
  .sf .hero.has-image .art {
    align-items: start;
    padding-top: 24px;
  }
  .sf .hero.has-image .art .float {
    width: min(64vw, 320px);
  }
  .sf .hero.has-image .content {
    padding-top: min(52vw, 300px);
  }
}
.sf .hero .cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
@keyframes sf-float {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }
  50% {
    transform: translateY(calc(var(--m-float-amp) * -1)) rotate(1deg);
  }
}

/* ---- Marquee ---- */
/* A2, Punkt 1: keine scharfe Balkenkante mehr – die Butter-Fläche liegt als
   weich abgerundete Pille (statt eines Vollbreite-Rechtecks mit hartem
   Rahmen) mit eigenem Schatten auf der Page Scene; oben UND unten blendet
   ein ≥140px hoher Verlauf zusätzlich weich ein/aus. */
.sf .marquee {
  position: relative;
  overflow: visible;
  padding: 0 clamp(12px, 4vw, 40px);
}
.sf .marquee-shell {
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  background: var(--sf-butter);
  box-shadow: 0 18px 40px -22px rgba(23, 19, 24, 0.35);
  padding: 11px 0;
  white-space: nowrap;
  font: 800 14px/1 var(--font-headline);
  letter-spacing: 0.06em;
}
/* A1c, Punkt 6: weicher Übergang vom Hero (Page-Scene-Verlauf) in die feste
   Butter-Fläche der Marquee statt eines harten Farbsprungs an der Sektions-
   grenze – ein 160px hoher Verlauf legt sich über den unteren Hero-Bereich
   und blendet erst am Ende ganz in `--sf-butter` über. */
.sf .marquee::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  /* A1d, Punkt 5: von 160px auf 220px verlängert (weiterhin deutlich über den
     geforderten ≥140px) – zusammen mit der Canvas-Ausblendmaske im Sticky-
     Kapitel (siehe storefront-v2.css) bleibt kein Rest der Kugelszene mehr
     als hart abgeschnittener Bogen über der Marquee sichtbar. */
  height: 220px;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--sf-butter) 55%, transparent));
  pointer-events: none;
}
.sf .marquee::after {
  /* A2, Punkt 1: derselbe weiche Übergang nach unten in die Kategorieportale –
     die Pille selbst hat runde Kanten, dahinter bleibt kein harter Bruch. */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 160px;
  background: linear-gradient(to top, transparent, color-mix(in srgb, var(--sf-butter) 40%, transparent));
  pointer-events: none;
}
.sf .marquee-track {
  display: inline-flex;
  gap: 40px;
  animation: sf-marquee 28s linear infinite;
  padding-right: 40px;
}
@keyframes sf-marquee {
  to {
    transform: translateX(-50%);
  }
}

/* ---- Cards ---- */
.sf .grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 720px) {
  .sf .grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}
@media (min-width: 1100px) {
  .sf .grid.four {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* D1b: keine weiße Karte, aber auch kein Pastell-Pad/keine Mulde mehr hinter
   dem Cutout (Nutzerfeedback: "hinter den Produktbildern ist noch irgendwas").
   Der Bildbereich hat jetzt eine feste Aspect-Ratio, schneidet nie sichtbar
   etwas ab (`overflow: clip`) und trägt nur einen weichen, verblurrten
   Bodenschatten. Das Cutout selbst ist per max-width/max-height begrenzt
   (78%/72%) und dadurch garantiert innerhalb der Kachel – auch Hochformat-
   Cutouts (Tube, Butter-Bar) skalieren korrekt nach Höhe statt die Kachel zu
   sprengen und Titel/Preis zu überdecken. */
.sf .card {
  display: grid;
  gap: 10px;
  padding: 0;
  background: none;
  border: none;
  transition: transform var(--m-spring-dur) cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: 50% 90%;
}
.sf .card:hover {
  transform: translateY(-6px);
}
.sf .card:active {
  transform: scale(1.02, 0.97);
}
.sf .card .media {
  aspect-ratio: 4 / 5;
  overflow: clip;
  position: relative;
  display: grid;
  place-items: center;
  border-radius: var(--sf-radius);
}
.sf .card .media.is-cutout::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 9%;
  height: 16%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(23, 19, 24, 0.26), transparent 72%);
  filter: blur(9px);
  opacity: 0.9;
  z-index: 0;
}
.sf .card .media img.cutout-img {
  position: relative;
  z-index: 1;
  /* G1c: Grid-Items (`.media{display:grid}`) haben per Spec `min-height:auto`/
     `min-width:auto`, was bei einem <img> das intrinsische Seitenverhältnis
     (z.B. 322×912 bei der Jelly-Tube) als Mindestmaß durchsetzt – `max-height`
     wurde dadurch ignoriert und die Tube ragte unten aus der Kachel heraus
     (Nutzerfeedback „Produkt in der Kachel abgeschnitten“, Kollektion Jelly).
     Dieselbe Falle wie bei `.feel-card-cutout` (siehe Kommentar dort), hier
     reicht `min-height:0`/`min-width:0` statt Absolut-Position, weil `.media`
     bereits eine feste Aspect-Ratio hat. */
  min-width: 0;
  min-height: 0;
  max-width: 78%;
  max-height: 72%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.sf .card .media:not(.is-cutout) {
  overflow: hidden;
  background: var(--p-surface-alt);
  box-shadow: 0 18px 32px -18px rgba(23, 19, 24, 0.3);
}
.sf .card .media:not(.is-cutout) img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.sf .card:hover .media img {
  transform: scale(1.04);
}
.sf .card .media .badge {
  position: absolute;
  top: 10px;
  left: 10px;
}
.sf .card .title {
  font: 700 15px/1.25 var(--font-headline);
}
.sf .card .price {
  font: 800 13px/1 var(--font-body);
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--sf-butter);
  color: var(--sf-ink);
  white-space: nowrap;
}
.sf .card .meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 0 4px 4px;
}

/* ---- Feel categories (G1b) ----
   Ruhige, hochwertige Karten statt Bogenportal: 4:5, Radius 24px, Grundfläche
   Cream mit sehr zartem Preset-Tint (Basis ~10%, Hover ~22%, per Overlay-Layer
   statt Gradient-Interpolation), Cutout groß und garantiert unbeschnitten
   (max. 78%/70%, object-fit: contain) mit weichem Bodenschatten. Keine
   Kugeln/Orbs, kein greller Verlauf, keine Bogenform. */
.sf .feel-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 680px) {
  .sf .feel-grid {
    gap: 20px;
  }
}
@media (min-width: 1100px) {
  .sf .feel-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* Mobil: 1,4 Karten sichtbar, horizontal scrollbar mit Snap statt 2 enger Spalten. */
@media (max-width: 679px) {
  .sf .feel-grid {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-inline: -16px;
    padding: 2px 16px 8px;
  }
  .sf .feel-card {
    flex: 0 0 70%;
    scroll-snap-align: start;
  }
}
.sf .feel-card {
  position: relative;
  display: block;
  border-radius: 24px;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  background: var(--sf-bg);
  box-shadow: 0 1px 0 rgba(23, 19, 24, 0.05);
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.sf .feel-card:hover,
.sf .feel-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 26px 48px -28px rgba(23, 19, 24, 0.28);
}
.sf .feel-card:focus-visible {
  outline: 3px solid var(--sf-butter);
  outline-offset: 3px;
}
.sf .feel-card:active {
  transform: translateY(-2px) scale(0.99);
}
.sf .feel-card-media {
  /* Absolut positioniertes Cutout statt Grid-Kind: ein <img> als Grid-/Flex-
     Kind trägt trotz `max-height:%`/`overflow:clip` seine intrinsische Größe
     als automatisches Mindestmaß bei (bekannte Grid/Flex-Falle) – bei
     Hochformat-Cutouts (Tube) blähte das die ganze Kartenreihe auf ~700px
     auf. Absolute Position + `inset` nimmt das Bild aus der Größenberechnung
     komplett heraus; die 78%/70%-Safe-Zone kommt direkt aus den Inset-Werten. */
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: clip;
}
.sf .feel-card-tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--pf-soft) 10%, var(--sf-bg)) 0%, var(--sf-bg) 72%);
}
.sf .feel-card-tint::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--pf-soft) 22%, var(--sf-bg)) 0%, var(--sf-bg) 72%);
  opacity: 0;
  transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.sf .feel-card:hover .feel-card-tint::after,
.sf .feel-card:focus-visible .feel-card-tint::after {
  opacity: 1;
}
.sf .feel-card-shadow {
  position: absolute;
  left: 24%;
  right: 24%;
  bottom: 11%;
  height: 13%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(23, 19, 24, 0.22), transparent 72%);
  filter: blur(8px);
  z-index: 0;
}
.sf .feel-card-cutout {
  position: absolute;
  inset: 15% 11%;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 14px 16px rgba(23, 19, 24, 0.14));
  transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
}
.sf .feel-card:hover .feel-card-cutout,
.sf .feel-card:focus-visible .feel-card-cutout {
  transform: translateY(-4px) scale(1.02);
}
.sf .feel-card-pending {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  font: 700 13px/1.3 var(--font-body);
  color: var(--sf-muted);
  text-align: center;
  padding: 0 16%;
}
.sf .feel-card-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 16px 18px;
}
.sf .feel-card-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--pf-primary);
  margin-bottom: 3px;
}
.sf .feel-card-body strong {
  font: 800 16px/1.15 var(--font-headline);
  color: var(--sf-ink);
}
.sf .feel-card-count {
  font: 600 12px/1.3 var(--font-body);
  color: var(--sf-muted);
}
@media (prefers-reduced-motion: reduce) {
  .sf .feel-card,
  .sf .feel-card-cutout,
  .sf .feel-card-tint::after {
    transition: none;
  }
}

/* ---- Selector ---- */
.sf .selector {
  display: grid;
  gap: 20px;
  border-radius: 28px;
  background: rgba(255, 248, 242, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: none;
  box-shadow: 0 30px 60px -34px rgba(23, 19, 24, 0.22);
  padding: clamp(18px, 3vw, 32px);
}
@media (min-width: 900px) {
  .sf .selector {
    grid-template-columns: 1fr 1fr;
  }
}
.sf .selector .row {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}
.sf .selector .row .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sf .result {
  display: grid;
  gap: 12px;
  align-content: start;
}
.sf .result .match {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border-radius: 16px;
  background: var(--p-surface-alt);
}
.sf .result .match img,
.sf .result .match .thumb {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  object-fit: cover;
  background: #fff;
}

/* ---- UGC ---- */
.sf .ugc {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}
.sf .ugc .clip {
  flex: 0 0 min(62vw, 240px);
  aspect-ratio: 9 / 16;
  border-radius: 18px;
  overflow: hidden;
  background: var(--sf-ink);
  scroll-snap-align: start;
  position: relative;
}
.sf .ugc video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sf .empty {
  border: 1.5px dashed var(--sf-line);
  border-radius: 20px;
  padding: 28px;
  text-align: center;
  color: var(--sf-muted);
  font: 500 14px/1.5 var(--font-body);
  background: rgba(255, 255, 255, 0.5);
}

/* ---- Bundle ---- */
/* A2b, Punkt 5: die drei Mengen sind keine lose nebeneinander schwebenden
   Einzelkarten mehr, sondern Segmente in EINEM gemeinsamen weichen Pad
   (wie ein Segmented-Control) – Soft-Chips statt Kästchen mit Rand. */
.sf .bundle {
  display: grid;
  gap: 4px;
  padding: 6px;
  border-radius: 26px;
  background: rgba(255, 248, 242, 0.55);
  box-shadow: inset 0 0 0 1px rgba(23, 19, 24, 0.05);
}
@media (min-width: 720px) {
  .sf .bundle {
    grid-template-columns: repeat(3, 1fr);
  }
}
.sf .tier {
  border-radius: 20px;
  border: none;
  background: transparent;
  padding: 16px 18px;
  display: grid;
  gap: 6px;
  cursor: pointer;
  transition: background 160ms, box-shadow 160ms, transform var(--m-spring-dur) cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sf .tier:active {
  transform: scale(1.02, 0.97);
}
.sf .tier[aria-pressed="true"] {
  background: rgba(255, 248, 242, 0.95);
  box-shadow: 0 10px 24px -16px rgba(23, 19, 24, 0.3);
}
.sf .tier strong {
  font: 800 20px/1 var(--font-headline);
}

/* ---- Why / FAQ / Footer ---- */
.sf .why {
  display: grid;
  gap: 14px;
}
@media (min-width: 720px) {
  .sf .why {
    grid-template-columns: repeat(3, 1fr);
  }
}
.sf .why article {
  padding: 22px;
  border-radius: 20px;
  background: rgba(255, 248, 242, 0.78);
  border: none;
  box-shadow: 0 22px 44px -30px rgba(23, 19, 24, 0.22);
  display: grid;
  gap: 6px;
}
.sf .why article strong {
  font: 800 17px/1.15 var(--font-headline);
}
.sf details {
  border-top: 1px solid var(--sf-line);
  padding: 14px 0;
}
.sf details summary {
  cursor: pointer;
  font: 700 15px/1.3 var(--font-body);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.sf details summary::after {
  content: "+";
  font-weight: 800;
  transition: transform 200ms;
}
.sf details[open] summary::after {
  transform: rotate(45deg);
}
.sf details p {
  margin: 10px 0 0;
  color: var(--sf-muted);
  line-height: 1.55;
}
/* A2, Punkt 10: weicher Übergang von der Newsletter-Fläche (Page Scene) in
   den dunklen Footer statt eines harten Farbsprungs – ≥160px Verlauf. */
.sf .footer {
  position: relative;
  background: var(--sf-ink);
  color: #fff8f2;
  padding: 48px 0 32px;
}
.sf .footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 180px;
  background: linear-gradient(to bottom, transparent, var(--sf-ink));
  pointer-events: none;
}
.sf .footer .cols {
  display: grid;
  gap: 24px;
}
@media (min-width: 720px) {
  .sf .footer .cols {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}
.sf .footer h3 {
  font: 700 12px/1 var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 10px;
}
.sf .footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
  font: 500 14px/1.3 var(--font-body);
}
.sf .footer .legal {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 248, 242, 0.15);
  font: 500 12px/1.5 var(--font-body);
  opacity: 0.6;
}
.sf .newsletter form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.sf .newsletter input {
  flex: 1 1 220px;
  min-height: 52px;
  border-radius: 999px;
  border: 2px solid var(--sf-line);
  padding: 0 18px;
  font: 500 15px/1 var(--font-body);
  background: #fff;
}
.sf .newsletter input:focus {
  outline: 3px solid var(--sf-butter);
  border-color: var(--sf-ink);
}

/* ---- Product page ---- */
.sf .pdp {
  background: var(--p-surface);
}
@media (min-width: 900px) {
  .sf .pdp-top {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 40px;
    align-items: start;
  }
}
.sf .gallery {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 10px 0;
}
.sf .gallery button {
  flex: 0 0 68px;
  height: 68px;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid transparent;
  padding: 0;
  background: var(--p-surface-alt);
  cursor: pointer;
  scroll-snap-align: start;
}
.sf .gallery button[aria-current="true"] {
  border-color: var(--sf-ink);
}
.sf .gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sf .buy {
  display: grid;
  gap: 16px;
  padding: 20px 0 8px;
}
.sf .buy .price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.sf .buy .price {
  font: 800 26px/1 var(--font-headline);
}
.sf .buy .compare {
  text-decoration: line-through;
  color: var(--sf-muted);
}
.sf .options {
  display: grid;
  gap: 12px;
}
.sf .options fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.sf .options legend {
  font: 700 13px/1 var(--font-body);
  margin-bottom: 4px;
}
.sf .qty {
  display: inline-flex;
  align-items: center;
  border: 2px solid var(--sf-line);
  border-radius: 999px;
  overflow: hidden;
}
.sf .qty button {
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  font: 700 18px/1 var(--font-body);
  cursor: pointer;
}
.sf .qty input {
  width: 44px;
  text-align: center;
  border: 0;
  font: 700 15px/1 var(--font-body);
  background: transparent;
}
.sf .avail {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 13px/1 var(--font-body);
}
.sf .avail::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sf-mint);
}
.sf .avail.out::before {
  background: var(--sf-strawberry);
}
.sf .safety-inline {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #fff;
  border: 1.5px solid var(--sf-line);
  font: 600 13px/1.4 var(--font-body);
}
.sf .sticky-atc {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 25;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 10px 10px 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  border: 1px solid var(--sf-line);
  box-shadow: var(--sf-shadow);
  transform: translateY(120%);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.sf .sticky-atc.show {
  transform: none;
}
@media (min-width: 900px) {
  .sf .sticky-atc {
    display: none;
  }
}
.sf .feel-bars {
  display: grid;
  gap: 12px;
}
.sf .bar {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 12px;
  align-items: center;
  font: 600 13px/1 var(--font-body);
}
.sf .bar .track {
  height: 10px;
  border-radius: 999px;
  background: var(--p-surface-alt);
  overflow: hidden;
}
.sf .bar .fill {
  height: 100%;
  border-radius: 999px;
  background: var(--p-primary);
  transform-origin: left;
  animation: sf-grow 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes sf-grow {
  from {
    transform: scaleX(0);
  }
}
.sf .split {
  display: grid;
  gap: 20px;
  align-items: center;
}
@media (min-width: 900px) {
  .sf .split {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
  .sf .split.flip > :first-child {
    order: 2;
  }
}
.sf .frame {
  border-radius: 26px;
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--p-surface-alt);
  display: grid;
  place-items: center;
  position: relative;
}
.sf .frame img,
.sf .frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sf .frame .illus {
  width: 60%;
}
.sf .frame .caption {
  position: absolute;
  bottom: 10px;
  left: 10px;
}
.sf .specs {
  display: grid;
  gap: 0;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--sf-line);
  background: #fff;
}
.sf .specs div {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--sf-line);
  font: 500 14px/1.4 var(--font-body);
}
.sf .specs div:first-child {
  border-top: 0;
}
.sf .specs dt {
  color: var(--sf-muted);
  font-weight: 600;
}
.sf .specs dd {
  margin: 0;
}
.sf .safety-box {
  border-radius: 28px;
  padding: clamp(20px, 3vw, 28px);
  background: var(--sf-butter);
  color: var(--sf-ink);
  display: grid;
  gap: 8px;
  box-shadow: 0 26px 50px -30px rgba(23, 19, 24, 0.28);
}
.sf .safety-box ul {
  margin: 0;
  padding-left: 18px;
  font: 600 14px/1.5 var(--font-body);
}
.sf .notice {
  border-radius: 16px;
  padding: 12px 14px;
  background: #fff;
  border: 1px dashed var(--sf-line);
  font: 500 13px/1.45 var(--font-body);
  color: var(--sf-muted);
}
.sf .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.sf .reveal.in {
  opacity: 1;
  transform: none;
}

/* ---- Cart drawer ---- */
.sf .drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(23, 19, 24, 0.4);
  z-index: 40;
  animation: sf-fade 200ms ease both;
}
.sf .drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(440px, 100vw);
  background: var(--sf-bg);
  z-index: 41;
  display: grid;
  grid-template-rows: auto 1fr auto;
  animation: sf-slide 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
  box-shadow: -20px 0 60px rgba(23, 19, 24, 0.2);
}
@keyframes sf-fade {
  from {
    opacity: 0;
  }
}
@keyframes sf-slide {
  from {
    transform: translateX(40px);
    opacity: 0;
  }
}
.sf .drawer header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid var(--sf-line);
}
.sf .drawer .lines {
  overflow: auto;
  padding: 12px 20px;
  display: grid;
  gap: 12px;
  align-content: start;
}
.sf .line {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 12px;
  align-items: center;
}
.sf .line img,
.sf .line .thumb {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  object-fit: cover;
  background: var(--p-surface-alt);
}
.sf .drawer footer {
  padding: 16px 20px 20px;
  border-top: 1px solid var(--sf-line);
  display: grid;
  gap: 10px;
}

/* ---- Illustration blobs & presets ---- */
.sf .illus {
  display: block;
}
.sf .illus-caption {
  font: 600 11px/1.2 var(--font-body);
  color: var(--sf-muted);
  text-align: center;
  margin-top: 6px;
}
.sf .squish-target {
  transition: transform var(--m-spring-dur) cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: var(--m-rebound-delay);
}
.sf .squish-target:active,
.sf .squish-target.pressed {
  transform: scale(var(--m-squish-x), var(--m-squish-y));
  transition-delay: 0ms;
  transition-duration: 80ms;
}
.sf .effect-wobble .squish-target:hover {
  animation: sf-wobble 900ms ease-in-out;
}
.sf .effect-ripple .frame::before {
  content: "";
  position: absolute;
  inset: 40% 40% auto auto;
  width: 22%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.55);
  animation: sf-ripple 3.2s ease-out infinite;
  pointer-events: none;
}
@keyframes sf-wobble {
  0%,
  100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-2deg) scale(1.02, 0.98);
  }
  50% {
    transform: rotate(2deg) scale(0.98, 1.02);
  }
  75% {
    transform: rotate(-1deg);
  }
}
@keyframes sf-ripple {
  0% {
    transform: scale(0.6);
    opacity: 0.8;
  }
  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}
@keyframes sf-drift {
  to {
    background-position: 34px 68px;
  }
}
.sf .pdp.tex-butter-smear {
  background-image: linear-gradient(120deg, rgba(255, 255, 255, 0.35) 0 40%, transparent 41%), radial-gradient(60% 80% at 80% 20%, var(--p-glow), transparent);
}
.sf .pdp.tex-juicy-dots {
  background-image: radial-gradient(circle at 20% 30%, var(--p-glow) 0 6px, transparent 7px), radial-gradient(circle at 70% 60%, var(--p-glow) 0 10px, transparent 11px), radial-gradient(circle at 40% 80%, var(--p-glow) 0 5px, transparent 6px);
}
.sf .pdp.tex-jelly-ripple {
  background-image: repeating-radial-gradient(circle at 50% 50%, transparent 0 18px, rgba(255, 255, 255, 0.35) 19px 20px);
}
.sf .pdp.tex-bead-scatter {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.7) 1.5px, transparent 2px);
  background-size: 22px 22px;
}
.sf .pdp.tex-soft-cloud {
  background-image: radial-gradient(50% 60% at 30% 40%, rgba(255, 255, 255, 0.6), transparent), radial-gradient(40% 50% at 70% 70%, rgba(255, 255, 255, 0.5), transparent);
}
.sf .pdp.tex-mochi-grain {
  background-image: radial-gradient(circle, rgba(23, 19, 24, 0.05) 1px, transparent 1.5px);
  background-size: 6px 6px;
}
.sf .pdp.tex-confetti {
  background-image: linear-gradient(45deg, var(--p-secondary) 0 8px, transparent 8px), linear-gradient(-45deg, var(--p-accent) 0 6px, transparent 6px);
  background-size: 60px 60px, 80px 80px;
  background-repeat: repeat;
  opacity: 1;
}
.sf .preview-note {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 20;
  font: 700 10px/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(23, 19, 24, 0.75);
  color: #fff8f2;
  padding: 6px 9px;
  border-radius: 999px;
  pointer-events: none;
}
/* Korrektur 8741709c: auf schmalen Viewports liegt die Marquee direkt unter dem
   Hero am unteren Bildschirmrand – der fixierte Local-Preview-Hinweis braucht
   dort mehr Abstand, damit er die Laufband-Pille nicht überlappt. */
@media (max-width: 899px) {
  .sf .preview-note {
    bottom: 64px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sf *,
  .sf *::before,
  .sf *::after {
    animation: none !important;
    transition-duration: 0.001ms !important;
  }
  .sf .reveal {
    opacity: 1;
    transform: none;
  }
}
.sf {
  overflow-x: clip;
}
.sf .wrap {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 64px);
  min-width: 0;
}
.sf .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.sf .grid,
.sf .grid.four {
  display: grid;
  gap: clamp(12px, 2vw, 20px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-bottom: 8px;
}
@media (min-width: 720px) {
  .sf .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  .sf .grid.four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/*
 * Karten-Wrapper (Palette-/Motion-Variablen): malt NIE einen Hintergrund.
 * Ursache der „fremden Ecken“ (Referenz 05): die Preset-Textur (tex-*) lag auf
 * dem eckigen Grid-Zellen-Wrapper und schien in den abgerundeten Ecken der
 * Karte durch. Texturen gelten jetzt nur für Seitenwelten (.pdp.tex-*).
 */
.sf .card-cell {
  min-width: 0;
  display: grid;
  background: none;
  background-image: none;
  border-radius: 0;
}
/*
 * A2b: `.sf .card`/`.sf .card .media` bekommen HIER absichtlich keine
 * abweichende Hintergrund-/Radius-/object-fit-Deklaration mehr. Das
 * organische Pad/Mulde-Design (Cutout auf Pastell-Pad, Foto in einer weich
 * abgerundeten Blob-Maske statt eines Rechtecks) lebt in storefront.css
 * („A2, Punkt 4“) – diese Datei lädt danach und hatte dieselben Selektoren
 * mit einer flachen 4:5-Kachel + object-fit:cover überschrieben (sichtbare
 * harte Fotokante, Regression im A2b-Audit). Nur Layout-Ergänzungen, die
 * dort NICHT existieren, bleiben unten stehen (Min-Breite, Badge-Ellipsis).
 */
.sf .card {
  min-width: 0;
  transition: transform var(--m-spring-dur) cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 220ms;
}
.sf .card .media {
  min-height: 0;
}
.sf .card .media > .badge {
  position: absolute;
  top: 10px;
  left: 10px;
  max-width: calc(100% - 20px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  z-index: 2;
}
.sf .card .media .pending .badge {
  position: static;
  font-size: 10px;
}
.sf .card .meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  padding: 0 4px 4px;
  min-width: 0;
}
.sf .card .title {
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sf .card .price {
  white-space: nowrap;
}

/* Pending State (ehrlich, in Produktpalette) */
.sf .pending {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 10%;
  text-align: center;
  background: linear-gradient(160deg, var(--p-glow), var(--p-surface-alt));
}
.sf .pending-shape {
  width: 55%;
  max-width: 220px;
  filter: drop-shadow(0 16px 20px rgba(23, 19, 24, 0.14));
}
.sf .pending-meta {
  display: grid;
  gap: 6px;
  justify-items: center;
}
.sf .pending-meta strong {
  font: 700 15px/1.2 var(--font-headline);
}
.sf .pending-swatches {
  display: inline-flex;
  gap: 4px;
}
.sf .pending-swatches i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: block;
  border: 1px solid rgba(23, 19, 24, 0.1);
}
.sf .pending.compact .pending-meta strong {
  display: none;
}
.sf .pending .badge {
  background: rgba(255, 255, 255, 0.85);
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

/*
 * Section-Rhythmus: „ruhige“/„vertrauens“-Abschnitte malen KEINE eigene
 * deckende Fläche mehr – das durchgehende Page-Scene-Farbfeld bleibt
 * sichtbar (kein Bruch/keine harte Kante an Abschnittsgrenzen, Anhang 4).
 * Einzelne Inhalte, die Kontrast brauchen, bekommen eine eigene
 * halbtransparente Panel-Fläche (`.panel`, `.why article`, `.card`, …) statt
 * dass der ganze Abschnitt deckend wird.
 */
.sf .section.quiet,
.sf .section.trust,
.sf .feel-band,
.sf .selector-band {
  background: none;
}
.sf .feel-results {
  margin-top: 18px;
}
/* Lesbarer Fließtext ohne eigene Karte (FAQ, Bewertungstext, Fühlprofil-
   Intro) bekommt eine ruhige, halbtransparente Panel-Fläche statt direkt auf
   dem bewegten Farbfeld zu liegen. */
.sf .text-panel {
  background: rgba(255, 248, 242, 0.82);
  border-radius: 24px;
  padding: clamp(18px, 3vw, 30px);
}

/* Gemeinsame Layer: weicher Bodenschatten (eigene Ebene statt drop-shadow-
   Filter) – kräftig verblurrt, keine erkennbare Kante, keine Farbfläche. */
.sf .contact-shadow {
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 5%;
  height: 10%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(23, 19, 24, 0.34), transparent 74%);
  filter: blur(18px);
  opacity: 0.72;
  z-index: 1;
  pointer-events: none;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 320ms;
}
.sf .is-pressed .contact-shadow {
  transform: scale(1.14, 0.9);
  opacity: 0.9;
}

/* ==========================================================================
   D3 – Hero ohne Schüssel: Produkt als Star, Copy links, Sticker-Badges
   ========================================================================== */
.sf .hero-world {
  min-height: min(88dvh, 860px);
  display: grid;
  padding: 0;
}
/* Full-bleed Preset-Farbfeld: zwei bis drei große, sehr weiche Farbflächen
   (Übergänge weit über 140px), keine Kante, kein Kreis. */
.sf .hero-world::before {
  content: "";
  position: absolute;
  inset: -12% -6% -18%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(52% 58% at 78% 42%, color-mix(in srgb, var(--s-light1) 46%, transparent), transparent 74%),
    radial-gradient(46% 50% at 12% 88%, color-mix(in srgb, var(--s-light2) 38%, transparent), transparent 74%),
    radial-gradient(40% 44% at 40% 8%, color-mix(in srgb, var(--s-g2) 40%, transparent), transparent 72%);
  transition: background 900ms ease;
}
.sf .hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  width: 100%;
  min-height: inherit;
  grid-template-columns: [full-start] clamp(16px, 4vw, 64px) [wrap-start] minmax(0, 1fr) [copy-end wrap-end] clamp(16px, 4vw, 64px) [full-end];
  grid-template-rows: auto auto auto;
  row-gap: 18px;
  padding: 8px 0 28px;
}
.sf .hero-showcase {
  grid-column: wrap-start / wrap-end;
  grid-row: 1;
}
.sf .hero-copy {
  grid-column: wrap-start / copy-end;
  grid-row: 2;
  display: grid;
  gap: 18px;
  max-width: 600px;
  position: relative;
  z-index: 5;
}
.sf .hero-copy .block {
  display: block;
  animation: hero-word 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}
.sf .hero-copy .lead {
  color: rgba(23, 19, 24, 0.78);
  max-width: 46ch;
}
.sf .hero-copy .cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.sf .hero-copy .btn.primary {
  background: var(--sf-ink);
  border-color: var(--sf-ink);
  color: #fff8f2;
}
.sf .hero-copy .btn.primary:hover {
  background: var(--sf-strawberry);
  border-color: var(--sf-strawberry);
  color: var(--sf-ink);
}
.sf .hero-copy .btn.secondary {
  background: rgba(255, 248, 242, 0.7);
  border-color: rgba(23, 19, 24, 0.14);
  backdrop-filter: blur(8px);
}
.sf .hero-copy .btn.secondary:hover {
  border-color: var(--sf-ink);
}
/* Vertrauenszeile – nur aus Store-Settings/Produktdaten */
.sf .hero-trust {
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  font: 600 13px/1.3 var(--font-body);
  color: rgba(23, 19, 24, 0.72);
}
.sf .hero-trust li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.sf .hero-trust svg {
  width: 18px;
  height: 18px;
  color: var(--p-primary);
  stroke-width: 2.2;
}
.sf .hero-select {
  grid-column: wrap-start / copy-end;
  grid-row: 3;
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
  position: relative;
  z-index: 5;
  padding: 4px 2px;
  min-width: 0;
}
/* Die eigentliche Chip-Reihe: eine Zeile, horizontal scrollbar ohne sichtbare
   Scrollbar, Maskenverlauf an den Rändern statt harter Kante. Die Pfeile
   sitzen außerhalb des Masken-/Scroll-Containers, damit sie nicht mit
   ausgeblendet werden. */
.sf .hero-select-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}
.sf .hero-select-track::-webkit-scrollbar {
  display: none;
}
.sf .hero-select .chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
}
/* Pfeile sind Teil des Layouts, aber nur sichtbar/klickbar bei echtem Überlauf */
.sf .hero-select:not(.has-overflow) .iconbtn {
  display: none;
}
.sf .hero-select .chip .swatch {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
  box-shadow: inset 0 0 0 1px rgba(23, 19, 24, 0.12);
}
.sf .hero-select .chip[aria-selected="true"] {
  background: var(--sf-ink);
  color: #fff8f2;
  border-color: var(--sf-ink);
}
.sf .hero-select .chip svg {
  margin-left: 6px;
}
.sf .hero-select .iconbtn {
  flex: 0 0 auto;
}

/* Bühne rechts: Glow, Satelliten, Star, Sticker – alles Ebenen ohne Kante */
.sf .hero-showcase {
  position: relative;
  min-height: clamp(300px, 78vw, 480px);
  display: grid;
  place-items: center;
  isolation: isolate;
  --px: 0;
  --py: 0;
  touch-action: pan-y;
}
.sf .hero-glow {
  position: absolute;
  inset: 4% 2%;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--s-light1) 62%, transparent), color-mix(in srgb, var(--s-light2) 30%, transparent) 55%, transparent 82%);
  filter: blur(48px);
  opacity: 0.9;
  transform: translate(calc(var(--px) * -14px), calc(var(--py) * -10px));
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1), opacity 400ms;
  animation: xs-breath calc(9s / var(--s-speed, 1)) ease-in-out infinite;
}
.sf .hero-showcase.is-pressed .hero-glow {
  opacity: 1;
  animation-duration: 1.6s;
}
.sf .hero-star {
  position: relative;
  z-index: 3;
  width: min(100%, 620px);
  min-height: 260px;
  display: grid;
  place-items: center;
  transform: translate(calc(var(--px) * 10px), calc(var(--py) * 8px));
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
  animation: hero-morph 480ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
/* Zweistufiger Kontaktschatten: weiter Ambient + enger dunkler Kern */
.sf .hero-star-shadow {
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 3%;
  height: 14%;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(23, 19, 24, 0.34), transparent 70%);
  filter: blur(24px);
  opacity: 0.85;
}
.sf .hero-star-shadow.core {
  left: 30%;
  right: 30%;
  bottom: 6%;
  height: 6%;
  filter: blur(8px);
  background: radial-gradient(ellipse at center, rgba(23, 19, 24, 0.45), transparent 72%);
  opacity: 0.8;
}
.sf .hero-star-press {
  position: relative;
  z-index: 2;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  max-width: 96%;
  display: grid;
  place-items: center;
  cursor: grab;
  font: inherit;
  color: inherit;
  border-radius: 40px;
  transform: rotate(-6deg);
  touch-action: pan-y;
}
.sf .hero-star-press:active {
  cursor: grabbing;
}
.sf .hero-star-press:focus-visible {
  outline: 3px solid var(--sf-butter);
  outline-offset: 10px;
}
.sf .hero-star img.cutout {
  display: block;
  max-width: 100%;
  max-height: min(58vh, 520px);
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 28px 30px rgba(23, 19, 24, 0.2));
  animation: sf-float var(--m-float-dur) ease-in-out infinite;
  transition: transform var(--m-spring-dur) cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: var(--m-rebound-delay);
  user-select: none;
  -webkit-user-drag: none;
}
.sf .hero-showcase.is-pressed .hero-star img.cutout {
  transform: scale(var(--m-squish-x), var(--m-squish-y));
  transition-delay: 0ms;
  transition-duration: 90ms;
}
.sf .hero-showcase.is-pressed .hero-star img.cutout.press-melt {
  transform: scale(1.08, 0.9) translateY(4%);
}
.sf .hero-showcase.is-pressed .hero-star img.cutout.press-wobble {
  transform: scale(1.05, 0.95) rotate(2deg);
}
.sf .hero-showcase.is-pressed .hero-star img.cutout.press-ripple {
  transform: scale(var(--m-squish-x), var(--m-squish-y)) rotate(-1deg);
}
.sf .hero-showcase.is-pressed .hero-star img.cutout.press-stretch {
  transform: scale(1.1, 0.93);
}
.sf .hero-showcase.is-pressed .hero-star img.cutout.press-snap {
  transform: scale(0.98, 0.97);
}
.sf .hero-showcase.is-pressed .hero-star-shadow {
  transform: scale(1.12, 0.9);
}
.sf .hero-star .pending {
  position: relative;
  inset: auto;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 40px;
}
/* Sticker wie auf einer Verpackung: leichte Rotation, weicher Schatten */
.sf .sticker {
  position: absolute;
  z-index: 4;
  display: inline-grid;
  place-items: center;
  padding: 10px 14px;
  border-radius: 999px;
  font: 800 14px/1 var(--font-headline);
  letter-spacing: -0.01em;
  color: var(--sf-ink);
  background: var(--sf-bg);
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 12px 24px rgba(23, 19, 24, 0.16), 0 1px 0 rgba(255, 255, 255, 0.8) inset;
  transform: rotate(var(--rot, -8deg));
  pointer-events: none;
  white-space: nowrap;
}
.sf .sticker-price {
  top: 5%;
  left: 2%;
  --rot: -9deg;
  font-size: clamp(20px, 2.2vw, 26px);
  padding: 12px 20px 14px;
  background: var(--sf-butter);
  text-align: center;
}
.sf .sticker-price small {
  display: block;
  font: 700 10px/1 var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 4px;
}
.sf .sticker-preset {
  right: 3%;
  bottom: 12%;
  --rot: 6deg;
  font-size: 13px;
  padding: 10px 16px;
}
.sf .sticker-preset i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--p-primary);
  display: inline-block;
  margin-right: 8px;
}
/* Zwei weitere Produkte: kleiner, tiefer, leicht weichgezeichnet (Tiefe) */
.sf .hero-sat {
  position: absolute;
  z-index: 1;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  width: 24%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  opacity: 0.88;
  filter: blur(1.6px) saturate(0.92);
  transition: filter 300ms, opacity 300ms, transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
  animation: hero-sat-in 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
  border-radius: 28px;
}
.sf .hero-sat img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 16px 18px rgba(23, 19, 24, 0.18));
  user-select: none;
  -webkit-user-drag: none;
}
.sf .hero-sat.a {
  left: -6%;
  bottom: 9%;
  transform: translate(calc(var(--px) * -6px), calc(var(--py) * -4px)) rotate(12deg) scale(0.9);
}
.sf .hero-sat.b {
  right: -5%;
  top: -2%;
  transform: translate(calc(var(--px) * -8px), calc(var(--py) * -6px)) rotate(-14deg) scale(0.78);
}
.sf .hero-sat:hover,
.sf .hero-sat:focus-visible {
  filter: none;
  opacity: 1;
  z-index: 4;
}
.sf .hero-sat:focus-visible {
  outline: 3px solid var(--sf-butter);
  outline-offset: 4px;
}
@media (min-width: 900px) {
  .sf .hero-grid {
    grid-template-columns: [full-start] minmax(clamp(16px, 4vw, 64px), 1fr) [wrap-start] minmax(0, 520px) [copy-end] minmax(0, 700px) [wrap-end] minmax(clamp(16px, 4vw, 64px), 1fr) [full-end];
    grid-template-rows: 1fr auto auto;
    column-gap: clamp(20px, 3vw, 56px);
    row-gap: 14px;
    padding: clamp(24px, 4vw, 56px) 0 clamp(24px, 3vw, 44px);
    align-items: center;
  }
  .sf .hero-copy {
    grid-column: wrap-start / copy-end;
    grid-row: 1;
    align-self: center;
  }
  .sf .hero-showcase {
    grid-column: copy-end / wrap-end;
    grid-row: 1 / 3;
    align-self: stretch;
    min-height: min(72vh, 660px);
  }
  /* Eigene, volle Breite unter Text + Bühne: hier passen die (max. 3) Chips
     in eine Zeile, statt sich die schmale Copy-Spalte zu teilen. */
  .sf .hero-select {
    grid-column: wrap-start / wrap-end;
    grid-row: 3;
    max-width: 760px;
  }
  .sf .hero-sat {
    width: 25%;
  }
}
@media (max-width: 480px) {
  .sf .hero-sat {
    width: 22%;
    opacity: 0.85;
  }
  .sf .sticker-price {
    font-size: 18px;
    padding: 10px 16px 12px;
  }
  .sf .hero-star img.cutout {
    max-height: 48vh;
  }
}
.sf .hero-world.is-switching .hero-glow {
  opacity: 1;
}
/* Ausblendende Momentaufnahme des vorherigen Produkts – liegt absolut über der
   Bühne, damit die Höhe stabil bleibt, während der neue Star mit Overshoot
   einfliegt (hero-morph). */
.sf .hero-star.is-leaving {
  position: absolute;
  inset: 0;
  margin: auto;
  z-index: 2;
  pointer-events: none;
  animation: none;
  transform: none;
  transition: none;
}
.sf .hero-star.is-leaving img.cutout {
  animation: hero-leave 220ms cubic-bezier(0.4, 0, 1, 1) both;
}
@keyframes hero-leave {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.92);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sf .hero-star.is-leaving img.cutout {
    animation: none !important;
    opacity: 0;
    transition: opacity 150ms ease !important;
  }
}
@keyframes hero-morph {
  0% {
    opacity: 0;
    transform: scale(0.92);
  }
  60% {
    opacity: 1;
    transform: scale(1.03);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes hero-sat-in {
  from {
    opacity: 0;
  }
}
@keyframes hero-word {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}
.sf .hero-world.empty .hero-copy {
  margin: 0 auto;
  grid-row: 1;
  align-self: center;
  padding: clamp(40px, 8vw, 96px) 0;
}
.sf .hero-world.empty .hero-grid {
  min-height: min(70dvh, 640px);
}
@media (prefers-reduced-motion: reduce) {
  .sf .hero-star,
  .sf .hero-sat,
  .sf .hero-glow,
  .sf .hero-copy .block,
  .sf .hero-star img.cutout {
    animation: none !important;
  }
}

/* ---------- D3: Spielwiese (Physik-Tablett als eigene Section) ---------- */
.sf .playground {
  position: relative;
  isolation: isolate;
}
.sf .playground::before {
  content: "";
  position: absolute;
  inset: -60px 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(58% 60% at 68% 55%, color-mix(in srgb, var(--sk-pink) 34%, transparent), transparent 72%),
    radial-gradient(44% 52% at 16% 28%, color-mix(in srgb, var(--sk-sun) 42%, transparent), transparent 72%),
    radial-gradient(40% 46% at 88% 12%, color-mix(in srgb, var(--sk-lilac) 26%, transparent), transparent 72%);
}
.sf .playground-grid {
  display: grid;
  gap: 24px;
}
@media (min-width: 900px) {
  .sf .playground-grid {
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 64px);
    align-items: center;
  }
}
.sf .playground-facts {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
  color: rgba(23, 19, 24, 0.66);
  font-weight: 600;
}
.sf .playground-facts li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sf .playground-facts svg {
  color: var(--sk-pink);
  flex: 0 0 auto;
  stroke-width: 2.4;
}
.sf .playground-stage {
  position: relative;
  min-height: clamp(320px, 56vw, 560px);
  isolation: isolate;
}
.sf .playground-stage .ballpit {
  position: absolute;
  inset: 0;
  min-height: 0;
}

/* FIX1b, 1: Lade-Skeleton für `data-state="idle"|"loading"` (siehe
   BallPitScene.tsx / `onFirstFrame` in ballpit.ts) – ruhiger Pastell-
   Beckenplatzhalter statt einer leeren Fläche beim Kaltstart (QA_V5.md 3.2:
   die rechte Hero-Hälfte blieb bis zum ersten gezeichneten Frame komplett
   leer). Blendet sanft zum Canvas über, sobald der erste echte Frame steht;
   bleibt danach unsichtbar im DOM (kein Unmount nötig, ein einzelnes
   statisches Bild kostet nichts im Ruhezustand). Basis-Regeln hier (gilt für
   Hero + Produktbühne gleichermaßen); Preset-Farbwelt der PDP überschreibt in
   `product-world.css`. */
.ballpit-skeleton {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--sk-pink) 20%, var(--sk-cream)) 0%, var(--sk-cream) 72%);
  opacity: 1;
  transition: opacity 420ms ease;
  pointer-events: none;
}
.ballpit-skeleton::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 6%;
  height: 46%;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--sk-lilac) 30%, transparent), transparent 75%);
}
.ballpit-skeleton-cutout {
  position: relative;
  z-index: 1;
  max-width: 52%;
  max-height: 58%;
  object-fit: contain;
  opacity: 0.92;
}
.ballpit-skeleton.is-hidden {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .ballpit-skeleton {
    /* Standbild statt Crossfade: Skeleton verschwindet sofort, sobald der
       (bei Reduced Motion headless vorgerechnete) erste Frame steht. */
    transition: none;
  }
}
/* ---------- Produktseite als Welt: Cutout ohne Kachel ---------- */
.sf .pdp-world {
  min-height: min(88dvh, 920px);
  padding: clamp(16px, 3vw, 40px) 0 clamp(28px, 4vw, 60px);
}
.sf .pdp-top {
  display: grid;
  gap: 24px;
  position: relative;
  z-index: 2;
}
@media (min-width: 900px) {
  .sf .pdp-top {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
  }
}
.sf .pdp-media {
  min-width: 0;
  position: relative;
  z-index: 2;
}
/* Die Bühne selbst: keine Fläche, kein Radius, kein Rahmen – nur Ebenen */
.sf .pdp-stage {
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: 78dvh;
  min-height: 320px;
  display: grid;
  place-items: center;
  /* Vertikales Scrollen bleibt immer möglich, auch wenn eine Geste auf dem
     Produkt beginnt – nur horizontales Pannen/Pinch wird der Squeeze-Geste
     überlassen (Touch-and-Hold startet ohnehin erst nach ~180ms Ruhe). */
  touch-action: pan-y;
  background: none;
  border-radius: 0;
  border: 0;
  --tilt-x: 0;
  --tilt-y: 0;
  perspective: 1200px;
  isolation: isolate;
  cursor: grab;
}
.sf .pdp-stage.is-pressed {
  cursor: grabbing;
}
@media (min-width: 900px) {
  .sf .pdp-stage {
    position: sticky;
    top: 84px;
  }
}
/* D1b: kein erkennbares "Pad" mehr hinter dem PDP-Cutout (Nutzerfeedback:
   rosa Fläche lugt hinter dem Keks-Cutout hervor) – nur noch ein sehr
   weicher, großer Glow ohne erkennbare Kante (Radius > 60% der Bühne,
   Deckung <= 0.35, stark verblurrt). Der eigentliche Bodenkontakt kommt
   ausschließlich vom separaten `.contact-shadow`. */
.sf .pdp-stage .rim-light {
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--p-glow) 55%, transparent), color-mix(in srgb, var(--s-light1) 24%, transparent) 55%, transparent 78%);
  opacity: 0.35;
  filter: blur(40px);
  z-index: 0;
  animation: xs-breath calc(9s / var(--s-speed, 1)) ease-in-out infinite;
  pointer-events: none;
}
.sf .pdp-stage .cutout-wrap {
  position: absolute;
  inset: 7% 6% 9%;
  z-index: 3;
  display: block;
  transform: rotateY(calc(var(--tilt-x) * var(--s-tilt))) rotateX(calc(var(--tilt-y) * var(--s-tilt) * -1));
  transform-style: preserve-3d;
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.sf .pdp-stage img.cutout {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: sf-float var(--m-float-dur) ease-in-out infinite;
  transition: transform var(--m-spring-dur) cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: var(--m-rebound-delay);
  user-select: none;
  -webkit-user-drag: none;
}
.sf .pdp-stage.is-pressed img.cutout {
  transform: scale(var(--m-squish-x), var(--m-squish-y));
  transition-delay: 0ms;
  transition-duration: 80ms;
}
.sf .pdp-stage.is-pressed img.cutout.press-ripple {
  transform: scale(var(--m-squish-x), var(--m-squish-y)) rotate(-1deg);
}
.sf .pdp-stage.is-pressed img.cutout.press-melt {
  transform: scale(1.08, 0.9) translateY(4%);
}
.sf .pdp-stage.is-pressed img.cutout.press-wobble {
  transform: scale(1.05, 0.95) rotate(2deg);
}
.sf .pdp-stage.is-pressed img.cutout.press-snap {
  transform: scale(0.98, 0.97);
}
.sf .pdp-stage.is-pressed img.cutout.press-stretch {
  transform: scale(1.1, 0.93);
}
.sf .pdp-stage.is-pressed .rim-light {
  animation-duration: 1.6s;
}
.sf .pdp-stage .bubble-layer.front {
  z-index: 4;
}
/* Galerie-Auswahl (explizit gewähltes Foto/Video – nicht der Standard) */
.sf .pdp-stage .photo-frame {
  position: relative;
  width: 86%;
  border-radius: 20px;
  overflow: clip;
  box-shadow: 0 30px 50px rgba(23, 19, 24, 0.2);
  z-index: 3;
  background: #fff;
}
.sf .pdp-stage .photo-frame img,
.sf .pdp-stage .photo-frame video {
  width: 100%;
  display: block;
  max-height: min(72vh, 680px);
  object-fit: contain;
}
.sf .pdp-stage .photo-frame .badge {
  position: absolute;
  left: 10px;
  bottom: 10px;
}
/* Pending: ehrlich, mit Aktion – nie ein Foto als Kachel */
.sf .cutout-pending {
  position: relative;
  z-index: 3;
  width: 90%;
  display: grid;
  gap: 12px;
}
.sf .cutout-pending .pending {
  position: relative;
  inset: auto;
  aspect-ratio: 1;
  border-radius: 24px;
}
.sf .pending-actions {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 248, 242, 0.88);
  border: 1px solid var(--sf-line);
}
.sf .pending-actions .btn {
  justify-self: start;
  gap: 8px;
}
.sf .orig-thumb {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sf .orig-thumb img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--sf-line);
}
/* Cutout-Thumbnail: kein Schachbrett (Transparenzmuster gehört ins Studio, nicht in den Shop) –
   das freigestellte Produkt liegt auf einem weichen Untergrund in der Produktpalette. */
.sf .gallery button.is-cutout {
  background: radial-gradient(120% 90% at 30% 20%, #fff 0%, var(--p-surface-alt) 55%, var(--p-glow) 100%);
}
.sf .gallery button.is-cutout img {
  object-fit: contain;
  padding: 8%;
}
/* Kaufbereich: lesbare Fläche in der Welt (Commerce-Panel, kein Produktmedium) */
.sf .pdp-world .buy {
  position: relative;
  z-index: 3;
  background: rgba(255, 248, 242, 0.88);
  border-radius: 24px;
  padding: clamp(16px, 2.5vw, 28px);
  border: 1px solid rgba(255, 255, 255, 0.6);
}
.sf .pdp-world .buy .safety-inline {
  background: #fff;
}
.sf .atc.is-added {
  transform: scale(1.04, 0.94);
  background: var(--sf-mint);
  border-color: var(--sf-mint);
}

/* ---------- Kapitel der Produktseite (räumlich, ohne Scroll-Lock) ---------- */
.sf .chapter-wrap {
  --chapter: 0;
}
.sf .chapter {
  position: relative;
}
.sf .chapter-bubbles {
  opacity: 0.75;
  transform: translate3d(0, calc((var(--chapter, 0) - 0.5) * -40px), 0);
}
.sf .chapter-grid {
  display: grid;
  gap: 28px;
  align-items: center;
}
@media (min-width: 900px) {
  .sf .chapter-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }
}
.sf .panel {
  background: rgba(255, 248, 242, 0.88);
  border-radius: 20px;
  padding: 18px;
}
.sf .signature-demo {
  display: grid;
  justify-items: center;
  gap: 10px;
  transform: translate3d(0, calc((var(--chapter, 0) - 0.5) * -24px), 0);
}
.sf .signature-target {
  position: relative;
  border: 0;
  background: transparent;
  width: min(72%, 320px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}
.sf .signature-target img.cutout {
  position: absolute;
  inset: 7%;
  z-index: 2;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform var(--m-spring-dur) cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: var(--m-rebound-delay);
}
.sf .signature-target.is-pressed img.cutout {
  transform: scale(var(--m-squish-x), var(--m-squish-y));
  transition-duration: 80ms;
  transition-delay: 0ms;
}
.sf .signature-target .pending {
  position: relative;
  inset: auto;
  width: 80%;
  aspect-ratio: 1;
  border-radius: 24px;
}
.sf .signature-target:focus-visible {
  outline: 3px solid var(--sf-ink);
  outline-offset: 4px;
  border-radius: 50%;
}
.sf .frame.depth {
  box-shadow: 0 30px 60px rgba(23, 19, 24, 0.18);
  transform: translate3d(0, calc((var(--chapter, 0) - 0.5) * -30px), 0);
}
.sf .material-facts {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
}
.sf .material-facts div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 14px;
  background: rgba(255, 248, 242, 0.82);
  border-radius: 12px;
  font: 500 14px/1.4 var(--font-body);
}
.sf .material-facts dt {
  color: var(--sf-muted);
  font-weight: 600;
}
.sf .material-facts dd {
  margin: 0;
}
.sf .chapter.quiet {
  background: none;
}

/* ---------- Shop nach Gefühl: räumliche Portale ---------- */
.sf .portal-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 720px) {
  .sf .portal-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.sf .portal {
  position: relative;
  border: 0;
  padding: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: var(--pf-ink);
  display: grid;
  gap: 10px;
  min-width: 0;
}
.sf .portal-depth {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: 46% 46% 26px 26px / 32% 32% 26px 26px;
  overflow: clip;
  background: var(--pf-soft);
  isolation: isolate;
  transition: transform var(--m-spring-dur) cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sf .portal-back {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 50% 110%, var(--pf-deep) 0%, var(--pf-primary) 42%, var(--pf-soft) 88%);
}
.sf .portal-light {
  position: absolute;
  left: -20%;
  right: -20%;
  top: -30%;
  height: 80%;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--pf-light) 80%, #fff), transparent 72%);
  animation: xs-light 20s ease-in-out infinite alternate;
}
/* D1b, Nutzerfeedback ("entferne die Kugeln bei den Produktbildern"): keine
   Pastellkugel-Deko mehr vor/hinter dem Cutout. Das Portal bleibt eine
   weiche Farbwelt-Kachel (Verlauf + Pointer-Licht), das Cutout schwebt
   direkt darin, nur mit einem eigenen, weichen Bodenschatten (`.portal-shadow`
   unten). */
/* Licht folgt dezent dem Pointer (per --pf-mx/--pf-my, in JS gesetzt) */
.sf .portal-hover-light {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  background: radial-gradient(220px 220px at var(--pf-mx, 50%) var(--pf-my, 40%), color-mix(in srgb, var(--pf-light) 55%, #fff), transparent 70%);
  transition: opacity 260ms ease;
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.sf .portal:hover .portal-hover-light,
.sf .portal:focus-visible .portal-hover-light {
  opacity: 0.9;
}
.sf .portal-ring {
  position: absolute;
  inset: 5%;
  border-radius: inherit;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  pointer-events: none;
}
/* Kontaktschatten als eigene Ebene unter dem Produkt: fixe Position, nie
   beschnitten, reagiert nicht auf die Float-/Hover-Transforms des Produkts. */
.sf .portal-shadow {
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 13%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(23, 19, 24, 0.24), transparent 78%);
  filter: blur(20px);
  opacity: 0.9;
  z-index: 1;
}
/* Sichere Zone: 11–15% Rand zu den (stark gerundeten) Portal-Ecken, damit das
   Produkt nie beschnitten wird und immer vollständig sichtbar bleibt
   (Referenz: Butter rechts angeschnitten, Schokolade unten heraushängend).
   Positionierung ausschließlich über inset (kein left:50%+transform:translate),
   weil `transform` sonst mit der sf-float-Keyframe-Animation kollidiert und die
   Zentrierung während der gesamten Laufzeit der Animation verloren geht. Der
   Wrapper trägt die Position, das <img> darin füllt sie zu 100% und trägt die
   Float-Animation + object-fit:contain. */
.sf .portal-product-wrap {
  position: absolute;
  inset: 18% 13% 12% 13%;
  z-index: 2;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.sf .portal-product {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  animation: sf-float var(--m-float-dur) ease-in-out infinite;
  filter: drop-shadow(0 14px 18px rgba(23, 19, 24, 0.16));
}
.sf .portal:hover .portal-product-wrap,
.sf .portal:focus-visible .portal-product-wrap {
  transform: translateY(-6px) scale(1.03);
}
.sf .portal:hover .portal-depth,
.sf .portal:focus-visible .portal-depth {
  transform: translateY(-6px) scale(1.015);
}
.sf .portal:hover .portal-back,
.sf .portal:focus-visible .portal-back {
  transform: scale(1.06);
}
.sf .portal-back {
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.sf .portal:active .portal-depth {
  transform: scale(1.02, 0.97);
}
.sf .portal.on .portal-depth,
.sf .portal:focus-visible .portal-depth {
  outline: 3px solid var(--sf-ink);
  outline-offset: 3px;
}
.sf .portal:focus-visible {
  outline: none;
}
/* Kategorie ohne Produkt: bewusster „Kommt bald“-Hinweis statt Leerfläche –
   der farbige Material-Preview (Licht, Bubbles, Ring) bleibt sichtbar. */
.sf .portal-soon {
  position: absolute;
  left: 50%;
  bottom: 14%;
  transform: translateX(-50%);
  z-index: 2;
  background: rgba(255, 255, 255, 0.82);
  color: var(--pf-ink);
  font: 700 11px/1 var(--font-body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.sf .portal-label {
  display: grid;
  gap: 2px;
  padding: 0 4px;
}
.sf .portal-label strong {
  font: 800 17px/1.1 var(--font-headline);
}
.sf .portal-label span {
  font: 600 12px/1.3 var(--font-body);
  color: rgba(23, 19, 24, 0.6);
}
.sf .portal.on .portal-label strong::after {
  content: " ✓";
}

/* ---------- Spotlights: jedes Produkt in seiner Welt ---------- */
.sf .spotlights {
  display: grid;
  gap: 16px;
  margin-bottom: 24px;
}
@media (min-width: 900px) {
  .sf .spotlights.count-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sf .spotlights.count-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.sf .spotlight {
  border-radius: 28px;
  min-height: 380px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}
.sf .spot-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 250px;
  padding: 18px;
  overflow: hidden;
}
/* D1b: kein Pastell-Pad mehr hinter dem Spotlight-Cutout – nur der
   `.contact-shadow` (unten, weich verblurrt) trägt das Produkt optisch. Die
   Größe ist über max-width/max-height begrenzt, damit das Cutout die Bühne
   nie verlässt. */
.sf .spot-stage img.cutout {
  position: relative;
  z-index: 2;
  max-width: 78%;
  max-height: 72%;
  width: auto;
  height: auto;
  object-fit: contain;
  animation: sf-float var(--m-float-dur) ease-in-out infinite;
}
.sf .spot-stage .contact-shadow {
  bottom: 10%;
  left: 28%;
  right: 28%;
  height: 8%;
}
.sf .spot-meta {
  display: grid;
  gap: 6px;
  padding: 16px 18px 18px;
  background: rgba(255, 248, 242, 0.84);
}
.sf .spot-meta .price {
  font: 800 15px/1 var(--font-headline);
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--sf-butter);
  color: var(--sf-ink);
  width: fit-content;
}
.sf .spot-meta .row-gap {
  margin-top: 6px;
  justify-content: space-between;
}

/* ---------- Squeeze-Selector mit Probe ---------- */
.sf .selector-band {
  /* A2, Punkt 5: der Selector lebt auf der Page Scene – keine eigene
     rechteckige Flächenfarbe mehr (das war die "weiße Box" im Audit), das
     Soft-Panel (`.selector`, siehe storefront.css) trägt den Kontrast. */
  background: none;
}
@media (min-width: 900px) {
  .sf .selector {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }
}
.sf .probe-col {
  display: grid;
  align-content: start;
  justify-items: start;
}
.sf .probe {
  position: relative;
  width: min(100%, 260px);
  aspect-ratio: 1;
  border: 0;
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
  margin: 8px auto 4px;
  justify-self: center;
  padding: 0;
}
/* A2b, Punkt 1: matte Pastellkugel statt Glanzring – der große, harte
   Weiß-Kern (0–32%) wirkte wie eine Glasmurmel. Ein kleines, weiches
   Highlight (~20% Deckkraft) ersetzt ihn; den "Glatt & glänzend"-Zustand
   liefert weiterhin ausschließlich `.probe-gloss` (Sheen-Overlay), das die
   Oberflächen-Antwort abbildet – hier wird nur der IMMER sichtbare
   Basiskörper entschärft. */
.sf .probe-body {
  position: relative;
  width: 72%;
  aspect-ratio: 1;
  border-radius: 46% 54% 50% 50% / 52% 48% 52% 48%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.1) 22%, transparent 44%),
    radial-gradient(circle at 46% 42%, var(--probe-b) 0%, var(--probe-a) 100%);
  transform-origin: 50% 90%;
  transition: transform var(--probe-dur) cubic-bezier(0.34, 1.56, 0.64, 1), background 300ms, border-radius 300ms;
  overflow: clip;
  z-index: 2;
}
.sf .probe.is-pressed .probe-body {
  transform: scale(var(--probe-x), var(--probe-y));
  transition-duration: 90ms;
}
.sf .probe-gloss {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.6) 48%, transparent 58%);
  opacity: 0.5;
  transition: opacity 300ms;
}
.sf .probe-texture {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 300ms;
}
.sf .probe.surface-glatt .probe-gloss {
  opacity: 1;
}
.sf .probe.surface-samtig .probe-gloss {
  opacity: 0.12;
}
.sf .probe.surface-genoppt .probe-texture {
  opacity: 1;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.55) 1.5px, transparent 2px);
  background-size: 14px 14px;
}
.sf .probe.surface-klebrig .probe-body {
  border-radius: 50% 50% 46% 54% / 62% 62% 38% 38%;
}
.sf .probe-shadow {
  position: absolute;
  bottom: 9%;
  left: 24%;
  right: 24%;
  height: 8%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(23, 19, 24, 0.26), transparent 70%);
  transition: transform var(--probe-dur) cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 1;
}
.sf .probe.is-pressed .probe-shadow {
  transform: scale(1.15, 0.9);
}
.sf .probe-label {
  position: absolute;
  bottom: -2px;
  font-weight: 700;
  color: var(--sf-muted);
}
.sf .probe:focus-visible {
  outline: 3px solid var(--sf-ink);
  outline-offset: 4px;
  border-radius: 50%;
}
.sf .probe-readout {
  margin: 0;
}
.sf .result .match img.is-cutout {
  object-fit: contain;
  padding: 6px;
}

/* ---------- Bundle: schwebende Produktgruppe ---------- */
.sf .bundle-spotlight {
  color: var(--p-ink);
}
.sf .bundle-grid {
  display: grid;
  gap: 24px;
  align-items: center;
}
@media (min-width: 900px) {
  .sf .bundle-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
/* D1b: kein Pastell-Pad/keine "Wolke" mehr hinter der Bundle-Gruppe
   (Nutzerfeedback: bräunlich-graue Wolke + abgeschnittene Cutouts). Die drei
   Produkte stehen jetzt als Trio NEBENEINANDER in einer Reihe (statt frei
   überlappend absolut positioniert), leicht versetzt über die vertikale
   Ausrichtung und die z-Reihenfolge – jedes Cutout ist über max-height
   begrenzt (200px Desktop / 120px Mobil) und kann daher nie über die Kachel
   hinausragen oder Text verdecken. */
.sf .bundle-hero {
  position: relative;
  min-height: 220px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  padding: 12px 0 20px;
  z-index: 2;
}
.sf .bundle-hero .pending {
  position: relative;
  inset: auto;
  width: min(70%, 320px);
  aspect-ratio: 1;
  border-radius: 24px;
  margin: 0 auto;
}
.sf .bundle-item {
  position: relative;
  display: grid;
  place-items: end center;
  width: clamp(84px, 26%, 190px);
  z-index: 2;
}
.sf .bundle-item.i0 {
  z-index: 2;
}
.sf .bundle-item.i1 {
  margin-right: -18px;
  align-self: center;
  z-index: 1;
}
.sf .bundle-item.i2 {
  margin-left: -18px;
  align-self: flex-end;
  z-index: 3;
}
.sf .bundle-hero.group-1 .bundle-item.i0 {
  width: min(60%, 220px);
}
.sf .bundle-item img.cutout {
  position: relative;
  z-index: 2;
  max-width: 100%;
  max-height: 200px;
  width: auto;
  height: auto;
  object-fit: contain;
  animation: sf-float var(--m-float-dur) ease-in-out infinite;
}
.sf .bundle-item.i1 img.cutout {
  animation-delay: -2s;
}
.sf .bundle-item.i2 img.cutout {
  animation-delay: -3.5s;
}
.sf .bundle-item .contact-shadow {
  bottom: 2%;
}
.sf .bundle-item:focus-visible {
  outline: 3px solid var(--sf-ink);
  outline-offset: 4px;
  border-radius: 32px;
}
@media (max-width: 719px) {
  .sf .bundle-item img.cutout {
    max-height: 120px;
  }
  .sf .bundle-item {
    width: clamp(64px, 24%, 120px);
  }
}
.sf .bundle-spotlight .bundle {
  background: rgba(255, 248, 242, 0.62);
}
.sf .bundle-spotlight .tier[aria-pressed="true"] {
  background: rgba(255, 248, 242, 0.96);
}

/* ---------- Abschluss-CTA ---------- */
.sf .closing {
  color: var(--sf-ink);
}
.sf .closing-grid {
  display: grid;
  gap: 24px;
}
@media (min-width: 900px) {
  .sf .closing-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    align-items: center;
  }
}
.sf .closing-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.sf .closing .btn.primary {
  background: var(--sf-ink);
  border-color: var(--sf-ink);
  color: #fff8f2;
}

/* Cart progress + entfernte Produkte */
.sf .cart-progress {
  padding: 12px 20px 0;
  display: grid;
  gap: 6px;
}
.sf .cart-progress-track {
  height: 10px;
  border-radius: 999px;
  background: var(--p-surface-alt, #ffeede);
  overflow: hidden;
}
.sf .cart-progress-track span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sf-mint), var(--sf-jelly));
  transition: width 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sf .line.gone {
  opacity: 0.6;
}

/* Motion-Level global */
.sf.motion-aus .squish-target,
.sf.motion-aus .reveal,
.sf.motion-aus .marquee-track,
.sf.motion-aus img.cutout,
.sf.motion-aus .float,
.sf.motion-aus .hero-copy .block,
.sf.motion-aus .cutout-wrap,
.sf.motion-aus .portal-product,
.sf.motion-aus .portal-product-wrap,
.sf.motion-aus .rim-light,
.sf.motion-aus .hero-star,
.sf.motion-aus .hero-sat,
.sf.motion-aus .hero-glow {
  animation: none !important;
  transition-duration: 0.001ms !important;
}
.sf.motion-aus .reveal {
  opacity: 1;
  transform: none;
}
.sf.motion-subtil .marquee-track {
  animation-duration: 56s;
}

/* Fokus für Chips/Karten (WCAG) */
.sf .card:focus-visible,
.sf .match:focus-visible,
.sf .tier:focus-visible,
.sf .spot-stage:focus-visible {
  outline: 3px solid var(--sf-butter);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .sf .hero-star,
  .sf .hero-sat,
  .sf .hero-glow,
  .sf .cutout-wrap,
  .sf .xs-light,
  .sf .xs-fluid,
  .sf .xs-gradient {
    transform: none !important;
  }
}

/* ==========================================================================
   D3 – Startseiten-Rhythmus: Farbfelder je Section, Karten mit Preset-Feld
   und Sticker-Preis, Spotlights, Vertrauenszone, Kollektion, Footer-Übergang
   ========================================================================== */
/* Weiche, full-bleed Farbfelder (≥ 140 px Übergang) hinter einzelnen Sections –
   keine Kante, kein Kreis: drei große Radialflächen, die weit über die
   Section hinaus auslaufen. */
.sf .feel-band,
.sf .selector-band,
.sf .section.featured,
.sf .section.trust,
.sf .collection {
  position: relative;
  isolation: isolate;
}
.sf .feel-band::before,
.sf .selector-band::before,
.sf .section.featured::before,
.sf .collection::before {
  content: "";
  position: absolute;
  inset: -80px 0;
  z-index: -1;
  pointer-events: none;
}
.sf .feel-band::before {
  background:
    radial-gradient(56% 60% at 14% 30%, color-mix(in srgb, var(--sf-lilac) 30%, transparent), transparent 74%),
    radial-gradient(50% 56% at 86% 70%, color-mix(in srgb, var(--sf-jelly) 30%, transparent), transparent 74%),
    radial-gradient(40% 40% at 60% 100%, color-mix(in srgb, var(--sf-butter) 26%, transparent), transparent 72%);
}
.sf .section.featured::before {
  background:
    radial-gradient(50% 50% at 88% 18%, color-mix(in srgb, var(--sf-butter) 30%, transparent), transparent 74%),
    radial-gradient(44% 46% at 8% 82%, color-mix(in srgb, var(--sf-strawberry) 14%, transparent), transparent 74%);
}
.sf .selector-band::before {
  background:
    radial-gradient(54% 60% at 20% 40%, color-mix(in srgb, var(--sf-jelly) 30%, transparent), transparent 74%),
    radial-gradient(46% 50% at 86% 80%, color-mix(in srgb, var(--sf-mint) 26%, transparent), transparent 74%);
}
.sf .collection::before {
  background:
    radial-gradient(48% 40% at 20% 0%, color-mix(in srgb, var(--sf-lilac) 26%, transparent), transparent 72%),
    radial-gradient(40% 36% at 90% 12%, color-mix(in srgb, var(--sf-jelly) 24%, transparent), transparent 72%);
}
.sf .collection-head {
  display: grid;
  gap: 8px;
  margin-bottom: 28px;
  max-width: 720px;
}
.sf .collection-head .h-l {
  font-size: clamp(34px, 5.4vw, 60px);
}

/* Kategorie-Portale: kräftigere Farbwelt, weichere Silhouette, größeres Label */
.sf .portal-depth {
  border-radius: 44% 44% 28px 28px / 30% 30% 28px 28px;
  box-shadow: 0 30px 50px -34px rgba(23, 19, 24, 0.35);
}
.sf .portal-back {
  background: radial-gradient(120% 90% at 50% 112%, var(--pf-deep) 0%, var(--pf-primary) 44%, color-mix(in srgb, var(--pf-soft) 80%, #fff) 92%);
}
.sf .portal-ring {
  inset: 6%;
  border-color: rgba(255, 255, 255, 0.4);
}
.sf .portal-label strong {
  font: 800 19px/1.1 var(--font-headline);
}

/* Produktkarten: Preset-Farbfeld oben (weicher Verlauf), Sticker-Preis,
   zweizeiliger Titel, Hover-Lift mit weicherem Schatten */
.sf .card .media {
  background:
    radial-gradient(90% 70% at 50% 108%, color-mix(in srgb, var(--s-light1) 34%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--s-light2) 40%, #fff8f2) 0%, color-mix(in srgb, var(--card-tint, #fff) 55%, #fff8f2) 58%, color-mix(in srgb, var(--card-tint, #fff) 25%, #fff8f2) 100%);
  transition: box-shadow 260ms ease;
}
.sf .card:hover .media,
.sf .card:focus-visible .media {
  box-shadow: 0 30px 44px -28px rgba(23, 19, 24, 0.32);
}
.sf .card .media.is-cutout::after {
  left: 18%;
  right: 18%;
  bottom: 10%;
  height: 14%;
  filter: blur(12px);
  opacity: 0.8;
}
.sf .card .media img.cutout-img {
  max-width: 76%;
  max-height: 68%;
  filter: drop-shadow(0 10px 12px rgba(23, 19, 24, 0.12));
}
.sf .card .card-price {
  position: absolute;
  top: auto;
  left: auto;
  right: 10px;
  bottom: 12px;
  z-index: 3;
  --rot: -6deg;
  font-size: 14px;
  padding: 9px 13px;
}
.sf .card .meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  padding: 2px 6px 6px;
}
.sf .card .title {
  font: 800 16px/1.2 var(--font-headline);
  letter-spacing: -0.01em;
}
.sf .card .card-sub {
  color: rgba(23, 19, 24, 0.6);
  font-weight: 600;
}

/* Spotlights: große Produktinszenierung mit Glow, Sticker-Preis, Kauf-CTA */
.sf .spotlight {
  border-radius: 32px;
  min-height: 440px;
  box-shadow: 0 34px 60px -40px rgba(23, 19, 24, 0.35);
}
.sf .spot-stage {
  min-height: 290px;
  isolation: isolate;
  background: linear-gradient(180deg, color-mix(in srgb, var(--s-light2) 34%, #fff8f2), color-mix(in srgb, var(--s-light1) 22%, #fff8f2));
}
.sf .spot-glow {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--s-light1) 58%, transparent), transparent 80%);
  filter: blur(40px);
  opacity: 0.9;
}
.sf .spot-stage img.cutout {
  max-width: 80%;
  max-height: 74%;
  filter: drop-shadow(0 22px 24px rgba(23, 19, 24, 0.2));
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.sf .spot-stage:hover img.cutout {
  transform: translateY(-6px) scale(1.03);
}
.sf .spot-stage .contact-shadow {
  bottom: 8%;
  left: 24%;
  right: 24%;
  height: 10%;
  filter: blur(20px);
}
.sf .spot-price {
  left: auto;
  bottom: auto;
  right: 16px;
  top: 16px;
  --rot: -7deg;
  font-size: 18px;
  padding: 11px 16px;
}
.sf .spot-meta {
  background: rgba(255, 248, 242, 0.92);
  padding: 18px 20px 20px;
}
.sf .spot-meta .h-m {
  font-size: 20px;
}
.sf .spot-meta .price {
  background: transparent;
  padding: 0;
  font: 800 18px/1 var(--font-headline);
}
.sf .spot-meta .btn.small.primary {
  background: var(--sf-ink);
  border-color: var(--sf-ink);
  color: #fff8f2;
}

/* Vertrauenszone: Icons statt reiner Textblöcke */
.sf .why article {
  padding: 24px;
  border-radius: 24px;
  background: rgba(255, 248, 242, 0.86);
  box-shadow: 0 26px 48px -34px rgba(23, 19, 24, 0.26);
}
.sf .why-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-grid;
  place-items: center;
  background: color-mix(in srgb, var(--sf-butter) 60%, #fff8f2);
  color: var(--sf-ink);
  margin-bottom: 8px;
}
.sf .safety-box .why-icon {
  background: rgba(255, 248, 242, 0.7);
}
.sf .safety-box {
  background: linear-gradient(135deg, color-mix(in srgb, var(--sf-butter) 70%, #fff8f2), color-mix(in srgb, var(--sf-strawberry) 18%, #fff8f2));
}

/* Newsletter: kräftiges Preset-Farbfeld (Fruit-Welt), Formular auf Soft-Glass */
.sf .closing::before {
  content: "";
  position: absolute;
  inset: -60px 0 -120px;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(56% 64% at 22% 46%, color-mix(in srgb, var(--sf-strawberry) 34%, transparent), transparent 74%),
    radial-gradient(48% 56% at 82% 30%, color-mix(in srgb, var(--sf-butter) 44%, transparent), transparent 74%),
    radial-gradient(40% 46% at 70% 100%, color-mix(in srgb, var(--sf-lilac) 30%, transparent), transparent 72%);
}
.sf .closing .wrap {
  position: relative;
  z-index: 1;
}
.sf .newsletter input {
  border-color: rgba(23, 19, 24, 0.12);
  background: rgba(255, 255, 255, 0.85);
}

/* Header: ruhiger, mit weichem Verlauf statt harter Linie */
.sf .header {
  border-bottom: 0;
  box-shadow: 0 1px 0 rgba(23, 19, 24, 0.06);
}
.sf .iconbtn .count {
  background: var(--sf-ink);
}
/* Footer: längerer, weicherer Übergang aus dem Newsletter-Farbfeld */
.sf .footer::before {
  height: 220px;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--sf-ink) 55%, transparent) 60%, var(--sf-ink));
}
.sf .footer {
  padding-top: 56px;
}

/* ==========================================================================
   H2 – Karten: Hover-Bild (Hand-Squeeze/Lifestyle), Preis „ab“, Farbpunkte,
   Rabatt-Sticker nur bei echtem Streichpreis; „So fühlt sich Slow Rise an“
   ========================================================================== */
.sf .card .media .card-hover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 320ms ease, transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  border-radius: inherit;
}
@media (hover: hover) {
  .sf .card.has-hover:hover .media .card-hover,
  .sf .card.has-hover:focus-visible .media .card-hover {
    opacity: 1;
    transform: none;
  }
  .sf .card.has-hover:hover .media img.cutout-img {
    transform: scale(0.96);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sf .card .media .card-hover {
    transition: opacity 120ms ease;
    transform: none;
  }
}
.sf .card .card-price-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 2px;
}
.sf .card .card-price-text {
  font: 800 15px/1 var(--font-headline);
  letter-spacing: -0.01em;
}
.sf .card .card-compare {
  text-decoration: line-through;
}
.sf .card-dots {
  display: inline-flex;
  gap: 4px;
  margin-left: auto;
}
.sf .card-dots i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--p-primary);
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1px rgba(23, 19, 24, 0.14);
}
.sf .card .card-price {
  background: var(--sf-strawberry);
  color: #fff8f2;
}
/* So fühlt sich Slow Rise an: Handfotos in weichen Masken */
.sf .feel-photos {
  margin-bottom: clamp(36px, 5vw, 64px);
}
.sf .feel-photo-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 900px) {
  .sf .feel-photo-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .sf .feel-photo-grid.count-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .sf .feel-photo-grid.count-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.sf .feel-photo {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 30px 50px -34px rgba(23, 19, 24, 0.4);
  transition: transform var(--m-spring-dur) cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sf .feel-photo:hover {
  transform: translateY(-4px);
}
.sf .feel-photo:focus-visible {
  outline: 3px solid var(--sk-blue);
  outline-offset: 3px;
}
.sf .feel-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.sf .feel-photo:hover img {
  transform: scale(1.04);
}
.sf .feel-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(23, 19, 24, 0.55), transparent 48%);
  pointer-events: none;
}
.sf .feel-photo-meta {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 2;
  display: grid;
  gap: 2px;
  color: #fff8f2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.sf .feel-photo-meta strong {
  font: 800 16px/1.2 var(--font-headline);
}
   Basis (Cream/Ink), 30% Produktfarbwelt (Pink/Lilac/Aqua), 10% Akzent
   (Sunshine/Blue/Coral). Keine schmutzigen Grau-/Brauntöne. */
:root {
  --sk-cream: #fff7f1;
  --sk-ink: #17131c;
  --sk-pink: #ff9ec5;
  --sk-lilac: #b9aaff;
  --sk-aqua: #99eadc;
  --sk-sun: #ffe69c;
  --sk-blue: #95baff;
  --sk-coral: #ffaf9e;
}

/* Physik-Ballbett: Canvas + Poster-Fallback + Replay. Genau eine Instanz pro
   Seite. Füllt den ihr zugewiesenen Bereich, nie eine harte Rechteckkante –
   der Verlauf des Beckens geht weich in den Hero-Hintergrund über. */
.ballpit {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 320px;
  border-radius: 0;
  overflow: visible;
}
.ballpit-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: pan-y;
}
.ballpit-poster {
  position: absolute;
  inset: 0;
  border-radius: 32px;
  background: radial-gradient(circle at 50% 38%, var(--sk-cream) 0%, color-mix(in srgb, var(--sk-pink) 22%, var(--sk-cream)) 55%, color-mix(in srgb, var(--sk-lilac) 26%, var(--sk-cream)) 100%);
  overflow: hidden;
}
.ballpit-poster-glow {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--sk-sun) 45%, transparent), transparent 70%);
  opacity: 0.7;
}
.ballpit-replay {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 3;
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  font: inherit;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  color: var(--sk-ink);
  background: color-mix(in srgb, var(--sk-cream) 88%, white);
  box-shadow: 0 6px 18px rgba(23, 19, 28, 0.16);
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.ballpit-replay:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(23, 19, 28, 0.2);
}
.ballpit-replay:focus-visible {
  outline: 2px solid var(--sk-blue);
  outline-offset: 2px;
}
/* Mobile: kleiner Chip statt großem Button, an die untere Kante gerückt, damit
   er nicht über dem Kugelbett schwebt (Ausgangspunkt: Nochmal überlappte die
   Szene bei 390px – siehe A1b-Bewertung). */
@media (max-width: 720px) {
  .ballpit-replay {
    right: 8px;
    bottom: 8px;
    padding: 7px 14px;
    font-size: 0.74rem;
    box-shadow: 0 4px 12px rgba(23, 19, 28, 0.14);
  }
}

/* Experience Scene – Ambient-Layer je Preset. Identisch in Theme (assets/theme.css). Nur Transform/Opacity-Animationen, keine permanenten Blur-Filter. */
.xscene {
  position: relative;
  overflow: clip;
  isolation: isolate;
  --s-strength: 1;
  --cam-x: 0;
  --cam-y: 0;
}
.xscene > * {
  min-width: 0;
}

/* Page Scene: EIN durchgehender, seitenhoher Hintergrund hinter allen
   Abschnitten. Höhe folgt automatisch dem Inhalt (kein 100vh, kein
   ResizeObserver nötig): der Hintergrund ist absolut positioniert in einem
   relative-Wrapper, dessen Höhe der normale Inhaltsfluss bestimmt. */
.page-scene-root {
  position: relative;
  isolation: isolate;
}
.page-scene {
  position: absolute;
  inset: 0;
  min-height: 100%;
  z-index: 0;
  pointer-events: none;
  contain: layout paint;
}
.page-scene-content {
  position: relative;
  z-index: 1;
}
/* Lokale (Kapitel-)Szenen innerhalb einer Page Scene malen keine eigene
   volle Verlaufsfläche mehr – nur noch geformte Flourish-Layer, damit an
   Abschnittsgrenzen keine harte Kante entsteht. */
.xscene.is-transparent {
  background: transparent;
}

/* Farbtokens der Page Scene morphen weich (statt hart umzuschalten), wenn
   eine andere Sektion dominant wird. `@property` macht die Custom
   Properties selbst transitionierbar (Browser ohne Unterstützung wechseln
   ohne Crossfade, aber ohne Flackern – graceful degradation). */
@property --p-primary { syntax: "<color>"; inherits: true; initial-value: #ff4f7b; }
@property --p-glow { syntax: "<color>"; inherits: true; initial-value: #ffeede; }
@property --p-accent { syntax: "<color>"; inherits: true; initial-value: #b595ff; }
@property --s-g1 { syntax: "<color>"; inherits: true; initial-value: #ff4f7b; }
@property --s-g2 { syntax: "<color>"; inherits: true; initial-value: #ffd84d; }
@property --s-g3 { syntax: "<color>"; inherits: true; initial-value: #77ddf7; }
@property --s-light1 { syntax: "<color>"; inherits: true; initial-value: #ffd84d; }
@property --s-light2 { syntax: "<color>"; inherits: true; initial-value: #77ddf7; }
@property --s-fluid { syntax: "<color>"; inherits: true; initial-value: #ffc9d6; }
.page-scene {
  transition:
    --p-primary 900ms ease,
    --p-glow 900ms ease,
    --p-accent 900ms ease,
    --s-g1 900ms ease,
    --s-g2 900ms ease,
    --s-g3 900ms ease,
    --s-light1 900ms ease,
    --s-light2 900ms ease,
    --s-fluid 900ms ease;
}
.xs-gradient {
  position: absolute;
  inset: -10%;
  z-index: 0;
  background: color-mix(in srgb, var(--s-g2) calc(10% * var(--s-strength)), #fff8f2);
  background-image:
    radial-gradient(circle, color-mix(in srgb, var(--p-glow) calc(48% * var(--s-strength)), transparent) 0%, color-mix(in srgb, var(--p-glow) calc(20% * var(--s-strength)), transparent) 38%, transparent 76%),
    radial-gradient(circle, color-mix(in srgb, var(--s-g3) calc(40% * var(--s-strength)), transparent) 0%, color-mix(in srgb, var(--s-g3) calc(15% * var(--s-strength)), transparent) 40%, transparent 78%),
    radial-gradient(circle, color-mix(in srgb, var(--s-g1) calc(34% * var(--s-strength)), transparent) 0%, color-mix(in srgb, var(--s-g1) calc(12% * var(--s-strength)), transparent) 42%, transparent 80%);
  /*
   * Drei weiche, GLEICH GROSSE Radial-„Wolken“ statt eines linear-gradient
   * mit Winkel (frühere Ursache des sichtbaren Keils, Anhang 3) und statt
   * einer einzelnen Ellipse, deren Radius sich an der oft mehrere tausend
   * Pixel hohen Page-Scene-Box orientierte (dadurch wirkte ihr Rand über
   * einen normalen Viewport hinweg wie eine harte gerade Kante statt einer
   * Rundung). Alle drei Ebenen sind in vw/vh begrenzt (unabhängig von der
   * Dokumenthöhe) und kacheln, damit auf sehr langen Seiten überall
   * Atmosphäre bleibt; ein flacher Basiston (kein Verlauf) füllt den Rest,
   * ohne je eine sichtbare Kante zu erzeugen.
   */
  background-size: 95vw 95vh, 80vw 80vh, 68vw 68vh;
  background-repeat: repeat, repeat, repeat;
  animation: xs-mesh calc(34s / var(--s-speed, 1)) ease-in-out infinite alternate;
  transform: translate3d(calc(var(--cam-x) * -6px), calc(var(--cam-y) * -4px), 0);
  transition: transform 700ms ease-out, background-color 900ms ease;
}
.xscene.is-static .xs-gradient,
.xscene.is-static .xs-caustics .xs-wave,
.xscene.is-static .xs-waves .xs-wave,
.xscene.is-static .xs-light span,
.xscene.is-static .xs-fluid-a,
.xscene.is-static .xs-fluid-b,
.xscene.is-static .xs-fluid-ring,
.xscene.is-static .xs-particles span,
.xscene.is-static .xs-seeds span,
.xscene.is-static .xs-blocks span,
.xscene.is-static .xs-confetti span,
.xscene.is-static .xs-melt-blob,
.xscene.is-static .xs-gloss,
.xscene.is-static .xs-breath,
.xscene.is-static .cloud-blob {
  animation-play-state: paused !important;
}
@keyframes xs-mesh {
  from {
    background-position: 8% 12%, 88% 78%, 42% 46%;
  }
  to {
    background-position: 28% 30%, 68% 58%, 58% 62%;
  }
}

/* "flat"-Variante (Startseite): kein erkennbarer Kreis/Kugel-Verlauf mehr –
   die Physik-Ballbett-Szene im Hero liefert bereits die räumliche Bühne, ein
   zweiter sichtbarer Kreis dahinter wirkte wie ein abgeschnittener Mond.
   Ersetzt durch einen weichen, vollflächigen Verlauf: die "Wolken" sitzen weit
   außerhalb des Viewports (an den Ecken, deutlich größer als der Viewport),
   sodass nur noch eine Farbwäsche ohne begrenzte Kontur sichtbar ist. */
.page-scene.is-flat .xs-gradient {
  /* Nur ein linearer Verlauf – keine Kurve, also grundsätzlich keine
     Kreissilhouette, egal wie hoch die Seite ist. Größe/Position in vw/vh
     statt %, damit auf sehr langen Seiten (viele Sections) überall dieselbe
     weiche Atmosphäre sichtbar bleibt statt eines einzigen, über die ganze
     Dokumenthöhe gestreckten (und damit im Viewport fast unsichtbaren)
     Verlaufs (siehe .xs-gradient oben für dieselbe vw/vh-Regel). */
  background: color-mix(in srgb, var(--s-g2) calc(8% * var(--s-strength)), #fff8f2);
  background-image: linear-gradient(
    155deg,
    var(--sk-cream) 0%,
    color-mix(in srgb, var(--p-glow) calc(28% * var(--s-strength)), var(--sk-cream)) 32%,
    color-mix(in srgb, var(--s-g1) calc(15% * var(--s-strength)), var(--sk-cream)) 64%,
    color-mix(in srgb, var(--sk-lilac) calc(18% * var(--s-strength)), var(--sk-cream)) 100%
  );
  background-size: 150vw 150vh;
  background-repeat: repeat;
  animation: xs-flat-drift calc(50s / var(--s-speed, 1)) ease-in-out infinite alternate;
}
@keyframes xs-flat-drift {
  from {
    background-position: 0% 0%;
  }
  to {
    background-position: 14% 10%;
  }
}
.page-scene.is-flat .xs-light {
  /* Die einzelnen Lichtfelder sind literale Kreis-Divs (border-radius:50%) –
     genau die "abgeschnittene Mond"-Silhouette, die auf der Startseite
     vermieden werden soll. Der weiche Verlauf in .xs-gradient übernimmt die
     Lichtstimmung bereits vollflächig. */
  display: none;
}

/* Farbige Lichtfelder (vorne links / hinten rechts / Kern) – Gradient statt Blur */
.xs-light {
  position: absolute;
  inset: -12%;
  z-index: 0;
  pointer-events: none;
  transform: translate3d(calc(var(--cam-x) * -14px), calc(var(--cam-y) * -10px), 0);
  transition: transform 700ms ease-out;
}
.xs-light span {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--s-light1) calc(62% * var(--s-strength)), transparent), color-mix(in srgb, var(--s-light1) calc(22% * var(--s-strength)), transparent) 55%, transparent);
  animation: xs-light 26s ease-in-out infinite alternate;
  will-change: transform;
}
.xs-light .l1 {
  width: 58%;
  left: -6%;
  top: -14%;
}
.xs-light .l2 {
  width: 56%;
  right: -8%;
  bottom: -16%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--s-light2) calc(64% * var(--s-strength)), transparent), color-mix(in srgb, var(--s-light2) calc(24% * var(--s-strength)), transparent) 55%, transparent);
  animation-delay: -9s;
  animation-direction: alternate-reverse;
}
.xs-light .l3 {
  width: 34%;
  left: 40%;
  top: 34%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--p-glow) calc(60% * var(--s-strength)), transparent), transparent);
  animation-delay: -17s;
  animation-duration: 18s;
}
@keyframes xs-light {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(5%, 7%, 0) scale(1.14);
  }
}
.xscene.is-pressed .xs-light .l3 {
  animation-duration: 2.4s;
}

/* Fluid-/Jelly-Fläche mit Caustic-Ringen am Boden der Welt */
.xs-fluid {
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: -2%;
  width: 112%;
  height: 44%;
  z-index: 0;
  pointer-events: none;
  transform: translate3d(calc(var(--cam-x) * -8px), calc(var(--cam-y) * -4px), 0);
  transition: transform 700ms ease-out;
}
.xs-fluid-a {
  transform-origin: 50% 100%;
  animation: xs-fluid calc(18s / var(--s-speed, 1)) ease-in-out infinite alternate;
}
.xs-fluid-b {
  transform-origin: 50% 100%;
  animation: xs-fluid calc(24s / var(--s-speed, 1)) ease-in-out infinite alternate-reverse;
}
@keyframes xs-fluid {
  from {
    transform: translateX(-2%) scaleY(1);
  }
  to {
    transform: translateX(2%) scaleY(1.08);
  }
}
.xs-fluid-ring {
  transform-origin: 760px 300px;
  transform-box: view-box;
  animation: xs-ring 6.5s ease-out infinite;
  opacity: 0;
}
.xs-fluid-ring.r2 {
  animation-delay: -3.2s;
}
@keyframes xs-ring {
  0% {
    transform: scale(0.4);
    opacity: 0.75;
  }
  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}
.xscene.is-pressed .xs-fluid-ring {
  animation-duration: 1.4s;
}

.xs-caustics,
.xs-waves,
.xs-melt {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.xs-waves {
  top: auto;
  height: 45%;
  bottom: 0;
}
.xs-wave {
  transform-origin: center;
  animation: xs-wave calc(18s / var(--s-speed, 1)) ease-in-out infinite alternate;
  opacity: calc(0.4 + var(--s-wave) * 0.6);
}
.xs-wave.w1 {
  animation-duration: calc(24s / var(--s-speed, 1));
  animation-delay: -6s;
}
.xs-wave.w2 {
  animation-duration: calc(21s / var(--s-speed, 1));
  animation-delay: -12s;
}
.xs-wave.w3 {
  animation-duration: calc(27s / var(--s-speed, 1));
  animation-delay: -3s;
}
@keyframes xs-wave {
  from {
    transform: translateX(-3%) translateY(calc(var(--s-wave) * -8px));
  }
  to {
    transform: translateX(3%) translateY(calc(var(--s-wave) * 8px));
  }
}
.xs-melt-blob {
  transform-origin: 50% 50%;
  animation: xs-melt calc(22s / var(--s-speed, 1)) ease-in-out infinite alternate;
}
@keyframes xs-melt {
  from {
    transform: scale(1, 1) translateY(0);
  }
  to {
    transform: scale(1.12, 0.92) translateY(6%);
  }
}
.xs-gloss {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.35) 45%, transparent 60%);
  background-size: 250% 100%;
  animation: xs-gloss calc(16s / var(--s-speed, 1)) ease-in-out infinite;
  mix-blend-mode: soft-light;
}
@keyframes xs-gloss {
  0%,
  100% {
    background-position: 120% 0;
  }
  50% {
    background-position: -20% 0;
  }
}
.xs-breath {
  position: absolute;
  inset: 20%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--p-glow) 70%, transparent), transparent 70%);
  animation: xs-breath calc(9s / var(--s-speed, 1)) ease-in-out infinite;
  pointer-events: none;
}
@keyframes xs-breath {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

/* Bubble Clouds: Canvas (animiert) oder statischer SVG-Cluster – dieselbe dichte Wolke */
.bubble-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  contain: strict;
}
.bubble-layer.front {
  z-index: 4;
}
.bubble-canvas,
.bubble-static {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.bubble-canvas[hidden],
.bubble-static[hidden] {
  display: none;
}
.bubble-static.mini {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Weiche Schaum-/Cloud-Layer hinter den Orbs: 2–3 sehr weiche, überlappende
   Blobs (Gradient, kein filter:blur), langsame Drift 12–28s. Nur
   transform/opacity animiert; eigene Tiefenebene hinter den Orb-Sprites. */
.cloud-layer {
  position: absolute;
  inset: -18%;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: normal;
}
.cloud-blob {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(
    circle at 36% 32%,
    rgba(255, 255, 255, calc(0.85 * var(--s-strength, 1))) 0%,
    color-mix(in srgb, var(--cb-tint, var(--s-g2)) 78%, #fff) 22%,
    color-mix(in srgb, var(--cb-tint, var(--s-g2)) 60%, transparent) 48%,
    color-mix(in srgb, var(--cb-tint2, var(--s-g1)) 38%, transparent) 70%,
    transparent 88%
  );
  opacity: 0.85;
  filter: saturate(1.15);
  animation: cloud-drift ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes cloud-drift {
  from {
    transform: translate3d(-3%, 0, 0) scale(1);
  }
  to {
    transform: translate3d(3%, -4%, 0) scale(1.07);
  }
}

.xs-particles,
.xs-seeds,
.xs-blocks,
.xs-confetti {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.xs-particles span {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
  animation: xs-drift ease-in-out infinite alternate;
}
@keyframes xs-drift {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(18px, -22px);
  }
}
.xs-seeds span {
  position: absolute;
  width: 14px;
  height: 22px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: color-mix(in srgb, var(--p-accent) 70%, #fff);
  opacity: 0.5;
  animation: xs-float ease-in-out infinite alternate;
}
.xs-blocks span {
  position: absolute;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--s-g2) 80%, #fff), color-mix(in srgb, var(--s-g1) 80%, #000));
  opacity: 0.35;
  animation: xs-float ease-in-out infinite alternate;
}
.xs-confetti span {
  position: absolute;
  width: 10px;
  height: 16px;
  border-radius: 3px;
  opacity: 0.55;
  animation: xs-float ease-in-out infinite alternate;
}
@keyframes xs-float {
  from {
    transform: translateY(0) rotate(0deg);
  }
  to {
    transform: translateY(-16px) rotate(12deg);
  }
}
@keyframes xs-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.5);
    opacity: 1;
  }
}
/* Inhalt liegt über den Layern */
.xscene > :not([aria-hidden="true"]) {
  position: relative;
  z-index: 2;
}
/* ==========================================================================
   A3 – Produktseiten als individuelle Erlebniswelten
   ==========================================================================
   Diese Datei ergänzt (überschreibt nie hart) `storefront.css`,
   `storefront-v2.css` und `scene.css` für die Produktseite. Sie wird als
   letzter globaler Import in `Storefront.tsx` geladen, damit ihre Regeln bei
   gleicher Spezifität gewinnen.

   Leitplanken (siehe skills/experiential-commerce-3d + Auftrag D4):
   - keine Fotokachel/kein weißer Rahmen hinter dem Produkt
   - KEIN eigener WebGL-Canvas mehr auf der Produktseite (D4) – die Bühne
     hinter dem Cutout ist ein reiner CSS-Glow ohne Kante
   - Preset-Farbwelt als sanfter Verlauf, keine harte Kante
   - `prefers-reduced-motion` und Motion-Level „aus“ vollständig respektiert
   ========================================================================== */

/* ---------- Produktbühne: reiner Preset-Glow, kein Canvas mehr (D4) ---------- */
.sf .pdp-stage-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 0;
  overflow: visible;
  pointer-events: none;
  filter: blur(44px);
  background: radial-gradient(62% 58% at 50% 46%, color-mix(in srgb, var(--p-glow) 32%, transparent) 0%, color-mix(in srgb, var(--p-glow) 14%, transparent) 46%, transparent 74%);
}

/* Ohne Cutout (Pending-Zustand) bleibt die Bühne trotzdem eine lebendige
   Welt statt einer leeren Fläche – die Aktionskarte liegt sichtbar davor. */
.sf .pdp-stage:not(.is-cutout) .pdp-stage-bg {
  opacity: 0.9;
}

/* ---------- Preset-Signaturbewegung des Cutouts (einmaliges Ankommen) ----------
   Eigene, vom Tilt (`cutout-wrap`) und vom Press-Squish (`img.cutout`)
   unabhängige Transform-Ebene – drei saubere Ebenen statt konkurrierender
   Transforms auf demselben Element. Läuft genau einmal beim Erscheinen und
   kommt danach vollständig zur Ruhe (kein Dauerhektik-Loop). */
.sf .cutout-motion {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 62%;
}
.sf:not(.motion-aus) .preset-jelly .cutout-motion {
  animation: pw-jelly-settle 4.2s cubic-bezier(0.22, 1, 0.36, 1) 1 both;
}
.sf:not(.motion-aus) .preset-fruit .cutout-motion {
  animation: pw-jelly-settle 3.6s cubic-bezier(0.22, 1, 0.36, 1) 1 both;
}
.sf:not(.motion-aus) .preset-butter .cutout-motion,
.sf:not(.motion-aus) .preset-mochi-taba .cutout-motion {
  animation: pw-butter-settle 4.8s cubic-bezier(0.16, 0.85, 0.32, 1) 1 both;
}
@keyframes pw-jelly-settle {
  0% {
    transform: scale(0.965, 1.035);
  }
  35% {
    transform: scale(1.025, 0.978);
  }
  62% {
    transform: scale(0.99, 1.008);
  }
  100% {
    transform: scale(1, 1);
  }
}
@keyframes pw-butter-settle {
  0% {
    transform: translateY(-1.5%) scale(1, 1);
  }
  100% {
    transform: translateY(1.6%) scale(1.01, 0.985);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sf .cutout-motion {
    animation: none !important;
  }
}

/* ---------- Preset-Texturen: kein Streifen-/Raster-Artefakt ----------
   `.pdp.tex-*` (storefront.css) malt je Preset ein Muster auf den ganzen,
   sehr hohen `.pdp`-Hintergrund. Bei `jelly-ripple` (repeating-radial-
   gradient ohne feste Kachelgröße) erzeugt das auf einer so großen Fläche
   sichtbare, schräg wirkende Ring-Ausschnitte – genau das vom Orchestrator
   gemeldete "diagonale Streifenmuster" auf der Jelly-Seite. `butter-smear`
   (harte Diagonalkante) und `soft-cloud`/`confetti`/`mochi-grain` (zu
   kräftiger Kontrast) haben dasselbe Grundproblem: ein diskretes Muster auf
   der ganzen Seite statt eines sanften Verlaufs. Ersatz: EIN weicher,
   nicht wiederholender Top-Wash (<5% effektiver Kontrast durch den Fade),
   für alle Preset-Texturen einheitlich – kein erkennbares Linien-/Punktraster
   mehr, aber weiterhin spürbar preset-getönt. */
.sf .pdp.tex-butter-smear,
.sf .pdp.tex-juicy-dots,
.sf .pdp.tex-jelly-ripple,
.sf .pdp.tex-bead-scatter,
.sf .pdp.tex-soft-cloud,
.sf .pdp.tex-mochi-grain,
.sf .pdp.tex-confetti {
  background-image: radial-gradient(120% 70% at 50% -10%, color-mix(in srgb, var(--p-glow) 5%, transparent), transparent 68%);
  background-size: auto;
  background-repeat: no-repeat;
}

/* ---------- Produktbühne: Hochformat-Cutouts unten im Kugelbett verankert ----------
   Tube/Bar-Cutouts (Aspect < 0.8, z.B. Jelly-Tube, Butter-Bar) füllten die
   ganze `.cutout-wrap` (7–9% Inset über die volle Bühnenhöhe) und schwebten
   dadurch mittig über dem kleinen Becken statt sichtbar darin zu liegen, mit
   dem Kugelhaufen weit über/hinter ihnen statt darunter. Ein reiner 3D-
   `rotateX`-Ansatz (kamerazugewandte Neigung) wurde per Playwright-Messung
   verworfen: bei einem annähernd frontalen, achsensymmetrischen Objekt
   (Tube) blieb die Verkürzung optisch fast unsichtbar, während die
   Positionierung das eigentliche Problem war. Stattdessen: schmaler
   (~46% Beckenbreite statt voller Bühnenbreite), Fuß auf Höhe des sichtbaren
   Kugelhaufens (nicht auf dem Bühnenboden) angehoben, mit einer festen
   leichten Schräglage („angelehnt“ statt kerzengerade) plus dem üblichen
   kleinen Pointer-Wackler obendrauf. Querformat-Cutouts (Schoko-Tafel u.ä.)
   bleiben unverändert – die liegen bereits natürlich im Bett. */
.sf .pdp-stage[data-orientation="portrait"] .cutout-wrap {
  inset: auto 27% 34% 27%;
  height: 34%;
  transform-origin: 50% 100%;
  transform: rotate(calc(-7deg + var(--tilt-x, 0) * 4deg));
}
.sf .pdp-stage[data-orientation="portrait"].is-pressed .cutout-wrap {
  transform: rotate(calc(-7deg + var(--tilt-x, 0) * 4deg)) translateY(-1%);
}
.sf .pdp-stage[data-orientation="portrait"] .contact-shadow {
  left: 34%;
  right: 34%;
  bottom: 30%;
  height: 6%;
}

/* ---------- Galerie: weiche Pads statt Fotokarte ---------- */
.sf .gallery {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 2px;
}
.sf .gallery button {
  border-radius: 16px;
  border: 1px solid transparent;
  overflow: hidden;
  box-shadow: none;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.sf .gallery button[aria-current="true"] {
  border-color: color-mix(in srgb, var(--p-primary) 55%, transparent);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--p-glow) 30%, transparent);
}
.sf .gallery button:hover {
  transform: translateY(-2px);
}
.sf .gallery button:focus-visible {
  outline: 2px solid var(--sk-blue);
  outline-offset: 2px;
}

/* Foto-/Videomedien aus der Galerie: weiche Maske statt rechteckiger
   Fotokante (24px Radius, weicher Randverlauf statt hartem Rahmen). */
.sf .pdp-stage .photo-frame {
  border-radius: 24px;
  background: color-mix(in srgb, var(--p-surface-alt) 70%, var(--sk-cream));
  box-shadow: 0 24px 46px color-mix(in srgb, var(--sk-ink) 16%, transparent);
}
.sf .pdp-stage .photo-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 34px 14px color-mix(in srgb, var(--p-surface-alt) 55%, var(--sk-cream));
  pointer-events: none;
}

/* ---------- Kapitel: Textflächen statt Karten, kein Rahmen ---------- */
.sf .text-panel,
.sf .panel,
.sf .safety-box,
.sf .pending-actions,
.sf .material-facts div {
  border: 0;
}

/* ---------- Reste harter weißer Karten: "Ganz nah dran" / "Maße, Material,
   Lieferumfang" ----------
   `.specs` (storefront.css) malt ein deckendes `background:#fff` mit
   `border:1px solid` – eine harte weiße Kachel mitten in der Preset-Welt,
   selbst innerhalb von `.text-panel`. `.material-facts div` (Makro-Kapitel,
   storefront-v2.css) reiht ähnlich deckende Cream-Zeilen ohne gemeinsame
   Fläche/Schatten aneinander, was wie eine zusammenhängende weiße Tabelle
   wirkt. Beides bekommt denselben ruhigen `.text-panel`-Charakter: leichte
   Transparenz, weicher Schatten, keine harte Kante, Trennlinien nur noch
   8% Ink statt sichtbarer Rahmen. */
.sf .text-panel {
  background: color-mix(in srgb, var(--sk-cream) 62%, transparent);
  box-shadow: 0 22px 46px color-mix(in srgb, var(--sk-ink) 10%, transparent);
}
.sf .specs {
  background: color-mix(in srgb, var(--sk-cream) 55%, transparent);
  border: 0;
  box-shadow: none;
  border-radius: 18px;
}
.sf .specs div {
  border-top: 1px solid color-mix(in srgb, var(--sk-ink) 8%, transparent);
}
.sf .material-facts {
  background: color-mix(in srgb, var(--sk-cream) 55%, transparent);
  border-radius: 20px;
  padding: 6px 14px;
  box-shadow: 0 18px 38px color-mix(in srgb, var(--sk-ink) 8%, transparent);
}
.sf .material-facts div {
  background: transparent;
  border-radius: 0;
  padding: 10px 2px;
  border-top: 1px solid color-mix(in srgb, var(--sk-ink) 8%, transparent);
}
.sf .material-facts div:first-child {
  border-top: 0;
}
.sf .notice {
  background: color-mix(in srgb, var(--sk-cream) 70%, var(--p-surface-alt, var(--sk-cream)));
  border-radius: 20px;
  padding: 16px 20px;
}

/* ---------- Sicherheitshinweise: warme Preset-Fläche statt greller
   Signalfarbe/weißem Kasten ----------
   `.safety-box` (Kapitel) und `.safety-inline` (Kaufbereich) kamen fest auf
   Signal-Butter-Gelb bzw. reinem Weiß daher – das sprengt auf kühlen Welten
   (Jelly, Schokolade) sichtbar die Preset-Farbwelt und wirkt wie ein
   Warnaufkleber statt einer ruhigen, integrierten Fläche. Ton bleibt dezent
   wärmer als die Umgebung (klar als "wichtig" lesbar), aber preset-treu. */
.sf .safety-box {
  background: color-mix(in srgb, var(--p-glow) 42%, var(--sk-cream));
  box-shadow: none;
}
.sf .pdp-world .buy .safety-inline {
  background: color-mix(in srgb, var(--p-surface-alt) 55%, var(--sk-cream));
  border-color: color-mix(in srgb, var(--p-primary) 22%, transparent);
}

/* ---------- Fehlende Daten: ruhige Liste statt Leertabelle ---------- */
.sf .specs dd:empty::before,
.sf .specs dd {
  font-variant-numeric: tabular-nums;
}

/* ---------- Responsive Feinschliff ---------- */
@media (max-width: 480px) {
  .sf .pdp-stage {
    min-height: 280px;
  }
  .sf .gallery button {
    width: 56px;
    height: 56px;
  }
}

/* Sicherheit gegen horizontalen Overflow auf sehr langen Produktseiten */
.sf .pdp-world,
.sf .chapter-wrap,
.sf .pdp-top {
  max-width: 100%;
  overflow-x: clip;
}

/* ==========================================================================
   D3 – Produktseite: Preset-Farbfelder (oben kräftig, unten ruhig), Bühne mit
   Glow/Schatten/Sticker, Soft-Glass-Kaufpanel, Kapitel mit Chips
   ========================================================================== */
/* G1c: 900px-Deckel war Teil der PDP-Überlänge (Ziel: Schoko-PDP bei 1440px
   ≤ 3400px statt ~4300px) – die Bühne braucht nicht mehr Höhe als die Buy-
   Box + Cutout tatsächlich beanspruchen. 760px/76dvh reicht für Cutout,
   Preis-/Preset-Sticker und die Kaufbox, ohne sie zu stauchen. */
.sf .pdp-world {
  min-height: min(76dvh, 760px);
  padding: clamp(12px, 2.5vw, 28px) 0 clamp(32px, 4vw, 56px);
}
.sf .pdp-world::before {
  content: "";
  position: absolute;
  inset: -10% -6% -14%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(54% 60% at 26% 34%, color-mix(in srgb, var(--s-light1) 52%, transparent), transparent 74%),
    radial-gradient(48% 54% at 86% 18%, color-mix(in srgb, var(--s-light2) 40%, transparent), transparent 74%),
    radial-gradient(42% 46% at 60% 100%, color-mix(in srgb, var(--s-g2) 36%, transparent), transparent 72%);
  /* G1c: die drei Radial-„Wolken“ reichten nie ganz bis 0 Deckung an der
     unteren Kante des (auf max. 900px gedeckelten) `.pdp-world` – dort endete
     das kräftige Preset-Farbfeld (z.B. Jelly-Blau) bislang mit einer sicht-
     baren geraden Kante zur ruhigen Cream-Page-Scene darunter (Nutzerfeedback
     „blaue Fläche endet mit harter Kante“). Eine Maske blendet die letzten
     240px des Farbfelds unabhängig von den Radial-Formen weich auf 0 aus. */
  mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 240px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 240px), transparent 100%);
}
/* Unterhalb der Bühne beruhigt sich die Welt: nur noch ein zarter Hauch */
.sf .pdp .chapter-wrap,
.sf .pdp .chapter.quiet {
  position: relative;
}
.sf .pdp .chapter-wrap::before {
  content: "";
  position: absolute;
  inset: -40px 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(50% 50% at 82% 40%, color-mix(in srgb, var(--s-light2) 16%, transparent), transparent 74%);
}
/* D4c: verkürzte PDP – die stillen Kapitel (Fakten/Sicherheit/Versand/FAQ)
   erbten die volle Home-Section-Auflage (clamp(64px,9vw,128px) oben UND
   unten). `.pt-0` sollte den doppelten oberen Rand kompensieren, hatte aber
   in beiden Welten (React `.chapter.quiet.pt-0` UND Theme `.section.pt-0`)
   nie eine eigene Regel – gestapelt ergab das bis zu 256px Leerfläche
   zwischen inhaltsarmen Kapiteln (Nutzerfeedback „zu viel Unsinn“ betraf
   auch diese Lücken, nicht nur die Inhalte). Generischer Fix zuerst (gilt
   im ganzen Theme überall dort, wo `.pt-0` schon stand, aber wirkungslos
   war), danach die PDP-spezifisch engere Taktung.
*/
/* G1c: `.pt-0` und `.chapter.quiet` hatten dieselbe Spezifität (je drei
   Klassen) – da `.chapter.quiet` WEITER UNTEN im Stylesheet stand, gewann
   sein `padding`-Shorthand (setzt alle vier Seiten) immer über das isolierte
   `padding-top:0` von `.pt-0`, egal in welcher Reihenfolge die Klassen am
   Element standen. Ergebnis: jedes „pt-0“-Kapitel (Sicherheit, Versand, FAQ)
   behielt den vollen oberen Rand – bis zu ~173px Leerfläche zwischen zwei
   ruhigen Kapiteln statt der vorgesehenen ~86px (Nutzerfeedback „PDP enger
   machen“, Screenshot zeigte eine ~500px-Lücke vor FAQ). Fix: eine eigene,
   danach stehende Regel mit gleicher Spezifität, die NUR padding-top setzt
   und damit als letztes Wort gewinnt. Gleichzeitig wird die Basis-Taktung
   auf die geforderten 48–64px (Desktop) / 32–40px (Mobil) statt 48–96px
   verengt. */
.sf .chapter.quiet,
.sf .section.pdp-quiet {
  padding: clamp(32px, 4.5vw, 64px) 0;
}
.sf .section.pt-0,
.sf .chapter.quiet.pt-0,
.sf .section.pdp-quiet.pt-0 {
  padding-top: 0;
}
/* Cross-Sell folgt direkt auf FAQ – derselbe verengte obere Rand statt der
   alten Home-Section-Auflage. */
.sf .chapter-cross {
  padding-top: clamp(32px, 4.5vw, 64px);
}
/* Bühne: größeres Cutout, kräftigerer Glow in Szenenfarbe, zweistufiger Schatten */
.sf .pdp-stage {
  aspect-ratio: 4 / 4.6;
  max-height: 80dvh;
  max-width: 560px;
  margin-inline: auto;
}
.sf .pdp-stage .rim-light {
  inset: -6%;
  opacity: 0.55;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--s-light1) 64%, transparent), color-mix(in srgb, var(--s-light2) 28%, transparent) 55%, transparent 80%);
  filter: blur(46px);
}
.sf .pdp-stage .contact-shadow {
  left: 16%;
  right: 16%;
  bottom: 5%;
  height: 12%;
  filter: blur(22px);
  opacity: 0.8;
}
/* D4: zweistufiger Kontaktschatten – weiter Ambient-Schatten (oben) + enger
   dunkler Kern direkt unter dem Produkt (Spiegel von .hero-star-shadow.core). */
.sf .pdp-stage .contact-shadow.core {
  left: 32%;
  right: 32%;
  bottom: 7%;
  height: 5%;
  filter: blur(9px);
  background: radial-gradient(ellipse at center, rgba(23, 19, 24, 0.42), transparent 72%);
  opacity: 0.75;
}
.sf .pdp-stage.is-pressed .contact-shadow.core {
  transform: scale(1.1, 0.88);
}
.sf .pdp-stage .cutout-wrap {
  inset: 6% 5% 9%;
}
.sf .pdp-stage img.cutout {
  filter: drop-shadow(0 26px 28px rgba(23, 19, 24, 0.2));
}
.sf .pdp-stage .pdp-price {
  top: 4%;
  left: 3%;
  --rot: -8deg;
  z-index: 5;
}
.sf .pdp-stage .pdp-preset {
  right: 4%;
  bottom: 13%;
  left: auto;
  top: auto;
  --rot: 5deg;
  z-index: 5;
}
/* Kaufpanel als Soft-Glass mit klarer Hierarchie */
.sf .pdp-world .buy {
  background: rgba(255, 248, 242, 0.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 28px;
  box-shadow: 0 30px 60px -36px rgba(23, 19, 24, 0.3);
  gap: 18px;
}
.sf .pdp-world .buy .h-l {
  font-size: clamp(30px, 3.6vw, 44px);
  letter-spacing: -0.025em;
}
.sf .buy .price {
  font: 800 clamp(30px, 3.4vw, 38px) / 1 var(--font-headline);
}
.sf .buy .buy-trust {
  margin: -4px 0 0;
  gap: 8px 16px;
}
.sf .buy .atc {
  width: 100%;
  min-height: 58px;
  font-size: 16px;
  box-shadow: 0 18px 30px -18px color-mix(in srgb, var(--p-primary) 70%, transparent);
}
.sf .buy .qty {
  background: rgba(255, 255, 255, 0.7);
}
.sf .pdp-world .buy .safety-inline {
  background: rgba(255, 255, 255, 0.55);
  border: 0;
}
/* Galerie-Thumbs: weiche Kacheln */
.sf .gallery button {
  border-radius: 18px;
  background: color-mix(in srgb, var(--s-light2) 24%, #fff8f2);
  border: 2px solid transparent;
}
.sf .gallery button[aria-current="true"] {
  border-color: var(--sf-ink);
  box-shadow: none;
}
/* Kapitel: Chips und Fakten statt reiner Textblöcke */
.sf .feel-chips {
  margin-top: 4px;
}
.sf .feel-chips .chip.on {
  background: color-mix(in srgb, var(--s-light1) 45%, #fff8f2);
  border-color: transparent;
  color: var(--sf-ink);
  cursor: default;
}
.sf .specs {
  display: grid;
  gap: 8px;
  background: none;
  padding: 0;
}
.sf .specs div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 12px;
  padding: 12px 16px;
  border: 0;
  border-radius: 16px;
  background: rgba(255, 248, 242, 0.85);
  box-shadow: 0 14px 30px -26px rgba(23, 19, 24, 0.3);
}
.sf .specs div.is-pending {
  background: rgba(255, 248, 242, 0.5);
  box-shadow: none;
  padding: 8px 16px;
}
.sf .pending-val {
  color: var(--sf-muted);
  font-style: italic;
  font-size: 13px;
}
.sf .pending-val::before {
  content: "· ";
}
.sf .material-facts {
  background: rgba(255, 248, 242, 0.8);
}
.sf .pdp .why article {
  background: rgba(255, 248, 242, 0.86);
}
.sf .pdp .text-panel {
  background: rgba(255, 248, 242, 0.84);
  border-radius: 28px;
}
.sf .pdp .frame.depth {
  border-radius: 32px;
  box-shadow: 0 40px 70px -40px rgba(23, 19, 24, 0.4);
}
@media (max-width: 899px) {
  .sf .pdp-stage {
    aspect-ratio: 1 / 1;
  }
  .sf .buy .atc {
    min-height: 54px;
  }
}
/* D4: kein Ambiente-Tablett mehr – die Bühne ist nur noch der weiche Glow
   hinter dem Cutout (siehe `.pdp-stage-bg` oben), zentriert statt im unteren
   Drittel. Hochformat-Cutouts deutlich größer als in A3b. */
.sf .pdp-stage[data-orientation="portrait"] .cutout-wrap {
  inset: auto 20% 20% 20%;
  height: 64%;
}
.sf .pdp-stage[data-orientation="portrait"] .contact-shadow {
  left: 30%;
  right: 30%;
  bottom: 16%;
  height: 7%;
}
.sf .pdp-stage[data-orientation="landscape"] .cutout-wrap {
  inset: 10% 6% 16%;
}

/* ==========================================================================
   H2 – Kaufbereich wie ein Top-Shop: Galerie mit vertikalen Thumbnails,
   Lightbox, Preis groß mit Streichpreis/Ersparnis, Varianten-Bildkacheln,
   Benefit-Chips, Vertrauensleiste mit Zahlungslogos, Sticky-ATC mobil.
   ========================================================================== */
/* ---------- Galerie: Thumbnails links (Desktop) / unten horizontal (Mobil) ---------- */
.sf .pdp-media.has-thumbs {
  display: grid;
  gap: 14px;
  align-items: start;
}
@media (min-width: 900px) {
  .sf .pdp-media.has-thumbs {
    grid-template-columns: 76px minmax(0, 1fr);
  }
  .sf .pdp-thumbs {
    flex-direction: column;
    flex-wrap: nowrap;
    max-height: min(76dvh, 700px);
    overflow-y: auto;
    scrollbar-width: none;
    padding: 4px 2px 12px;
  }
  .sf .pdp-thumbs::-webkit-scrollbar {
    display: none;
  }
}
@media (max-width: 899px) {
  .sf .pdp-media.has-thumbs .pdp-thumbs {
    order: 2;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 4px 4px 10px;
    margin-inline: -4px;
    scroll-snap-type: x proximity;
  }
  .sf .pdp-thumbs::-webkit-scrollbar {
    display: none;
  }
  .sf .pdp-thumbs button {
    scroll-snap-align: start;
    flex: none;
  }
}
.sf .pdp-thumbs button {
  position: relative;
  width: 68px;
  height: 68px;
  padding: 0;
  cursor: pointer;
  flex: none;
}
.sf .pdp-thumbs button.is-cutout img {
  object-fit: contain;
  padding: 8px;
}
.sf .pdp-thumbs .thumb-play {
  position: absolute;
  inset: auto 6px 6px auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(23, 19, 24, 0.78);
  color: #fff;
}
.sf .pdp-stage-col {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.sf .pdp-counter {
  justify-self: center;
  font-weight: 600;
}
/* Foto im Hauptbild: Button ohne Rahmen, weiche Maske bleibt (photo-frame) */
.sf .pdp-stage .photo-frame.photo-zoom {
  cursor: zoom-in;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
}
.sf .pdp-stage .photo-frame.photo-zoom:focus-visible {
  outline: 3px solid var(--sk-blue);
  outline-offset: 3px;
}
.sf .pdp-stage .stage-zoom,
.sf .pdp-stage .stage-nav {
  position: absolute;
  z-index: 6;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 248, 242, 0.88);
  box-shadow: 0 8px 20px -8px rgba(23, 19, 24, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.8);
  color: var(--sf-ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0.92;
  transition: transform 180ms ease, opacity 180ms ease;
}
.sf .pdp-stage .stage-zoom:hover,
.sf .pdp-stage .stage-nav:hover {
  transform: scale(1.06);
  opacity: 1;
}
.sf .pdp-stage .stage-zoom {
  right: 4%;
  bottom: 4%;
}
.sf .pdp-stage .stage-nav {
  top: 50%;
  transform: translateY(-50%);
}
.sf .pdp-stage .stage-nav:hover {
  transform: translateY(-50%) scale(1.06);
}
.sf .pdp-stage .stage-nav.prev {
  left: 2%;
}
.sf .pdp-stage .stage-nav.next {
  right: 2%;
}
@media (hover: hover) {
  .sf .pdp-stage .stage-nav {
    opacity: 0;
  }
  .sf .pdp-stage:hover .stage-nav,
  .sf .pdp-stage:focus-within .stage-nav {
    opacity: 0.92;
  }
}
.sf .pdp-stage.is-cutout .pdp-preset {
  bottom: 6%;
  right: auto;
  left: 3%;
  --rot: -4deg;
}

/* ---------- Lightbox ---------- */
.sf .lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: clamp(12px, 4vw, 48px);
  background: rgba(23, 19, 24, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: lb-in 220ms ease both;
}
@keyframes lb-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.sf .lightbox-inner {
  display: grid;
  gap: 10px;
  justify-items: center;
  max-width: min(1100px, 100%);
  max-height: 100%;
}
.sf .lightbox-media {
  max-width: 100%;
  max-height: min(84dvh, 900px);
  width: auto;
  height: auto;
  border-radius: 20px;
  object-fit: contain;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7);
  background: transparent;
}
.sf .lightbox-caption {
  color: rgba(255, 248, 242, 0.85);
  font-weight: 600;
}
.sf .lightbox-close,
.sf .lightbox-nav {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 248, 242, 0.14);
  color: #fff8f2;
  border: 1px solid rgba(255, 248, 242, 0.25);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.sf .lightbox-close:hover,
.sf .lightbox-nav:hover {
  background: rgba(255, 248, 242, 0.26);
}
.sf .lightbox-close:focus-visible,
.sf .lightbox-nav:focus-visible {
  outline: 3px solid var(--sk-butter, var(--sf-butter, #ffd84d));
  outline-offset: 2px;
}
.sf .lightbox-close {
  top: 16px;
  right: 16px;
}
.sf .lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
}
.sf .lightbox-nav.prev {
  left: 12px;
}
.sf .lightbox-nav.next {
  right: 12px;
}
@media (prefers-reduced-motion: reduce) {
  .sf .lightbox {
    animation: none;
  }
}

/* ---------- Kaufpanel ---------- */
.sf .pdp-world .buy {
  gap: 16px;
  padding: clamp(18px, 2.4vw, 28px);
}
.sf .buy .buy-hook {
  margin-top: 8px;
  font-size: 16px;
  color: rgba(23, 19, 24, 0.78);
}
.sf .buy .price-block {
  display: grid;
  gap: 4px;
}
.sf .buy .price-block .price-row {
  align-items: baseline;
  gap: 10px 12px;
}
.sf .buy .price-block .price {
  font: 800 clamp(32px, 3.6vw, 42px) / 1 var(--font-headline);
  letter-spacing: -0.02em;
}
.sf .buy .price-block .compare {
  font: 600 18px/1 var(--font-body);
  color: rgba(23, 19, 24, 0.55);
  text-decoration: line-through;
}
.sf .buy .saving {
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--sf-strawberry, #ff4f7b);
  color: #fff8f2;
  font: 800 12px/1 var(--font-body);
  letter-spacing: 0.02em;
}
/* Optionen: Legende mit gewähltem Wert, Bildkacheln mit Label */
.sf .buy .options legend {
  font: 600 13px/1.2 var(--font-body);
  color: rgba(23, 19, 24, 0.72);
  margin-bottom: 8px;
}
.sf .buy .options legend strong {
  color: var(--sf-ink);
  font-weight: 800;
}
.sf .vtiles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.sf .vtile {
  display: grid;
  gap: 6px;
  justify-items: center;
  width: 72px;
  padding: 6px 6px 8px;
  border-radius: 16px;
  border: 2px solid transparent;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 0 0 1px rgba(23, 19, 24, 0.08);
  cursor: pointer;
  font: 600 12px/1.2 var(--font-body);
  color: var(--sf-ink);
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1), border-color 160ms, box-shadow 160ms;
}
.sf .vtile:hover {
  transform: translateY(-2px);
}
.sf .vtile:active {
  transform: scale(1.03, 0.96);
}
.sf .vtile[aria-checked="true"] {
  border-color: var(--sf-ink);
  box-shadow: 0 10px 22px -14px rgba(23, 19, 24, 0.5);
  background: #fff;
}
.sf .vtile:focus-visible {
  outline: 3px solid var(--sk-blue);
  outline-offset: 2px;
}
.sf .vtile.is-out {
  opacity: 0.55;
}
.sf .vtile.is-out .vtile-media::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  height: 2px;
  background: rgba(23, 19, 24, 0.55);
  transform: rotate(-30deg);
}
.sf .vtile-media {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--p-surface-alt, #fff) 60%, #fff8f2);
}
.sf .vtile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sf .vtile-swatch {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(23, 19, 24, 0.12), 0 4px 10px -4px rgba(23, 19, 24, 0.4);
}
/* K2: Kachel ohne sauberes Variantenbild zeigt das Haupt-Cutout auf Cream (contain, nie
   ein Lieferantenbild mit Text) plus Farbpunkt der Variante unten rechts. */
.sf .vtile.is-fallback .vtile-media {
  background: color-mix(in srgb, var(--p-glow) 28%, #fff8f2);
}
.sf .vtile.is-fallback .vtile-media img {
  object-fit: contain;
  padding: 8px;
  box-sizing: border-box;
}
.sf .vtile-dot {
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(23, 19, 24, 0.35);
}
/* K2: Farbwelt folgt der Variante – Produkt-Wrapper und Page Scene morphen die
   Farb-Tokens in 500 ms (Reduced Motion: sofort). */
.sf .pdp.pstyle,
.sf .pdp .page-scene {
  transition:
    --p-primary 500ms ease,
    --p-glow 500ms ease,
    --p-accent 500ms ease,
    --s-g1 500ms ease,
    --s-g2 500ms ease,
    --s-g3 500ms ease,
    --s-light1 500ms ease,
    --s-light2 500ms ease,
    --s-fluid 500ms ease;
}
.sf .pdp .btn.primary,
.sf .pdp .sticker-preset i,
.sf .pdp .pdp-stage-bg {
  transition: background-color 500ms ease, border-color 500ms ease, box-shadow 500ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .sf .pdp.pstyle,
  .sf .pdp .page-scene,
  .sf .pdp .btn.primary,
  .sf .pdp .sticker-preset i,
  .sf .pdp .pdp-stage-bg {
    transition: none;
  }
}
.sf .vtile-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sf .buy .chip .swatch {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(23, 19, 24, 0.15);
}
.sf .buy .chip.is-out {
  opacity: 0.55;
  text-decoration: line-through;
}
.sf .buy .buy-qty-row {
  margin-top: -2px;
}
/* Benefit-Chips unter dem CTA */
.sf .benefit-chips {
  list-style: none;
  margin: -4px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sf .benefit-chips li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--p-glow) 30%, #fff8f2);
  font: 600 12.5px/1.2 var(--font-body);
  color: var(--sf-ink);
}
.sf .benefit-chips svg {
  color: var(--p-primary);
  flex: none;
}
/* Vertrauensleiste */
.sf .buy .trust-bar {
  display: grid;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(23, 19, 24, 0.1);
}
.sf .buy .trust-bar .buy-trust {
  margin: 0;
  gap: 8px 16px;
}
.sf .buy .pay-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.sf .buy .pay-row > .small {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: rgba(23, 19, 24, 0.72);
}
.sf .buy .pay-row .small svg {
  color: var(--p-primary);
}
.sf .pay-tiles {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}
/* Sticky-ATC mobil: Thumb + Variante + Preis */
.sf .sticky-atc {
  grid-template-columns: auto 1fr auto;
}
.sf .sticky-atc .sticky-thumb {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: cover;
  background: var(--p-surface-alt, #fff8f2);
}
.sf .sticky-atc .sticky-meta {
  display: grid;
  min-width: 0;
}
.sf .sticky-atc .sticky-meta strong {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Warum du es lieben wirst ---------- */
.sf .love-why {
  margin-bottom: 18px;
}
.sf .love-why article {
  padding: 16px 18px;
  gap: 8px;
  font: 600 14px/1.45 var(--font-body);
}
.sf .love-lead {
  margin-bottom: 12px;
}
.sf .love-more {
  margin-bottom: 14px;
  border-top: 0;
}
.sf .love-more summary {
  font-weight: 700;
  cursor: pointer;
}
.sf .love-more p {
  margin: 8px 0 0;
  color: rgba(23, 19, 24, 0.8);
}
/* Die Bühne liegt jetzt in einem Grid-Container (`.pdp-stage-col`): mit
   `margin-inline: auto` verliert sie dort das Stretch-Verhalten und schrumpft
   auf ihre Mindesthöhe (278×320px) – explizit volle Spaltenbreite. */
.sf .pdp-stage-col .pdp-stage {
  width: 100%;
  max-width: 560px;
}

/* Lieferung & Rückgabe: eine Fläche, zwei Spalten mit Icon */
.sf .ship-panel {
  display: grid;
  gap: 14px 28px;
  padding: 20px 24px;
}
@media (min-width: 720px) {
  .sf .ship-panel {
    grid-template-columns: 1fr 1fr;
  }
}
.sf .ship-panel article {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
}
.sf .ship-panel strong {
  display: block;
  font: 800 15px/1.2 var(--font-headline);
  margin-bottom: 4px;
}
.sf .ship-panel p {
  margin: 0;
}
.sf .love-panel {
  padding: clamp(20px, 3vw, 32px);
}
.sf .love-why article {
  padding: 14px 16px;
}
.sf .love-why .why-icon {
  width: 36px;
  height: 36px;
}

/* H2: Seitenhöhe (1440px ≤ 3.600px): engerer Abstand Welt → erstes Kapitel */
.sf .pdp-world {
  padding-bottom: clamp(12px, 2vw, 24px);
}

/* P1b: Kachel-Label darf umbrechen statt stumm abzuschneiden – bis 14 Zeichen bleibt es (per Breite) einzeilig,
   längere Labels („2er-Set · Ecke“) zeigen zwei Zeilen statt Ellipsis. Gilt auf allen Breiten (mobil 72px Basis). */
.sf .vtile-label {
  white-space: normal;
  text-align: center;
  line-height: 1.15;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
/* P1b: 84x84 Desktop, 72x72 mobil bleibt die Basisgröße aus der `.sf .vtile`-Regel oben. */
@media (min-width: 900px) {
  .sf .vtile {
    width: 84px;
  }
  .sf .vtile-media {
    width: 68px;
    height: 68px;
  }
}

/* H2: engere Taktung der stillen Kapitel (Seitenhöhe 1440 ≤ 3.600px) */
.sf .pdp .chapter.quiet {
  padding: clamp(24px, 3.5vw, 48px) 0;
}
.sf .pdp .chapter.quiet.pt-0 {
  padding-top: 0;
}
.sf .pdp .chapter-cross {
  padding-top: clamp(24px, 3.5vw, 48px);
}

/* H2: Zoom-Lightbox als natives <dialog> (Theme) – Overlay-Styles aus product-world.css (.lightbox) */
.sf .lightbox-dialog { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.sf .lightbox-dialog::backdrop { background: transparent; }
.sf .lightbox-dialog .lightbox { position: fixed; }

/* Radio-Chips (role=radio) markieren die Auswahl über aria-checked */
.sf .buy .chip[aria-checked="true"] {
  background: var(--sf-ink);
  color: #fff8f2;
  box-shadow: none;
}

/* H2: Feintaktung (Seitenhöhe 1440 ≤ 3.600px auch bei längerer H1-Copy) */
.sf .pdp .chapter.quiet {
  padding: clamp(20px, 3vw, 40px) 0;
}
.sf .pdp .chapter.quiet.pt-0 {
  padding-top: 0;
}
.sf .love-lead {
  font-size: 15.5px;
}
.sf .love-why article {
  padding: 12px 14px;
}
   Reservierungsleiste, Fortschrittsleiste mit Icon-Stufen AUF der Leiste (Labels darunter),
   kompakte Artikelzeilen (Thumb 64, Marke klein, Titel, Menge −1+, Preis rechts, Papierkorb),
   Streich-/Rabattdarstellung nur bei echtem Rabatt, „Kund*innen lieben auch“ mit kleinen
   schwarzen „Hinzufügen“-Buttons, Fuß mit Rabatt (rot), „Gesamt“ fett, Ink-Button
   „Auschecken • Betrag“ und zentrierten Zahlungslogos. Zeilen 64–72 px, Abstände 12–16 px. */
/* Höhere Spezifität (.drawer.cart-drawer-v2, 3 Klassen) statt .cart-drawer-v2 allein (2 Klassen),
   damit diese Struktur immer über der generischen .sf .drawer-Regel (storefront.css) gewinnt –
   unabhängig von der CSS-Bündelreihenfolge. Flex-Spalte statt Grid-Zeilen-Zählung: robust auch
   wenn Reservierung/Meilensteine/Cross-Sell je nach Zustand einzeln fehlen. */
.sf .drawer.cart-drawer-v2 {
  height: 100dvh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  color: var(--sf-ink);
}
.sf .cart-drawer-v2 > header,
.sf .cart-drawer-v2 > footer {
  flex: none;
}
.sf .drawer.cart-drawer-v2 > header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--sf-line);
}
.sf .cart-drawer-v2 .cart-title {
  margin: 0;
  font: 700 19px/1.2 var(--font-display, var(--font-body));
  letter-spacing: -0.01em;
}
.sf .cart-drawer-v2 .iconbtn {
  width: 36px;
  height: 36px;
}
.sf .cart-drawer-v2 .cart-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.sf .cart-drawer-v2 .cart-scroll .lines {
  flex: none;
  padding: 0 20px;
  display: block;
  overflow: visible;
}
.sf .cart-reservation {
  flex: none;
  background: var(--sf-ink);
  color: #fff8f2;
  font: 600 12.5px/1.4 var(--font-body);
  padding: 9px 20px;
  text-align: center;
}
.sf .cart-reservation.expired {
  background: #4a2230;
}

/* ---- Fortschritt: Icon-Stufen auf der Leiste ---- */
.sf .cart-milestones {
  flex: none;
  padding: 14px 20px 6px;
  display: grid;
  gap: 10px;
}
.sf .cart-progress-headline {
  margin: 0;
  font: 700 13px/1.35 var(--font-body);
  color: var(--sf-ink);
}
.sf .cart-progress-track-wrap {
  position: relative;
  /* Platz für Icon (28px) über/unter der Spur und Labels darunter; halbe Kreisbreite Rand,
     damit der Kreis mittig auf dem Endpunkt der Spur liegt */
  padding: 10px 0 24px;
  margin-inline: 14px;
}
.sf .cart-progress-track-wrap .cart-progress-track {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: var(--sf-line, #ece6df);
  overflow: hidden;
}
.sf .cart-progress-track-wrap .cart-progress-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--sf-ink);
  transition: width 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.sf .cart-milestone-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  left: 0;
  right: 0;
  top: 10px; /* = Oberkante der Spur */
  height: 8px;
  pointer-events: none;
}
.sf .cart-milestone-steps li {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
}
.sf .cart-milestone-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #fff;
  color: var(--sf-muted);
  box-shadow: inset 0 0 0 2px var(--sf-line, #ece6df);
}
.sf .cart-milestone-icon svg {
  width: 15px;
  height: 15px;
}
.sf .cart-milestone-steps li.reached .cart-milestone-icon {
  background: var(--sf-ink);
  color: #fff8f2;
  box-shadow: none;
}
.sf .cart-milestone-steps li.active .cart-milestone-icon {
  color: var(--sf-ink);
  box-shadow: inset 0 0 0 2px var(--sf-ink);
}
.sf .cart-milestone-label {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  font: 700 10px/1.2 var(--font-body);
  color: var(--sf-muted);
  white-space: nowrap;
}
.sf .cart-milestone-steps li.reached .cart-milestone-label,
.sf .cart-milestone-steps li.active .cart-milestone-label {
  color: var(--sf-ink);
}
.sf .cart-milestone-steps li.edge-right .cart-milestone-label {
  left: auto;
  right: 0;
  transform: none;
  text-align: right;
}
.sf .cart-milestone-steps li.edge-left .cart-milestone-label {
  left: 0;
  transform: none;
  text-align: left;
}

/* ---- Artikelzeilen ---- */
.sf .cart-drawer-v2 .line {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0; /* Zeile ≈ 84 px inkl. Abstand, Inhalt 64 px */
  border-bottom: 1px solid var(--sf-line);
}
.sf .cart-drawer-v2 .line img,
.sf .cart-drawer-v2 .line .thumb {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  object-fit: contain; /* Varianten-Cutouts liegen frei auf Cream, nie beschnitten */
  padding: 4px;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--p-glow, #ffeede) 35%, #fff8f2);
}
.sf .cart-line-body {
  min-width: 0;
  display: grid;
  gap: 2px;
  justify-items: start;
}
.sf .cart-line-brand {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font: 700 10px/1.2 var(--font-body);
  color: var(--sf-muted);
}
.sf .cart-line-title {
  font: 700 14px/1.25 var(--font-body);
  color: var(--sf-ink);
}
.sf .cart-line-variant {
  font: 500 12px/1.3 var(--font-body);
  color: var(--sf-muted);
}
.sf .cart-line-variant:empty {
  display: none;
}
.sf .cart-drawer-v2 .qty.cart-qty {
  margin-top: 6px;
  border-width: 1px;
}
.sf .cart-drawer-v2 .cart-qty button {
  width: 30px;
  height: 28px;
  font-size: 15px;
}
.sf .cart-drawer-v2 .cart-qty input {
  width: 30px;
  font-size: 13px;
}
.sf .cart-line-price {
  display: grid;
  justify-items: end;
  align-content: start;
  gap: 2px;
  text-align: right;
  font: 700 14px/1.25 var(--font-body);
  color: var(--sf-ink);
}
.sf .cart-line-strike {
  font-weight: 500;
  font-size: 12px;
  color: var(--sf-muted);
  text-decoration: line-through;
}
.sf .cart-line-saving {
  font: 700 11px/1.2 var(--font-body);
  color: #e0234f;
}
.sf .cart-line-discounted {
  color: #e0234f;
}
.sf .cart-line-remove {
  border: 0;
  background: none;
  padding: 4px;
  margin-top: 4px;
  color: var(--sf-muted);
  cursor: pointer;
  border-radius: 8px;
  line-height: 0;
}
.sf .cart-line-remove:hover {
  color: var(--sf-ink);
  background: var(--p-surface-alt, #ffeede);
}
.sf .cart-empty {
  display: grid;
  gap: 12px;
  justify-items: start;
  padding: 24px 0;
}

/* ---- Cross-Sell ---- */
.sf .cart-crosssell {
  flex: none;
  padding: 14px 20px 16px;
  display: grid;
  gap: 10px;
}
.sf .cart-crosssell h3 {
  margin: 0;
  font: 700 11px/1.2 var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sf-muted);
}
.sf .cart-crosssell-list {
  display: grid;
  gap: 10px;
}
.sf .cart-crosssell-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
.sf .cart-crosssell-item img,
.sf .cart-crosssell-item .thumb {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  object-fit: contain;
  padding: 3px;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--p-glow, #ffeede) 35%, #fff8f2);
}
.sf .cart-crosssell-meta {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.sf .cart-crosssell-meta strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font: 700 13px/1.25 var(--font-body);
}
.sf .cart-crosssell-meta .small {
  font-size: 12px;
}
.sf .cart-crosssell-add {
  border: 0;
  border-radius: 999px;
  background: var(--sf-ink);
  color: #fff8f2;
  font: 700 12px/1 var(--font-body);
  padding: 0 14px;
  height: 32px;
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform 120ms ease,
    background-color 160ms ease;
}
.sf .cart-crosssell-add:hover {
  background: #2c2530;
}
.sf .cart-crosssell-add:active {
  transform: scale(0.96);
}
.sf .cart-crosssell-add:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ---- Fuß ---- */
.sf .drawer.cart-drawer-v2 > footer {
  padding: 12px 20px 16px;
  border-top: 1px solid var(--sf-line);
  display: grid;
  gap: 8px;
  background: #fff;
}
.sf .cart-foot-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font: 500 13px/1.3 var(--font-body);
}
.sf .cart-foot-discount,
.sf .cart-foot-discount strong {
  color: #e0234f;
}
.sf .cart-foot-total {
  font-size: 15px;
}
.sf .cart-foot-total span,
.sf .cart-foot-total strong {
  font-weight: 800;
  color: var(--sf-ink);
}
.sf .btn.cart-checkout {
  width: 100%;
  justify-content: center;
  text-align: center;
  min-height: 52px;
  border-radius: 999px;
  background: var(--sf-ink);
  color: #fff8f2;
  font: 700 15px/1 var(--font-body);
  box-shadow: none;
  margin-top: 2px;
}
.sf .btn.cart-checkout:hover {
  background: #2c2530;
  transform: none;
}
.sf .cart-checkout.disabled {
  opacity: 0.5;
  pointer-events: none;
}
.sf .cart-payment-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 4px;
}
/* Weiße 44×28-Kachel mit 1px Rand, Logo mittig – wie in gängigen Shop-Fußzeilen. */
.sf .pay-tile {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 28px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid var(--sf-line, rgba(23, 19, 24, 0.14));
  flex: none;
}
.sf .pay-fallback {
  font: 700 9px/1 var(--font-body);
  color: var(--sf-ink);
  padding: 0 4px;
  text-align: center;
}
/* Shopify-Theme: `payment_type_svg_tag` liefert die offiziellen Icons direkt –
   nur in dieselbe 44×28-Kachel wie im Studio-Preview einpassen. */
.sf .pay-tile .pay-badge-svg {
  max-width: 34px;
  max-height: 20px;
  width: auto;
  height: auto;
  display: block;
}
.sf .checkout-shell {
  padding: 24px 0 72px;
}
.sf .checkout-topbar {
  display: grid;
  gap: 10px;
  margin-bottom: 22px;
}
.sf .checkout-grid {
  display: grid;
  gap: clamp(24px, 4vw, 40px);
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.9fr);
  align-items: start;
}
.sf .checkout-form {
  display: grid;
  gap: 26px;
}
.sf .checkout-fieldset {
  border: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.sf .field {
  display: grid;
  gap: 6px;
}
.sf .field > span:first-child {
  color: var(--sf-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font: 700 10.5px/1 var(--font-body);
}
.sf .field input,
.sf .field select {
  height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(23, 19, 24, 0.12);
  background: #fff;
  padding: 0 14px;
  font: 500 14.5px/1 var(--font-body);
  color: var(--sf-ink);
  width: 100%;
  appearance: none;
}
.sf .field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--sf-muted) 50%), linear-gradient(135deg, var(--sf-muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 15px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.sf .field input:focus-visible,
.sf .field select:focus-visible {
  outline: 2px solid var(--sf-ink);
  outline-offset: 2px;
}
.sf .field.has-error input,
.sf .field.has-error select {
  border-color: #e0234f;
}
.sf .field-error {
  display: block;
  margin-top: -2px;
  color: #e0234f;
  font: 600 12px/1.3 var(--font-body);
}
.sf .grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.sf .grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.sf .option-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(23, 19, 24, 0.12);
  border-radius: 14px;
  padding: 12px 16px;
  cursor: pointer;
  font: 600 13.5px/1.3 var(--font-body);
  background: #fff;
}
.sf .option-card input[type="radio"] {
  accent-color: var(--sf-ink);
  width: 16px;
  height: 16px;
  flex: none;
}
.sf .option-card:has(input:checked) {
  border-color: var(--sf-ink);
  background: var(--p-surface-alt, #ffeede);
}
.sf .option-card .pay-option {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sf .checkout-summary {
  border-radius: 20px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--sf-line);
  display: grid;
  gap: 14px;
  position: sticky;
  top: 24px;
}
.sf .checkout-summary-lines {
  display: grid;
  gap: 8px;
}
.sf .checkout-summary-totals {
  border-top: 1px solid var(--sf-line);
  padding-top: 10px;
  display: grid;
  gap: 6px;
}
.sf .checkout-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.sf .checkout-confirmation {
  padding: 32px 0 64px;
  max-width: 640px;
  display: grid;
  gap: 16px;
}
@media (max-width: 860px) {
  .sf .checkout-grid {
    grid-template-columns: 1fr;
  }
  .sf .checkout-summary {
    position: static;
    order: 2;
  }
  .sf .checkout-form {
    order: 1;
  }
}
@media (max-width: 480px) {
  .sf .grid2,
  .sf .grid3 {
    grid-template-columns: 1fr;
  }
}
/* ---- Theme-spezifische Ergänzungen (Shopify) ---- */
/* Basis-Reset: im Studio steht er in globals.css, die nicht Teil des Themes ist.
   Ohne ihn bleibt der 8-px-Standardrand des Browsers stehen – sichtbar als heller Balken
   oben und an beiden Seiten der Seite. */
*,
*::before,
*::after { box-sizing: border-box; }
html,
body {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

/* Schriften: im Studio kommen diese Variablen aus globals.css, die nicht Teil des Themes ist.
   Ohne sie fällt Shopify auf die Serifen-Standardschrift des Browsers zurück. */
.sf,
.cart-drawer,
.cart-drawer-backdrop {
  --font-headline: "Sora", "Manrope", system-ui, sans-serif;
  --font-body: "Manrope", "Inter", system-ui, sans-serif;
  --font-display: "Sora", "Manrope", system-ui, sans-serif;
}
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 100; background: #171318; color: #fff8f2; padding: 10px 14px; border-radius: 10px; }
.skip-link:focus { left: 8px; }
.sf .header-left { display: flex; align-items: center; gap: 6px; }
.sf .show-mobile { display: inline-grid; }
@media (min-width: 900px) { .sf .show-mobile { display: none; } }
.sf .mobile-menu { display: grid; gap: 4px; padding: 8px 16px 14px; border-top: 1px solid var(--sf-line); font: 700 16px/1.4 var(--font-body); }
.sf .mobile-menu[hidden] { display: none; }
.sf .wordmark { height: 26px; width: auto; }
.sf .block { display: block; }
.sf .bold { font-weight: 700; }
.sf .m-0 { margin: 0; }
.sf .mt-8 { margin-top: 8px; } .sf .mt-10 { margin-top: 10px; } .sf .mt-12 { margin-top: 12px; } .sf .mt-18 { margin-top: 18px; }
.sf .mb-8 { margin-bottom: 8px; } .sf .mb-12 { margin-bottom: 12px; } .sf .mb-14 { margin-bottom: 14px; } .sf .mb-16 { margin-bottom: 16px; } .sf .mb-18 { margin-bottom: 18px; } .sf .mb-20 { margin-bottom: 20px; }
.sf .pt-0 { padding-top: 0; }
.sf .narrow { max-width: 760px; } .sf .narrow-l { max-width: 820px; }
.sf .center { text-align: center; display: grid; justify-items: center; gap: 12px; }
.sf .center .illus { width: 220px; }
.sf .underline { text-decoration: underline; }
.sf .row-between { display: flex; justify-content: space-between; align-items: center; }
.sf .row-gap { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.sf .abs-tl { position: absolute; top: 12px; left: 12px; }
.sf .small-title { font-size: 14px; }
.sf .why.two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 719px) { .sf .why.two { grid-template-columns: 1fr; } }
.sf .benefits { margin-top: 12px; padding-left: 18px; line-height: 1.6; }
.sf .rte p { margin: 0 0 10px; }
.sf .rte ul { padding-left: 18px; }
.sf .clip-caption { position: absolute; left: 10px; bottom: 10px; }
.sf .qty-input { width: 64px; min-height: 36px; border-radius: 10px; border: 2px solid var(--sf-line); padding: 0 8px; font: 700 14px/1 var(--font-body); }
.sf .pagination { display: flex; gap: 8px; justify-content: center; margin-top: 24px; font-weight: 700; }
/* Produktwelt im Theme: Hero-Section (Full-Bleed-Welt) + Kaufbereich als eigene Section, die auf Desktop in die Welt hineinragt */
.sf .pdp-hero-wrap .pdp-top { display: block; }
.sf .pdp-hero-wrap .pdp-world { --pdp-world-h: auto; }
.sf .pdp-buy-wrap { position: relative; z-index: 3; }
@media (min-width: 900px) {
  .sf .pdp-hero-wrap .pdp-world { height: min(88dvh, 920px); box-sizing: border-box; }
  .sf .pdp-hero-wrap .pdp-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; }
  .sf .pdp-buy-wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; margin-top: calc(-1 * min(88dvh, 920px) + clamp(16px, 3vw, 40px)); pointer-events: none; }
  .sf .pdp-buy-wrap > .buy { grid-column: 2; pointer-events: auto; }
  .sf .pdp-buy-wrap .buy { background: rgba(255, 248, 242, 0.88); border-radius: 24px; padding: clamp(16px, 2.5vw, 28px); border: 1px solid rgba(255, 255, 255, 0.6); }
}
.sf .drawer[hidden], .sf .drawer-backdrop[hidden] { display: none; }
.sf .shopify-payment-button { margin-top: 8px; }
.sf .shopify-payment-button__button--unbranded { border-radius: 999px !important; min-height: 52px !important; font: 700 15px/1 var(--font-body) !important; background: var(--sf-ink) !important; }
.sf .shopify-payment-button__more-options { color: var(--sf-muted) !important; font: 600 13px/1 var(--font-body) !important; }
/* Theme-Fallback: Blasen-Cluster ohne JS (statisches SVG) bleibt sichtbar; Canvas erst nach Start */
.sf .bubble-layer .bubble-canvas[hidden] { display: none; }
.sf .portal-grid .portal { text-decoration: none; }

/* Im Theme blenden Liquid und JS Elemente über das hidden-Attribut aus (z. B. Streichpreis und
   Sparen-Hinweis ohne Aktionspreis). Klassenregeln mit eigenem display schlagen den Browser-Standard,
   deshalb setzt das Theme hidden verbindlich durch. */
[hidden] { display: none !important; }

/* Header: klebt oben. Die Shopify-Section um den Header ist nur so hoch wie der Header selbst –
   sticky am Header allein greift deshalb nicht. Die Section klebt, JS blendet sie beim
   Runterscrollen aus und beim Hochscrollen wieder ein. */
.shopify-section:has(> .header) {
  position: sticky;
  top: 0;
  z-index: 40;
  transition: transform 0.28s ease;
  will-change: transform;
}
.shopify-section.is-header-hidden { transform: translateY(-100%); }
.sf .header { position: relative; }
@media (prefers-reduced-motion: reduce) { .shopify-section:has(> .header) { transition: none; } }

/* Sprachwahl */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sf .lang-form { display: inline-flex; margin: 0 4px 0 0; }
.sf .lang-select {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--sf-line);
  background: transparent;
  border-radius: 999px;
  padding: 7px 12px;
  font: 700 12px/1 var(--font-body);
  letter-spacing: 0.04em;
  color: inherit;
  cursor: pointer;
}
.sf .lang-select:focus-visible { outline: 2px solid var(--sf-ink); outline-offset: 2px; }

/* Farbwelt folgt der gewählten Variante: sanfter Übergang */
.sf .pdp-hero-wrap, .sf .pdp-buy-wrap, .sf .page-scene { transition: background-color 0.5s ease; }

/* Bundles & Upsell */
.sf .bundles-showcase .bundles-grid { position: relative; z-index: 2; }
.sf .nav-bundles { font-weight: 800; }
.sf .bundle-choices { display: grid; gap: 10px; padding: 14px; border-radius: 18px; background: color-mix(in srgb, var(--p-surface-alt, #fff3e6) 70%, #fff); margin: 4px 0 12px; }
.sf .bundle-choice { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; }
.sf .bundle-choice-media img { width: 52px; height: 52px; object-fit: contain; }
.sf .bundle-choice-body { display: grid; gap: 4px; }
.sf .bundle-choice-title { font: 700 14px/1.2 var(--font-body); color: inherit; text-decoration: none; }
.sf .bundle-choice-select, .sf .upsell-select { width: 100%; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--sf-line); background: #fff; font: 600 13px/1.2 var(--font-body); color: inherit; }
.sf .upsell-3for2 { display: grid; gap: 12px; margin-top: 14px; padding: 16px; border-radius: 20px; border: 2px dashed color-mix(in srgb, var(--p-primary, #ff4f7b) 55%, transparent); background: color-mix(in srgb, var(--p-primary, #ff4f7b) 8%, #fff); }
.sf .upsell-head { display: grid; gap: 2px; }
.sf .upsell-head strong { font: 800 17px/1.2 var(--font-headline); }
.sf .upsell-slots { display: grid; gap: 10px; }
.sf .upsell-slot { display: grid; gap: 4px; }
.sf .upsell-3for2.needs-choice .upsell-select:invalid, .sf .upsell-3for2.needs-choice .upsell-select { border-color: var(--p-primary, #ff4f7b); }
/* Wert passt nicht zur übrigen Auswahl: sichtbar abgeschwächt, bleibt klickbar und stellt die Auswahl passend um */
.sf .vtile.is-unavailable, .sf .chip.is-unavailable { opacity: 0.4; }

/* Spotlight-Karten auf der Startseite: Preis und Streichpreis wie in der Produktkarte */
.sf .spot-meta .card-price-row { display: inline-flex; align-items: baseline; gap: 8px; }
.sf .spot-meta .card-price-text { font: 800 18px/1 var(--font-headline); }
.sf .spot-meta .card-compare { font: 600 14px/1 var(--font-body); text-decoration: line-through; opacity: 0.6; }

/* Laufleiste durchgehend: keine hellen Seitenränder, keine Verlaufsbänder, Trenner mit Abstand */
.sf .marquee { padding: 0; }
.sf .marquee::before, .sf .marquee::after { display: none; }
.sf .marquee-shell { border-radius: 0; box-shadow: none; padding: 13px 0; letter-spacing: 0.03em; }
.sf .marquee-track { gap: 0; padding-right: 0; }
.sf .mq-sep { display: inline-block; margin: 0 22px; font-size: 11px; opacity: 0.55; vertical-align: 1px; }

/* Karten: Squeeze-Foto auch beim Drücken auf Touch-Geräten */
.sf .card.has-hover.is-pressing .media .card-hover { opacity: 1; transform: none; }
.sf .card.has-hover.is-pressing .media img.cutout-img { opacity: 0; }

/* Seitenauswahl */
.sf .pagination { display: block; margin: 40px 0 8px; }
.sf .pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.sf .pager-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 46px; padding: 0 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.82); color: var(--p-ink, #1f1a2e); font-weight: 800; font-size: 15px; text-decoration: none; box-shadow: 0 6px 18px rgba(60, 40, 90, 0.10), inset 0 0 0 1px rgba(60, 40, 90, 0.08); transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; }
.sf a.pager-btn:hover { transform: translateY(-2px); background: #fff; box-shadow: 0 10px 24px rgba(60, 40, 90, 0.16), inset 0 0 0 1px rgba(60, 40, 90, 0.10); }
.sf .pager-btn.is-current { background: var(--p-primary, #8b5cf6); color: #fff; box-shadow: 0 10px 24px rgba(60, 40, 90, 0.22); }
.sf .pager-step { padding: 0; width: 46px; }
.sf .pager-btn.is-disabled { opacity: 0.35; box-shadow: inset 0 0 0 1px rgba(60, 40, 90, 0.08); }
.sf .pager-gap { padding: 0 4px; font-weight: 800; opacity: 0.5; }

/* Runde 5 */
/* Unter kurzen Seiten keine helle Fläche unter dem Footer */
html { background: #171318; }
body.sf { background-color: var(--sf-bg, #fff8f2); }

/* PayPal-Button: gleiche Wirkung wie „In den Warenkorb“ */
.sf .btn.paypal-atc { width: 100%; justify-content: center; margin-top: 10px; background: #ffc439; color: #111; border: 0; box-shadow: none; font-weight: 600; gap: 6px; }
.sf .btn.paypal-atc:hover { background: #f5b72a; }
.sf .btn.paypal-atc[disabled] { opacity: 0.5; }
.sf .pp-word { font-style: italic; font-weight: 800; font-size: 1.12em; letter-spacing: -0.01em; }
.sf .pp-word b { color: #003087; font-weight: 800; }
.sf .pp-word i { color: #009cde; font-style: italic; }
.sf .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Footer: KI-Hinweis grau */
.sf .footer .legal-ai { display: inline-block; margin-top: 6px; color: rgba(255, 248, 242, 0.5); }

/* Kontaktseite */
.sf .page-main { min-height: 50vh; }
.sf .contact-form { display: grid; gap: 14px; margin-top: 24px; max-width: 640px; }
.sf .contact-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.sf .field { display: grid; gap: 6px; font-weight: 600; font-size: 14px; }
.sf .field input, .sf .field textarea { font: inherit; font-weight: 400; padding: 12px 16px; border-radius: 16px; border: 1px solid var(--sf-line); background: rgba(255, 255, 255, 0.85); color: var(--sf-ink); }
.sf .field input:focus, .sf .field textarea:focus { outline: 2px solid var(--sf-strawberry); outline-offset: 1px; }
.sf .contact-form .btn { justify-self: start; }
.sf .form-note { padding: 12px 16px; border-radius: 14px; margin: 0; }
.sf .form-note.ok { background: rgba(115, 229, 176, 0.25); }
.sf .form-note.err { background: rgba(255, 79, 123, 0.18); }

/* Hero: Fortschrittsbalken bis zum nächsten Produkt */
.sf .hero-progress { width: min(320px, 100%); height: 4px; margin-top: 12px; border-radius: 999px; background: rgba(23, 19, 24, 0.12); overflow: hidden; }
.sf .hero-progress span { display: block; height: 100%; background: var(--sf-ink); transform: scaleX(0); transform-origin: left center; border-radius: inherit; }

/* Runde 6 */
.sf .hero-select { position: relative; }
.sf .hero-select .hero-progress { position: absolute; left: 48px; right: 48px; bottom: -12px; width: auto; height: 3px; margin: 0; }

/* Runde 7 */
.sf .footer .legal a.legal-quiet { color: inherit; text-decoration: none; }
.sf .footer .legal a.legal-quiet:hover { text-decoration: underline; }