/** Shopify CDN: Minification failed

Line 3500:4 Expected percentage but found "entry"
Line 3500:10 Expected "," but found "0%"
Line 4447:6 Expected percentage but found "entry"
Line 4447:12 Expected "," but found "0%"
Line 6291:0 Unexpected "\"> <div class=\""
Line 6291:70 Unterminated string token

**/
/* ═══ IN EINER CSS-EBENE (@layer s304) ═══════════════════════════════════
   22.09.2026. Diese Datei liegt vollstaendig in der Ebene `s304`.

   ⭐⭐ WARUM — live getestet, mit Positivkontrolle:
     Regel in der ersten Ebene, Waehler `.probe`            (0,1,0)
     gegen spaetere Regel `html body div#id p#id.class`     (1,2,4)
     → DIE EBENE GEWINNT. Ohne Ebene verliert dieselbe Regel.
   Damit ist der Spezifitaetskrieg vorbei: diese Seite hat 39 CSS-Ebenen,
   meine Datei ist Nummer 16, und 23 kommen danach. Ueber die Ebene gewinne
   ich trotzdem — ohne lange Waehlerketten, ohne Klassen zaehlen.

   ⛔ WAS DIE EBENE NICHT SCHLAEGT: ein `!important` direkt am Element
   (`style="…"`, von fremdem JS gesetzt). Getestet, es bleibt unschlagbar.
   Diese ~6 Faelle erledigt `s304-haus.js`.

   ⛔ JEDE ANGABE HIER BRAUCHT `!important` — und zwar aus einem genauen
   Grund: alles andere im Theme ist UNGESCHICHTET, und fuer normale Angaben
   gewinnt Ungeschichtetes. Nur bei `!important` dreht sich die Reihenfolge
   um. Das ist kein Rueckfall in das alte Muster: es sind nicht mehr 2.835
   Einzelgefechte, sondern EINE Aussage — diese Ebene gewinnt.
   ═══════════════════════════════════════════════════════════════════════ */
@layer s304 {
/* ═══ S304-PDP ═══════════════════════════════════════════════════════════
   Das Stylesheet der neuen Produktseite.

   ⭐ HIER STEHT KEIN EINZIGES `!important`. Das ist kein Stilgefühl, sondern
   der Grund, warum es diese Datei gibt: die alte `304-custom.css` trägt
   2.835 davon, und jede neue Zeile musste gegen die vorigen gewinnen.
   Alles hier ist unter `.s304-neu` eingesperrt — es kann nichts anderes
   treffen, und nichts muss überschrieben werden.

   Werte aus Fassung A des Entwurfs, gemessen übernommen.
   ══════════════════════════════════════════════════════════════════════ */

.s304-neu{
  --rand: 16px !important;
  --r: 22px !important;
  --ink: #15130F !important;
  --leise: #8A837C !important;
  --linie: #ECE7E0 !important;
  --flaeche: #FFFFFF !important;
  --wurf: 0 16px 36px -14px rgba(30,24,18,.44), 0 3px 8px -2px rgba(30,24,18,.13) !important;
  --kante:
    inset 0 0 0 1px rgba(255,255,255,.95),
    inset 0 -18px 18px -16px rgba(122,106,88,.18),
    0 6px 14px -6px rgba(60,48,38,.22) !important;

  color: var(--ink) !important;
  padding-bottom: 96px !important;   /* Platz fuer die Schwebeleiste */
}

/* ── Der Kasten. EIN Rezept, das alle teilen ────────────────────────────
   Deckend, nicht durchsichtig: eine Flaeche mit Alpha ueber einem
   ungleichen Grund IST zwangslaeufig verschieden hell. Genau daran sind
   die „unterschiedlichen Weisstoene" entstanden. */
.s304-neu .s304-karte{
  margin: 10px var(--rand) 0 !important;
  padding: 13px !important;
  background: var(--flaeche) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--wurf) !important;
  box-sizing: border-box !important;
}

/* ── Titelzeile ──────────────────────────────────────────────────────── */
.s304-neu .s304-kopfzeile{
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 10px !important;
}
.s304-neu .s304-titel{
  margin: 0 !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
  line-height: 1.2 !important;
}
.s304-neu .s304-preis{
  font-size: 19px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

/* ── Galerie: scroll-snap statt fremder Slideshow ────────────────────────
   Das Wischen macht der Browser. Kein Transform, kein fremdes JS, nichts,
   das stehenbleiben kann. */
.s304-neu .s304-galerie{
  display: flex !important;
  margin-top: 10px !important;
  border-radius: 20px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}
.s304-neu .s304-galerie::-webkit-scrollbar{ display: none; }
.s304-neu .s304-dia{
  flex: 0 0 100% !important;
  aspect-ratio: 1 !important;
  scroll-snap-align: start !important;
  overflow: hidden !important;
}
.s304-neu .s304-dia img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;   /* wie live gemessen — kein weisser Balken bei Hochformat */
  display: block !important;
}

/* ── Miniaturen: alle nebeneinander, kein Roller ─────────────────────────
   Der Laden hat sieben Bilder. Sie werden nicht auf vier gekuerzt, damit
   ein Entwurf stimmt — der Entwurf bildet den Laden ab, nicht umgekehrt. */
.s304-neu .s304-mini__reihe{
  display: flex !important;
  gap: 5px !important;
  margin-top: 9px !important;
}
.s304-neu .s304-mini__k{
  flex: 1 1 0 !important;
  min-width: 0 !important;
  aspect-ratio: 1 !important;
  padding: 0 !important;
  border: 0 !important;
  background: var(--flaeche) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  box-shadow: var(--kante) !important;
}
.s304-neu .s304-mini__k.is-active{
  outline: 2px solid var(--ink) !important;
  outline-offset: 1px !important;
}
.s304-neu .s304-mini__k .product__thumb__link,
.s304-neu .s304-mini__k img{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* ── Geschenkblock ───────────────────────────────────────────────────── */
.s304-neu .s304-gk-kopf{
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 8px !important;
}
.s304-neu .s304-gk-kopf .t{ font-size: 15px; font-weight: 800; }
.s304-neu .s304-gk-kopf .chip{
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  background: var(--ink) !important;
  color: #FFFFFF !important;
  padding: 3px 8px !important;
  border-radius: 99px !important;
  white-space: nowrap !important;
}
.s304-neu .s304-gk-sub{
  margin: 5px 0 9px !important;
  font-size: 12px !important;
  color: var(--leise) !important;
}
/* Die Kacheln baut das JS. Hier nur ihr Mass —
   1 : 1, weil Enzo quadratisch wollte; das Stueck fuellt dann rund die
   halbe Hoehe, weil `cover` im Quadrat nichts wegschneidet. */
.s304-neu .s304-vk{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 7px !important;
}
.s304-neu .s304-vk__p{
  padding: 0 0 3px !important;
  border: 0 !important;
  background: none !important;
  cursor: pointer !important;
  text-align: center !important;
  min-width: 0 !important;
}
.s304-neu .s304-vk__b{
  /* ⛔ 23.09.: `aspect-ratio: 1` war der Grund fuer Enzos „bei der Auswahl
     sind die Bracelets nicht zu erkennen". Gerechnet, nicht geschaetzt:
         Bilddatei   240 × 132 → Verhaeltnis 1.82
         Kasten war  81 × 81   → Verhaeltnis 1.00
         `cover` skaliert auf die HOEHE: 81 hoch ⇒ 147 breit
         ⇒ 66 px zu breit ⇒ **45 % der Bildbreite fallen weg**, je 33 px
           links und rechts — genau dort, wo das Bracelet liegt.
     Das Artefakt schreibt 1.7 vor und begruendet es selbst:
     „in allen vier Packshots nimmt das Stueck 52–56 % der Bildhoehe ein …
      bis 1,78:1 schneidet `cover` nur weissen Rand weg — nie das Bracelet."
     ⭐ Ich nehme `contain` statt `cover`: Enzos Regel „duerfen nie
     abgeschnitten sein" schlaegt „perfekt zugeschnitten".
     ⭐ Und der Grund wird #FFFFFF statt var(--flaeche) — bei `contain` waere
     ein getoenter Grund als Balken sichtbar. Das Artefakt sagt ebenfalls
     `background:#FFFFFF`. */

  display: block !important;
  position: relative !important;
  aspect-ratio: 1.7 !important;
  border-radius: 13px !important;
  overflow: hidden !important;
  background: #FFFFFF !important;
  box-shadow: var(--kante) !important;
}
.s304-neu .s304-vk__p.an .s304-vk__b{
  outline: 2px solid var(--ink) !important;
  outline-offset: 1px !important;
}
.s304-neu .s304-vk__b img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}
.s304-neu .s304-vk__n{
  display: block !important;
  margin-top: 5px !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;   /* sichtbar kuerzen, nie stillschweigend */
}
.s304-neu .s304-vk__pr{
  display: block !important;
  font-size: 9px !important;
  color: var(--leise) !important;
}
.s304-neu .s304-vk__pr s{ margin-right: 3px; }

/* ── Kaufknopf ───────────────────────────────────────────────────────── */
.s304-neu .s304-kaufzeile{ margin: 10px var(--rand) 0; }
.s304-neu .s304-cta{
  width: 100% !important;
  height: 58px !important;
  border: 0 !important;
  border-radius: 99px !important;
  background: linear-gradient(#2A2624, #111010) !important;
  color: #FFFFFF !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: .2px !important;
  text-transform: none !important;
  cursor: pointer !important;
  box-shadow: 0 10px 22px -8px rgba(16,16,18,.75) !important;
}
.s304-neu .s304-cta .btn__text{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 0 22px !important;
  box-sizing: border-box !important;
}
/* ac2 30.09. Enzo (Punkt 2): „Beide in den Warenkorb unten nicht zentriert."
   Gemessen: ohne Preis stand der Text 28-48 px links der Mitte - space-between
   schiebt ein einzelnes Kind nach links. Die Gegenregel `:not(:has(.s304-cta-p))`
   stand ausserhalb des Layers und verlor. Jetzt: zentriert; links/rechts nur,
   wenn wirklich ein Preis im Knopf steht. */
.s304-neu .s304-cta .btn__text:has(.s304-cta-p),
.s304-neu .s304-cta .btn__text:has(.s304-cta-preis){
  justify-content: space-between !important;
}

/* ── Die vier Fragen ─────────────────────────────────────────────────── */
.s304-neu .s304-frage{ padding: 0; }
.s304-neu .s304-frage__k{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 16px 15px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  cursor: pointer !important;
  list-style: none !important;
}
.s304-neu .s304-frage__k::-webkit-details-marker{ display: none; }
.s304-neu .s304-frage[open] .s304-frage__k svg{ transform: rotate(180deg); }
.s304-neu .s304-frage__k svg{ color: var(--leise); flex: none; transition: transform .2s ease; }
.s304-neu .s304-frage__b{
  padding: 0 15px 15px !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;
}
.s304-neu .s304-frage[data-ic] .s304-frage__k{ color: #8C6F12; }

/* ── Abstaende: EIN Wert, nicht drei ─────────────────────────────────── */
.s304-neu > .product__block,
.s304-neu > details.product__block{ margin-top: 10px; }

/* ── Der Geschenkblock: gebaut vom JS, gestylt von hier ─────────────────
   ⛔ Ich baue ihn NICHT nach. `304-custom.js` hängt ihn an
   `.product__submit__item`, also direkt über den Kaufknopf. Hier bekommt er
   nur die Form der anderen Kästen. */
.s304-neu .s304-huelle{
  margin: 10px var(--rand) 0 !important;
  padding: 13px 12px 14px !important;
  background: var(--flaeche) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--wurf) !important;
  box-sizing: border-box !important;
}
/* Die ÄNDERN-Zeile des JS: ruhig, nicht als zweiter Knopf. */
.s304-neu .s304-duo{
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  width: 100% !important;
  padding: 10px 11px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: #FFFFFF !important;
  cursor: pointer !important;
  text-align: left !important;
  font-size: 12.5px !important;
}

/* ── Versandzeile ───────────────────────────────────────────────────────
   Das JS setzt sie ganz oben in die Seite. Sie hatte hier kein Kleid mehr
   und lag deshalb über dem Titel — gemessen y78→98, mitten in der Karte. */
.s304-neu .s304-vkopf{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 9px !important;
  row-gap: 7px !important;
  margin: 0 var(--rand) 4px !important;
  padding: 2px 2px 6px !important;
  font-size: 12.5px !important;
  box-sizing: border-box !important;
}
.s304-neu .s304-vkopf b{ font-weight: 700; white-space: nowrap; }
.s304-neu .s304-vkopf em{ font-style: normal; color: var(--leise); white-space: nowrap; margin-left: auto; }
.s304-neu .s304-vbar{
  flex: 0 0 100% !important;
  height: 7px !important;
  border-radius: 99px !important;
  background: rgba(0,0,0,.09) !important;
  position: relative !important;
  overflow: hidden !important;
}
.s304-neu .s304-vbar i{
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  background: var(--ink) !important;
  border-radius: 99px !important;
}

/* ── Das Warenkorb-Schubfach gehört nicht in den Fluss ───────────────────
   Gemessen: `.cart__buttons-all` stand mit „JETZT SICHER ZUR KASSE" bei
   y762 mitten auf der Produktseite — ein zweiter Kaufknopf, der dort nichts
   zu suchen hat. Er gehört ins Schubfach; die alte Schicht hatte ihn
   verdeckt, meine nicht. */
.s304-neu ~ .cart__buttons-all,
.s304-neu .cart__buttons-all{ display: none; }

/* ── „18 sehen sich das gerade an" ──────────────────────────────────────
   Gemessen y586 gegen Miniaturen bis y596 — sie lag DRAUF. Der Block aus
   dem alten Theme bringt eigene Positionierung mit, die hier nicht mehr
   greift; also bekommt er hier eine eigene, ruhige Zeile. */
.s304-neu .v-gold-badge-container{
  display: block !important;
  margin: 12px 0 0 !important;
  padding: 0 !important;
}
.s304-neu .v-gold-dot{
  position: static !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  color: var(--leise) !important;
  line-height: 1.2 !important;
}

/* ── Die Auswahl-Zeile des JS ───────────────────────────────────────────
   Sie sagt, was gerade gratis dabei ist, und öffnet die Auswahl. Ein Satz
   mit einem Link — kein zweiter Kaufknopf. */
.s304-neu .s304-huelle .s304-tg{ flex-grow: 1; min-width: 0; }
.s304-neu .s304-pop{ margin-top: 10px; }

/* ── Drei Umbrüche, die aus dem alten Markup mitkommen ──────────────────
   Die übernommenen Blöcke bringen ihre eigenen Maße mit. Hier bekommen sie
   die der neuen Seite — einmal, an einer Stelle. */

/* 1 · Sternezeile: eine Zeile, Chip rechts, wie im Entwurf.
       „· 14 Tage Rückgabe" steht schon im Kaufknopf — doppelt, also weg. */
.s304-neu .pdp-reviews-member-row{
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  margin-top: 6px !important;
  white-space: nowrap !important;
}
.s304-neu .pdp-reviews-member-row > a{
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  flex: 1 1 auto !important;
  width: 100% !important;
}
.s304-neu .pdp-reviews-member-row .custom-star-row{
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  width: 100% !important;
  flex: 1 1 auto !important;
}
.s304-neu .s304-info-plus{ display: none; }
.s304-neu .pdp-reviews-member-row .s304-pf{ margin-left: auto; flex: none; }

/* 2 · „18 sehen sich das gerade an" lag 2 px auf den Miniaturen. */
.s304-neu .v-gold-badge-container{ margin-top: 14px; clear: both; }

/* 3 · Die Kopfzeile des Geschenkblocks brach um: Titel und Chip
       brauchten zusammen mehr als die Zeile hergab. */
.s304-neu .s304-huelle .s304-gk-kopf{ flex-wrap: nowrap; }
.s304-neu .s304-huelle .s304-gk-kopf .t{ font-size: 14px; white-space: nowrap; }
.s304-neu .s304-huelle .s304-gk-kopf .chip{ font-size: 9px; padding: 3px 7px; }

/* ── Der Hochzieher aus dem alten Block ─────────────────────────────────
   ⭐ Gemessen: `.v-force-up-wrapper` heisst nicht umsonst so — die Karte
   darunter trägt `margin-top: -7px`. Im alten Layout hat das die Zeile
   „18 sehen sich das gerade an" dicht unter die Miniaturen gezogen. Hier
   zieht es sie DRAUF. Der Griff wird gelöst, nicht überschrieben. */
.s304-neu .v-force-up-wrapper{ margin-top: 0; }
.s304-neu .product__mobile-header.s304-karte{ margin-top: 10px; }
.s304-neu .v-force-up-wrapper + *{ margin-top: 0; }

/* ══ SPEZIFITÄT STATT `!important` ═══════════════════════════════════════
   Gemessen gegen Fassung A — vier Werte kamen nicht an, weil die Regeln des
   Themes spezifischer sind als meine:
     Titel      16px/400  statt 19/700   (`.product__title` gewinnt)
     Kaufknopf  r0 · 16/700 statt r99 · 17/600  (`.btn` gewinnt)
     Miniatur   33×54     statt quadratisch
     Band       387 breit, r0 statt 355, r22
   ⭐ Die Antwort ist NICHT `!important` — das war der alte Weg und hat 2.835
   davon erzeugt. Die Antwort ist, die Spezifität der Theme-Regel zu TREFFEN:
   deren Klasse plus meine. Das bleibt lesbar und kaskadiert sauber weiter. */

.s304-neu .product__title.s304-titel{
  font-size: 19px !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

.s304-neu .btn.s304-cta{
  width: 100% !important;
  height: 58px !important;
  border: 0 !important;
  border-radius: 99px !important;
  background: linear-gradient(#2A2624, #111010) !important;
  color: #FFFFFF !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: .2px !important;
  text-transform: none !important;
  box-shadow: 0 10px 22px -8px rgba(16,16,18,.75) !important;
}

.s304-neu .product__thumb.s304-mini__k{
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  aspect-ratio: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Das Band steht ÜBER der Section, also ausserhalb von `.s304-neu`.
   Deshalb hier am Body festgemacht — aber nur auf der neuen Seite
   (`s304-neu-an` setzt der Schalter in `grundMalen`). */
body.s304-neu-an .ic-top-ticker{
  margin: 0 16px !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  background: #000000 !important;
}


/* === S304-FASSUNG-A · 22.09. =============================================
   Die Werte aus Fassung A (KastenPlastisch), gegen die !important-Schicht
   des Themes durchgesetzt. GEMESSEN, wer gewinnt — nicht geraten:

     Titel      inline          .template-product .product__title      16px !important
     Kaufknopf  304-custom.css  body .product__submit__item .btn.btn--large
                                .btn--solid.btn--black                 16px !important  (0,5,1)
     Kaufknopf  theme.css       .template-product .product-form__submit 13px !important
     Kaufknopf  inner-circle    .btn--large.btn--solid.btn--black       15px !important
     Miniatur   304-custom.css  .product__thumbs .product__thumb        54px !important

   Zwei Lehren, die hier als Bauform stehen:
   1. Spezifitaet schlaegt !important NIE — aber bei gleichem !important
      entscheidet sie. Darum `html body .s304-neu ...` = (0,5,2) gegen (0,5,1).
      Bewusst NICHT ueber die Theme-Modifier (.btn--large.btn--solid...):
      die koennen sich aendern, `html body` nicht.
      !! ZAEHLFEHLER, den ich hier gemacht habe: `html body .s304-neu
      .product__submit__item .btn.s304-cta` sind 4 Klassen + 2 Typen =
      (0,4,2) — und das VERLIERT gegen (0,5,1), weil die Klassenspalte
      zuerst verglichen wird und 4 < 5 ist. Zwei Typen wiegen keine
      fehlende Klasse auf. Darum steht `.s304-kaufzeile` mit drin: 5
      Klassen + 2 Typen = (0,5,2) > (0,5,1).
   2. Die Miniaturen waren nicht zu hoch, sie wurden GESTRECKT.
      `.s304-mini__reihe` ist ein Flex-Container mit align-items:normal
      (= stretch), und ein gestreckter Flex-Artikel ignoriert aspect-ratio
      auf der gestreckten Achse. flex-start loest es, kein weiteres Mass.
   ========================================================================= */

html body .s304-neu .product__title.s304-titel{
  font-size:19px !important;
  font-weight:700 !important;
  line-height:1.2 !important;
  letter-spacing:.01em !important;
  text-transform:none !important;
}

html body .s304-neu .s304-kaufzeile .product__submit__item .btn.s304-cta,
html body .s304-neu .s304-kaufzeile .product__submit__item button.btn.s304-cta{
  height:58px !important;
  min-height:58px !important;
  border-radius:99px !important;
  font-size:17px !important;
  font-weight:600 !important;
  letter-spacing:.01em !important;
  text-transform:none !important;
}
html body .s304-neu .s304-kaufzeile .product__submit__item .btn.s304-cta .btn__text,
html body .s304-neu .s304-kaufzeile .product__submit__item .btn.s304-cta .s304-cta-l{
  font-size:inherit !important;
  font-weight:inherit !important;
  letter-spacing:inherit !important;
  text-transform:none !important;
}

/* ⭐ Der eigentliche Schalter fuer die quadratischen Miniaturen. */
html body .s304-neu .product__thumbs__holder.s304-mini__reihe{
  align-items:flex-start !important;
}
/* ⛔ ENTFERNT 23.09.: diese Regel quetschte ALLE Miniaturen in eine
   Reihe (`flex:1 1 0`) und machte sie dadurch 38 px klein. Enzo:
   „die Vorschau-Thumbnails sind zu klein."
   Bei acht Bildern auf 344 px geht beides nicht — gross UND alle
   sichtbar. Jetzt 54 px in einer wischbaren Reihe (S304-ENZOLISTE).
   ⭐ Entfernt statt ueberboten: drei Regeln fuer eine Groesse waren
   genau das Muster, das ich am Theme kritisiert habe. */

html body .s304-neu .product__thumb.s304-mini__k .product__thumb__link,
html body .s304-neu .product__thumb.s304-mini__k img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}

/* === S304-BILD-2209 · die drei Stellen aus Enzos Screenshot ==============
   GEMESSEN auf /products/line47, nicht nach Augenmass:

     .s304-gk-kopf          331×39, flex nowrap, gap 8
       .t  „Das schenken wir dir"   141×17  14px/800   ✓ in Ordnung
       .c  „1 KAUFEN · 1 GESCHENKT" 182×39  16px/400   <- GAR NICHT GESTYLT
     .s304-vk__alle „Alle 3 ansehen" 123×18  16px/400  <- ebenfalls nackt
     .s304-mini endet T575, die Live-Zeile beginnt T575  <- 0 px Luft

   Der Chip war nie ein Chip: 16px Fliesstext in einem 182-px-Kasten bricht
   zwangslaeufig auf zwei Zeilen und macht die Kopfzeile 39 px hoch. Deshalb
   sah es aus, als waere etwas ueberschrieben — es war nur ungestylt.
   ⭐ Und 0 px Abstand ist kein Ueberlapp, sieht aber wie einer aus.
   ========================================================================= */

html body .s304-neu .s304-gk-kopf{
  align-items:center !important;
  flex-wrap:nowrap !important;
  gap:8px !important;
}
html body .s304-neu .s304-gk-kopf .t{
  flex:0 0 auto !important;
  white-space:nowrap !important;
}
html body .s304-neu .s304-gk-kopf .c{
  flex:0 1 auto !important;
  font-size:9.5px !important;
  font-weight:700 !important;
  letter-spacing:.06em !important;
  line-height:1 !important;
  white-space:nowrap !important;
  color:#FFFFFF !important;
  background:#15130F !important;
  padding:5px 9px !important;
  border-radius:99px !important;
  align-self:center !important;
}

html body .s304-neu .s304-vk__alle{
  font-size:11px !important;
  font-weight:700 !important;
  letter-spacing:.04em !important;
  text-transform:uppercase !important;
  color:#15130F !important;
  background:none !important;
  border:0 !important;
  border-bottom:1.5px solid #15130F !important;
  padding:0 0 2px !important;
  margin:10px auto 0 !important;
  display:block !important;
  cursor:pointer !important;
}

/* Luft zwischen Miniaturen und „zuletzt bestellt". */
html body .s304-neu .s304-mini{
  margin-bottom:10px !important;
}

/* === S304-LUFT-2209 · der zweite Griff im force-up-wrapper ===============
   Meine `margin-bottom:10px` an den Miniaturen GREIFT (computed 10px) —
   die Luft war trotzdem 0. Grund, gemessen:

       .v-force-up-wrapper   position:relative;  top:-14px

   Das Element zieht sich selbst hoch und frisst den Abstand auf. Es ist
   fuer das ALTE Layout gebaut, wo die Zeile bewusst in die Bildkante
   ragen sollte. Im Neubau sitzt sie unter einer Karte — da ist derselbe
   Griff ein Ueberlapp.
   ⭐ Die Lehre, die schon zweimal Geld gekostet hat: ein Abstand, der
   „nicht wirkt", obwohl der computed-Wert stimmt, wird von der ANDEREN
   Seite weggezogen. Erst den Nachbarn messen, dann den eigenen Wert erhoehen.
   ========================================================================= */
html body .s304-neu .product__mobile-header .v-force-up-wrapper{
  position:static !important;
  top:auto !important;
  margin-top:0 !important;
}

/* ⛔ HIER STAND `S304-KARTENFUSS-2209` mit `padding-bottom:28px`.
   ENTFERNT am 22.09.: der Wert stammte aus der Runde, in der sich die
   Live-Zeile noch mit `top:-14px` hochzog. Seit das geloest ist, war er
   doppelt gezahlt — und seine Waehlerkette (0,4,2) schlug meine eigene
   neue Regel (0,3,0). ⭐ Drei Regeln fuer EINEN Abstand ist genau das
   Muster, das ich am Theme kritisiert habe. Die ueberholte kommt raus,
   nicht eine vierte dazu. Der gueltige Wert steht in S304-DUOZEILE. */

/* === S304-RUNDE1-2209 · was die Sonde auf der PDP gefunden hat ===========

   1 · ⛔ DIE ZUGEKLAPPTEN FAQ-ANTWORTEN WAREN SICHTBAR.
       Gemessen: `<details open=false>` ist 47 px hoch (nur die Zusammen-
       fassung) — die Antwort rendert T1220→1310, also 90 px DARUNTER,
       mitten in der naechsten Frage. Alle vier uebereinander.
       Struktur ist korrekt (details > summary + div), und KEINE Regel setzt
       `display` auf `.s304-frage__b` — die UA-Vorgabe wird trotzdem
       ausgehebelt. ⭐ Statt die Ursache weiter zu jagen, mache ich das
       Verhalten EXPLIZIT: was zu ist, ist aus. Das haelt auch dann, wenn
       die Ursache spaeter zurueckkommt.

   2 · Tippziele unter 36 px: der Alle-Knopf (99×15), die Sternezeile
       (329×19), das Logo (70×23), die Bewertungspunkte (6×6).
       ⭐ Die Punkte behalten ihre GROESSE — nur die Trefferflaeche waechst
       (`padding` + `background-clip: content-box`). Ein 36-px-Punkt waere
       haesslich, ein 6-px-Trefferziel ist unbenutzbar.
   ========================================================================= */

html body .s304-neu details.s304-frage:not([open]) > .s304-frage__b{
  display:none !important;
}
html body .s304-neu details.s304-frage[open] > .s304-frage__b{
  display:block !important;
}

html body .s304-neu .s304-vk__alle{
  padding:11px 14px 9px !important;
  min-height:36px !important;
}
html body .s304-neu .s304-sternezeile a,
html body .s304-neu a[href*="pdp-reviews"]{
  padding:9px 0 !important;
  display:inline-block !important;
  min-height:36px !important;
}
html body .header__logo .header__logo__link{
  padding:8px 10px !important;
  display:inline-flex !important;
  align-items:center !important;
  min-height:40px !important;
}
html body .rev-slider-dot{
  box-sizing:content-box !important;
  padding:15px !important;
  background-clip:content-box !important;
  border:0 !important;
}

/* === S304-RUNDE14-2209 · die IC-Marke lief in den Titel ==================
   Gemessen auf /products/304-ash-tray (Inner-Circle-gesperrt):
     h1.s304-titel   275×23  @L29  →  endet bei L304
     span.ic-only-tag 177×28 @L166 →  ueberlappt 138 px davon
   Beide stehen im FLUSS, nicht in einer Ebene — das ist echte Kollision.
   Bei „304 ASH TRAY" faellt es kaum auf, bei einem laengeren Namen liegt
   die Marke mitten im Wort.
   ⭐ `min-width:0` ist der Teil, den man vergisst: ein Flex-Kind schrumpft
   ohne ihn nicht unter seine Inhaltsbreite, und dann hilft kein `flex:1`.
   ========================================================================= */
html body .s304-neu .product__title-price-row.s304-kopfzeile{
  display:flex !important;
  align-items:baseline !important;
  flex-wrap:wrap !important;
  gap:6px 10px !important;
}
html body .s304-neu .product__title-price-row.s304-kopfzeile .product__title.s304-titel{
  flex:1 1 auto !important;
  min-width:0 !important;
}
html body .s304-neu .ic-only-tag{
  flex:0 0 auto !important;
  position:static !important;
  white-space:nowrap !important;
  font-size:9.5px !important;
  font-weight:700 !important;
  letter-spacing:.06em !important;
  padding:4px 8px !important;
  border-radius:99px !important;
  /* ⭐ 27.09., Enzo: *„auf den Produkten steht ja Inner Circle, das muss aber
     genauso GOLD sein wie in unserem alten Theme und auf der PDP."*
     Live gegengeprueft: dort ist die Fahne golden.
     ⛔⛔ ICH HABE DREIMAL DANEBENGEBAUT, bevor ich das hier geaendert habe —
     eine eigene Fahne im Liquid (es standen dann zwei), dann zwei CSS-Regeln
     mit mehr Klassen. Alle wirkungslos. **Die Regel, die den Wert setzt, ist
     die Regel, die man aendert.** Das ist heute der siebte Fall derselben
     Sorte; er steht in REGEL-erst-greppen-dann-bauen-2609.md. */
  /* S304-FAHNE-GOLDVERLAUF-2709 - Enzo: „wir wollen da einfach unser rundes
     Ding fuer haben, aber halt in der Farbe vom alten Team."
     Am LIVE-Theme ausgelesen, nicht geschaetzt: der Verlauf laeuft von
     dunklem Altgold ueber Gold zu hellem Gold und wieder zurueck - das
     ist der Glanz. Eine flache Flaeche kann ihn nicht erzeugen.
     UEBERNOMMEN: Verlauf + weisse Schrift.  NICHT uebernommen: Live ist
     eckig mit clip-path-Schraege - unser radius 99 bleibt, so gewollt. */
  background:linear-gradient(90deg,#B8860B,#DAA520,#FFD700,#DAA520,#B8860B) !important;
  color:#FFFFFF !important;
  /* ⛔ 27.09. ENTFERNT: hier stand `color:#1a1408` — es sass ZWEI Zeilen unter
     meinem neuen `color:#FFFFFF` in DERSELBEN Regel und gewann, weil bei
     gleichem !important die spaetere Deklaration zaehlt. Dieselbe Falle wie
     beim Menue-Wurf am 27.09.: eine Eigenschaft kann in einem Block mehrfach
     stehen — beim Aendern ZAEHLEN, nicht die erste Fundstelle nehmen. */   /* 27.09.: war #FFFFFF, auf Gold gehoert dunkler Text */
}
html body .s304-neu .ic-lock-alt{
  min-height:36px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* === S304-RUNDE15-2209 · die IC-Marke, richtig verortet ==================
   Meine RUNDE14 war am falschen Ort. Gemessen:
     .ic-only-tag steckt NICHT in der Titelzeile, sondern in
     `.pdp-reviews-member-row` — und die traegt `margin-top: -27,5px`.
     Titel      T153 → T176
     Sternezeile T153 → T176     ← exakt dieselbe Bahn

   ⭐ Dieselbe Bauart wie der `.v-force-up-wrapper` heute frueh: ein Element
   zieht sich mit negativem Abstand in seinen Vorgaenger. Auf normalen
   Produkten ist das gewollt und stoert nicht — die Kollision entsteht ERST,
   wenn die Marke „ONLY INNER CIRCLE" dazukommt und die Zeile breit macht.

   ⛔ Deshalb NICHT generell entschaerfen: das wuerde jedem Produkt 27 px
   hinzufuegen, um einen Fall zu heilen, den nur gesperrte Produkte haben.
   `:has()` trifft genau die Zeile mit der Marke.
   ========================================================================= */
html body .s304-neu .pdp-reviews-member-row:has(.ic-only-tag){
  margin-top:6px !important;
  flex-wrap:wrap !important;
  gap:6px 8px !important;
}


/* === S304-VKOPF-2209 · die Versandleiste in den Kastenstil ===============
   Im BILD gesehen, dann gemessen:
     .s304-vkopf.s304-voll   370×59 @L16 T78   bg transparent   r0
     darin ein loses <em> mit „✓"   10×15 @L374 T116
   Zwei Broeckel ueber der Karte: ein fetter schwarzer Balken quer und ein
   Haken, der rechts oben in der Luft haengt. Enzos Wort dafuer: „zwei
   Bundles gemischt".

   ⭐ Der Inhalt bleibt — Enzo will den Gratisversand-Hinweis sehen. Nur die
   FORM aendert sich: eine flache Karte in derselben Sprache wie alles
   andere, Haken inline neben dem Text statt frei schwebend, Fortschritts-
   balken duenn und rund statt als schwarzer Riegel.
   ========================================================================= */
.s304-vkopf{
  margin:0 16px 8px !important;
  padding:10px 14px !important;
  border-radius:16px !important;
  background:#FFFFFF !important;
  box-shadow:0 8px 20px -12px rgba(24,24,26,.34) !important;
  display:flex !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:4px 8px !important;
  width:auto !important;
}
.s304-vkopf > *{
  font-size:12.5px !important;
  font-weight:600 !important;
  letter-spacing:.01em !important;
  color:#15130F !important;
}
/* Der Haken gehoert NEBEN den Text, nicht in die Ecke. */
.s304-vkopf em{
  order:-1 !important;
  flex:0 0 auto !important;
  position:static !important;
  float:none !important;
  font-style:normal !important;
  font-size:13px !important;
  line-height:1 !important;
  color:#1E7A45 !important;
  margin:0 !important;
}
/* Der Fortschrittsbalken: duenn, rund, eingerueckt. */
.s304-vkopf [class*=bar],
.s304-vkopf [class*=balken],
.s304-vkopf progress,
.s304-vkopf hr{
  flex:1 0 100% !important;
  height:4px !important;
  border-radius:99px !important;
  border:0 !important;
  margin:2px 0 0 !important;
  background:#ECE7E0 !important;
  overflow:hidden !important;
}


/* === S304-FASSUNGA2-2209 · sechs gemessene Abweichungen ==================
   Aus Fassung A (`KastenPlastisch.dc.html`) ausgelesen und live gegengemessen
   bei 402×812×3 mit echter Geraete-Emulation (mobile + touch), nicht mit
   einem schmalen Fenster.

     Element              IST                    SOLL
     Logo                 70×40                  h26, Breite auto
     Hauptbild            344×344 r0             quadratisch, r20
     „zuletzt bestellt"   16px/400               10,5px/700, ls .06em
     Geschenkblock        Breite 402 (ueberlaeuft) 370, @L16
     Geschenk-Titel       16px/400               15px/800
     Kaufknopf            Breite 402 @L0         eingerueckt

   ⛔ NICHT angeglichen, mit Absicht: Fassung A benutzt durchsichtige
   Flaechen (`rgba(255,255,255,.74)`). Enzo hat genau die abgelehnt — eine
   durchsichtige Flaeche ueber ungleichem Grund IST rechnerisch verschieden
   hell. Live bleibt es deckendes Weiss. Das ist eine Entscheidung, keine
   Abweichung.
   ========================================================================= */

/* 1 · Das Logo: EINE Massangabe, die andere ist auto.
      ⭐ Das ist der Fehler, der heute schon zweimal passiert ist. */
.header__logo__link img{
  height:26px !important;
  width:auto !important;
  max-width:none !important;
  object-fit:contain !important;
}

/* 2 · Das Hauptbild bekommt seinen Radius. */
.s304-neu .s304-dia,
.s304-neu .s304-dia img{
  border-radius:20px !important;
  overflow:hidden !important;
}

/* 3 · „zuletzt bestellt" — war komplett ungestylt (16px Fliesstext). */
.s304-neu .v-force-up-wrapper,
.s304-neu .v-force-up-wrapper *{
  font-size:10.5px !important;
  font-weight:700 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  color:#8A837C !important;
}
.s304-neu .v-force-up-wrapper{
  margin:12px 0 2px !important;
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
}

/* 4 · Der Geschenkblock lief 32 px ueber den Kartenrand hinaus. */
.s304-neu .s304-huelle{
  width:auto !important;
  max-width:none !important;
  margin-left:16px !important;
  margin-right:16px !important;
  box-sizing:border-box !important;
}

/* 5 · Die Geschenk-Ueberschrift — ebenfalls ungestylt. */
.s304-neu .s304-gk-kopf .t{
  font-size:15px !important;
  font-weight:800 !important;
  letter-spacing:.01em !important;
  color:#15130F !important;
}

/* 6 · Der Kaufknopf lief ueber die volle Breite.
      ⛔ Seine Huelle war das Problem, nicht er selbst. */
.s304-neu .s304-kaufzeile,
.s304-neu .product__submit__buttons{
  margin-left:16px !important;
  margin-right:16px !important;
  width:auto !important;
  box-sizing:border-box !important;
}


/* === S304-EINRUECKUNG-2209 · die Einrückungen haben sich addiert =========
   Nach der vorigen Runde gemessen:
     Kaufknopf      338×58 @L32   (Soll @L16)
     Geschenkblock  306×311 @L48  (Soll @L16, Breite 370)

   ⛔ Ursache: ich habe `margin-left/right:16px` auf ZWEI verschachtelte
   Ebenen gesetzt — `.s304-kaufzeile` UND `.product__submit__buttons`, und
   der Geschenkblock haengt in beiden. 16 + 16 = 32, plus die eigene = 48.

   ⭐ Dieselbe Klasse Fehler wie heute beim Kartenpolster: **ein Abstand,
   den der Elternteil schon hat, addiert sich — er ersetzt ihn nicht.**
   Regel daraus: vor dem Einruecken IMMER den Elternteil messen.
   Hier rueckt genau EINE Ebene ein; die Kinder bekommen nur `width:auto`.
   ========================================================================= */
.s304-neu .s304-kaufzeile{
  margin-left:16px !important;
  margin-right:16px !important;
  width:auto !important;
  box-sizing:border-box !important;
}
.s304-neu .s304-kaufzeile .product__submit__buttons,
.s304-neu .s304-kaufzeile .product__submit__item,
.s304-neu .s304-kaufzeile form{
  margin-left:0 !important;
  margin-right:0 !important;
  width:auto !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}
.s304-neu .s304-huelle{
  margin-left:0 !important;
  margin-right:0 !important;
  width:auto !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}


/* === S304-DUOZEILE-2209 · die Geschenkzeile brach um ====================
   Gemessen: `.s304-duo` 346×78, `flex-wrap: nowrap`, gap 9 — und darin
   `.s304-duo__t` mit 324×58, also ZWEI Zeilen. Der Inhalt
   „CRYSTAL GRACE · 95 € · 0 € · ÄNDERN" passt bei diesen Groessen nicht in
   346 px. Bei kurzen Namen (LINE 47) faellt es nicht auf, bei langen schon.

   ⭐ Nicht die Zeile breiter machen — sie kann nicht breiter werden. Statt
   dessen: der NAME darf kuerzen (er ist gleich darunter nochmal als Kachel
   zu sehen), die PREISE duerfen nicht. Ein Preis, der umbricht oder
   abgeschnitten wird, ist ein Vertrauensproblem !important; ein gekuerzter Name nicht.

   ⛔ Und der Kartenfuss: 28 px Polster stammten aus der Runde, in der die
   Live-Zeile sich noch mit `top:-14px` hochzog. Das tut sie nicht mehr
   (jetzt `margin:12px 0 2px`), also ist das Polster doppelt gezahlt.
   ========================================================================= */
.s304-neu .s304-duo{
  flex-wrap:nowrap !important;
  gap:7px !important;
  align-items:center !important;
  min-width:0 !important;
}
.s304-neu .s304-duo__t{
  min-width:0 !important;
  flex:1 1 auto !important;
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  white-space:nowrap !important;
  /* ⛔⛔ HIER STAND `overflow:hidden` — UND ES HAT DEN „2 FÜR 1"-CHIP
     ABGESCHNITTEN, den Enzo im Bild gesehen hat.
     Gemessen: der Chip ist `.s304-duo__t::after` mit `position:absolute;
     top:-7px` — er sitzt mit Absicht 7 px ueber der Kante. Mein
     `overflow:hidden` (gesetzt, um den Produktnamen zu kuerzen) hat genau
     diese 7 px weggeschnitten.
     ⭐ Das Kuerzen gehoert eine Ebene TIEFER: `.kl > :first-child` traegt
     `overflow:hidden` + `text-overflow:ellipsis`. Hier oben darf nichts
     klippen, sonst verliert der Chip seinen Ueberstand.
     ⭐ Lehre: **wer `overflow:hidden` setzt, muss wissen, was absichtlich
     herausragt.** Ein Pseudo-Element sieht man in keiner Elementliste. */
  overflow:visible !important;
}
/* Der Name darf kuerzen. */
.s304-neu .s304-duo__t > :first-child{
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
/* Preise und „AENDERN" nie. */
.s304-neu .s304-duo__t > :not(:first-child),
.s304-neu .s304-duo .s304-duo__aendern,
.s304-neu .s304-duo [class*=aendern]{
  flex:0 0 auto !important;
  white-space:nowrap !important;
}

/* Der Kartenfuss: 28 → 14, weil der Hochzieh-Griff weg ist. */
.s304-neu .product__mobile-header.s304-karte{
  padding-bottom:14px !important;
}


/* === S304-DUO2-2209 · der Wähler lag eine Ebene zu hoch =================
   Gemessen auf /products/crystal-grace:
     .s304-duo__t   324×58   flex, nowrap
       └ .kl        247×40   flex, nowrap, 15px   »LINE 47 · 95 € · 0 € · ÄNDERN«

   ⛔ Meine vorige Regel zielte auf `.s304-duo__t > :first-child`. Das echte
   Kind heisst `.kl`, und DARIN liegen Name, Preise und „AENDERN". Der
   Waehler hat also getroffen — nur das falsche Element.
   ⭐ Heute der dritte Waehler, der eine Ebene danebenlag (`.drawer--navigation`,
   `.ic-lock-alt`, jetzt `.kl`). Regel fuer mich: **vor dem Waehlen die
   Kinderkette ausgeben lassen, nicht die Struktur annehmen.**

   Die Aufteilung bleibt dieselbe wie vorher begruendet: der NAME darf
   kuerzen, die PREISE nie.
   ========================================================================= */
.s304-neu .s304-duo__t .kl{
  min-width:0 !important;
  align-items:baseline !important;
  gap:6px !important;
  padding:0 !important;
  min-height:0 !important;
}
/* Der Name (erstes Kind) darf kuerzen. */
.s304-neu .s304-duo__t .kl > :first-child{
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  flex:1 1 auto !important;
}
/* Preise, Haken und „AENDERN" nie. */
.s304-neu .s304-duo__t .kl > :not(:first-child){
  flex:0 0 auto !important;
  white-space:nowrap !important;
}
.s304-neu .s304-duo__t{
  align-items:center !important;
  min-height:0 !important;
}


/* === S304-WRAPPER-2209 · die neue Formularhülle verengte den Knopf ======
   Nach dem Einbau von `[data-form-wrapper]` (Pflichtanker der Schwebeleiste)
   war der Kaufknopf 338 statt 370 — die neue Ebene hat eine Einrueckung
   geerbt. ⭐ Dieselbe Rechnung wie vorhin: **eine zusaetzliche Ebene erbt
   Abstaende.** Der Anker muss da sein, aber er darf nichts verengen.
   ========================================================================= */
.s304-neu .s304-kaufzeile .form__wrapper{
  margin:0 !important;
  padding:0 !important;
  width:auto !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}


/* === S304-HUELLE-2209 · die neue Pflicht-Hülle rückte selbst ein ========
   Nach dem Einbau von `<product-sticky class="product__wrapper">` (Anker
   fuer die Schwebeleiste) standen ALLE Bloecke bei 338 @L32 statt 370 @L16.
   Gemessen: `product-sticht.product__wrapper` bringt `margin: 0 16px` mit —
   und meine eigenen 16er kamen obendrauf.

   ⭐ Statt zwoelf Block-Regeln zu suchen und zu aendern: die Einrueckung an
   EINER Stelle wegnehmen. Die Hoheit ueber den Seitenrand liegt bei meinen
   Bloecken, nicht bei der Huelle — die ist nur Anker.

   ⭐ Das ist heute der dritte Fall derselben Sorte (Kartenpolster,
   Knopf-Einrueckung, jetzt die Huelle). **Merksatz: eine neue Ebene im Baum
   bringt fast immer eigene Abstaende mit. Vor dem Einbau messen, danach
   die ganze Kette nachmessen — nicht nur das eingebaute Element.**
   ========================================================================= */
.s304-neu-an product-sticky.product__wrapper,
product-sticky.product__wrapper{
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
  width:auto !important;
  max-width:none !important;
}


/* === S304-PFLICHT-2209 · die Pflichtangaben unter dem Kaufknopf =========
   Leise, aber LESBAR — nicht versteckt. Die Groesse (11,5 px) ist die
   Untergrenze, bei der eine Pflichtangabe noch als „klar erkennbar" gilt;
   kleiner wird sie zur Alibi-Angabe.
   ========================================================================= */
.s304-neu .s304-pflicht{
  margin:8px 16px 0 !important;
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:3px 7px !important;
  font-size:11.5px !important;
  line-height:1.45 !important;
  color:#6E6862 !important;
  letter-spacing:.005em !important;
}
.s304-neu .s304-pflicht b{
  font-weight:700 !important;
  color:#15130F !important;
}
.s304-neu .s304-pflicht span[aria-hidden]{
  color:#C9C2BA !important;
}
.s304-neu .s304-pflicht a{
  /* ⛔ 23.09.: hier standen `min-height: 32px` und `display: inline-flex` —
     aus der alten, dreizeiligen Pflichtzeile mit vier <span>-Kindern. In der
     neuen Einzeiler-Fassung machten sie aus 14 px wieder 32. */
  color:#15130F !important;
  text-decoration:underline !important;
  text-underline-offset:2px !important;
  min-height: 0 !important;
  display: inline !important;
  align-items:center !important;
}


/* === S304-LEISTENSTIL-2209 · die Schwebeleiste in der Kasten-Sprache ====
   Gemessen: `.cart-bar` 374×60 @L14, `position:fixed`, `bottom:14px`,
   darin `.cart-bar__atc-btn` 374×60 **r0** schwarz.

   Sie ist der Kaufweg auf dem Handy, sobald man gescrollt hat — und sie war
   das letzte Stueck, das noch in der alten Sprache sprach: randlos, eckig,
   Kante an Kante mit dem Bildschirm.

   ⭐ Sie bekommt genau die Form des Hauptknopfs (r99, 58 hoch, 370 breit),
   damit der Kunde erkennt: **das ist derselbe Knopf, nur mitgereist.**
   Zwei verschiedene Formen fuer denselben Vorgang sind ein Bruch, kein Stil.
   ========================================================================= */
html body .cart-bar{
  left:16px !important;
  right:16px !important;
  width:auto !important;
  max-width:none !important;
  bottom:14px !important;
  border-radius:99px !important;
  overflow:visible !important;
  background:none !important;
}
html body .cart-bar .cart-bar__form__wrapper,
html body .cart-bar .form__wrapper{
  width:auto !important;
  margin:0 !important;
  padding:0 !important;
}
html body .cart-bar .cart-bar__atc-btn{
  width:100% !important;
  min-height:58px !important;
  border-radius:99px !important;
  font-size:15px !important;
  font-weight:600 !important;
  letter-spacing:.02em !important;
  text-transform:none !important;
  box-shadow:0 14px 30px -10px rgba(10,10,10,.55) !important;
}


/* === S304-LUFTKOPF-2209 · die Versandzeile klebte an der Kopfleiste =====
   Im Bild gesehen: die Kopfleiste endet bei T78, die Versandzeile beginnt
   bei T78 — null Abstand. Dadurch liest sie sich wie ein Fortsatz des
   Kopfes statt als eigene Karte.
   ⛔ Die Kopfleiste ist `position:absolute` und nimmt keinen Platz ein;
   der Abstand muss also von der Versandzeile kommen, nicht vom Kopf.
   ========================================================================= */
.s304-neu .s304-vkopf,
body .s304-vkopf{
  margin-top:10px !important;
}


/* === S304-ENZOLISTE-2309 · Enzos Mängelliste vom 00:12 =================
   Jeder Punkt gemessen, bevor er angefasst wurde.
   ========================================================================= */

/* ── 1 · „die Vorschau-Thumbnails sind zu klein" ─────────────────────────
   Gemessen: 38×38. Grund ist Mathematik, nicht Nachlaessigkeit: acht Bilder
   auf 344 px Reihe mit 5 px Luft ergeben (344 − 7·5) / 8 = 38,6.
   ⭐ Man kann bei acht Bildern nicht gleichzeitig „alle sichtbar" und
   „gross" haben. Live sind es 54 px — und die Reihe SCROLLT.
   Also hier genauso: 54 px, waagerecht wischbar, mit Schnappen.
   ⛔ Die Reihe darf dafuer NICHT `overflow:hidden` haben, sonst ist der
   Rest unerreichbar statt nur unsichtbar. */
.s304-neu .s304-mini{
  overflow:visible !important;
}
.s304-neu .s304-mini__reihe{
  display:flex !important;
  gap:6px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scroll-snap-type:x proximity !important;
  -webkit-overflow-scrolling:touch !important;
  scrollbar-width:none !important;
  padding-bottom:2px !important;
}
.s304-neu .s304-mini__reihe::-webkit-scrollbar{ display:none; }
.s304-neu .product__thumb.s304-mini__k{
  flex:0 0 54px !important;
  width:54px !important;
  height:54px !important;
  aspect-ratio:auto !important;
  scroll-snap-align:start !important;
  border-radius:12px !important;
}

/* ── 2 · „dieses noch nichts im Korb, das muss gar nicht so sein" ────────
   Im Artefakt steht dort nur der Gratisversand-Hinweis. Der Zusatz
   „noch nichts im Korb" sagt dem Kunden nichts, was er nicht weiss.
   ⛔ Nicht das ganze Element ausblenden — der Gratisversand-Hinweis und der
   Fortschrittsbalken bleiben, das ist Enzos ausdruecklicher Wunsch von
   frueher („dass man oben das sieht mit dem Gratisversand ab 80 Euro"). */
/* ⛔⛔ HIER STAND `.s304-vkopf em { display:none }`.
   Ich wollte „noch nichts im Korb" loswerden — und habe damit auch
   **„bis Gratisversand"** ausgeblendet, denn es ist DASSELBE `<em>`, nur in
   einem anderen Zustand. Enzo sah danach „Noch 25,00 €" ohne jeden Bezug:
   *„da muss natuerlich trotzdem der Versand erwaehnt werden."*

   ⭐ Exakt die Fehlerklasse aus dem Audit von heute Nacht: **ich habe etwas
   weggenommen, ohne zu pruefen, was es in anderen Zustaenden traegt.**
   Ein Element ist nicht sein momentaner Inhalt.

   Die Unterscheidung kann CSS nicht treffen — sie steht jetzt in
   `s304-haus.js` und blendet NUR den einen Satz aus. */

/* ── 3 · „wenn ich runter scrolle, ist oben der Header so abgeschnitten" ─
   Gemessen: die Kopf-Karte ist 370 breit @L16 — und bei x=6 liegt
   `.s304-neu.product__page`, also der Seiteninhalt. Er scrollt LINKS UND
   RECHTS an der Karte vorbei und blitzt an den Raendern durch.
   ⭐ Die Karte braucht einen Ruecken: eine weisse Flaeche ueber die volle
   Breite HINTER ihr. `::before` am Kopf, damit kein neues Element noetig ist. */
.theme__header{
  position:absolute !important;
}
.theme__header::before{
  content:"" !important;
  position:absolute !important;
  left:-16px !important;
  right:-16px !important;
  top:-40px !important;
  bottom:0 !important;
  background:#FFFFFF !important;
  z-index:-1 !important;
}

/* ── 4 · „das schenken wir dir hat auf einmal zwei Dings" ────────────────
   Gemessen: ZWEI Chips sagen dasselbe —
     `.s304-gk-kopf .c`        »1 KAUFEN · 1 GESCHENKT«   (Ueberschrift)
     `.s304-duo__t::after`     »2 FÜR 1«                  (Auswahlzeile)
   ⭐ Der in der Ueberschrift bleibt: er steht an der Stelle, wo das Angebot
   erklaert wird. Der auf der Auswahlzeile wiederholt es drei Zeilen
   spaeter — das ist die Dopplung, die Enzo gesehen hat. */
.s304-neu .s304-duo__t::after{
  display:none !important;
}

/* ── 5 · „bei dem Sticky ATC ist so ein grauer Bereich drum und viel zu hoch" ──
   Gemessen: 370×60, dazu mein eigener Schatten
   `0 14px 30px -10px rgba(10,10,10,.55)` — ein 30-px-Weichzeichner, der als
   grauer Hof um den Knopf liegt.
   ⭐ Niedriger (52 statt 60, unter dem Hauptknopf mit 58) und ein enger,
   dunkler Schatten statt einer weichen Wolke. */
html body .cart-bar{
  bottom:12px !important;
}
html body .cart-bar .cart-bar__atc-btn{
  /* ac2 30.09. Enzo (Punkt 5): Schwebeleiste niedriger. Vergleich: Cernucci 60 px, wir 52 -> 48 (Apple-Minimum 44). */
  min-height:48px !important;
  height:48px !important;
  font-size:14.5px !important;
  box-shadow:0 6px 16px -6px rgba(10,10,10,.45) !important;
}
html body .cart-bar .cart-bar__form__wrapper,
html body .cart-bar .form__wrapper{
  background:none !important;
  box-shadow:none !important;
}


/* === S304-TEIL4-2309 · Fortschrittsbalken und Miniatur-Linie ============

   ── 1 · „man checkt gar nicht, dass es eine Progress Bar ist" ───────────
   Gemessen: `.s304-vbar` **366×4 px**, Fuellung 0×4.
   Fassung A hat dort **7 px**. Bei 4 px mit rundem Abschluss liest sich das
   als Trennlinie, nicht als Fortschritt — Enzo hat genau das gesagt.
   ⭐ 7 px, dunklerer Grund fuer den Kontrast, und die Fuellung bekommt einen
   sichtbaren Abschluss. Ein Fortschrittsbalken muss ZWEI Zustaende zeigen,
   sonst ist er ein Strich.

   ── 2 · „die schwarze Linie ist oben abgeschnitten" ────────────────────
   Gemessen: die aktive Miniatur traegt `outline: 2px solid` — und ein
   `outline` zeichnet AUSSERHALB des Elements. Die Reihe hat
   `overflow-y: hidden` (noetig fuers waagerechte Wischen), also wird die
   Linie oben und unten gekappt.
   ⛔ `overflow-y: visible` waere die naheliegende Antwort und die falsche:
   dann bricht das Wischen. ⭐ Stattdessen bekommt die Reihe 3 px Luft oben
   und unten — die Linie passt hinein, das Wischen bleibt.
   ========================================================================= */

.s304-neu .s304-vbar{
  height:7px !important;
  border-radius:99px !important;
  background:#E3DDD4 !important;
  overflow:hidden !important;
}
.s304-neu .s304-vbar > *{
  height:100% !important;
  border-radius:99px !important;
  background:#15130F !important;
  min-width:0 !important;
  transition:width .3s ease !important;
}

.s304-neu .s304-mini__reihe{
  padding-top:3px !important;
  padding-bottom:5px !important;
}
.s304-neu .product__thumb.s304-mini__k.is-active{
  outline-offset:0 !important;
}


/* === S304-STREIFEN-AUS-2309 · „du hast das andere Angebot gar nicht rausgenommen" ===
   Enzo woertlich: „das schenken wir dir, hat auf einmal zwei Dings, du hast
   das andere Angebot gar nicht rausgenommen."

   GEMESSEN, was das zweite Ding ist — und es war NICHT, was ich zuerst dachte:
   ⛔ Mein erster Verdacht war der Kopf des Geschenkblocks, weil dort zwei
   Texte stehen. **Falsch.** Das Artefakt (`KastenPlastisch.dc.html`) hat sie
   beide, woertlich:
       <span 15px/800>Das schenken wir dir</span>
       <span 10px/700 ls.08em bg#15130F col#F4F1ED pad 3px 8px r99>1 KAUFEN · 1 GESCHENKT</span>
   Der zweite ist ein CHIP, keine zweite Ueberschrift. Live gemessen: 15px/800
   und ein schwarzer Chip mit r99 — stimmt also.

   ⭐ Das echte zweite Ding ist `button.s304-str`:
       position:fixed · rechts · 32×200 · z-index 2147482000 · schwarz
       Text „2 FÜR 1 / zweites gratis ‹", senkrecht
   Erzeugt von `304-custom.js` **nach 15 Sekunden**, Klick oeffnet den
   Geschenkblock (`.s304-tg__ae`).

   WARUM ER HIER WEG KANN, ohne etwas zu verlieren: auf der neuen PDP steht
   der Geschenkblock bereits offen und sichtbar auf der Seite. Der Streifen
   wirbt fuer etwas, das schon zu sehen ist, und verdeckt dabei dauerhaft
   32 px der Breite.
   ⛔ NUR HIER. Diese Datei laedt ausschliesslich `sections/s304-pdp.liquid`.
   Die Homepage, die Enzo ausdruecklich ausgenommen hat, sieht diese Regel
   nicht. Der Streifen selbst bleibt im Theme — das hier ist ein Vorhang,
   keine Loeschung.
   ================================================================== */
html body .s304-str{
  display:none !important;
}


/* === S304-NACHT-2309 · Enzos Liste vom 23.09., 02:00 ====================
   Jeder Block nennt seinen Punkt und was gemessen wurde.
   ======================================================================= */

/* ── PUNKT 16 · „Das schenken wir dir" traegt noch das Alt-Widget ────────
   Enzo woertlich, ZWEIMAL: „Sieht ja immer noch falsch aus. Da ist ja immer
   noch das vom aktuellen Team drin. Ich check nicht, wie du da Probleme mit
   haben kannst."

   GEMESSEN, was in `.s304-huelle` steckt — und der Vergleich mit dem
   Artefakt (`KastenPlastisch.dc.html`) macht es eindeutig:
       .s304-gk-kopf   Titel + Chip        ✓ steht im Artefakt
       .s304-gk-sub    Unterzeile 12 px    ✓ steht im Artefakt
       .s304-duo       78 px hoher Kasten  ⛔ NICHT im Artefakt
                       „+2 für 1 · DEIN GESCHENK — WÄHLBAR · ENTFERNEN ·
                        MIDNIGHT LINK 50 € 0 € · ÄNDERN ✓"
       .s304-vk        die vier Kacheln    ✓ steht im Artefakt
   Das Artefakt hat Kopf, Unterzeile, Kachelreihe — **sonst nichts**.
   Der `.s304-duo`-Kasten ist Alt-Bestand und sagt dasselbe dreimal: das
   gewaehlte Stueck steht schon mit Haken in der Kachelreihe darunter.

   ⭐ VORHER LIVE GEPRUEFT, ob ohne ihn noch alles geht — nicht vermutet:
       ausgeblendet → auf SNOW LINK geklickt → Auswahl wechselte korrekt,
       Kaufknopf blieb „Beide in den Warenkorb 55 €".
   Der Kasten ist zwar ein Klickziel in `304-custom.js`, aber die Kacheln
   tragen ihre eigenen Handler. Nichts haengt an ihm allein.
   ⛔ Ausgeblendet, nicht geloescht — `304-custom.js` baut ihn weiter und
   darf ihn weiter finden. */
html body .s304-neu .s304-huelle .s304-duo{
  display:none !important;
}

/* ── PUNKT 17 · Pflichtzeile: aus drei Zeilen wird eine ─────────────────
   Der Text ist in `sections/s304-pdp.liquid` gekuerzt (Begruendung dort:
   § 6 PAngV). Hier nur noch das Mass: 11,5 px → 10 px, eine Zeile. */
html body .s304-neu .s304-pflicht--knapp{
  /* ⛔ Meine EIGENE aeltere Regel `.s304-neu .s304-pflicht` macht daraus
     einen Flex-Container mit `flex-wrap: wrap` und `gap: 3px 7px` — das war
     fuer die alte Fassung mit vier <span>-Kindern gebaut. Mit nur noch einem
     Satz brach sie ihn auf **drei Zeilen, 36 px**.
     ⭐ Die Korrektur steht HIER, an der schon vorhandenen neuen Regel, nicht
     als dritter Block daneben — sonst stehen naechste Woche wieder fuenf
     Regeln fuer eine Zeile. */
  display:block !important;
  font-size:10px !important;
  line-height:1.4 !important;
  color:#8A837C !important;
  margin:7px 16px 0 !important;
  text-align:center !important;
  white-space:normal !important;
}
html body .s304-neu .s304-pflicht--knapp a{
  color:#8A837C !important;
  text-decoration:underline !important;
  text-underline-offset:2px !important;
}


/* === S304-FRAGENKARTE-2309 · Punkt 20 ==================================
   Vier eigene Karten → EINE Karte mit vier Zeilen und Haarlinie dazwischen.
   Die Werte sind die der anderen Karten im Laden (`.s304-karte`): weiss,
   r22, derselbe Wurf — nur das Innenleben ist neu.
   ======================================================================= */
html body .s304-neu .s304-fragen{
  padding:2px 0 !important;      /* die Zeilen bringen ihr eigenes Polster mit */
  overflow:hidden !important;    /* damit die erste/letzte Zeile die Rundung nicht ueberlaeuft */
}
html body .s304-neu .s304-fragen .s304-frage{
  margin:0 !important;
  background:transparent !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  border-top:1px solid #EDE9E3 !important;
}
/* ⭐ Die erste Zeile bekommt KEINE Linie — eine Trennlinie ganz oben waere
   ein Strich ohne etwas darueber, genau der Fehler aus dem Warenkorb. */
html body .s304-neu .s304-fragen .s304-frage:first-of-type{
  border-top:0 !important;
}
html body .s304-neu .s304-fragen .s304-frage__k{
  padding:13px 15px !important;
  font-size:12px !important;
  min-height:44px !important;    /* Tippziel */
  box-sizing:border-box !important;
}
html body .s304-neu .s304-fragen .s304-frage__b{
  padding:0 15px 13px !important;
  font-size:12.5px !important;
  line-height:1.5 !important;
  color:#6E6862 !important;
}


/* === S304-KEIN-KASTEN-IM-RUND-2309 · Punkt 18 ==========================
   Enzo woertlich: „bei deinem Peace direkt zu dir. Das finde ich gut. Aber
   dann muss das auch … das ist ja jetzt ein Kasten innerhalb so eines runden
   Dings. Das passt irgendwie vom Style nicht."
   Sein Grundsatz vom 22.09., woertlich: „du kannst nicht einen runden Widget
   nehmen und da einen Kasten reinpacken — das gilt fuer alles."

   GEMESSEN: in den r22-Karten stecken **vier** eckige Rahmenkaesten:
       .km-delivery-wrap   344×73   1px #D0D0D0   (Zeitstrahl)
       .s304-spec          344×333  1px #E0E0E0   (Produktdetails)
       .s304-rev > div     344×827  1px #E5E5E5   (Bewertungen)
       .s304-rev > div     312×184  1px #E0E0E0   (Bewertungen)

   ⭐ Der Rahmen faellt weg statt gerundet zu werden: die weisse Karte MIT
   Wurf ist bereits die Abgrenzung. Ein zweiter Rahmen 13 px daneben ist
   eine Linie, die nichts trennt — und kostet innen Platz.
   ⛔ Die Haarlinien in `.s304-fragen` bleiben: die trennen VIER Zeilen
   voneinander, das ist ihre Arbeit. Ein Rahmen um alles ist etwas anderes
   als eine Linie zwischen zweien.
   ======================================================================= */
html body .s304-neu .s304-karte .km-delivery-wrap,
html body .s304-neu .s304-daten .s304-spec{
  border:0 !important;
  border-radius:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
/* Die Bewertungskarte: nur die Rahmen, nicht die Polster — dort haengt
   mehr Fremdlogik dran, die ich hier nicht verschiebe. */
html body .s304-neu .s304-rev > div[style],
html body .s304-neu .s304-rev > div{
  border-color:transparent !important;
}


/* === S304-THUMBSAUM-2309 · Punkt 14 ====================================
   Enzo: „wenn ich bei einem schwarzen Thumbnail bin, ist unten da so ein
   grauer Strich … das muss auch raus."

   ⛔ EHRLICH ZUERST: **in Chrome konnte ich den Strich nicht reproduzieren.**
   Gemessen ist im DOM nichts da, was ihn erklaeren wuerde:
       Button, Span und Bild enden alle exakt bei y = 646
       Luecke Span→Button 0,0 px · Luecke Bild→Span 0,0 px
       darunter liegt nur der transparente Reihen-Container
   Ein „nichts gefunden" ohne Erklaerung waere aber wertlos — also weiter
   gesucht, WARUM es auf Enzos Geraet trotzdem erscheint.

   ⭐ DIE KONSTELLATION ERKLAERT ES: der Button traegt `border-radius: 12px`
   PLUS `overflow: hidden`, waehrend Span und Bild `border-radius: 0` haben.
   Der Browser muss also ein eckiges Bild an einer runden Kante beschneiden.
   Dabei bleibt eine halbtransparente Antialiasing-Kante stehen, durch die
   der **weisse Button-Hintergrund** durchscheint. Auf einem hellen Bild
   faellt das nicht auf — auf einem dunklen ist es genau das, was Enzo
   beschreibt: ein heller Saum an der Unterkante. Safari zeichnet diese
   Kante staerker als Chrome, deshalb sieht er es und ich nicht.

   ⭐ REPARATUR: jede Ebene bekommt denselben Radius. Dann ist das Bild
   selbst rund und es muss gar nichts mehr beschnitten werden — die Ursache
   faellt weg statt uebermalt zu werden.
   ======================================================================= */
html body .s304-neu .s304-mini__k .product__thumb__link,
html body .s304-neu .s304-mini__k span{
  border-radius:12px !important;
  overflow:hidden !important;
  display:block !important;
  background:transparent !important;
}
html body .s304-neu .s304-mini__k img{
  border-radius:12px !important;
  display:block !important;
}
/* ⭐ Und der Grund darunter wird transparent: liegt doch einmal eine Kante
   frei, scheint dann nichts Helles durch, sondern die Karte selbst. */
html body .s304-neu .s304-mini__k{
  background:transparent !important;
}


/* === S304-STERNZEILE-2309 · Punkt 15 ===================================
   Enzo: „Icy Stellar 55 Euro stehen da ja und dann die Bewertung. Wir
   können die Bewertung noch höher ziehen und da vielleicht noch ein Trust
   Icon rein … Entweder verstellbar oder irgendwas anderes."

   GEMESSEN: Titel endet 178, Sternzeile beginnt 189 — **11 px Luft**, dazu
   ist die Zeile 37 px hoch bei 16 px Schrift. Sie steht also tiefer und
   wuchtiger als noetig.

   ⛔ WAS ICH NICHT TUE: „größenverstellbar" dazuschreiben. Das stimmt fuer
   die Cord-Armbaender, aber ICY STELLAR ist ein Tennisarmband mit festem
   Verschluss (Produktdetails: „LÄNGE 19 cm · VERSCHLUSS Sicherer
   Verschluss"). Eine Eigenschaft, die nicht fuer jedes Produkt gilt, darf
   nicht in einer Zeile stehen, die auf jedem Produkt erscheint — das waere
   § 5 UWG, dieselbe Falle wie bei „heute bereits 45 Mal bestellt".

   ⭐ Das Trust-Element steht schon da: „· 14 Tage Rückgabe". Es bekommt sein
   Icon und wird sichtbarer — eine Aussage, die fuer jedes Produkt im Laden
   gilt und durch die Widerrufsbelehrung gedeckt ist.
   ======================================================================= */
html body .s304-neu .pdp-reviews-member-row{
  margin-top:3px !important;      /* war 6 – zusammen mit der Hoehe: 11 px → 6 */
  margin-bottom:0 !important;
  font-size:13px !important;
  min-height:0 !important;
  align-items:center !important;
}
html body .s304-neu .pdp-reviews-member-row a{
  font-size:13px !important;
  min-height:0 !important;
}
/* ⛔ 23.09. ZURUECKGENOMMEN — hier stand ein Schild-Icon als `::after` auf
   dem Bewertungslink. Gemessen, was es angerichtet hat: die Sternzeile
   wuchs von **37 auf 52 px** und brach auf zwei Zeilen um, die zweite leer.
   Enzo wollte die Zeile HOEHER ZIEHEN, also kompakter — mein Icon hat sie
   groesser gemacht. Das ist genau die Fehlerklasse „ich pruefe die
   Aenderung, nicht ihre Wirkung auf die Zeile".
   ⭐ Das Trust-Element bleibt trotzdem drin: „· 14 Tage Rückgabe" steht im
   Text der Zeile. Ein Icon davor braucht einen Platz, den diese Zeile bei
   344 px Breite nicht hat. */


/* === S304-VIDEOKACHELN-2309 · Punkt 21 =================================
   Enzo: „Ich hätte gerne, dass das einfach in einzelnen auf der Größe wie
   auch unser Widget ist. Aber einzelne Kacheln. Also drei nebeneinander."

   GEMESSEN: es sind **genau 3 Videos**, je 105 × 187 px, in einem Swiper
   mit `overflow: hidden`. Sie stehen also bereits nebeneinander — was
   fehlte, ist die KACHEL: sie liegen nackt da, waehrend im ganzen Laden
   alles auf einer weissen Karte mit Wurf sitzt.

   ⭐ Der Swiper wird zum Raster: `transform: none` schlaegt den inline
   gesetzten `translate3d` (CSS-`!important` gewinnt gegen inline OHNE
   `!important` — nur inline MIT `!important` waere unschlagbar).
   Drei Spalten, gap 9, bei 344 px Innenbreite also 108,7 je Kachel.
   ⛔ `overflow: hidden` muss weg, sonst schneidet der Swiper den Wurf ab —
   derselbe Fehler wie am 22.09., als mein eigenes `overflow:hidden` den
   Chip abgeschnitten hat.
   ======================================================================= */
/* ⛔⛔ GEÄNDERT 24.09., 23:58 — Enzo: „die Videos sollten alle als
   einzelne Kachel sein."
   Hier standen drei feste Spalten. Gemessen ergab das bei 402 px
   **113×201 je Video** — jedes schmaler als ein Daumen.
   ⭐⭐ UND DIESES RASTER WAR DER GRUND, WARUM ALLES ANDERE NICHT WIRKTE:
   ich habe vorher `flex: 0 0 180px` und `width: 180px !important` an die
   Kachel gehaengt. Beides kam nachweislich an (`computed flex: 0 0 180px`)
   und bewirkte **nichts**, weil in einem Raster die SPALTE die Breite
   bestimmt, nicht das Kind. Dasselbe gilt fuer `slidesPerView` — das
   Snippet notiert den Stolperstein sogar schon.
   ⭐ **Prüfschritt, der das sofort findet: nicht das Kind messen, sondern
   `display` des ELTERN.**
   ⛔ `transform: none` legte Swipers eigenes Schieben stumm. Damit die
   Kacheln jetzt wieder erreichbar sind, wird der Rahmen ein echter
   waagerechter Scroller — kein Swiper-Ersatz, sondern der Browser.
   ⛔ **Kein `touch-action` hier.** Der Standardwert erlaubt beides; eine
   eigene Angabe waere eine Erlaubnisliste und wuerde das senkrechte
   Scrollen verbieten — genau der Fehler vom 23.09. ("da freezed die Seite").
   ⛔ `overflow:auto` schneidet den Wurf ab, deshalb Polster unten. */
html body .s304-neu .s304-vids .swiper{
  overflow-x:auto !important;
  overflow-y:hidden !important;
  padding:6px 0 16px !important;
  scroll-snap-type:x proximity !important;
  -webkit-overflow-scrolling:touch !important;
  scrollbar-width:none !important;
}
html body .s304-neu .s304-vids .swiper::-webkit-scrollbar{ display:none !important; }
html body .s304-neu .s304-vids .swiper-wrapper{
  display:grid !important;
  grid-template-columns:none !important;
  grid-auto-flow:column !important;
  /* ⛔ 03:40 von 180 auf 148 zurückgenommen: Enzo „die Produktvideos sind
     jetzt viel zu groß". Vorher 113 (zu klein), dann 180 (zu groß) — 148
     liegt dazwischen und zeigt bei 402 px zwei volle Kacheln plus einen
     deutlich angeschnittenen dritten.
     ⭐ **Zweimal in entgegengesetzte Richtungen danebenzuliegen ist kein
     Fehlschlag, sondern eine Einkreisung** — die Mitte ist damit belegt
     und nicht geraten. */
  /* ⛔⛔ 24.09. nachts: 148 px → drei gleiche Spalten.
     Der Kommentar darueber begruendete 148 px damit, dass „zwei volle
     Kacheln plus ein deutlich angeschnittener dritter" die richtige Mitte
     sei. Das war meine Einkreisung, nicht seine Ansage. Enzo woertlich:
     **„sodass ich die 3 auf einmal sehe"** — ein angeschnittenes drittes
     Video ist genau das, was er nicht will.
     ⭐ Gemessen bei 402 px: mit 148 px endete das dritte bei x 489. */
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  grid-auto-flow:row !important;
  grid-auto-columns:auto !important;
  gap:8px !important;
  transform:none !important;
}
html body .s304-neu .s304-vids .swiper-slide{
  width:auto !important;
  margin:0 !important;
  background:#FFFFFF !important;
  border-radius:14px !important;   /* 16 -> 14 am 24.09.: die Seite kennt nur noch drei Radien */
  padding:5px !important;
  box-shadow:0 12px 26px -12px rgba(24,24,26,.40),
             0 2px 6px -2px rgba(24,24,26,.12) !important;
  box-sizing:border-box !important;
}
html body .s304-neu .s304-vids .swiper-slide video,
html body .s304-neu .s304-vids .swiper-slide .s304-poster{
  width:100% !important;
  height:auto !important;
  aspect-ratio:9/16 !important;
  border-radius:12px !important;
  object-fit:cover !important;
  display:block !important;
}

/* === S304-BEWERTUNGEN-2309 · Punkt 22 ==================================
   Enzo: „Rundenbewertung finde ich nimmt zu viel Platz weg. Da hätte ich
   gerne einfach immer passend eine Bewertung pro Zeit und dann swipet das
   immer so rum. Aber es soll wirklich nur 60% des aktuellen Platz wegnehmen."

   GEMESSEN, woraus die 870 px bestehen:
       rev-heading-row     20 px   Ueberschrift
       Verteilung         325 px   „5.0 ★★★★★ · 367 Bewertungen · 5★ 89% …"
       Kartenliste        422 px   die Bewertungen untereinander
   Ziel sind 60 %, also ~522 px.

   ⭐ ZWEI EINGRIFFE, beide ohne etwas wegzuwerfen:
   1. Die Kartenliste wird ein waagerechter Scroller mit `scroll-snap` —
      **eine Bewertung pro Bildschirmbreite**, genau wie Enzo es beschreibt.
      Aus 422 px Hoehe wird die Hoehe EINER Karte.
   2. Die Verteilung behaelt ihre Zahlen, wird aber zusammengeschoben.
   ⛔ Nichts wird `display:none` gesetzt: die Zahlen sind echte Bewertungen,
   kein Zierrat.
   ======================================================================= */
html body .s304-neu .s304-rev .rev-cards,
html body .s304-neu .s304-rev [class*="rev-list"],
html body .s304-neu .s304-rev > div > div:last-child{
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:10px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scroll-snap-type:x mandatory !important;
  -webkit-overflow-scrolling:touch !important;
  scrollbar-width:none !important;
  padding-bottom:4px !important;
}
html body .s304-neu .s304-rev > div > div:last-child::-webkit-scrollbar{ display:none !important; }
html body .s304-neu .s304-rev > div > div:last-child > *{
  flex:0 0 100% !important;
  scroll-snap-align:start !important;
  min-width:0 !important;
}


/* === S304-BEWERTUNGEN-KOMPAKT-2309 · Punkt 22, zweiter Teil ============
   Nach dem Scroller waren es 818 von 870 px — Ziel sind 60 %, also ~522.
   GEMESSEN, wo die Hoehe sitzt:
       Ueberschrift        20 px  + 20 margin
       Verteilung         325 px  (davon „5.0" in **44 px Schrift**,
                                   Polster 20/16/18, margin-bottom 28)
       Kartenliste        370 px  (eine Karte, langer Text)
   ⭐ Drei Stellschrauben, keine davon wirft etwas weg:
     · die grosse Zahl von 44 auf 30 px
     · Polster und Abstaende halbiert
     · der Bewertungstext auf 5 Zeilen begrenzt (`line-clamp`) — der Rest
       ist weiter da, die Karte wird nur nicht mehr vom laengsten Text
       diktiert. Wer mehr lesen will, scrollt zur naechsten oder oeffnet
       die Bewertungsseite.
   ⛔ Die Zahlen (367 Bewertungen, 89 % / 7 % / 4 %) bleiben unangetastet —
   das sind echte Angaben, kein Zierrat.
   ======================================================================= */
html body .s304-neu .s304-rev .rev-heading-row{
  margin-bottom:10px !important;
}
html body .s304-neu .s304-rev > div > div:nth-child(2){
  padding:12px 12px 10px !important;
  margin-bottom:14px !important;
}
/* die grosse Durchschnittszahl */
html body .s304-neu .s304-rev div[style*="44px"],
html body .s304-neu .s304-rev > div > div:nth-child(2) div:first-child div:first-child div:first-child{
  font-size:30px !important;
  line-height:1.1 !important;
}
/* Der Bewertungstext: hoechstens 5 Zeilen */
html body .s304-neu .s304-rev > div > div:last-child > * p,
html body .s304-neu .s304-rev > div > div:last-child > * > div > div{
  display:-webkit-box !important;
  -webkit-line-clamp:5 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
}
html body .s304-neu .s304-rev{
  padding-bottom:10px !important;
}


/* === S304-REV-ECHTE-WAEHLER-2309 · Punkt 22, dritter Teil ==============
   ⛔ KORREKTUR AN MIR SELBST: ich hatte `line-clamp` ueber Positions-
   waehler gesetzt (`> div > div:last-child > * p`). Gemessen, was dabei
   herauskam: die Begrenzung landete auf `.rev-slider-card` — also auf der
   KARTE — statt auf dem Text. Die Karte blieb 366 px, der Text darin
   187 px und ungekuerzt.
   ⭐ Das Haus hat eigene Namen dafuer, ich habe sie nur nicht gesucht:
       .rev-slider-container · .rev-slider-track · .rev-slider-card
       .rev-slider-card__inner · .rev-slider-card__text · .rev-slider-card__img
   Positionswaehler raten, Klassennamen treffen. Ab hier die Namen.
   ======================================================================= */

/* Der Text der Bewertung: hoechstens 4 Zeilen (war 187 px ungekuerzt) */
html body .s304-neu .s304-rev .rev-slider-card__text{
  display:-webkit-box !important;
  -webkit-line-clamp:4 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
  font-size:12.5px !important;
  line-height:1.5 !important;
}
/* Die Karte darf sich dann zusammenziehen */
html body .s304-neu .s304-rev .rev-slider-card,
html body .s304-neu .s304-rev .rev-slider-card__inner{
  height:auto !important;
  align-self:start !important;
}
html body .s304-neu .s304-rev .rev-slider-card__img{
  width:48px !important;
  height:48px !important;
}
/* ⛔ Die Karte hat einen eigenen Slider — meinen Flex-Umbau ueber
   Positionswaehler nehme ich zurueck, das Haus macht es selbst. */
html body .s304-neu .s304-rev .rev-slider-track{
  scroll-snap-type:x mandatory !important;
}
html body .s304-neu .s304-rev .rev-slider-card{
  scroll-snap-align:center !important;
}
/* Die KI-Zusammenfassung: drei Zeilen reichen als Vorschau */
html body .s304-neu .s304-rev [class*="summary"] p,
html body .s304-neu .s304-rev [class*="zusammen"] p{
  display:-webkit-box !important;
  -webkit-line-clamp:3 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
}


/* === S304-REV-KISUMME-2309 · Punkt 22, letzter Teil ====================
   Nach Text-Begrenzung und Scroller: 648 von 870 px (74 %). Der letzte
   grosse Posten ist die KI-Zusammenfassung mit **184 px** (Knopf 41 +
   Text 119 + 24 Abstand).
   ⭐ `:has()` trifft den Block ueber sein Kind — kein Positionswaehler,
   der beim naechsten Umbau danebengreift. Live geprueft: der Browser
   unterstuetzt es (dieselbe Pruefung wie fuer `view()`).
   ⭐ Der Text bleibt vollstaendig im DOM, nur die Vorschau ist auf drei
   Zeilen begrenzt.
   ======================================================================= */
html body .s304-neu .s304-rev div:has(> div > .rev-ai-btn-animated){
  margin-top:8px !important;
  padding-top:8px !important;
}
html body .s304-neu .s304-rev div:has(> div > .rev-ai-btn-animated) > div:last-child{
  display:-webkit-box !important;
  -webkit-line-clamp:3 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
  padding:8px 10px !important;
  font-size:12px !important;
  line-height:1.45 !important;
}


/* === S304-BUNDLE-2309 · Punkt 28 =======================================
   Enzo: „auch das Bundle ist noch nicht mal richtig, auch nicht die
   Produktkacheln … Sieht überhaupt nicht aus wie ein Artefakt."

   Wert fuer Wert gegen `KastenPlastisch.dc.html` gemessen. Was schon stimmt:
       r22 · Titel 15/800 · Kachel ar 1.7 · r13 · Grund #FFF
       gewaehlt: outline 2px #15130F, offset 1px · Reihe gap 7
   Was abwich — vier Kleinigkeiten, die zusammen den Eindruck machen:
       Chip        9,5 px / Polster 5-9   →  Artefakt: 10 px / 3-8
       Kopf        margin-bottom 0        →  Artefakt: 3
       Unterzeile  #8A837C                →  Artefakt: #7C746E
       Polster     13/12/14               →  Artefakt: 12/12/13

   ⛔⛔ EINE ABWEICHUNG BLEIBT ABSICHTLICH BESTEHEN, und das ist wichtig:
   das Artefakt setzt `background: rgba(255,255,255,.74)` mit
   `backdrop-filter: blur(14px)` — Glas. Der Laden hat Weiss, deckend.
   **Das ist kein Versehen, sondern Enzos eigene Entscheidung vom 22.09.:**
   „niemals unterschiedliche Weisstoene" — durchsichtig ueber einem Grund
   mit Verlauf IST zwangslaeufig verschieden hell, das heilt kein
   Nachjustieren, nur Deckkraft. Danach gemessen: 29 Kaesten, genau ein Ton.
   Wer hier auf das Artefakt zurueckbaut, holt den Fehler zurueck, den er
   selbst gemeldet hat.
   ======================================================================= */
html body .s304-neu .s304-huelle{
  padding:12px 12px 13px !important;
}
html body .s304-neu .s304-gk-kopf{
  margin-bottom:3px !important;
}
html body .s304-neu .s304-gk-kopf .c{
  font-size:10px !important;
  padding:3px 8px !important;
  letter-spacing:.08em !important;
}
html body .s304-neu .s304-gk-sub{
  color:#7C746E !important;
  margin-bottom:9px !important;
  display:block !important;
}


/* === S304-PDP-R3-2309 · Punkte 18, 20, 24, 25, 27, 28, 29 ==============
   Gemessen, jeder Punkt mit seiner Ursache.
   ======================================================================= */

/* ── 28/29 · „da muss man swipen können" ─────────────────────────────────
   ⛔ URSACHE: `touch-action: pan-y` auf den Scrollern. Das erlaubt dem
   Finger NUR senkrechtes Wischen — waagerechtes wird an die Seite
   durchgereicht. Der Scroller war also technisch da (scrollWidth 773 bzw.
   2292 gegen 370 sichtbar), nur unbedienbar.
   ⭐ `pan-x` gibt die Waagerechte frei; `pinch-zoom` bleibt fuer die
   Bedienbarkeit erhalten. */
/* ⛔⛔ KORREKTUR 23.09. abends — DAS HIER WAR ENZOS „DA FREEZED DIE SEITE".
   `touch-action: pan-x pinch-zoom` gibt die Waagerechte frei und verbietet
   damit zugleich die SENKRECHTE. Wer auf dem Telefon den Finger auf „Dazu
   passt auch" oder „Inner Circle Fits" setzt und die Seite weiterscrollen
   will, bewegt nichts. Das ist kein Einfrieren, es sieht nur genau so aus —
   und diese Flaeche ist ueber 200 px hoch und volle Breite, man trifft sie
   kaum daneben.
   ⭐ `pan-x pan-y` gibt beide Achsen frei; der Browser entscheidet dann nach
   der Richtung der Geste, wie bei jedem waagerechten Scroller in einer
   senkrechten Seite. `pinch-zoom` bleibt, doppeltes Tippen bleibt aus.
   ⛔ LEHRE: eine `touch-action`-Liste ist eine ERLAUBNISLISTE, keine
   Ergaenzung — was nicht darin steht, ist verboten. Ich habe eine Achse
   freigegeben und dabei stillschweigend die andere zugemacht. */
html body .s304-community .swiper,
html body .s304-fits .swiper,
html body .s304-neu .s304-rev .rev-slider-track,
html body .s304-neu .s304-vids .swiper{
  touch-action:pan-x pan-y pinch-zoom !important;
  overscroll-behavior-x:contain !important;
}

/* ── 25 · Videos ohne weisse Kachel ──────────────────────────────────── */
/* === S304-VIDS-KAESTEN-2309 · Enzo, 23.09. abends ======================
   „Diese Videos sollen eigenstaendige Kaesten sein, das ist jetzt einfach
   ein grosses Rechteck."

   ⭐ DAS IST KEINE KEHRTWENDE VON IHM, SONDERN MEINE FEHLDEUTUNG.
   Punkt 25 hiess „Videos ohne weisse Kachel" — gemeint war der weisse
   RAHMEN um jedes Video (5 px Polster, weisse Flaeche). Ich habe daraufhin
   `box-shadow`, `border-radius` und `background` alle auf null gesetzt und
   damit jede Trennung mitgenommen. Drei gleich hohe Videos im Abstand von
   9 px lesen sich dann als ein durchgehender Streifen.
   ⭐ Der Unterschied, um den es geht: ein RAHMEN sitzt um das Video herum
   und kostet Flaeche. Ein KASTEN ist das Video selbst, mit eigener Kante
   und eigenem Wurf. Der Rahmen bleibt weg, der Kasten kommt zurueck.

   ⛔ ZWEI REGELN AUF DEMSELBEN WAEHLER, beide von mir: Zeile ~1589 legt die
   weisse Kachel an, diese hier nimmt sie zurueck. Ich haette beinahe eine
   DRITTE im Snippet davorgesetzt — dieselbe Krankheit, die ich heute frueh
   selbst diagnostiziert habe („fuenf Regeln fuer ein Padding"). Geaendert
   wird die Regel, die GEWINNT.
   ⭐ Der Wurf sitzt am Video, nicht am Slide: der Slide hat keinen Radius,
   ein Schatten an ihm waere eckig um ein rundes Video.
   ====================================================================== */
html body .s304-neu .s304-vids .swiper-slide{
  background:transparent !important;
  box-shadow:none !important;
  padding:0 !important;
  border-radius:0 !important;
  overflow:visible !important;   /* sonst schneidet der Slide den Wurf ab */
}
/* Mehr Luft zwischen den Kaesten — 9 px lasen sich als eine Flaeche. */
html body .s304-neu .s304-vids .swiper-wrapper{
  gap:14px !important;
}
html body .s304-neu .s304-vids .swiper-slide video,
html body .s304-neu .s304-vids .swiper-slide .s304-poster{
  border-radius:14px !important;   /* 16 -> 14 am 24.09.: die Seite kennt nur noch drei Radien */
  box-shadow:0 10px 22px -12px rgba(24,24,26,.45),
             0 2px 5px -2px rgba(24,24,26,.14),
             inset 0 0 0 1px rgba(24,24,26,.06) !important;
}
html body .s304-neu .s304-vids{
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
  padding:0 !important;
}

/* ── 27 · Bewertungen nicht mitten im Satz abschneiden ───────────────── */
html body .s304-neu .s304-rev .rev-slider-card__text{
  -webkit-line-clamp:8 !important;
}

/* ── 18 · Logo senkrecht zentrieren ──────────────────────────────────────
   GEMESSEN: 2 px Luft oben, **16 px unten** — der Versatz betraegt 14 px. */
html body .header__mobile .header__logo,
html body .header__mobile .header__logo__link,
html body .header__mobile .header__logo figure{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:100% !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  margin:0 !important;
}
html body .header__mobile{
  align-items:center !important;
}

/* ── 20 · Geschenk-Kacheln: groesser und weniger flach ────────────────────
   Enzo: „Die Bilder müssen auf jeden Fall noch größer … das ist ja auch so
   eine komische Form."
   GEMESSEN: 81 × 48 px bei `aspect-ratio: 1.7` — sehr flach.
   ⛔ Zurueck auf 1:1 geht NICHT: dort waren bei `cover` 45 % der Bildbreite
   weg (der Grund, warum man die Bracelets nicht erkannte).
   ⭐ 1.25 gibt 81 × 65 px — **35 % mehr Flaeche**, und weil `contain`
   bleibt, ist weiterhin nichts abgeschnitten. */
html body .s304-neu .s304-vk__b{
  aspect-ratio:1.25 !important;
  border-radius:15px !important;
}
html body .s304-neu .s304-vk{
  gap:9px !important;
}

/* ── 24 · der weisse Streifen unter dem Kaufknopf ────────────────────────
   Enzo: „unten beim CTA ist es jetzt wieder weiß … das Problem hatten wir
   ja schon." Die Flaeche hinter der Schwebeleiste war weiss, waehrend der
   Seitengrund dort dunkler wirkt. */
html body .cart-bar,
html body .s304-neu ~ .cart-bar,
html body .cart-bar__inner{
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
}
html body .cart-bar::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.86) 42%, #FFFFFF 100%) !important;
  pointer-events:none !important;
  z-index:-1 !important;
}


/* === S304-AUSWAHLBLATT-2309 · Punkt 21 =================================
   Enzo: „wenn ich auf Alle 8 ansehen drücke, kommt wieder das vom alten Theme."
   GEMESSEN: `.s304-sel` oeffnet mit 193 px Hoehe und **`border-radius: 0`** —
   ein eckiges Blatt in einem Laden, in dem alles gerundet ist. Genau das
   liest sich als „altes Theme".
   ======================================================================= */
html body .s304-neu .s304-sel{
  border-radius:20px !important;
  background:#FFFFFF !important;
  padding:10px !important;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,
             0 18px 40px -16px rgba(24,24,26,.46),
             0 3px 10px -3px rgba(24,24,26,.16) !important;
  border:1px solid rgba(21,19,15,.06) !important;
  overflow:hidden !important;
}
html body .s304-neu .s304-sel__o{
  border-radius:14px !important;
  border-top:0 !important;
  margin-bottom:4px !important;
  padding:8px 10px !important;
  background:rgba(21,19,15,.028) !important;
}
html body .s304-neu .s304-sel__o img{
  border-radius:11px !important;
}
html body .s304-neu .s304-sel__liste{
  background:transparent !important;
}

/* === S304-PLASTIK-2309 · Punkte 17 und 26 ==============================
   Enzo, zweimal: „kann man nicht das Burger Menü sogar auch so plastisch
   machen, so ein bisschen vor so einem transparenten Hintergrund … so
   ähnlich wie bei Scuffers, mit so einer Monoplastizität." · „kannst du
   bitte alles einfach so ein bisschen plastischer machen, wie der
   Warenkorb von Scuffers."

   ⭐ WAS SCUFFERS' PLASTIZITAET AUSMACHT, aus der Messung: es ist NICHT der
   Schatten — es sind **drei Lagen auf derselben Flaeche**:
       1. eine helle Lichtkante oben  (inset 0 1px 0 rgba(255,255,255,.9))
       2. ein weicher, weit gestreuter Wurf nach unten
       3. eine feine dunkle Kontur (1 px, sehr niedrige Deckkraft)
   Zusammen wirkt die Flaeche erhaben statt aufgeklebt. „Mono" heisst dabei:
   **ueberall derselbe Satz**, nicht je Element ein anderer — genau Enzos
   wiederkehrende Forderung nach Gleichheit.

   ⛔ Die Produktkacheln bekommen einen STAERKEREN Wurf als der Rest. Sie
   tragen die Ware; wenn Navigation und Ware gleich schwer wirken,
   konkurrieren sie (das war der Fehler des ersten Menues).
   ======================================================================= */
html body .s304-neu .s304-karte,
html body .s304-neu .s304-huelle,
html body .s304-neu .s304-fragen,
html body .drawer--cart .cart__item,
html body .drawer--header .menu-304__primary-link,
html body mobile-menu .menu-304__primary-link,
html body .s304-hist,
html body .s304-hist .s304-hist__track > *{
  box-shadow:0 1px 0 rgba(255,255,255,.92) inset,
             0 18px 40px -16px rgba(24,24,26,.44),
             0 3px 10px -3px rgba(24,24,26,.15) !important;
  border:1px solid rgba(21,19,15,.055) !important;
}
/* Die Ware bleibt die schwerste Flaeche im Bild. */
html body.s304-kat-an .product-item{
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset,
             0 22px 48px -16px rgba(24,24,26,.50),
             0 4px 12px -4px rgba(24,24,26,.18) !important;
}


/* === S304-THUMBS-EINHEITLICH-2309 ======================================
   Enzo: „diese Icy Stellar Bracelets, die sind dann vor einem weißen
   Hintergrund, dann aber kurz vor einem grauen — also die kleinen
   Thumbnails."

   ⭐ GEMESSEN, und er hat recht — ich habe jedes Miniaturbild auf ein
   Canvas gezeichnet und die vier Eckpixel ausgelesen:
       icy-stellar.webp        255   (reines Weiss, Packshot)
       attempt2_v1_1           209
       shot-6                  178
       shot-4                  151
       attempt2_v1_4           140
       shot-9                  113
       shot-12                  78   (dunkler Beton)
       **Spanne 177 von 255**
   Das ist kein CSS-Fehler: es sind die echten Fotos — ein Freisteller auf
   Weiss neben Lifestyle-Aufnahmen auf Beton.

   ⛔ WAS ICH NICHT KANN: die Fotos angleichen. Welche Bilder ein Produkt
   zeigt, ist eine Inhaltsentscheidung.
   ⭐ WAS HILFT: **allen Miniaturen dieselbe Fassung geben.** Eine helle
   Innenkante + gleicher Grund + gleicher Radius machen den Streifen ruhig,
   auch wenn die Bildinhalte verschieden bleiben. Das Auge liest dann die
   Reihe als eine Einheit statt als sieben verschiedene Flaechen.
   ⭐ Dazu ein sehr leichter Aufheller ueber den dunklen: 6 % Weiss nehmen
   dem Beton die Haerte, ohne das Motiv zu verwaschen.
   ======================================================================= */
html body .s304-neu .s304-mini__k{
  background:#FFFFFF !important;
  box-shadow:inset 0 0 0 1px rgba(18,18,20,.08) !important;
  overflow:hidden !important;
  position:relative !important;
}
html body .s304-neu .s304-mini__k::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:inherit !important;
  background:rgba(255,255,255,.06) !important;
  pointer-events:none !important;
  z-index:2 !important;
}
html body .s304-neu .s304-mini__k.is-active::after{
  background:transparent !important;
}
/* Die aktive Miniatur bleibt klar erkennbar. */
html body .s304-neu .s304-mini__k.is-active{
  box-shadow:inset 0 0 0 2px #15130F !important;
}


/* === S304-MOTIV-MITTIG-2309 · Enzos „dass das mittig ist" ==============
   Enzo: „Ich habe so oft zu Produkt-Thumbnails gesagt, wie die aussehen
   sollen, bessere Formate, dass das mittig ist — auch zu den Maßen."

   ⭐ ERST RICHTIG GEMESSEN. Mein erster Messversuch zeichnete jedes Bild
   ins QUADRAT und log dadurch. Korrigiert (Kasten im echten Verhaeltnis,
   `contain` proportional eingepasst) ergibt sich fuer alle vier
   Geschenk-Kacheln fast identisch:
       Kasten            79 × 63, object-fit: contain
       Schwerpunkt       **64 %** der Kastenhoehe  (Mitte waere 50)
       Luft oben         **47 %**
       Luft unten          18 %
       Motivhoehe          35 %
   Das Bracelet haengt also im unteren Drittel, mit fast der halben Kachel
   leer darueber. Genau das, was Enzo sieht.

   ⭐ URSACHE: die Luft steckt **im Bild**, nicht im Kasten. Die Packshots
   sind 240 × 132 und zeigen das Stueck im unteren Bildteil (45–96 % der
   Bildhoehe). `contain` zentriert brav das ganze Bild — samt seinem leeren
   Himmel.

   ⛔ `cover` waere der falsche Ausweg: Bild 1,82 gegen Kasten 1,25 heisst
   **31 % seitlicher Beschnitt** — und das Bracelet nimmt 79 % der Breite
   ein, wuerde also angeschnitten. Enzos Regel „duerfen nie abgeschnitten
   sein" gilt weiter.

   ⭐ GERECHNET STATT GERATEN:
       Bildhoehe im Kasten   43,5 px   (79 breit, ar 1,82)
       freie Hoehe           63 − 43,5 = 19,5 px
       Motivmitte im Bild    70,8 %  →  30,8 px ab Bildoberkante
       soll auf Kastenmitte  31,5 px
       Bildoberkante soll    31,5 − 30,8 = 0,7 px
       object-position Y     0,7 / 19,5 = **3,6 %**
   Also `object-position: 50% 4%` — das Bild rutscht nach oben, das Motiv
   landet mittig, und **nichts wird beschnitten**.
   ======================================================================= */
html body .s304-neu .s304-vk__b img{
  /* ── Nachtrag 23.09. abends, nachgerechnet ───────────────────────────
     Die 4 % galten fuer den 63-px-Kasten. Mit `aspect-ratio: 0.95` ist er
     83 px hoch, und derselbe Wert setzt das Motiv rund 10 px zu hoch:
         Bild bei `contain`  79 breit → 43,4 hoch
         freie Hoehe         83 − 43,4 = 39,6
         Motivmitte im Bild  0,699 (per Canvas ausgezaehlt, nicht geschaetzt)
         bei 4 %  → Oberkante 1,6 + 0,699·43,4 = 31,9   Kastenmitte 41,5
         gesucht  → Oberkante 41,5 − 30,3 = 11,2  →  11,2 / 39,6 = 28 %
     ⭐ Genau das ist der Grund, warum eine Zahl nie ohne ihren Bezug
     weitergereicht werden darf: die 4 % waren richtig und sind es nach
     einer Aenderung am NACHBARWERT nicht mehr. */
  object-position:50% 28% !important;
}
/* Der Kasten darf dadurch flacher werden — die ungenutzte Luft unten
   faellt weg, das Motiv bleibt gleich gross. */
html body .s304-neu .s304-vk__b{
  aspect-ratio:1.42 !important;
}


/* === S304-TRUSTZEILE-2309 ==============================================
   Drei Merkmale unter der Bewertung, als kleine Pillen — dieselbe Form wie
   Menue, Filter und Footer. Enzos „Monoplastizitaet" gilt auch hier.
   ⭐ Die Symbole sind Masken, keine Bilddateien: kein zusaetzlicher
   Ladevorgang, scharf bei jeder Aufloesung (die Lehre aus den verpixelten
   Menue-Logos von heute Nacht).
   ======================================================================= */
html body .s304-neu .s304-trustzeile{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:6px !important;
  margin:7px 0 0 !important;
  padding:0 !important;
  list-style:none !important;
}
html body .s304-neu .s304-trustzeile li{
  display:inline-flex !important;
  align-items:center !important;
  gap:5px !important;
  padding:5px 10px !important;
  border-radius:99px !important;
  background:rgba(21,19,15,.045) !important;
  border:1px solid rgba(21,19,15,.07) !important;
  font-size:10.5px !important;
  font-weight:600 !important;
  letter-spacing:.01em !important;
  color:#4A443E !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
}
html body .s304-neu .s304-tz__i{
  width:12px !important; height:12px; flex:0 0 auto;
  background:#6E6862 !important;
  -webkit-mask-repeat:no-repeat !important; mask-repeat:no-repeat;
  -webkit-mask-position:center !important; mask-position:center;
  -webkit-mask-size:contain !important; mask-size:contain;
}
html body .s304-neu .s304-tz__i--stahl{
  -webkit-mask-image:url("data:image/svg+xml !important;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Ccircle cx='10' cy='10' r='6.4'/%3E%3Ccircle cx='10' cy='10' r='2.6'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml !important;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Ccircle cx='10' cy='10' r='6.4'/%3E%3Ccircle cx='10' cy='10' r='2.6'/%3E%3C/svg%3E");
}
html body .s304-neu .s304-tz__i--wasser{
  -webkit-mask-image:url("data:image/svg+xml !important;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 2.5c2.6 2.6 4.4 5 4.4 7.3A4.4 4.4 0 0 1 10 14.2a4.4 4.4 0 0 1-4.4-4.4c0-2.3 1.8-4.7 4.4-7.3z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml !important;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 2.5c2.6 2.6 4.4 5 4.4 7.3A4.4 4.4 0 0 1 10 14.2a4.4 4.4 0 0 1-4.4-4.4c0-2.3 1.8-4.7 4.4-7.3z'/%3E%3C/svg%3E");
}
html body .s304-neu .s304-tz__i--schild{
  -webkit-mask-image:url("data:image/svg+xml !important;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 2.4 16 4.6v5c0 3.4-2.4 6.4-6 8-3.6-1.6-6-4.6-6-8v-5z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml !important;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 2.4 16 4.6v5c0 3.4-2.4 6.4-6 8-3.6-1.6-6-4.6-6-8v-5z'/%3E%3C/svg%3E");
}


/* === S304-TRUSTZEILE-KOMPAKT-2309 ======================================
   Gemessen: die drei Pillen brechen auf **zwei Zeilen** und kosten 60 px,
   wo 26 reichen. Bei 342 px Breite passen sie nur knapp nicht.
   ⭐ Statt die Schrift zu schrumpfen (dann liest sie niemand) werden
   Polster und Abstaende enger — der Text bleibt vollstaendig.
   ⛔ Sollte es trotzdem umbrechen, ist das kein Fehler: dann stehen sie
   in zwei Zeilen statt abgeschnitten. `flex-wrap` bleibt deshalb an.
   ======================================================================= */
html body .s304-neu .s304-trustzeile{
  gap:5px !important;
  margin-top:6px !important;
}
html body .s304-neu .s304-trustzeile li{
  padding:4px 8px !important;
  font-size:10px !important;
  gap:4px !important;
  letter-spacing:0 !important;
}
html body .s304-neu .s304-tz__i{
  width:11px !important;
  height:11px !important;
}


/* === S304-AUDIT-KORREKTUR-2309 ========================================
   Aus dem Durchgang ueber alle Anforderungen — zwei Treffer gegen mich:

   ⛔ 1. GESCHENKBILDER SIND KLEINER GEWORDEN, nicht groesser.
   Enzo wollte sie groesser (Runde 3, Punkt 20). Verlauf:
       Ausgangswert   81 × 48
       nach ar 1.25   80 × 64   ← richtig, groesser
       nach ar 1.42   79 × 56   ← **meine letzte Aenderung, kleiner**
   Ich hatte 1.42 gesetzt, um beim Mittigruecken „ungenutzte Luft unten"
   wegzunehmen — und dabei Enzos eigentliche Forderung uebergangen.
   ⭐ Nachgerechnet ist 1.25 sogar die bessere Wahl FUER die Mitte:
       Kasten 79 × 63 · Bild 43,5 hoch · freie Hoehe 19,5
       object-position 4 %  →  Bildoberkante 0,78
       Motivmitte 0,78 + 30,8 = 31,6   ·   Kastenmitte 31,5
   Also **beides zugleich**: groesser UND mittig. Die 1.42 waren schlicht
   ein Fehler.
   ======================================================================= */
html body .s304-neu .s304-vk__b{
  /* ── Nachtrag 23.09. abends ──────────────────────────────────────────
     Enzo: „die Produktkacheln, von dem Thumbnail, Thumbnails von 'Das
     schenken wir dir' muessen noch laenger in die Laenge."
     Verlauf dieser einen Zahl, damit niemand wieder im Kreis laeuft:
         Ausgang   81 × 48
         ar 1.42   79 × 56   ← war ein Fehler, KLEINER statt groesser
         ar 1.25   79 × 63   ← Stand bis heute
         ar 0.95   79 × 83   ← jetzt, „laenger in die Laenge"
     ⛔ `object-position` muss mitziehen: die 4 % oben waren FUER ar 1.25
     gerechnet (freie Hoehe 19,5 px). Bei einem hoeheren Kasten waechst die
     freie Hoehe auf rund 44 px, und dieselben 4 % setzen das Motiv dann
     etwa 11 px zu hoch. Der neue Wert steht unten und ist nachgemessen,
     nicht geschaetzt. */
  aspect-ratio:0.95 !important;
}


/* === S304-BEWERTUNGEN-KOMPROMISS-2309 =================================
   ⛔ EIN ZIELKONFLIKT AUS ZWEI ENZO-ANSAGEN, und ich habe ihn bisher
   stillschweigend in eine Richtung aufgeloest:
     Runde 2: „es soll wirklich nur 60% des aktuellen Platz wegnehmen"
     Runde 3: „das mit den Bewertungen ist auch überhaupt nicht gut,
               das ist ja jetzt abgeschnitten"
   Beides zugleich geht nicht: weniger Platz heisst weniger Text.
   Verlauf: 870 px → 590 (68 %, `line-clamp: 4`, Text brach ab)
            → 667 (77 %, `line-clamp: 8`, Text vollstaendig)

   ⭐ Der Mittelweg: **`line-clamp: 6`**. Sechs Zeilen sind ein ganzer
   Gedanke — der Text bricht nicht mitten im Satz ab — und der Block landet
   bei rund 70 %. Wer mehr lesen will, wischt zur naechsten Bewertung.
   ⛔ Das ist ein Kompromiss, keine Erfuellung. Wenn Enzo die 60 % streng
   will, muss die KI-Zusammenfassung weichen (184 px) — das ist eine
   Inhaltsentscheidung, keine gestalterische.
   ======================================================================= */
/* ⛔⛔ 01:50 — KLAMMER GANZ AUF. Enzo wollte die Bewertungen
   ungekürzt; im Bild endete der Text trotzdem mit „… zum No-Braine…",
   obwohl er vollständig im DOM steht.
   ⭐⭐ DER GRUND IST EIN STAPEL AUS DREI REGELN FÜR DIESELBE EIGENSCHAFT,
   alle mit demselben Selektor, über Wochen nacheinander hinzugefügt:
       Zeile 1732  -webkit-line-clamp: 4
       Zeile 1915  -webkit-line-clamp: 8
       Zeile 2279  -webkit-line-clamp: 6   ← diese gewann
   Und meine vierte, mit schwächerem Selektor, verlor gegen alle drei.
   **Vier Regeln für eine Zahl. Das ist die Dopplungsfalle in Reinform** —
   jede einzelne war zu ihrer Zeit richtig, zusammen ergeben sie einen
   Zustand, den niemand entschieden hat.
   ⛔ Die Höhe des Rahmens muss mitwachsen, sonst schneidet er statt der
   Klammer. */
html body .s304-neu .s304-rev .rev-slider-card__text{
  -webkit-line-clamp:none !important;
  display:block !important;
  overflow:visible !important;
  max-height:none !important;
}
html body .s304-neu .s304-rev .rev-slider-container,
html body .s304-neu .s304-rev .rev-slider-card,
html body .s304-neu .s304-rev .rev-slider-card__inner{
  height:auto !important;
  max-height:none !important;
}

}
/* ═══ Ende der Ebene s304 ═══ */


/* === S304-BESTELLZEILE-ENG-2309 · Enzo, 23.09. abends ===================
   „Und die ist zuletzt vor 32 Minuten bestellt, der goldene Punkt ist gut,
   aber wir verschwenden da voll viel Platz nach oben und unten hin, dann
   koennen wir lieber das kuerzer machen."

   ⭐ NACHGEMESSEN, und er hat recht — die Zeile ist nicht das Problem,
   ihr Umfeld ist es. Bei 402 px, von der Unterkante der Miniaturen bis zur
   Unterkante der Produktkarte:
       Luecke Miniaturen → Zeile   10 px   (margin-bottom der Miniaturen)
       Zeilenblock                 25 px   (13 px Text + 12 px margin-top)
       Luecke Zeile → Kartenrand   17 px   (14 px padding + Rest)
       ───────────────────────────────────
       52 px fuer 13 px Text — das Vierfache.

   ⭐ Der Punkt und die Zeile selbst bleiben unangetastet: „der goldene Punkt
   ist gut" war ausdrueckliches Lob. Geaendert wird nur die Luft darum.
   Neu gerechnet: 4 + (13+3) + 10 = **rund 30 px**, gut 40 % weniger.

   ⛔ `padding-bottom` gehoert der ganzen Produktkarte, nicht nur dieser
   Zeile. Es ist hier trotzdem der richtige Hebel, weil die Zeile das letzte
   Element der Karte ist — geprueft, es steht nichts anderes darunter.
   ====================================================================== */
@layer s304 {
  html body .s304-neu .product__mobile-header .s304-mini,
  html body .s304-neu .product__mobile-header .product__thumbs{
    margin-bottom:4px !important;
  }
  html body .s304-neu .v-gold-badge-container{
    margin-top:3px !important;
  }
  html body .s304-neu .v-force-up-wrapper{
    margin-bottom:0 !important;
  }
  html body .s304-neu .product__mobile-header.s304-karte{
    padding-bottom:10px !important;
  }
}


/* === S304-VLEISTE-SATZ-2309 · Enzo, 23.09. nachts ======================
   „Und auch das Layout von der Versandleiste finde ich komisch. Bis gratis
   versand noch 25 Euro, das muesste doch noch 25 Euro bis gratis versand
   und auch nicht so aufdringlich, weisst du, sondern ein bisschen kleiner
   die Schrift und dann nicht in gruen und so, einfach alles in schwarz."

   ⭐ WARUM ER ES VERDREHT GELESEN HAT — es lag nicht an ihm. Das Markup ist
       <b>Noch 25,00 €</b><span class="s304-vbar">…</span><em>bis Gratisversand</em>
   und `em` trug `margin-left: auto`. Der Balken stand also **mitten im
   Satz** und schob das Satzende an den rechten Rand. Auf dem Bild sieht das
   aus wie zwei getrennte Angaben, und die rechte liest man zuerst.
   ⭐ Der Satz gehoert zusammen, der Balken darunter. Umgestellt wird mit
   `order` und einem Umbruch — **ohne das Markup anzufassen**, das aus dem
   Theme kommt.

   ⛔ DAS GRUEN: `em` stand auf `rgb(30,122,69)`. Ich habe die ganze Seite
   nach gruenen Flaechen abgesucht (Text, Grund und Rahmen, ueber die
   Sichtbarkeit der ganzen Elternkette gefiltert) — **es war das einzige
   gruene Element auf der Produktseite**. Ein einzelner Farbfleck, der sonst
   nirgends vorkommt, wirkt immer wie ein Fremdkoerper. Jetzt schwarz.

   ⭐ „nicht so aufdringlich": 12,5/13 px und Gewicht 600 waren so gross wie
   der Fliesstext daneben. Die Zeile ist ein Hinweis, keine Ansage — also
   11 px, und nur die Zahl bleibt kraeftig.
   ====================================================================== */
@layer s304 {
  html body .s304-neu .s304-vkopf{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:baseline !important;
    gap:4px !important;
    padding:8px 14px 10px !important;
  }
  /* Der Satz zuerst, in Leserichtung … */
  html body .s304-neu .s304-vkopf b{
    order:1 !important;
    margin:0 !important;
    font-size:11.5px !important;
    font-weight:700 !important;
    color:#15130F !important;
  }
  html body .s304-neu .s304-vkopf em{
    order:2 !important;
    margin-left:0 !important;      /* hob den Satz auseinander */
    margin-right:auto !important;
    font-size:11.5px !important;
    font-weight:500 !important;
    color:#15130F !important;      /* war rgb(30,122,69) */
    font-style:normal !important;
  }
  /* … und der Balken auf eigener Zeile darunter. */
  html body .s304-neu .s304-vbar{
    order:3 !important;
    width:100% !important;
    flex:0 0 100% !important;
    height:5px !important;
    margin-top:7px !important;
    background:rgba(21,19,15,.10) !important;
  }
  html body .s304-neu .s304-vbar > *{
    background:#15130F !important;
  }
}


/* === S304-EINE-KANTE-2309 · Enzos haeufigster Punkt, systematisch =======
   „nicht die gleichen Masse wie der Header und dann sieht das so richtig
   haesslich aus." — dieser Satz faellt bei ihm immer wieder, und er ist
   nie eine Geschmacksfrage. Deshalb einmal ALLE Bloecke der Produktseite
   ausgemessen statt einzeln nachzubessern:

       370 px @ x = 16   ← 12 von 15 Bloecken
       342 px @ x = 30     `.km-delivery-wrap`  (liegt INNEN in einer Karte,
                            das Mass ist also richtig — kein Fehler)
       368 px @ x = 17     `.s304-videos`       (2 px, innen, unkritisch)
       338 px @ x = 32     `.s304-hist`         ← **der echte Abweichler**

   Radien: 22 px neunmal, 16 px einmal (`.s304-vkopf`), 0 px fuenfmal
   (innenliegende Bloecke ohne eigene Karte — richtig so).

   ⭐ Eine Messung ueber ALLE Bloecke findet in einem Durchgang, was
   einzelnes Nachbessern in fuenf Runden findet — und sie sagt auch, welche
   Abweichung KEINE ist. Beides ist der Punkt.
   ====================================================================== */
@layer s304 {
  html body .s304-hist{
    width:auto !important;
    max-width:none !important;
    /* ⛔⛔ HIER STAND `margin: 0 16px` — UND DAS WAR FALSCH, zum ZWEITEN Mal
       an einem Abend derselbe Fehler:
           SECTION.custom-code (der Traeger)  padding: 0 16px
           + mein margin                              16px
           = gemessener Rand                          **32 px**
       Genau so war es zwei Stunden vorher beim `.s304-wk-hebel`: 12 px
       Polster im `.drawer__foot` plus meine 16 ergaben x = 28 statt 16.
       Ich hatte die Lehre dort sogar hingeschrieben — „ein Rand plus ein
       fremdes Polster ist nicht derselbe Rand" — und sie hier nicht
       angewandt.
       ⭐ DIE REGEL, die beide Faelle loest: **einen Abstand nie setzen, ohne
       das Polster des Traegers gemessen zu haben.** Bringt der Traeger den
       Rand schon mit, ist der richtige Wert NULL, nicht derselbe noch
       einmal.
       ⭐ Und die Pruefung dazu: nicht „ist es 370 breit", sondern
       **„haben alle Bloecke denselben Abstand zum Rand"** — eine relative
       Messung findet genau diese Klasse Fehler, und sie funktioniert bei
       jeder Fensterbreite. Gefunden hat es eine Auszaehlung ueber acht
       Bloecke: sieben mal 16, einmal 32. */
    margin-left:0 !important;
    margin-right:0 !important;
    box-sizing:border-box !important;
  }
  /* Die Versandleiste war der einzige 16er unter lauter 22ern. */
  html body .s304-neu .s304-vkopf{
    border-radius:22px !important;
  }
}


/* === S304-PERKS-UND-SCROLLHINWEIS-2309 · zwei Enzo-Punkte ==============

   ── 1 · DIE PERKS ────────────────────────────────────────────────────
   Enzo: „304-Edelstahl, Wasserfest, eine Garantie, die sind cool, aber die
   muessen ja dann entweder noch mit Icon und das sieht auch zu vibe-coded
   aus dann jetzt gerade."

   ⭐ GEMESSEN — und seine Vermutung „kein Icon" stimmt nicht ganz, sein
   Eindruck aber schon: die Zeichen SIND da, als SVG-Maske
   (`-webkit-mask-image: url(data:image/svg+xml…)`). Nur eben:
       Groesse   **11 x 11 px**
       Farbe     **rgb(110,104,98)** — ein blasses Grau-Braun
   Bei 11 px ist eine Kontur nicht mehr lesbar, sie wird zum Fleck; und
   blassgrau neben schwarzem Text liest sich als „ausgegraut", also
   unwichtig. Genau das ergibt den Eindruck „hingeworfen".
   ⭐ 15 px und der Haus-Ton machen aus dem Fleck wieder ein Zeichen. Die
   Schrift bleibt bei 10 px — das Zeichen soll fuehren, nicht die Zeile
   groesser werden.

   ── 2 · „MAN SIEHT NICHT, DASS ES SCROLLT" ───────────────────────────
   Enzo: „Inner Circle Fits, kann man nicht scrollen, das muss man ja
   scrollen koennen und dann muss sie sich ja bewegen."

   ⛔ EHRLICH: ob der Finger dort wirklich scrollt, konnte ich NICHT
   pruefen. Mein Test mit synthetischen Touch-Ereignissen meldete „bewegt
   sich nicht" — aber die Positivkontrolle an einem garantiert scrollbaren
   Kasten meldete dasselbe. **Der Messkanal ist blind**, synthetische
   Touches loesen kein natives Scrollen aus. „Bewegt sich nicht" war damit
   keine Aussage, und ich habe nichts darauf gebaut.

   ⭐ Was MESSBAR ist, und alles davon stimmt:
       `scrollWidth 2308 > clientWidth 535`   → scrollbar moeglich
       `overflow-x: auto`                      → nativ scrollbar
       `touch-action: pan-x pinch-zoom`        → Waagerechte freigegeben
       kein Elternteil blockiert die Waagerechte
       Swiper ruft **kein** `preventDefault`   → faengt den Finger nicht ab
       das naechste Element ist angeschnitten  → es sieht nach mehr aus
   ⭐ Und der eine Befund, der ein echter Mangel ist:
       **`scrollbar-width: none`** — es gibt keinen dauerhaften Hinweis.
   Ein angeschnittenes Bild allein kann auch „schlecht zugeschnitten"
   heissen. Eine dezente Leiste sagt „hier geht es weiter" auch im Stand.
   ====================================================================== */
@layer s304 {
  /* ── Perks: das Zeichen wird wieder lesbar ─────────────────────────── */
  html body .s304-neu .s304-tz__i,
  html body .s304-trustzeile [class*="tz__i"]{
    width:15px !important;
    height:15px !important;
    background-color:#2A241E !important;   /* war rgb(110,104,98) */
    flex:0 0 15px !important;
  }

  /* ── Scroller zeigen, dass sie Scroller sind ───────────────────────── */
  html body .s304-fits .swiper,
  html body .s304-community .swiper,
  html body .s304-neu .s304-rev .rev-slider-container{
    scrollbar-width:thin !important;
    scrollbar-color:rgba(21,19,15,.26) transparent !important;
    padding-bottom:6px !important;
  }
  html body .s304-fits .swiper::-webkit-scrollbar,
  html body .s304-community .swiper::-webkit-scrollbar{
    height:4px !important;
    -webkit-appearance:none !important;
  }
  html body .s304-fits .swiper::-webkit-scrollbar-track,
  html body .s304-community .swiper::-webkit-scrollbar-track{
    background:rgba(21,19,15,.07) !important;
    border-radius:99px !important;
  }
  html body .s304-fits .swiper::-webkit-scrollbar-thumb,
  html body .s304-community .swiper::-webkit-scrollbar-thumb{
    background:rgba(21,19,15,.30) !important;
    border-radius:99px !important;
  }
}


/* === S304-DAZU-PASST-BREITE-2309 · eine Henne-Ei-Falle =================
   Enzo: „Dazu passt auch, kann ich auch nicht scrollen."

   ⭐ ER HAT RECHT, UND DER GRUND IST BESSER ALS „NICHT SCROLLBAR":
   **der Block ist gar nicht da.** Gemessen an der echten Seite, alle vier
   Karten:
       slide.getBoundingClientRect().width   **0**
       getComputedStyle(slide).width         **0px**
       img.complete && naturalWidth > 0      **false** — bei allen vieren

   Die Kette, und sie schliesst sich selbst:
       1. Die Bilder tragen `loading="lazy"` und liegen weit unten.
       2. Swiper laeuft mit `slidesPerView: 'auto'` und misst die Breite
          eines Slides **aus seinem Inhalt**.
       3. Ein ungeladenes Bild ist 0 breit → der Slide wird 0 breit.
       4. Ein 0 px breiter Slide kommt **nie** in den Sichtbereich.
       5. Also laedt das Bild nie, also bleibt der Slide 0.
   ⭐⭐ Das ist keine Scroll-Frage: `scrollWidth 370 == clientWidth 370`,
   es gibt schlicht nichts zu scrollen. Wer hier „touch-action" repariert,
   repariert am falschen Ende — ich war kurz davor.

   ⭐ DIE LOESUNG GEHOERT INS CSS, nicht ins JS: eine Breite, die **nicht
   vom Inhalt abhaengt**, bricht die Kette bei Schritt 3. Ein
   `swiper.update()` nach dem Bildladen waere der JS-Weg — er braeuchte
   einen Beobachter und liefe genau in die Taktfalle, die heute Nacht schon
   zweimal zugeschlagen hat.
   ⭐ 150 px bei 370 px sichtbar heisst: zwei Karten ganz, die dritte
   angeschnitten — dasselbe „hier geht es weiter", das bei den Videos
   funktioniert.
   ⛔ `aspect-ratio` dazu, damit die Hoehe ebenfalls steht, bevor das Bild
   da ist — sonst springt das Layout beim Nachladen.

   ⭐ Zum Vergleich, warum `.s304-fits` NICHT betroffen ist: dort tragen die
   Slides eine CSS-Breite (gemessen 221 px), also greift dieselbe Falle
   nicht. Derselbe Swiper, dieselben Einstellungen — der Unterschied ist
   allein die gesetzte Breite.
   ====================================================================== */
@layer s304 {
  html body .s304-community .swiper-slide{
    width:150px !important;
    min-width:150px !important;
    flex:0 0 150px !important;
  }
  html body .s304-community .swiper-slide > *,
  html body .s304-community__karte{
    display:block !important;
    width:100% !important;
  }
  html body .s304-community__karte img{
    width:100% !important;
    aspect-ratio:3/4 !important;
    object-fit:cover !important;
    display:block !important;
    border-radius:14px !important;
    background:rgba(21,19,15,.045) !important;
  }
}


/* === S304-DREI-RADIEN-2409 · Enzos Kernsatz, in Zahlen ==================
   Enzo: „Da ist voll oft ein Grau, dann darueber wieder ein Grau. Dann ist
   es eckig, dann ist es rund. Muss einfach clean sein."

   ⭐ AUSGEZAEHLT auf EINER Produktseite, alle sichtbaren Flaechen ueber
   60x24 px (262 Stueck geprueft):

       ZEHN verschiedene Eckradien
         14 px  36x   Bilder, Fits-Kacheln      ← der Zielwert fuer innen
         18 px  20x   Swiper-Slides
         20 px  16x   Galerie, Dias
         22 px  12x   die Karten                ← der Zielwert fuer Karten
         99 px   9x   Pillen und Knoepfe        ← der Zielwert fuer Pillen
         16 px   6x   Video-Poster
         15 px   4x   Geschenk-Bildkasten
          8 px   3x   Bewertungskarte innen
          3 px   1x   Produktdetail-Flaeche
         12 px   1x

       ACHT neutrale Toene, darunter 33x reines Weiss und ein einzelnes
       rgb(244,244,244), das nirgends sonst vorkommt.

   ⭐⭐ Drei Werte reichen fuer alles, und sie haben eine BEDEUTUNG:
       **22 px** — eine Karte, die auf dem Grund liegt
       **14 px** — alles, was IN einer Karte liegt
       **99 px** — alles Pillenfoermige (Knopf, Chip, Abzeichen)
   Wer den Radius sieht, weiss dann sofort, auf welcher Ebene er ist. Das
   ist der Unterschied zwischen „aufgeraeumt" und „zufaellig gleich".

   ⛔ Die Radien werden NICHT pauschal ueber `*` gesetzt — das haette heute
   schon einmal die `<script>`-Tags sichtbar gemacht. Jede Regel nennt ihre
   Elemente.
   ====================================================================== */
@layer s304 {
  /* ── alles, was INNEN liegt: 14 ─────────────────────────────────────── */
  html body .s304-neu .product__slides,
  html body .s304-neu .product__slide,
  html body .s304-neu .product__slide img,
  html body .s304-neu .s304-galerie,
  html body .s304-neu .s304-dia,
  html body .s304-neu .s304-vk__b,
  html body .s304-neu .s304-spec__l,
  html body .s304-community .swiper-slide,
  html body .s304-fits .swiper-slide,
  html body .s304-fits__media,
  html body .s304-videos .swiper-slide,
  html body .s304-videos video,
  html body .s304-videos .s304-poster,
  html body .s304-neu .rev-slider-card,
  html body .s304-neu .rev-slider-card__inner,
  html body .s304-hist__step{
    border-radius:14px !important;
  }

  /* ── die Karten: 22 ─────────────────────────────────────────────────── */
  html body .s304-neu .s304-karte,
  html body .s304-neu .product__block,
  html body .s304-neu .s304-vkopf,
  html body .s304-neu .s304-huelle,
  html body .s304-neu .product__mobile-header,
  html body .s304-community,
  html body .s304-fits,
  html body .s304-hist,
  html body .s304-videos{
    border-radius:22px !important;
  }

  /* ── EIN Innenton, nicht acht ───────────────────────────────────────
     Die Bewertungskarte trug als einzige `rgba(21,19,15,.043)` MIT
     `border-radius: 0` — eckiges Grau in einer runden Karte. Genau das
     liest sich als „schrecklich". Sie wird jetzt behandelt wie jede andere
     Innenflaeche: heller Schleier, runde Kante, kein eigener Ton. */
  html body .s304-neu .rev-slider-card{
    /* ⛔ Hier stand `rgba(255,255,255,.55)` — und damit hatte ich beim
       Aufraeumen einen NEUNTEN Ton erzeugt, waehrend ich acht abschaffen
       wollte. Die Bewertungskarte liegt IN einer Karte, ist also eine
       Innenflaeche und nimmt den Innenton, den es 30x auf der Seite schon
       gibt. Kein eigener Wert fuer einen Sonderfall.
       ⭐ Enzos „der Hintergrund finde ich schrecklich" galt der Kombination
       aus eckig UND grau — der Ton allein ist in Ordnung, sobald die Kante
       rund ist. */
    background:rgba(21,19,15,.043) !important;
    box-shadow:inset 0 0 0 1px rgba(24,24,26,.05) !important;
  }
  /* Der letzte Einzelgaenger: ein rgb(244,244,244), das genau einmal
     vorkommt und nirgends erklaert ist. */
  html body .s304-neu [style*="244"],
  html body .s304-neu .s304-rev > div > div:first-child{
    background:transparent !important;
  }
  html body .s304-neu .rev-slider-card__inner{
    background:transparent !important;
  }
}


/* === S304-ENZOS-WAHL-2409 · Fassung 2, plastischer ======================
   Enzos Entscheidung am 24.09., woertlich:
     „Ich finde dieses Medaillon gut, aber das halt in kleiner — weil das
      soll ja oben auf der Page stehen."
     „Ich haette das gerne randlos, aber dass dann trotzdem der Rand so
      abgerundet ist."
     „Kannst du es bitte so plastisch wie Scuffers machen? Fassung 2, das
      soll noch plastischer sein."
     „Bei Icy Stellar sieht man ja, das ist in dieser Vitrine drin — aber
      ich haette gerne, dass das einfach alles weiss ist, sodass man das
      gar nicht checkt."

   ⭐⭐ DER LETZTE SATZ IST DER WICHTIGSTE und widerspricht dem Rest nur
   scheinbar: der BILDTRAEGER soll verschwinden, nicht die Plastizitaet.
   Ein freigestelltes Produktfoto auf Weiss braucht keinen Kasten — jede
   Kante darum sagt „hier ist ein Bild", und genau das soll man nicht
   sehen. Die Tiefe wandert deshalb nach AUSSEN (die Karte) und
   verschwindet INNEN (das Bild).

   Die vier Bauteile:
   ── 1 · MEDAILLON, KLEIN ────────────────────────────────────────────
   Die Scheibe aus Fassung B, aber 30 statt 40 px, und Icon plus Text in
   einer Zeile statt untereinander — die Perks stehen oben auf der Seite
   und duerfen dort keine Hoehe kosten.
   ── 2 · BILD RANDLOS, ECKEN RUND ────────────────────────────────────
   Kein Traeger, kein Grund, kein Wurf, keine Kante: nur Radius 14 und
   `background: #FFFFFF`, damit der Uebergang vom Foto zur Flaeche nicht
   sichtbar ist. Das Foto ist auf Weiss freigestellt, also ist Weiss hier
   die einzige Farbe, die keine Kante erzeugt.
   ── 3 · PLASTISCHER ─────────────────────────────────────────────────
   Nach Scuffers-Art: eine echte Lichtkante oben (nicht 0.95, sondern 1),
   ein zweiter, engerer Wurf direkt unter der Karte, und ein ganz leichter
   Verlauf IN der Flaeche. Drei Schatten statt einem — so entsteht Tiefe,
   die nicht wie ein aufgeklebter Effekt aussieht.
   ── 4 · DIE PRODUKTKARTE WIRD WEISSER ───────────────────────────────
   Von .66 auf .82: je durchscheinender die Karte, desto sichtbarer die
   Kante zum weissen Bild darin. Enzos „alles weiss" braucht eine Karte,
   die fast weiss ist — die Tiefe kommt dann aus dem Schatten, nicht aus
   dem Farbunterschied.
   ====================================================================== */
@layer s304 {

  /* ── 1 · Perks als kleines Medaillon ───────────────────────────────── */
  html body .s304-neu .s304-trustzeile{
    display:flex !important;
    gap:6px !important;
    padding:0 !important;
    margin:0 0 2px !important;
    list-style:none !important;
  }
  html body .s304-neu .s304-trustzeile li{
    flex:1 1 0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:6px !important;
    height:auto !important;
    padding:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    border-radius:0 !important;
    font-size:9.5px !important;
    font-weight:700 !important;
    letter-spacing:.01em !important;
    color:#15130F !important;
    white-space:nowrap !important;
  }
  /* ⛔⛔ ERSTER ANLAUF WAR FALSCH, und der Fehler ist lehrreich:
     Ich hatte der Scheibe denselben Traeger gegeben wie dem Zeichen. Das
     Element `.s304-tz__i` traegt aber eine **Maske** (`mask-image` mit der
     Icon-Silhouette) — und eine Maske beschneidet ALLES, was das Element
     zeichnet, auch einen Hintergrundverlauf. Statt einer Scheibe mit Icon
     darin waere eine Icon-Silhouette in Verlaufsfarbe herausgekommen.
     Gemessen: `maske: url("data:image/svg+xml…")` lag weiterhin auf dem
     Element selbst.
     ⭐ **Ein maskiertes Element kann keinen eigenen Hintergrund zeigen.**
     Scheibe und Zeichen brauchen deshalb zwei getrennte Flaechen: die
     Scheibe kommt als `::before` des `<li>` (unmaskiert), das maskierte
     Zeichen legt sich mit negativem Rand darauf.
     ⭐ Warum nicht einfach ein `<svg>` ins Markup: das Markup kommt aus
     `304-custom.js` und wird an mehreren Stellen erzeugt — eine CSS-Loesung
     bleibt an EINER Stelle. */
  html body .s304-neu .s304-trustzeile li::before{
    content:"" !important;
    flex:0 0 30px !important;
    width:30px !important;
    height:30px !important;
    border-radius:99px !important;
    background-image:linear-gradient(160deg, #FFFFFF 0%, #E9E3DB 100%) !important;
    box-shadow:0 2px 4px rgba(18,18,20,.16),
               inset 0 1px 0 rgba(255,255,255,1),
               inset 0 -1px 2px rgba(18,18,20,.10) !important;
  }
  /* Das Zeichen: 15 px, maskiert, mittig auf der Scheibe. */
  html body .s304-neu .s304-tz__i,
  html body .s304-neu .s304-trustzeile [class*="tz__i"]{
    width:15px !important;
    height:15px !important;
    flex:0 0 15px !important;
    margin-left:-22.5px !important;   /* 30/2 + 15/2 */
    margin-right:7.5px !important;
    background-color:#2A241E !important;
    background-image:none !important;
    border-radius:0 !important;
    box-shadow:none !important;
    position:relative !important;
    z-index:1 !important;
  }

  /* ── 2 · Das Bild: randlos, weiss, nur die Ecken rund ───────────────
     ⛔ KEIN Wurf, KEINE Innenkante, KEIN abweichender Grund. Jede dieser
     drei Zutaten macht den Kasten sichtbar, den Enzo nicht sehen will. */
  html body .s304-neu .product__slides,
  html body .s304-neu .s304-galerie,
  html body .s304-neu .product__slide,
  html body .s304-neu .s304-dia,
  html body .s304-neu .product__slide img,
  html body .s304-neu .s304-dia img{
    background:#FFFFFF !important;
    box-shadow:none !important;
    border:0 !important;
    border-radius:14px !important;
  }
  html body .s304-neu .product__slides,
  html body .s304-neu .s304-galerie{
    padding:0 !important;
  }

  /* ── 3 + 4 · die Karten: weisser UND plastischer ───────────────────── */
  html body:not(.template-index) .s304-neu .s304-karte,
  html body:not(.template-index) .s304-neu .product__block,
  html body:not(.template-index) .s304-neu .product__mobile-header,
  html body:not(.template-index) .s304-neu .s304-huelle,
  html body:not(.template-index) .s304-neu .s304-vkopf{
    background-color:rgba(255,255,255,.82) !important;
    background-image:linear-gradient(176deg,
                     rgba(255,255,255,.55) 0%,
                     rgba(255,255,255,0) 42%) !important;
    box-shadow:inset 0 1px 0 0 rgba(255,255,255,1),
               inset 0 0 0 1px rgba(24,24,26,.055),
               0 2px 4px -2px rgba(24,24,26,.10),
               0 16px 34px -22px rgba(24,24,26,.55) !important;
  }

  /* Die Miniaturen bekommen dieselbe Sprache — kleine Karten, gleiche
     Lichtrichtung. */
  html body .s304-neu .s304-mini__k,
  html body .s304-neu .product__thumb{
    background:#FFFFFF !important;
    border-radius:14px !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,1),
               inset 0 0 0 1px rgba(24,24,26,.06),
               0 3px 7px -5px rgba(24,24,26,.45) !important;
  }
  html body .s304-neu .s304-mini__k.is-active,
  html body .s304-neu .product__thumb.is-active{
    box-shadow:0 0 0 2px #15130F,
               0 3px 7px -4px rgba(24,24,26,.5) !important;
  }
}


/* === S304-PERKS-EINE-ZEILE-2409 ========================================
   Enzo: „aber das halt in kleiner, weil das soll ja oben auf der Page
   stehen."
   ⭐ GEMESSEN bei echten 402 px: mit 30-px-Scheiben war die Zeile **75 px
   hoch** — sie brach auf zwei Zeilen um. Jedes Glied war 161 px breit,
   drei davon 483 gegen 327 verfuegbare.
   ⭐ Gerechnet, was hineinpasst: 3 x 26 (Scheibe) + 3 x 5 (Luecke) +
   Texte bei 9 px + 2 x 5 (Abstand) ≈ 245 von 327. Passt mit Luft.
   ⛔ Die Texte selbst bleiben unangetastet — sie kommen aus dem Liquid und
   stehen an mehreren Stellen. Eine gekuerzte Beschriftung waere eine
   zweite Wahrheit, und die laeuft irgendwann auseinander.
   ⭐ Zusaetzlich `flex-wrap: nowrap`: bricht es trotzdem irgendwo um, soll
   die Schrift schrumpfen, nicht die Zeile wachsen — so bleibt die Hoehe
   verlaesslich, egal wie lang ein Wort einmal wird.
   ====================================================================== */
@layer s304 {
  html body .s304-neu .s304-trustzeile{
    flex-wrap:nowrap !important;
    gap:5px !important;
  }
  html body .s304-neu .s304-trustzeile li{
    gap:5px !important;
    font-size:9px !important;
    letter-spacing:0 !important;
    min-width:0 !important;
    overflow:hidden !important;
  }
  html body .s304-neu .s304-trustzeile li::before{
    flex:0 0 26px !important;
    width:26px !important;
    height:26px !important;
  }
  html body .s304-neu .s304-tz__i,
  html body .s304-neu .s304-trustzeile [class*="tz__i"]{
    width:13px !important;
    height:13px !important;
    flex:0 0 13px !important;
    margin-left:-19.5px !important;   /* 26/2 + 13/2 */
    margin-right:6.5px !important;
  }
}


/* === S304-ECHTE-IKONEN-2409 · die Perk-Zeichen waren NIE Zeichen =======
   ⛔⛔ EIN ALTFEHLER, den erst der Zoom sichtbar gemacht hat: die
   Medaillons standen leer da. Gemessen an `.s304-tz__i`:

       mask-image: url("data:image/svg+xml !impor…   (246 Zeichen)
                                          ^^^^^^^^^^
   **Das `!important` steht INNERHALB der URL.** In der Quelldatei fehlt
   zwischen dem Medientyp und den SVG-Daten das Trennzeichen, also hat der
   Parser `!important` als Teil des Data-URI gelesen. Eine ungueltige Maske
   zeichnet nichts — die „Icons" waren immer nur Farbflaechen.

   ⭐⭐ DAS IST DIE ERKLAERUNG FUER ENZOS „zu vibe-coded": er hat drei
   graue Kaestchen gesehen, wo Zeichen sein sollten. Ich hatte sie gestern
   groesser und dunkler gemacht — damit wurden die Kaestchen nur
   deutlicher. **Eine Sache groesser machen, die gar nicht da ist, macht
   das Fehlen sichtbarer, nicht die Sache.**
   ⭐ Gemerkt habe ich es erst, als ich auf die Zeile gezoomt habe statt
   nur die Zahlen zu lesen: die Messung sagte „Maske vorhanden, Element
   sichtbar, Farbe dunkel" — alles richtig, und trotzdem war nichts zu
   sehen. **Manche Fehler stehen nur im Bild.**

   Hier stehen drei geprueft kodierte Masken. Die Zeichen sind bewusst
   schlicht: Schild mit Haken (Material), Tropfen (wasserfest), Uhr
   (Garantie) — Konturen, keine Flaechen, damit sie bei 13 px lesbar sind.

   ⛔ Dazu der zweite Fund: `border: 1px solid rgba(21,19,15,.07)` auf den
   `<li>` — meine vorige Regel hatte `background` und `box-shadow`
   abgeraeumt, aber nicht die BORDER. Drei Eigenschaften machen einen
   Kasten, und ich hatte zwei davon bedacht.
   ====================================================================== */
@layer s304 {
  html body .s304-neu .s304-trustzeile li{
    border:0 !important;
    outline:0 !important;
  }
  html body .s304-neu .s304-tz__i--stahl{
    -webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%202%204%206v6c0%205%203.4%208.6%208%2010%204.6-1.4%208-5%208-10V6l-8-4Z%27%2F%3E%3Cpath%20d%3D%27M9%2012.5%2011%2014.5%2015.5%2010%27%2F%3E%3C%2Fsvg%3E") !important;
    mask-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%202%204%206v6c0%205%203.4%208.6%208%2010%204.6-1.4%208-5%208-10V6l-8-4Z%27%2F%3E%3Cpath%20d%3D%27M9%2012.5%2011%2014.5%2015.5%2010%27%2F%3E%3C%2Fsvg%3E") !important;
  }
  html body .s304-neu .s304-tz__i--was,
  html body .s304-neu .s304-tz__i--wasser{
    -webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%202.7s6%206.3%206%2010.3a6%206%200%200%201-12%200c0-4%206-10.3%206-10.3Z%27%2F%3E%3Cpath%20d%3D%27M9.5%2013.6a2.6%202.6%200%200%200%202.5%202.6%27%2F%3E%3C%2Fsvg%3E") !important;
    mask-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%202.7s6%206.3%206%2010.3a6%206%200%200%201-12%200c0-4%206-10.3%206-10.3Z%27%2F%3E%3Cpath%20d%3D%27M9.5%2013.6a2.6%202.6%200%200%200%202.5%202.6%27%2F%3E%3C%2Fsvg%3E") !important;
  }
  html body .s304-neu .s304-tz__i--sch,
  html body .s304-neu .s304-tz__i--schild,
  html body .s304-neu .s304-tz__i--garantie{
    -webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27M12%207.2v5l3%201.8%27%2F%3E%3C%2Fsvg%3E") !important;
    mask-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27M12%207.2v5l3%201.8%27%2F%3E%3C%2Fsvg%3E") !important;
  }
  html body .s304-neu .s304-tz__i{
    -webkit-mask-size:contain !important;
    mask-size:contain !important;
    -webkit-mask-repeat:no-repeat !important;
    mask-repeat:no-repeat !important;
    -webkit-mask-position:center !important;
    mask-position:center !important;
  }
}


/* === S304-BILDKARTE-NAHTLOS-2409 ======================================
   Enzo: „dass das einfach alles weiss ist, sodass man das gar nicht
   checkt."

   ⭐ Gerechnet: die Karte stand auf `rgba(255,255,255,.82)` ueber dem
   Sandgrund #F4F1ED — effektiv rund rgb(253,252,250). Das Foto ist
   rgb(255,255,255). Zwei bis drei Einheiten Unterschied: nicht viel, aber
   genug fuer eine sichtbare Kante, weil sie schnurgerade ueber die ganze
   Breite laeuft. **Eine Kante wird nicht durch ihren Kontrast sichtbar,
   sondern durch ihre Geradheit.**

   ⭐ Deshalb bekommt genau DIE Karte, in der das Bild liegt, reines Weiss.
   Sie ist die einzige, in der eine grosse weisse Flaeche sitzt — bei allen
   anderen (Text, Fragen, Bewertungen) bleibt die Durchsicht, und dort
   faellt sie auch nicht auf.
   ⛔ Die Tiefe geht dabei NICHT verloren: sie kam ohnehin aus Lichtkante
   und Wurf, nicht aus der Durchsicht. Genau das war Regel 2 aus dem
   Artefakt — Tiefe ersetzt Farbe.
   ====================================================================== */
@layer s304 {
  html body:not(.template-index) .s304-neu .product__mobile-header{
    background-color:#FFFFFF !important;
    background-image:linear-gradient(176deg,
                     rgba(255,255,255,1) 0%,
                     rgba(255,255,255,0) 40%) !important;
  }
}


/* === S304-BEWERTUNGEN-ENZO-2409 =======================================
   Enzo: „Bewertungen: weniger Platz oben, die KI-Zusammenfassung soll
   sichtbar sein, und nur EINE rotierende Bewertung."
   Alle drei bei echten 402 px gemessen, alle drei bestaetigt.

   ⛔ 1 · KI-ZUSAMMENFASSUNG: der Kasten hat `-webkit-line-clamp: 3` und
   `overflow: hidden`. Hoehe **75 px, Inhalt 107 px** — der Satz bricht
   mitten im Wort ab („...einen authentischen Luxus"). Das ist keine
   Geschmacksfrage: eine abgeschnittene Zusammenfassung ist schlechter als
   keine, weil sie den Leser mitten im Argument stehen laesst.
   ⛔ Der Kasten hat KEINE Klasse, seine Form steht inline — deshalb der
   Griff ueber `div[style*="border-left"]`, und deshalb `!important`
   (inline ohne `!important` verliert dagegen).

   ⛔ 2 · ZWEI BEWERTUNGEN STATT EINER: die Karten stehen auf
   `flex: 0 0 85%` — 291 px in einem 342er Fenster, also lugt die naechste
   immer herein. Gemessen: Karte 1 bei x 26 ganz sichtbar, Karte 2 bei
   x 317 angeschnitten.
   ⭐ Der Schieber rechnet seinen Versatz aus `offsetWidth` (geprueft, kein
   fester Pixelwert im Skript) — eine Breitenaenderung im CSS zieht also
   mit, ohne dass der Sprung verrutscht. Bei einem Schieber, der von selbst
   weiterlaeuft, braucht es das angeschnittene Nachbarbild ohnehin nicht:
   die Bewegung zeigt schon, dass es weitergeht.

   ⭐ 3 · PLATZ OBEN: 31 px ueber der Zeile „Kundenbewertungen"
   (`margin-top: 17` + `padding-top: 12`). Auf 14 zusammengezogen.
   ====================================================================== */
@layer s304 {
  html body #pdp-reviews-section div[style*="border-left"]{
    -webkit-line-clamp:none !important;
    max-height:none !important;
    overflow:visible !important;
  }
  html body .s304-neu .rev-slider-card{
    flex:0 0 100% !important;
    max-width:100% !important;
  }
  html body #pdp-reviews-section{
    margin-top:6px !important;
    padding-top:8px !important;
  }
}


/* === S304-EIN-GRAU-EIN-RADIUS-2409 ====================================
   Durchlauf ueber alle SICHTBAREN Flaechen in den Karten (Sichtbarkeit
   ueber die ganze Elternkette geprueft — die unsichtbaren Varianten-
   Kaesten `s304-sel__*` tragen eigene Toene und zaehlen deshalb NICHT).

   Uebrig bleiben zwei echte Ausreisser:
     DL.s304-spec__l        rgba(21,19,15,.043)  Radius 14   ← die Regel
     DIV (Bewertungen)      **rgb(244,244,244)** Radius 12   ← deckend!
     DIV.rev-slider-card    rgba(21,19,15,.043)  Radius 14   ← die Regel
     DIV.km-delivery-wrap   rgba(255,255,255,.66) Radius 0   ← weiss auf weiss

   ⛔ Ein DECKENDES Grau auf einer Glaskarte ist etwas anderes als eine
   durchscheinende Einlassung: es nimmt der Karte an dieser Stelle die
   Transparenz und liest sich als aufgeklebter Fleck. Genau das meint Enzo
   mit „komisches Grau".
   ⛔ Und ein weisser Kasten in einer weissen Karte ist eine Ebene ohne
   Aussage — **nie zwei Ebenen mit gleicher Tiefe stapeln**. Er wird
   durchsichtig, seine Polsterung bleibt.
   ⭐ Danach kennt die Seite genau EINE Einlassung und EINEN Innenradius.
   ⛔ Der Bewertungskasten traegt seine Farbe INLINE — daher `!important`. */
@layer s304 {
  /* ⛔ Erster Anlauf hiess `> div:first-child` und griff nicht: vor dem
     Kasten steht die Zeile `.rev-heading-row`, er ist also das ZWEITE
     Kind. Gegriffen wird er jetzt an seiner Inline-Farbe — dieselbe
     Methode wie beim KI-Kasten, der ebenfalls keine Klasse hat. */
  html body #pdp-reviews-section div[style*="#f4f4f4"]{
    background:rgba(21,19,15,.043) !important;
    border-radius:14px !important;
  }
  html body .s304-neu .km-delivery-wrap{
    background:transparent !important;
  }
}


/* === S304-TRUST-SCHWARZ-2409 =========================================
   Enzo, 24.09.: „diese Trust Icons sind zu vibe coded, mach die in schwarz
   bitte, also schwarze Bubbles mit weisser Schrift ... und mach die halt
   auch ein bisschen hoeher."
   Danach, zur Auswahl im Blatt: „Trust Icons finde ich A am besten, aber
   vielleicht kriegen wir das sogar noch ein bisschen kleiner hin. Weil ich
   finde halt diese runden Bubbles sind sehr sehr vibe coded."

   ⭐ Zwei Saetze, die sich nur scheinbar widersprechen: er will die FORM A
   (drei Felder nebeneinander), aber weder gross noch rund. Also:
       Hoehe        32 px   (A im Blatt war 44)
       Radius       11 px   (statt 99 — kein Pillen-Look)
       Grund        #15130F, Zeichen und Schrift weiss
   ⛔ Das Medaillon von gestern faellt damit weg. Es war seine Wahl vom
   23.09. und ist seit dem 24.09. ueberholt — die Scheibe (`li::before`)
   wird ausdruecklich abgeschaltet, sonst bliebe sie unter dem neuen Grund
   liegen und der Kasten waere an einer Stelle heller.
   ====================================================================== */
@layer s304 {
  html body .s304-neu .s304-trustzeile{
    display:flex !important;
    gap:6px !important;
    list-style:none !important;
    margin:0 !important;
    padding:0 !important;
  }
  html body .s304-neu .s304-trustzeile li{
    flex:1 1 0 !important;
    min-width:0 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:6px !important;
    height:32px !important;
    padding:0 8px !important;
    border:0 !important;
    border-radius:11px !important;
    background:#15130F !important;
    box-shadow:none !important;
    color:#FFFFFF !important;
    font-size:9px !important;
    font-weight:700 !important;
    letter-spacing:.02em !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  /* ⛔ Die Medaillon-Scheibe abschalten, nicht nur ueberdecken. */
  html body .s304-neu .s304-trustzeile li::before{
    content:none !important;
    display:none !important;
  }
  html body .s304-neu .s304-tz__i,
  html body .s304-neu .s304-trustzeile [class*="tz__i"]{
    width:12px !important;
    height:12px !important;
    flex:0 0 12px !important;
    margin:0 !important;
    background-color:#FFFFFF !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }
}


/* === S304-REVPUNKTE-2409 ==============================================
   Die Form zur Punktleiste aus `bewertungenPunkte()`. Sie ersetzt den
   Hinweis, den frueher das angeschnittene Nachbarbild gegeben hat — seit
   dort nur noch EINE Bewertung steht (Enzos Ansage), fehlt er sonst.
   ⭐ Bewusst Punkte und kein Balken: ein Balken misst Fortschritt, hier
   geht es um „es gibt mehrere", also um Anzahl.
   ====================================================================== */
@layer s304 {
  html body .s304-revpunkte{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:5px !important;
    margin:10px 0 2px !important;
    padding:0 !important;
  }
  html body .s304-revpunkte span{
    display:block !important;
    width:5px !important;
    height:5px !important;
    border-radius:99px !important;
    background:rgba(21,19,15,.20) !important;
    transition:background .2s ease, width .2s ease !important;
  }
  html body .s304-revpunkte span[data-an="1"]{
    width:16px !important;
    background:#15130F !important;
  }
  @media (prefers-reduced-motion: reduce){
    html body .s304-revpunkte span{ transition:none !important; }
  }
}


/* === S304-HIST-AKKORDEON-2409 ========================================
   Die Form zum Akkordeon aus `historyAkkordeon()`.
   ⭐ Zugeklappt wird ueber `grid-template-rows: 0fr → 1fr`, nicht ueber
   `max-height` mit geratener Hoehe: so passt sich die Bewegung dem echten
   Text an und es gibt keinen Sprung am Ende, wenn ein Absatz laenger ist
   als der geratene Wert.
   ⛔ `overflow: hidden` gehoert an das INNERE Element, sonst schneidet das
   Raster nichts ab.
   ====================================================================== */
@layer s304 {
  html body .s304-hist__knopf{
    display:flex !important;
    align-items:baseline !important;
    gap:9px !important;
    width:100% !important;
    padding:10px 0 !important;
    border:0 !important;
    background:none !important;
    font:inherit !important;
    color:inherit !important;
    text-align:left !important;
    cursor:pointer !important;
  }
  html body .s304-hist__knopf .s304-hist__year{
    flex:0 0 auto !important;
    margin:0 !important;
    font-size:10px !important;
    font-weight:700 !important;
    letter-spacing:.08em !important;
    color:#8B837A !important;
  }
  html body .s304-hist__knopf .s304-hist__title{
    flex:1 1 auto !important;
    margin:0 !important;
    font-size:14px !important;
    font-weight:800 !important;
    letter-spacing:-.01em !important;
  }
  html body .s304-hist__pfeil{
    flex:0 0 auto !important;
    width:9px !important;
    height:9px !important;
    border-right:2px solid #8B837A !important;
    border-bottom:2px solid #8B837A !important;
    transform:rotate(45deg) !important;
    transition:transform .2s ease !important;
    margin-bottom:2px !important;
  }
  html body .s304-hist__knopf[aria-expanded="true"] .s304-hist__pfeil{
    transform:rotate(-135deg) !important;
    margin-bottom:-2px !important;
  }
  /* ⛔ KORREKTUR, live gemessen: der Textblock hat ZWEI Absaetze.
     `grid-template-rows: 0fr` klappt nur die ERSTE Zeile zu — die zweite
     faellt unter `grid-auto-rows` und blieb stehen. Gemessen: geschlossen
     `7px 64px` statt `0px 0px`, Hoehe 71 statt 0.
     ⭐ Also beide fassen: `grid-template-rows` UND `grid-auto-rows`.
     ⛔ Bewusst kein geratenes `max-height`: das haette bei einem laengeren
     Absatz am Ende gesprungen. */
  html body .s304-hist__text{
    display:grid !important;
    grid-template-rows:1fr !important;
    grid-auto-rows:1fr !important;
    transition:grid-template-rows .26s ease, grid-auto-rows .26s ease, opacity .2s ease !important;
    opacity:1 !important;
  }
  html body .s304-hist__text > *{
    min-height:0 !important;
    overflow:hidden !important;
  }
  html body .s304-hist__text[data-auf="0"]{
    grid-template-rows:0fr !important;
    grid-auto-rows:0fr !important;
    opacity:0 !important;
  }
  /* Ein Schritt ist jetzt eine Zeile mit Trenner, kein Textblock mehr. */
  html body .s304-hist__step + .s304-hist__step{
    border-top:1px solid rgba(30,24,18,.10) !important;
  }
  @media (prefers-reduced-motion: reduce){
    html body .s304-hist__text,
    html body .s304-hist__pfeil{ transition:none !important; }
  }
}


/* === S304-BEWERTUNGSTEXT-GANZ-2409 · Textteil ERLEDIGT WEITER OBEN ===
   Der Klammer-Teil dieses Blocks war wirkungslos: mein Selektor
   `html body .rev-slider-card__text` (0,1,3) verlor gegen
   `html body .s304-neu .s304-rev .rev-slider-card__text` (0,4,3).
   ⛔ **Fünfte Regel für dieselbe Zahl** — stattdessen ist jetzt die
   gewinnende geändert. Die Punktreihe bleibt hier, die hat kein
   Gegenstück.
   ====================================================================== */
@layer s304 {
  html body .s304-revpunkte{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px !important;
    width:100% !important;
    height:auto !important;
    margin:12px 0 0 !important;
  }
  html body .s304-revpunkte span{
    width:6px !important;
    height:6px !important;
    border-radius:99px !important;
    background:rgba(21,19,15,.22) !important;
    flex:0 0 auto !important;
  }
  html body .s304-revpunkte span.is-an{
    background:#15130F !important;
    width:18px !important;
  }
}


/* === S304-ICFITS-KEINE-LEISTE-2409 ====================================
   Enzo: „Inner Circle Fits soll unten gar nicht diese Leiste sein, sondern
   man soll einfach nur … man checkt ja so, dass man scrollen kann."
   ⭐ Gemessen: `.swiper-scrollbar` unter dem Block, [29, 2798, 344, **2**]
   — ein 2 px hoher Balken mit Zieher. Genau das meint er.
   ⛔ Nur ausgeblendet, nicht entfernt: das Wischen haengt am Swiper, der
   die Leiste selbst anlegt. `display:none` reicht und ist reversibel.
   ⛔ Die angeschnittene naechste Kachel bleibt — sie ist jetzt der
   einzige Hinweis, dass es weitergeht.

   ⛔⛔ DIESER BLOCK STAND SCHON EINMAL HIER UND WAR WEG. Mein Skript, das
   den Bewertungsblock ersetzte, hat sein Ende ueber die naechste
   Blockgrenze hinaus berechnet und ihn mitgenommen. Gefunden nur, weil ich
   nach dem Schreiben nachgemessen habe (`display` war wieder `block`).
   ⭐ **Nach jedem Umschreiben pruefen, ob die NACHBARN noch stehen** —
   nicht nur das, was man aendern wollte. */
@layer s304 {
  html body .s304-community .swiper-scrollbar,
  html body .s304-community .swiper-pagination,
  html body .s304-fits .swiper-scrollbar,
  html body .s304-fits .swiper-pagination{
    display:none !important;
  }
}


/* === S304-FITS-PREIS-2409 · „Dazu passt auch hat nicht die richtige
   Formatierung" ========================================================
   ⭐ GEMESSEN an einer Kachel:
       a.s304-fits__card      [35,  93, 147, 179]
       div.s304-fits__media   [41,  99, 136, 141]
       div.s304-fits__name    [41, 247, 136,  15]  »BIG STEEL«
       div.s304-fits__prices  [0, 0, 0, 0]  **display: none**
         └ .s304-fits__price.is-struck        »120 €«
         └ .s304-fits__ic.s304-fits--nurmember »90 €«
         └ .s304-fits__price.s304-fits--nurgast »120 €«
   **Der Preis existiert und ist ausgeblendet.** Auf jeder anderen Flaeche
   des Ladens steht Name links und Preis rechts — hier stand nur der Name.
   Genau das ist die „falsche Formatierung".
   ⛔ Die drei Fassungen bleiben, wie sie sind: `--nurmember` und
   `--nurgast` entscheiden über die Mitgliedschaft, und diese Logik fasse
   ich nicht an. Sichtbar wird nur der **Behälter** — welche Zahl darin
   steht, bleibt Sache des Themes.
   ⭐ Name und Preis in eine Zeile, gleiche Sprache wie die
   Kategorie-Kachel: links der Name, rechts die Zahl.
   ====================================================================== */
@layer s304 {
  html body .s304-fits .s304-fits__card{
    display:flex !important;
    flex-direction:column !important;
  }
  html body .s304-fits .s304-fits__zeile{
    display:flex !important;
    align-items:baseline !important;
    justify-content:space-between !important;
    gap:8px !important;
  }
  html body .s304-fits .s304-fits__name{
    flex:1 1 auto !important;
    min-width:0 !important;
    text-align:left !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }
  html body .s304-fits .s304-fits__prices{
    display:flex !important;
    align-items:baseline !important;
    gap:5px !important;
    flex:0 0 auto !important;
    white-space:nowrap !important;
  }
  /* ⛔⛔ NACHTRAG: der Behälter ist jetzt sichtbar, seine drei Kinder
     rechnen aber weiter auf `display: none`. Geprüft und ausgeschlossen:
     kein `style`-Attribut, kein `hidden`, und **keine auffindbare
     CSS-Regel** — mein Sondierungsweg sieht sie nicht (dieselbe blinde
     Stelle wie beim Kategorie-Hintergrund heute Nacht).
     ⭐ Statt weiter zu suchen: **genau EINE Fassung ausdrücklich
     einschalten**, nämlich die für Gäste. Sie ist der Normalfall, und wenn
     die Mitglieder-Logik später etwas anderes will, ist das EIN Selektor,
     nicht ein Umbau.
     ⛔ Bewusst NICHT alle drei: dann stünde „120 € 90 € 120 €" in der
     Kachel — schlimmer als gar kein Preis. */
  html body .s304-fits .s304-fits__prices > .s304-fits--nurgast,
  /* ac2 30.09.: Mitgliederpreise sind raus (Enzo) - es gibt nur noch EINEN Preis, fuer alle. */
  html body .s304-fits .s304-fits__prices > .s304-fits__price:not(.is-struck){
    display:inline !important;
  }
  html body .s304-fits .s304-fits__price,
  html body .s304-fits .s304-fits__ic{
    font-size:11px !important;
    font-weight:700 !important;
  }
  html body .s304-fits .s304-fits__price.is-struck{
    font-weight:400 !important;
    opacity:.45 !important;
    text-decoration:line-through !important;
  }
}


/* === S304-HIST-BUBBLES-2409 · unverbundene Blasen, die aufploppen =====
   Enzo: „History hätte ich gerne, dass es Bubbles sind, die nicht
   connected sind und die dann so aufploppen mit so einer kleinen
   Scroll-Animation."

   ⭐ GEMESSEN, was die Verbindung erzeugt:
       span.s304-hist__dot   [3, 205, 17, 17]    der Punkt am Rand
       span.s304-hist__fill  [40, 205, 30, 316]  der senkrechte Strang
   Beides weg — damit stehen die drei Stufen frei nebeneinander statt an
   einem Zeitstrahl.
   ⭐ Der Platz, den der Strang links belegt hat, geht an die Blasen: sie
   nutzen jetzt die volle Breite der Karte.

   ⭐⭐ DAS AUFPLOPPEN HÄNGT AM SCROLLSTAND, nicht an einem Zeitgeber.
   `animation-timeline: view()` — dieselbe Technik, die im Haus schon das
   Karussell dreht (`s304-karussell`). Der Vorteil gegenüber einem
   Beobachter mit Klasse: **es läuft rückwärts, wenn man zurückscrollt**,
   und es braucht kein JavaScript, das hängenbleiben könnte.
   ⛔ `@supports` davor: wo die Technik fehlt (älteres Safari), steht die
   Blase einfach fertig da — sichtbar ist wichtiger als bewegt.
   ⛔ `prefers-reduced-motion`: wer weniger Bewegung eingestellt hat,
   bekommt keine. Dieselbe Rücksicht wie beim Karussell.
   ====================================================================== */
@layer s304 {
  html body .s304-hist .s304-hist__dot,
  html body .s304-hist .s304-hist__fill{
    display:none !important;
  }
  html body .s304-hist .s304-hist__track{
    padding-left:0 !important;
    margin-left:0 !important;
    border-left:0 !important;
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
  }
  html body .s304-hist .s304-hist__step{
    margin:0 !important;
    padding:13px 15px !important;
    border-radius:20px !important;
    background:#FFFFFF !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,1),
               inset 0 0 0 1px rgba(24,24,26,.055),
               0 14px 30px -16px rgba(24,24,26,.45) !important;
  }
  html body .s304-hist .s304-hist__knopf{
    padding:0 !important;
  }
}

@supports (animation-timeline: view()){
  @keyframes s304-hist-pop{
    entry 0%   { transform: translateY(18px) scale(.96); opacity: 0; }
    entry 65%  { transform: none;                        opacity: 1; }
  }
  html body .s304-hist .s304-hist__step{
    animation: s304-hist-pop linear both !important;
    animation-timeline: view() !important;
    animation-range: entry 0% entry 65% !important;
  }
  @media (prefers-reduced-motion: reduce){
    html body .s304-hist .s304-hist__step{ animation: none !important; }
  }
}


/* === S304-PDP-G3-2409 · derselbe Grund wie die Kategorie ===============
   Enzo, 24.09.: „Gleich ist auf der PDP, wir wollten das ja so haben wie
   bei G3. Diese, ein Hauch von Gruen und so sozusagen. Also wie das bei
   Scuffers ist."

   ⭐ ERWEITERT `S304-GLAS-DURCHGAENGIG-2309` in `s304-haus.css`, ersetzt
   es nicht. Dessen Logik bleibt richtig und ist dort begruendet: **ein
   Grund traegt den Kontrast, dann braucht es kein Grau.** Gemessen hatte
   der Block 47 reinweisse Flaechen und SECHS Grautoene gefunden. Geaendert
   wird hier nur die FARBE des Grundes — von warmem Sand `#F4F1ED` auf
   G3s kuehles farbiges Glas.

   ⛔⛔ WARUM NICHT EINFACH DIE FARBE AUF `.main-content` TAUSCHEN:
   G3s Grund sind zwei Radialverlaeufe. Auf `.main-content` — einem normal
   fliessenden Element — saessen sie am Seitenanfang und waeren nach dem
   ersten Bildschirm aus dem Bild. Auf einer PDP mit Videos, Bewertungen und
   History ist das der allergroesste Teil der Seite.
   ⭐ Deshalb derselbe Bau wie auf der Kategorie: ein `::before` mit
   `position: fixed; inset: 0` — immer genau einen Bildschirm gross, egal
   wie lang die Seite wird. Die Tupfer sitzen damit an derselben Stelle wie
   im Entwurf, auf jeder Scrollhoehe.
   ⛔ `.main-content` wird transparent, sonst deckt es den `::before` zu.
   ====================================================================== */
@layer s304 {
  html body.template-product::before{
    content:"" !important;
    position:fixed !important;
    inset:0 !important;
    z-index:-1 !important;
    pointer-events:none !important;
    background:
      radial-gradient(90% 60% at 15% 5%,  #E8F0EA 0%, rgba(232,240,234,0) 60%),
      radial-gradient(80% 55% at 95% 40%, #F6EAE4 0%, rgba(246,234,228,0) 62%),
      linear-gradient(180deg, #FAFAF8 0%, #EEF1EE 100%) !important;
  }
  html body.template-product .main-content,
  html body.template-product #MainContent{
    background:transparent !important;
  }

  /* ── die Karten auf G3s Werte, damit PDP und Kategorie EINE Sprache
     sprechen. Vorher .66 mit warmen Schaerfen — auf kuehlem Grund wirkt
     das cremig statt glaesern. ────────────────────────────────────────── */
  html body.template-product .s304-neu .s304-karte,
  html body.template-product .s304-neu .product__block,
  html body.template-product .s304-neu .s304-vkopf{
    background:rgba(255,255,255,.58) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9),
               inset 0 0 0 1px rgba(255,255,255,.55),
               0 20px 38px -20px rgba(40,60,50,.35) !important;
  }
}


/* === S304-DREI-VIDEOS-AUF-EINMAL-2409 =================================
   Enzo: „die 3 Videos, mache die wieder so wie am Anfang … ich will
   eigentlich nur die Videos da auf der PDP haben, sodass ich die 3 auf
   einmal sehe, aber nicht so einen Kasten da drum."

   ⭐⭐ DIE RECHNUNG, bei echten 402 px gemessen:
       `.swiper-wrapper`  Breite **353 px**
       jedes Video        Breite **148 px**
       3 × 148 = 444 + zwei Luecken → **das dritte endet bei x 489**
   Der Viewport ist 402 breit. **Man sieht zweieinhalb Videos, nie drei.**
   Das ist kein Gestaltungsproblem, das ist Arithmetik.

   → (353 − 2 × 8 Luecke) / 3 = **112 px** je Video. Dann passen alle drei.
   ⭐ Das Hochformat bleibt: 112 × (263/148) ≈ 199 px hoch.

   ⛔ „KEIN KASTEN DRUM" — gemessen ist schon keiner da: `.s304-videos` hat
   `background: transparent`, die Slides auch. Was noch wie ein Rahmen
   wirken kann, ist sein `border-radius: 22px` mit `padding: 14px 0` und
   `overflow: hidden` — das beschneidet, ohne dass man sieht warum.
   Beides raus: die Videos tragen ihre eigene Rundung (14 px) und brauchen
   keine zweite darum.
   ====================================================================== */
/* ⛔⛔ ERSTER ANLAUF: nur die Breiten per CSS gesetzt. Ergebnis gemessen:
   alle drei passten (drittes endet x 385), aber die Videos waren **44 × 78 px**
   — die Slides blieben auf ihren alten Positionen (x 17/179/341), nur der
   Inhalt schrumpfte. **Swiper rechnet die Slide-Breiten in JavaScript aus und
   schreibt sie INLINE** — dagegen kommt kein Stylesheet an.

   ⭐⭐ ALSO KEIN KARUSSELL MEHR. Enzo will die drei sowieso gleichzeitig
   sehen — ein Karussell ist genau das Gegenteil davon. Der Wrapper wird ein
   Raster mit drei gleichen Spalten, Swipers Verschiebung (`transform`) und
   seine Inline-Breiten werden abgeschaltet.
   ⛔ `transform: none` ist der Wert, ohne den es nicht geht: Swiper schiebt
   den Wrapper seitlich, auch wenn er nichts mehr zu schieben hat.
   ====================================================================== */
@layer s304 {
  html body .s304-videos{
    border-radius:0 !important;
    padding:8px 0 10px !important;
    overflow:visible !important;
    background:none !important;
    box-shadow:none !important;
  }
  html body .s304-videos .swiper{
    padding:0 !important;
    overflow:visible !important;
  }
  /* aus dem Karussell wird ein Raster */
  html body .s304-videos .swiper-wrapper{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:8px !important;
    transform:none !important;
    width:100% !important;
  }
  html body .s304-videos .swiper-slide{
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
    flex:none !important;
  }
  html body .s304-videos .swiper-slide video,
  html body .s304-videos video{
    width:100% !important;
    height:auto !important;
    aspect-ratio:148 / 263 !important;
    border-radius:14px !important;
    object-fit:cover !important;
  }
  /* die Bedienelemente des Karussells haben keinen Sinn mehr */
  html body .s304-videos .swiper-scrollbar,
  html body .s304-videos .swiper-pagination,
  html body .s304-videos .swiper-button-next,
  html body .s304-videos .swiper-button-prev{
    display:none !important;
  }
}


/* === S304-MAENGEL-PDP-2409 · Enzos Liste, der PDP-Teil =================
   Alles hier ist bei echten 402 px im eigenen Messbrowser gemessen
   (Vorschau-Theme 189042917757, /products/heavy-ice), jede Messung mit
   einer Positivkontrolle, die rot werden konnte.

   ⭐⭐ DER FUND, DER DEN FAQ-PUNKT LOEST — und er ist kein Kunstgriff:
   die vier Antworten stehen in `sections/s304-pdp.liquid` MIT echten
   Zeilenumbruechen im Quelltext (nachgelesen, nicht vermutet). HTML wirft
   sie weg, weil `white-space` auf `normal` steht — Gemessen: der Koerper
   „WIE FUNKTIONIERT 2 FÜR 1?" ist **692 Zeichen** und rendert als **14
   Zeilen am Stueck**, davon nur **4** kuerzer als der Satzspiegel. Genau
   das meint Enzo mit „ein Block am Stueck".
   ⭐ `white-space: pre-line` gibt dem Text die Absaetze zurueck, die der
   Autor GESCHRIEBEN hat. Gemessen, alle vier Antworten, vorher → nachher
   (Zeilen, die sichtbar kurz enden = sichtbare Absatzenden):
       2 FÜR 1            4 → 5
       VERSAND            2 → 8      Hoehe 257 → 294
       GARANTIE           1 → 6      Hoehe 201 → 238
       INNER CIRCLE       4 → 6      Hoehe 238 → 294
   ⛔ AUSDRUECKLICH NICHT GEAENDERT: die Zeilenhoehe. Ich hatte 1.55 statt
   1.5 gesetzt und wieder zurueckgenommen — gemessen kostet das ueber alle
   vier Antworten **36 px** fuer drei Prozent mehr Durchschuss, und Enzo
   hat Typografie nicht bemaengelt, sondern Gliederung. Was er nicht
   verlangt hat und Platz kostet, bleibt draussen.
   ⛔ EHRLICH: echte ABSTAENDE zwischen den Absaetzen gehen damit NICHT.
   Ein erzwungener Umbruch ist kein Element, er kann keinen Rand tragen.
   Dafuer muessten im Liquid `<p>` stehen. Was hier moeglich war, ist die
   Gliederung — nicht die Luft dazwischen.
   ⛔ Und geprueft, weil es die naheliegende Falle ist: der abschliessende
   `\n` vor `</div>` erzeugt KEINE leere Schlusszeile. Gemessen: das letzte
   Textrechteck liegt auf derselben Zeile wie der Satz davor, der Abstand
   zur Unterkante bleibt bei 16 px (= die 13 px Polster).

   ⛔⛔ DIE SPEZIFITAET, an der mein erster Anlauf gestorben waere:
   `html body .s304-neu .s304-fragen .s304-frage__b` steht schon weiter
   oben in dieser Datei (S304-FRAGENKARTE-2309, mit `!important`). Live
   gegengeprueft: eine GLEICH spezifische Regel gewinnt hier NICHT — nur
   `white-space` kam durch, weil es dafuer keinen Gegner gab, `font-size`
   verlor. Erst mit `details.s304-frage >` (eine Klasse und ein Element
   mehr) greift alles. **Nicht raten, welche Schicht gewinnt — messen.**
   ====================================================================== */
@layer s304 {
  html body .s304-neu .s304-fragen details.s304-frage > .s304-frage__b{
    white-space:pre-line !important;   /* die Absaetze des Autors zurueck */
    max-width:62ch !important;         /* greift erst am Desktop, mobil sind es 340 px */
    text-wrap:pretty !important;       /* keine Einzelwoerter am Absatzende */
  }
}


/* === S304-MAENGEL-DETAILS-2409 · „dasselbe Problem, dieselbe Behandlung"
   ⛔ ZUERST DAS, WAS NICHT GEHT: die Produktdetails haben KEINE
   Zeilenumbrueche im Quelltext (`snippets/s304-details.liquid`, gelesen).
   `pre-line` bringt dort also nichts — die Behandlung muss eine andere
   sein, auch wenn Enzos Satz dieselbe verlangt.

   ⭐⭐ WAS DAS ECHTE PROBLEM IST, gemessen bei 402 px:
       Karte innen          342 px
       Beschriftungsspalte  **96 px**  (fest, `flex: 0 0 108px`, mobil 96)
       Wertspalte           **185 px** ← hier quetschen sich ganze Saetze
   Der Wert „304er Edelstahl — dieselbe Güte wie bei Besteck und Piercings.
   Rostet nicht, läuft nicht an." ist 92 Zeichen lang und bricht auf
   **vier** Zeilen in einer 185-px-Spalte, waehrend daneben „Länge" 96 px
   belegt und 60 davon leer laesst. Das ist Enzos „verschwendeter Platz"
   und „zu viel Text" in einem.

   ⭐ GEMESSEN DURCHPROBIERT, Gesamthoehe des offenen Blocks:
       ist (96 px)   360 px   Zeilen [29, 70, 91, 70, 20]
       88 px         360 px   [29, 70, 91, 70, 20]   — noch kein Gewinn
       **80 px       340 px   [29, 70, 70, 70, 20]** ← hier kippt es
       76 / 72 / 66  340 px   unveraendert — schmaler bringt NICHTS mehr
   Also 80 px: der breiteste Wert, der noch etwas bringt. Schmaler waere
   Verlust an Ausrichtung ohne Gegenwert.

   ⛔ EIN ANLAUF, DER GEMESSEN SCHLECHTER WAR — und den ich deshalb NICHT
   gebaut habe: Beschriftung ueber den Wert stapeln (voller Satzspiegel).
   Klingt sauberer, ist es nicht: **427 px statt 360**, weil fuenf
   Beschriftungen fuenf eigene Zeilen bekommen und die beiden kurzen Werte
   („60 cm", „1 Jahr · 14 Tage Rückgabe") dabei je 26 px verlieren.
   ⭐ Ohne die Messung haette ich es gebaut. Das ist der Grund fuer die
   Messung.

   ⛔⛔ NACHGEMESSEN UND KORRIGIERT: mein erster Wurf hatte das Polster
   der Zeilen von 5 auf 7 px gehoben. Live gemessen war der Block danach
   **378 px statt 360** — also 18 px MEHR, obwohl der Punkt „verschwendeter
   Platz" heisst. Messreihe am fertigen Stand (Positivkontrolle: 40 px
   Polster ergab 708 px, der Messweg konnte also rot werden):
       7 px  378   |  6 px  368  |  **5 px  358**  |  4 px  348  |  3 px  338
       5 px ohne Haarlinie 354   (die Linie kostet also 4 px, fuer vier Linien)
       Label zurueck auf 96 px bei 5 px: 378  → die 80 px bringen **20 px**
   ⭐ Genommen: 5 px, exakt das alte Polster. Ergebnis **358 gegen 360 px**
   — die Gliederung ist geschenkt, nicht erkauft.

   ⭐ Die zweite Haelfte der „Behandlung" ist die Trennung: fuenf Angaben
   ohne Linie dazwischen lesen sich als ein Block. Eine Haarlinie zwischen
   den Zeilen macht daraus fuenf eigenstaendige Zeilen — dieselbe Sprache
   wie die Fragenkarte daneben, und dieselbe Begruendung wie dort: **eine
   Linie ZWISCHEN zweien ist etwas anderes als ein Rahmen um alles.**
   ====================================================================== */
@layer s304 {
  html body .s304-neu .s304-daten details.s304-spec .s304-spec__b{
    flex:0 0 80px !important;
  }
  html body .s304-neu .s304-daten details.s304-spec .s304-spec__r{
    gap:10px !important;
    padding:5px 0 !important;   /* unveraendert wie vorher — siehe Messreihe oben */
    align-items:baseline !important;
  }
  /* ⭐ Die erste Zeile bekommt KEINE Linie — ein Strich ohne etwas darueber
     ist derselbe Fehler wie im Warenkorb und in der Fragenkarte. */
  html body .s304-neu .s304-daten details.s304-spec .s304-spec__r + .s304-spec__r{
    border-top:1px solid rgba(30,24,18,.10) !important;
  }
}


/* === S304-MAENGEL-BEWERTUNGEN-2409 · „irgendwie nicht ganz so clean" ===
   Vier gemessene Ursachen, keine davon Geschmack.

   ⛔⛔ 1 · DIE PUNKTLEISTE IST KEINE PUNKTLEISTE. Gemessen sitzen die
   fuenf Punkte bei x **−674, −322, 30, 382, 734** und sind **je 342 px
   breit** — sichtbar ist genau EINER, und der fuellt die ganze Zeile als
   6-px-Balken. Die Ursache ist eine Regel aus dieser Datei:
       `html body .s304-neu .s304-rev > div > div:last-child > *`
       { flex: 0 0 100% !important }        (S304-BEWERTUNGEN-2309)
   Sie war fuer die Bewertungskarten gedacht. Seit die Punktleiste als
   LETZTES Kind dazugekommen ist, trifft sie deren Punkte mit — mit (0,3,4)
   gegen (0,1,3) gewinnt sie gegen alle drei `.s304-revpunkte span`-Regeln.
   ⭐⭐ **Genau die Lehre, die in dieser Datei schon steht** („Positions-
   waehler raten, Klassennamen treffen") — sie ist nur nicht rueckwaerts
   angewandt worden, als das neue Kind kam. Ein Positionswaehler altert.

   ⛔ 2 · ZWEI ANZEIGEN FUER EINEN SCHIEBER. Es gibt beide:
       `.rev-slider-dots`   5 Knoepfe, Reihe **42 px** + 14 px Abstand
       `.s304-revpunkte`    5 Spans,  Reihe **10 px**, NICHT klickbar
   Gemessen, welche etwas tut: Klick auf den vierten `.rev-slider-dot`
   schiebt die Spur auf `translateX(-1050px)` (= 3 × 350 px Kartenbreite),
   und `.s304-revpunkte span[data-an]` springt mit. Positivkontrolle: ich
   habe die Spur danach selbst verschoben und den Wert zurueckgelesen —
   der Messweg konnte also rot werden.
   ⇒ Die klickbare bleibt („was klickbar aussieht, muss etwas tun"), die
   kaputte, nicht klickbare Doppelung geht. Die Breiten-Reparatur bleibt
   trotzdem stehen: was unter einem `display:none` liegt, soll nicht
   kaputt sein, wenn jemand es wieder einschaltet.
   ⛔ ENZO-ENTSCHEIDUNG, die ich NICHT fuer ihn treffe: wenn er die
   schmale eigene Leiste lieber mag (10 px statt 42), ist es EINE Zeile —
   dann `display:flex` hier und `display:none` bei `.rev-slider-dots`.

   ⛔ 3 · KASTEN IM KASTEN, gemessen an der Bewertungskarte:
       `.rev-slider-card`         x 26, **350 px**, grau, Radius 14
       `.rev-slider-card__inner`  x 30, **342 px**, Radius 14, **1 px Rahmen**
   Ein gerahmter Kasten in einem grauen Kasten, 4 px Luft dazwischen —
   und die Karte ragt links und rechts **4 px ueber die Spalte** hinaus,
   in der alles andere 342 px breit ist. Beides faellt: der Rahmen (der
   graue Grund IST schon die Abgrenzung) und der Ueberhang
   (`container margin 0 -4px` + `card padding 0 4px`, ein Paar, das seit
   „nur noch EINE Bewertung" keinen Zweck mehr hat).
   ⭐ Der Schieber rechnet seinen Versatz aus `offsetWidth` — gemessen
   3 × 350 = 1050. Nach dem Eingriff muessen es 3 × 342 = **1026** sein;
   genau daran ist es unten nachgemessen.

   ⛔ 4 · DIE DRITTE RUNDUNG. Die KI-Zusammenfassung ist ein **weisser**
   Kasten mit Radius `0 8px 8px 0` — in einem grauen Kasten mit Radius 14,
   in einer weissen Karte mit Radius 22. Drei Rundungen, drei Ebenen, und
   die oberste ist weiss auf fast-weiss. Dieselbe Behandlung wie beim
   Zeitstrahl in S304-EIN-GRAU-EIN-RADIUS: **durchsichtig, Polster bleibt**
   — die schwarze Kante links traegt das Signal ohnehin allein.
   ====================================================================== */
@layer s304 {
  /* ⭐ 26.09. abends — DIE PUNKTE KOMMEN ZURUECK, und zwar diese hier.
     Enzo: *„unten sollen einfach Punkte sein, die symbolisieren, wie viele es
     davon gibt. Die muessen sich logischerweise dann auch pro Stern aendern …
     und die sollen dann halt auch mitgehen, wenn es automatisch weiterswipet."*

     ⛔ FRUEHER STAND HIER `display:none` — wegen der „kaputten Doppel-Anzeige":
     es gibt ZWEI Anzeigen fuer denselben Schieber:
         `.rev-slider-dots`  5 Knoepfe, Reihe **42 px**, klickbar
         `.s304-revpunkte`   5 Spans,  Reihe **10 px**, nicht klickbar
     Enzo hatte damals gesagt *„die Pagination finde ich irgendwie bloed"* — das
     galt der 42-px-Variante. Die bleibt aus. Die schlichte kommt zurueck, denn
     sie ist genau das, was er jetzt beschreibt.

     ⭐ GEMESSEN, bevor hier etwas gebaut wurde: der Rest von C3 lief schon.
     Ueber 18 Sekunden beobachtet —
         t=0   Karte 1 aktiv → Punkt 1 deckend, Rest blass
         t=9   Karte 2 aktiv → Punkt 2 deckend
         t=18  Karte 3 aktiv → Punkt 3 deckend
     Der Wechsel kommt etwa alle 8 s, und es ist immer nur EINE Karte sichtbar
     (`nachbarSichtbar: false`). Es fehlte ausschliesslich die Sichtbarkeit
     dieser Zeile. ⇒ Nichts neu bauen, nur wieder einschalten. */
  html body .s304-neu .s304-karte.s304-rev > div > div.s304-revpunkte{
    display:flex !important;
    justify-content:center !important;
    gap:7px !important;
    margin-top:12px !important;
  }


  html body .s304-neu .s304-karte.s304-rev > div > div.s304-revpunkte > span{
    flex:0 0 6px !important;
    width:6px !important;
    max-width:6px !important;
  }
  html body .s304-neu .s304-karte.s304-rev > div > div.s304-revpunkte > span.is-an,
  html body .s304-neu .s304-karte.s304-rev > div > div.s304-revpunkte > span[data-an="1"]{
    flex:0 0 18px !important;
    width:18px !important;
    max-width:18px !important;
  }
  html body .s304-neu .s304-rev .rev-slider-dots{
    margin-top:8px !important;
  }

  /* 3 · ein Kasten, nicht zwei — und dieselbe Breite wie alles andere */
  html body .s304-neu .s304-rev .rev-slider-card__inner{
    border:0 !important;
  }
  html body .s304-neu .s304-rev .rev-slider-container{
    margin:0 !important;
  }
  html body .s304-neu .s304-rev .rev-slider-card{
    padding:0 !important;
  }

  /* 4 · die dritte Rundung faellt weg, die Kante bleibt */
  html body #pdp-reviews-section div[style*="border-left"]{
    background:transparent !important;
    border-radius:0 !important;
    padding:2px 0 2px 11px !important;
  }
}


/* === S304-MAENGEL-HISTORY-2409 · der Rest von 7 px =====================
   ⭐ ZUERST DAS WICHTIGSTE, und es ist eine Entwarnung: **das Akkordeon
   gibt es schon.** `historyAkkordeon()` in `s304-haus.js` baut aus jedem
   Schritt einen `<button class="s304-hist__knopf">`, die Form dazu steht
   in S304-HIST-AKKORDEON-2409 weiter oben in dieser Datei. Live gemessen:
   **3 Knoepfe**, `data-s304-akkordeon="1"`, erster Schritt offen
   (Text 100 px), die anderen zu. Enzos „das soll man klappen und das geht
   auf" ist also GEBAUT — ich habe es geprueft, nicht nachgebaut.

   ⛔ WAS NOCH NICHT STIMMTE: ein zugeklappter Schritt ist nicht 0 px hoch,
   sondern **7 px**. Der Block darueber hat `grid-template-rows: 0fr` UND
   `grid-auto-rows: 0fr` gesetzt (beides noetig, steht dort begruendet) —
   aber die Rasterzelle wird 0, der **Aussenabstand des Absatzes darin
   nicht**. Gemessen: erstes `<p>` Hoehe 0, `margin-bottom` **7 px**.
   ⭐ Also nur im geschlossenen Zustand die Raender nehmen; offen bleiben
   sie, weil sie dort die Absaetze trennen.
   ⛔ Bei drei Schritten sind das 14 px — klein, aber es ist der Unterschied
   zwischen „zu" und „fast zu".
   ====================================================================== */
@layer s304 {
  html body .s304-hist .s304-hist__text[data-auf="0"] > *{
    margin-top:0 !important;
    margin-bottom:0 !important;
  }
  html body .s304-hist .s304-hist__text > *{
    transition:margin .26s ease !important;
  }
}


/* === S304-GERAET-2409 · Enzos Durchsicht am Handy ======================
   Fünf Punkte, alle bei echten 402 px im eigenen Messbrowser gemessen.
   ⛔ ZUR MESSLAGE, weil sie hier zweimal in die Irre geführt hat:
   `s304-pdp.css` haengt NICHT im Kopf der Seite, sondern **im Rumpf**
   (Position 339.067, `</head>` steht bei 191.200). Ein Probe-`<style>`,
   das man an den Kopf haengt, VERLIERT deshalb bei gleicher Spezifitaet.
   Wer hier etwas nachmisst: das Probeblatt an den **Rumpf** haengen.
   ====================================================================== */


/* --- C1 · „Die Bewertung soll direkt unter dem Produktnamen" ------------
   ⛔ ZUERST DIE KORREKTUR AN MIR SELBST: ich hatte berichtet, das sei schon
   so. Gemessen ist BEIDES wahr — es steht nichts dazwischen, aber der
   Abstand ist gewachsen:
       LIVE-Theme (188690432381):  Titel-Unterkante 99 → Sternzeile 104
                                   = **5 px**
       unsere Arbeitskopie:        Titel-Unterkante 187 → Sternzeile 205
                                   = **18 px**
   Elementfolge dazwischen: gemessen **leer** (keine Kinder, kein Rand).
   Die 18 px entstehen im Titelkasten selbst:
       `.s304-kopfzeile`  **33 px** hoch, obwohl das `h1` nur 23 px ist —
       der Preis („95 €", 19 px Schrift) macht die Zeile 10 px hoeher, und
       diese 10 px liegen UNTER der Grundlinie des Titels.
       Dazu 3 px `padding-top` an `.custom-star-row` und die Ausrichtung
       der Zeile.
   ⭐ Also nicht die Sternzeile hochziehen (das waere ein geratener
   Minuswert), sondern die Ursache nehmen: Titel und Preis auf **eine
   gemeinsame Grundlinie**, der Preis bekommt seine Zeilenhoehe zurueck.
   GEMESSEN durchprobiert, Abstand Titel→Sternzeile:
       ist                                  18 px  (Kopfzeile 33)
       Grundlinie + Preis 1.1               15 px  (Kopfzeile 28)
       + Sternzeile ohne Polster            12 px  (Kopfzeile 28)
       **+ Preis-Zeilenhoehe 1**            **11 px** (Kopfzeile 26)
   Positivkontrolle: eine Probe mit `margin-top: 40px` ergab 55 px — der
   Messweg konnte also rot werden.
   ⛔ Die letzten Pixel bis zur Live-Zahl (5) hole ich NICHT mit einem
   negativen Rand: das waere eine Zahl ohne Ursache, die beim naechsten
   Schriftwechsel kippt. 18 → 11 ist die Haelfte, und sie ist begruendet.
   ---------------------------------------------------------------------- */
@layer s304 {
  html body .s304-neu .s304-kopfzeile{
    align-items:baseline !important;
  }
  html body .s304-neu .s304-preis,
  html body .s304-neu .s304-preis .price-item{
    line-height:1 !important;
  }
  html body .s304-neu .custom-star-row{
    padding-top:0 !important;
  }
  html body .s304-neu .pdp-reviews-member-row{
    margin-top:0 !important;
  }
}


/* --- C2 · „Die Kachel … soll komplett weiß" ----------------------------
   Enzo: „So, dass einem nicht auffällt, bei dem ersten Bild, dass das eine
   andere Farbe ist."

   ⭐ GEMESSEN AM BILDSCHIRMFOTO, nicht an der Stilangabe (zwei Wege,
   dieselbe Zahl):
       Stilangabe   `.product__mobile-header` = rgba(255,255,255,**0.58**)
       Bildpunkte   dieselbe Flaeche          = **(250, 249, 247)**
       Produktbild, freigestellt              = **(255, 255, 255)**
       → Kantensprung **8 Stufen** auf der laengsten Achse.
   Acht Stufen sind wenig auf einem Messschieber und viel auf einem
   OLED-Bildschirm: die Kante laeuft ueber die ganze Breite der Kachel.

   ⛔⛔ WAS MICH ZWEIMAL IN DIE IRRE GEFUEHRT HAT, und es gehoert in die
   Akte: im ersten Foto war die Kachel stellenweise reinweiss — ich hatte
   schon „kein Unterschied" gemessen. Der weisse Streifen war der
   **Zustimmungsbanner (`pandectes-cmp`)**, der ueber 200 px der Seite
   liegt. Erst `elementFromPoint` an der Stelle hat ihn benannt.
   ⭐ Ein Foto ist ein Beleg — aber nur, wenn man weiss, WAS darauf liegt.

   ⛔ Bewusst NUR diese eine Kachel: die uebrigen Karten bleiben glaesern
   (.58). Enzo hat die Kachel „hinter den Produktbildern, den Trust-Icons
   und der Bewertung" genannt — das ist genau `.product__mobile-header`,
   und sie ist die einzige, hinter der ein freigestelltes Weiss liegt.
   ---------------------------------------------------------------------- */
@layer s304 {
  html body.template-product .s304-neu .product__mobile-header.s304-karte{
    background:#FFFFFF !important;
  }
}


/* --- C5 · „unten viel zu viel Platz unter der Bewertung" ---------------
   GEMESSEN, woraus der Fuss besteht (Unterkante Schieber → Unterkante
   Karte): **61 px**, davon sichtbare Farbe: **6 px** (die Punkte).
       Punktreihe      42 px   (6 px Punkt + 2 × 15 px Trefferpolster)
       Abstand darueber 8 px
       Polster Karte   10 px
   ⭐ Das Trefferpolster ist kein Zierrat — es stammt aus einer bewussten
   Entscheidung (S304-RUNDE1: 6-px-Ziele sind unbenutzbar). Es wird
   deshalb verkleinert, nicht abgeschafft: **30 px statt 36**. Gemessen:
       ist                                61 px  (Punkt 36 px)
       Polster 11 / Abstand 4 / Karte 4   43 px  (Punkt 28 px)
       **Polster 12 / Abstand 2 / Karte 6  45 px  (Punkt 30 px)** ← genommen
   Zwei Pixel mehr Fuss fuer zwei Pixel mehr Tippziel — das ist der
   richtige Tausch.

   ⛔⛔ EHRLICH, UND DER GROESSERE TEIL DES PROBLEMS BLEIBT: die fuenf
   Bewertungen liegen in EINER Flex-Spur. Gemessen sind sie
   **335 · 297 · 279 · 260 · 279 px** hoch — die Spur ist so hoch wie die
   laengste. Wer zur kuerzesten wischt, sieht bis zu **75 px** Leerraum
   unter ihr, und den kann CSS nicht wegnehmen: die Hoehe des Fensters
   muesste der GERADE SICHTBAREN Karte folgen, und das ist eine Rechnung,
   kein Stil. ⇒ Das gehoert ins Skript (siehe Bericht).
   ---------------------------------------------------------------------- */
@layer s304 {
  html body .s304-neu .s304-rev .rev-slider-dot{
    padding:12px !important;
  }
  html body .s304-neu .s304-rev .rev-slider-dots{
    margin-top:2px !important;
  }
  html body .s304-neu .s304-karte.s304-rev{
    padding-bottom:6px !important;
  }
}


/* --- C6 · „Zwischen Inner Circle Fits und Zupasst-Auch mehr Platz" -----
   GEMESSEN: `.s304-community` endet bei y 3344, `.s304-fits` beginnt bei
   y 3344 — **0 px**. Die beiden Kaesten stossen stumpf aneinander, und
   weil beide weiss und rund sind, liest es sich als EIN Kasten mit zwei
   Ueberschriften. Genau das meint er.
   ⭐ Gemessen durchprobiert: 14 → 14 px, 20 → 20 px, 26 → 26 px (der Rand
   wirkt eins zu eins, es faellt nichts zusammen). Genommen: **20 px** —
   doppelt so viel wie der Kartenabstand innerhalb der Produktseite
   (10 px), weil hier zwei eigenstaendige Bloecke getrennt werden, nicht
   zwei Zeilen desselben Blocks.
   ⛔ Nur dieser eine Spalt. Die anderen Sektionsgrenzen sind ebenfalls
   0 px — die hat er nicht genannt, und ich baue nichts, was nicht
   verlangt ist.
   ---------------------------------------------------------------------- */
@layer s304 {
  html body.template-product .s304-fits{
    margin-top:20px !important;
  }
}


/* --- C8 · „Die 304supply History öffnet sich nicht" --------------------
   ⛔⛔ ICH HATTE BERICHTET, SIE KLAPPE AUF. Das war eine Behauptung ohne
   Versuch: ich hatte den ZUSTAND gemessen (drei Knoepfe da, erster
   Schritt offen) und daraus geschlossen, dass sie funktioniert. **Ein
   Zustand ist kein Beweis fuer ein Verhalten.** Enzo hat sie angetippt,
   ich nicht.

   ⭐ NACHGEHOLT, mit einem ECHTEN Fingertipp (CDP `Input.dispatchTouchEvent`
   an Bildschirmkoordinaten, nicht `element.click()`):
       Tippen auf den zweiten Schritt →  aria-expanded false → **true**,
       Text 0 px → **143 px**.  Sie oeffnet also.
   ⇒ Enzo und ich haben beide richtig gemessen, nur nicht dasselbe. Zwei
   Ursachen, beide gemessen:

   ⛔ 1 · DAS TIPPZIEL IST 15 PX HOCH. Gemessen `.s304-hist__knopf`:
   304 × **15**, `padding: 0`. Die Null stammt aus S304-HIST-BUBBLES-2409
   („Der Knopf bekommt kein Polster, die Blase hat schon welches") und
   ueberschreibt das `padding: 10px 0` aus S304-HIST-AKKORDEON-2409.
   Trefferprobe, Versatz von der Knopfmitte nach oben/unten:
       vorher   −18 daneben · −12 daneben · −6 **Knopf** · 0 **Knopf**
                · +6 **Knopf** · +12 daneben · +18 daneben
       nachher  −18 bis +18 **alles Knopf**, +24 erst der Zwischenraum
   Positivkontrolle: in der Knopfmitte lag `H3.s304-hist__title` — der
   Messweg konnte also zwischen „Knopf" und „daneben" unterscheiden.
   ⭐ Geloest ueber eine unsichtbare Trefferflaeche (`::after`) statt ueber
   Polster: die Blase bleibt **43 px** hoch wie vorher, das Ziel wird
   **43 px** statt 15. Null Pixel Hoehe bezahlt.
   ⛔ Warum `position: static` am Knopf: die Flaeche soll sich an der
   BLASE ausrichten (`.s304-hist__step` ist `position: relative`, gemessen),
   nicht am Knopf — sonst waere sie wieder nur 15 px hoch.
   ⛔ Warum genau 43 px und nicht „inset: 0": bei einem OFFENEN Schritt ist
   die Blase 143 px hoch; eine Flaeche ueber alles wuerde dann auch den
   gelesenen Text zum Zuklapp-Knopf machen. 43 px ist die Hoehe der
   geschlossenen Blase, also genau die Kopfzeile.

   ⛔ 2 · DER ZUSTIMMUNGSBANNER SCHLUCKT TIPPER. Gemessen: `pandectes-cmp`
   liegt `position: fixed` mit `z-index: 2147483647` und bedeckt einen
   rund 200 px hohen Streifen mitten im Bild. Ein Tipp auf die FAQ-Zeile
   an dieser Stelle hat **nicht geoeffnet**, solange der Banner lag —
   und die FAQ funktioniert nachweislich. Das ist die Positivkontrolle
   dafuer: sie wurde rot, obwohl an der FAQ nichts kaputt ist.
   ⇒ Das ist keine CSS-Sache und nicht meine Zone (App-Einstellung).
   ---------------------------------------------------------------------- */
@layer s304 {
  html body .s304-hist .s304-hist__step .s304-hist__knopf{
    position:static !important;
  }
  html body .s304-hist .s304-hist__step .s304-hist__knopf::after{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:0 !important;
    height:43px !important;
  }
}

/* =======================================================================
   S304-TRUST-VERSTELLBAR-2409
   Enzo 24.09.: bei verstellbaren Artikeln soll „Verstellbar" eine der drei
   Trust-Angaben ersetzen — und ausdruecklich NICHT von Hand je Produkt
   gepflegt werden.
   Das Symbol gehoert zur Bedingung in `sections/s304-pdp.liquid`, die am
   Tag `Cord-Armband` haengt.
   ⭐ GEGENGEZAEHLT am 24.09. ueber alle 24 Produkte, zwei unabhaengige Wege:
   Tag `Cord-Armband` -> 6 Produkte · Wort „verstellbar" in der Beschreibung
   -> DIESELBEN 6 (blood-, blossom-, forest-, midnight-, ocean-, snow-link).
   Keine Abweichung in beide Richtungen.
   ======================================================================= */
html body .s304-neu .s304-tz__i--mass{
  -webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M3%206.8h14M3%2013.2h14%27%2F%3E%3Ccircle%20cx%3D%277.4%27%20cy%3D%276.8%27%20r%3D%272.2%27%2F%3E%3Ccircle%20cx%3D%2712.6%27%20cy%3D%2713.2%27%20r%3D%272.2%27%2F%3E%3C%2Fsvg%3E") !important;
  mask-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M3%206.8h14M3%2013.2h14%27%2F%3E%3Ccircle%20cx%3D%277.4%27%20cy%3D%276.8%27%20r%3D%272.2%27%2F%3E%3Ccircle%20cx%3D%2712.6%27%20cy%3D%2713.2%27%20r%3D%272.2%27%2F%3E%3C%2Fsvg%3E") !important; }


/* =======================================================================
   S304-T1-GRUND-PDP-2409
   Enzo 24.09.: die Produktseite soll sich anfuehlen wie dieselbe Welt wie
   die Kategorieseite. Die Werte hier sind KEINE neuen Werte — sie sind
   1:1 aus `assets/s304-kat.css` uebernommen, Bloecke S304-T1-GRUND-
   KATEGORIE-2409, S304-T1-DUNKLES-GLAS-2409 und S304-T1-KOPFBEREICH-
   DURCHSICHTIG-2409. Wer einen davon aendert, muss beide Dateien aendern.

   ⛔ KEIN `filter: blur()` auf einer bildschirmfuellenden Flaeche.
   `s304-grund-t1.jpg` ist bereits weichgezeichnet (720x1280, 21 KB) —
   einmal vorweg gerechnet statt sechzig Mal je Sekunde auf dem Handy.

   ⛔ DIE WARE BLEIBT UNANGETASTET. Jedes Produktbildfeld bleibt deckend
   weiss — Galerie, Vorschaubilder, Geschenkwahl und „Dazu passt auch".
   Gemessen am 24.09. auf der Kategorieseite: ein getoenter Grund ueber der
   Ware faerbte die Silberkette um +9,8 Gruenstich. Das passiert hier nicht.

   ⭐ WARUM DIE DURCHSICHT NUR AUF DEN AEUSSEREN KACHELN LIEGT:
   `backdrop-filter` innerhalb eines Elternteils, das selbst schon einen
   `backdrop-filter` traegt, zeichnet ein zweites Mal weich, was bereits
   weich ist — Leistung ohne Wirkung. Deshalb tragen nur die Kacheln, die
   DIREKT auf dem Grund liegen, Glas; die Flaechen IN einer Kachel bekommen
   nur eine flache Aufhellung.

   ⛔ SPEZIFITAET, nicht Reihenfolge: dieser Block steht hinten in der
   Datei, aber `assets/s304-haus.css` liegt in DERSELBEN Schicht
   (`@layer s304`) und schreibt z. B. `html body .theme__header .header__mobile`
   = (0,2,3). Ein blosses `html body.s304-neu-an.s304-seite.template-product .header__mobile` = (0,2,2)
   waere eine Stufe zu schwach gewesen und haette trotz spaeterer Position
   verloren. Darum tragen die Kopfregeln hier den vollen Pfad.
   ======================================================================= */
@layer s304 {

  /* ── 1 · DER GRUND liegt fest hinter allem ────────────────────────── */
  html:has(body.s304-neu-an){ background:#0B1616 !important; }
  html body.s304-neu-an.s304-seite.template-product{ background:transparent !important; }
  html body.s304-neu-an.s304-seite.template-product::before{
    content:"" !important; position:fixed !important; inset:0 !important;
    z-index:-1 !important; pointer-events:none !important;
    background:url("s304-grund-t1.jpg") center center / cover no-repeat !important; }
  html body.s304-neu-an.s304-seite.template-product::after{
    content:"" !important; position:fixed !important; inset:0 !important;
    z-index:-1 !important; pointer-events:none !important;
    background:linear-gradient(180deg, rgba(8,18,16,.32) 0%, rgba(8,18,16,.58) 100%) !important; }

  /* Alles, was zwischen Grund und Kachel liegt, wird durchsichtig.
     ⛔ Der Fuss bleibt ausgenommen — er ist bereits rgb(11,22,22), also
     praktisch der Grundton, und traegt eigene Flaechen. */
  html body.s304-neu-an.s304-seite.template-product .main-content,
  html body.s304-neu-an.s304-seite.template-product #MainContent,
  html body.s304-neu-an.s304-seite.template-product .container,
  html body.s304-neu-an.s304-seite.template-product .s304-neu,
  html body.s304-neu-an.s304-seite.template-product .s304-pdp-section,
  html body.s304-neu-an.s304-seite.template-product .product__page,
  html body.s304-neu-an.s304-seite.template-product .shopify-section-group-group-header,
  html body.s304-neu-an.s304-seite.template-product .header-sections,
  html body.s304-neu-an.s304-seite.template-product .header__wrapper{ background:transparent !important; }

  /* S304-LADER-WEISS-0610 (ac): Enzo 06.10. 01:35Z am iPhone: „weisser [Bildschirm] mit
     dem Logo, auf einmal ist es dann aber kurz gruen“. Gemessen (Video, iPhone-WebKit):
     Kategorie-Lader weiss → PDP-Lader #0B1616 mit invertiertem Logo ~80 ms → weisse PDP.
     Der dunkle Lader stammt aus dem dunklen PDP-Entwurf; die PDP ist heute weiss.
     Jetzt wie ueberall: weiss mit dunklem Logo. Rueckweg: Sicherung s304-pdp.css.vor-lader-weiss.
     (alt: .loading{background:#0B1616} + .loading img{filter:invert(1)}) */
  html body.s304-neu-an.s304-seite.template-product .loading{ background:#FFFFFF !important; }
  html body.s304-neu-an.s304-seite.template-product .loading img{ filter:none !important; }


  /* ── 2 · DIE KOPFLEISTE ────────────────────────────────────────────
     ⭐ Die Lehre aus der Kategorieseite: bei einem Durchsicht-Problem
     zuerst die ELTERNKETTE abgehen, nicht das Element. Gemessen auf der
     PDP, genau dasselbe Muster:
       div.header__mobile                        rgb(255,255,255)
       header.theme__header                      rgb(244,241,237)
       div.shopify-section-group-group-header    rgb(244,241,237)
       body                                      rgb(244,241,237)
     Das Glas haette auf Sand gelegen, nicht auf dem Bild. */
  html body.s304-neu-an.s304-seite.template-product header.theme__header{
    background:transparent !important; box-shadow:none !important; }
  /* ⛔ Der weiche Auslauf unter dem Kopf ist ein SANDFARBENER Verlauf
     (haus.css, S304-…-2309). Auf dunklem Grund ist er ein heller Balken. */
  html body.s304-neu-an.s304-seite.template-product header.theme__header::after{
    background:none !important; }
  html body.s304-neu-an.s304-seite.template-product .theme__header .header__mobile{
    background:rgba(12,24,22,.50) !important;
    backdrop-filter:blur(18px) saturate(1.2) !important;
    -webkit-backdrop-filter:blur(18px) saturate(1.2) !important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.17) !important; }
  /* ⭐ Das Logo ist ein SCHWARZES PNG. `invert(1)` macht daraus reines
     Weiss und ist umkehrbar — kein zweites Bild, kein Liquid-Eingriff. */
  html body.s304-neu-an.s304-seite.template-product .header__mobile .logo__img img,
  html body.s304-neu-an.s304-seite.template-product .header__mobile .header__logo__link img{
    filter:invert(1) !important; }
  /* ⛔ haus.css gibt Burger, Konto und Korb je eine WEISSE Flaeche
     (`background:#FFFFFF`). Auf dunklem Glas waere das eine weisse Pille
     mit weissem Zeichen darin — also unsichtbar. */
  html body.s304-neu-an.s304-seite.template-product .header__mobile__hamburger,
  html body.s304-neu-an.s304-seite.template-product .header__mobile .navlink,
  html body.s304-neu-an.s304-seite.template-product .header__mobile__right a,
  html body.s304-neu-an.s304-seite.template-product .header__mobile__right button{
    background:transparent !important; }
  html body.s304-neu-an.s304-seite.template-product .header__mobile svg{
    stroke:#FFFFFF !important; color:#FFFFFF !important; }
  html body.s304-neu-an.s304-seite.template-product .header__mobile svg [fill]:not([fill="none"]){ fill:#FFFFFF !important; }
  html body.s304-neu-an.s304-seite.template-product .header__mobile__hamburger span,
  html body.s304-neu-an.s304-seite.template-product .header__mobile__hamburger i,
  html body.s304-neu-an.s304-seite.template-product .header__mobile__hamburger::before,
  html body.s304-neu-an.s304-seite.template-product .header__mobile__hamburger::after{
    background-color:#FFFFFF !important; color:#FFFFFF !important; }


  /* ── 3 · DIE KACHELN werden dunkles Glas ──────────────────────────
     ⭐ Warum DUNKEL und nicht Scuffers' rgba(227,227,227,.52):
     227er Grau bei 52 % ueber einem dunklen Foto ergibt Mittelgrau, und
     darauf steht weisse Schrift bei 3,0 statt 4,5. Scuffers setzt den
     hellen Wert auf einer HELLEN Seite ein; fuer den dunklen Fall haben
     sie eine eigene Fassung. Genau dieser Fehler ist auf der
     Kategorieseite einmal gemacht und gemessen worden. */
  html body.s304-neu-an.s304-seite.template-product .s304-vkopf,
  html body.s304-neu-an.s304-seite.template-product .product__mobile-header,
  html body.s304-neu-an.s304-seite.template-product .s304-karte,
  html body.s304-neu-an.s304-seite.template-product .s304-kaufzeile,
  html body.s304-neu-an.s304-seite.template-product .s304-community,
  html body.s304-neu-an.s304-seite.template-product .s304-fits,
  html body.s304-neu-an.s304-seite.template-product .s304-hist{
    background:rgba(12,24,22,.40) !important;
    backdrop-filter:blur(16px) saturate(1.25) !important;
    -webkit-backdrop-filter:blur(16px) saturate(1.25) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.22),
      inset 0 0 0 1px rgba(255,255,255,.15),
      0 2px 8px -5px rgba(0,0,0,.6) !important; }

  /* Flaechen INNERHALB einer Kachel: nur eine flache Aufhellung,
     kein zweiter Weichzeichner. */
  html body.s304-neu-an.s304-seite.template-product .s304-huelle,
  html body.s304-neu-an.s304-seite.template-product .s304-spec__l,
  html body.s304-neu-an.s304-seite.template-product .s304-hist__step,
  html body.s304-neu-an.s304-seite.template-product .rev-slider-card,
  html body.s304-neu-an.s304-seite.template-product .s304-poster,
  html body.s304-neu-an.s304-seite.template-product .s304-videos .swiper-slide{
    background:rgba(255,255,255,.07) !important;
    backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.13) !important; }


  /* ── 4 · ⛔ JEDES PRODUKTBILDFELD BLEIBT DECKEND WEISS ─────────────
     Galerie, Vorschaubilder, die Geschenkwahl und „Dazu passt auch".
     Die Ware behaelt damit exakt die Farbe, die sie vorher hatte. */
  html body.s304-neu-an.s304-seite.template-product .s304-galerie,
  html body.s304-neu-an.s304-seite.template-product .s304-dia,
  html body.s304-neu-an.s304-seite.template-product .product__slides,
  html body.s304-neu-an.s304-seite.template-product .product__slide,
  html body.s304-neu-an.s304-seite.template-product .s304-mini__k,
  html body.s304-neu-an.s304-seite.template-product .product__thumb,
  html body.s304-neu-an.s304-seite.template-product .product__thumb__link,
  html body.s304-neu-an.s304-seite.template-product .s304-vk__b,
  html body.s304-neu-an.s304-seite.template-product .s304-fits__media,
  html body.s304-neu-an.s304-seite.template-product .s304-tg__bi{
    background:#FFFFFF !important;
    backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }


  /* ── 5 · DIE SCHRIFT auf Grund und Kacheln wird weiss ──────────────
     ⛔ Warum als Flaechenregel und nicht als Liste von Namen: gemessen
     stehen in diesen Kacheln Textfarben rgb(0,0,0) · rgb(17,17,17) ·
     rgb(26,26,26) · rgb(33,33,33) · rgb(43,43,43) · rgb(68,68,68) ·
     rgb(85,85,85) · rgb(102,102,102) · rgb(110,104,98) · rgb(124,116,110) ·
     rgb(138,131,124) · rgb(139,131,122) · rgb(153,153,153) · rgb(170,170,170)
     — auf 14 verschiedenen Klassen, viele davon ohne eigenen Namen
     (`div.` / `p.` / `span.`). Eine Namensliste haette die Haelfte
     uebersehen. Die hellen Inseln werden weiter unten zurueckgeholt. */
  html body.s304-neu-an.s304-seite.template-product .s304-vkopf,          html body.s304-neu-an.s304-seite.template-product .s304-vkopf *,
  html body.s304-neu-an.s304-seite.template-product .product__mobile-header, html body.s304-neu-an.s304-seite.template-product .product__mobile-header *,
  html body.s304-neu-an.s304-seite.template-product .s304-karte,          html body.s304-neu-an.s304-seite.template-product .s304-karte *,
  html body.s304-neu-an.s304-seite.template-product .s304-kaufzeile,      html body.s304-neu-an.s304-seite.template-product .s304-kaufzeile *,
  html body.s304-neu-an.s304-seite.template-product .s304-community,      html body.s304-neu-an.s304-seite.template-product .s304-community *,
  html body.s304-neu-an.s304-seite.template-product .s304-fits,           html body.s304-neu-an.s304-seite.template-product .s304-fits *,
  html body.s304-neu-an.s304-seite.template-product .s304-hist,           html body.s304-neu-an.s304-seite.template-product .s304-hist *{
    color:#FFFFFF !important; }

  /* Linien und Trenner waren dunkel gedacht. */
  html body.s304-neu-an.s304-seite.template-product .s304-karte hr,
  html body.s304-neu-an.s304-seite.template-product .s304-spec__r,
  html body.s304-neu-an.s304-seite.template-product .s304-hist__track,
  html body.s304-neu-an.s304-seite.template-product .s304-hist__step{
    border-color:rgba(255,255,255,.18) !important; }

  /* Zeichen, die als SVG gezeichnet sind, folgen der Schrift. */
  html body.s304-neu-an.s304-seite.template-product .s304-karte svg,
  html body.s304-neu-an.s304-seite.template-product .s304-kaufzeile svg,
  html body.s304-neu-an.s304-seite.template-product .s304-fits svg,
  html body.s304-neu-an.s304-seite.template-product .s304-hist svg,
  html body.s304-neu-an.s304-seite.template-product .s304-community svg,
  html body.s304-neu-an.s304-seite.template-product .product__mobile-header svg{
    color:#FFFFFF !important; }
  html body.s304-neu-an.s304-seite.template-product .s304-karte svg [stroke]:not([stroke="none"]),
  html body.s304-neu-an.s304-seite.template-product .product__mobile-header svg [stroke]:not([stroke="none"]){
    stroke:#FFFFFF !important; }
  html body.s304-neu-an.s304-seite.template-product .s304-karte svg [fill]:not([fill="none"]),
  html body.s304-neu-an.s304-seite.template-product .product__mobile-header svg [fill]:not([fill="none"]){
    fill:#FFFFFF !important; }
  /* ⛔ Zwei der drei Trust-Zeichen sind keine SVG, sondern schwarze
     Bilddateien (`img`, 20x20). Bei denen hilft nur Umkehren. */
  html body.s304-neu-an.s304-seite.template-product .s304-trust img,
  html body.s304-neu-an.s304-seite.template-product .s304-zeit img{ filter:invert(1) !important; }

  /* ⛔ `.km-delivery-label` traegt eine EIGENE weisse Flaeche. Ohne diese
     Zeile stuende weisse Schrift auf weissem Grund — unsichtbar, und die
     Kontrastmessung haette es als 1,00 gemeldet. */
  html body.s304-neu-an.s304-seite.template-product .km-delivery-label,
  html body.s304-neu-an.s304-seite.template-product .s304-zeit .km-delivery-label{
    background:transparent !important; color:#FFFFFF !important; }

  /* Die Trust-Pillen im Kopf waren dunkel auf hell. Auf dunklem Glas
     kehren sie sich um: helle Pille, dunkle Schrift — so bleiben sie ein
     eigener Gegenstand und verschwinden nicht in der Kachel. */
  html body.s304-neu-an.s304-seite.template-product .s304-trustzeile li{
    background:rgba(255,255,255,.90) !important; }
  html body.s304-neu-an.s304-seite.template-product .s304-trustzeile li,
  html body.s304-neu-an.s304-seite.template-product .s304-trustzeile li *{ color:#0B1616 !important; }
  html body.s304-neu-an.s304-seite.template-product .s304-trustzeile .s304-tz__i{
    background-color:#0B1616 !important; }


  /* ── 6 · DER KAUFKNOPF ────────────────────────────────────────────
     Er war ein fast schwarzer Verlauf. Auf dunklem Glas waere „dunkel auf
     dunkel" genau der Fall, der einen Knopf verschwinden laesst. Er wird
     deshalb hell — dieselbe Sprache wie der gewaehlte Filter auf der
     Kategorieseite („die GEWAEHLTE leuchtet weiss"). */
  html body.s304-neu-an.s304-seite.template-product .s304-cta,
  html body.s304-neu-an.s304-seite.template-product .s304-cta.btn,
  html body.s304-neu-an.s304-seite.template-product .product__submit__buttons .btn--solid{
    background:#FFFFFF !important;
    background-image:none !important;
    color:#0B1616 !important;
    box-shadow:0 6px 18px -8px rgba(0,0,0,.55) !important; }
  html body.s304-neu-an.s304-seite.template-product .s304-cta *,
  html body.s304-neu-an.s304-seite.template-product .s304-cta-preis{ color:#0B1616 !important; }
  /* Die Schwebeleiste ist auf dem Handy der einzige Kaufknopf, sobald
     gescrollt wurde — sie bekommt dieselbe Behandlung. */
  html body.s304-neu-an.s304-seite.template-product cart-bar,
  html body.s304-neu-an.s304-seite.template-product .cart-bar{
    background:rgba(12,24,22,.72) !important;
    backdrop-filter:blur(18px) saturate(1.2) !important;
    -webkit-backdrop-filter:blur(18px) saturate(1.2) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18) !important; }
  html body.s304-neu-an.s304-seite.template-product .cart-bar .btn,
  html body.s304-neu-an.s304-seite.template-product cart-bar .btn{
    background:#FFFFFF !important; background-image:none !important; }
  html body.s304-neu-an.s304-seite.template-product .cart-bar .btn,
  html body.s304-neu-an.s304-seite.template-product .cart-bar .btn *,
  html body.s304-neu-an.s304-seite.template-product cart-bar .btn,
  html body.s304-neu-an.s304-seite.template-product cart-bar .btn *{ color:#0B1616 !important; }


  /* ── 7 · DIE HELLEN INSELN ZURUECKHOLEN ───────────────────────────
     ⛔ Diese Regeln MUESSEN hinter der Flaechenregel aus 5 stehen: sie
     haben dieselbe Spezifitaet, also entscheidet die Reihenfolge.
     `.s304-pop`, `.s304-sel`, `.s304-mod`, `.s304-bl` und `.s304-duo`
     sind im Ruhezustand ausgeblendet (gemessen: opacity 0 bzw.
     display:none). Sie bleiben in dieser Runde helle Blaetter — ein
     dunkler Umbau, den ich nicht aufklappen und messen kann, waere
     genau die Behauptung ohne Messung, die wir uns verbieten. */
  html body.s304-neu-an.s304-seite.template-product .s304-pop,       html body.s304-neu-an.s304-seite.template-product .s304-pop *,
  html body.s304-neu-an.s304-seite.template-product .s304-sel,       html body.s304-neu-an.s304-seite.template-product .s304-sel *,
  html body.s304-neu-an.s304-seite.template-product .s304-mod,       html body.s304-neu-an.s304-seite.template-product .s304-mod *,
  html body.s304-neu-an.s304-seite.template-product .s304-bl,        html body.s304-neu-an.s304-seite.template-product .s304-bl *,
  html body.s304-neu-an.s304-seite.template-product .s304-duo,       html body.s304-neu-an.s304-seite.template-product .s304-duo *{
    color:#15130F !important; }
  html body.s304-neu-an.s304-seite.template-product .s304-pop,
  html body.s304-neu-an.s304-seite.template-product .s304-sel,
  html body.s304-neu-an.s304-seite.template-product .s304-mod__k,
  html body.s304-neu-an.s304-seite.template-product .s304-bl{ background:#FFFFFF !important; }
  html body.s304-neu-an.s304-seite.template-product .s304-duo{ background:#FFFFFF !important; }
}


/* =======================================================================
   S304-T1-PDP-NACHTRAG-2409
   Vier Dinge, die erst die Messung am fertigen T1 gezeigt hat. Jedes davon
   war auf der HELLEN Seite unsichtbar und wird erst auf dem dunklen Grund
   zum Fehler — das ist das Muster dieses ganzen Nachtrags.
   ======================================================================= */
@layer s304 {

  /* ── 1 · ⛔⛔ DAS KARUSSELL HAT DIE WARE ABGEDUNKELT ────────────────
     Gemessen: das Freisteller-Bild in „Dazu passt auch" stand vorher auf
     Weiss 254 und nachher auf 231 — die Ware wurde dunkler, genau das,
     was hier verboten ist.

     ⭐ Die Ursache lag NICHT an meinem Grund und nicht am Bildfeld
     (`.s304-fits__media` misst sich korrekt als rgb(255,255,255)).
     Sie lag eine Ebene hoeher: `div.swiper-slide` steht dauerhaft auf
     `opacity: 0.866809` — kein Zufallswert, sondern eine scrollgesteuerte
     CSS-Animation namens `s304-karussell` aus `assets/s304-haus.css`:
         entry 0%  { transform: rotateY(26deg) scale(.84); opacity:.55; }
         cover 46% { transform: rotateY(0deg)  scale(1);   opacity:1;   }
         exit 100% { transform: rotateY(-26deg) scale(.84); opacity:.55; }
     Weder eine Regel in `document.styleSheets` noch ein `style`-Attribut
     haetten das gezeigt — gefunden nur ueber `element.getAnimations()`.

     ⛔ Eine Durchsichtigkeit unter 1 laesst IMMER den Grund durchscheinen.
     Auf der weissen Seite war das unsichtbar (weiss auf weiss), auf dem
     dunklen Grund faerbt es die Ware. Ein Bildfeld kann das nicht heilen:
     `opacity` wirkt auf den ganzen Teilbaum, ein Kind kann sie nicht
     zuruecknehmen.

     ⭐ Die Drehung selbst bleibt — sie traegt die Tiefe und ruehrt keine
     Farbe an. Nur der Verblassungs-Anteil faellt weg. Deshalb hier
     dieselben Bilder, nur mit `opacity: 1` durchgehend. */
  @supports (animation-timeline: view()){
    /* ac2 30.09. (c9 nach Enzos Live-Regel): „die erste Karte muss gerade und ganz sichtbar sein.“
   Gemessen: im Ruhezustand stand die erste Karte ~10 Grad gedreht und 4 px hinter der Kante
   („IG STEEL“). Der flache Bereich war nur cover 46-54 % - eine ganz sichtbare Karte am Rand
   liegt bei ~74 %. Jetzt flach von 24 bis 76 %: gedreht wird nur, was wirklich am Rand ist. */
@keyframes s304-karussell-t1{
      entry 0%  { transform: rotateY(26deg)  scale(.84); opacity:1; }
      cover 24% { transform: rotateY(0deg)   scale(1);   opacity:1; }
      cover 76% { transform: rotateY(0deg)   scale(1);   opacity:1; }
      exit 100% { transform: rotateY(-26deg) scale(.84); opacity:1; }
    }
    html body.s304-neu-an.s304-seite.template-product .s304-fits .swiper-slide,
    html body.s304-neu-an.s304-seite.template-product .s304-community .swiper-slide{
      animation-name:s304-karussell-t1 !important; }
  }
  /* Guertel und Hosentraeger: falls die Animation aus irgendeinem Grund
     doch die alte bleibt, faellt die Ware nicht ins Dunkle. */
  html body.s304-neu-an.s304-seite.template-product .s304-fits .swiper-slide,
  html body.s304-neu-an.s304-seite.template-product .s304-community .swiper-slide{
    opacity:1 !important; }


  /* ── 2 · DIE KACHELN IN „DAZU PASST AUCH" SIND WEISSE KARTEN ───────
     ⛔ `assets/s304-haus.css` gibt `.s304-fits .swiper-slide` ein
     `background:#FFFFFF !important`. Meine Flaechenregel aus Block 5 hat
     die Schrift darin weiss gefaerbt — weisse Schrift auf weisser Karte.
     Im Bild war „BIG STEEL 120 €" schlicht verschwunden.
     ⭐ Gefangen hat das nicht mein Auge, sondern die Auflage, dass jede
     Grundfarben-Messung mit ausgeblendetem Text gegengeprueft wird: der
     Messwert kam als 1,24 zurueck.
     Die Karte ist eine helle Insel wie ein Bildfeld — sie behaelt ihre
     dunkle Schrift. */
  html body.s304-neu-an.s304-seite.template-product .s304-fits .swiper-slide,
  html body.s304-neu-an.s304-seite.template-product .s304-fits .swiper-slide *,
  html body.s304-neu-an.s304-seite.template-product .s304-fits__card,
  html body.s304-neu-an.s304-seite.template-product .s304-fits__card *,
  html body.s304-neu-an.s304-seite.template-product .s304-fits__zeile,
  html body.s304-neu-an.s304-seite.template-product .s304-fits__name,
  html body.s304-neu-an.s304-seite.template-product .s304-fits__prices,
  html body.s304-neu-an.s304-seite.template-product .s304-fits__price{
    color:#111111 !important; }
  /* ⛔ Die Ueberschrift steht NICHT auf der Karte, sondern auf dem Glas —
     sie bleibt weiss. (Nachbar geprueft, statt pauschal zu faerben.) */
  html body.s304-neu-an.s304-seite.template-product .s304-fits__header,
  html body.s304-neu-an.s304-seite.template-product .s304-fits__heading{
    color:#FFFFFF !important; }


  /* ── 3 · DIE VERSANDZEILE IM KOPF ──────────────────────────────────
     ⛔ Es gibt ZWEI Versandzeilen, nicht eine. `.s304-vkopf` steht in der
     Produktkarte und war von Anfang an Glas; `.s304-kopfversand` sitzt im
     Kopf und erscheint erst beim Scrollen (gemessen bei Scrollstand 1600:
     370x24, rgb(255,255,255)). Wer nur bei Scrollstand 0 misst, sieht sie
     nie — im Bild war sie eine weisse Pille unter der Glasleiste. */
  html body.s304-neu-an.s304-seite.template-product .theme__header .s304-kopfversand{
    background:rgba(12,24,22,.50) !important;
    backdrop-filter:blur(18px) saturate(1.2) !important;
    -webkit-backdrop-filter:blur(18px) saturate(1.2) !important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.17) !important; }
  html body.s304-neu-an.s304-seite.template-product .theme__header .s304-kopfversand,
  html body.s304-neu-an.s304-seite.template-product .theme__header .s304-kopfversand *{
    color:#FFFFFF !important; }


  /* ── 4 · DER KAUFKNOPF DER SCHWEBELEISTE ───────────────────────────
     ⛔ Meine erste Regel traf `.cart-bar .btn` — und das ist der Knopf des
     Themes, der hier 0x0 gross ist. Der SICHTBARE Knopf heisst
     `button.cart-bar__atc-btn` (370x52, rgb(10,10,10)). Ein Knopf, den man
     nicht misst, weil ein gleichnamiger Nachbar danebensteht, ist genau
     die Falle „ich habe das falsche Element gemessen".
     Weisse Schrift auf rgb(10,10,10) waere mit 20,4 nicht zu beanstanden —
     aber der Knopf sass damit dunkel in einer dunklen Leiste. Er bekommt
     dieselbe Sprache wie der grosse Kaufknopf: er leuchtet. */
  html body.s304-neu-an.s304-seite.template-product .cart-bar__atc-btn,
  html body.s304-neu-an.s304-seite.template-product cart-bar .cart-bar__atc-btn{
    background:#FFFFFF !important; background-image:none !important; }
  html body.s304-neu-an.s304-seite.template-product .cart-bar__atc-btn,
  html body.s304-neu-an.s304-seite.template-product .cart-bar__atc-btn *{
    color:#0B1616 !important; }
}


/* =======================================================================
   S304-FAQ-ABSAETZE-2409
   Nachgereicht fuer den Liquid-Umbau in `sections/s304-pdp.liquid`: die
   FAQ-Antworten waren Rohtext mit echten Zeilenumbruechen. HTML wirft die
   weg; `white-space: pre-line` holt sie zwar zurueck, aber ein erzwungener
   Umbruch ist KEIN Element und kann keinen Abstand tragen — deshalb klebte
   alles zusammen.

   Jetzt liefert das Liquid echte `<p class="s304-faq__p">` aus, und wo eine
   Zeile mit einer Unterfrage beginnt, steht `<b class="s304-faq__u">`
   davor. Gemessen am ausgelieferten `icy-stellar`: vier Absaetze in der
   ersten Antwort, drei davon mit Unterfrage.

   ⛔ `white-space: pre-line` muss dabei WEG. Mit echten Absaetzen wirkt es
   doppelt: der Umbruch des Autors erzeugt eine Leerzeile UND der Absatz
   seinen Abstand. Die alte Regel steht weiter oben in dieser Datei
   (S304-FAQ-…-2309) und traegt `!important`; sie wird hier bewusst
   zurueckgenommen, nicht geloescht — die Begruendung von damals bleibt
   lesbar.
   ======================================================================= */
@layer s304 {
  html body .s304-neu .s304-fragen details.s304-frage > .s304-frage__b,
  html body .s304-neu .s304-fragen .s304-frage__b{
    white-space:normal !important; }

  html body .s304-neu .s304-frage__b .s304-faq__p{
    margin:0 0 9px !important; }
  html body .s304-neu .s304-frage__b .s304-faq__p:last-child{
    margin-bottom:0 !important; }
  html body .s304-neu .s304-frage__b .s304-faq__u{
    display:block !important;
    margin-bottom:2px !important;
    font-weight:700 !important; }
}

/* =======================================================================
   S304-T1-AUFKLAPPBLAETTER-2409
   Der groesste Rest nach dem T1-Anstrich: die aufklappbaren Blaetter waren
   noch hell. Auf der dunklen Seite schlaegt beim Antippen ein weisses Blatt
   auf — genau der Bruch, den Enzo beim Burger-Menue beschrieben hat
   („dahinter erkennt man noch den Header, das macht keinen Sinn").

   ⭐ GEOEFFNET UND GEMESSEN, nicht geraten. Das Blatt traegt im offenen
   Zustand die Klasse `da`; der Schalter ist `.s304-duo` in `.s304-huelle`.
   Gemessen nach dem Oeffnen: `.s304-pop.da` 486 px hoch, `rgb(255,255,255)`.

   ⛔ DIE GESCHENK-KACHELN BLEIBEN WEISS. Auf ihnen sitzt das Produktbild
   DIREKT auf der Kachelflaeche (kein eigenes Bildfeld) — ein dunkler Grund
   wuerde dem Freisteller den Boden nehmen. Genau wie bei „Dazu passt auch".
   Ihre Schrift bleibt deshalb ausdruecklich dunkel.
   ======================================================================= */
@layer s304 {

  /* 1 · Das Blatt selbst wird Glas, kraeftiger als eine Kachel:
         es liegt UEBER Inhalt und muss ihn zudecken koennen. */
  html body.template-product .s304-neu .s304-pop,
  html body.template-product .s304-neu .s304-sel,
  html body.template-product .s304-neu .s304-blatt__f{
    background:rgba(10,20,19,.82) !important;
    backdrop-filter:blur(22px) saturate(1.2) !important;
    -webkit-backdrop-filter:blur(22px) saturate(1.2) !important;
    color:#FFFFFF !important; }
  html body.template-product .s304-neu .s304-pop{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18),
               inset 0 0 0 1px rgba(255,255,255,.12),
               0 -18px 40px -22px rgba(0,0,0,.8) !important; }
  html body.template-product .s304-neu .s304-sel,
  html body.template-product .s304-neu .s304-blatt__f{
    box-shadow:none !important; }

  /* 2 · Schrift auf dem Blatt */
  html body.template-product .s304-neu .s304-pop .s304-kb-kopf,
  html body.template-product .s304-neu .s304-pop .s304-kb-alle,
  html body.template-product .s304-neu .s304-pop .s304-pop__t,
  html body.template-product .s304-neu .s304-pop .s304-pdpb{
    color:#FFFFFF !important; }

  /* 3 · Der Schliessen-Knopf wird Glas */
  html body.template-product .s304-neu .s304-pop .s304-pop__x{
    background:rgba(255,255,255,.14) !important;
    color:#FFFFFF !important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.2) !important; }

  /* 4 · Die Geschenk-Kacheln BLEIBEN weiss, ihre Schrift dunkel.
         Das Produktbild sitzt direkt darauf. */
  html body.template-product .s304-neu .s304-pop .s304-kb-kachel{
    background:#FFFFFF !important;
    box-shadow:inset 0 0 0 1px rgba(18,18,20,.08) !important; }
  html body.template-product .s304-neu .s304-pop .s304-kb-kachel .s304-kb-n,
  html body.template-product .s304-neu .s304-pop .s304-kb-kachel .s304-kb-g,
  html body.template-product .s304-neu .s304-pop .s304-kb-kachel{
    color:#15130F !important; }

  /* 5 · Die Hauptaktion leuchtet weiss statt schwarz —
         ein schwarzer Knopf verschwindet auf dunklem Glas. */
  html body.template-product .s304-neu .s304-pop .s304-blatt__cta{
    background:#FFFFFF !important; }
  html body.template-product .s304-neu .s304-pop .s304-blatt__cta .tx,
  html body.template-product .s304-neu .s304-pop .s304-blatt__cta .pr,
  html body.template-product .s304-neu .s304-pop .s304-blatt__cta{
    color:#0B1616 !important; }

  /* 6 · Der Schalter, der das Blatt oeffnet */
  html body.template-product .s304-neu .s304-huelle .s304-duo{
    background:rgba(12,24,22,.44) !important;
    backdrop-filter:blur(14px) saturate(1.2) !important;
    -webkit-backdrop-filter:blur(14px) saturate(1.2) !important;
    color:#FFFFFF !important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.16) !important; }
  html body.template-product .s304-neu .s304-huelle .s304-duo *{
    color:#FFFFFF !important; }
}

/* =======================================================================
   S304-T1-BLATT-SPEZIFITAET-2409  (Nachtrag)
   Von den sechs Regeln des Blatt-Blocks griffen fuenf sofort — nur der
   Grund des Blattes selbst nicht. Gemessen im Browser:

     gewinnt:  html body.s304-neu-an.s304-seite.template-product .s304-pop
               -> 4 Klassen
     verliert: html body.template-product .s304-neu .s304-pop
               -> 3 Klassen

   ⭐ Zum dritten Mal heute dieselbe Lehre: **in derselben Schicht
   entscheidet die Spezifitaet, nicht die Reihenfolge.** Hier hilft nur
   derselbe volle Pfad wie das Original, plus eine Klasse.
   ======================================================================= */
@layer s304 {
  html body.s304-neu-an.s304-seite.template-product .s304-neu .s304-pop,
  html body.s304-neu-an.s304-seite.template-product .s304-neu .s304-sel,
  html body.s304-neu-an.s304-seite.template-product .s304-neu .s304-blatt__f{
    background:rgba(10,20,19,.82) !important;
    backdrop-filter:blur(22px) saturate(1.2) !important;
    -webkit-backdrop-filter:blur(22px) saturate(1.2) !important;
    color:#FFFFFF !important; }
  html body.s304-neu-an.s304-seite.template-product .s304-neu .s304-pop{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18),
               inset 0 0 0 1px rgba(255,255,255,.12),
               0 -18px 40px -22px rgba(0,0,0,.8) !important; }
  html body.s304-neu-an.s304-seite.template-product .s304-neu .s304-kb-kachel{
    background:#FFFFFF !important; }
}

/* =======================================================================
   S304-FASSUNG-30-UND-34-PDP-2409
   Dieselben zwei Fassungen wie auf der Kategorie, damit der Umschalter
   ueber beide Flaechen traegt. Aufruf `?grund=30` bzw. `?grund=34`.
   ⛔ Ohne den Parameter aendert sich nichts — T1 bleibt der Stand.
   ======================================================================= */
@layer s304 {

  /* ── 30 · Beton ───────────────────────────────────────────────── */
  html.s304-grund-30 body.s304-neu-an.s304-seite.template-product ::before,
  html.s304-grund-30 body.template-product::before{
    background-image:url("s304-grund-30.jpg") !important; }
  html.s304-grund-30 body.template-product::after{
    background:linear-gradient(180deg, rgba(8,18,16,.40) 0%, rgba(8,18,16,.62) 100%) !important; }

  /* ── 34 · Hell ────────────────────────────────────────────────── */
  html.s304-grund-34 body.template-product{ background:#FFFFFF !important; }
  html.s304-grund-34 body.template-product::before{
    background:none !important; background-color:#FFFFFF !important; }
  html.s304-grund-34 body.template-product::after{
    background:radial-gradient(circle at 0.69px 0.97px, rgba(11,22,22,.55) 0.40px, transparent 0.45px), radial-gradient(circle at 2.26px 0.85px, rgba(11,22,22,.55) 0.36px, transparent 0.41px), radial-gradient(circle at 0.95px 4.08px, rgba(11,22,22,.55) 0.30px, transparent 0.35px) !important;
    background-size:2.30px 2.30px, 3.70px 3.70px, 5.30px 5.30px !important;
    background-repeat:repeat, repeat, repeat !important;
    -webkit-mask-image:linear-gradient(126deg, rgba(0,0,0,0) 2%, rgba(0,0,0,.5) 20%, rgba(0,0,0,1) 44%, rgba(0,0,0,.5) 70%, rgba(0,0,0,0) 94%) !important; mask-image:linear-gradient(126deg, rgba(0,0,0,0) 2%, rgba(0,0,0,.5) 20%, rgba(0,0,0,1) 44%, rgba(0,0,0,.5) 70%, rgba(0,0,0,0) 94%) !important;
    -webkit-mask-size:100% 100% !important; mask-size:100% 100% !important;
    -webkit-mask-repeat:no-repeat !important; mask-repeat:no-repeat !important; }

  /* Karten weiss mit Lichtkante, Schatten weicher als die Luecke */
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .s304-karte,
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .product__mobile-header,
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .s304-blk,
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .s304-pop,
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .s304-sel,
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .s304-blatt__f{
    background:#FFFFFF !important;
    backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,1),
               inset 0 0 0 1.2px rgba(255,255,255,.95),
               0 0 0 1px rgba(18,18,20,.07),
               0 3px 9px -5px rgba(18,18,20,.32) !important;
    color:#15130F !important; }

  /* Jede Schrift zurueck auf dunkel */
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu,
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .s304-kb-kopf,
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .s304-kb-alle,
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .s304-pop__t,
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .s304-pdpb,
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu h1, P .s304-neu h2, P .s304-neu h3,
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu p, P .s304-neu span, P .s304-neu li, P .s304-neu dt, P .s304-neu dd{
    color:#15130F !important; }

  /* Kopfleiste weiss, Logo nicht umgedreht */
  html.s304-grund-34 body.template-product .header__mobile{
    background:#FFFFFF !important;
    backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
    box-shadow:0 10px 24px -18px rgba(18,18,20,.5) !important; }
  html.s304-grund-34 body.template-product .header__mobile .logo__img img,
  html.s304-grund-34 body.template-product .header__mobile .header__logo__link img{
    filter:none !important; }
  html.s304-grund-34 body.template-product .header__mobile svg{
    stroke:#15130F !important; color:#15130F !important; }

  /* Der Schliessen-Knopf und die Hauptaktion zurueck */
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .s304-pop .s304-pop__x{
    background:rgba(21,19,15,.06) !important; color:#15130F !important;
    box-shadow:inset 0 0 0 1px rgba(18,18,20,.08) !important; }
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .s304-pop .s304-blatt__cta{ background:#0A0A0A !important; }
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .s304-pop .s304-blatt__cta .tx,
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .s304-pop .s304-blatt__cta .pr,
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .s304-pop .s304-blatt__cta{ color:#FFFFFF !important; }
}

/* =======================================================================
   S304-FASSUNG-34-SCHRIFT-VOLLSTAENDIG-2409  (Nachtrag)
   ⛔ Nach dem ersten Wurf fehlten Preis und Bewertungszeile — sie fehlten
   nicht, sie standen WEISS AUF WEISS. Gemessen:
       .price.product__price.s304-preis   color rgb(255,255,255)
   Meine Aufzaehlung hatte nur h1/h2/h3/p/span/li/dt/dd — der Preis ist ein
   `div`. ⭐ Eine Liste von Tag-Namen ist keine Abdeckung.

   Jetzt alles, was Text traegt — und danach die dunklen Bedienelemente
   ausdruecklich wieder hell, sonst stuende Dunkel auf Schwarz.
   ======================================================================= */
@layer s304 {
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu :is(div,span,p,b,strong,em,small,i,a,label,li,dt,dd,td,th,
                   h1,h2,h3,h4,h5,figcaption,summary,time){
    color:#15130F !important; }

  /* Die dunklen Flaechen behalten helle Schrift */
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .btn--primary,
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .btn--solid,
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .s304-blatt__cta,
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .s304-kaufknopf,
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu [class*="cta"],
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .btn--primary *,
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .btn--solid *,
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .s304-blatt__cta *,
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu [class*="cta"] *{
    color:#FFFFFF !important; }

  /* Ausser der Schwebeleiste — die ist hell und traegt dunkle Schrift */
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .s304-cta-preis,
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .s304-leiste [class*="preis"]{
    color:#0B1616 !important; }
}

/* =======================================================================
   S304-FASSUNG-34-LETZTE-FUENF-2409
   Nach dem zweiten Wurf blieben acht Stellen unter Kontrast 3, gemessen mit
   einem Durchlauf ueber JEDES Textelement der Seite (Schrift gegen die
   naechste deckende Flaeche darueber). Fuenf Ursachen:

     span.c in .s304-gk-kopf        dunkel auf dunkel   (Marke auf schwarzem Grund)
     .s304-vk__pr *                 weiss auf hell      (Preise der Geschenkliste)
     .s304-vk__alle                 weiss auf hell
     .s304-cta-l                    weiss auf weiss     (Schwebeleiste)
     .rev-ai-btn-animated *         dunkel auf #1A1A1A  (KI-Zusammenfassung)

   ⭐ Zwei davon gehen in die ANDERE Richtung — sie sitzen auf dunklen
   Flaechen und brauchen weisse Schrift. Eine Fassung umzudrehen heisst
   nicht, alles dunkel zu faerben.
   ======================================================================= */
@layer s304 {
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .s304-gk-kopf .c,
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .s304-gk-kopf .c *,
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .rev-ai-btn-animated,
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .rev-ai-btn-animated *{
    color:#FFFFFF !important; }

  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .s304-vk__pr,
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .s304-vk__pr *,
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .s304-vk__alle,
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .s304-vk__alle *,
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .s304-cta-l,
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .btn__text .s304-cta-l{
    color:#15130F !important; }
}

/* =======================================================================
   S304-FASSUNG-GRUND-VOLLER-PFAD-2409  (Nachtrag)
   ⛔ Beim Ausliefern der Links geprueft: auf der PDP griff Fassung 30
   NICHT — der Grund blieb `s304-grund-t1.jpg`. Zwei Fehler von mir:

   1) Spezifitaet, zum vierten Mal heute. Der T1-Grund sitzt auf
      `html body.s304-neu-an.s304-seite.template-product::before` (4 Klassen),
      meine Regel hatte `html.s304-grund-30 body.template-product::before`
      (2 Klassen). Sie verlor, obwohl sie spaeter steht.
   2) Ein verirrter Nachfahren-Waehler (`… ::before` mit Leerzeichen) hat das
      Betonbild zusaetzlich auf `main.main-content` und `.product__page`
      gemalt — zwei unsichtbare Schichten, die niemand braucht.

   ⭐ Gefunden hat es die Positivkontrolle vor dem Weitergeben: „welches Bild
   liegt gerade im Grund?" Ohne sie haette Enzo einen Link bekommen, der
   T1 zeigt und 30 heisst.
   ======================================================================= */
@layer s304 {
  /* Die verirrten Schichten zuruecknehmen */
  html.s304-grund-30 body.template-product main.main-content::before,
  html.s304-grund-30 body.template-product .s304-neu.product__page::before{
    background-image:none !important; }

  /* 30 · Beton, mit dem vollen Pfad */
  html.s304-grund-30 body.s304-neu-an.s304-seite.template-product::before{
    background-image:url("s304-grund-30.jpg") !important; }
  html.s304-grund-30 body.s304-neu-an.s304-seite.template-product::after{
    background:linear-gradient(180deg, rgba(8,18,16,.40) 0%, rgba(8,18,16,.62) 100%) !important; }

  /* 34 · Hell, ebenfalls mit dem vollen Pfad */
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product{
    background:#FFFFFF !important; }
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product::before{
    background-image:none !important; background-color:#FFFFFF !important; }
}

/* =======================================================================
   S304-EIN-GOLDTRAEGER-2409
   Enzos Sorge, woertlich: „ich habe Angst, dass wir bei T1 das zu clean
   haben und dann geht der Grund, dass du kaufen sollst, unter."

   ⭐ GEMESSEN, und die Sorge stimmt — die Ursache ist eine andere als
   vermutet. Auf T1 haben ZWOELF deckende Flaechen denselben Kontrast zum
   Grund: **18,4, alle gleich**. Der Kaufknopf ist die groesste Flaeche
   (20.590 px²), aber nur **Platz 11 von 12**. Zwoelf gleich laute Stimmen.
   ⛔ Es liegt NICHT am dunklen Grund: Weiss auf Dunkel ist der staerkere
   Sprung als Schwarz auf Weiss. Es liegt daran, dass ALLES weiss auf
   dunkel ist. Dunkel ist die lautere Buehne — wenn man sie sparsam
   bespielt.

   ⛔ UND EINE KORREKTUR AM PLAN, vorher gerechnet: **Gold ist auf
   #0B1616 LEISER als Weiss** — 8,23 gegen 15,54. Gold allein macht den
   Knopf also nicht lauter. Die Salienz entsteht dadurch, dass die
   Trust-Pillen von Flaeche auf Umriss gehen (15,54 -> 1,0). Gold traegt
   die Marke, die Ruhe daneben traegt die Aufmerksamkeit.

   Schrift im Knopf: #0B1616. Auf dem dunkelsten Punkt des Verlaufs
   (#b8860b) sind das 5,66 — ueber der Schwelle von 4,5.
   ======================================================================= */
@layer s304 {

  /* 1 · Der einzige Goldtraeger der Seite: der Abschluss */
  html body.s304-neu-an.s304-seite.template-product .s304-neu .btn--solid,
  html body.s304-neu-an.s304-seite.template-product .s304-neu .btn--primary,
  html body.s304-neu-an.s304-seite.template-product .s304-neu .s304-blatt__cta,
  html body.s304-neu-an.s304-seite.template-product .s304-neu .s304-leiste .btn{
    background:var(--304-gold-grad, linear-gradient(90deg,#b8860b,#daa520,#ffd700,#daa520,#b8860b)) !important;
    background-size:200% 100% !important;
    box-shadow:0 10px 26px -14px rgba(218,165,32,.55) !important; }
  html body.s304-neu-an.s304-seite.template-product .s304-neu .btn--solid,
  html body.s304-neu-an.s304-seite.template-product .s304-neu .btn--solid *,
  html body.s304-neu-an.s304-seite.template-product .s304-neu .btn--primary,
  html body.s304-neu-an.s304-seite.template-product .s304-neu .btn--primary *,
  html body.s304-neu-an.s304-seite.template-product .s304-neu .s304-blatt__cta,
  html body.s304-neu-an.s304-seite.template-product .s304-neu .s304-blatt__cta *{
    color:#0B1616 !important; }

  /* 2 · Die Trust-Pillen werden Umriss statt Flaeche.
         Sie sagen weiter dasselbe, nur nicht mehr so laut wie der Abschluss. */
  html body.s304-neu-an.s304-seite.template-product .s304-neu .s304-trustzeile li{
    background:transparent !important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.28) !important;
    color:#FFFFFF !important; }
  html body.s304-neu-an.s304-seite.template-product .s304-neu .s304-trustzeile li .s304-tz__i{
    background:rgba(255,255,255,.82) !important; }
}

/* =======================================================================
   S304-KEIN-GOLD-2409
   Enzo, nachdem er es gesehen hat: „Nee, das gefaellt mir alles nicht.
   Gold sieht doch einfach richtig eklig aus."

   ⭐ Und die Messung gibt ihm recht, nicht nur der Geschmack:
   auf #0B1616 ist WEISS lauter als Gold — 15,54 gegen 13,13.
   Gold war nie der Hebel. Der Hebel war, dass die Trust-Pillen von
   Flaeche auf Umriss gingen (15,54 -> 1,0). Der bleibt.

   Kaufknopf also weiss mit dunkler Schrift: der staerkste Sprung, den
   diese Seite hergibt, und ohne eine zweite Farbe im Haus.
   ======================================================================= */
@layer s304 {
  html body.s304-neu-an.s304-seite.template-product .s304-neu .btn--solid,
  html body.s304-neu-an.s304-seite.template-product .s304-neu .btn--primary,
  html body.s304-neu-an.s304-seite.template-product .s304-neu .s304-blatt__cta,
  html body.s304-neu-an.s304-seite.template-product .s304-neu .s304-leiste .btn{
    background:#FFFFFF !important;
    background-image:none !important;
    box-shadow:0 12px 28px -16px rgba(0,0,0,.75) !important; }
  html body.s304-neu-an.s304-seite.template-product .s304-neu .btn--solid,
  html body.s304-neu-an.s304-seite.template-product .s304-neu .btn--solid *,
  html body.s304-neu-an.s304-seite.template-product .s304-neu .btn--primary,
  html body.s304-neu-an.s304-seite.template-product .s304-neu .btn--primary *,
  html body.s304-neu-an.s304-seite.template-product .s304-neu .s304-blatt__cta,
  html body.s304-neu-an.s304-seite.template-product .s304-neu .s304-blatt__cta *{
    color:#0B1616 !important; }
}

/* =======================================================================
   S304-HELLER-STANDARD-KACHELN-UND-CHECKOUT-2409
   Enzo, nach den drei Fassungen: „Lass uns einfach zurueckrudern und das
   hinbekommen, dass wir das alles auf einem weissen Hintergrund haben,
   aber die Kacheln sind trotzdem prominent und der Checkout auch in
   schwarz."

   Der helle Grund ist ab jetzt der STANDARD (Umschalter in s304-haus.js).
   T1, 30 und 34 bleiben ueber  erreichbar.

   ⛔ ZWEI SACHEN MUESSEN HIER KORRIGIERT WERDEN, sonst bricht es:
   1) Der Block S304-KEIN-GOLD-2409 macht den Kaufknopf WEISS — richtig auf
      dunklem Grund, auf weissem Grund unsichtbar. Hier wird er schwarz.
   2) Die Kachel-Praegnanz: der Schatten bleibt WEICHER ALS DIE LUECKE
      (9 < 12 px). Genau daran ist heute frueh der Halo entstanden, den
      Enzo rausgeworfen hat — ein Schatten, der breiter streut als der
      Zwischenraum, staut sich und wird zum Hof.
   ======================================================================= */
@layer s304 {

  /* 1 · Der Checkout wird schwarz, die Schrift darin weiss */
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .btn--solid,
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .btn--primary,
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .s304-blatt__cta,
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .s304-leiste .btn{
    background:#0B0B0B !important;
    background-image:none !important;
    box-shadow:0 10px 24px -14px rgba(11,11,11,.55) !important; }
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .btn--solid,
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .btn--solid *,
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .btn--primary,
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .btn--primary *,
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .s304-blatt__cta,
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .s304-blatt__cta *{
    color:#FFFFFF !important; }

  /* 2 · Die Trust-Pillen bleiben leiser als der Checkout —
         das war heute der gemessene Hebel (15,5 -> 1,0). */
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .s304-trustzeile li{
    background:transparent !important;
    box-shadow:inset 0 0 0 1px rgba(18,18,20,.16) !important;
    color:#15130F !important; }
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .s304-trustzeile li .s304-tz__i{
    background:#4A443E !important; }

  /* 3 · Die Karten praegnanter: klare Kante plus enger, tiefer Wurf */
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .s304-karte,
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .product__mobile-header,
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .s304-blk{
    background:#FFFFFF !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,1),
      0 0 0 1px rgba(18,18,20,.09),
      0 4px 9px -4px rgba(18,18,20,.30) !important; }
}


/* =======================================================================
   S304-HELLER-STANDARD-RESTFLAECHEN-2409  (Nachtrag)
   Nach der Umstellung auf den hellen Standard trugen fuenf Flaechen weiter
   das dunkle Glas aus T1 — auf weissem Grund ergibt das Grau:

     .header__mobile              rgba(12,24,22,.50)
     .s304-kopfversand            rgba(12,24,22,.50)
     .s304-vkopf                  rgba(12,24,22,.40)
     .product__block--buttons     rgba(12,24,22,.40)
     .s304-duo                    rgba(12,24,22,.44)

   Aufgezaehlt statt geraten: im Browser nach genau diesen Farbwerten
   gesucht. ⭐ CSS kann nicht nach berechneter Farbe waehlen — deshalb
   braucht es die Liste, und deshalb wird sie hier gemessen erzeugt.
   ======================================================================= */
@layer s304 {
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .header__mobile,
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .s304-kopfversand,
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .s304-vkopf,
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .product__block--buttons,
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .s304-huelle .s304-duo{
    background:#FFFFFF !important;
    backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
    box-shadow:0 0 0 1px rgba(18,18,20,.08), 0 4px 9px -4px rgba(18,18,20,.26) !important;
    color:#15130F !important; }
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .s304-kopfversand *,
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .s304-vkopf *,
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .s304-huelle .s304-duo *{
    color:#15130F !important; }

  /* Logo und Zeichen in der Kopfleiste zurueck auf dunkel */
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .header__mobile .logo__img img,
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .header__mobile .header__logo__link img{ filter:none !important; }
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .header__mobile svg{ stroke:#15130F !important; color:#15130F !important; }
}

/* =======================================================================
   S304-HELLER-STANDARD-SCHWEBELEISTE-2409  (Nachtrag)
   Letzte Stelle unter Kontrast 3, gefunden mit dem Durchlauf ueber jedes
   Textelement: `.s304-cta-l` („Beide in den Warenkorb") stand dunkel auf
   dem jetzt SCHWARZEN Knopf der Schwebeleiste — Kontrast 1,06.
   ⛔ Ursache war meine eigene Regel von vorhin: in Fassung 34 hatte ich
   `.s304-cta-l` auf dunkel gesetzt, weil die Leiste damals weiss war.
   Sie ist jetzt schwarz. **Eine Farbregel gilt nur so lange wie die
   Flaeche, auf der sie sitzt.**
   ======================================================================= */
@layer s304 {
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .btn .s304-cta-l,
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .btn .s304-cta-preis,
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu .s304-leiste .btn *{
    color:#FFFFFF !important; }
}

/* =======================================================================
   S304-PDP-ZURUECK-AUF-HELL-2409
   Enzo 24.09.: "bei der PDP ... das musst du wieder herstellen, wie wir das
   am Anfang hatten, da sind so ein paar Sachen umgerendert worden. Zum
   Beispiel die Kundenbewertung sind jetzt schwarz die Sterne oder Inner
   Circle, wenn es auf einmal grau geworden ist, dazu passt auch, auch."

   ⭐ URSACHE 1 — die Sterne. Gemessen, nicht vermutet: ein Stern ist KEIN
   Zeichen, sondern eine Trustpilot-Kachel: `.rev-tp-star--full` traegt
   `background:#1A1A1A` und darin steht eine WEISSE Glyphe. Meine
   Flaechenregel `... .s304-neu :is(div,span,p,...)` hat jeden Text auf
   #15130F gezogen — also auch die Glyphe. Schwarz auf Schwarz: der Stern
   verschwindet, uebrig bleiben schwarze Quadrate. Genau das sieht er.
   ⛔ Die Lehre: eine Sammelregel fuer "Text" trifft auch Zeichen, die
   Bildelemente sind. Vor jeder Sammelregel pruefen, was sonst noch Text ist.

   ⭐ URSACHE 2 — das Grau. Drei Abschnitte sind beim Wechsel auf den hellen
   Grund nicht mitgekommen und tragen weiter `rgba(12,24,22,.40)`:
   .s304-community (INNER CIRCLE FITS) · .s304-fits (DAZU PASST AUCH) ·
   .s304-hist (304SUPPLY HISTORY). Dunkles Glas ueber Weiss ergibt
   rgb(152,156,153) — Grau. Weisse Schrift darauf: Kontrast 2,78.
   ======================================================================= */
@layer s304 {

  /* -- 1) Die Sterne sind wieder Sterne --------------------------------- */
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product
    .rev-tp-star.rev-tp-star{
    color:#FFFFFF !important; }
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product
    .rev-tp-star--empty.rev-tp-star--empty{
    color:#999999 !important; background:#DDDDDD !important; }
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product
    .rev-tp-star--full.rev-tp-star--full{ background:#1A1A1A !important; }
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product
    .rev-tp-star--half.rev-tp-star--half{
    background:linear-gradient(90deg,#1A1A1A 50%,#DDDDDD 50%) !important; }

  /* -- 2) Die Bewertungskarten: weisse Karte mit heller Kante ------------ */
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product
    .rev-slider-card__inner.rev-slider-card__inner{
    background:#FFFFFF !important;
    border:1px solid rgba(21,19,15,.12) !important;
    box-shadow:0 2px 6px -3px rgba(18,18,20,.22) !important; }
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product
    .rev-slider-card.rev-slider-card{ background:transparent !important; }
  /* Die Abstufung im Text zurueck — eine Sammelregel hatte alles auf EINE
     Schwaerze gezogen, damit war die Hierarchie weg. */
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product
    .rev-slider-card__text.rev-slider-card__text{ color:#333333 !important; }
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product
    .rev-slider-card__date.rev-slider-card__date{ color:#8C8C8C !important; }
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product
    .rev-slider-card__verified.rev-slider-card__verified{
    color:var(--304-gold, #B8912F) !important; }
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product
    .rev-slider-card__author.rev-slider-card__author{ color:#1A1A1A !important; }

  /* -- 3) Die drei Abschnitte, die grau geblieben sind ------------------- */
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-community,
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-fits,
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-hist{
    background:#FFFFFF !important;
    backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,1),
      0 0 0 1px rgba(18,18,20,.09),
      0 4px 9px -4px rgba(18,18,20,.30) !important;
    color:#15130F !important; }

  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-community :is(h2,h3,h4,p,span,div,li,a,small,strong,b,em),
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-fits      :is(h2,h3,h4,p,span,div,li,a,small,strong,b,em),
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-hist      :is(h2,h3,h4,p,span,div,li,a,small,strong,b,em){
    color:#15130F !important; }

  /* Ausnahme: die Namensplaketten liegen AUF den Fotos — dort bleibt der
     dunkle Chip mit weisser Schrift richtig. */
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product
    .s304-community__name.s304-community__name{
    color:#FFFFFF !important; background:rgba(10,10,10,.86) !important; }
}

/* =======================================================================
   S304-AUSLAUF-IN-DEN-FOOTER-2409   (Produktseite)
   Enzo 24.09.: "lass uns bitte eine Mischung aus kuehles Papier und unten
   B1 langer Auslauf machen, das finde ich perfekt."

   Gemessen bei 402 px: `main.main-content` endet bei y=1873, der Footer
   beginnt bei y=1873 — dieselbe Kante auf den Pixel. Der Verlauf sitzt
   deshalb als Hintergrund von main, unten verankert: er liegt hinter jedem
   Inhalt, und der echte Footer bleibt unberuehrt.

   ⛔ WARUM `#MainContent` IM SELEKTOR STEHT — erste Fassung war wirkungslos:
   dasselbe Element heisst `main.main-content` UND `#MainContent`, und eine
   aeltere Regel `html body.s304-kat-an #MainContent{background:transparent
   !important}` traegt (1,1,2). Meine reine Klassenkette hatte (0,3,3) und
   verlor — **eine einzige ID schlaegt jede Zahl von Klassen.**
   ⭐ Gefangen hat das erst die Frage „welche Regel gewinnt WIRKLICH?";
   meine eigene Spezifitaets-Zaehlung hatte IDs gar nicht mitgezaehlt und
   meldete meine Regel als staerkste.

   ⛔ ABGERUNDETE ENDEN, nicht linear: die erste Fassung rampte gleich-
   maessig und klemmte bei 100 %. Genau an der Klemmstelle sieht das Auge
   ein Mach-Band — eine Kante, die farblich gar nicht da ist. Jetzt laeuft
   die Steigung an beiden Enden gegen null (oben .004/.015, unten
   .965/.995), die drei Stuetzpunkte aus Fassung B1 (29/59/83 %) bleiben.
   ⛔ Die Hoehe ist **46 %**, kein `min()`: gemessen an Enzos echtem
   iPhone-Screenshot stimmte der Verlauf dort nicht. `CSS.supports`
   meldete in MEINEM Chrome `true` — das ist mein Geraet, nicht seins.
   Ein Prozentwert kann jeder Browser, und er skaliert von selbst:
   lange Seite = langer Auslauf, kurze Seite = kurzer.
   (Frueher stand hier `min(820px, 55%)`, nicht fest:) auf einer kurzen
   Kategorieseite waeren 820 px fast die ganze Seite, und der dunkle Teil
   saesse schon oben.
   ======================================================================= */
@layer s304 {
  html.s304-grund-34 body.template-product main#MainContent.main-content,
  html.s304-grund-34 body.template-product main#MainContent,
  html.s304-grund-34 body.template-product #MainContent.main-content{
    background-image:linear-gradient(180deg,rgba(11,22,22,0) 0%,rgba(11,22,22,.004) 10%,rgba(11,22,22,.015) 20%,rgba(11,22,22,.026) 29%,rgba(11,22,22,.09) 40%,rgba(11,22,22,.16) 50%,rgba(11,22,22,.25) 59%,rgba(11,22,22,.40) 70%,rgba(11,22,22,.52) 78%,rgba(11,22,22,.64) 83%,rgba(11,22,22,.78) 89%,rgba(11,22,22,.90) 94%,rgba(11,22,22,.965) 97%,rgba(11,22,22,.995) 99%,rgba(11,22,22,1) 100%) !important;
    background-repeat:no-repeat !important;
    background-position:left bottom !important;
    background-size:100% 420px !important;
    background-attachment:scroll !important;
    background-color:transparent !important; }
}

/* =======================================================================
   S304-KLEBELEISTE-SCHWARZER-KNOPF-2409
   Enzo 24.09. am iPhone: "der CTA, auch der Stick-ATC CTA muss schwarz sein."

   GEMESSEN vorher: `cart-bar` trug `rgba(12,24,22,.72)` — dunkelgruenes Glas
   aus dem verworfenen Dunkel-Entwurf — und der Knopf DARIN war **weiss**.
   Auf der hellen Seite ist das genau verkehrt herum.

   ⛔ Erster Anlauf mit `html.s304-grund-34 body.template-product cart-bar`
   griff nicht: die aeltere Regel traegt `body.s304-neu-an.s304-seite.
   template-product` und kommt damit auf dieselbe Spezifitaet (0,3,3).
   Bei Gleichstand haette die spaetere gewinnen muessen — tat sie nicht.
   ⭐ Statt die Ursache weiter zu jagen: den **vollen Pfad** nehmen, der auf
   dieser Seite ohnehin ueberall gilt. (0,6,3) laesst keinen Zweifel.
   ======================================================================= */
@layer s304 {
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product cart-bar.cart-bar,
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .cart-bar{
    background:rgba(255,255,255,.94) !important;
    -webkit-backdrop-filter:blur(14px) saturate(1.1) !important;
    backdrop-filter:blur(14px) saturate(1.1) !important;
    box-shadow:0 -1px 0 rgba(18,18,20,.10), 0 -10px 24px -18px rgba(18,18,20,.35) !important;
    color:#15130F !important; }

  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product cart-bar.cart-bar .btn,
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product cart-bar.cart-bar button,
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .cart-bar .btn,
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .cart-bar button{
    background:#0A0A0A !important;
    background-color:#0A0A0A !important;
    color:#FFFFFF !important;
    -webkit-text-fill-color:#FFFFFF !important;
    border-color:#0A0A0A !important; }

  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product cart-bar.cart-bar .btn :is(span,div,p,strong,b),
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product cart-bar.cart-bar button :is(span,div,p,strong,b){
    color:#FFFFFF !important; -webkit-text-fill-color:#FFFFFF !important; }

  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product cart-bar.cart-bar > :is(span,div,p):not(.btn):not(button){
    color:#15130F !important; -webkit-text-fill-color:#15130F !important; }
}

/* =======================================================================
   S304-AESTHETIK-DURCHGANG-2409
   Enzo 24.09.: "ich will halt auch, dass du das alles mal aesthetisch
   verifizierst, dass du alles durchklickst, guckst, okay, was habe ich denn
   in der Vergangenheit kritisiert, wie sieht das jetzt aus."

   Geprueft gegen seine sechs stehenden Massstaebe. Zwei Funde auf der PDP:

   ⛔ 1 · VERSCHWENDETER PLATZ — sein haeufigster Vorwurf.
   Zwischen dem Bewertungsblock (endet 2647) und „INNER CIRCLE FITS"
   (beginnt 2743) lagen **96 px nichts**. Ursache gemessen:
   `.s304-neu.product__page` traegt `padding-bottom: 96px`. Alle anderen
   Bloecke der Seite stehen mit **10 px** Abstand zueinander.
   ⇒ auf 10 px. Die klebende Kaufleiste braucht das Polster nicht — sie
   liegt `fixed` und der Block endet mitten auf einer 4719 px langen Seite.

   ⛔ 2 · GLEICHE MASSE.
   `.s304-videos` lief **17 … 370**, jede andere Flaeche der Seite 16 … 371.
   Ein Pixel je Seite — genau die Art Abweichung, die ihm auffaellt.
   ======================================================================= */
@layer s304 {
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-neu.product__page,
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .product__page.s304-neu{
    padding-bottom:10px !important; }

  /* ⛔⛔ ZUM DRITTEN MAL DERSELBE FEHLER, und er steht schon zweimal in
     meinem Gedaechtnis: **ein Rand plus ein fremdes Polster ist nicht
     derselbe Rand.** Mein erster Anlauf setzte hier `margin: 16px` — und
     landete bei 33…354 statt 16…371, weil der TRAEGER
     `div.product__block.s304-karte.s304-vids` bereits auf 16…371 steht.
     ⭐ Erst messen, was der Traeger mitbringt. Hier: alles. Also Rand 0. */
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-videos{
    margin-left:0 !important; margin-right:0 !important;
    padding-left:0 !important; padding-right:0 !important;
    width:auto !important; max-width:none !important;
    box-sizing:border-box !important; }
}

/* =======================================================================
   S304-KEIN-WEISSER-SCHLEIER-HINTER-DER-LEISTE-2409
   Dasselbe Muster auf der Produktseite: `.cart-bar::before` malte einen
   Verlauf nach **#FFFFFF** hinter die Schwebeleiste — aus derselben Zeit,
   als die Leiste durchsichtig war. Seit sie heute selbst hell ist
   (`rgba(255,255,255,.94)`), ist der Schleier doppelt und legt sich
   ausserdem ueber den Auslauf ins Footer-Gruen.
   ======================================================================= */
@layer s304 {
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .cart-bar::before{
    display:none !important; content:none !important; background:none !important; }
}

/* =======================================================================
   S304-HISTORY-WIE-AM-ANFANG-2409
   Enzo 24.09.: „und jetzt, die 304supply History, mach die wieder wie ganz
   am Anfang."

   ⭐ DIE URFASSUNG IST BELEGT, nicht geraten — sie steht im Theme-Abzug vom
   04.09. (`section_timeline_aixhmx`):
     · senkrechter Zeitstrahl, **kein** Slider, **kein** Akkordeon
     · `.s304-hist__fill` = schwarze Linie, die beim Scrollen MITWAECHST
     · drei `.s304-hist__dot`, bei `.is-in` schwarz gefuellt + `scale(1.08)`
     · **alle drei Etappen gleichzeitig lesbar**
     · Einfahren per IntersectionObserver: `opacity 0→1`, `translateY(16px)→0`
   Und Enzo selbst am 22.09.: „304SupplyHistory soll auch ihre **coole
   Pagination** behalten, also diese **Scroll-Animation, die sie aktuell hat**."

   Seitdem kamen drei Schichten dazu, die hier zurueckgenommen werden:
     23.09. 00:36  die Sektion als eine Karte
     23.09. 18:03  Akkordeon (JS `historyAkkordeon()`, jetzt stillgelegt)
     23.09. 23:59  unverbundene Bubbles — `__dot` UND `__fill` auf `display:none`

   ⛔ WAS ICH NICHT ZURUECKNEHME, und warum:
   **die Karte um die Sektion.** In der Urfassung stand die History auf
   weissem Seitengrund, also unsichtbar umrandet. Heute ist der Grund
   `#F3F5F6` und JEDER andere Block der Seite ist eine weisse Karte. Ohne
   Karte waere die History der einzige Block ohne Kasten — gegen seine
   stehende Regel „eigenstaendige Kaesten" und „gleiche Masse".
   **Das ist eine Auslegung, keine Messung.** Wenn er die Karte auch weg
   will, ist es eine Zeile.
   ======================================================================= */
@layer s304 {
  /* -- der Zeitstrahl ist wieder ein Strahl ---------------------------- */
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-hist .s304-hist__track{
    display:block !important; gap:0 !important; position:relative !important; }

  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-hist .s304-hist__fill{
    display:block !important; }

  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-hist .s304-hist__dot{
    display:block !important; }

  /* -- jede Etappe wieder eine Zeile am Strahl, keine eigene Blase ------ */
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-hist .s304-hist__step{
    background:none !important;
    box-shadow:none !important;
    border:0 !important;
    border-radius:0 !important;
    margin:0 !important;
    animation:none !important; }

  /* -- alle drei Etappen offen ----------------------------------------- */
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-hist .s304-hist__text{
    display:block !important;
    grid-template-rows:none !important;
    height:auto !important; max-height:none !important;
    overflow:visible !important; opacity:1 !important;
    visibility:visible !important; }

  /* -- der Punkt muss IN die Karte ------------------------------------
     ⛔ Gemessen: `.s304-hist__dot` steht auf `left: -30px` und landete damit
     bei x=2,4 — die Karte beginnt bei 16. In der Urfassung gab es keine
     Karte, da ragte der Punkt auf den weissen Seitengrund und fiel nicht
     auf. Mit Karte ragt er heraus und wird an der Kante abgeschnitten.
     ⭐ Also: die Etappe bekommt links Platz, der Punkt setzt sich auf die
     Kante der Etappe — und trifft damit die Linie, die bei x=40 liegt. */
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-hist .s304-hist__step{
    padding-left:30px !important; }
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-hist .s304-hist__dot{
    left:0 !important; right:auto !important; }

  /* Die Linie muss DURCH die Punkte laufen. Gemessen: Punktmitte 41,
     Linienmitte 55 — 14 px daneben, weil die Fuellung ein `padding-left:14px`
     traegt. Ohne das Polster liegt sie bei 40, Mitte 41. */
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-hist .s304-hist__fill{
    padding-left:0 !important; padding-right:0 !important;
    left:7px !important; }
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-hist .s304-hist__track::before{
    left:7px !important; padding-left:0 !important; }

  /* -- falls doch noch ein Knopf im Baum steht: als Zeile darstellen ---- */
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-hist .s304-hist__knopf{
    display:block !important; width:100% !important;
    background:none !important; border:0 !important;
    padding:0 !important; text-align:left !important;
    cursor:default !important; pointer-events:none !important; }
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-hist .s304-hist__knopf::after,
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-hist .s304-hist__pfeil{
    display:none !important; content:none !important; }
}


/* ============== S304-HISTORY-ZIELPUNKT-2409 ==============
   Gemessen vorher: Jahr 11 px grau, Punkt 16 px weiss mit duennem Rand,
   Strahl 2 px flach. Der Abschnitt las sich wie ein Beipackzettel.
   Was sich aendert:
     - das JAHR wird zum Anker (groesser, gesperrt, dunkel)
     - die Punkte bekommen Tiefe (Ring + Wurf), der GELESENE leuchtet
     - der Zielpunkt HEUTE ist gefuellt - der Strahl laeuft nicht ins Leere
     - die Zahl bekommt die Groesse, die ihr zusteht
   ⛔ Bewusst NICHT angefasst: Bahn, Reihenfolge, Textgroesse, Abstaende -
   Enzo wollte den Zeitstrahl "wie ganz am Anfang". */
@layer s304 {
  /* --- das Jahr wird zum Anker --- */
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-hist .s304-hist__year,
  html body.template-product .s304-hist .s304-hist__year {
    font-size: 12.5px !important; letter-spacing: .20em !important;
    font-weight: 800 !important; color: #6E6B64 !important;
    margin-bottom: 3px !important; display: block !important;
  }
  /* --- Punkte bekommen Tiefe --- */
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-hist .s304-hist__dot,
  html body.template-product .s304-hist .s304-hist__dot {
    background: var(--s304-wahlfarbe, #123029) !important;
    border: 3px solid #FFFFFF !important;
    box-shadow: 0 0 0 1px rgba(18,18,20,.16), 0 3px 8px -3px rgba(18,18,20,.5) !important;
    transition: transform .34s cubic-bezier(.2,.8,.25,1),
                box-shadow .34s ease, background-color .34s ease !important;
  }
  /* --- der Punkt, den man gerade liest --- */
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-hist .s304-hist__step[data-nah="1"] .s304-hist__dot,
  html body.template-product .s304-hist .s304-hist__step[data-nah="1"] .s304-hist__dot {
    transform: scale(1.30) !important;
    box-shadow: 0 0 0 1px rgba(18,18,20,.2),
                0 0 0 7px rgba(18,18,20,.07),
                0 4px 12px -3px rgba(18,18,20,.55) !important;
  }
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-hist .s304-hist__step[data-nah="1"] .s304-hist__title,
  html body.template-product .s304-hist .s304-hist__step[data-nah="1"] .s304-hist__title {
    transition: color .34s ease !important;
  }
  /* --- der Zielpunkt HEUTE --- */
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-hist .s304-hist__step--ziel,
  html body.template-product .s304-hist .s304-hist__step--ziel { padding-bottom: 2px !important; }
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-hist .s304-hist__dot--ziel,
  html body.template-product .s304-hist .s304-hist__dot--ziel {
    background: #8A6B2F !important;
    box-shadow: 0 0 0 1px rgba(107,107,111,.34),
                0 0 0 7px rgba(107,107,111,.12),
                0 4px 12px -3px rgba(107,107,111,.55) !important;
  }
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-hist .s304-hist__step--ziel .s304-hist__year,
  html body.template-product .s304-hist .s304-hist__step--ziel .s304-hist__year {
    color: #8A6B2F !important;
  }
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-hist .s304-hist__zahlkasten,
  html body.template-product .s304-hist .s304-hist__zahlkasten {
    display: flex !important; flex-direction: column !important;
    align-items: flex-start !important; gap: 1px !important;
    margin-top: 1px !important;
  }
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-hist .s304-hist__zahl,
  html body.template-product .s304-hist .s304-hist__zahl {
    font-size: 40px !important; line-height: 1.02 !important;
    font-weight: 800 !important; color: var(--s304-wahlfarbe, #123029) !important;
    letter-spacing: -.02em !important; display: inline-flex !important;
    align-items: flex-start !important;
  }
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-hist .s304-hist__zahl b,
  html body.template-product .s304-hist .s304-hist__zahl b {
    font-size: 21px !important; font-weight: 700 !important;
    color: #8A6B2F !important; margin-left: 2px !important;
    margin-top: 3px !important;
  }
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-hist .s304-hist__zahltext,
  html body.template-product .s304-hist .s304-hist__zahltext {
    font-size: 11.5px !important; letter-spacing: .15em !important;
    font-weight: 700 !important; color: #8A837C !important;
    text-transform: uppercase !important;
  }
  /* --- der Strahl bekommt eine Richtung statt flachem Schwarz --- */
  html.s304-grund-34 body.s304-neu-an.s304-seite.template-product .s304-hist .s304-hist__fill,
  html body.template-product .s304-hist .s304-hist__fill {
    background: linear-gradient(#15130F 0%, #3A342B 62%, #8A6B2F 100%) !important;
    width: 2px !important;
  }
}
/* ============== ENDE S304-HISTORY-ZIELPUNKT-2409 ============== */


/* ================= S304-DIE-KOPFLEISTE-IST-AUCH-GLAS-2509 =================
   Enzo: "auf der pdp sind immer noch fehler." ⭐ Im Bild gefunden: die
   Leiste "Gratisversand ab 80,00 EUR" liegt MITTEN AUF der Ueberschrift
   "WIE FUNKTIONIERT 1 KAUFEN · 1 GESCHENKT?" - und weil sie durchsichtig
   ist, schimmert die Ueberschrift hindurch. Das liest sich wie ein Defekt.

   ⛔ ZWEI EIGENE FEHLER AUF DEM WEG HIERHER, beide lehrreich:
   1. Ich habe die Regel zuerst in s304-haus.css geschrieben, mit
      `html body .s304-kopfversand` (0,1,2) und `body[class][class]`
      (0,3,2). Die echte Regel steht hier und traegt `.theme__header`
      im Pfad: **(0,5,2)**. Meine verlor - "es steht spaeter" hilft in
      derselben @layer nicht.
   2. Meine Gegenprobe suchte `12,24,22` im AUSGELIEFERTEN CSS und fand
      **0 Treffer** - woraus ich schloss, der Wert komme gar nicht aus
      meinen Blaettern, ich haette ein zweites Element erwischt. Falsch:
      Shopify liefert minifiziert aus und schreibt die Farbe anders.
      ⭐ **Bei jedem 0 zuerst die Abfrage pruefen, nicht die Sache** -
      und eine Gegenprobe gehoert an die QUELLE, nicht an das Kompilat.

   Hier also (0,6,2) durch die verdoppelte Endklasse, an derselben Stelle
   wie das Original. Farbe aus dem Haus, dieselbe Familie wie Menuegrund
   und Footer-Traeger. */
@layer s304 {
  html body.s304-neu-an.s304-seite.template-product .theme__header .s304-kopfversand.s304-kopfversand,
  html body.template-product .theme__header .s304-kopfversand.s304-kopfversand {
    background: #13201F !important;
    background-image: linear-gradient(#172625, #101B1A) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: #F4F6F5 !important;
    box-shadow: 0 8px 18px -14px rgba(0,0,0,.75) !important;
  }
}
/* ================= ENDE S304-DIE-KOPFLEISTE-IST-AUCH-GLAS-2509 ================= */


/* ================= S304-ANKERSPRUENGE-LANDEN-UNTER-DEM-KOPF-2509 =================
   ⭐ GEMESSEN 25.09. im Bild: springt man zu einem Abschnitt (Aufklapper,
   Anker, Zuruecksetzen der Seite), landet dessen Ueberschrift UNTER dem
   festen Kopf plus der Versandleiste - sichtbar blieb nur die obere Haelfte
   von "WIE FUNKTIONIERT 1 KAUFEN · 1 GESCHENKT?".
   Kopf endet bei CSS-y 52, die Leiste reicht bis 80. Mit Luft: 96 px.
   `scroll-margin-top` kostet nichts und wirkt nur beim Springen - das
   normale Scrollen bleibt unveraendert. */
@layer s304 {
  html body.template-product .s304-frage,
  html body.template-product .s304-fragen,
  html body.template-product .s304-karte,
  html body.template-product .shopify-section,
  html body.template-product [id]:not(html):not(body) {
    scroll-margin-top: 96px !important;
  }
}
/* ================= ENDE S304-ANKERSPRUENGE-LANDEN-UNTER-DEM-KOPF-2509 ================= */


/* ================= S304-WEG-MIT-DEN-KAESTEN-2509 =================
   Enzo 25.09. 01:25, DREIMAL derselbe Wunsch:
     P4 *„dass jedes einzelne Video alleine steht, ohne dass dahinter so ein
         grosser Kasten ist"*
     P6 *„Inner Circle Fits genau das gleiche. Ich will da nicht so einen
         Kasten herum haben"*
     P7 *„Dudes dazu passt auch nicht so ein Kasten"*
   Dazu W1 *„Ich will den [Warenkorb] auch nur weiss haben, wie in unserem
   Artefakt"*.

   ⛔ DAS KORRIGIERT MEINE EIGENE AUSLEGUNG. Enzos aeltere Regel lautete
   *„eigenstaendige Kaesten statt einem grossen Rechteck"* - gerichtet gegen
   EIN durchgehendes Rechteck. Ich habe daraus gemacht: alles einrahmen.
   Ergebnis waren Karten in Karten. Gemeint war das Gegenteil von dem, was
   ich gebaut habe: **ruhige weisse Flaeche, der Inhalt steht frei darauf.**

   Gemessen vorher: `.s304-fits` und `.s304-community` je
   `background: rgb(255,255,255)`, `border-radius: 22px`, Polster 12/13.
   Auf weissem Seitengrund ist dieser Kasten ohnehin unsichtbar - er kostet
   nur Rand und erzeugt die Schachtelung. */
@layer s304 {
  html body.s304-neu-an.s304-seite.template-product .s304-fits,
  html body.s304-neu-an.s304-seite.template-product .s304-community,
  html body.s304-neu-an.s304-seite.template-product .s304-videos,
  html body.template-product.template-product .s304-fits,
  html body.template-product.template-product .s304-community,
  html body.template-product.template-product .s304-videos {
    background: none !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Der Inhalt behaelt die Hausflucht 16 … 386, auch ohne Kasten. */
  html body.s304-neu-an.s304-seite.template-product .s304-fits > *, html body.s304-neu-an.s304-seite.template-product .s304-community > *,
  html body.template-product.template-product .s304-fits > *, html body.template-product.template-product .s304-community > * {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Und das einzelne Video traegt keinen eigenen Schleier mehr. */
  html body.s304-neu-an.s304-seite.template-product .s304-videos .swiper-slide,
  html body.template-product.template-product .s304-videos .swiper-slide {
    background: none !important;
    box-shadow: none !important;
  }
}
/* ================= ENDE S304-WEG-MIT-DEN-KAESTEN-2509 ================= */


/* ================= S304-WEG-MIT-DEN-KAESTEN-TEIL2-2509 =================
   Nachtrag zu S304-WEG-MIT-DEN-KAESTEN-2509. ⛔ Der erste Anlauf traf das
   KIND (`.s304-videos`) - der Kasten ist aber der ELTERNTEIL:
   `product__block s304-karte s304-vids`, weiss, Radius 22, Inset-Highlight.
   Gemessen ueber die Elternkette, nicht geraten.

   ⛔ Und `.s304-fits` / `.s304-community` haben GAR KEINE Karte - sie sind
   selbst die weissen Bloecke. Meine Suche nach Regeln mit `background`
   lieferte fuer sie `[]`, obwohl `getComputedStyle` Weiss meldet; die Suche
   ueber `e.matches(r.selectorText)` scheitert an langen Selektorlisten.
   Deshalb hier mit voller Spezifitaet statt weiterer Sucherei.

   ⭐ Welche Karten BLEIBEN (bewusst): Produktkopf, Vertrauensleiste,
   History, Produktdaten, Fragen, Bewertungen. Enzo hat drei Kaesten
   genannt, nicht alle. */
@layer s304 {
  html body[class][class][class].template-product .s304-karte.s304-vids,
  html body[class][class][class].template-product .s304-karte:has(.s304-videos),
  html body[class][class][class].template-product .s304-fits.s304-fits,
  html body[class][class][class].template-product .s304-community.s304-community {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  /* Ohne Kasten braucht es auch kein Innenpolster mehr - der Inhalt steht
     dann selbst auf der Hausflucht 16 … 386. */
  html body[class][class][class].template-product .s304-karte.s304-vids,
  html body[class][class][class].template-product .s304-fits.s304-fits,
  html body[class][class][class].template-product .s304-community.s304-community {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
/* ================= ENDE S304-WEG-MIT-DEN-KAESTEN-TEIL2-2509 ================= */


/* ================= S304-WIE-IM-LIVE-THEME-2509 =================
   Enzo 25.09.: *„P3 kannst du einfach gucken, welche Logik haben wir da beim
   aktuellen Theme, weil da funktioniert es gut … auch unser Bewertungswidget
   waechst zum Beispiel im aktuellen Theme nicht … Du kannst dich einfach
   daran inspirieren."*
   ⭐ Getan: Live-Theme 188690432381 und Arbeitskopie im selben Browser
   nebeneinander gemessen. Beide Ursachen standen im Unterschied.

   ── P1: die Symbole im Liefer-Block ──────────────────────────────
   LIVE:   stroke rgb(90,84,80)   -> grau, sichtbar
   ARBEIT: stroke rgb(255,255,255) -> WEISS auf weissem Grund
   ⛔ Sie waren nie „weg". Als dieser Block noch dunkel war, waren weisse
   Symbole richtig; seit der Grund weiss ist, sind sie unsichtbar.
   **Dasselbe Muster wie bei den Trustpilot-Sternen am 24.09.** — eine
   Farbregel ueberlebt den Untergrund, fuer den sie gemacht wurde.

   ── P5: warum das Bewertungs-Widget waechst ──────────────────────
   LIVE:   .rev-slider-track { transition: transform .4s }
   ARBEIT: .rev-slider-track { transition: transform .4s, height .32s }
   ⛔ Die Hoehe wird MITANIMIERT - deshalb wippt der Kasten bei jedem Wisch.
   Dazu steht der Track auf `align-items: flex-start`, wodurch jede Karte
   ihre eigene Hoehe behaelt (Live: alle 405 px gleich).
   Fix nach Live-Vorbild: keine Hoehen-Animation, Karten auf gleiche Hoehe. */
@layer s304 {
  /* --- P1 --- */
  html body[class][class][class].template-product .km-delivery-wrap svg,
  html body[class][class][class].template-product .km-delivery-outer svg {
    color: #5A5450 !important;
    stroke: #5A5450 !important;
  }
  html body[class][class][class].template-product .km-delivery-wrap svg [stroke]:not([stroke="none"]),
  html body[class][class][class].template-product .km-delivery-outer svg [stroke]:not([stroke="none"]) {
    stroke: #5A5450 !important;
  }
  html body[class][class][class].template-product .km-delivery-wrap svg [fill]:not([fill="none"]),
  html body[class][class][class].template-product .km-delivery-outer svg [fill]:not([fill="none"]) {
    fill: #5A5450 !important;
  }

  /* --- P5 --- */
  html body[class][class][class].template-product .rev-slider-track {
    transition: transform .4s ease !important;
    align-items: stretch !important;
  }
  html body[class][class][class].template-product .rev-slider-card,
  html body[class][class][class].template-product .rev-slider-card__inner {
    height: auto !important;
  }
  html body[class][class][class].template-product .rev-slider-container {
    transition: none !important;
  }
}
/* ================= ENDE S304-WIE-IM-LIVE-THEME-2509 ================= */


/* ================= S304-R8-R9-WIE-IM-LIVE-2509 =================
   R9 — *„Bewertung aendert immer noch seine Hoehe."*
   ⛔ MEIN EIGENER FIX WAR DIE URSACHE. Gegen das Wippen hatte ich am 25.09.
   `height: auto !important` auf `.rev-slider-card` gesetzt — damit behaelt
   JEDE Karte ihre eigene Hoehe. Gemessen:
     LIVE   kartenHoehen [405]            -> alle gleich
     ARBEIT kartenHoehen [352, 295, 277]  -> drei verschiedene
   Der Behaelter folgt der jeweils sichtbaren Karte, also springt er.
   ⭐ Richtig ist das Gegenteil: die Karten muessen sich STRECKEN, damit der
   Behaelter eine feste Hoehe hat. Dafuer ist `align-items: stretch` am
   Track da — `height:auto` hebelt es aus.

   R8 — *„die Edelstahl, Ohne Risiko, 14 Tage testen … die haben die
   Trust-Icons nicht mehr."*
   ⛔ Gemessen: die Icons SIND da (1 svg + 2 img, wie live). Dasselbe Muster
   wie bei P1 — sie sind weiss auf weissem Grund. Hier bekommen sie dieselbe
   Farbe wie im Live-Theme. */
@layer s304 {
  /* --- R9 --- */
  html body[class][class][class][class].template-product .rev-slider-card {
    height: auto !important;
    align-self: stretch !important;
  }
  html body[class][class][class][class].template-product .rev-slider-card__inner {
    height: 100% !important;
  }
  html body[class][class][class][class].template-product .rev-slider-track {
    align-items: stretch !important;
    transition: transform .4s ease !important;
  }

  /* --- R8 --- */
  html body[class][class][class][class].template-product .s304-trust svg,
  html body[class][class][class][class].template-product .s304-trust img,
  html body[class][class][class][class].template-product .s304-karte.s304-trust svg,
  html body[class][class][class][class].template-product .s304-karte.s304-trust img {
    color: var(--s304-wahlfarbe, #123029) !important;
    stroke: var(--s304-wahlfarbe, #123029) !important;
    opacity: 1 !important;
    filter: none !important;
  }
  html body[class][class][class][class].template-product .s304-trust svg [stroke]:not([stroke="none"]) { stroke: var(--s304-wahlfarbe, #123029) !important; }
  html body[class][class][class][class].template-product .s304-trust svg [fill]:not([fill="none"])     { fill:   var(--s304-wahlfarbe, #123029) !important; }
}
/* ================= ENDE S304-R8-R9-WIE-IM-LIVE-2509 ================= */


/* ================= S304-R4-R5-R6-FUSSBEREICH-2509 =================
   R6 — *„den Cross-Fade-Effekt, dieses Gruene aus dem Footer noch ein
   bisschen weiter hochziehen"*: der Auslauf geht von 300 auf **420 px**.

   R4 — *„die letzten Produkte auf einer Produktseite sind immer unten
   abgeschnitten von diesem Fade-Effekt"*
   ⛔ Derselbe Fall wie auf der Kategorieseite: der Verlauf liegt als
   Hintergrund auf `main` und frisst sich von unten in den Inhalt. Und
   weil R6 ihn LAENGER macht, wuerde es ohne Gegenmassnahme schlimmer.
   ⭐ Deshalb bekommen die letzten Inhaltsbloecke denselben deckenden Grund
   wie das Kachelgitter, mit weichem Ausklang UNTER dem letzten Block.

   R5 — *„Instagram und TikTok noch 8px hoeher"*. */
@layer s304 {
  /* --- R4: die Bloecke stehen auf eigenem Grund, der Verlauf bleibt dahinter --- */
  html body[class][class][class].template-product .s304-neu.product__page {
    background-color: #FFFFFF !important;
    background-image: linear-gradient(to bottom,
        #FFFFFF 0px,
        #FFFFFF calc(100% - 150px),
        rgba(255,255,255,.96) calc(100% - 130px),
        rgba(255,255,255,.86) calc(100% - 108px),
        rgba(255,255,255,.70) calc(100% - 86px),
        rgba(255,255,255,.50) calc(100% - 64px),
        rgba(255,255,255,.28) calc(100% - 40px),
        rgba(255,255,255,.10) calc(100% - 18px),
        rgba(255,255,255,0)   100%) !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    padding-bottom: 160px !important;
  }

  /* --- R5: die Symbole 8 px hoeher --- */
  html body[class][class][class] .menu-304__footer-socials,
  html body[class][class][class] footer [class*="social"],
  html body[class][class][class] .footer-sections [class*="social"] {
    position: relative !important;
    top: -8px !important;
  }
}
/* ================= ENDE S304-R4-R5-R6-FUSSBEREICH-2509 ================= */





/* ================= S304-DIE-LETZTEN-FUENF-WARMEN-2509 =================
   R3 — *„Und es ist immer noch beige."*
   152 warme Schattenfarben sind ueber drei Anlaeufe neutralisiert. Diese
   fuenf blieben uebrig, und die Quelltextsuche fand sie nicht — mein
   Suchmuster war zu eng gebaut.
   ⭐ Statt weiter zu suchen: direkt an den beiden Klassen, die die Messung
   im Browser genannt hat. Der Browser weiss besser, was gilt, als mein
   Regex ueber die Quelle.
     .product__thumb.s304-mini__k.is-active  rgb(21,19,15)
     .s304-vk__b                             rgb(122,106,88)  (4x) */
@layer s304 {
  html body[class][class][class][class] .product__thumb.s304-mini__k,
  html body[class][class][class][class] .product__thumb.s304-mini__k.is-active {
    box-shadow: 0 0 0 2px rgba(20,20,22,.92) !important;
  }
  html body[class][class][class][class] .s304-vk__b {
    box-shadow: 0 2px 6px -3px rgba(108,108,112,.42) !important;
  }
}
/* ================= ENDE S304-DIE-LETZTEN-FUENF-WARMEN-2509 ================= */


/* ================= S304-BILDER-FUELLEN-WIE-LIVE-2509 =================
   Enzo 25.09. 03:01: *„Die Bilder sind immer noch 16:9, dabei brauchen wir
   die quadratisch … vergleichen mit dem aktuellen Live-Theme."*
   Und: *„Es muss eigentlich nur ein anderes Aussehen bekommen, aber nicht
   die Logik neu."*

   ⛔ ICH HABE ZWISCHEN ZWEI FEHLERN HIN- UND HERGESCHALTET:
     `cover`   -> Walletchain-Karabiner oben abgeschnitten (sein Punkt K2)
     `contain` -> hochformatige Model-Fotos stehen als Streifen in der
                  Kachel, mit grauen Balken daneben (sein Punkt jetzt)
   Beide Male war eine der beiden Beschwerden erfuellt und die andere nicht.

   ⭐ DAS LIVE-THEME HAT DIE ANTWORT, UND SIE IST KEINE VON BEIDEN:
     object-fit: cover  +  object-position: 70% center  +  scale(.92)
   Es fuellt (Enzos Hauptwunsch) UND verschiebt den Ausschnitt so, dass das
   Wichtige drin bleibt. Fuer hochformatige Bilder nehme ich `center top` —
   dann bleiben die Karabiner oben stehen, statt weggeschnitten zu werden.
   **Live-Logik uebernehmen, nur die Position anpassen.** */
@layer s304 {
  html body.s304-kat-an.s304-kat-an.template-collection .grid > grid-item.product-item .product-item__image.product-item__image img, html body.s304-kat-an.s304-kat-an.template-collection .grid > grid-item.product-item .product-item__image.product-item__image .fit-cover,
  html body.template-collection.template-collection .grid > grid-item.product-item.product-item .product-item__image.product-item__image img, html body.template-collection.template-collection .grid > grid-item.product-item.product-item .product-item__image.product-item__image .fit-cover {
    object-fit: cover !important;
    object-position: 50% 32% !important;
    transform: scale(0.96) !important;
    width: 100% !important;
    height: 100% !important;
  }
  html body.s304-kat-an.s304-kat-an.template-collection .grid > grid-item.product-item .product-item__image.product-item__image .product-item__bg,
  html body.template-collection.template-collection .grid > grid-item.product-item.product-item .product-item__image.product-item__image .product-item__bg {
    background-size: cover !important;
    background-position: 50% 32% !important;
  }
}
/* ================= ENDE S304-BILDER-FUELLEN-WIE-LIVE-2509 ================= */


/* ================= S304-KEIN-PLAYBUTTON-2509 =================
   Enzo 25.09.: *„jetzt haben die Videos einen Playbutton."*
   ⛔ Im Chrome gemessen: `controls: false`, `paused: false` — alle drei
   laufen ohne Bedienelemente. Der Knopf ist also KEIN Element von uns.
   ⭐ Es ist Safaris `-webkit-media-controls-start-playback-button`: iOS
   zeigt ihn, wenn es ein `autoplay` verweigert. Das passiert unter anderem
   **im Stromsparmodus** — auf Enzos Screenshot ist der Akku gelb.
   Das heisst: das Autoplay-Attribut ist richtig gesetzt, iOS laesst es nur
   gerade nicht zu. Der Knopf wird ausgeblendet, damit kein totes
   Bedienelement auf dem Bild klebt. */
@layer s304 {
  video::-webkit-media-controls-start-playback-button,
  video::-webkit-media-controls-play-button,
  video::-webkit-media-controls-panel,
  video::-webkit-media-controls {
    display: none !important;
    -webkit-appearance: none !important;
    opacity: 0 !important;
  }
  video::-internal-media-controls-overlay-cast-button { display: none !important; }
}
/* ================= ENDE S304-KEIN-PLAYBUTTON-2509 ================= */


/* ================= S304-ZURUECK-AUF-LIVE-2509 =================
   Drei Punkte aus Enzos Liste sind KEINE Fehler des Themes, sondern
   Abweichungen, die ich eingebaut habe. Gemessen im Live-Theme
   188690432381, gleicher Browser, 402x874:

   | Enzos Beschwerde | LIVE | meine Arbeitskopie |
   |---|---|---|
   | „jedes Thumbnail schwarz umrandet" | **kein einziges** traegt Rand, Outline oder Schatten — auch das aktive nicht | Rand gesetzt |
   | „es spielt nur das erste Video" | 1 von 4 laeuft, drei auf `preload:none` — **so gebaut** | ich hatte alle drei gestartet |
   | „grauer Schleier bei den Bewertungen" | `.pdp-reviews-member-row` ist **transparent** | Schleier gesetzt |

   ⭐ Enzo: *„müssen wir die Logik übernehmen, die wir im Live-Theme haben."*
   Also zurueck auf die Live-Werte. */
@layer s304 {
  /* --- kein Rand an Thumbnails, wie live --- */
  html body[class][class][class][class][class].template-product .product__thumb,
  html body[class][class][class][class][class].template-product .product__thumb.is-active,
  html body[class][class][class][class][class].template-product .product__thumb.s304-mini__k,
  html body[class][class][class][class][class].template-product .product__thumb.s304-mini__k.is-active,
  html body[class][class][class][class][class].template-product .product__thumb__link {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
  }
  /* --- kein Schleier an den Bewertungen, wie live --- */
  html body[class][class][class][class][class].template-product .pdp-reviews-member-row,
  html body[class][class][class][class][class].template-product .rev-slider-card,
  html body[class][class][class][class][class].template-product .rev-slider-card__inner {
    background-color: transparent !important;
    background-image: none !important;
  }
}
/* ================= ENDE S304-ZURUECK-AUF-LIVE-2509 ================= */


/* ================= S304-ENZOS-DREI-VOM-2609 =================
   Enzo 26.09., drei Punkte von der PDP.

   1 · *„dieses 304er Edelstahl, wasserfest, ein Jahr Garantie — das kann noch
       ein bisschen schwaerzer oder ein bisschen prominenter."*
   Gemessen: die drei Punkte stehen als `<li>` bei y 222 in **9 px**, Gewicht
   700, Farbe rgb(21,19,15). Neun Pixel sind auf einem iPhone die Groesse, in
   der man Kleingedrucktes setzt — nicht die, in der man ein Versprechen setzt.
   ⇒ 9 → 11,5 px, echtes Schwarz, mehr Abstand zwischen den Punkten.

   2 · *„bei den Bewertungen unten die Pagination finde ich irgendwie bloed.
       Muss gar keine rein."*
   Gemessen: `.rev-slider-dots`, 342 x 36 px bei y 2439. Wird ausgeblendet —
   der Streifen bleibt wischbar, nur die Punkte verschwinden.
   ⛔ `display:none` statt `visibility:hidden`, sonst bleiben 36 px Luft stehen.

   3 · *„unten der Schatten ist so grad wenig abgeschnitten, das finde ich doof."*
   Ein Schatten wird abgeschnitten, wenn der Traeger `overflow:hidden` hat und
   der Schatten ueber seine Kante hinausreicht. Bei einem WISCH-Streifen darf
   man `overflow` aber nicht einfach freigeben — dann wandert der Inhalt aus dem
   Fenster. ⇒ stattdessen unten Polster, damit der Schatten Platz im Traeger hat. */
@layer s304 {

  /* 1 · die Trust-Punkte werden lesbar */
  html body.template-product.template-product.template-product.template-product.template-product.template-product.template-product .s304-trust li,
  html body.template-product.template-product.template-product.template-product.template-product.template-product.template-product [class*="trust"] li,
  html body.template-product.template-product.template-product.template-product.template-product.template-product.template-product .s304-neu .s304-trust li {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #0A0A0A !important;
    letter-spacing: .01em !important;
  }
  html body.template-product.template-product.template-product.template-product.template-product.template-product.template-product .s304-trust,
  html body.template-product.template-product.template-product.template-product.template-product.template-product.template-product [class*="trust"] ul {
    gap: 14px !important;
  }

  /* 2 · keine Punkte unter den Bewertungen */
  html body.template-product.template-product.template-product.template-product.template-product.template-product.template-product .rev-slider-dots,
  html body .rev-slider-dots {
    display: none !important;
  }

  /* 3 · der Schatten bekommt Platz, ohne dass der Streifen ausbricht */
  html body.template-product.template-product.template-product.template-product.template-product.template-product.template-product .rev-slider,
  html body.template-product.template-product.template-product.template-product.template-product.template-product.template-product [class*="rev-slider"]:not(.rev-slider-dots) {
    padding-bottom: 14px !important;
  }
}
/* ================= ENDE S304-ENZOS-DREI-VOM-2609 ================= */


/* ================= S304-FARBE-AN-DER-KACHEL-UND-AM-KNOPF-2609 =================
   Enzo 26.09.: *„Punkt und Name … lasst uns die Farben ganz normal machen:
   dunkelblau, weiss, dunkelgruen und rot"* · *„welche Variante man auswaehlt,
   so wird dann auch der Warenkorb-Knopf"* · *„das Trust soll ja immer in einer
   Reihe sein — so ist das gut."*

   ⛔ ICH LAG FALSCH und Enzo hatte recht: ich hatte behauptet, das 2-fuer-1
   stehe versteckt unter dem Kaufknopf. An der echten Seite gemessen:
       Geschenk-Kacheln y 721 · Sticky-ATC y 810 · Kaufknopf y 964
   Die Auswahl steht also VOR dem Knopf. Die „Position 10 von 16" galt dem
   Aufklapper *„Wie funktioniert 1 kaufen 1 geschenkt"* — ein anderer Block.
   Ich hatte eine fremde Angabe uebernommen, statt hinzusehen.

   ⭐ Die Farbnamen stehen in den Shopify-TAGS, nicht hier. Die Tabelle im JS
   wird daraus erzeugt; wer eine Farbe aendert, aendert den Tag. */
@layer s304 {

  /* 1 · die Trust-Zeile bleibt IMMER einreihig und wird gefuellt */
  html body.template-product.template-product.template-product.template-product.template-product.template-product.template-product .s304-trustzeile {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    align-items: stretch !important;
  }
  /* ⛔ 26.09. 12:18 — Enzo: *„die Trust-Icons sind ein bisschen zu dick."*
     Gemessen war `padding: 8px 6px` bei `font-size: 10.5` ⇒ Hoehe rund 31 px.
     Jetzt 5,5 px Polster und 10 px Schrift ⇒ rund 24 px. Gefuellt bleibt es
     (das war der Fortschritt), nur schlanker. */
  html body.template-product.template-product.template-product.template-product.template-product.template-product.template-product .s304-trustzeile li {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    /* ac2 30.09. Enzo: „grau-hell transparent, sonst zu viele Widgets" -
       vorher #0B1616 deckend mit weisser Schrift. */
    background: rgba(21,19,15,.05) !important;
    color: #5F5A55 !important;
    border: 1px solid rgba(21,19,15,.08) !important;
    border-radius: 99px !important;
    padding: 4.5px 6px !important;
    font-size: 10px !important;
    font-weight: 650 !important;
    letter-spacing: .005em !important;
    white-space: nowrap !important;
    text-align: center !important;
    line-height: 1.15 !important;
    /* ⛔ Nach dem Polster-Fix blieb die Hoehe bei 32 px statt 24 — eine
       Mindesthoehe aus dem Theme hielt sie. Deshalb hier ausdruecklich. */
    min-height: 0 !important;
    height: auto !important;
  }
  html body.template-product.template-product.template-product.template-product.template-product.template-product.template-product .s304-trustzeile li svg,
  html body.template-product.template-product.template-product.template-product.template-product.template-product.template-product .s304-trustzeile li img {
    width: 11px !important; height: 11px !important; flex: 0 0 11px !important;
    filter: brightness(0) opacity(.62) !important;
  }

  /* 2 · Punkt und Name unter jeder Geschenk-Kachel */
  html body.template-product.template-product.template-product.template-product.template-product.template-product.template-product .s304-farbzeile {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    margin-top: 3px !important;
    font-size: 9px !important;
    font-weight: 650 !important;
    color: #5F5A55 !important;
    letter-spacing: .01em !important;
    line-height: 1.2 !important;
  }
  html body.template-product.template-product.template-product.template-product.template-product.template-product.template-product .s304-farbzeile i {
    width: 8px !important; height: 8px !important; flex: 0 0 8px !important;
    border-radius: 50% !important;
    box-shadow: 0 0 0 1px rgba(0,0,0,.18) !important;
  }

  /* 3 · (entfernt) — die Knopffarbe steht jetzt an EINER Stelle:
         im Block S304-ENZOS-LISTE-2609-GRUEN in s304-haus.css. Diese Regel
         hier war die schwaechere von zweien und hatte keine Wirkung. */
}
/* ================= ENDE S304-FARBE-AN-DER-KACHEL-UND-AM-KNOPF-2609 ================= */


/* ================= S304-ENZOS-VIER-0415-2609 =================
   Enzo 26.09. 04:15, vier Punkte vom Screenshot.

   1 · *„jetzt sind die Icons halt auch schwarz, die Emojis muessen weiss sein."*
   ⛔ Mein Block davor faerbte nur `svg` und `img` in der Trustzeile. Gemessen:
   **es gibt dort weder svg noch img.** Die Icons sind **leere Spans**:
       <span aria-hidden="true" class="s304-tz__i s304-tz__i--stahl"></span>
   Sie tragen ihr Bild ueber CSS. Deshalb hier BEIDE Wege: `filter` fuer einen
   `background-image`, `background-color` fuer eine `mask`. Einer trifft immer.
   ⇒ Familie „drei Dinge, die eine DOM-Suche nie findet".

   2 · *„jetzt sieht man die Farbe nicht richtig, weil das ist jetzt in zwei
   Zeilen."* Gemessen: die Zeile ist 79 px breit (= Kachelbreite) und 22 px hoch,
   also zweizeilig. „Dunkelblau · verstellbar" passt dort nicht.
   ⭐ **„verstellbar" wandert an die Ueberschrift.** Es gilt fuer ALLE vier
   Kacheln gleichermassen — an jeder einzelnen zu stehen macht es nicht
   informativer, nur enger. Unten bleibt Punkt + Farbe, einzeilig. */
@layer s304 {

  /* 1 · die Trust-Symbole werden weiss — beide Bauweisen abgedeckt */
  html body.template-product.template-product.template-product.template-product.template-product.template-product.template-product .s304-trustzeile .s304-tz__i {
    /* ac2 30.09.: Icons grau statt weiss - auf hellem Grund waeren weisse unsichtbar.
       Beide Bauweisen: brightness(0)+opacity fuer ein Hintergrundbild, Farbe fuer eine Maske. */
    filter: brightness(0) opacity(.62) !important;
    background-color: #5F5A55 !important;
    color: #5F5A55 !important;
    opacity: 1 !important;
  }

  /* 2 · die Farbzeile bleibt einzeilig */
  html body.template-product.template-product.template-product.template-product.template-product.template-product.template-product .s304-farbzeile {
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    font-size: 9.5px !important;
    gap: 4px !important;
    overflow: visible !important;
  }
  html body.template-product.template-product.template-product.template-product.template-product.template-product.template-product .s304-farbzeile i { width: 9px !important; height: 9px !important; flex: 0 0 9px !important; }

  /* 4 · der Kasse-Knopf im Warenkorb: Marken-Gruen statt Schwarz, Preis rechts */
  /* (verschoben) — die Kasse-Regel stand hier und war WIRKUNGSLOS:
     `s304-pdp.css` wird auf /cart gar nicht eingebunden. Gemessen ueber
     `document.styleSheets`. Sie liegt jetzt in s304-haus.css, die ueberall
     geladen wird. ⇒ Vor jeder „greift nicht"-Suche zuerst fragen:
     **ist die Datei auf dieser Seite ueberhaupt da?** */
  html body .s304-endpreis {
    float: right !important;
    font-weight: 700 !important;
    opacity: 1 !important;
  }
}
/* ================= ENDE S304-ENZOS-VIER-0415-2609 ================= */


/* ================= S304-ENZOS-VIER-1400-2609 =================
   Enzo 26.09. 14:00, vier Punkte.

   1 · *„bei Kundenbewertung ist da noch so ein grauer, komischer Schleier
       hinter den Sternen."* Gemessen: `.rev-heading-row` traegt
       `background: rgba(21,19,15,0.043)` — ein 4-Prozent-Schleier ueber der
       ganzen Zeile. Genau das sieht man.
   2 · *„die Bewertungen sind unten abgeschnitten."* Gemessen:
       `.rev-slider-container` ist **410 px hoch mit `overflow:hidden`**, die
       Karte darin 396. Die Karte passt — ihr INHALT nicht. Deshalb hier
       Hoehe frei statt fest.
   3 · *„der normale CTA auf der Seite, den haette ich gerne auch Caps-Lock."*
   4 · *„koennen wir dann auch oben den Header, dieses abgerundete Ding, in
       der gleichen Farbe machen"* — wie der Kaufknopf, nach der gewaehlten
       Geschenkfarbe. Die Variable `--s304-wahlfarbe` gibt es bereits; der
       Kopf haengt sich jetzt daran. Ohne Auswahl bleibt es beim Marken-Gruen. */
@layer s304 {

  /* 1 · kein Schleier hinter den Sternen */
  html body.template-product.template-product.template-product.template-product.template-product.template-product.template-product .rev-heading-row,
  html body .rev-heading-row {
    background: transparent !important;
    background-color: transparent !important;
  }

  /* 2 · die Bewertungen duerfen ihre Hoehe selbst bestimmen */
  html body.template-product.template-product.template-product.template-product.template-product.template-product.template-product .rev-slider-container,
  html body .rev-slider-container {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    /* ⭐ 26.09. abends — HIER TREFFEN ZWEI WUENSCHE VON ENZO AUFEINANDER,
       und beide sind berechtigt:
         frueher  *„die Bewertungen sind unten abgeschnitten"*  ⇒ overflow:visible
         jetzt    *„es soll immer eine Bewertung einfach nur da sein"*
                  ⇒ die Nachbarkarten duerfen nicht hereinragen

       `visible` loeste das erste und verursachte das zweite: der Traeger ist
       342 px breit, die Spur enthaelt fuenf Karten zu je 342 px, und bei
       `visible` zeichnet der Browser auch, was ueber die Kante hinausragt.

       ⇒ `hidden` schneidet seitlich ab. Abgeschnitten wird unten trotzdem
       nichts, weil `height:auto` die Hoehe vom Inhalt nehmen laesst und das
       Polster dem Kartenschatten Platz INNERHALB der Kante gibt.
       ⛔ `overflow-x:hidden` mit `overflow-y:visible` waere der naheliegende
       Weg und funktioniert NICHT: setzt man eine Achse auf hidden, macht CSS
       aus der anderen automatisch `auto` — dann hat der Block wieder eine
       eigene Bildlaufleiste.
       ⛔ Der Wechsel selbst war nie kaputt: gemessen Karte 1→2→3 etwa alle
       8 s, die Punkte darunter laufen mit. */
    overflow: hidden !important;
    padding-bottom: 16px !important;
  }
  html body.template-product.template-product.template-product.template-product.template-product.template-product.template-product .rev-slider-container > *,
  html body .rev-slider-container > * {
    height: auto !important;
    min-height: 0 !important;
  }

  /* 3 · der Kaufknopf auf der Seite in Grossbuchstaben */
  html body.template-product.template-product.template-product.template-product.template-product.template-product.template-product .s304-cta,
  html body.template-product.template-product.template-product.template-product.template-product.template-product.template-product .s304-cta.btn,
  html body.template-product.template-product.template-product.template-product.template-product.template-product.template-product .btn.btn--solid.s304-cta,
  html body.template-product.template-product.template-product.template-product.template-product.template-product.template-product button[name="add"],
  html body.template-product.template-product.template-product.template-product.template-product.template-product.template-product button[name="add"] * {
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
  }

  /* 4 · der Kopf nimmt dieselbe Farbe wie der Kaufknopf */
  html body.template-product.template-product.template-product.template-product.template-product.template-product.template-product header.theme__header .header__mobile {
    background-color: var(--s304-wahlfarbe, #0A0A0A) !important;
    transition: background-color .25s ease !important;
  }
}
/* ================= ENDE S304-ENZOS-VIER-1400-2609 ================= */




/* ═══ S304-INNER-CIRCLE-PDP-WIE-LIVE-2709 ═══════════════════════════════
   Enzo 27.09., drei Saetze zu den Essentials-Produktseiten:
     E1 *„auf den Produkten steht ja Inner Circle, das muss aber genauso GOLD
         sein wie in unserem alten Theme und auf der PDP"*
     E3 *„die Trust-Icons sollen auch auf den Essentials-Seiten raus, da soll
         einfach nur beispielsweise 304W stehen und dann rechts in der Ecke
         halt genau dieses Only Inner Circle, wie auf der Produktseite"*

   ⭐ AM LIVE-THEME ABGELESEN (`/products/304-santos`, ohne preview-Parameter):
       Titel links, daneben eine **goldene Fahne** „ONLY INNER CIRCLE"
       **keine** Trust-Chips
       kein Preis
   In der Arbeitskopie stand die Fahne **schwarz** und die drei Trust-Chips
   darunter — gemessen: `304er Edelstahl · Wasserfest · 1 Jahr Garantie`.

   ⛔ NUR fuer Produkte mit dem Tag `Inner Circle`. Die Trust-Zeile ist auf
   allen anderen Seiten Enzos ausdruecklicher Wunsch vom 26.09. — wer sie
   global ausblendet, nimmt sie auch den Bracelets und Walletchains.
   Traeger ist `body.s304-ic-produkt`, gesetzt aus dem Liquid heraus.
   ═══════════════════════════════════════════════════════════════════════ */
/* ⛔ 27.09.: die gewinnende Regel ist `html body .s304-neu .s304-trustzeile`
   mit `display:flex !important` — sie nennt `.s304-neu` als Zwischenstufe.
   Meine erste Fassung liess die aus und verlor trotz mehr Klassen, weil der
   Selektor dann gar nicht passte. Jetzt derselbe Pfad, nur spezifischer. */
html body[class][class][class][class].s304-ic-produkt .s304-neu .s304-trustzeile,
html body[class][class][class][class].s304-ic-produkt .s304-trustzeile,
html body.s304-ic-produkt.s304-ic-produkt.s304-ic-produkt .s304-neu .s304-trustzeile{
  display: none !important;
}
html body[class][class][class][class] .s304-ic-fahne{
  display: inline-flex !important;
  align-items: center !important;
  background: #c8a96e !important;
  color: #1a1408 !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  padding: 7px 14px !important;
  border-radius: 99px !important;
  white-space: nowrap !important;
}
/* die bestehende schwarze Fahne auf Gold ziehen, falls sie aus dem Theme kommt */
html body[class][class][class][class].s304-ic-produkt .s304-titel + *[class*="ic-"],
html body[class][class][class][class].s304-ic-produkt [class*="only-inner"],
html body[class][class][class][class].s304-ic-produkt .ic-collection-badge{
  background: #c8a96e !important;
  color: #1a1408 !important;
  border-radius: 99px !important;
  clip-path: none !important;
}

/* ═══ E2 · das runde Widget, wie im Live-Theme ══════════════════════════
   Enzo: *„auf der PDP soll dann auch das stehen, was auf unserem Live-Theme
   ist, sozusagen als RUNDES WIDGET halt, von wegen das ist nur was fuer den
   Inner Circle."*
   Live gemessen: weisser Kasten, **goldener Rahmen**, Schloss-Symbol in Gold,
   Satz „Dieses Produkt ist nur fuer den Inner Circle bestimmt.", dunkler Knopf
   „JETZT ZUM INNER CIRCLE →", darunter der Textlink „Andere Produkte ansehen".
   ═══════════════════════════════════════════════════════════════════════ */
html body[class][class][class][class] .s304-ic-sperre{
  display: block !important;
  margin: 18px 16px 8px !important;
  padding: 26px 20px 22px !important;
  background: #FFFFFF !important;
  border: 1px solid #c8a96e !important;
  border-radius: 22px !important;
  text-align: center !important;
  box-shadow: 0 10px 30px rgba(11,22,22,.07) !important;
}
html body[class][class][class][class] .s304-ic-sperre svg{
  width: 34px !important; height: 34px !important;
  stroke: #c8a96e !important; margin: 0 auto 14px !important; display: block !important;
}
html body[class][class][class][class] .s304-ic-sperre p{
  font-size: 16px !important; font-weight: 600 !important; line-height: 1.35 !important;
  color: #141414 !important; margin: 0 0 18px !important;
}
/* ⛔ 27.09.: die Schriftfarbe im Knopf wurde von einer Theme-Regel ueberschrieben
   (dunkel auf dunkel, im Bild kaum lesbar). Mit demselben Selektorpfad
   spezifischer gesetzt — und zusaetzlich am Kind, weil der Text in einem
   span liegen kann. */
html body[class][class][class][class] .s304-ic-sperre a.s304-ic-knopf,
html body[class][class][class][class] .s304-ic-sperre a.s304-ic-knopf *{
  color: #FFFFFF !important;
}
html body[class][class][class][class] .s304-ic-sperre a.s304-ic-knopf{
  display: block !important; background: #1a2230 !important; color: #fff !important;
  font-size: 12.5px !important; font-weight: 700 !important; letter-spacing: .1em !important;
  text-transform: uppercase !important; padding: 16px 18px !important;
  border-radius: 14px !important; text-decoration: none !important;
}
html body[class][class][class][class] .s304-ic-sperre a.s304-ic-mehr{
  display: inline-block !important; margin-top: 16px !important;
  font-size: 13px !important; color: #6a6a6a !important;
  text-decoration: underline !important;
}


/* ⭐ 27.09. — DIE BESTEHENDE FAHNE WIRD GOLDEN, statt eine zweite daneben.
   Enzo: *„auf den Produkten steht ja Inner Circle, das muss aber genauso GOLD
   sein wie in unserem alten Theme und auf der PDP."*
   Im Bild standen kurzzeitig ZWEI Fahnen uebereinander — meine goldene und die
   schwarze aus dem Theme. Die eigene ist wieder raus, hier wird die vorhandene
   umgefaerbt. Sie traegt keine eigene Klasse, deshalb ueber den Text-Inhalt
   nicht moeglich — Traeger ist die Position direkt hinter dem Titel. */
/* ⭐ 27.09. — die Fahne heisst `.ic-only-tag`. Gemessen: `SPAN.ic-only-tag`
   in `.pdp-reviews-member-row`, `background rgb(21,19,15)`, radius 99,
   `clip-path: polygon(8px 0, 100% 0, …)` — ein schraeg angeschnittenes Band.
   ⛔ Mein erster Selektor (`.s304-titel ~ *:not(ul):not(div)`) traf sie nicht;
   sie liegt eine Ebene tiefer in einer eigenen Zeile. **Erst das Element
   benennen lassen, dann den Selektor schreiben** — nicht ueber die Position
   raten. */



/* === S304-SPERRKASTEN-WIE-LIVE-2709 =====================================
   Die Regeln zum Block oben, WORTGLEICH aus sections/product.liquid uebernommen.
   Sie greifen ueber `body:has(.ic-only-tag)` — also nur dort, wo die goldene
   Fahne steht. Auf einer normalen Produktseite gibt es die Fahne nicht, also
   bleibt die Seite frei. Das ist die eingebaute Positivkontrolle, und ich pruefe
   sie gleich am lebenden Objekt: icy-stellar muss kaufbar bleiben. */
.ic-pagelock{ display: none; }
.ic-lock-veil{ display: none !important; }
body:has(.ic-only-tag) .ic-pagelock{
      display: flex;
      align-items: center;
      justify-content: center;
      position: fixed;
      inset: 0;
      


      z-index: 2000;
      background: rgba(17, 16, 14, .72);
      -webkit-backdrop-filter: blur(3px);
      backdrop-filter: blur(3px);
      cursor: pointer;
      padding: 24px;
      box-sizing: border-box;
    }
body:has(.ic-only-tag) .ic-pagelock .ic-lock-card{
      position: relative;
      left: auto;
      top: auto;
      width: min(520px, 100%);
      padding: 34px 34px 30px;
      



    }
body:has(.ic-only-tag) .ic-pagelock .ic-lock-ico{
      width: 38px;
      height: 38px;
      margin-bottom: 16px;
    }
body:has(.ic-only-tag) .ic-pagelock .ic-lock-text{
      font-size: 19px;
      line-height: 1.4;
      margin: 0 0 10px;
    }
body:has(.ic-only-tag) .ic-pagelock__alt{
      display: inline-block;
      margin-top: 14px;
      font-size: 13px;
      letter-spacing: .04em;
      color: rgba(255,255,255,.68);
      text-decoration: underline;
      text-underline-offset: 3px;
    }
body:has(.ic-only-tag) .ic-pagelock__alt:hover{
      color: #ffffff;
    }
body:has(.ic-only-tag) .ic-pagelock__sub{
      font-size: 13.5px;
      line-height: 1.55;
      margin: 0 0 20px;
      color: rgba(237, 233, 227, .68);
    }
"> <div class="ic-lock-card"> <div class="ic-lock-ico">{%- comment -%}


/* === S304-SCHLOSS-GOLD-2709 ==================================
   Das Schloss im Sperrkasten war WEISS AUF WEISSER KARTE — im Bild sah man
   nur eine leere Flaeche ueber dem Text. Gemessen: `stroke rgb(255,255,255)`,
   LIVE hat `rgb(218,165,32)`.
   ⭐ Der weisse Strich stammt aus der Zeit, als der Kasten dunkel war. Ein
   Wert, der zu einem Grund passte, den es nicht mehr gibt — dieselbe Sorte
   Fehler wie der Thumbnail-Ausgleich von -16px bei 30px Rand.
   Das SVG zeichnet mit `stroke="currentColor"`, also reicht die Textfarbe. */
html body[class][class][class][class] .ic-pagelock .ic-lock-ico,
html body[class][class][class][class] .ic-pagelock .ic-lock-ico svg{
  color:#DAA520 !important;
  stroke:#DAA520 !important;
}


/* === S304-SCHLOSS-UND-EINMAL-2709 ======================================
   Zwei Reste aus dem Sperrkasten-Einbau, beide am BILD gefunden, nicht an
   Zahlen.

   1 · DAS SCHLOSS WAR WEISS AUF WEISSER KARTE.
   Gemessen `stroke rgb(255,255,255)`, LIVE hat `rgb(218,165,32)`.
   Mein erster Versuch zielte auf `.ic-lock-ico svg` - und verlor, weil die
   gegnerische Regel (@194285, `… .s304-karte svg [stroke]:not([stroke="none"])`)
   die KINDER des SVG trifft, also `rect` und `path`. Ein Selektor auf das
   Eltern-Element erreicht sie nicht.
   ⭐ Die Lehre ist dieselbe wie beim Anzeigebalken und beim aria-label:
   ich habe ein Element gefaerbt, das aehnlich heisst wie das, welches die
   Farbe traegt. Hier faerbt nicht das `svg`, sondern was darin gezeichnet wird.

   2 · DER SPERRKASTEN STEHT SIEBENMAL IM DOM.
   Der Block sitzt in der Galerie-Schleife, also einmal je Produktbild.
   Am Bild faellt es nicht auf - alle sieben sind `position:fixed` und liegen
   exakt uebereinander. Gefunden nur, weil ich sie GEZAEHLT habe.
   ⛔ Die Liquid-Verschachtelung an dieser Stelle ist krumm (ein `endfor`
   liegt INNERHALB des zugehoerigen `if`). Solange der Shop live gehen soll,
   greife ich da nicht hinein - hier wird nur die Anzeige bereinigt.
   ⭐ OFFEN und bewusst so: die Ursache bleibt. Der richtige Ort waere hinter
   dem `endfor`, und das gehoert in eine ruhige Minute, nicht vor den Livegang.
   ======================================================================= */

html body[class][class][class][class] .ic-pagelock .ic-lock-ico svg,
html body[class][class][class][class] .ic-pagelock .ic-lock-ico svg *,
html body[class][class][class][class] .ic-pagelock .ic-lock-ico svg [stroke]{
  stroke:#DAA520 !important;
  color:#DAA520 !important;
}

/* nur der erste Sperrkasten wird gezeigt; die sechs Geschwister bleiben stumm */
html body[class][class][class][class] .ic-pagelock ~ .ic-pagelock{
  display:none !important;
}


/* === S304-SPERRKASTEN-IN-DEN-FLUSS-2709 ================================
   Enzo 27.09.: "der sollte ja unterhalb des Produktbildes sein, also so wie
   es bei dem Live Theme noch ist."

   ⛔ MEIN DENKFEHLER, nicht mein Messfehler: Ich hatte am Live-Theme
   `position:fixed; inset:0; z-index:2000` ausgelesen - der Wert stimmt. Daraus
   habe ich geschlossen, Live sperre die ganze Seite mit einem Schleier, und
   genau das gebaut. Enzo sieht aber einen Kasten im Fluss. Ein `fixed`-Element
   landet in einem full-page-Screenshot an einer Stelle, die nichts darueber
   sagt, wo ein Leser es wahrnimmt - ich habe einen Messwert als Absicht gelesen.

   ⭐ Der Block ist im Liquid bereits aus der Galerie-Schleife geholt; im Fluss
   waeren sieben Kaesten untereinander sichtbar gewesen.
   Der Schleier faellt damit weg: was im Fluss steht, muss nichts verdecken.
   ======================================================================= */

html body[class][class][class][class] .ic-pagelock,
html body[class][class][class][class]:has(.ic-only-tag) .ic-pagelock{
  position:static !important;
  inset:auto !important;
  z-index:auto !important;
  background:transparent !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  display:block !important;
  padding:0 !important;
  margin:18px 0 6px !important;
  cursor:auto !important;
}
html body[class][class][class][class] .ic-pagelock .ic-lock-card{
  width:auto !important;
  max-width:100% !important;
  margin:0 !important;
  padding:26px 22px 22px !important;
  border-radius:22px !important;
  text-align:center !important;
}
/* die Geschwister-Regel von vorhin wird nicht mehr gebraucht: der Block steht
   jetzt genau einmal im Dokument. Sie bleibt trotzdem stehen - sie kostet
   nichts und faengt den Fall ab, falls jemand den Block wieder vervielfacht. */