/** Shopify CDN: Minification failed

Line 20:82 Unexpected "*"
Line 20:98 Unterminated string token
Line 24:19 Unexpected "2"

**/
/* assets/vh-v2.css — WP-P16a: alle Stile der V2-Test-PDP (mammaly-Muster). Geladen aus
   sections/vh-v2-hero.liquid NACH vh-brand.css (Tokens) — Reihenfolge wie im Brief §1 verlangt
   ("wird von vh-v2-hero.liquid nach vh-brand.css geladen"). N-56 weist vh-buy-box.liquid als
   "einzige Ladestelle" von vh-brand.css/vh-pdp.js aus — V2 lässt vh-buy-box.liquid komplett weg
   (Brief §7 Verboten-Liste), deshalb übernimmt vh-v2-hero.liquid diese Rolle für das V2-Template.

   WICHTIGER BEFUND (Protokoll Abschnitt 6): vh-buy-box.liquid trägt in einem eigenen {%- style -%}-
   Block Basis-Boxmodelle, die NICHT in vh-brand.css stehen — u. a. .vh-chipgroup/.vh-chip (Basis),
   .vh-tier__img/__stock/__summary, .vh-buybox__abo:empty, .vh-price [hidden]/.vh-tier [hidden],
   .visually-hidden, .vh-trust-strip. Weil §2 des Briefs snippets/vh-buy-box-waehler.liquid UNVERÄNDERT
   wiederverwendet (rendert exakt diese Klassen) und dieses V2-Template vh-buy-box.liquid nicht lädt,
   fehlten diese Regeln sonst komplett — der Wähler wäre unstrukturiert. Nachgebaut, aber NICHT unter
   den V1-eigenen Klassennamen allein (das widerspräche §6 "nur vh-v2-*/vh-sheet*"), sondern als
   Verbund-Selektor mit vh-sheet als Anker (".vh-sheet .vh-chip{...}") — jede Regel dieser Datei hat
   dadurch eine vh-v2-*/vh-sheet*-Klasse als führenden/verankernden Selektor, so wie vh-brand.css selbst
   fast alles unter .vh-scope verankert. Einzige bewusste Ausnahme: .breadcrumb-main{display:none} —
   Brief §3 Punkt 2 verlangt wörtlich genau diese Regel (identisch zu V1) zum Ausblenden des
   Layout-Breadcrumbs; dokumentiert, kein vh-v2-Selektor möglich, weil das Ziel eine Theme-Klasse ist.
*/

/* ---------- Layout-Breadcrumb ausblenden (Brief §3 Punkt 2, wortgleich zu V1 vh-buy-box.liquid) ---------- */
.breadcrumb-main{display:none}

/* ---------- Body-Scroll sperren, waehrend ein Sheet offen ist (vh-v2.js setzt/entfernt die Klasse) ---------- */
html.vh-sheet-open{overflow:hidden}

/* ---------- Fold-Grid (Bauvorlage: .vh-buybox aus vh-buy-box.liquid, N-97) ---------- */
.vh-v2-fold{display:grid;grid-template-areas:"hero" "titel" "rating" "usp" "stimme" "cta";grid-template-columns:minmax(0,1fr);gap:var(--space-6);max-width:var(--container-shop);margin:0 auto;padding:10px var(--space-4) var(--space-10)}
@media(min-width:900px){
  .vh-v2-fold{grid-template-areas:"hero titel" "hero rating" "hero usp" "hero stimme" "hero cta";grid-template-columns:480px minmax(0,1fr);column-gap:var(--grid-gap);align-items:start;padding-left:var(--space-8);padding-right:var(--space-8)}
}
@media(min-width:1200px){.vh-v2-fold{grid-template-columns:480px minmax(0,1fr)}}
.vh-v2-fold > * { min-width: 0; }
.vh-v2-hero{grid-area:hero}
.vh-v2-kopf{grid-area:titel}
.vh-v2-rating{grid-area:rating}
.vh-v2-usp-row{grid-area:usp}
.vh-v2-stimme{grid-area:stimme}
@media(min-width:900px){.vh-v2-hero{position:sticky;top:16px}}

/* ---------- Hero-Karte: Stage links, 4 Icon-Kacheln rechts, Thumbs darunter ----------
   ABWEICHUNG (Protokoll Abschnitt 6): snippets/vh-galerie.liquid rendert Stage+Thumbs als EIN
   Flex-Column-Element (.vh-galerie). Ohne die Datei zu ändern (verboten) und ohne display:contents
   (§8 Punkt 3 verboten) lässt sich die Thumb-Leiste nicht aus .vh-galerie herauslösen, um über die
   volle Kartenbreite unter BEIDEN Spalten (Stage+Kacheln) zu laufen, wie im mammaly-Vorbild. Die
   Kompromisslösung: .vh-galerie bildet die linke ~68%-Spalte (Stage UND Thumbs zusammen), die
   Kacheln bilden die rechte ~32%-Spalte — die Thumb-Leiste bleibt dadurch unter der Stage, aber
   innerhalb der 68%-Spalte statt kartenbreit. Sauberer als eine spekulative JS-DOM-Verschiebung
   (nicht Teil des JS-Auftrags §5) oder ein Verbotsverstoß. */
.vh-v2-hero__card{background:var(--surface-card);border-radius:var(--radius-card);padding:var(--space-3);display:flex;gap:var(--space-3);align-items:flex-start;min-width:0}
.vh-v2-hero__gallery{flex:0 1 68%;min-width:0;max-width:100%}
.vh-v2-hero__kacheln{flex:0 1 32%;min-width:0;max-width:100%;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.vh-v2-kachel{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;padding:8px 4px;border:var(--border-width) solid var(--border-default);border-radius:var(--radius-card);background:var(--surface-page);min-width:0}
.vh-v2-kachel__ic{width:22px;height:22px;display:inline-flex;color:var(--color-green-deep)}
.vh-v2-kachel__ic svg{width:22px;height:22px}
.vh-v2-kachel__label{font-size:12px;line-height:1.25;color:var(--text-body);font-family:var(--font-label);font-weight:var(--weight-medium)}
/* Kacheln nur bei Slide 1 sichtbar (Brief §3 Punkt 1); ohne :has()-Support bleiben sie sichtbar (Fallback, kein Fehlzustand).
   Anker ist .vh-v2-hero__card (gemeinsamer Vorfahre), nicht .vh-galerie direkt: .vh-galerie liegt eine
   Ebene tiefer in .vh-v2-hero__gallery und ist damit KEIN Geschwister von .vh-v2-hero__kacheln — ein
   Geschwister-Kombinator (~) auf .vh-galerie selbst würde hier nie greifen. */
.vh-v2-hero__card:has(.vh-galerie__img[data-slide="1"].is-active) .vh-v2-hero__kacheln{display:grid}
.vh-v2-hero__card:has(.vh-galerie__img.is-active:not([data-slide="1"])) .vh-v2-hero__kacheln{display:none}
@media(max-width:559px){.vh-v2-hero__card{padding:var(--space-2);gap:8px}.vh-v2-kachel{padding:6px 3px}}

/* ---------- Titel-Block ---------- */
.vh-v2-kopf{display:flex;flex-direction:column;gap:6px;min-width:0;text-align:left}
.vh-v2-kopf .vh-v2-h1{font-size:30px;line-height:1.12;margin:0}
@media(min-width:900px){.vh-v2-kopf .vh-v2-h1{font-size:40px}}
.vh-v2-claim{font-family:var(--font-body);font-size:17px;line-height:1.4;color:var(--text-soft);margin:0}
.vh-v2-intro{font-size:16px;line-height:1.5;color:var(--text-soft);margin:2px 0 0;max-width:62ch}

/* ---------- Bewertungszeile ---------- */
.vh-v2-rating{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 12px;border:var(--border-width) solid var(--border-default);border-radius:var(--radius-card);background:var(--surface-card)}
/* Sterne-Optik kommt aus der bestehenden .vh-stars-Regel (vh-brand.css Zeile ~442) — hier bewusst
   nicht dupliziert, das Markup nutzt die Klasse direkt (vh-v2-*-Vorgabe gilt für NEUE Regeln). */
.vh-v2-rating__lines{display:flex;flex-direction:column;gap:2px;min-width:0}
.vh-v2-rating__line1{font-size:14px;color:var(--text-body);font-weight:var(--weight-medium)}
.vh-v2-rating__line2{font-size:13px;color:var(--text-muted)}
.vh-v2-rating__more{display:inline-flex;align-items:center;gap:6px;flex:none;border:var(--border-width-strong) solid var(--border-default);border-radius:var(--radius-pill);padding:8px 14px;font-family:var(--font-label);font-weight:var(--weight-bold);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-body);background:var(--surface-card)}
.vh-v2-rating__more svg{width:16px;height:16px}
.vh-v2-rating__more:hover{background:var(--color-mint-shop)}

/* ---------- USP-Reihe: mobil Scroll-Snap, Desktop 5 Spalten ---------- */
.vh-v2-usp-row{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;padding:2px 2px 6px;min-width:0;max-width:100%}
.vh-v2-usp{flex:0 0 150px;scroll-snap-align:start;display:flex;flex-direction:column;gap:6px;padding:var(--space-3);border:var(--border-width) solid var(--border-default);border-radius:var(--radius-card);background:var(--surface-card);min-width:150px}
.vh-v2-usp__ic{width:28px;height:28px;border-radius:var(--radius-pill);background:var(--color-mint-shop);color:var(--color-green-deep);display:grid;place-items:center}
.vh-v2-usp__ic svg{width:18px;height:18px}
.vh-v2-usp__label{font-family:var(--font-label);font-weight:var(--weight-bold);font-size:12px;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-body);margin:0;line-height:1.3;overflow-wrap:anywhere;hyphens:auto}
.vh-v2-usp__text{font-size:13px;color:var(--text-muted);margin:0}
@media(min-width:900px){
  .vh-v2-usp-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));overflow-x:visible}
  .vh-v2-usp{min-width:0}
}

/* ---------- Stimme ---------- */
.vh-v2-stimme{display:flex;align-items:center;gap:12px;padding:var(--space-3) var(--space-4);border:var(--border-width) solid var(--border-default);border-radius:var(--radius-card);background:var(--color-mint-shop);min-width:0}
.vh-v2-stimme__bild{width:52px;height:52px;border-radius:var(--radius-pill);object-fit:cover;flex:none;background:var(--surface-card)}
.vh-v2-stimme__initialen{width:52px;height:52px;border-radius:var(--radius-pill);flex:none;background:var(--surface-card);color:var(--color-green-deep);display:grid;place-items:center;font-family:var(--font-display);font-size:19px}
.vh-v2-stimme__body{min-width:0}
.vh-v2-stimme__text{font-size:15px;line-height:1.45;color:var(--text-body);margin:0}
.vh-v2-stimme__wer{font-size:13px;color:var(--text-muted);margin:4px 0 0}
.vh-v2-stimme__wer b{color:var(--text-body)}

/* ---------- Sheet-Chrome (Griff/Backdrop/Panel), Basiswerte wörtlich aus Brief §6 ----------
   Struktur: äußeres .vh-sheet = fixer Vollbild-Anker (inset:0), darin .vh-sheet__backdrop
   (rgba(0,0,0,.4), volle Fläche) und .vh-sheet__panel (die eigentliche Karte von unten,
   max-height:92vh, Radius 20px oben, scrollt). Der Brief nennt die Panel-Werte unter der
   Überschrift "Sheet" — auf EIN Element (mit gleichzeitig vollflächigem Backdrop-Kind) nicht
   wörtlich anwendbar, deshalb auf .vh-sheet__panel gesetzt, .vh-sheet selbst nur als Anker/Overlay-
   Wurzel (dokumentiert, s. Protokoll Abschnitt 6). */
.vh-sheet{position:fixed;inset:0;z-index:1200;display:none}
.vh-sheet:not([hidden]){display:block}
.vh-sheet__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.4)}
.vh-sheet__panel{position:fixed;inset:auto 0 0 0;max-height:92vh;border-radius:20px 20px 0 0;background:var(--surface-card);overflow:auto;z-index:1;transition:transform .25s var(--ease-out);padding:10px var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom))}
.vh-sheet__griff{width:40px;height:4px;border-radius:var(--radius-pill);background:var(--border-default);margin:2px auto 10px}
.vh-sheet__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:var(--space-4)}
.vh-sheet__titel{font-size:22px;margin:0}
.vh-sheet__close{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-pill);border:var(--border-width) solid var(--border-default);background:var(--surface-card);flex:none;padding:0}
.vh-sheet__close svg{width:18px;height:18px;transform:rotate(45deg)}
.vh-sheet__body{min-width:0}
.vh-sheet .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}

/* ---------- Schritt-Überschriften im Paket-Sheet ---------- */
.vh-v2-step{font-family:var(--font-label);font-weight:var(--weight-bold);text-transform:uppercase;letter-spacing:var(--tracking-label);font-size:13px;color:var(--text-muted);margin:var(--space-5) 0 8px}
.vh-v2-step:first-child{margin-top:0}
.vh-v2-erkl{font-size:13.5px;color:var(--text-muted);margin:6px 0 0}

/* ---------- Gap-Fill: Basiswerte, die sonst nur in vh-buy-box.liquid stehen (s. Kopfkommentar) ----------
   Betrifft: eigene Stärke-Chips (Schritt 1) UND die von snippets/vh-buy-box-waehler.liquid gerenderten
   Trägeröl-/Größe-/Menge-Fieldsets (Schritte 2–4, part:'form', Datei unverändert wiederverwendet). */
.vh-sheet fieldset.vh-chipgroup{border:0;padding:0;margin:0 0 var(--space-4);min-width:0}
.vh-sheet .vh-chipgroup__legend{font-family:var(--font-label);font-weight:var(--weight-bold);text-transform:uppercase;letter-spacing:var(--tracking-label);font-size:12px;color:var(--text-muted);margin-bottom:8px;padding:0;display:flex;gap:10px;align-items:center;flex-wrap:wrap;width:auto}
.vh-sheet .vh-chip__hint{font-weight:var(--weight-regular);text-transform:none;letter-spacing:0;font-size:13px;display:inline}
.vh-sheet .vh-chip{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:48px;min-width:44px;padding:9px 8px;border:var(--border-width-strong) solid var(--border-default);border-radius:var(--radius-form);background:var(--surface-card);text-align:center;font:inherit;color:var(--text-body);cursor:pointer;transition:border-color .12s,background .12s}
.vh-sheet .vh-chip[aria-checked="true"]{border-color:var(--color-green);background:var(--color-mint-shop)}
.vh-sheet .vh-chip[aria-disabled="true"]{color:var(--text-muted);border-style:dashed;cursor:not-allowed}
.vh-sheet .vh-chip[aria-disabled="true"] .vh-chip__pct{color:var(--text-muted)}
.vh-sheet .vh-chipgroup{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.vh-sheet .vh-chipgroup[data-option="staerke"]{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:389px){.vh-sheet .vh-chipgroup[data-option="staerke"]{grid-template-columns:repeat(3,minmax(0,1fr))}}
.vh-sheet .vh-buybox__abo:empty{display:none}
.vh-sheet .vh-price [hidden],.vh-sheet .vh-tier [hidden]{display:none}
.vh-sheet .vh-tiers{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.vh-sheet .vh-tier{flex-direction:column;align-items:stretch;text-align:center;gap:6px;padding:8px}
.vh-sheet .vh-tier__img{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:var(--radius-thumb);background:var(--surface-page);padding:2px}
.vh-sheet .vh-tier__img img{width:100%;height:100%;object-fit:contain}
.vh-sheet .vh-tier__lbl{flex:none;font-size:14px}
.vh-sheet .vh-tier__pr{text-align:center;font-size:16px}
.vh-sheet .vh-tier__badge{align-self:center;white-space:nowrap}
.vh-sheet .vh-tier__save{display:block}
.vh-sheet .vh-tier[aria-disabled="true"]{opacity:.55;cursor:not-allowed;border-style:dashed}
.vh-sheet .vh-tier__stock{display:block;font-size:12.5px;color:var(--text-muted);white-space:nowrap}
.vh-sheet .vh-tier__summary{font-size:14px;color:var(--text-soft);margin:8px 0 0;text-align:center;min-height:1.4em}
.vh-sheet .vh-tier__summary:empty{display:none}
.vh-sheet .vh-trust-strip{list-style:none;display:flex;flex-wrap:wrap;gap:4px 16px;padding:0;margin:2px 0 0;font-size:13.5px;color:var(--text-soft);min-width:0}
.vh-sheet .vh-trust-strip__garantie{font-size:13.5px;color:var(--text-soft);margin:4px 0 0}

/* ---------- Sheet-Footer: Preisbox + Kaufbutton sticky am unteren Panelrand ---------- */
/* r18: Fuss = EIN Button (Streichpreis + Endpreis im Button), darunter nur der Pflichthinweis */
.vh-sheet__footer{position:sticky;bottom:0;z-index:2;background:var(--surface-card);padding:10px 0 6px;margin-top:var(--space-4);border-top:var(--border-width) solid var(--border-default)}
.vh-sheet__footer .add-to-cart{width:100%;min-height:52px;display:inline-flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;white-space:nowrap}
.vh-sheet__cta-compare{opacity:.7;font-weight:var(--weight-regular)}
.vh-sheet__legal{font-size:12px;color:var(--text-muted);text-align:center;margin:6px 0 0}
.vh-sheet__legal a{color:inherit}
.vh-v2-express{margin-top:var(--space-4)}
.vh-v2-express .shopify-payment-button__more-options{display:none}

/* ---------- r16: beide Sheets sind auf jeder Breite eine Ebene; ab 900 px zentrierte Karte statt von unten
   (Inhaber 22.09.: „Paket wählen soll am Desktop genauso öffnen") ---------- */
@media(min-width:900px){
  .vh-sheet__panel{inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);width:min(700px,92vw);max-height:88vh;border-radius:20px;padding:var(--space-6)}
  .vh-sheet__griff{display:none}
  .vh-sheet__head{margin-bottom:var(--space-5)}

  /* Korrekturrunde 5 (Inhaber-Befund Desktop): .vh-sheet__panel war gleichzeitig der scrollende
     UND der abgerundete Kasten (overflow:auto + border-radius auf demselben Element, Zeile 114) —
     der native Scrollbalken laeuft am rechten Rand ueber die volle Panel-Hoehe und schneidet dabei
     visuell durch die obere/untere Rundung (Scrollbalken folgen dem Grenzrechteck, nicht dem
     gerundeten Clip-Pfad). Fix nur ab 900 px (mobil unveraendert, Griff ist hier ohnehin ausgeblendet):
     .vh-sheet__panel wird zur reinen Huelle (overflow:hidden, behaelt den Radius und clippt damit
     jeden Scrollbalken eines Kindelements korrekt am Rundungspfad) + Flex-Spalte; Kopf bleibt fix
     oben (flex:none), nur .vh-sheet__body scrollt eigenstaendig und liegt dank der Panel-Innenabstaende
     (padding: var(--space-6), Zeile oben) bereits weit genug von den gerundeten Ecken entfernt. */
  .vh-sheet__panel{display:flex;flex-direction:column;overflow:hidden}
  .vh-sheet__head{flex:none}
  .vh-sheet__body{
    flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
    scrollbar-gutter:stable;scrollbar-width:thin;
  }
  .vh-sheet__body::-webkit-scrollbar{width:6px}
  .vh-sheet__body::-webkit-scrollbar-track{background:transparent;margin:20px 0}
  .vh-sheet__body::-webkit-scrollbar-thumb{background:var(--border-default);border-radius:var(--radius-pill)}
  .vh-sheet__body::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}
}

/* ---------- Kein Seitenüberlauf (Brief §6) ---------- */
.vh-v2-fold img{max-width:100%}
.vh-sheet img{max-width:100%}

/* ---------- r16: Kacheln neben dem Bild entfallen, Galerie volle Kartenbreite ---------- */
.vh-v2-hero__kacheln{display:none !important}
.vh-v2-hero__gallery{flex:1 1 100%;max-width:100%}

/* ---------- r16: Inline-Kaufeinstieg nach der Stimme ---------- */
.vh-v2-cta{grid-area:cta;display:grid;gap:10px;justify-items:center;text-align:center;padding:var(--space-4);border:var(--border-width) solid var(--border-default);border-radius:var(--radius-card);background:var(--surface-card);min-width:0}
.vh-v2-cta__btn{width:100%;min-height:52px;font-size:14px}
.vh-v2-cta__ship{display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;color:var(--text-soft);margin:0}
.vh-v2-cta__ship svg{width:18px;height:18px;flex:none;color:var(--color-green-deep)}
.vh-v2-cta__pay{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.vh-v2-cta__pay svg,.vh-v2-cta__pm{height:26px;width:auto;border-radius:4px}
.vh-v2-cta__trust{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;padding:0;margin:0;font-size:13px;color:var(--text-soft)}
.vh-v2-cta__trust li{display:inline-flex;align-items:center;gap:5px}
.vh-v2-cta__trust svg{width:16px;height:16px;color:var(--color-green-deep)}

/* WP-P40 W4 (N-Y01/N-Y15): 30-Tage-Geld-zurück-Garantie, prominent in der Kaufzone jeder V2-PDP.
   Eigene Klasse statt Wiederverwendung von .vh-v2-cta__trust, weil die Garantie sichtbar
   prominenter sein soll als die übrigen Vertrauenspunkte (Inhaber: "präsenter platzieren"). */
.vh-v2-garantie{display:grid;justify-items:center;gap:2px;margin-top:2px;text-align:center}
.vh-v2-garantie__link{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:4px 10px;font-family:var(--font-label);font-weight:var(--weight-bold);font-size:14px;line-height:1.3;color:var(--color-green-deep);text-decoration:none;border-radius:var(--radius-pill)}
.vh-v2-garantie__link:hover,.vh-v2-garantie__link:focus-visible{text-decoration:underline}
.vh-v2-garantie__link svg{width:20px;height:20px;flex:none}
.vh-v2-garantie__lang{margin:0;max-width:40ch;font-size:12.5px;line-height:1.4;color:var(--text-muted)}
@media(max-width:480px){.vh-v2-garantie__link{font-size:14px}}

/* ---------- r18: Stärke als Zeilen mit Rolle, Trägeröl-Karten mit Icon, Größe/Menge volle Breite ---------- */
.vh-sheet .vh-chipgroup.vh-v2-staerke{grid-template-columns:minmax(0,1fr);gap:8px}
.vh-v2-row{display:flex;align-items:center;gap:12px;width:100%;min-height:54px;padding:10px 14px;border:var(--border-width-strong) solid var(--border-default);border-radius:var(--radius-form);background:var(--surface-card);text-align:left;font:inherit;color:var(--text-body);cursor:pointer}
.vh-v2-row[aria-checked="true"]{border-color:var(--color-green);background:var(--color-mint-shop)}
.vh-v2-row[aria-disabled="true"]{color:var(--text-muted);border-style:dashed;cursor:not-allowed}
.vh-v2-row__dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--border-default);flex:none;display:grid;place-items:center;background:#fff}
.vh-v2-row[aria-checked="true"] .vh-v2-row__dot{border-color:var(--color-green-deep)}
.vh-v2-row[aria-checked="true"] .vh-v2-row__dot::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--color-green-deep)}
.vh-v2-row__main{display:flex;align-items:baseline;gap:8px;min-width:0;white-space:nowrap}
.vh-v2-row__main b{font-family:var(--font-label);font-weight:var(--weight-bold);font-size:17px}
.vh-v2-row__main small{font-size:13px;color:var(--text-muted)}
.vh-v2-row__role{margin-left:auto;font-size:14px;color:var(--text-soft);text-align:right;min-width:0}
.vh-sheet .vh-chipgroup.vh-v2-oel{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.vh-v2-oelcard{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 10px;border:var(--border-width-strong) solid var(--border-default);border-radius:var(--radius-form);background:var(--surface-card);text-align:center;font:inherit;color:var(--text-body);cursor:pointer;min-width:0}
.vh-v2-oelcard[aria-checked="true"]{border-color:var(--color-green);background:var(--color-mint-shop)}
.vh-v2-oelcard__ic{width:46px;height:46px;border-radius:50%;background:var(--surface-page);color:var(--color-green-deep);display:grid;place-items:center;flex:none}
.vh-v2-oelcard__ic svg{width:26px;height:26px}
.vh-v2-oelcard__t{font-family:var(--font-label);font-weight:var(--weight-bold);font-size:12.5px;letter-spacing:var(--tracking-label);text-transform:uppercase}
.vh-v2-oelcard__s{font-size:13px;line-height:1.35;color:var(--text-soft)}
.vh-sheet .vh-chipgroup.vh-v2-groesse,.vh-sheet .vh-chipgroup.vh-v2-menge{display:block}
.vh-sheet .vh-sizes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%}
.vh-sheet .vh-size{width:100%;min-width:0;text-align:center;align-items:center}
.vh-sheet .vh-tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%}
.vh-sheet .vh-tier{width:auto;min-width:0}
.vh-sheet .vh-v2-erkl{display:none}
/* r19: Theme-Regel .button__text{display:inline-block} ueberstimmt das hidden-Attribut (Origin schlaegt Spezifitaet) -- Streichpreis im Kaufbutton sonst immer sichtbar */
.vh-sheet__footer .button__text[hidden]{display:none !important}

/* ---------- r20: Flaschenbilder ohne Hintergrund, Kaufbutton einzeilig, Legal im Inline-Kaufeinstieg, Express-Fallback aus ---------- */
.vh-sheet .vh-tier__img{background:transparent;padding:0;border-radius:0}
.vh-sheet__footer .add-to-cart{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:nowrap;padding:0 18px;white-space:nowrap}
.vh-sheet__cta-prices{display:flex;flex-direction:column;align-items:flex-end;line-height:1.05;gap:1px}
.vh-sheet__cta-compare{font-size:12px;opacity:.72;font-weight:var(--weight-regular)}
.vh-sheet__cta-price{font-size:17px}
.vh-sheet__legal{display:none}
.vh-v2-cta__legal{font-size:12px;line-height:1.45;color:var(--text-muted);margin:2px 0 0}
.vh-v2-cta__legal a{color:inherit}
.vh-v2-express[hidden]{display:none}
.vh-v2-express .shopify-payment-button__button--unbranded{display:none}

/* ---------- r21: Fuss = Kaufbutton + „oder" + PayPal (beide sticky), Preise in einer Zeile, Text-Badges, sanftes Scrollen ---------- */
.vh-sheet__footer{padding:8px 0 4px}
.vh-sheet__footer .add-to-cart{padding:0 16px;gap:10px}
.vh-sheet__cta-label{margin-right:auto}
.vh-sheet__cta-prices{flex-direction:row;align-items:baseline;gap:8px;line-height:1}
.vh-sheet__cta-compare{font-size:13px;opacity:.75}
.vh-sheet__cta-price{font-size:17px}
@media(max-width:379px){.vh-sheet__footer .add-to-cart{padding:0 12px;gap:8px}.vh-sheet__cta-label{font-size:13px}.vh-sheet__cta-compare{font-size:12px}.vh-sheet__cta-price{font-size:15px}}
.vh-v2-express{margin:0}
.vh-v2-express__oder{display:flex;align-items:center;gap:10px;margin:6px 0;font-family:var(--font-label);font-weight:var(--weight-bold);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.vh-v2-express__oder::before,.vh-v2-express__oder::after{content:"";flex:1;height:1px;background:var(--border-default)}
.vh-v2-express .product__cart-functions{margin:0}
.vh-v2-cta__pm--text{display:inline-flex;align-items:center;justify-content:center;height:26px;padding:0 8px;border:1px solid var(--border-default);border-radius:4px;background:#fff;font-family:var(--font-label);font-weight:var(--weight-bold);font-size:10.5px;letter-spacing:.02em;color:var(--text-body);white-space:nowrap}
#vh-vergleich,#shopify-section-produkttext{scroll-margin-top:88px}

/* ---------- r21b: iPhone — Sheet-Kopf abgeschnitten / durchsichtiger Streifen unter PayPal: 92vh ueberragt bei sichtbarer
   Toolbar den sichtbaren Bereich und die Seite dahinter scrollt mit. Dynamische Viewport-Hoehe, Scroll-Kette kappen,
   Fuss mit Safe-Area; Abstand „oder" -> PayPal ohne die Theme-Margins (.flex-buttons 10px, .shopify-payment-button 16px). ---------- */
.vh-sheet__panel{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.vh-sheet__backdrop{touch-action:none}
@supports (height: 1dvh){
  @media(max-width:899px){.vh-sheet__panel{max-height:92dvh}}
  @media(min-width:900px){.vh-sheet__panel{max-height:88dvh}}
}
.vh-sheet__footer{padding-bottom:calc(4px + env(safe-area-inset-bottom))}
.vh-v2-express__oder{margin:8px 0}
.vh-v2-express .flex-buttons{margin-top:0}
.vh-v2-express .shopify-payment-button{margin-top:0}

/* ---------- r21c: kein durchscheinender Streifen unter dem Fuss — die Panel-Polsterung unten war scrollbare Flaeche unter dem
   sticky Fuss (Inhalt schien durch). Panel unten ohne Polsterung, der Fuss traegt Polsterung + Safe-Area selbst. ---------- */
.vh-sheet__panel{padding-bottom:0}
@media(min-width:900px){.vh-sheet__panel{padding-bottom:0}}
.vh-sheet__footer{padding-bottom:calc(12px + env(safe-area-inset-bottom))}

/* ---------- r21d: H1 zweizeilig (Titel + Beschreibung im selben H1, SEO), Sheet-Titel als <p> im Display-Font ---------- */
.vh-v2-h1__sub{display:block;font-family:var(--font-body);font-weight:var(--weight-regular);font-size:17px;line-height:1.4;letter-spacing:0;text-transform:none;color:var(--text-soft);margin-top:6px}
.vh-sheet__titel{font-family:var(--font-display);font-weight:var(--weight-regular);line-height:1.2;color:var(--text-body)}

/* ---------- r21e: App-Widgets (Shopify-Chat, Smile-Bonusprogramm, Trusted-Shops-Badge) liegen als eigene Overlays ueber dem
   Sheet-Fuss und das Badge poppt beim Oeffnen auf (Inhaber-Screenshot 22.09. 23:04) -> waehrend ein Sheet offen ist ausblenden.
   Selektoren wie in sections/pf-f5698a3a.liquid (GemPages-Seite des Shops), plus generische Trusted-Shops-ID. ---------- */
html.vh-sheet-open #shopify-chat,html.vh-sheet-open #smile-ui-lite-container,html.vh-sheet-open #smile-ui-container,html.vh-sheet-open [id^="trustbadge-container"],html.vh-sheet-open [aria-label="Open Smile.io Rewards Program"],html.vh-sheet-open button.chat-toggle,html.vh-sheet-open button.smile-improved-mobile-launcher,html.vh-sheet-open shopify-chat{display:none !important}
/* r21f: der Chat-Button ist das Custom Element <shopify-chat> (Shadow DOM) — nur der Host laesst sich von aussen ausblenden */

/* r22b (Inhaber 23.09.): Stimme-Foto groesser und quadratisch mit abgerundeten Ecken statt kleinem Kreis; Gesicht oben ausrichten */
.vh-v2-stimme__bild,.vh-v2-stimme__initialen{width:84px;height:84px;border-radius:var(--radius-card)}
/* r22c: eine Theme-Regel img{height:auto} schlaegt die Klasse -> Selektor verankern + aspect-ratio */
.vh-v2-stimme img.vh-v2-stimme__bild{width:84px;height:84px;aspect-ratio:1/1;object-fit:cover;object-position:50% 25%;flex:none}
.vh-v2-stimme{align-items:center;gap:14px}
