/* concept-c4-apple-v2 — Apple-Stil in serioeser Farbwelt (tiefes Gruen + warme Neutrals),
   Original-Hero-Struktur (Desktop-Gallery), hipilates-inspirierte Overlay-Karten & Badge-Pills.
   R3.1: Tangent-Webfont zurueck (400/700, wie Original main-beta5-b.css). Kein Blau. */

[hidden]{display:none!important}

/* R3.1: Tangent 400/700 (Original-Schriften, font-display:swap) */
@font-face{
  font-family:'Tangent';
  src:url(../fonts/tangent-light.woff2) format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Tangent';
  src:url(../fonts/tangent-medium.woff2) format('woff2');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

:root{
  --ink:#1B211E;            /* Text, fast-schwarz mit minimalem Gruenstich */
  --ink-2:#5B635E;          /* Sekundaertext */
  --paper:#FFFFFF;
  --alt:#F6F5F2;            /* warm-neutrale Wechselflaeche */
  --hairline:rgba(0,0,0,.08);
  --accent:#265B50;         /* EINZIGER Akzent: tiefes, serioeses Gruen */
  --accent-deep:#1A4038;    /* Topbar, Hover-Vertiefung */
  --accent-tint:#E9F1EE;    /* gefuellte Badge-Pills, Selected-Hauch, Ersparnis-Pill */
  --accent-light:#BCE3D8;   /* R8.1: heller Kicker-Akzent auf dunklen Overlay-Cards.
                               Farbstudie 22.07. auf den ECHTEN Karten (screenshots_c4/
                               r8_color_*): Betreiber-Vorschlag #ABFFE1 hue-identisch zu
                               --accent (159 Grad) aber S~100% -> Neon-Wirkung; #CDEBDC bei
                               11px kaum von Weiss unterscheidbar; #BCE3D8 = ruhiges
                               Salbei-Mint, 15.4:1 gegen die dunkelste Kicker-Zone. */
  --cta:#172621;            /* Primaer-Buttons: sehr dunkles Gruen-Schwarz */
  --cta-hover:#233530;
  --error:#C9463D; --disabled:#D6DAD6;
  --r-btn:12px; --r-card:16px; --r-media:20px; --r-pill:999px;
  --shadow-pop:0 20px 48px rgba(0,0,0,.10);   /* nur Modal/Sticky */
  --maxw:1200px; --pad:22px; /* D1: EINE kanonische Containerbreite fuer die ganze Seite */
  --focus-ring:rgba(38,91,80,.3);
  --font:"Tangent",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font);
  font-size:17px;
  line-height:1.5;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
a{color:var(--accent)}
button,input,summary,select{font-family:inherit}
h1,h2,h3,p{margin:0}
summary{list-style:none}
summary::-webkit-details-marker{display:none}
[id]{scroll-margin-top:64px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}
@media print{
  .site-topbar,.site-header__cart,.mobile-sticky-cta,.cart-backdrop,.cart-modal{display:none}
}

/* ---------- Preis-Flacker-Gate ---------- */
body.sb-fixed-bundle-static:not(.sb-runtime-ready) #priceNow,
body.sb-fixed-bundle-static:not(.sb-runtime-ready) #priceOld,
body.sb-fixed-bundle-static:not(.sb-runtime-ready) #saveText,
body.sb-fixed-bundle-static:not(.sb-runtime-ready) #ctaPriceText,
body.sb-fixed-bundle-static:not(.sb-runtime-ready) #ctaOldPriceText,
body.sb-fixed-bundle-static:not(.sb-runtime-ready) #ctaDiscount,
body.sb-fixed-bundle-static:not(.sb-runtime-ready) #mobileCtaNow,
body.sb-fixed-bundle-static:not(.sb-runtime-ready) #mobileCtaOld,
body.sb-fixed-bundle-static:not(.sb-runtime-ready) [data-kit-now],
body.sb-fixed-bundle-static:not(.sb-runtime-ready) [data-kit-old],
body.sb-fixed-bundle-static:not(.sb-runtime-ready) .kit-card__per{
  visibility:hidden;
}

/* ---------- Utilities ---------- */
.sr-only,
.c4-sr,
.c4-qty-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.c4-inner{max-width:var(--maxw);margin:0 auto}
.c4-section{padding:88px var(--pad)}
.c4-section--alt{background:var(--alt)}
.c4-center{text-align:center}

.c4-eyebrow{
  font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;color:var(--accent);
}
.c4-h2{
  font-size:clamp(26px,5vw,40px);line-height:1.1;font-weight:700;
  letter-spacing:-0.01em;margin:12px 0 14px;
}
.c4-sub{font-size:17px;color:var(--ink-2);margin:0 0 18px}
.c4-closer{font-size:19px;font-weight:700;letter-spacing:-0.01em;margin-top:26px}
.footnote{font-size:12px;color:var(--ink-2);margin-top:18px}

.c4-section-head{
  text-align:center;
  max-width:56ch;
  margin:0 auto 52px;
}
.c4-section-head .c4-sub{margin-bottom:0}
.c4-center>.c4-sub{max-width:56ch;margin-left:auto;margin-right:auto}

.c4-pill{
  display:inline-block;
  background:var(--accent-tint);color:var(--accent);
  font-weight:700;
  padding:2px 12px;border-radius:var(--r-pill);
}

/* ---------- Buttons ---------- */
.cta-primary,
.mobile-sticky-button,
.cart-checkout{
  display:flex;align-items:center;justify-content:center;
  width:100%;min-height:54px;padding:0 28px;
  background:var(--cta);color:#fff;
  font-size:17px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;
  border:0;border-radius:var(--r-btn);
  cursor:pointer;text-decoration:none;text-align:center;
  transition:background .15s ease,transform .1s ease;
}
.cta-primary:hover,
.mobile-sticky-button:hover,
.cart-checkout:hover{background:var(--cta-hover)}
.cta-primary:active,
.mobile-sticky-button:active,
.cart-checkout:active{transform:scale(.99)}
.cta-primary:focus-visible,
.mobile-sticky-button:focus-visible,
.cart-checkout:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.cta-primary:disabled,
.cart-checkout:disabled{background:var(--disabled);cursor:not-allowed;transform:none}

.support-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 26px;
  background:transparent;color:var(--accent);
  font-size:17px;font-weight:700;line-height:1.2;
  border:1.5px solid var(--accent);border-radius:var(--r-btn);
  cursor:pointer;text-decoration:none;text-align:center;
  transition:background .15s ease,color .15s ease,transform .1s ease;
}
.support-btn:hover{background:var(--accent-tint)}
.support-btn:active{transform:scale(.99)}
.support-btn:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}

/* ---------- Topbar (gefuellt, wie hipilates) ---------- */
.site-topbar{background:var(--accent-deep)}
.site-topbar__inner{
  max-width:var(--maxw);margin:0 auto;height:30px;
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;
}
.site-topbar__icon{width:12px;height:12px;flex:0 0 auto;color:#fff}

/* ---------- Header (Glas, sticky — W2) ---------- */
.site-header{
  position:sticky;top:0;z-index:900;
  background:rgba(255,255,255,.8);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--hairline);
}
.site-header__inner{
  max-width:var(--maxw);margin:0 auto;height:52px;padding:0 var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.site-header__brand{display:flex;align-items:baseline;gap:8px;text-decoration:none}
.site-header__brand img{width:124px;height:18px;display:block}
.site-header__tagline{font-size:12px;color:var(--ink-2)}
.site-header__cart{
  position:relative;height:36px;padding:0 14px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.6);border:1px solid var(--hairline);border-radius:var(--r-pill);
  cursor:pointer;
  transition:background .15s ease;
}
.site-header__cart:hover{background:#fff}
.site-header__cart img{width:18px;height:18px;display:block}
.site-header__cart:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.site-header__count{
  position:absolute;top:-6px;right:-4px;
  min-width:18px;height:18px;padding:0 5px;
  display:grid;place-items:center;
  background:var(--accent);color:#fff;
  font-size:12px;font-weight:700;border-radius:var(--r-pill);
}

/* ---------- Breadcrumb ---------- */
.intro-breadcrumb{
  /* D1: Inhaltsbreite = kanonische --maxw (Padding kommt obendrauf, wie .c4-inner in .c4-section) */
  max-width:calc(var(--maxw) + 2*var(--pad));margin:0 auto;
  padding:14px var(--pad) 0;
  font-size:12px;font-weight:400;letter-spacing:.08em;color:var(--ink-2);text-transform:uppercase;
  text-align:left;
}
@media (max-width:767px){
  /* W1: Breadcrumb mobil versteckt (bleibt im DOM) */
  .intro-breadcrumb{display:none}
  /* M1: BESTSELLER-Badge mobil ausblenden (DOM/Text bleibt) */
  .carousel-badge{display:none}
}

/* ---------- INTRO (Original-Struktur) ---------- */
.intro{padding:0}
.intro-grid{display:block}
.intro-details{padding:18px var(--pad) 0;background:transparent;border:0}

.carousel{position:relative}
.carousel-badge{
  position:absolute;top:12px;left:12px;z-index:5;
  background:var(--accent);color:#fff;
  font-size:12px;font-weight:700;letter-spacing:.08em;
  padding:5px 12px;border-radius:var(--r-pill);
  pointer-events:none;
}
.carousel-track{
  display:flex;gap:8px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.carousel-track::-webkit-scrollbar{display:none}
.carousel-track .slide{flex:0 0 100%;scroll-snap-align:center;min-width:0}
.media{position:relative;overflow:hidden;background:var(--alt)}
.ratio{position:relative;padding-top:125%;width:100%}
.ratio>img,.ratio>iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ratio>iframe{background:transparent;z-index:3}

/* R15.2 (ersetzt R14.5): Mobile (<768) Anzeigereihenfolge = das, was die
   Desktop-Rail ZEIGT. Die eingefrorene desktop-sticky-gallery.js remappt
   die Thumbs fest via desktopOrder=[1,0,3,8,4,5,2,6,7,9] (dort Z.16,
   verifiziert) — der Betreiber-Referenzpunkt ist diese ANGEZEIGTE
   Reihenfolge, nicht die DOM-Reihenfolge. CSS order bildet sie 1:1 nach:
   Slide n (DOM, 1-basiert) bekommt order = Rail-Position seines Index.
   Rail-Sequenz (DOM-Slides, 1-basiert): 2,1,4,9,5,6,3,7,8,10.
   Thumbbar (concept-c4.js) sortiert nach offsetLeft und folgt damit
   automatisch; Klick-Scroll ist offsetLeft-basiert (order-sicher).
   data-initial-index="1" bleibt im DOM (main-beta5-b.js zentriert
   DOM-Slide 2 = Showcase) — unter dieser order das ERSTE Bild
   (Rail-Position 0), Startbild damit beidseitig identisch. */
@media (max-width:767px){
  #gallery-track>.slide:nth-child(1){order:1}
  #gallery-track>.slide:nth-child(2){order:0}
  #gallery-track>.slide:nth-child(3){order:6}
  #gallery-track>.slide:nth-child(4){order:2}
  #gallery-track>.slide:nth-child(5){order:4}
  #gallery-track>.slide:nth-child(6){order:5}
  #gallery-track>.slide:nth-child(7){order:7}
  #gallery-track>.slide:nth-child(8){order:8}
  #gallery-track>.slide:nth-child(9){order:3}
  #gallery-track>.slide:nth-child(10){order:9}
}

/* D12: Hero-Video laedt erst auf Klick/Anwahl — ohne src faengt das iframe keine
   Klicks ab (Poster/Play bleiben klickbar); nach dem Laden Overlay ausblenden. */
.intro .slide .ratio>iframe:not([src]){pointer-events:none}
.slide.c4-video-loaded .c4-play,
.slide.c4-video-loaded .c4-video-poster{opacity:0;transition:opacity .3s ease .3s}

/* Video-Poster (C1-Muster) */
.c4-video-poster{z-index:1}
.ratio>.c4-video-poster,
.vidbox>.c4-video-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vidbox{position:relative;background:var(--alt);border-radius:var(--r-media);overflow:hidden}
.vidbox iframe{z-index:3}
.c4-play{
  position:absolute;top:50%;left:50%;z-index:2;
  width:56px;height:56px;margin:-28px 0 0 -28px;
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border:1px solid var(--hairline);border-radius:50%;
}
.c4-play::after{
  content:"";position:absolute;top:50%;left:50%;
  transform:translate(-42%,-50%);
  border-style:solid;border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent var(--ink);
}

/* Mobile Thumbnail-Leiste (W1) */
.c4-thumbbar{
  display:flex;gap:8px;
  overflow-x:auto;
  padding:10px var(--pad) 4px;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.c4-thumbbar::-webkit-scrollbar{display:none}
.c4-thumbbar:empty{display:none}
.c4-thumb{
  position:relative;
  flex:0 0 auto;width:64px;height:64px;padding:0;
  border:1.5px solid var(--hairline);border-radius:10px;
  overflow:hidden;background:var(--alt);cursor:pointer;
  transition:border-color .15s ease;
}
.c4-thumb img{width:100%;height:100%;display:block;object-fit:cover}
.c4-thumb.is-active{border-color:var(--accent)}
.c4-thumb:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.c4-thumb--video::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.22));
  pointer-events:none;
}
.c4-thumb__play{
  position:absolute;left:50%;top:50%;z-index:1;
  width:20px;height:20px;border-radius:50%;
  background:rgba(255,255,255,.92);
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.c4-thumb__play::before{
  content:"";position:absolute;top:50%;left:50%;
  transform:translate(-38%,-50%);
  border-top:4px solid transparent;border-bottom:4px solid transparent;
  border-left:6px solid var(--ink);
}

/* ---------- Hero-Details (rechte Spalte) — D3: Rhythmus 20–28px statt gequetscht ---------- */
.rating{margin-top:6px;text-align:left}
.rating-row{display:inline-flex;align-items:center;gap:8px;line-height:1;color:var(--ink);flex-wrap:wrap}
.stars{display:inline-flex;align-items:center;gap:2px}
.star{width:16px;height:16px;color:var(--accent);display:block}
.rating-score{font-size:14px;font-weight:700;white-space:nowrap}
.reviews{font-size:14px;color:var(--ink-2)}
.rating-separator{color:var(--ink-2);font-size:14px}

.headline-eyebrow{
  font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  /* R4.2: Abstand Sterne <-> Eyebrow minimal verringert (22px -> 17px, -5px; A+B, mobil+desktop) */
  color:var(--accent);margin-top:17px;
}
/* R4.3: initiale CSS-clamp konservativ (7vw statt 30px-Floor), damit der nowrap-Span
   schon vor dem JS-Fitting praktisch passt; concept-c4.js verfeinert nach Font-Load/Resize.
   Messbasis: "Professionelle Zahnaufhellung" (Tangent 700) = ~12.27px Breite pro Font-px. */
.headline{
  font-size:clamp(22px,7vw,44px);line-height:1.06;font-weight:700;
  letter-spacing:-0.01em;margin:14px 0 16px;text-align:left;
}
.c4-nowrap{white-space:nowrap}
.subhead{font-size:17px;color:var(--ink-2);margin:0 0 20px;text-align:left}

.buy{text-align:left}
.price-row{
  display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;
  margin:20px 0 0;padding:16px 0;
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
}
.price-old{font-size:14px;color:var(--ink-2);text-decoration:line-through}
.price-now{font-size:28px;font-weight:700;letter-spacing:-0.01em;line-height:1}
.save{
  font-size:12px;font-weight:700;color:var(--accent);
  background:var(--accent-tint);border-radius:var(--r-pill);padding:5px 12px;
}
/* R5.2: Hero-Preis mobil ~14% kleiner (28px -> 24px; Desktop unveraendert 28px).
   Streichpreis (14px) / Ersparnis-Badge (12px) bleiben proportional passend;
   Baseline-Ausrichtung weiter ueber align-items:center der .price-row. */
@media (max-width:767px){
  .price-now{font-size:24px}
}

/* D2: Hero-Benefits EINE Spalte, luftig (12–14px Zeilenabstand) */
.features{display:grid;grid-template-columns:1fr;gap:13px;padding:24px 0 0}
.feature-item{display:flex;align-items:flex-start;gap:10px}
.feature-icon{width:18px;height:18px;flex:0 0 auto;color:var(--accent);margin-top:3px}
.feature-icon path{stroke-width:1.8}
.feature-text{font-size:15px;color:var(--ink)}

/* ---------- Buy-Panel ---------- */
/* D4+M2: kompletter Set-Auswahl-Block („ZAHNAUFHELLUNG STARTEN" … „Sofort lieferbar…")
   als dezent abgesetzter Container */
.buy-panel{
  margin-top:24px;
  padding:22px 20px;
  background:var(--alt);
  border:1px solid var(--hairline);
  border-radius:var(--r-card);
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
/* R3.2: Set-Auswahl-Container mobil full-bleed (volle Viewportbreite, wie Original-Buy-Panel):
   --alt ueber die volle Breite, kein Aussen-Radius/Border, Innenabstand ~20px.
   Ab 768px bleibt die R2-Container-Karte. */
@media (max-width:767px){
  .buy-panel{
    margin-left:calc(-1 * var(--pad));
    margin-right:calc(-1 * var(--pad));
    padding:20px var(--pad);
    border:0;
    border-radius:0;
    box-shadow:none;
  }
}
.kit-cards__head{margin-bottom:14px}
.kit-cards__kicker{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--accent)}
.kit-cards__headline{font-size:21px;font-weight:700;letter-spacing:-0.01em;line-height:1.2;margin-top:6px}
.kit-cards__grid{display:grid;gap:10px}

.kit-card{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:12px;align-items:start;
  background:var(--paper);
  border:1px solid var(--hairline);
  border-radius:var(--r-card);
  padding:16px 14px;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.kit-card:hover{border-color:rgba(0,0,0,.18)}
/* D4+M2: Selected entschaerft — weiss, 2px Accent-Border (1px Border + 1px Inset), gefuellter Radio-Dot */
.kit-card.is-selected{
  background:var(--paper);
  border-color:var(--accent);
  box-shadow:inset 0 0 0 1px var(--accent);
}
.kit-card__radio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
/* R3.4: Haekchen-Selektion statt Radio-Punkt (links, an der bisherigen Radio-Position).
   Unselektiert: 1.5px --hairline-Ring, leer. Selektiert: --accent-gefuellt mit weissem
   SVG-Haekchen + sanfter Pop (scale .8 -> 1 + opacity, ~160ms ease-out).
   input.kit-card__radio bleibt funktional im DOM (visually-hidden); Indikator rein CSS
   ueber :checked ~ bzw. .is-selected. Gilt fuer BEIDE Selektor-Instanzen (hero + final). */
.kit-card__pick{
  width:23px;height:23px;flex:0 0 auto;margin-top:1px;
  border:1.5px solid var(--hairline);border-radius:50%;
  display:grid;place-items:center;
  background:#fff;
  transition:border-color .15s ease,background .15s ease;
}
.kit-card.is-selected .kit-card__pick,
.kit-card__radio:checked ~ .kit-card__pick{
  border-color:var(--accent);
  background:var(--accent);
}
.kit-card__pick::after{
  content:"";width:13px;height:13px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.5l3.5 3.5 7-8' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:contain;
  opacity:0;transform:scale(.8);
}
.kit-card.is-selected .kit-card__pick::after,
.kit-card__radio:checked ~ .kit-card__pick::after{
  opacity:1;transform:scale(1);
  animation:c4-pick-pop .16s ease-out;
}
@keyframes c4-pick-pop{
  from{opacity:0;transform:scale(.8)}
  to{opacity:1;transform:scale(1)}
}
.kit-card:has(.kit-card__radio:focus-visible){outline:3px solid var(--focus-ring);outline-offset:2px}
/* R4.4: zurueck zum Original-Layout (C3) — links vertikal zentrierter Haekchen-Indikator,
   Mitte breite Produktinfo, rechts schmales gestapeltes Preis-Grid hinter vertikaler Hairline;
   Beliebt-Badge absolut oben rechts. Hooks ([data-kit-old]/[data-kit-now]/.kit-card__per/
   input.kit-card__radio) unangetastet — reiner CSS-Umbau. */
.kit-card__pick{align-self:center;margin-top:0}
.kit-card__content{min-width:0}
.kit-card__name-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kit-card__name{font-size:17px;font-weight:700;line-height:1.25;letter-spacing:-0.01em}
.kit-card__badge{
  position:absolute;top:10px;right:10px;z-index:2;
  background:var(--accent);color:#fff;
  font-size:12px;font-weight:700;line-height:1.4;
  padding:2px 10px;border-radius:var(--r-pill);
}
.kit-card__sub{font-size:13px;color:var(--ink-2);margin-top:3px}
.kit-card__products{display:flex;align-items:center;gap:5px;margin-top:10px}
/* R3.3: Produkt-Thumbnails eckig-gerundet (10px) statt 50%-Kreis — Kreise schneiden die Bilder ab */
/* R5.6: Innen-Padding aller Produkt-Thumbs 3px -> 2px */
.kit-card__product-img{
  width:40px;height:40px;flex:0 0 auto;
  border-radius:10px;background:var(--alt);
  padding:2px;object-fit:contain;
}
.kit-card.is-selected .kit-card__product-img{background:var(--alt)}
.kit-card__product-plus{font-size:14px;color:var(--ink-2)}
.kit-card__desc{font-size:14px;color:var(--ink-2);margin-top:8px}
/* R4.4: schmales Preis-Grid rechts (~106px), vertikale 1px-Hairline als Trenner,
   gestapelt + zentriert: old klein OBEN, now gross darunter, .kit-card__per zuunterst. */
.kit-card__prices{
  align-self:stretch;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  flex:0 0 auto;width:106px;
  border-left:1px solid var(--hairline);
  padding-left:12px;
  text-align:center;white-space:normal;
}
.kit-card__pricepair{display:flex;flex-direction:column;align-items:center;gap:1px}
.kit-card__old{font-size:13px;color:var(--ink-2);text-decoration:line-through}
.kit-card__now{font-size:20px;font-weight:700;letter-spacing:-0.01em;line-height:1.15}
.kit-card__per{font-size:12px;color:var(--ink-2);margin-top:4px}
/* R4.4: responsive Feinjustierung — bei 390px keine haesslichen Umbrueche */
@media (max-width:767px){
  .kit-card{padding:14px 12px;gap:10px}
  .kit-card__name{font-size:16px}
  .kit-card__prices{width:98px;padding-left:10px}
}

.kit-addons__title{font-size:14px;font-weight:700;margin:16px 0 8px}
.kit-addon{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;margin-bottom:8px;padding:12px 14px;
  background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-card);
  cursor:pointer;text-align:left;
  transition:border-color .15s ease,background .15s ease;
}
.kit-addon:hover{border-color:rgba(0,0,0,.18)}
.kit-addon.is-checked{border-color:var(--accent);background:var(--accent-tint);box-shadow:inset 0 0 0 1px var(--accent)}
.kit-addon:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.kit-addon__left{display:flex;align-items:center;gap:12px;min-width:0}
.kit-addon__thumb{width:44px;height:44px;border-radius:10px;background:var(--alt);padding:2px;object-fit:contain;flex:0 0 auto}
.kit-addon.is-checked .kit-addon__thumb{background:#fff}
.kit-addon__text{display:grid;gap:1px;min-width:0}
.kit-addon__title{font-size:14px;font-weight:700}
.kit-addon__sub{font-size:12px;color:var(--ink-2)}
.kit-addon__toggle{
  width:22px;height:22px;flex:0 0 auto;
  border:1.5px solid rgba(0,0,0,.25);border-radius:50%;background:#fff;
  display:grid;place-items:center;
  transition:background .15s ease,border-color .15s ease;
}
.kit-addon.is-checked .kit-addon__toggle{background:var(--accent);border-color:var(--accent)}
.kit-addon.is-checked .kit-addon__toggle::after{
  content:"";width:9px;height:5px;margin-top:-2px;
  border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;
  transform:rotate(-45deg);
}

.buy-row{margin-top:16px}
.shipping{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:14px;color:var(--ink-2)}
.shipping .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:0 0 auto}
.free-shipping{font-size:14px;color:var(--ink-2);margin-top:8px}
.payments{margin-top:14px}
.pay-icons{display:flex;flex-wrap:wrap;gap:6px}
.pay-badge{
  display:grid;place-items:center;
  background:#fff;border:1px solid var(--hairline);border-radius:8px;
  padding:3px 6px;
}
.pay-logo{width:36px;height:22px;object-fit:contain;display:block}

/* ---------- Info-Akkordeons (mit Line-Icons) ---------- */
.info{padding:28px 0 40px}
.intro-details .info{padding-left:0;padding-right:0}
.info-list{border-top:1px solid var(--hairline)}
.info-acc,.info-link{border-bottom:1px solid var(--hairline)}
.info-acc summary{
  display:flex;align-items:center;gap:12px;
  padding:16px 0;cursor:pointer;
}
.info-ico{width:20px;height:20px;flex:0 0 auto;color:var(--ink)}
.info-title{font-size:14px;font-weight:700;letter-spacing:.05em;margin:0;flex:1 1 auto}
.info-chevron{width:20px;height:20px;color:var(--ink-2);flex:0 0 auto;transition:transform .15s ease}
.info-acc[open] .info-chevron{transform:rotate(180deg)}
.info-panel{padding:0 0 18px}
.info-panel p{font-size:14px;color:var(--ink-2);margin:0 0 10px;white-space:normal}
.info-panel p:last-child{margin-bottom:0}
.info-panel strong{color:var(--ink);font-weight:700}
.info-link a{
  display:flex;align-items:center;gap:12px;
  padding:16px 0;text-decoration:none;color:var(--ink);
}
.info-arrow{width:18px;height:18px;color:var(--ink-2);flex:0 0 auto}

/* ---------- Zeilen-Layout (Bild + Text) ---------- */
.c4-row__media img{
  width:100%;height:auto;display:block;
  border-radius:var(--r-media);background:var(--alt);object-fit:cover;
}
.c4-row__content{margin-top:36px}

/* ---------- Warum Smilebite ---------- */
/* R6.6: jeder Benefit in EIGENER Karte (weiss, Hairline, --r-card) — Icon-Tile +
   Kicker + Titel + Text unveraendert; Desktop 2x2 (bestehende 2-Spalten-Regeln),
   mobil gestapelt. Scroll-Reveal via concept-c4.js (.c4-reveal, s.u.). */
.benefits{display:grid;gap:14px;margin-top:6px}
.benefit{
  display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;
  align-items:start;
  background:var(--paper);
  border:1px solid var(--hairline);
  border-radius:var(--r-card);
  padding:18px 16px;
}
.benefit-ico{
  width:44px;height:44px;flex:0 0 auto;
  display:grid;place-items:center;
  background:var(--alt);border-radius:12px; /* R6.6: Tile statt Kreis */
  color:var(--accent);
}
.c4-section--alt .benefit-ico{background:var(--alt);border:0}

/* R6.6/R6.7: Scroll-Reveal — Hidden-Zustand NUR wenn JS armiert (concept-c4.js setzt
   .c4-reveal-armed / .c4-reveal-armed-desk NICHT bei prefers-reduced-motion oder
   fehlendem IntersectionObserver; ohne JS bleiben die Karten sichtbar).
   Stagger ~115ms via inline transition-delay (JS), 570ms ease-out, einmalig
   (R12.5: vorher 90ms/450ms — Betreiber wollte ~25% langsamer).
   Die transition liegt bewusst NUR auf .is-revealed: Chrome rendert die Seite
   progressiv, das Armieren (End-of-Body-Script) kaeme sonst NACH einem ersten
   Paint und wuerde als 1->0-Fade laufen statt sofort zu verstecken. */
.c4-reveal-armed .c4-reveal{
  opacity:0;transform:translateY(14px);
}
.c4-reveal-armed .c4-reveal.is-revealed{
  opacity:1;transform:translateY(0);
  transition:opacity .57s ease-out,transform .57s ease-out;
}
/* R6.7: Zutaten-Karten NUR Desktop (>=980); mobil bleibt der Slider ohne Reveal. */
@media (min-width:980px){
  .c4-reveal-armed-desk .c4-reveal{
    opacity:0;transform:translateY(14px);
  }
  .c4-reveal-armed-desk .c4-reveal.is-revealed{
    opacity:1;transform:translateY(0);
    transition:opacity .57s ease-out,transform .57s ease-out;
  }
}
/* R11.5: Schritt-Karten NUR Desktop (>=768) — gleiches Muster; mobil laeuft
   das Card-Deck ohne Reveal (concept-c4.js armiert dort nicht). */
@media (min-width:768px){
  .c4-reveal-armed-steps .c4-reveal{
    opacity:0;transform:translateY(14px);
  }
  .c4-reveal-armed-steps .c4-reveal.is-revealed{
    opacity:1;transform:translateY(0);
    transition:opacity .57s ease-out,transform .57s ease-out;
  }
}
/* Sicherheitsnetz: unter reduced-motion nie versteckt (JS armiert dann ohnehin nicht) */
@media (prefers-reduced-motion: reduce){
  .c4-reveal-armed .c4-reveal,
  .c4-reveal-armed-desk .c4-reveal,
  .c4-reveal-armed-steps .c4-reveal{opacity:1;transform:none}
}
.benefit-ico svg{width:22px;height:22px;display:block}
.benefit-body{min-width:0}
.kicker{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--accent)}
.benefit-lead{font-size:17px;font-weight:700;letter-spacing:-0.01em;margin-top:4px}
.benefit-copy{font-size:14px;color:var(--ink-2);margin-top:4px}

/* ---------- Overlay-Bildkarten (hipilates-Stil, W5/W6) ---------- */
.c4-ovcard{
  position:relative;
  border-radius:var(--r-card);
  overflow:hidden;
  background:var(--alt);
  aspect-ratio:9/16; /* R9.2: wie Zutaten-Karten — bessere Overlay-Verteilung */
}
.c4-ovcard__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
.c4-ovcard__shade{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,26,22,0) 42%,rgba(20,26,22,.72) 100%);
  pointer-events:none;
}
.c4-ovcard__overlay{
  position:absolute;left:0;right:0;bottom:0;
  padding:16px 16px 16px;
  display:grid;gap:3px;
  text-align:left;
}

/* ---------- So funktioniert's (W6 / R10) ---------- */
/* R10: mobil CARD-DECK statt Slider (poporalbeauty-Interaktion, serioeser
   Apple-Stil). Basis-Regeln hier = No-JS-Fallback: normale gestapelte Liste
   untereinander. Die Deck-Styles greifen NUR unter .js-armed (setzt
   concept-c4.js, Modul 7). Ab 768 unveraendert 3er-Grid (Tablet-/Desktop-
   Blocks unten) — Desktop-Pfad unangetastet. */
.steps{
  display:flex;flex-direction:column;gap:14px;margin-top:6px;
}
.step{min-width:0}
.step.c4-ovcard{border:0;padding:0}

/* R10 Deck (nur <768 UND .js-armed): 3 Voll-Farbkarten absolut uebereinander.
   Slot-Klassen c4-deck-pos0/1/2 vergibt concept-c4.js — KEINE DOM-Umordnung,
   das Desktop-Grid bleibt DOM-identisch. Stapel-Look (R11.4): hintere Karten
   +14px/+28px nach rechts, scale .955/.91, deutlich abgedunkelt (brightness
   .82/.72), oberste Karte mit Tiefen-Schatten — Rechtskanten klar sichtbar.
   Interaktion (Drag/Fling/Pfeil) in concept-c4.js; touch-action:pan-y laesst
   vertikales Seiten-Scrollen ueber dem Deck nativ durch (Verifikation 3). */
.c4-deck-next{display:none}
@media (max-width:767px){
  .c4-deck-clip{overflow-x:clip} /* Flug (±120%) erzeugt keinen Seiten-H-Scroll */
  .steps.js-armed{
    position:relative;
    /* R11.1/R11.2: Statt fester Hoehe (R10: min(72vh,560px)) stapeln alle
       Karten in EINER Grid-Zelle — die Deck-Hoehe folgt der hoechsten Karte,
       das 4:5-Bild wird nie gestaucht (Ratio-Vertrag 0,8), kuerzere Karten
       streckt der Grid-Stretch auf gleiche Hoehe. Mechanik unveraendert. */
    display:grid;
    margin-top:14px;
  }
  .steps.js-armed .step{
    grid-area:1/1;                /* alle Karten uebereinander, Hoehe = hoechste */
    width:calc(100% - 20px);      /* Containerbreite minus Basis-Versatz (Stapel-Peek) */
    touch-action:pan-y;           /* vertikal scrollt die SEITE, horizontal dragt das Deck */
    -webkit-user-select:none;user-select:none;
    transition:transform .25s ease-out,filter .25s ease-out; /* Nachruecken 250ms */
    will-change:transform;
  }
  .steps.js-armed .step.c4-ovcard{
    aspect-ratio:auto;
    background:var(--accent);
    border-radius:var(--r-card);  /* ALT E AD-10: 20px -> 16px, einheitliches Kartensystem */
    padding:20px;
    overflow:hidden;
    display:flex;flex-direction:column;align-items:stretch;
  }
  /* Kartenaufbau: Tag → Trennlinie → Bild → Titel → Text → Pfeil. Das Overlay
     wird per display:contents aufgeloest, seine Kinder ordnen sich als
     Flex-Items der Karte (order); Markup/Texte bleiben byte-identisch. */
  .steps.js-armed .c4-ovcard__shade{display:none}
  .steps.js-armed .c4-ovcard__overlay{display:contents}
  .steps.js-armed .step-tag{
    order:1;flex:0 0 auto;
    /* 14px / 600 / .12em / uppercase / WEISS aus Basisregel (R11.2) */
    padding-bottom:12px;
    border-bottom:1px solid rgba(255,255,255,.28); /* duenne Trennlinie (R11.2) */
  }
  .steps.js-armed .c4-ovcard__img{
    position:static;order:2;
    width:100%;height:auto;aspect-ratio:4/5;object-fit:cover; /* R11.1: 4:5 statt 4:3 */
    border-radius:14px;
    margin-top:14px;
    flex:0 1 auto;min-height:96px; /* darf auf flachen Viewports moderat schrumpfen */
  }
  .steps.js-armed .step-title{
    order:3;flex:0 0 auto;
    line-height:1.2;margin-top:16px;color:#fff; /* 27px aus Basisregel (R11.2) */
  }
  .steps.js-armed .c4-ovcard__overlay .step-copy{
    order:4;flex:0 0 auto;
    /* 15px / 1.55 / weiss-90 aus Basisregeln (R11.2) */
    margin-top:8px;margin-bottom:14px;
  }
  .steps.js-armed .c4-deck-next{
    order:5;flex:0 0 auto;
    margin-top:auto;align-self:flex-end;
    width:44px;height:44px;
    display:grid;place-items:center;
    background:transparent;color:#fff;
    border:1.5px solid #fff;border-radius:50%;
    padding:0;cursor:pointer;
  }
  .steps.js-armed .c4-deck-next svg{width:20px;height:20px;display:block}
  .steps.js-armed .c4-deck-next:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
  /* Stapel-Slots — R11.4: deutlich sichtbarer Stapel (Versatz +14/+28px,
     scale .955/.91, hintere Karten klar abgedunkelt .82/.72, oberste Karte
     mit weichem Tiefen-Schatten). Nur Slot-WERTE geaendert, Mechanik
     (Schwellen/Flug/Zyklus/pan-y/Fallbacks) unveraendert. */
  .steps.js-armed .step.c4-deck-pos0{
    transform:translateX(0) scale(1);z-index:3;cursor:grab;
    box-shadow:0 12px 32px rgba(0,0,0,.22);
  }
  .steps.js-armed .step.c4-deck-pos1{
    transform:translateX(14px) scale(.955);
    z-index:2;filter:brightness(.82);pointer-events:none;
  }
  .steps.js-armed .step.c4-deck-pos2{
    transform:translateX(28px) scale(.91);
    z-index:1;filter:brightness(.72);pointer-events:none;
  }
  /* Interaktions-Zustaende (Klassen setzt concept-c4.js) */
  .steps.js-armed .step.c4-deck-dragging{transition:none;cursor:grabbing}
  .steps.js-armed .step.c4-deck-flying{transition:transform .28s ease-in}
  .steps.js-armed .step.c4-deck-snapping{transition:transform .2s ease-out}
  .steps.js-armed .step.c4-deck-noanim{transition:none}
}
.step-tag{
  display:block;
  font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;
  color:#fff; /* R11.2: WEISS statt accent-light — staerkerer Kontrast (W6) */
}
.step-title{font-size:27px;font-weight:700;letter-spacing:-0.01em;margin-top:2px;color:#fff} /* R11.2: 27px mobil UND desktop */
.step-copy{font-size:15px;line-height:1.55;color:var(--ink-2);margin-top:4px} /* R11.2: 15px, lh 1.55 */
.c4-ovcard__overlay .step-copy{color:rgba(255,255,255,.9);margin-top:4px} /* R11.2: weiss/90 */
/* R11.3: Kopfzeilen-Icon oben rechts (weisses 1.5px-Stroke-Icon, 24px, dekorativ).
   Absolut zum Karten-Rand (Padding 20px im Karten-Layout) — gilt mobil UND desktop;
   im No-JS-Overlay-Fallback sitzt es oben rechts auf dem Bild. */
.step-ico{
  position:absolute;top:20px;right:20px;
  width:24px;height:24px;display:block;
  color:#fff;pointer-events:none;
}
.how-callout{
  margin:28px auto 0;padding:18px 20px;max-width:560px;
  background:var(--alt);border-radius:var(--r-card);
  text-align:center;
}
.c4-section--alt .how-callout{background:var(--paper)}
.how-callout .emph{font-size:17px;font-weight:700;color:var(--ink)}
.how-callout .step-copy{margin-top:2px}

/* ---------- Slider-Mechanik ---------- */
.t-track,
.ingr-track{
  /* D6/D8-Fix: position:relative macht den Track zum offsetParent der Slides.
     main-beta5-b.js rechnet mit slide.offsetLeft relativ zum Track; ohne
     positionierten Vorfahren war der Bezug BODY (+362px Desktop / +24px mobil)
     -> Zentrier-/Dot-Mathe verschoben, Slide 1 wurde uebersprungen. */
  position:relative;
  display:flex;gap:14px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  padding:4px 2px 8px;
}
.t-track::-webkit-scrollbar,
.ingr-track::-webkit-scrollbar{display:none}
.t-track:focus-visible,
.ingr-track:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
/* M4/M5: EIN Slider-Mass mobil (Schritte/Zutaten/Testimonials = 78%) */
.t-slide{flex:0 0 78%;scroll-snap-align:center;min-width:0;display:flex}

.review-card{
  display:flex;flex-direction:column;gap:12px;
  width:100%;
  background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-card);
  padding:20px;
}
.review-stars{display:flex;align-items:center;gap:2px}
.review-stars .star{width:15px;height:15px;color:var(--accent)}
.review-score{font-size:13px;font-weight:700;margin-left:6px}
.review-text{font-size:14px;color:var(--ink);flex:1 1 auto}
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ba-item{min-width:0}
.ba-box{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:3/2;background:var(--alt)}
.ba-box img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* R6.8: "Vorher"/"Nachher" nicht mehr als Overlay AUF dem Bild (verdeckte mobil den
   Bildfokus), sondern als Mini-Caption UNTER dem jeweiligen Bild — zentriert, 11px,
   --ink-2; einheitlich mobil UND desktop. */
.ba-caption{
  display:block;text-align:center;
  font-size:11px;font-weight:400;line-height:1.3;color:var(--ink-2);
  margin-top:5px;
}
/* R6.8: mobil etwas mehr Bildflaeche (3/2 -> 4/3); ab 768px unveraendert 3/2 —
   equalizeHeights (main-beta5-b.js) misst die Kartenhoehe nach dem Umbau neu. */
@media (max-width:767px){
  .ba-box{aspect-ratio:4/3}
}
.review-author{font-size:14px;font-weight:700}

/* R14.2: Testimonial-Typo desktop spuerbar groesser (+20-30%); mobil (<980)
   unveraendert. IST desktop vorher: Text 14px, Autor 14px/700, Sterne 15px,
   Score 13px. NEU: Text 17px, Autor 15px (Gewicht bleibt 700 — der Tangent-
   Font existiert nur in 400/700, ein 600 wuerde ohnehin auf die 700er-Face
   aufloesen), Sterne 17px, Score 14px (mitgezogen, sitzt in der Sterne-Zeile).
   equalizeHeights (main-beta5-b.js) misst die Kartenhoehen bei load/resize
   neu — Inline-Hoehen bleiben konsistent. */
@media (min-width:980px){
  .review-text{font-size:17px}
  .review-author{font-size:15px}
  .review-stars .star{width:17px;height:17px}
  .review-score{font-size:14px}
}

.t-carousel{max-width:720px;margin:0 auto}
.t-controls,
.ingr-controls{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:14px;
}
.t-dots,
.ingr-dots{display:flex;gap:8px;flex-wrap:wrap}
.t-dot,
.ingr-dot{
  width:7px;height:7px;padding:0;
  border:0;border-radius:50%;
  background:var(--hairline);cursor:pointer;
  transition:background .15s ease;
}
.t-dot.is-active,
.t-dot[aria-current="true"],
.ingr-dot.is-active,
.ingr-dot[aria-current="true"]{background:var(--accent)}
.t-arrows,
.ingr-arrows{display:flex;gap:8px}
.t-arrow,
.ingr-arrow{
  width:44px;height:44px;
  display:grid;place-items:center;
  background:var(--paper);border:1px solid var(--hairline);border-radius:50%;
  color:var(--ink);cursor:pointer;
  transition:background .15s ease,opacity .15s ease;
}
.t-arrow svg,
.ingr-arrow svg{width:18px;height:18px}
.t-arrow:hover,
.ingr-arrow:hover{background:var(--alt)}
.c4-section--alt .t-arrow:hover,
.c4-section--alt .ingr-arrow:hover{background:#fff}
.t-arrow:disabled,
.ingr-arrow:disabled{opacity:.3;cursor:default;background:var(--paper)}
.t-arrow:focus-visible,
.ingr-arrow:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}

/* R5.3: Mobil (<768px) KEINE Slider-Navigation in den Sektionen
   Testimonials (.t-controls), Zutaten (.ingr-controls), „Weltweites
   Vertrauen" (.proof-controls, traegt ebenfalls .t-controls) — Dots UND
   Pfeile nur VERSTECKEN (display:none auf den Control-Containern; die von
   main-beta5-b.js generierten Dots/Arrows bleiben im DOM — JS-Referenzen!).
   Swipe/Scroll-Snap + Peek (78%/62%-Slides) bleiben als Affordance;
   ab 768px unveraendert; Galerie-Thumbbar (.c4-thumbbar) unangetastet.
   R10: die frueheren .c4-steps-controls existieren nicht mehr (Steps-Slider
   durch das Card-Deck ersetzt, concept-c4.js baut keine Controls mehr). */
@media (max-width:767px){
  .t-controls,
  .ingr-controls{display:none}
}

.t-cta{margin-top:40px;text-align:center}
.t-cta .c4-sub{margin-bottom:16px;font-weight:700;color:var(--ink);font-size:19px}
.t-cta .cta-primary{max-width:360px;margin:0 auto}

/* ---------- Wissenschaft (W3+W13) ---------- */
.c4-science-video{max-width:560px;margin:0 auto}
.science-video{
  position:relative;
  border-radius:var(--r-media);overflow:hidden;background:var(--alt);
}
/* R3.5 -> R14.3: Studienzahlen als drei ruhige Icon-Karten (Apple-Stil,
   kein Schnoerkel). Die Science-Sektion ist --paper (weiss, kein --alt) ->
   Karten auf --alt als Kontrastflaeche; Hairline, --r-card, Padding 24.
   Je Karte zentriert: 28px-Stroke-Icon im Accent, grosse Zahl
   (clamp 40-52px/700 — Count-up-Mechanik UNVERAENDERT, concept-c4.js
   Modul 3, 1500ms/reduced-motion), Label 15px --ink-2.
   Mobil untereinander (volle Breite), ab 768px 3 nebeneinander (gap 18).
   Scroll-Reveal wie die anderen Kartengruppen (570ms/115ms-Stagger,
   Armierung in concept-c4.js Modul 14 via .c4-reveal-armed). */
.science-metrics{
  display:grid;gap:14px;
  margin:52px auto 0;
  text-align:center;
}
.metric{
  background:var(--alt);border:1px solid var(--hairline);
  border-radius:var(--r-card);padding:24px;
}
.metric-ico{
  display:block;width:28px;height:28px;
  margin:0 auto 14px;
  color:var(--accent);
}
.metric-ico svg{width:28px;height:28px;display:block}
.metric .val{
  font-size:clamp(40px,6vw,52px);font-weight:700;letter-spacing:-0.01em;
  color:var(--ink);line-height:1;
}
.metric .label{font-size:15px;color:var(--ink-2);margin-top:6px}
@media (min-width:768px){
  .science-metrics{grid-template-columns:repeat(3,1fr);gap:18px;max-width:960px}
}
.c4-science-copy{max-width:56ch;margin:52px auto 0;text-align:center}

/* ---------- Inhaltsstoffe (R7.1: 9:16-Overlay-Cards mit neuen Bildern;
   D7 bleibt: kompletter Text DAUERHAFT sichtbar, kein Toggle) ----------
   Karte = <details class="ingr-acc"> als 9:16-Bildkarte: Bild cover absolut,
   dunkler Gradient unten (.ingr-shade), Inhalt (Icon/Kicker/Titel/Kurzzeile im
   summary + .ingr-panel) unten aufliegend via flex-column + justify-content:
   flex-end. Hairline entfaellt (Bildkante), --r-card-Rundung bleibt. */
.ingr-carousel{max-width:none}
.ingr-acc{
  flex:0 0 78%;scroll-snap-align:center;min-width:0;
  position:relative;
  aspect-ratio:9/16;
  display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--alt);border:0;border-radius:var(--r-card);
  padding:0 0 18px; /* R9.1: Bottom-Spacing (lieferte vorher das sichtbare Detail-Panel) */
  overflow:hidden;
}
.ingr-acc summary{
  /* R7.1: summary darf KEIN positioning context sein — .ingr-media/.ingr-shade
     (position:absolute;inset:0) muessen sich an der 9:16-Karte (.ingr-acc,
     position:relative) verankern, nicht am summary-Textblock. */
  position:static;
  display:block;
  padding:0;
  /* D7: Klick-Toggle neutralisiert, ohne main-beta5-b.js zu aendern —
     Touch/Swipe faellt aufs <details>/den Track durch, Mobile-Slider bleibt nutzbar. */
  pointer-events:none;cursor:default;
}
.ingr-media{position:absolute;inset:0;display:block;overflow:hidden;background:var(--alt)}
.ingr-media__img{width:100%;height:100%;object-fit:cover;display:block}
.ingr-shade{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.72) 100%);
  pointer-events:none;
}
.ingr-head{position:relative;z-index:1;display:grid;gap:3px;min-width:0;padding:0 16px}
.ingr-ico{width:22px;height:22px;display:block;color:#fff;margin-bottom:5px}
.ingr-kicker{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--accent-light)} /* R8.1 */
.ingr-title{font-size:20px;font-weight:700;letter-spacing:-0.01em;color:#fff}
.ingr-sub{font-size:13.5px;color:rgba(255,255,255,.9)}
.ingr-icon-line{stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;transition:opacity .15s ease}
.ingr-toggle[open] .ingr-icon-line--vert{opacity:0}

/* R8.2: Detailtext hinter Hover-/Tap-Layer.
   Chromium legt <details>-Inhalt in die ::details-content-Box — display:contents
   macht .ingr-panel wieder zum direkten Flex-Item der 9:16-Karte, damit order:-1
   + margin:auto den Text MITTIG in die freie Flaeche OBERHALB des unteren
   Textblocks setzt (Browser ohne ::details-content-Styling: Panel erscheint als
   Fallback unter der Kurzzeile — Toggle-Mechanik identisch).
   Standard: Panel unsichtbar (opacity/visibility, Platz bleibt reserviert ->
   kein Layout-Sprung), unterer Block (Icon/Kicker/Titel/Kurzzeile) unveraendert.
   Offen (Desktop :hover bzw. .is-detail-open per Tap): zusaetzlicher dunkler
   Overlay rgba(0,0,0,.35) ueber der GANZEN Karte (::after, 200ms) + Panel weiss/92.
   <details> bleibt dauerhaft offen (D7/R4), open/data-mobile-open unveraendert. */
.ingr-acc::details-content{display:contents}
.ingr-acc::after{
  content:"";
  position:absolute;inset:0;z-index:0;
  background:rgba(0,0,0,.35);
  opacity:0;
  transition:opacity .2s ease;
  pointer-events:none;
}
.ingr-panel{
  position:relative;z-index:1;
  order:-1;margin:auto 0;
  padding:8px 16px 20px;
  background:transparent;border:0;
  opacity:0;visibility:hidden;
  transition:opacity .2s ease,visibility 0s linear .2s;
}
.ingr-panel p{font-size:13px;line-height:1.5;color:rgba(255,255,255,.92);margin:0}
.ingr-acc.is-detail-open::after{opacity:1}
.ingr-acc.is-detail-open .ingr-panel{
  opacity:1;visibility:visible;
  transition:opacity .2s ease;
}
@media (hover:hover){
  .ingr-acc:hover::after{opacity:1}
  .ingr-acc:hover .ingr-panel{
    opacity:1;visibility:visible;
    transition:opacity .2s ease;
  }
}
/* Plus-Affordance oben rechts: nur Touch/non-hover-Geraete; duenner
   1.5px-Stroke-Kreis + Plus, weiss, 28px; offen -> 45 Grad ("x").
   pointer-events:none — der Tap faellt auf die Karte durch (ein Toggle-Pfad). */
.ingr-plus{
  position:absolute;top:12px;right:12px;z-index:2;
  width:28px;height:28px;
  color:#fff;
  pointer-events:none;
  transition:transform .2s ease;
}
.ingr-plus svg{width:28px;height:28px;display:block}
.ingr-acc.is-detail-open .ingr-plus{transform:rotate(45deg)}
@media (hover:hover){
  .ingr-plus{display:none}
}
.c4-ingr-foot{max-width:720px;margin:0 auto}
.ingr-closer{font-size:17px;font-weight:700;letter-spacing:-0.01em;margin-top:32px}
.ingr-toggle{margin-top:12px;border-top:1px solid var(--hairline)}
.ingr-toggle summary{
  display:flex;align-items:center;gap:8px;
  font-size:14px;font-weight:700;color:var(--accent);cursor:pointer;
  padding:12px 0;
}
.ingr-toggle .ingr-icon{width:18px;height:18px;margin-top:0}
.ingr-toggle .ingr-icon-line{stroke:var(--accent)}
.ingr-list{font-size:14px;color:var(--ink-2);padding:4px 0 12px}

/* ---------- Vergleich ---------- */
.c4-compare-grid{display:grid;gap:0}
.compare-text{
  text-align:center;
  max-width:56ch;
  margin:0 auto 52px;
}
.compare-text .c4-sub{margin-bottom:0}
.compare-text .compare-note--desktop{margin-top:10px}
.compare-media{max-width:760px;margin:0 auto;width:100%}
.cmp-card{background:transparent;border:0;padding:0}
.cmp-table-wrap{overflow-x:auto}
/* ALT E AD-16: Smilebite-Spalte als sanft getintete, 16px gerundete Spaltenkarte
   (--accent-tint, volle Tabellenhoehe). border-collapse:separate noetig, damit
   border-radius auf Zellen wirkt; es existieren ausschliesslich border-bottom-
   Linien, daher entstehen keine Doppel-Borders. Letzte Zeile ohne Schlusslinie,
   damit der gerundete Spaltenfuss sauber auslaeuft. */
.cmp-table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
.cmp-table thead th{
  padding:14px 10px;text-align:center;
  font-size:12px;font-weight:400;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink-2);
  border-bottom:1px solid var(--hairline);
}
.cmp-table thead th:first-child{text-align:left}
.cmp-table thead th.cmp-head--brand{
  font-weight:700;color:var(--accent);
  background:var(--accent-tint);
  border-radius:var(--r-card) var(--r-card) 0 0;
}
.cmp-table td.cmp-col--brand{background:var(--accent-tint)}
.cmp-table tbody tr:last-child td.cmp-col--brand{border-radius:0 0 var(--r-card) var(--r-card)}
.cmp-table tbody tr:last-child th,
.cmp-table tbody tr:last-child td{border-bottom:0}
.cmp-table tbody th{
  padding:16px 10px;text-align:left;
  font-size:14px;font-weight:400;color:var(--ink);
  border-bottom:1px solid var(--hairline);
}
.cmp-table tbody td{
  padding:16px 10px;text-align:center;
  border-bottom:1px solid var(--hairline);
}
.cmp-icon{display:inline-grid;place-items:center;width:22px;height:22px}
.cmp-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cmp-icon--brand{color:var(--accent)}
.cmp-icon--cross{color:var(--ink-2);opacity:.4}
.cmp-disclaimer{font-size:12px;color:var(--ink-2);margin:16px 0 0;text-align:center}
/* R16-B3 (design-AD-02): Schlussnote nach Viewport trennen — vorher war
   .compare-note--desktop OHNE Media-Query-Gegenstueck dauerhaft versteckt und
   die Mobile-Note (Divis-Variante) stand desktop unter dem 12px-Disclaimer
   (Hierarchie-Inversion). Ab 768px: Desktop-Note (Halbgeviertstrich) unter der
   Intro-Subline (margin-top:10px via .compare-text-Regel oben), Mobile-Note
   versteckt; <768 umgekehrt. */
.compare-note--mobile{margin:10px 0 0;text-align:center}
.compare-note--desktop{display:none}
@media (min-width:768px){
  .compare-note--desktop{display:block}
  .compare-note--mobile{display:none}
}

/* ---------- Social Proof (W7) ---------- */
.c4-proof-rating{
  display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;
  margin-top:14px;
}
.c4-proof-rating .star{width:16px;height:16px;color:var(--accent)}
.c4-proof-rating__score{font-size:14px;font-weight:700}
.c4-proof-rating__sep{color:var(--ink-2)}
.c4-proof-rating__count{font-size:14px;color:var(--ink-2)}
.c4-proof-rating+.c4-h2{margin-top:10px}
.proof-carousel{margin-top:40px;max-width:none}
.proof-track{padding:4px 2px 8px}
.proof-slide{flex:0 0 62%;display:block}
.proof-media{
  width:100%;height:auto;display:block;
  aspect-ratio:9/16;object-fit:cover;
  border-radius:var(--r-card);background:var(--paper);
}
.proof-controls{justify-content:center;gap:16px}
/* R12.4: Community-Closer auf normale Abschluss-Textgroesse — Referenz ist die
   Compare-Note (.c4-sub: 17px, --ink-2, line-height erbt 1.5 vom body); vorher 14px.
   Gilt mobil UND desktop (die .c4-sub-Groesse ist breakpoint-unabhaengig). */
.proof-hint{font-size:17px;color:var(--ink-2);margin:24px auto 0;max-width:56ch}

/* ================================================================
   R12.3 — Social-Proof-Pfeile als Overlay an den Bildraendern (>=768;
   mobil <768 bleibt R5-Zustand ohne Controls). concept-c4.js ERSETZT
   #proofPrev/#proofNext per cloneNode (Engine-Listener weg) und haengt
   die Klone in .proof-carousel — dadurch ist die Karussell-Box der
   Positionierungskontext: 44px weisse Glas-Kreise mit Hairline,
   vertikal mittig ueber dem Track (Apple-Galerie-Stil). Klick scrollt
   direkt um einen Slide-Pitch (scrollBy smooth, geclamped 0/max);
   disabled-State fuehrt concept-c4.js an den Scroll-Grenzen selbst.
   Fallback ohne JS: die Original-Buttons bleiben in .proof-controls
   (unter dem Track) — dort stylen die t-arrow-Basisregeln.
   ================================================================ */
.proof-carousel{position:relative}
.proof-carousel .t-arrow{
  display:none; /* <768: mobil keine Controls (R5) — Klone sind ausserhalb
                   von .proof-controls und brauchen eine eigene Regel */
}
@media (min-width:768px){
  .proof-carousel .t-arrow{
    display:grid;
    position:absolute;top:50%;transform:translateY(-50%);
    z-index:5;
    background:rgba(255,255,255,.78);
    -webkit-backdrop-filter:saturate(180%) blur(10px);
    backdrop-filter:saturate(180%) blur(10px);
    border:1px solid var(--hairline);
    box-shadow:0 2px 10px rgba(0,0,0,.08);
  }
  .proof-carousel .t-arrow:hover{background:rgba(255,255,255,.95)}
  .proof-carousel .t-arrow:disabled{opacity:.3;background:rgba(255,255,255,.6)}
  .proof-carousel #proofPrev{left:12px}
  .proof-carousel #proofNext{right:12px}
}
/* R12.3: Dots ab dem Desktop-Breakpoint ausblenden (DOM bleibt — Engine-
   Referenzen!); 768–979 bleiben die Dots sichtbar (Engine bedient sie dort). */
@media (min-width:980px){
  #proofDots{display:none}
  .proof-controls{display:none} /* Container ist ohne Pfeile+Dots leer — kein Geisterabstand */
}

/* ---------- FAQ ---------- */
.c4-faq .qa-list{margin-top:0;text-align:left}
.qa-list--split{
  display:grid;
  max-width:720px;margin:0 auto;
  border-top:1px solid var(--hairline);
}
.qa-col{display:contents}
.qa{background:transparent;border:0;border-bottom:1px solid var(--hairline);border-radius:0}
.qa[data-faq-order="1"]{order:1}
.qa[data-faq-order="2"]{order:2}
.qa[data-faq-order="3"]{order:3}
.qa[data-faq-order="4"]{order:4}
.qa[data-faq-order="5"]{order:5}
.qa[data-faq-order="6"]{order:6}
.qa[data-faq-order="7"]{order:7}
.qa[data-faq-order="8"]{order:8}
.qa summary{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:20px 0;cursor:pointer;
}
.qa .q{font-size:17px;font-weight:700;letter-spacing:-0.01em;margin:0}
.qa .icon{width:20px;height:20px;flex:0 0 auto;color:var(--accent)}
.qa .icon svg{width:20px;height:20px}
.qa .icon path{stroke-width:1.8}
.qa .minus{display:none}
.qa[open] .plus{display:none}
.qa[open] .minus{display:block}
.qa .a{font-size:17px;color:var(--ink-2);padding:0 0 20px;max-width:60ch}
.qa .a strong{color:var(--ink);font-weight:700}
.c4-faq-contact{margin-top:40px}
.c4-faq-contact .c4-sub{margin-bottom:4px}

/* ---------- Final-CTA ---------- */
/* R3.6: entquetscht — die SEKTION traegt die --alt-Flaeche (mobil full-bleed,
   Desktop grosszuegige Flaeche ohne doppelte Box-Wirkung); .cta-final ist nur
   noch Layout-Container (eine Ebene weniger).
   R14.4: aufgeraeumt — EINSPALTIG und zentriert auf ALLEN Viewports
   (Eyebrow -> H2 -> Sub -> Preisblock -> Trust-Zeile -> Paketauswahl -> CTA;
   DOM-Reihenfolge lieferte das bereits). Die Paketauswahl (.cta-right) wird
   als Block auf ~600px begrenzt und zentriert; die frueheren Desktop-Regeln
   (2-Spalten-Grid 5fr/7fr + sticky .cta-left) sind entfernt. Alle Hooks
   (#ctaPriceText/#ctaOldPriceText/#ctaDiscount, [data-kit-select="final"],
   #bundleBtn, .kit-hidden) unangetastet. */
.c4-section--final{background:var(--alt);border-top:1px solid var(--hairline)}
.cta-final{
  background:transparent;border-radius:0;
  padding:0;
}
.cta-final-grid{display:grid;gap:32px}
.cta-left{text-align:center}
.cta-right{width:100%;max-width:600px;margin:0 auto}
.cta-subline{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--accent)}
.cta-title{font-size:clamp(26px,5vw,40px);font-weight:700;letter-spacing:-0.01em;line-height:1.1;margin:12px 0 10px}
.cta-copy{font-size:17px;color:var(--ink-2);max-width:56ch;margin:0 auto}
.cta-price-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 14px;margin-top:20px}
.cta-badge{
  font-size:12px;font-weight:700;color:var(--accent);
  background:var(--accent-tint);
  border-radius:var(--r-pill);padding:5px 12px;
}
.cta-old{font-size:17px;color:var(--ink-2);text-decoration:line-through}
.cta-price{font-size:clamp(34px,7vw,44px);font-weight:700;letter-spacing:-0.01em;line-height:1}
/* R15.4: Final-CTA ohne Preisblock — NUR ausblenden (display:none), das
   Markup bleibt vollstaendig im DOM: #ctaDiscount/#ctaOldPriceText/
   #ctaPriceText sind Pflicht-Hooks (Runtime/main-JS schreiben teils ohne
   Null-Guards hinein), auch das Preis-Flacker-Gate (sb-runtime-ready,
   visibility) selektiert sie weiter. Verbleibende Reihenfolge exakt:
   Eyebrow -> H2 -> Sub -> Trust-Zeile -> Paketauswahl. */
.cta-final .cta-price-row{display:none}
.trust-row{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:20px} /* R14.4: zentriert */
.trust{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--ink-2)}
.trust .tick{width:16px;height:16px;color:var(--accent)}
.trust .tick path{stroke-width:1.8}
.bundle .kit-cards__head{margin-bottom:16px}
.bundle-cta{margin-top:16px}

/* ---------- Support ---------- */
.support{padding:88px var(--pad);text-align:center}
.support-inner{max-width:560px;margin:0 auto}
.support-title{font-size:21px;font-weight:700;letter-spacing:-0.01em}
.support-copy{font-size:17px;color:var(--ink-2);margin:8px 0 20px}
.support-actions{display:grid;gap:10px;justify-items:stretch}
.support-actions .support-btn{width:100%}
.support-btn--account{width:100%}
.support-divider{height:1px;background:var(--hairline);margin:36px 0}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:rgba(255,255,255,.78)}
.footer-inner{max-width:var(--maxw);margin:0 auto;padding:48px var(--pad) 32px}
.footer-columns{display:grid;gap:4px}
.footer-accordion{border-bottom:1px solid rgba(255,255,255,.14)}
.footer-accordion summary{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 0;cursor:pointer;
  font-size:14px;font-weight:700;color:#fff;
}
.footer-toggle-icon{
  width:9px;height:9px;flex:0 0 auto;
  border-right:1.5px solid rgba(255,255,255,.5);
  border-bottom:1.5px solid rgba(255,255,255,.5);
  transform:rotate(45deg);
  transition:transform .15s ease;
}
.footer-accordion[open] .footer-toggle-icon{transform:rotate(225deg)}
.footer-panel{padding:0 0 18px}
.footer-panel p{font-size:14px;margin:0 0 10px}
.footer-panel ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.footer-panel a{color:rgba(255,255,255,.78);text-decoration:none;font-size:14px}
.footer-panel a:hover{color:#fff;text-decoration:underline}
.footer-payments{display:flex;flex-wrap:wrap;gap:6px}
.footer-payments img{
  width:38px;height:24px;object-fit:contain;
  background:#fff;border-radius:6px;padding:2px 4px;
}
.footer-contact{font-size:14px;margin-top:24px}
.footer-contact a{color:#fff}
.footer-social{display:flex;gap:10px;margin-top:24px}
.footer-social-icon{
  width:36px;height:36px;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.3);border-radius:50%;
  color:#fff;font-size:13px;font-weight:700;text-decoration:none;
  transition:background .15s ease,color .15s ease;
}
.footer-social-icon:hover{background:#fff;color:var(--ink)}
/* ALT E AD-13: echte Social-SVGs (1.5px-Stroke, currentColor — Hover-Invert
   funktioniert weiter ueber die color-Transition des Kreises) */
.footer-social-icon svg{width:17px;height:17px;display:block}
.footer-bottom{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:28px;padding-top:18px;
  border-top:1px solid rgba(255,255,255,.14);
}
.locale-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:#fff;color:var(--ink);
  font-size:14px;font-weight:700;
  border:0;border-radius:var(--r-btn);
  padding:10px 18px;cursor:pointer;
  transition:opacity .15s ease,transform .1s ease;
}
.locale-btn:hover{opacity:.9}
.locale-btn:active{transform:scale(.98)}
.footer-meta{font-size:12px;color:rgba(255,255,255,.5)}
.footer-meta a{color:rgba(255,255,255,.5)}

/* ---------- Mobile Sticky CTA (Glas) ---------- */
.mobile-sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:980;
  background:rgba(255,255,255,.85);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-top:1px solid var(--hairline);
  box-shadow:var(--shadow-pop);
  padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));
  transform:translateY(110%);
  transition:transform .2s ease;
  pointer-events:none;
}
.mobile-sticky-cta.is-visible{transform:translateY(0);pointer-events:auto}
.mobile-sticky-inner{display:flex;align-items:center;gap:12px;max-width:var(--maxw);margin:0 auto}
.mobile-sticky-copy{display:grid;gap:0;min-width:0;flex:1 1 auto}
.mobile-sticky-label{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mobile-pricing{display:flex;align-items:baseline;gap:8px}
.mobile-old-price{font-size:12px;color:var(--ink-2);text-decoration:line-through}
.mobile-current-price{font-size:17px;font-weight:700}
.mobile-sticky-button{width:auto;flex:0 0 auto;min-height:48px;padding:0 22px;font-size:14px}
body.mobile-cta-visible main{padding-bottom:92px}

/* ---------- Cart-Modal ---------- */
body.modal-open{overflow:hidden}
.cart-backdrop{
  position:fixed;inset:0;z-index:9990;
  background:rgba(0,0,0,.4);
  opacity:0;pointer-events:none;
  transition:opacity .18s ease;
}
.cart-backdrop.is-open{opacity:1;pointer-events:auto}
.cart-modal{
  position:fixed;top:0;right:0;bottom:0;left:auto;z-index:10000;
  /* D9: Drawer breiter (Desktop), Innenabstaende 24px.
     R13.6: 520px -> 560px = Mittelweg zwischen bisherigen 520px und
     Original-Drawer 600px (new-fixed-soft, gemessen @1280/1440). */
  width:100%;max-width:560px;
  background:#fff;
  display:grid;grid-template-rows:auto auto 1fr auto;
  transform:translateX(16px);
  opacity:0;pointer-events:none;
  transition:transform .18s ease,opacity .18s ease;
  box-shadow:var(--shadow-pop);
}
.cart-modal.is-open{transform:translateX(0);opacity:1;pointer-events:auto}

@media (max-width:767px){
  /* D9: mobil weiterhin volle Breite */
  .cart-modal{max-width:none}
}

.cart-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 24px;border-bottom:1px solid var(--hairline);
}
.cart-title{font-size:17px;font-weight:700;letter-spacing:-0.01em}
/* R18-T3 (INTERPRETATION, dokumentiert): Der User erinnert einen Cart mit
   anders designtem Close-Button aus einer Alternativversion — Recherche
   ergab: ALLE bisherigen Versionen (C1/C2/C3/C4-C/D/E/F/trustflow) hatten
   denselben schlichten ×-Button. Dies ist daher eine NEUE Interpretation
   im Apple-Stil (gefuellter, weicher Kreis-Chip ~7% Ink, Hover dunkler),
   KEINE Wiederherstellung. Groesse 36px, Radius 50%, ×-SVG, Position und
   44px-Hit-Area (B7c/R16) sowie Fokus-Ring unveraendert. */
.cart-close{
  width:36px;height:36px;
  display:grid;place-items:center;
  background:rgba(27,33,30,.07);border:0;border-radius:50%;cursor:pointer;color:var(--ink);
  transition:background .15s ease;
}
.cart-close:hover{background:rgba(27,33,30,.13)}
.cart-close:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.cart-infobar{
  display:flex;align-items:center;gap:8px;
  padding:10px 24px;
  background:var(--accent-tint);border-bottom:1px solid var(--hairline);
  font-size:12px;font-weight:700;color:var(--accent);
}
/* R18-T3 (Header-Feinschliff, INTERPRETATION): dezente Scroll-Elevation an
   der Unterkante der Cart-Kopfgruppe (Head + Infobar), sobald .cart-body
   gescrollt ist — Klasse c4-cart-scrolled setzt concept-c4c.js. z-index,
   damit der Schatten ueber dem scrollenden Inhalt liegt. */
.cart-infobar{position:relative;z-index:1;transition:box-shadow .18s ease}
.cart-modal.c4-cart-scrolled .cart-infobar{box-shadow:0 10px 16px -14px rgba(0,0,0,.35)}
.cart-info-icon{width:18px;height:18px;flex:0 0 auto;display:block}
.cart-body{overflow:auto;-webkit-overflow-scrolling:touch}
.cart-section{padding:20px 24px}
.cart-modal h4{font-size:14px;font-weight:700;color:var(--ink)}
/* R4.5: volle Hairline-Divider + mehr Abstand zwischen den Cart-Bereichen
   („Bereits im Einkaufswagen" / „Alle Whitening-Optionen" / „Das koennte dir ...") */
.cart-modal .hr{border:0;border-top:1px solid var(--hairline);margin:24px -24px}

.cart-items{display:grid;gap:12px}
/* R5.9: kompaktes, einheitliches Cart-Raster — EINE Thumb-Groesse (44px, wie
   Bundle-Zeilen), gleiche vertikale Paddings (12px) und line-height ~1.35
   ueber alle Cart-Listen (Bundle-Zeilen, Options, Upsells). R5.6: Thumb-Padding 2px. */
.ci{
  display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;
  background:#fff;border:1px solid var(--hairline);border-radius:var(--r-card);padding:12px 14px;
}
.ci-thumb{width:44px;height:44px;border-radius:10px;background:var(--alt);padding:2px;object-fit:contain}
.ci-title{font-size:14px;font-weight:700;line-height:1.35}
.ci-meta{font-size:12px;color:var(--ink-2);margin-top:2px;line-height:1.35}
.ci-price{font-size:14px;font-weight:700;white-space:nowrap}
.ci-actions{display:grid;gap:8px;align-content:start;justify-items:end}
.ci-remove{
  width:32px;height:32px;
  display:grid;place-items:center;
  background:transparent;border:0;border-radius:50%;cursor:pointer;color:var(--ink-2);
  transition:background .15s ease;
}
.ci-remove:hover{background:var(--alt)}

/* W4c: Mengen-Stepper vereinheitlicht (Bundle- und Addon-Zeilen identisch) */
.qtybox{
  display:inline-flex;align-items:center;gap:2px;
  height:36px;
  border:1px solid var(--hairline);border-radius:var(--r-pill);
  padding:2px;font-size:14px;
  background:#fff;
}
.qtybox input{
  width:32px;min-width:0;padding:0;
  border:0;background:transparent;
  font-size:14px;font-weight:700;color:var(--ink);text-align:center;
}
.ci-decrease,.ci-increase{
  width:28px;height:28px;
  display:grid;place-items:center;
  background:transparent;border:0;border-radius:50%;
  font-size:15px;font-weight:700;color:var(--ink);cursor:pointer;
  transition:background .15s ease;
}
.ci-decrease:hover,.ci-increase:hover{background:var(--alt)}

.ci--addon{display:block;grid-template-columns:none;padding:12px 14px}
.ci-addon-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:start}
.ci-addon-main{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:center;min-width:0}
.ci-addon-thumb{width:44px;height:44px}
.ci-addon-copy{min-width:0}
.ci-addon-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.ci-addon-qty{flex:0 0 auto}
.ci-addon-price-wrap{text-align:right}

/* R4.5: Bundle-Darstellung wie Original, cleaner — Titelzeile (20px/700 + Muelleimer rechts)
   -> horizontale Hairline -> Produktzeilen -> Fusszeile (Stepper links, Preise rechts).
   Sehr subtiler Verlauf auf der Karte, --r-card, Hairline-Border (solide = im Warenkorb).
   Die JS-generierten Zeilen .ci-bundle-count („2 Produkte im Set") und .ci-bundle-summary
   („Kit + Duo") sind nicht entfernbar (cart-modal.js eingefroren) -> display:none. */
.ci--bundle{
  display:block;grid-template-columns:none;padding:12px 14px; /* R5.9: 16px -> 12px vertikal */
  border-color:var(--hairline);box-shadow:none;
  background:linear-gradient(180deg,#fff 0%,var(--alt) 100%);
  border-radius:var(--r-card);
}
.ci-bundle-head{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;
  padding-bottom:10px;border-bottom:1px solid var(--hairline);
}
.ci-bundle-title{font-size:20px;font-weight:700;letter-spacing:-0.01em;line-height:1.2}
.ci-bundle-count{display:none}
.ci-bundle-summary{display:none}
.ci-bundle-items{display:grid;gap:8px;margin-top:12px} /* R5.9 */
.ci-bundle-row{display:grid;gap:8px;align-items:center}
.ci-bundle-row--main{grid-template-columns:44px minmax(0,1fr)}
.ci-bundle-row--child{grid-template-columns:16px 44px minmax(0,1fr)}
.ci-bundle-plus{font-size:14px;color:var(--ink-2);text-align:center}
.ci-bundle-thumb{width:44px;height:44px;border-radius:10px;background:var(--alt);padding:2px;object-fit:contain} /* R5.6 */
.ci-bundle-copy{min-width:0}
.ci-bundle-name{font-size:15px;font-weight:700;line-height:1.35}
.ci-bundle-meta{font-size:13px;color:var(--ink-2);line-height:1.35}
.ci-bundle-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px} /* R5.9 */
/* R4.5: Streichpreis klein UEBER dem aktuellen Preis (DOM-Reihenfolge compare -> price) */
.ci-bundle-price-wrap{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:0}
.ci-bundle-compare{font-size:12px;color:var(--ink-2);text-decoration:line-through}
.ci-bundle-price{font-size:18px;font-weight:700;letter-spacing:-0.01em}

.bundle-options{display:grid;gap:10px}
/* R5.7: alle Cart-Boxen durchgehend — die R4.5-dashed-Border der nicht gewaehlten
   Options-/Upsell-Karten wieder solid (gleiche Farbe/Staerke, nur border-style).
   R5.9: padding 14px -> 12px 14px (einheitliche vertikale Paddings). */
.bundle-option-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"copy action" "media action";
  gap:4px 12px;align-items:center;
  background:#fff;border:1px solid rgba(0,0,0,.18);border-radius:var(--r-card);padding:12px 14px;
  transition:border-color .15s ease,background .15s ease;
}
/* D10b: Selected-Tint entfernt — weisser Grund, Hairline; der gefuellte
   „✓ Gewählt"-Button bleibt der einzige Zustandsmarker */
.bundle-option-card.is-selected{
  border-style:solid;
  border-color:var(--hairline);
  box-shadow:none;
  background:#fff;
}
.bundle-option-copy{grid-area:copy;min-width:0}
.bundle-option-title{font-size:14px;font-weight:700;line-height:1.35}
.bundle-option-products{font-size:12px;color:var(--ink-2);margin-top:2px;line-height:1.35}
.bundle-option-products span{display:block}
.bundle-option-media{grid-area:media;display:flex;align-items:center;gap:4px;margin-top:6px}
/* R5.9: Thumb-Groesse vereinheitlicht (40px -> 44px wie Bundle-Zeilen), R5.6: padding 2px */
.bundle-option-thumb{width:44px;height:44px;border-radius:10px;background:var(--alt);padding:2px;object-fit:contain}
.bundle-option-card.is-selected .bundle-option-thumb{background:var(--alt)}
.bundle-option-plus{font-size:12px;color:var(--ink-2)}
.bundle-option-action{grid-area:action;display:grid;justify-items:end;align-content:center}

/* W4b: Auswahl-Buttons invertiert — Default Outline, Selected gefuellt */
.bundle-option-add,
.ups-add{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  min-height:36px;padding:0 16px;
  background:transparent;color:var(--accent);
  font-size:14px;font-weight:700;
  border:1.5px solid var(--accent);border-radius:var(--r-btn);cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.bundle-option-add:hover,
.ups-add:hover{background:var(--accent-tint)}
.bundle-option-add.is-selected,
.ups-add.is-selected{background:var(--accent);border-color:var(--accent);color:#fff;cursor:default}
.bundle-option-add.is-selected:hover,
.ups-add.is-selected:hover{background:var(--accent)}
.bundle-option-add:focus-visible,
.ups-add:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.selected-option-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.selected-remove{cursor:pointer}
/* D10a: JS-generierten Text-Button „Entfernen" ausblenden — Muelleimer-Icon reicht
   (Icon-Variante via body.sb-cart-remove-icon vorhanden) */
.selected-remove--text{display:none}
.selected-remove--icon{
  width:32px;height:32px;
  display:grid;place-items:center;
  background:#fff;border:1px solid var(--hairline);border-radius:50%;color:var(--ink-2);
  transition:background .15s ease;
}
.selected-remove--icon:hover{background:var(--alt)}

.cart-upsells{display:grid;gap:10px}
/* R5.9: Upsell-Karten kompakt im einheitlichen Raster — Thumb 56px -> 44px,
   padding 14px -> 12px 14px, line-height ~1.35 (keine Riesenzeilen mehr). */
.ups-card{
  display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;
  background:#fff;border:1px solid var(--hairline);border-radius:var(--r-card);padding:12px 14px;
  transition:border-color .15s ease,background .15s ease;
}
/* R7.3: Selected-Zustand neutral wie unselektiert (analog R4/D10b bei den
   Bundle-Options) — KEINE Accent-Border, KEIN Tint; einziger Zustandsmarker
   ist der gefuellte „✓ Gewählt"-Button. */
.ups-card.is-selected{
  border-color:var(--hairline);
  box-shadow:none;
  background:#fff;
}
.ups-thumb{width:44px;height:44px;border-radius:10px;background:var(--alt);padding:2px;object-fit:contain}
.ups-card.is-selected .ups-thumb{background:var(--alt)}
.ups-copy{min-width:0}
.ups-title{font-size:14px;font-weight:700;line-height:1.35}
.ups-sub{font-size:12px;color:var(--ink-2);margin-top:2px;line-height:1.35}
/* Serum-Upsell: Streichpreis links vom Outline-Button (W4c/W4e) */
.c4-ups-priceblock{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.c4-ups-compare{font-size:12px;color:var(--ink-2);text-decoration:line-through;white-space:nowrap}

/* W4f: Trust-Badges als tint-gefuellte Pills mit Haken */
.benefit-row{display:flex;flex-wrap:wrap;gap:8px}
.benefit-row .badge{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--accent-tint);color:var(--accent);
  font-size:12px;font-weight:700;
  padding:5px 12px;border-radius:var(--r-pill);
}
.benefit-row .badge svg{fill:currentColor;flex:0 0 auto}

.cart-sticky{
  display:grid;gap:10px;
  background:#fff;border-top:1px solid var(--hairline);
  padding:12px 24px calc(12px + env(safe-area-inset-bottom));
}
/* W4d: AGB-Box — alt-Flaeche, grosse Checkbox, checked = accent gefuellt mit weissem Haken */
.cart-terms{
  display:flex;align-items:center;gap:12px;
  background:var(--alt);border:1.5px solid var(--hairline);border-radius:var(--r-card);
  padding:12px 14px;
  font-size:14px;font-weight:700;color:var(--ink);
  transition:border-color .15s ease,background .15s ease;
}
.cart-terms input{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  width:28px;height:28px;flex:0 0 auto;margin:0;
  background:#fff;border:1.5px solid rgba(0,0,0,.3);border-radius:8px;
  display:grid;place-items:center;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease;
}
.cart-terms input:checked{background:var(--accent);border-color:var(--accent)}
.cart-terms input:checked::before{
  content:"";width:12px;height:7px;margin-top:-2px;
  border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;
  transform:rotate(-45deg);
}
.cart-terms input:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.cart-terms a{color:var(--accent);text-decoration:underline}
.cart-terms.is-error{border-color:var(--error);background:#FBEEEC;color:var(--error)}
.cart-terms.is-error a{color:var(--error)}
.cart-terms.is-error input{border-color:var(--error)}
/* D11: Klick auf/ueber dem disabled Zur-Kasse-Button landet auf dem Container
   (concept-c4.js hebt dann die AGB-Box hervor) */
#cartCheckout:disabled{pointer-events:none}
@keyframes c4-terms-shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-5px)}
  40%{transform:translateX(5px)}
  60%{transform:translateX(-3px)}
  80%{transform:translateX(3px)}
}
.cart-terms.c4-terms-nudge{animation:c4-terms-shake .4s ease 1}
.cart-summary{display:flex;align-items:baseline;justify-content:space-between;font-size:14px}
.cart-summary strong{font-weight:700}
.cart-total{font-size:19px;font-weight:700;letter-spacing:-0.01em}
.c4-cart-paylist{justify-content:flex-start}

/* ---------- Tablet ---------- */
@media (min-width:768px){
  .c4-section{padding:110px var(--pad)}
  .support{padding:110px var(--pad)}

  .intro{max-width:calc(var(--maxw) + 2*var(--pad));margin:0 auto;padding:0 var(--pad)}
  .carousel-track{gap:12px}
  .carousel-track .slide{flex:0 0 70%}
  .carousel-track .media{border-radius:var(--r-media)}

  /* R6.6: Benefit-Karten ab 768 im 2x2-Raster (Karten-Gap statt Listen-Gap) */
  .benefits{grid-template-columns:1fr 1fr;gap:16px}
  .steps{
    display:grid;grid-template-columns:repeat(3,1fr);gap:18px; /* R11.5: gap 18px */
    overflow:visible;scroll-snap-type:none;padding:0;margin-top:6px;
    align-items:stretch; /* R11.5: Kartenhoehen egalisieren (Grid-Stretch) */
  }
  .step{flex:none}

  /* R11.5: Schritt-Karten ab 768 = DIESELBE Karten-Anatomie wie das mobile
     Deck (Kopfzeile Kicker + Icon, Trennlinie, 4:5-Bild, Titel, Text) auf
     --accent, nebeneinander im 3er-Grid — KEIN Deck/Stapel; der Pfeil-Button
     bleibt ueber die Basisregel .c4-deck-next{display:none} versteckt (er
     navigiert hier nichts). Ersetzt NUR das fruehere 9:16-Overlay-Grid der
     Schritte; die Zutaten-Karten (.ingr-acc) behalten ihr Overlay-Design. */
  .steps .step.c4-ovcard{
    position:relative;               /* Bezug fuer .step-ico */
    aspect-ratio:auto;
    background:var(--accent);
    border-radius:var(--r-card);     /* ALT E AD-10: 20px -> 16px, wie mobile Deck-Karte */
    padding:20px;
    overflow:hidden;
    display:flex;flex-direction:column;align-items:stretch;
  }
  .steps .step .c4-ovcard__shade{display:none}
  .steps .step .c4-ovcard__overlay{display:contents}
  .steps .step .step-tag{
    order:1;flex:0 0 auto;
    padding-bottom:12px;
    border-bottom:1px solid rgba(255,255,255,.28);
  }
  .steps .step .c4-ovcard__img{
    position:static;order:2;
    width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
    border-radius:14px;
    margin-top:14px;
    flex:0 0 auto;
  }
  .steps .step .step-title{
    order:3;flex:0 0 auto;
    line-height:1.2;margin-top:16px;color:#fff;
  }
  .steps .step .c4-ovcard__overlay .step-copy{
    order:4;flex:0 0 auto;
    margin-top:8px;margin-bottom:6px;
  }

  .t-slide{flex-basis:100%}
  .ingr-track{display:grid;grid-template-columns:1fr 1fr;gap:14px;overflow:visible;scroll-snap-type:none}
  .ingr-acc{flex:none}
  .ingr-controls{display:none}
  .proof-slide{flex-basis:30%}

  .support-actions{grid-template-columns:1fr 1fr}
  .support-actions .support-btn{width:auto}
  .support-btn--account{width:auto}

  .mobile-sticky-cta{display:none}
}

/* ---------- Desktop: Original-Desktop-Gallery (aus concept-c3, C4-Tokens) ---------- */
.desktop-thumb-shell,.desktop-thumb-rail{display:none}

@media (min-width:980px){
  html,body{overflow-x:hidden}
  html{scroll-padding-top:calc(var(--desktop-gallery-header-height, 82px) + 24px)}
  [id]{scroll-margin-top:calc(var(--desktop-gallery-header-height, 82px) + 24px)}

  .c4-section{padding:140px var(--pad)}
  .c4-section-head{margin-bottom:64px}
  .compare-text{margin-bottom:64px}
  .support{padding:140px var(--pad)}

  .site-topbar{position:relative;z-index:70}
  .site-header{position:sticky;top:0;z-index:300}
  .site-header.is-desktop-gallery-fixed{
    position:fixed!important;top:0!important;left:0;right:0;z-index:300;
  }
  body.has-desktop-gallery-fixed-header main.c4-main{
    padding-top:var(--desktop-gallery-header-height, 82px);
  }

  /* D1: Hero-Grid = kanonische Breite (Inhaltsbreite --maxw, wie .c4-inner) */
  .intro{overflow:visible;max-width:calc(var(--maxw) + 2*var(--pad));margin:0 auto;padding:0 var(--pad)}
  .c4-main>.intro{margin-top:34px}

  .intro-grid{
    display:grid;
    /* D1: grosses Bild deutlich groesser; Buy-Spalte ~460px */
    grid-template-columns:minmax(0,1fr) minmax(420px,460px);
    gap:32px;
    align-items:start;
    position:relative;
  }
  .intro-details{position:relative;top:0;padding:0}
  /* R4.3: Buy-Spalte ist ab 980px fix 460px breit — 37px ist die groesste Groesse,
     bei der der nowrap-Span (~12.27px/Font-px => 454px) ohne Umbruch passt.
     concept-c4.js verfeinert zusaetzlich nach Font-Load/Resize. */
  .headline{font-size:37px}

  .intro-media{
    position:sticky;
    top:calc(var(--desktop-gallery-header-height, 82px) + 18px);
    align-self:start;
    z-index:1;
  }
  .intro-media.is-gallery-fixed,.intro-media.is-gallery-stopped{z-index:20}
  .intro-media.is-gallery-fixed{position:fixed}
  .intro-media.is-gallery-stopped{position:absolute}

  .desktop-gallery-sticky-placeholder{display:none;grid-column:1;grid-row:1}
  .desktop-gallery-sticky-placeholder.is-active{display:block}

  .intro .carousel{
    display:grid;
    /* D1: Thumb-Rail 88px, Rest fuers Hauptbild */
    grid-template-columns:88px minmax(0,1fr);
    gap:14px;align-items:start;margin-top:0;
  }
  .intro .carousel-track{
    display:block!important;
    overflow:hidden!important;
    scroll-snap-type:none!important;
    padding:0!important;
    grid-column:2;min-width:0;
  }
  .intro .carousel-track>.slide{
    display:none;width:100%;flex:initial;scroll-snap-align:unset;
  }
  .intro .carousel-track>.slide.is-gallery-active{display:block}
  .intro .carousel-track>.slide .media{border-radius:var(--r-media)}
  .intro .carousel-track>.slide .ratio{padding-top:125%}
  /* M1: Desktop behaelt den Badge — ueber dem Hauptbild (rechts der 88px-Rail) */
  .intro .carousel-badge{display:block;left:calc(88px + 14px + 12px)}
  .c4-thumbbar{display:none}

  .desktop-thumb-shell{
    grid-column:1;align-self:start;position:relative;
    display:block;min-height:0;
    /* R6.3 (ersetzt die R2-Regel "bis Viewport-Unterkante"): effektive Hoehe =
       MINIMUM aus (a) Viewport-Grenze (height, wie R2) und (b) Hoehe der aktiven
       Hauptbild-Box (max-height via --c4-hero-media-h; concept-c4.js misst bei
       Load/Resize/Slide-Wechsel/Sticky-Zustandswechseln und setzt die Variable
       auf dieser Shell). Die Rail darin bleibt overflow-y:auto mit Pfeil-
       Affordance. !important weiterhin noetig: desktop-sticky-gallery.js
       (eingefroren) setzt die Shell-Hoehe inline auf die Hauptbild-Hoehe. */
    height:calc(100vh - var(--desktop-gallery-header-height, 82px) - 34px)!important;
    max-height:var(--c4-hero-media-h, none)!important;
  }
  .desktop-thumb-rail{
    display:grid;grid-auto-rows:max-content;gap:12px;
    height:100%;min-height:0;max-height:100%;
    overflow-y:auto;overscroll-behavior:contain;
    padding:2px 4px 42px;
    scrollbar-width:none;
  }
  .desktop-thumb-rail::-webkit-scrollbar{display:none}

  .desktop-thumb-arrow{
    width:30px;height:30px;
    border:1px solid var(--hairline);border-radius:50%;
    background:rgba(255,255,255,.94);color:var(--ink);
    position:absolute;left:45px;z-index:3;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;opacity:1;
    transition:opacity .18s ease,border-color .18s ease,background .18s ease;
  }
  .desktop-thumb-arrow[hidden]{display:flex!important;opacity:0;pointer-events:none}
  .desktop-thumb-arrow:hover{border-color:var(--accent);background:var(--paper)}
  .desktop-thumb-arrow--up{top:2px}
  .desktop-thumb-arrow--down{bottom:2px}
  .desktop-thumb-arrow::before{
    content:"";width:9px;height:9px;
    border-left:2px solid currentColor;border-top:2px solid currentColor;
  }
  .desktop-thumb-arrow--up::before{transform:rotate(45deg) translate(2px,2px)}
  .desktop-thumb-arrow--down::before{transform:rotate(225deg) translate(2px,2px)}

  .desktop-gallery-thumb{
    position:relative;display:block;
    width:80px;aspect-ratio:4/5;padding:0;
    border:1.5px solid var(--hairline);border-radius:var(--r-btn);
    overflow:hidden;background:var(--alt);cursor:pointer;
    transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
  }
  .desktop-gallery-thumb:hover{border-color:var(--accent);transform:translateY(-1px)}
  .desktop-gallery-thumb.is-active{border-color:var(--accent);box-shadow:none}
  .desktop-gallery-thumb img{width:100%;height:100%;display:block;object-fit:cover}
  .desktop-gallery-thumb--video::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.24));
    pointer-events:none;
  }
  .desktop-gallery-thumb__play{
    position:absolute;left:50%;top:50%;z-index:1;
    width:28px;height:28px;border-radius:50%;
    background:rgba(255,255,255,.92);color:var(--ink);
    transform:translate(-50%,-50%);
    display:flex;align-items:center;justify-content:center;
    font-size:13px;line-height:1;
  }
  .desktop-gallery-thumb__play::before{
    content:"";width:0;height:0;margin-left:2px;
    border-top:6px solid transparent;border-bottom:6px solid transparent;
    border-left:9px solid currentColor;
  }

  /* Layout-Feinheiten Desktop */
  .c4-row{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:64px;align-items:center;
  }
  .c4-row__content{margin-top:0}
  .c4-row--media-right .c4-row__media{order:2}
  .c4-row--media-right .c4-row__content{order:1}
  .c4-row__media img{aspect-ratio:1/1}
  .benefits{grid-template-columns:1fr 1fr;gap:18px} /* R6.6: Karten 2x2 */
  .steps{grid-template-columns:repeat(3,1fr);gap:18px}

  .t-slide{flex-basis:100%}

  /* R7.1: Desktop 4 Spalten nebeneinander (~260px breite 9:16-Karten bei
     --maxw:1080; Tablet behaelt das 2x2-Raster der 768px-Regel) */
  .ingr-track{grid-template-columns:repeat(4,1fr);gap:18px}

  .proof-slide{flex-basis:22%}

  /* R14.4: Final-CTA auch desktop einspaltig zentriert — das fruehere
     2-Spalten-Grid (5fr/7fr) + sticky .cta-left entfaellt; Breite der
     Paketauswahl kommt aus der Basisregel .cta-right{max-width:600px}. */
  .cta-final-grid{gap:40px}

  .footer-columns{grid-template-columns:repeat(3,1fr);gap:40px}
  .footer-accordion{border-bottom:0}
  .footer-accordion summary{pointer-events:none}
  .footer-toggle-icon{display:none}
}

@media (min-width:768px) and (max-width:979px){
  .intro-breadcrumb{padding-top:18px}
}

/* ================================================================
   R13 (Betreiber-Feedback 23.07.) — Groessenangleichungen Richtung
   Original (Referenz new-fixed-soft, IST-Werte per computed styles
   gemessen; Vorher/Original/Nachher-Werte im R13-Report).
   ================================================================ */

/* R13.4: Hero-Rating-Sterne 16px -> 19px (= Originalniveau 19x19,
   mobil wie desktop). NUR das Hero-Rating (.rating) — Review-/Proof-
   Sterne behalten ihre eigenen Regeln (15/16px). Score-/Bewertungen-
   Text: Original 13px mobil / 15px desktop, wir bisher 14px ueberall
   -> mobil unveraendert (>= Original), ab 980px auf 15px angehoben. */
.rating .star{width:19px;height:19px}
@media (min-width:980px){
  .rating-score,.reviews{font-size:15px}
}

/* R13.5/R13.7/R13.8: Kit-Karten-Produktbilder (hero- UND final-Instanz,
   identische Klassen). Gemessen: Original 62px desktop(1440) / 48px
   mobil(390) — wir bisher 40px ueberall. Mittelweg: desktop 51px,
   mobil 44px. R13.8-Overflow-Schutz: Die Thumb-Reihe (bis 3 Thumbs +
   "+"-Verbinder) wird umbruchfaehig (flex-wrap) — auf 320-360px
   schmalen Karten bricht sie um, statt rechts aus der Karte zu ragen
   (vorher ragte sie dort schon mit 40px: products-row scrollWidth 155
   vs clientWidth 109 @320). */
.kit-card__products{flex-wrap:wrap}
.kit-card__product-img{width:44px;height:44px}
@media (min-width:980px){
  .kit-card__product-img{width:51px;height:51px}
}

/* R13.6: Cart-Thumbs ab 768px proportionaler Mittelweg (wir 44px
   ueberall; Original: Bundle-Zeile 64 -> 54px, Upsell-/Addon-Zeilen
   52 -> 48px, Bundle-Options-Thumbs 48 -> 46px). Mobil bleibt 44px;
   Raster/Radius unveraendert. */
@media (min-width:768px){
  /* Die R5.9-Raster fixieren die Thumb-Spalte auf 44px (grid-template-columns)
     und img{max-width:100%} clemmt die Bildbreite auf die Spalte — daher
     muessen die Spalten mitwachsen. */
  .ups-thumb,.ci-thumb{width:48px;height:48px}
  .ups-card{grid-template-columns:48px minmax(0,1fr) auto}
  .ci{grid-template-columns:48px minmax(0,1fr) auto}
  .ci-addon-main{grid-template-columns:48px minmax(0,1fr)}
  .ci-bundle-thumb{width:54px;height:54px}
  .ci-bundle-row--main{grid-template-columns:54px minmax(0,1fr)}
  .ci-bundle-row--child{grid-template-columns:16px 54px minmax(0,1fr)}
  .bundle-option-thumb{width:46px;height:46px}
}

/* ================================================================
   R16-B7 — A11y-Paket (tech-QA-05/06/07/11 + design-AD-04).
   ================================================================ */

/* B7(e) design-AD-04: globale :focus-visible-Regel mit vorhandenem
   Focus-Token — Fallback fuer ALLE interaktiven Elemente ohne eigene
   Regel (FAQ-Summaries, Footer-Links, Dots, Thumbs ...). Bestehende
   spezifischere Regeln (identische Optik) bleiben unangetastet;
   .kit-card:has(.kit-card__radio:focus-visible) existiert bereits. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}

/* B7(c) tech-QA-07: Touch-Targets < 44px — Hit-Areas per ::before-Overlay
   auf mind. 44x44 vergroessern, Optik unveraendert (transparentes Overlay,
   Element wird positioning context). Gemessene Ausgangsgroessen:
   cart-close 36x36, ci-remove 32x32, ci-decrease/-increase 28x28,
   site-header__cart 48x36 (nur Hoehe fehlt), t-dot/ingr-dot 7x7.
   Dots: Pitch = 7px + 8px gap = 15px -> Hit-Breite exakt 15px (kein
   Nachbar-Overlap, WCAG-2.5.8-Spacing-Ausnahme), Hoehe 44px. */
.cart-close,
.ci-remove,
.ci-decrease,
.ci-increase{position:relative}
.cart-close::before,
.ci-remove::before,
.ci-decrease::before,
.ci-increase::before{
  content:"";
  position:absolute;left:50%;top:50%;
  width:44px;height:44px;
  transform:translate(-50%,-50%);
  border-radius:50%;
}
/* .site-header__cart ist bereits position:relative (Badge) — nur Hoehe auf 44 */
.site-header__cart::before{
  content:"";
  position:absolute;left:0;right:0;top:50%;
  height:44px;
  transform:translateY(-50%);
}
.t-dot,
.ingr-dot{position:relative}
.t-dot::before,
.ingr-dot::before{
  content:"";
  position:absolute;left:50%;top:50%;
  width:15px;height:44px;
  transform:translate(-50%,-50%);
}

/* B7(b) tech-QA-06: Zutaten-Detail auch bei Tastatur-Fokus sichtbar
   (Parallel-Pfad zu :hover/.is-detail-open; Toggle via Enter/Space setzt
   .is-detail-open in concept-c4.js Modul 15). :focus-within statt :has —
   greift nur bei Keyboard-Fokus, da Maus/Touch die summary wegen
   pointer-events:none nie fokussieren. */
.ingr-acc:focus-within::after{opacity:1}
.ingr-acc:focus-within .ingr-panel{
  opacity:1;visibility:visible;
  transition:opacity .2s ease;
}

/* ================================================================
   R16.1 (Fund aus der ALT-F-Verifikation) — Maus-Wische auf dem Deck:
   Chromium startet bei Maus-Drags ueber dem grossen Kartenbild den nativen
   HTML5-Image-Drag (der Pointer-Stream reisst nach dem ersten pointermove
   ab, der Wisch verpufft; Touch-Pointer sind nicht betroffen). Nur unter
   dem armierten Deck <768 unterbinden; frozen JS unangetastet. */
@media (max-width:767px){
  .steps.js-armed .step img{-webkit-user-drag:none}
}

/* ---- R17 (aus ALT F, fresh-FR-13): Mini-Fortschritts-Dots unter dem Card-Deck ----
   Container haengt concept-c4.js als Sibling NACH .steps ein; sichtbar
   nur <768 unter .js-armed (Deck aktiv). Ab 768 (Grid) und ohne JS:
   display:none. Aktiver Dot = oberste Karte (Originalindex). */
.c4-deck-dots{display:none}
@media (max-width:767px){
  .steps.js-armed ~ .c4-deck-dots{
    display:flex;justify-content:center;gap:8px;margin-top:16px;
  }
  .c4-deck-dot{
    width:8px;height:8px;border-radius:50%;
    background:rgba(0,0,0,.16);
    transition:background .2s ease,transform .2s ease;
  }
  .c4-deck-dot.is-active{background:var(--accent);transform:scale(1.15)}
}

/* ================================================================
   C4B — Badge-Hero (R3.7 + R4.1 + R5.1 + R6.1/R6.2). NUR in der Kopie fuer
   concept-c4b-badgehero; alle Regeln .c4b-scoped (Body-Zusatzklasse), A bleibt
   unberuehrt. Referenz: Flow-Neuroscience-Hero (Trust-Chips ueber dem Hero-Bild,
   Hero-Bild mobil mit Seitenrand + Rundung statt full-bleed).
   ================================================================ */

/* R6.1: Chip-Reihenfolge neu (Nur 15 Minuten / 8 Stufen heller / Peroxidfrei /
   Ohne Termin / Testsieger — Testsieger ans Ende) — weiterhin ALLE 5 Chips in
   EINER Zeile ohne Scrollen/Umbruch, zentriert, auch bei 360px. Kompakt: font 11px,
   padding 5px 6px, gap 5px, nowrap; unter 390px per Media-Query font 10.5px, gap 4px
   (Stufen nachgemessen, s. R6-Report). */
.c4b .c4b-chips{
  display:flex;justify-content:center;flex-wrap:nowrap;gap:5px;
  overflow:visible;
  padding:14px 8px 10px;
}
.c4b .c4b-chip{
  flex:0 0 auto;
  display:inline-flex;align-items:center;
  background:var(--alt);color:var(--ink);
  border:1px solid var(--hairline);border-radius:var(--r-pill);
  font-size:11px;font-weight:400;line-height:1;
  padding:5px 6px;white-space:nowrap;
}
@media (max-width:389px){
  .c4b .c4b-chips{gap:4px;padding-left:6px;padding-right:6px}
  .c4b .c4b-chip{font-size:10.5px;padding:5px 5px}
}

/* Mobil: Hero-Bild NICHT full-bleed — Seitenrand --pad, --r-media-Rundung
   (wie die uebrigen Bilder); Thumbnail-Leiste darunter unveraendert
   (eigene --pad-Innenabstaende, gleiche Fluchtlinie). BESTSELLER-Badge
   bleibt mobil versteckt (Regel aus A gilt fort). */
@media (max-width:767px){
  .c4b .intro .carousel{padding:0 var(--pad)}
  .c4b .intro .carousel-track .media{border-radius:var(--r-media)}
  .c4b .intro .carousel-track .ratio>img{border-radius:var(--r-media)}
}

/* Ab 768px traegt .intro selbst die Seitenabstaende — Chips buendig ueber
   dem Hero-Grid, normale Groesse (13px), weiterhin EINE Zeile (Platz reicht).
   Desktop-Hero bleibt wie A (Thumb-Rail + grosses gerundetes Bild). */
@media (min-width:768px){
  .c4b .c4b-chips{
    padding:0 0 16px;gap:8px;
    overflow:visible;flex-wrap:nowrap;
  }
  .c4b .c4b-chip{font-size:13px;padding:7px 14px}
}

/* R6.2: ab 980px Chip-Reihe linksbuendig — buendig mit der linken Kante des
   Hero-Grids/Containers (.c4b-chips ist Kind von .intro; die 768px-Regel setzt
   padding-left bereits auf 0, die Fluchtlinie kommt vom .intro-Padding wie beim
   .intro-grid). Mobil bleibt zentriert. */
@media (min-width:980px){
  .c4b .c4b-chips{justify-content:flex-start}
}

/* R16-B4 (tech-QA-03): <=352px passen die 5 Chips nicht mehr in EINE Zeile
   (320px: scrollWidth 334 > 320, beidseitig abgeschnitten + horizontales
   Seiten-Scrolling). Ab dieser Grenze zweizeilig (flex-wrap, weiter
   zentriert) statt Ueberlauf. */
@media (max-width:352px){
  .c4b .c4b-chips{flex-wrap:wrap}
}

/* ================================================================
   R18-T4: Mobile (<768) Hero — Full-Bleed beim Swipen, Ruhezustand
   optisch UNVERAENDERT. Der Seitenabstand --pad wandert vom
   .carousel-Container IN die Slides (border-box, flex-basis 100%
   der jetzt viewportbreiten Trackflaeche); Rundung liegt weiterhin
   auf .media. Clip-/Drag-Flaeche = volle Viewportbreite, Bilder
   wandern beim Wischen bis zur Bildschirmkante statt an der
   Container-Kante zu clippen. gap 0: Snap-Punkte = exakt
   k * Viewportbreite; die eingefrorenen Engine-Formeln
   (offsetLeft - (clientWidth - offsetWidth)/2) werden damit exakt
   (vorher +--pad-Offset, den das mandatory Snapping korrigierte).
   Ruhe-Geometrie identisch: Media [--pad, 100vw - --pad], Hoehe
   unveraendert (ratio bezieht sich auf die Slide-CONTENT-Breite).
   >=768 (Tablet/Rail) unveraendert.
   ================================================================ */
@media (max-width:767px){
  .c4b .intro .carousel{padding:0}
  .c4b .intro .carousel-track{gap:0}
  .c4b .intro .carousel-track>.slide{padding:0 var(--pad)}
}

/* ================================================================
   c4s-r1-20260723 — Single-Produkt-Modus (c4_single_79).
   Portierung der WIRKUNG des Inline-<style>-Blocks new-single-79.html
   Z.97-159 auf das C4-C-Markup (SPEC_C4_SINGLE Punkt 3+4):
   - Set-Auswahl (Hero + Final), Addon-Toggle-Buttons und der
     Cart-Set-Wechsler #cartBundleOptionsWrap (+ folgende .hr) sind
     im Single-Modell bedeutungslos -> hart verstecken (doppelt
     getragen: hidden-Attribute im Template + diese Regeln; runtime
     syncSingleUi blendet bei site_family==='new' zusaetzlich per JS).
   - Die .kit-hidden-Addon-Checkliste im Final-CTA wird SICHTBAR
     (display:block schlaegt [hidden], neue-single-79-Muster) und in
     der bestehenden C4-C-Formsprache gestylt (Karten wie .kit-addon,
     Akzent-Checkbox, Preis-Pille wie .cta-badge; KEINE neuen Texte —
     alle Labels/Preise stehen im Template).
   - #optPowder-Zeile (.b-item--powder) bleibt versteckt (Parity zu
     new-single-79; Powder nur als Cart-Upsell erreichbar).
   C4-C-eigene Abweichung zur Vorlage: das buy-panel behaelt seine
   R17-Karten-Optik (kein Chrome-Strip noetig — Panel enthaelt weiter
   Qty/CTA/Payments); .single-offer-card existiert im C4-C-Markup
   nicht; .cta-right ist in C4-C ohnehin display:block.
   ================================================================ */
body.sb-single-product .buy-panel .kit-cards,
body.sb-single-product .buy-panel .kit-cards__head,
body.sb-single-product .buy-panel .kit-cards__grid,
body.sb-single-product .buy-panel .kit-addons__title,
body.sb-single-product .buy-panel .kit-addon,
body.sb-single-product .cta-final .kit-cards,
body.sb-single-product .cta-final .kit-addon,
body.sb-single-product .cta-final .b-item--powder,
body.sb-single-product #cartBundleOptionsWrap,
body.sb-single-product #cartBundleOptionsWrap + .hr{
  display:none !important;
}

body.sb-single-product .cta-final .kit-hidden{
  display:block !important;
}

/* Addon-Checkliste: Zeilen als C4-C-Karten (Formsprache .kit-addon) */
body.sb-single-product .cta-final .kit-hidden .b-item{
  display:flex;align-items:center;gap:12px;
  width:100%;margin-bottom:8px;padding:12px 14px;
  background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-card);
  cursor:pointer;text-align:left;
  transition:border-color .15s ease,background .15s ease;
}
body.sb-single-product .cta-final .kit-hidden .b-item:hover{border-color:rgba(0,0,0,.18)}
body.sb-single-product .cta-final .kit-hidden .b-item:has(.b-check:checked){
  border-color:var(--accent);background:var(--accent-tint);box-shadow:inset 0 0 0 1px var(--accent);
}
body.sb-single-product .cta-final .kit-hidden .b-item:has(.b-check:focus-visible){
  outline:3px solid var(--focus-ring);outline-offset:2px;
}
body.sb-single-product .cta-final .kit-hidden .b-thumb{
  width:44px;height:44px;border-radius:10px;background:var(--alt);
  padding:2px;object-fit:contain;flex:0 0 auto;
}
body.sb-single-product .cta-final .kit-hidden .b-item:has(.b-check:checked) .b-thumb{background:#fff}
body.sb-single-product .cta-final .kit-hidden .b-item > div:not(.b-right){min-width:0;flex:1 1 auto}
body.sb-single-product .cta-final .kit-hidden .b-name{font-size:14px;font-weight:700}
body.sb-single-product .cta-final .kit-hidden .b-sub{font-size:12px;color:var(--ink-2)}
body.sb-single-product .cta-final .kit-hidden .b-right{
  display:flex;align-items:center;flex-direction:row-reverse;gap:12px;flex:0 0 auto;
}
body.sb-single-product .cta-final .kit-hidden .b-check{
  width:20px;height:20px;margin:0;flex:0 0 auto;
  accent-color:var(--accent);cursor:pointer;
}
body.sb-single-product .cta-final .kit-hidden .b-pricing{text-align:right}
body.sb-single-product .cta-final .kit-hidden .b-save{
  display:flex;align-items:center;justify-content:flex-end;gap:6px;
}
body.sb-single-product .cta-final .kit-hidden .b-old{
  font-size:12px;color:var(--ink-2);text-decoration:line-through;
}
body.sb-single-product .cta-final .kit-hidden .b-off{
  font-size:11px;font-weight:700;color:var(--accent);
  background:var(--accent-tint);border-radius:var(--r-pill);padding:2px 8px;
}
body.sb-single-product .cta-final .kit-hidden .b-price{
  font-size:14px;font-weight:700;letter-spacing:-0.01em;
}
@media (max-width:767px){
  body.sb-single-product .cta-final .kit-hidden .b-item{padding:12px}
  body.sb-single-product .cta-final .kit-hidden .b-right{gap:10px}
}

/* c4s-r1-20260723 — Preis-Flacker-Gate fuer den Single-Modus (Messbefund:
   die EINGEFRORENE Engine main-beta5-b.js schreibt bei init applySelection('plus')
   transient 119,00/208,99 in die Preis-Hooks, bevor Modul 21 in concept-c4c.js
   und die Runtime 79,00/159,00 wiederherstellen — ein rAF-Sample zeigte den
   119-Frame). Gleiches Muster wie das bestehende R17-Gate fuer
   sb-fixed-bundle-static (Z.oben): Preis-Knoten bleiben unsichtbar
   (visibility, layoutstabil), bis Modul 21 sb-runtime-ready setzt —
   der erste SICHTBARE Preis ist damit garantiert 79,00/159,00. */
body.sb-single-product:not(.sb-runtime-ready) #priceNow,
body.sb-single-product:not(.sb-runtime-ready) #priceOld,
body.sb-single-product:not(.sb-runtime-ready) #saveText,
body.sb-single-product:not(.sb-runtime-ready) #ctaPriceText,
body.sb-single-product:not(.sb-runtime-ready) #ctaOldPriceText,
body.sb-single-product:not(.sb-runtime-ready) #ctaDiscount,
body.sb-single-product:not(.sb-runtime-ready) #mobileCtaNow,
body.sb-single-product:not(.sb-runtime-ready) #mobileCtaOld,
body.sb-single-product:not(.sb-runtime-ready) #mobileCtaLabel{
  visibility:hidden;
}