/*!
 * VerbraucherHeute Advertorial System
 * Version: 2.1
 * Stand: 10.07.2026
 *
 * Kanonische Basis für redaktionelle Advertorial-, Story- und Produktseiten.
 * Enthält:
 * - Design Tokens und Typografie
 * - Header, Anzeigeleiste und Hero
 * - verbindliche Section-Rhythmik
 * - Editorial Copy, Cards, Notes und Pullquotes
 * - Produktbilder und Media-Splits
 * - Price Cards mit sauberer Ausrichtung
 * - FAQ, Final CTA und Mobile Sticky CTA
 * - Footer und Legal Modal
 */



/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */



:root {
  --vh-bg: #ffffff;
  --vh-paper: #f7f4ee;
  --vh-paper-warm: #fff8ef;
  --vh-line: #dedbd4;
  --vh-line-dark: #c9c2b8;
  --vh-ink: #172126;
  --vh-muted: #5d686e;
  --vh-soft: #818b8f;
  --vh-navy: #102d3a;
  --vh-orange: #d66a1f;
  --vh-orange-dark: #b95511;
  --vh-orange-soft: #fff1e4;
  --vh-green: #2f6f5f;
  --vh-green-soft: #f0f6f2;
  --vh-shadow: 0 14px 34px rgba(20, 36, 43, .08);
  --vh-shadow-strong: 0 28px 90px rgba(0, 0, 0, .26);
  --vh-radius-sm: 8px;
  --vh-radius-md: 12px;
  --vh-radius-lg: 14px;
  --vh-container: 1120px;
  --vh-header-height: 64px;
  --bg: var(--vh-bg);
  --paper: var(--vh-paper);
  --paper2: var(--vh-paper-warm);
  --line: var(--vh-line);
  --line-dark: var(--vh-line-dark);
  --ink: var(--vh-ink);
  --muted: var(--vh-muted);
  --soft: var(--vh-soft);
  --navy: var(--vh-navy);
  --orange: var(--vh-orange);
  --orange2: var(--vh-orange-dark);
  --orangeSoft: var(--vh-orange-soft);
  --green: var(--vh-green);
  --greenSoft: var(--vh-green-soft);
  --shadow: var(--vh-shadow);
  --container: var(--vh-container);
  --header: var(--vh-header-height);
}




/* =========================================================
   2. RESET UND BASIS
   ========================================================= */



*,
*::before,
*::after {
  box-sizing: border-box;
}




html {
  scroll-behavior: smooth;
}




body {
  margin: 0;
  color: var(--vh-ink);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}




body.modal-open {
  overflow: hidden;
}




a {
  color: inherit;
  text-decoration: none;
}




button,
input,
select,
textarea {
  font: inherit;
}




img {
  display: block;
  max-width: 100%;
}




p,
h1,
h2,
h3,
h4 {
  margin: 0;
}




strong {
  color: var(--vh-ink);
}




/* =========================================================
   3. TYPOGRAFIE
   ========================================================= */



h1,
.vh-h1 {
  max-width: 850px;
  color: var(--vh-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(34px, 7.4vw, 58px);
  font-weight: 760;
  line-height: 1.03;
  letter-spacing: -.04em;
}




h2,
.vh-h2 {
  color: var(--vh-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(27px, 5vw, 42px);
  font-weight: 740;
  line-height: 1.08;
  letter-spacing: -.025em;
}




h3,
.vh-h3 {
  color: var(--vh-ink);
  font-size: 20px;
  font-weight: 850;
  line-height: 1.2;
}




.lead,
.vh-lead,
.vh-subline {
  max-width: 790px;
  color: var(--vh-muted);
  font-size: 18px;
  line-height: 1.58;
}




.small,
.vh-small {
  color: var(--vh-muted);
  font-size: 14px;
  line-height: 1.5;
}




.micro,
.vh-micro {
  color: var(--vh-muted);
  font-size: 12.5px;
  line-height: 1.42;
}




.kicker,
.vh-eyebrow {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  gap: 9px;
  color: var(--vh-navy);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.25;
  letter-spacing: .075em;
  text-transform: uppercase;
}




.kicker::before,
.vh-eyebrow::before {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 34px;
  height: 3px;
  background: var(--vh-orange);
}




/* =========================================================
   4. CONTAINER UND SECTIONS
   ========================================================= */



.wrap,
.vh-container {
  width: min(100% - 36px, var(--vh-container));
  margin-inline: auto;
}




.section,
.vh-section {
  padding-block: 56px;
  scroll-margin-top: calc(var(--vh-header-height) + 18px);
}




.section.alt,
.vh-section.alt,
.vh-section--muted {
  background: var(--vh-paper);
}




/*
 * VERBINDLICHE SECTION-RHYTHMIK
 *
 * Eyebrow -> Headline: 12px
 * Headline -> Lead: 16px
 * Lead -> Text: 14px
 * Absatz -> Absatz: 10px
 * Lead -> Grid/Card-Bereich: 24px
 */



.vh-section-head,
.vh-editorial-copy,
.vh-copy-flow {
  display: grid;
  gap: 0;
}




.vh-section-head > :is(.kicker, .vh-eyebrow),
.vh-editorial-copy > :is(.kicker, .vh-eyebrow),
.vh-copy-flow > :is(.kicker, .vh-eyebrow),
.vh-section > .vh-container > :is(.kicker, .vh-eyebrow) {
  margin-bottom: 12px;
}




.vh-section-head > h2,
.vh-editorial-copy > h2,
.vh-copy-flow > h2,
.vh-section > .vh-container > h2 {
  margin-bottom: 16px;
}




.vh-section-head > :is(.lead, .vh-lead),
.vh-editorial-copy > :is(.lead, .vh-lead),
.vh-copy-flow > :is(.lead, .vh-lead),
.vh-section > .vh-container > :is(.lead, .vh-lead) {
  margin: 0 0 14px;
}




.vh-editorial-copy > p:not(.lead, .vh-lead) + p:not(.lead, .vh-lead),
.vh-copy-flow > p:not(.lead, .vh-lead) + p:not(.lead, .vh-lead) {
  margin-top: 10px;
}




.vh-editorial-copy > :is(.lead, .vh-lead) + p,
.vh-copy-flow > :is(.lead, .vh-lead) + p {
  margin-top: 0;
}




.vh-section > .vh-container > :is(.lead, .vh-lead) + :is(
  .vh-card-grid,
  .vh-check-grid,
  .vh-ingredient-list,
  .vh-scenario-grid,
  .vh-proof-grid,
  .vh-objection-list,
  .vh-price-grid,
  .vh-faq-list,
  .vh-usecase-grid
) {
  margin-top: 24px;
}




.vh-editorial-split {
  display: grid;
  align-items: start;
  gap: 22px;
}




/* VerbraucherHeute Markenfarben */
:root {
  --vh-brand-navy: #0c2b4e;
  --vh-brand-orange: #ff6b00;
}

/* =========================================================
   5. HEADER UND BRAND
   ========================================================= */



.site-header,
.vh-site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--vh-line);
  background: rgba(255, 255, 255, .97);
  backdrop-filter: saturate(1.2) blur(8px);
}




.header-inner,
.vh-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--vh-header-height);
  gap: 16px;
}




.brand,
.brand-vh,
.vh-brand {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 12px;
  line-height: normal;
}




.brand-mark,
.vh-brand-mark {
  display: block;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  overflow: hidden;
  border-radius: 10px;
  background:
    var(--vh-brand-navy)
    url("/assets/vh-icon-100.png")
    center / cover
    no-repeat;
  color: transparent;
  font-size: 0;
  line-height: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}




.brand-mark::after,
.vh-brand-mark::after {
  display: none;
}




.brand-copy,
.vh-brand-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
  line-height: 1.05;
}




.brand-name,
.vh-brand-name {
  color: var(--vh-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.025em;
  white-space: nowrap;
}




.brand-claim,
.vh-brand-claim {
  display: none;
  color: var(--vh-brand-orange);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .005em;
  white-space: nowrap;
}




.nav,
.vh-nav {
  display: none;
  align-items: center;
  gap: 18px;
  color: var(--vh-muted);
  font-size: 14px;
  font-weight: 740;
}




.nav a,
.vh-nav a {
  padding-block: 8px;
  border-bottom: 2px solid transparent;
}




.nav a:hover,
.vh-nav a:hover {
  border-color: var(--vh-orange);
  color: var(--vh-navy);
}




/* =========================================================
   6. ANZEIGELEISTE
   ========================================================= */



.vh-adbar {
  border-bottom: 1px solid var(--vh-line);
  background: #fff;
}




.vh-adbar-inner {
  display: grid;
  gap: 6px;
  padding-block: 12px;
  color: var(--vh-muted);
  font-size: 13px;
}




.vh-ad-label {
  display: inline-flex;
  width: max-content;
  padding: 4px 9px;
  border: 1px solid var(--vh-line-dark);
  border-radius: 999px;
  background: var(--vh-orange-soft);
  color: #7b430e;
  font-size: 11.5px;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}




.vh-ad-date {
  color: var(--vh-soft);
  font-size: 12px;
}




/* =========================================================
   7. HERO
   ========================================================= */



.hero,
.vh-hero {
  padding-block: 30px 34px;
  border-bottom: 1px solid var(--vh-line);
  background: linear-gradient(180deg, #fff 0%, #fcfaf6 100%);
}




.vh-hero-grid {
  display: grid;
  align-items: start;
  gap: 24px;
}




.hero-copy,
.vh-hero-copy {
  display: grid;
  gap: 14px;
}




.hero-card,
.vh-hero-product {
  overflow: hidden;
  border: 1px solid var(--vh-line-dark);
  border-top: 5px solid var(--vh-orange);
  border-radius: var(--vh-radius-lg);
  background: #fff;
  box-shadow: var(--vh-shadow);
}




.hero-card-head,
.vh-hero-product-head {
  display: grid;
  gap: 7px;
  padding: 16px 17px;
  border-bottom: 1px solid var(--vh-line);
  background: var(--vh-paper-warm);
}




.hero-card-label,
.vh-hero-product-label {
  color: #8a4a10;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}




.hero-card-title,
.vh-hero-product-title {
  color: var(--vh-ink);
  font-size: 30px;
  font-weight: 900;
  line-height: 1.06;
}




.hero-card-body,
.vh-hero-product-body {
  display: grid;
  gap: 12px;
  padding: 15px 17px;
}




.hero-reco-list,
.vh-benefit-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}




.hero-reco-list li,
.vh-benefit-list li {
  display: grid;
  grid-template-columns: 17px 1fr;
  gap: 8px;
  color: var(--vh-muted);
  font-size: 14.5px;
  line-height: 1.45;
}




.hero-reco-list li::before,
.vh-benefit-list li::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--vh-orange);
}




.vh-hero-price-note,
.vh-price-note {
  padding: 12px 13px;
  border: 1px solid var(--vh-line);
  border-radius: 10px;
  background: var(--vh-paper-warm);
  color: var(--vh-muted);
  font-size: 14px;
  line-height: 1.48;
}




/* =========================================================
   8. BUTTONS UND LINKS
   ========================================================= */



.btn,
.vh-cta,
.vh-cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 13px 18px;
  border: 1px solid transparent;
  border-radius: var(--vh-radius-sm);
  font-size: 15px;
  font-weight: 850;
  line-height: 1.08;
  text-align: center;
  cursor: pointer;
  transition: background .15s ease,
    border-color .15s ease,
    transform .15s ease,
    box-shadow .15s ease;
}




.btn:hover,
.vh-cta:hover,
.vh-cta-secondary:hover {
  transform: translateY(-1px);
}




.btn-primary,
.vh-cta {
  border-color: var(--vh-orange);
  background: var(--vh-orange);
  color: #fff;
  box-shadow: 0 10px 24px rgba(201, 100, 27, .22);
}




.btn-primary:hover,
.vh-cta:hover {
  border-color: var(--vh-orange-dark);
  background: var(--vh-orange-dark);
}




.btn-outline,
.vh-cta-secondary {
  border-color: var(--vh-line-dark);
  background: #fff;
  color: var(--vh-navy);
}




.btn-outline:hover,
.vh-cta-secondary:hover {
  border-color: var(--vh-navy);
}




.actions,
.vh-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}




.inline-link,
.vh-inline-link {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  color: var(--vh-navy);
  font-weight: 760;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}




/* =========================================================
   9. EDITORIAL COPY UND STORY-ELEMENTE
   ========================================================= */



.vh-article-copy {
  max-width: 780px;
}




.vh-article-copy p {
  color: var(--vh-ink);
  font-size: 17px;
  line-height: 1.72;
}




.vh-article-copy .lead,
.vh-article-copy .vh-lead {
  color: var(--vh-muted);
  font-size: 19px;
  line-height: 1.62;
}




.vh-card,
.vh-story-box,
.vh-fact-box {
  display: grid;
  gap: 9px;
  padding: 16px;
  border: 1px solid var(--vh-line-dark);
  border-radius: var(--vh-radius-md);
  background: #fff;
  box-shadow: var(--vh-shadow);
}




.vh-card p,
.vh-story-box p,
.vh-fact-box p {
  color: var(--vh-muted);
  font-size: 14.6px;
  line-height: 1.5;
}




.vh-note,
.vh-source-note {
  padding: 14px 15px;
  border: 1px solid var(--vh-line);
  border-radius: var(--vh-radius-md);
  background: var(--vh-paper-warm);
  color: var(--vh-muted);
  font-size: 14px;
  line-height: 1.52;
}




.vh-pullquote {
  padding-block: 18px;
  border-top: 1px solid var(--vh-line-dark);
  border-bottom: 1px solid var(--vh-line-dark);
  color: var(--vh-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(24px, 5vw, 36px);
  font-weight: 760;
  line-height: 1.12;
  letter-spacing: -.025em;
}




.vh-card-grid,
.vh-check-grid,
.vh-ingredient-list,
.vh-scenario-grid,
.vh-proof-grid,
.vh-objection-list,
.vh-usecase-grid {
  display: grid;
  gap: 14px;
  margin-top: 24px;
}




.vh-usecase {
  padding: 16px;
  border: 1px solid var(--vh-line-dark);
  border-radius: var(--vh-radius-md);
  background: #fff;
  box-shadow: var(--vh-shadow);
}




.vh-usecase h3 {
  font-size: 18px;
}




.vh-usecase p {
  margin-top: 6px;
  color: var(--vh-muted);
  font-size: 14.8px;
  line-height: 1.52;
}




/* =========================================================
   10. BILDER UND MEDIA-SPLITS
   ========================================================= */



.vh-image-card {
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--vh-line);
  border-radius: var(--vh-radius-md);
  background: #fff;
}




.vh-image-card img {
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: contain;
  background: linear-gradient(135deg, var(--vh-paper), var(--vh-paper-warm));
}




.vh-image-card--product img,
.vh-media-product img {
  height: 420px;
  max-height: none;
  padding: 18px;
  object-fit: contain;
}




.vh-image-card--cover img {
  height: 360px;
  max-height: none;
  object-fit: cover;
}




.vh-image-card figcaption {
  padding: 10px 12px;
  color: var(--vh-muted);
  font-size: 13px;
  line-height: 1.42;
}




.vh-hero-product .vh-image-card img {
  height: 340px;
  max-height: none;
  padding: 12px;
  object-fit: contain;
}




/* =========================================================
   11. PRICE CARDS
   ========================================================= */



.vh-price-grid {
  display: grid;
  align-items: stretch;
  gap: 16px;
  margin-top: 26px;
}




.vh-price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: hidden;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--vh-line-dark);
  border-radius: var(--vh-radius-lg);
  background: #fff;
  box-shadow: var(--vh-shadow);
}




.vh-price-card-featured {
  border: 2px solid var(--vh-navy);
}




.vh-price-card h3 {
  font-size: 19px;
  line-height: 1.18;
}




.vh-price-card > p {
  min-height: 78px;
  color: var(--vh-muted);
  font-size: 15px;
  line-height: 1.52;
}




.vh-price-media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 196px;
  padding: 10px;
  overflow: hidden;
  border: 1px solid var(--vh-line);
  border-radius: 10px;
  background: var(--vh-paper-warm);
}




.vh-price-media--single {
  height: 220px;
}




.vh-price-media--bundle {
  height: 184px;
}




.vh-price-media img {
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 8px;
  object-fit: contain;
  background: linear-gradient(135deg, var(--vh-paper-warm), var(--vh-paper));
}




.vh-badge {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  padding: 5px 9px;
  border: 1px solid #e8bd86;
  border-radius: 999px;
  background: var(--vh-orange-soft);
  color: #7b430e;
  font-size: 11.5px;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}




.vh-price {
  margin-top: auto;
  color: var(--vh-ink);
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
}




.vh-price-sub {
  min-height: 42px;
  color: var(--vh-muted);
  font-size: 14px;
}




.vh-price-card .btn,
.vh-price-card .vh-cta,
.vh-price-card .vh-cta-secondary {
  width: 100%;
  margin-top: 4px;
}




/* =========================================================
   12. REVIEW CARDS
   ========================================================= */



.vh-review-stack {
  display: grid;
  gap: 12px;
}




.vh-review-card {
  display: grid;
  gap: 8px;
  padding: 15px;
  border: 1px solid var(--vh-line-dark);
  border-radius: var(--vh-radius-md);
  background: #fff;
  box-shadow: var(--vh-shadow);
}




.vh-review-card p {
  color: var(--vh-ink);
  font-size: 15px;
  line-height: 1.45;
}




.vh-review-card span {
  color: var(--vh-muted);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .05em;
  text-transform: uppercase;
}




/* =========================================================
   13. FAQ
   ========================================================= */



.vh-faq-list {
  margin-top: 18px;
  border-top: 1px solid var(--vh-line-dark);
}




.vh-faq-item {
  border-bottom: 1px solid var(--vh-line-dark);
}




.vh-faq-item summary {
  display: grid;
  grid-template-columns: 1fr 26px;
  gap: 14px;
  padding-block: 15px;
  color: var(--vh-ink);
  font-weight: 850;
  list-style: none;
  cursor: pointer;
}




.vh-faq-item summary::-webkit-details-marker {
  display: none;
}




.vh-faq-item summary::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--vh-line-dark);
  color: var(--vh-navy);
  font-weight: 900;
}




.vh-faq-item[open] summary::after {
  content: "−";
}




.vh-faq-item p {
  padding-bottom: 15px;
  color: var(--vh-muted);
  font-size: 14.5px;
  line-height: 1.52;
}




/* =========================================================
   14. FINAL CTA
   ========================================================= */



.vh-final-box {
  display: grid;
  gap: 16px;
  padding: 22px;
  border-radius: var(--vh-radius-lg);
  background: var(--vh-navy);
  color: #fff;
}




.vh-final-box h2,
.vh-final-box strong {
  color: #fff;
}




.vh-final-box p {
  color: rgba(255, 255, 255, .82);
}




.vh-final-box :is(.kicker, .vh-eyebrow) {
  color: #ffcf9a;
}




.vh-final-box :is(.kicker, .vh-eyebrow)::before {
  background: #ffcf9a;
}




.vh-final-box .vh-image-card {
  max-width: 320px;
}




.vh-final-box .vh-image-card img {
  height: 360px;
  max-height: none;
  padding: 12px;
  object-fit: contain;
}




/* =========================================================
   15. MOBILE STICKY CTA
   ========================================================= */



.vh-sticky-cta {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 80;
  display: none;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--vh-line-dark);
  box-shadow: 0 -10px 28px rgba(19, 34, 41, .16);
}




.vh-sticky-inner {
  display: grid;
  margin-inline: auto;
}




.vh-sticky-copy {
  display: grid;
  gap: 1px;
}




.vh-sticky-copy strong {
  font-size: 14px;
}




.vh-sticky-copy span {
  color: var(--vh-muted);
  font-size: 12px;
}




/*
 * Die Sticky CTA wird erst durch JS und die Klasse .vh-sticky-ready sichtbar.
 * Dadurch bleibt der redaktionelle Einstieg frei von aggressiven CTAs.
 */



body:not(.vh-sticky-ready) .vh-sticky-cta {
  display: none !important;
}




/* =========================================================
   16. FOOTER UND LEGAL MODAL
   ========================================================= */












.footer-link {
  text-underline-offset: 4px;
}




.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(11, 45, 58, .66);
}




.modal-backdrop.open {
  display: flex;
}




.modal {
  width: min(100%, 760px);
  max-height: 84vh;
  overflow: auto;
  border: 1px solid var(--vh-line-dark);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--vh-shadow-strong);
}




.modal-head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--vh-line);
  background: var(--vh-paper);
}




.modal-title {
  font-size: 18px;
  font-weight: 900;
}




.modal-close {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--vh-line-dark);
  border-radius: 6px;
  background: #fff;
  font-size: 22px;
  font-weight: 800;
  cursor: pointer;
}




.modal-body {
  display: grid;
  gap: 11px;
  padding: 16px;
  color: var(--vh-muted);
  font-size: 14.5px;
  line-height: 1.52;
}




.modal-body a {
  color: var(--vh-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}




/* =========================================================
   17. RESPONSIVE
   ========================================================= */



@media (min-width: 560px) {
  
.brand-claim,
  .vh-brand-claim {
  display: block;
}



  
.vh-card-grid,
  .vh-check-grid,
  .vh-ingredient-list,
  .vh-scenario-grid,
  .vh-proof-grid,
  .vh-objection-list,
  .vh-usecase-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}


}



@media (min-width: 780px) {
  
:root {
  --vh-header-height: 70px;
  --header: var(--vh-header-height);
}



  
.wrap,
  .vh-container {
  width: min(100% - 48px, var(--vh-container));
}



  
.header-inner,
  .vh-header-inner {
  height: var(--vh-header-height);
}



  
.nav,
  .vh-nav {
  display: flex;
}



  
.hero,
  .vh-hero {
  padding-block: 56px 54px;
}



  
.vh-hero-grid {
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 42px;
}



  
.section,
  .vh-section {
  padding-block: 68px;
}



  
.vh-editorial-split {
  grid-template-columns: .52fr .48fr;
  gap: 46px;
}



  
.vh-card-grid,
  .vh-check-grid,
  .vh-ingredient-list,
  .vh-proof-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}



  
.vh-scenario-grid,
  .vh-usecase-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}



  
.vh-price-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}



  
.vh-price-card-featured {
  transform: translateY(-6px);
}



  
.vh-final-box {
  grid-template-columns: 1fr 310px;
  align-items: center;
  padding: 28px;
}



  
.vh-final-box .actions,
  .vh-final-box .vh-actions,
  .vh-final-box .vh-cta-micro {
  grid-column: 1 / -1;
}



  
.footer-grid {
  grid-template-columns: 1fr auto;
  align-items: center;
}


}



@media (max-width: 779px) {
  
body {
  padding-bottom: 112px;
}



  
body.vh-sticky-ready .vh-sticky-cta {
  display: block !important;
}



  
.vh-adbar-inner {
  padding-block: 10px;
}



  
.vh-section-head > :is(.kicker, .vh-eyebrow),
  .vh-editorial-copy > :is(.kicker, .vh-eyebrow),
  .vh-copy-flow > :is(.kicker, .vh-eyebrow),
  .vh-section > .vh-container > :is(.kicker, .vh-eyebrow) {
  margin-bottom: 10px;
}



  
.vh-section-head > h2,
  .vh-editorial-copy > h2,
  .vh-copy-flow > h2,
  .vh-section > .vh-container > h2 {
  margin-bottom: 13px;
}



  
.vh-section-head > :is(.lead, .vh-lead),
  .vh-editorial-copy > :is(.lead, .vh-lead),
  .vh-copy-flow > :is(.lead, .vh-lead),
  .vh-section > .vh-container > :is(.lead, .vh-lead) {
  margin-bottom: 11px;
}



  
.vh-card,
  .vh-story-box,
  .vh-fact-box,
  .vh-price-card {
  padding: 14px;
}



  
.vh-price-card-featured {
  transform: none;
}



  
.vh-price-card > p,
  .vh-price-sub {
  min-height: 0;
}



  
.vh-price-media,
  .vh-price-media--single,
  .vh-price-media--bundle {
  height: 180px;
}



  
.vh-image-card--product img,
  .vh-media-product img {
  height: 340px;
  padding: 14px;
}



  
.vh-final-box .vh-image-card img {
  height: 300px;
}



  
.vh-article-copy p {
  font-size: 16px;
  line-height: 1.68;
}



  
.vh-article-copy .lead,
  .vh-article-copy .vh-lead {
  font-size: 17px;
  line-height: 1.58;
}


}



@media (max-width: 430px) {
  
.wrap,
  .vh-container {
  width: calc(100% - 36px);
}



  
h1,
  .vh-h1 {
  font-size: clamp(33px, 10.7vw, 43px);
}



  
h2,
  .vh-h2 {
  font-size: clamp(27px, 8.4vw, 35px);
}



  
.lead,
  .vh-lead,
  .vh-subline {
  font-size: 17px;
  line-height: 1.55;
}



  
.actions,
  .vh-actions {
  display: grid;
  grid-template-columns: 1fr;
}



  
.btn,
  .vh-cta,
  .vh-cta-secondary {
  width: 100%;
}


}



/* =========================================================
   VH STORY ADVERTORIAL LAYOUT V1.3
   Neue, artikelzentrierte Architektur:
   keine klassische Sales-Hero-Card, keine frühen Shop-CTAs,
   Product Reveal erst nach dem redaktionellen Hauptteil.
   ========================================================= */



:root {
  --sa-reading: 760px;
  --sa-wide: 1120px;
  --sa-night: #0b2633;
  --sa-night-2: #143b49;
  --sa-pear: #dceee1;
  --sa-pear-strong: #a9d8bd;
  --sa-blue: #b5d8ee;
  --sa-cobalt: #3e66c8;
}




body {
  padding-bottom: 0;
  background: #f7f4ee;
}




.vh-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  width: 0;
  height: 3px;
  background: var(--vh-orange);
  pointer-events: none;
}




.sa-header {
  position: sticky;
  top: 0;
  z-index: 90;
  border-bottom: 1px solid rgba(23, 33, 38, .11);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(12px);
}




.sa-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 62px;
  gap: 18px;
}





.sa-header,
.sa-header-inner,
.sa-header .brand-mark,
.sa-header .brand-name,
.sa-header .brand-claim {
  transition: min-height .2s ease,
    width .2s ease,
    height .2s ease,
    font-size .2s ease,
    opacity .16s ease,
    max-height .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}




.sa-header.is-scrolled {
  box-shadow: 0 8px 24px rgba(17, 38, 46, .09);
}




.sa-header.is-scrolled .sa-header-inner {
  min-height: 52px;
}




.sa-header.is-scrolled .brand-mark,
.sa-header.is-scrolled .vh-brand-mark {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
}




.sa-header.is-scrolled .brand-name,
.sa-header.is-scrolled .vh-brand-name {
  font-size: 19px;
}




.sa-header .brand-claim,
.sa-header .vh-brand-claim {
  max-height: 18px;
  overflow: hidden;
}




.sa-header.is-scrolled .brand-claim,
.sa-header.is-scrolled .vh-brand-claim {
  max-height: 0;
  opacity: 0;
  transform: translateY(-3px);
}




.sa-header-label {
  color: var(--vh-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}




.sa-hero {
  position: relative;
  overflow: hidden;
  padding: 42px 0 34px;
  border-bottom: 1px solid var(--vh-line);
  background: radial-gradient(circle at 82% 18%, rgba(169, 216, 189, .5), transparent 30%),
    radial-gradient(circle at 92% 72%, rgba(181, 216, 238, .5), transparent 28%),
    linear-gradient(180deg, #fff 0%, #f8f4ec 100%);
}




.sa-hero::after {
  content: "";
  position: absolute;
  right: -120px;
  bottom: -180px;
  width: 420px;
  height: 420px;
  border: 1px solid rgba(16, 45, 58, .12);
  border-radius: 50%;
}




.sa-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: center;
  gap: 30px;
}




.sa-hero-copy {
  display: grid;
  gap: 17px;
}




.sa-kicker {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  gap: 10px;
  color: var(--vh-orange-dark);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}




.sa-kicker::before {
  content: "";
  width: 34px;
  height: 3px;
  background: var(--vh-orange);
}




.sa-hero h1 {
  max-width: 890px;
  font-size: clamp(41px, 7vw, 70px);
  line-height: .99;
  letter-spacing: -.047em;
}




.sa-deck {
  max-width: 820px;
  color: #445158;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(20px, 3vw, 26px);
  line-height: 1.42;
}




.sa-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding-top: 4px;
  color: var(--vh-muted);
  font-size: 13px;
}




.sa-meta span + span {
  position: relative;
  padding-left: 14px;
}




.sa-meta span + span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--vh-orange);
  transform: translateY(-50%);
}




.sa-cover {
  position: relative;
  min-height: 330px;
}




.sa-cover-card {
  position: relative;
  display: grid;
  min-height: 330px;
  padding: 28px;
  overflow: hidden;
  border-radius: 22px;
  background: radial-gradient(circle at 76% 26%, rgba(182, 222, 196, .7), transparent 28%),
    radial-gradient(circle at 35% 85%, rgba(91, 119, 211, .54), transparent 33%),
    linear-gradient(145deg, var(--sa-night) 0%, var(--sa-night-2) 100%);
  color: #fff;
  box-shadow: 0 30px 70px rgba(11, 38, 51, .24);
}




.sa-cover-card::before {
  content: "";
  position: absolute;
  top: -105px;
  right: -75px;
  width: 260px;
  height: 260px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
}




.sa-cover-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: rgba(255, 255, 255, .74);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}




.sa-cover-main {
  align-self: center;
}




.sa-cover-main strong {
  display: block;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(66px, 10vw, 106px);
  line-height: .84;
  letter-spacing: -.07em;
}




.sa-cover-main span {
  display: block;
  margin-top: 16px;
  color: #dbf1e3;
  font-size: 15px;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
}




.sa-cover-bottom {
  align-self: end;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 18px;
}




.sa-cover-bottom p {
  max-width: 245px;
  color: rgba(255, 255, 255, .8);
  font-size: 13px;
  line-height: 1.45;
}




.sa-clock {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 50%;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .04em;
  text-align: center;
}




.sa-disclosure {
  border-bottom: 1px solid var(--vh-line);
  background: #fff;
}




.sa-disclosure-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 7px 18px;
  padding: 11px 0;
  color: var(--vh-muted);
  font-size: 12.5px;
  line-height: 1.45;
}




.sa-disclosure strong {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}




.sa-main {
  background: #fff;
}




.sa-article-shell {
  display: grid;
  max-width: var(--sa-wide);
  margin-inline: auto;
  padding: 54px 18px 0;
  gap: 34px;
}




.sa-index {
  position: relative;
  z-index: 3;
  align-self: start;
}




.sa-index-card {
  padding: 17px 0 17px 17px;
  border-left: 3px solid var(--vh-orange);
}




.sa-index-title {
  margin-bottom: 10px;
  color: var(--vh-navy);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}




.sa-index a {
  display: block;
  padding: 5px 0;
  color: var(--vh-muted);
  font-size: 13px;
  line-height: 1.35;
}




.sa-index a:hover {
  color: var(--vh-navy);
}




.sa-article {
  width: 100%;
  max-width: var(--sa-reading);
}




.sa-intro {
  margin-bottom: 54px;
}




.sa-article p {
  color: #263238;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.78;
}




.sa-article p + p {
  margin-top: 16px;
}




.sa-intro > p:first-child::first-letter {
  float: left;
  margin: .03em .12em 0 0;
  color: var(--vh-orange);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 4.2em;
  font-weight: 700;
  line-height: .75;
}




.sa-section {
  margin: 0 0 64px;
  scroll-margin-top: 88px;
}




.sa-section h2 {
  margin: 0 0 21px;
  font-size: clamp(31px, 5vw, 45px);
  line-height: 1.06;
}




.sa-section-label {
  display: block;
  margin-bottom: 11px;
  color: var(--vh-orange-dark);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}




.sa-pullquote {
  position: relative;
  isolation: isolate;
  margin: 52px -14px;
  padding: 31px 24px 29px;
  overflow: hidden;
  border-top: 1px solid var(--vh-line-dark);
  border-bottom: 1px solid var(--vh-line-dark);
  color: var(--vh-navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(27px, 5vw, 39px);
  font-weight: 720;
  line-height: 1.18;
  letter-spacing: -.025em;
}




.sa-pullquote::before {
  content: "„";
  position: absolute;
  z-index: -1;
  top: -9px;
  left: -9px;
  color: rgba(214, 106, 31, .12);
  font-size: 132px;
  line-height: 1;
  pointer-events: none;
}




.sa-study {
  margin: 30px 0;
  overflow: hidden;
  border: 1px solid var(--vh-line-dark);
  border-radius: 15px;
  background: #f8f6f1;
}




.sa-study-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--vh-line);
}




.sa-study-head strong {
  color: var(--vh-navy);
  font-size: 15px;
}




.sa-study-head span {
  color: var(--vh-muted);
  font-size: 12px;
}




.sa-study-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}




.sa-study-cell {
  padding: 16px 18px;
  border-right: 1px solid var(--vh-line);
  border-bottom: 1px solid var(--vh-line);
}




.sa-study-cell:nth-child(2n) {
  border-right: 0;
}




.sa-study-cell:nth-last-child(-n + 2) {
  border-bottom: 0;
}




.sa-study-cell strong {
  display: block;
  color: var(--vh-navy);
  font-size: 26px;
  line-height: 1;
}




.sa-study-cell span {
  display: block;
  margin-top: 6px;
  color: var(--vh-muted);
  font-size: 12.5px;
  line-height: 1.35;
}




.sa-note {
  margin: 27px 0;
  padding: 17px 18px;
  border-left: 4px solid var(--vh-orange);
  background: var(--vh-paper-warm);
  color: var(--vh-muted);
  font-size: 14px;
  line-height: 1.55;
}




.sa-note strong {
  color: var(--vh-navy);
}




.sa-metabolism {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  margin: 30px 0;
  gap: 9px;
}




.sa-metabolism-step {
  display: grid;
  place-items: center;
  min-height: 108px;
  padding: 13px;
  border: 1px solid var(--vh-line-dark);
  border-radius: 12px;
  background: #fff;
  text-align: center;
}




.sa-metabolism-step strong {
  font-size: 16px;
}




.sa-metabolism-step span {
  display: block;
  margin-top: 5px;
  color: var(--vh-muted);
  font-size: 12px;
  line-height: 1.35;
}




.sa-arrow {
  align-self: center;
  color: var(--vh-orange);
  font-size: 25px;
  font-weight: 900;
}




.sa-product-reveal {
  position: relative;
  z-index: 1;
  width: min(calc(100vw - 28px), var(--sa-wide));
  margin: 6px 0 70px;
  padding: 0;
  overflow: hidden;
  border-radius: 21px;
  background: radial-gradient(circle at 85% 15%, rgba(169, 216, 189, .7), transparent 30%),
    radial-gradient(circle at 70% 88%, rgba(74, 102, 202, .56), transparent 35%),
    linear-gradient(145deg, var(--sa-night), var(--sa-night-2));
  color: #fff;
  box-shadow: 0 28px 70px rgba(11, 38, 51, .22);
}




.sa-product-grid {
  display: grid;
  align-items: center;
}




.sa-product-copy {
  display: grid;
  gap: 15px;
  padding: 30px 25px 28px;
}




.sa-product-copy .sa-section-label {
  margin: 0;
  color: #bfe7cd;
}




.sa-product-copy h2,
.sa-product-copy strong {
  color: #fff;
}




.sa-product-copy h2 {
  font-size: clamp(32px, 5vw, 48px);
}




.sa-product-copy p {
  color: rgba(255, 255, 255, .83);
  font-family: Inter, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.62;
}




.sa-product-points {
  display: grid;
  gap: 8px;
  margin: 4px 0 2px;
  padding: 0;
  list-style: none;
}




.sa-product-points li {
  display: grid;
  grid-template-columns: 8px 1fr;
  align-items: start;
  gap: 10px;
  color: rgba(255, 255, 255, .87);
  font-size: 14.5px;
  line-height: 1.45;
}




.sa-product-points li::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: 7px;
  border-radius: 50%;
  background: #bfe7cd;
}




.sa-product-image {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 350px;
  padding: 34px;
}




.sa-product-image::before {
  content: "";
  position: absolute;
  width: 72%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(210, 238, 220, .34), rgba(210, 238, 220, 0) 70%);
  filter: blur(2px);
}




.sa-product-photo {
  position: relative;
  width: min(100%, 510px);
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 20px;
  background: #f2f2f1;
  box-shadow: 0 28px 55px rgba(0, 0, 0, .24),
    0 0 0 8px rgba(255, 255, 255, .055);
  transform: rotate(1.1deg);
}




.sa-product-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(16, 45, 58, .08);
  pointer-events: none;
}




.sa-product-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.045);
}




.sa-product-disclaimer {
  padding: 13px 15px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 10px;
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .76);
  font-size: 12.5px;
  line-height: 1.48;
}




.sa-product-reveal .vh-cta {
  width: 100%;
  border-color: #fff;
  background: #fff;
  color: var(--vh-navy);
  box-shadow: none;
}




.sa-product-reveal .vh-cta:hover {
  border-color: #e7f1eb;
  background: #e7f1eb;
}




.sa-occasions {
  display: grid;
  margin: 27px 0 0;
  border-top: 1px solid var(--vh-line-dark);
}




.sa-occasion {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--vh-line-dark);
}




.sa-occasion-num {
  color: var(--vh-orange);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 23px;
  font-weight: 760;
}




.sa-occasion h3 {
  margin-bottom: 4px;
  font-size: 17px;
}




.sa-occasion p {
  color: var(--vh-muted);
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.48;
}




.sa-pricing {
  padding: 66px 0 74px;
  background: var(--vh-paper);
}




.sa-pricing-head {
  max-width: 760px;
}




.sa-pricing-head h2 {
  margin: 12px 0 15px;
}




.sa-pricing-head p {
  color: var(--vh-muted);
  font-size: 17px;
  line-height: 1.62;
}




.sa-price-grid {
  display: grid;
  gap: 16px;
  margin-top: 31px;
}




.sa-price-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 16px;
  border: 1px solid var(--vh-line-dark);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--vh-shadow);
}




.sa-price-card.is-featured {
  border: 2px solid var(--vh-navy);
}




.sa-bundle-visual {
  position: relative;
  display: grid;
  place-items: center;
  height: 190px;
  margin-bottom: 15px;
  overflow: hidden;
  border-radius: 12px;
  background: radial-gradient(circle at 75% 15%, rgba(169, 216, 189, .72), transparent 30%),
    linear-gradient(135deg, #f8f5ee, #edf4f6);
}




.sa-bundle-visual img {
  position: absolute;
  width: 58%;
  height: 82%;
  object-fit: contain;
  filter: drop-shadow(0 12px 18px rgba(17, 41, 50, .18));
}




.sa-bundle-visual.c1 img:nth-child(n/**/+2) {
  display: none;
}




.sa-bundle-visual.c3 img:nth-child(1) {
  transform: translateX(-23%) rotate(-4deg);
}




.sa-bundle-visual.c3 img:nth-child(2) {
  z-index: 2;
  transform: translateY(-2%);
}




.sa-bundle-visual.c3 img:nth-child(3) {
  transform: translateX(23%) rotate(4deg);
}




.sa-bundle-visual.c6 img {
  width: 44%;
  height: 68%;
}




.sa-bundle-visual.c6 img:nth-child(1) {
  transform: translate(-43%, -18%) rotate(-5deg);
}



.sa-bundle-visual.c6 img:nth-child(2) {
  transform: translate(0, -21%);
}



.sa-bundle-visual.c6 img:nth-child(3) {
  transform: translate(43%, -18%) rotate(5deg);
}



.sa-bundle-visual.c6 img:nth-child(4) {
  transform: translate(-43%, 22%) rotate(-4deg);
}



.sa-bundle-visual.c6 img:nth-child(5) {
  z-index: 2;
  transform: translate(0, 20%);
}



.sa-bundle-visual.c6 img:nth-child(6) {
  transform: translate(43%, 22%) rotate(4deg);
}




.sa-price-label {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  margin-bottom: 10px;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--vh-orange-soft);
  color: #7b430e;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}




.sa-price-card h3 {
  font-size: 21px;
}




.sa-price-card > p {
  min-height: 70px;
  margin-top: 8px;
  color: var(--vh-muted);
  font-size: 14.5px;
  line-height: 1.48;
}




.sa-price {
  margin-top: auto;
  padding-top: 18px;
  color: var(--vh-navy);
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
}




.sa-price-unit {
  min-height: 38px;
  margin-top: 7px;
  color: var(--vh-muted);
  font-size: 13.5px;
}




.sa-price-card .vh-cta,
.sa-price-card .vh-cta-secondary {
  width: 100%;
  margin-top: 10px;
}




.sa-buy-note {
  margin-top: 18px;
  padding: 15px 17px;
  border: 1px solid var(--vh-line-dark);
  border-radius: 12px;
  background: #fff;
  color: var(--vh-muted);
  font-size: 13.5px;
  line-height: 1.52;
}




.sa-closing {
  padding: 72px 0 64px;
  background: #fff;
}




.sa-closing-grid {
  display: grid;
  gap: 28px;
}




.sa-closing-copy {
  max-width: 760px;
}




.sa-closing-copy h2 {
  margin: 12px 0 20px;
}




.sa-closing-copy p {
  color: #263238;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.74;
}




.sa-closing-copy p + p {
  margin-top: 15px;
}




.sa-final-card {
  display: grid;
  gap: 17px;
  align-content: center;
  padding: 24px;
  border-radius: 18px;
  background: var(--vh-navy);
  color: #fff;
}




.sa-final-card strong,
.sa-final-card h3 {
  color: #fff;
}




.sa-final-card h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
}




.sa-final-card p {
  color: rgba(255, 255, 255, .78);
  font-size: 14.5px;
  line-height: 1.52;
}




.sa-final-card img {
  width: 100%;
  height: 240px;
  object-fit: contain;
}




.sa-final-card .vh-cta {
  width: 100%;
}




.sa-important {
  margin-top: 38px;
  padding: 18px;
  border: 1px solid var(--vh-line-dark);
  border-radius: 12px;
  background: var(--vh-paper-warm);
}




.sa-important h3 {
  margin-bottom: 8px;
  font-size: 16px;
}




.sa-important p {
  color: var(--vh-muted);
  font-size: 12.8px;
  line-height: 1.52;
}




.sa-sources {
  padding: 34px 0 56px;
  border-top: 1px solid var(--vh-line);
  background: #fff;
}




.sa-sources h2 {
  margin-bottom: 14px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 17px;
  letter-spacing: 0;
}




.sa-sources ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 20px;
}




.sa-sources li {
  color: var(--vh-muted);
  font-size: 12.5px;
  line-height: 1.45;
}




.sa-sources a {
  color: var(--vh-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}




.vh-sticky-cta {
  background: rgba(255, 255, 255, .985);
}




.vh-sticky-inner {
  grid-template-columns: 1fr auto;
  align-items: center;
  max-width: 720px;
  gap: 10px 14px;
}




.vh-sticky-copy {
  text-align: left;
}




.vh-sticky-cta .vh-cta {
  min-height: 46px;
  white-space: nowrap;
}




.vh-sticky-inner > .micro {
  grid-column: 1 / -1;
  margin-top: -4px;
}




@media (min-width: 820px) {
  
.sa-hero {
  padding: 74px 0 58px;
}



  
.sa-hero-grid {
  grid-template-columns: minmax(0, 1.18fr) minmax(330px, .62fr);
  gap: 58px;
}



  
.sa-article-shell {
  grid-template-columns: 190px minmax(0, var(--sa-reading));
  justify-content: center;
  padding-top: 68px;
}



  
.sa-index {
  position: sticky;
  top: 98px;
}



  
.sa-product-reveal {
  width: min(980px, calc(100vw - 260px));
  margin-left: 0;
}



  
.sa-product-grid {
  grid-template-columns: minmax(0, .58fr) minmax(380px, .42fr);
}



  
.sa-product-copy {
  padding: 48px 46px;
}



  
.sa-product-image {
  min-height: 500px;
  padding: 34px;
}



  
.sa-occasions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}



  
.sa-occasion:nth-child(odd) {
  padding-right: 22px;
  border-right: 1px solid var(--vh-line-dark);
}



  
.sa-occasion:nth-child(even) {
  padding-left: 22px;
}



  
.sa-price-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}



  
.sa-price-card.is-featured {
  transform: translateY(-7px);
}



  
.sa-closing-grid {
  grid-template-columns: minmax(0, 1fr) 330px;
  align-items: start;
}


}



@media (max-width: 819px) {
  
.sa-header-label {
  display: none;
}



  
.sa-cover {
  min-height: 280px;
}



  
.sa-cover-card {
  min-height: 280px;
}



  
.sa-index {
  order: 1;
  margin-bottom: 12px;
}



  
.sa-article {
  order: 2;
}



  
.sa-index-card {
  padding: 14px 15px;
  border: 1px solid var(--vh-line);
  border-left: 4px solid var(--vh-orange);
  border-radius: 10px;
  background: var(--vh-paper-warm);
}



  
.sa-index a {
  display: inline;
}



  
.sa-index a + a::before {
  content: " · ";
  color: var(--vh-soft);
}



  
.sa-product-reveal {
  margin-inline: auto;
}



  
.sa-product-image {
  order: -1;
}



  
.sa-metabolism {
  grid-template-columns: 1fr;
}



  
.sa-arrow {
  transform: rotate(90deg);
  justify-self: center;
}



  
.sa-study-grid {
  grid-template-columns: 1fr;
}



  
.sa-study-cell,
  .sa-study-cell:nth-child(2n),
  .sa-study-cell:nth-last-child(-n + 2) {
  border-right: 0;
  border-bottom: 1px solid var(--vh-line);
}



  
.sa-study-cell:last-child {
  border-bottom: 0;
}



  
.sa-price-card > p,
  .sa-price-unit {
  min-height: 0;
}



  
.sa-price-card.is-featured {
  transform: none;
}


}



@media (max-width: 779px) {
  
body {
  padding-bottom: 110px;
}


}



@media (max-width: 560px) {

  
.sa-hero {
  padding: 34px 0 28px;
}



  
.sa-hero h1 {
  font-size: clamp(39px, 12vw, 52px);
}



  
.sa-deck {
  font-size: 19px;
}



  
.sa-cover {
  min-height: 250px;
}



  
.sa-cover-card {
  min-height: 250px;
  padding: 22px;
}



  
.sa-cover-main strong {
  font-size: 70px;
}



  
.sa-cover-bottom p {
  font-size: 12px;
}



  
.sa-clock {
  width: 67px;
  height: 67px;
  font-size: 11px;
}



  
.sa-article-shell {
  padding-top: 42px;
}



  
.sa-intro {
  margin-bottom: 46px;
}



  
.sa-article p {
  font-size: 17px;
  line-height: 1.72;
}



  
.sa-section {
  margin-bottom: 54px;
}



  
.sa-section h2 {
  font-size: 32px;
}



  
.sa-pullquote {
  margin: 43px -5px;
  padding-inline: 15px;
  font-size: 28px;
}



  
.sa-product-copy {
  padding: 27px 20px 24px;
}



  
.sa-product-image {
  min-height: 320px;
  padding: 22px;
}



  
.sa-product-photo {
  transform: none;
  border-radius: 16px;
}



  
.sa-pricing {
  padding-block: 54px 62px;
}



  
.sa-closing {
  padding-block: 58px 54px;
}



  
.vh-sticky-inner {
  grid-template-columns: 1fr;
}



  
.vh-sticky-copy {
  text-align: center;
}



  
.vh-sticky-inner > .micro {
  display: none;
}


}



/* =========================================================
   DEZENTER STANDARD-FOOTER V1.1
   Rechtlich vollständig, visuell bewusst zurückgenommen.
   ========================================================= */



.footer,
.vh-footer {
  padding-block: 14px 16px;
  border-top: 1px solid rgba(23, 33, 38, .10);
  background: #fbfaf7;
}




.footer-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
}




.footer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 10px;
  color: var(--vh-soft);
  font-size: 11.5px;
  line-height: 1.4;
}




.footer-brand {
  color: var(--vh-muted);
  font-weight: 720;
}




.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px 14px;
}




.footer-link {
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: var(--vh-soft);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  cursor: pointer;
  opacity: .88;
  appearance: none;
}




.footer-link:hover {
  color: var(--vh-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}




.footer-link:focus-visible {
  outline: 2px solid var(--vh-orange);
  outline-offset: 3px;
  border-radius: 2px;
}




@media (max-width: 779px) {
  
.footer-grid {
  display: grid;
  justify-content: stretch;
  gap: 8px;
}



  
.footer-links {
  justify-content: flex-start;
  gap: 5px 13px;
}


}



/* =========================================================
   VISUELLE STORY-ERWEITERUNG V1.6
   Fotorealistische redaktionelle Szenen als Teil der Dramaturgie.
   ========================================================= */



.sa-hero-photo {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  border-radius: 22px;
  box-shadow: 0 30px 70px rgba(11, 38, 51, .22);
  background: #102d3a;
}




.sa-hero-photo img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
}




.sa-hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 38, 51, .02), rgba(11, 38, 51, .22));
  pointer-events: none;
}




.sa-hero-photo figcaption {
  position: absolute;
  right: 14px;
  bottom: 12px;
  left: 14px;
  z-index: 2;
  padding: 9px 11px;
  border-radius: 9px;
  background: rgba(9, 28, 36, .72);
  color: rgba(255, 255, 255, .86);
  font-size: 11.5px;
  line-height: 1.4;
  backdrop-filter: blur(8px);
}




.sa-story-image {
  margin: 30px 0 36px;
}




.sa-story-image figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--vh-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--vh-shadow);
}




.sa-story-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}




.sa-story-image figcaption {
  padding: 10px 12px 11px;
  color: var(--vh-muted);
  font-size: 12px;
  line-height: 1.45;
}




.sa-story-image--wide {
  width: min(980px, calc(100vw - 260px));
  margin-left: 0;
}




.sa-occasion-gallery {
  display: grid;
  gap: 16px;
  margin: 30px 0 34px;
}




.sa-occasion-gallery figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--vh-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--vh-shadow);
}







.sa-occasion-gallery figcaption {
  padding: 10px 12px 11px;
  color: var(--vh-muted);
  font-size: 12px;
  line-height: 1.45;
}










.footer-visual-note {
  flex-basis: 100%;
  color: var(--vh-soft);
  font-size: 10.5px;
  line-height: 1.4;
  opacity: .82;
}




@media (min-width: 820px) {
  
.sa-occasion-gallery {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}



  
.sa-occasion-gallery figure:first-child {
  transform: translateY(10px);
}



  
.sa-occasion-gallery figure:last-child {
  transform: translateY(-10px);
}


}



@media (max-width: 819px) {
  
.sa-story-image--wide {
  width: 100%;
  margin-left: 0;
}



  
.sa-hero-photo,
  .sa-hero-photo img {
  min-height: 300px;
}


}



@media (max-width: 560px) {
  
.sa-hero-photo,
  .sa-hero-photo img {
  min-height: 250px;
}



  
.sa-story-image {
  margin-block: 24px 30px;
}



  
.sa-occasion-gallery img {
  min-height: 250px;
}


}




/* =========================================================
   V1.4 FEINKORREKTUREN
   Hero ohne frühe Produktabbildung, ruhiger Product Reveal,
   gleichmäßige Anlassbilder und Disclosure im Footer.
   ========================================================= */



.sa-hero-photo--editorial {
  aspect-ratio: 4 / 3;
  min-height: 0;
}




.sa-hero-photo--editorial img {
  min-height: 0;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
}




.sa-hero-photo--editorial::after {
  background: linear-gradient(180deg, rgba(11, 38, 51, 0), rgba(11, 38, 51, .09));
}




.sa-product-image {
  align-content: center;
}




.sa-product-photo--lifestyle {
  width: 100%;
  max-width: none;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  transform: none;
}




.sa-product-photo--lifestyle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: none;
}




.sa-product-image-caption {
  width: 100%;
  max-width: 430px;
  margin: 13px auto 0;
  color: rgba(255, 255, 255, .70) !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 12.5px !important;
  line-height: 1.45 !important;
  text-align: center;
}




.sa-occasion-gallery {
  align-items: stretch;
}




.sa-occasion-gallery figure {
  display: flex;
  flex-direction: column;
  height: 100%;
}




.sa-occasion-gallery img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}




.sa-occasion-gallery figcaption {
  min-height: 58px;
  margin-top: auto;
}




.footer-commercial-note,
.footer-visual-note {
  flex-basis: 100%;
  color: var(--vh-soft);
  font-size: 10.5px;
  line-height: 1.4;
  opacity: .82;
}




.footer-commercial-note {
  margin-top: 2px;
}




@media (min-width: 820px) {
  
.sa-hero-grid {
  grid-template-columns: minmax(0, 1.12fr) minmax(390px, .68fr);
  gap: 52px;
}



  
.sa-cover {
  min-height: 0;
}



  
.sa-product-reveal {
  width: min(1020px, calc(100vw - 250px));
}



  
.sa-product-grid {
  grid-template-columns: minmax(0, .56fr) minmax(410px, .44fr);
  align-items: stretch;
}



  
.sa-product-copy {
  padding: 44px 40px 42px;
}



  
.sa-product-image {
  min-height: 0;
  padding: 34px 34px 30px 12px;
}



  
.sa-occasion-gallery {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}



  
.sa-occasion-gallery figure:first-child,
  .sa-occasion-gallery figure:last-child {
  transform: none;
}


}



@media (max-width: 819px) {
  
.sa-hero-photo--editorial {
  aspect-ratio: 16 / 10;
}



  
.sa-product-image {
  padding: 22px 20px 28px;
}



  
.sa-product-image-caption {
  max-width: 520px;
}


}



@media (max-width: 560px) {
  
.sa-hero-photo--editorial {
  aspect-ratio: 4 / 3;
}



  
.sa-occasion-gallery figcaption {
  min-height: 0;
}


}




/* =========================================================
   V1.5 PRODUCT-REVEAL RESPONSIVE FIX
   Breiter als der Fließtext, aber immer innerhalb des
   verfügbaren Desktop-Rasters. Keine horizontale Überbreite.
   ========================================================= */



@media (min-width: 1100px) {
  
.sa-product-reveal {
  width: min(860px, calc(100vw - 260px));
  max-width: none;
}



  
.sa-product-grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
}



  
.sa-product-copy {
  min-width: 0;
  padding: 42px 38px 40px;
}



  
.sa-product-copy h2 {
  font-size: clamp(36px, 3.45vw, 48px);
  overflow-wrap: normal;
  word-break: normal;
  hyphens: auto;
}



  
.sa-product-image {
  min-width: 0;
  padding: 32px 30px 28px 10px;
}


}



@media (min-width: 820px) and (max-width: 1099px) {
  
.sa-product-reveal {
  width: min(100%, calc(100vw - 260px));
  max-width: 760px;
}



  
.sa-product-grid {
  grid-template-columns: minmax(0, 1fr);
}



  
.sa-product-image {
  order: -1;
  min-width: 0;
  padding: 28px 28px 20px;
}



  
.sa-product-copy {
  min-width: 0;
  padding: 34px 32px 38px;
}



  
.sa-product-copy h2 {
  font-size: clamp(34px, 5vw, 44px);
  overflow-wrap: normal;
  word-break: normal;
  hyphens: auto;
}



  
.sa-product-photo--lifestyle {
  max-width: 620px;
  margin-inline: auto;
}


}




/* =========================================================
   V1.6 MOBILE-FEINSCHLIFF
   Desktop bleibt unverändert.
   ========================================================= */



@media (max-width: 560px) {
  
/* H1 auf kleinen Displays deutlich ruhiger */

  
.sa-hero h1 {
  font-size: clamp(34px, 9.3vw, 42px);
  line-height: 1.01;
  letter-spacing: -.04em;
}



  
/* Subnavigation als echte Navigation erkennbar */

  
.sa-index-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 9px;
  padding: 15px;
  border: 1px solid var(--vh-line-dark);
  border-left: 4px solid var(--vh-orange);
  border-radius: 12px;
  background: #fffaf3;
  box-shadow: 0 10px 26px rgba(20, 36, 43, .06);
}



  
.sa-index-title {
  grid-column: 1 / -1;
  margin-bottom: 2px;
  font-size: 11px;
  letter-spacing: .09em;
}



  
.sa-index a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  padding: 9px 10px;
  border: 1px solid rgba(23, 33, 38, .10);
  border-radius: 9px;
  background: #fff;
  color: var(--vh-navy);
  font-size: 12px;
  font-weight: 720;
  line-height: 1.25;
}



  
.sa-index a::after {
  content: "↓";
  flex: 0 0 auto;
  margin-left: 7px;
  color: var(--vh-orange);
  font-size: 13px;
  font-weight: 900;
}



  
.sa-index a + a::before {
  content: none;
}



  
/* Für geplante lange Abende: mobil nur das stärkere Motiv */

  
.sa-occasion-gallery {
  grid-template-columns: 1fr;
}



  
.sa-occasion-gallery figure:first-child {
  display: none;
}



  
.sa-occasion-gallery figure:last-child {
  display: flex;
  transform: none;
}


}



@media (max-width: 420px) {
  
.sa-index-card {
  grid-template-columns: 1fr;
}


}

/* VerbraucherHeute Brand Responsive */
@media (max-width: 559px) {
  .brand,
  .brand-vh,
  .vh-brand {
    gap: 10px;
  }

  .brand-mark,
  .vh-brand-mark {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    border-radius: 9px;
  }

  .brand-name,
  .vh-brand-name {
    font-size: 21px;
  }

  .brand-claim,
  .vh-brand-claim {
    display: none;
  }
}

@media (max-width: 370px) {
  .brand-mark,
  .vh-brand-mark {
    width: 37px;
    height: 37px;
    flex-basis: 37px;
  }

  .brand-name,
  .vh-brand-name {
    font-size: 19px;
  }
}

/* =========================================================
   VH STORY V2.2 · GLOBAL MEDIA FIX
   Marker: VH_MEDIA_FIX_2201

   Grundprinzip:
   - Jede feste Bildbox ist ein positionierter Media-Frame.
   - Das Bild wird absolut in diesen Frame eingespannt.
   - object-fit: contain zeigt das vollständige Motiv.
   - Intrinsische Bildmaße können Grid/Flex nicht mehr sprengen.
   - Bewusster Beschnitt ist nur noch per .vh-media-cover erlaubt.
   ========================================================= */

:root {
  --vh-media-inset: 12px;
  --vh-media-fix-version: 2201;
}

img,
picture {
  max-width: 100%;
}

/* ---------------------------------------------------------
   A. FESTE MEDIA-FRAMES
   --------------------------------------------------------- */

:where(
  .vh-price-media,
  .lk-price-image,
  .offer-card-image,
  .offer-hero-product,
  .offer-final-image,
  .result-product-image,
  .finder-product,
  .finder-offer-image,
  .male-ingredient-image,
  .male-offer-image,
  .male-side-image,
  .male-final-image,
  .male-ingredient-media,
  .sa-hero-photo,
  .lk-hero-photo,
  .quiz-hero-photo,
  .male-hero-image,
  .sa-product-photo,
  .lk-product-photo,
  .reveal-media,
  .male-product-image
) {
  position: relative !important;
  display: block !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  isolation: isolate !important;
  contain: layout paint !important;
  padding: 0 !important;
}

:where(
  .vh-price-media,
  .lk-price-image,
  .offer-card-image,
  .offer-hero-product,
  .offer-final-image,
  .result-product-image,
  .finder-product,
  .finder-offer-image,
  .male-ingredient-image,
  .male-offer-image,
  .male-side-image,
  .male-final-image,
  .male-ingredient-media,
  .sa-hero-photo,
  .lk-hero-photo,
  .quiz-hero-photo,
  .male-hero-image,
  .sa-product-photo,
  .lk-product-photo,
  .reveal-media,
  .male-product-image
) > img {
  position: absolute !important;
  z-index: 1 !important;
  top: var(--vh-media-inset) !important;
  right: var(--vh-media-inset) !important;
  bottom: var(--vh-media-inset) !important;
  left: var(--vh-media-inset) !important;
  display: block !important;
  width: calc(100% - var(--vh-media-inset) - var(--vh-media-inset)) !important;
  height: calc(100% - var(--vh-media-inset) - var(--vh-media-inset)) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}

:where(
  .vh-price-media,
  .lk-price-image,
  .offer-card-image,
  .offer-hero-product,
  .offer-final-image,
  .result-product-image,
  .finder-product,
  .finder-offer-image,
  .male-ingredient-image,
  .male-offer-image,
  .male-side-image,
  .male-final-image,
  .male-ingredient-media,
  .sa-hero-photo,
  .lk-hero-photo,
  .quiz-hero-photo,
  .male-hero-image,
  .sa-product-photo,
  .lk-product-photo,
  .reveal-media,
  .male-product-image
) > picture {
  position: absolute !important;
  z-index: 1 !important;
  top: var(--vh-media-inset) !important;
  right: var(--vh-media-inset) !important;
  bottom: var(--vh-media-inset) !important;
  left: var(--vh-media-inset) !important;
  display: block !important;
  width: calc(100% - var(--vh-media-inset) - var(--vh-media-inset)) !important;
  height: calc(100% - var(--vh-media-inset) - var(--vh-media-inset)) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

:where(
  .vh-price-media,
  .lk-price-image,
  .offer-card-image,
  .offer-hero-product,
  .offer-final-image,
  .result-product-image,
  .finder-product,
  .finder-offer-image,
  .male-ingredient-image,
  .male-offer-image,
  .male-side-image,
  .male-final-image,
  .male-ingredient-media,
  .sa-hero-photo,
  .lk-hero-photo,
  .quiz-hero-photo,
  .male-hero-image,
  .sa-product-photo,
  .lk-product-photo,
  .reveal-media,
  .male-product-image
) > picture > img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}

:where(
  .offer-hero-badge,
  .finder-badge,
  .male-product-overlay,
  .sa-product-image-caption,
  .visual-caption
) {
  z-index: 3 !important;
}

:where(
  .vh-price-media,
  .lk-price-image,
  .offer-card-image,
  .result-product-image,
  .finder-offer-image,
  .male-offer-image,
  .male-side-image,
  .male-final-image,
  .male-ingredient-image,
  .male-ingredient-media
) {
  --vh-media-inset: 14px;
}

:where(
  .offer-hero-product,
  .offer-final-image,
  .finder-product
) {
  --vh-media-inset: 16px;
}

:where(
  .sa-hero-photo,
  .lk-hero-photo,
  .quiz-hero-photo,
  .male-hero-image,
  .sa-product-photo,
  .lk-product-photo,
  .reveal-media,
  .male-product-image
) {
  --vh-media-inset: 0px;
}

/* ---------------------------------------------------------
   B. FIGUREN MIT CAPTION
   --------------------------------------------------------- */

:where(
  .vh-image-card,
  .lk-story-image figure,
  .lk-ingredients-image,
  .offer-mechanism-image,
  .quiz-explain-image,
  .male-ingredients-image
) {
  min-width: 0 !important;
  overflow: hidden !important;
}

:where(
  .vh-image-card,
  .lk-story-image figure,
  .lk-ingredients-image,
  .offer-mechanism-image,
  .quiz-explain-image,
  .male-ingredients-image
) > img,
:where(
  .vh-image-card,
  .lk-story-image figure,
  .lk-ingredients-image,
  .offer-mechanism-image,
  .quiz-explain-image,
  .male-ingredients-image
) > picture > img {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}

/* ---------------------------------------------------------
   C. 1-/3-/6-PAKET-KOMPONENTE
   --------------------------------------------------------- */

.sa-bundle-visual {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  isolation: isolate !important;
  contain: layout paint !important;
}

.sa-bundle-visual > img {
  position: absolute !important;
  display: block !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  object-fit: contain !important;
  object-position: center !important;
}

.sa-bundle-visual.c1 > img {
  width: 45% !important;
  height: 86% !important;
}

.sa-bundle-visual.c3 > img {
  width: 48% !important;
  height: 75% !important;
}

.sa-bundle-visual.c3 > img:nth-child(1) {
  transform: translateX(-22%) rotate(-3deg) !important;
}

.sa-bundle-visual.c3 > img:nth-child(2) {
  z-index: 2 !important;
  transform: translateY(-1%) !important;
}

.sa-bundle-visual.c3 > img:nth-child(3) {
  transform: translateX(22%) rotate(3deg) !important;
}

.sa-bundle-visual.c6 > img {
  width: 36% !important;
  height: 55% !important;
}

.sa-bundle-visual.c6 > img:nth-child(1) {
  transform: translate(-38%, -18%) rotate(-4deg) !important;
}

.sa-bundle-visual.c6 > img:nth-child(2) {
  transform: translate(0, -19%) !important;
}

.sa-bundle-visual.c6 > img:nth-child(3) {
  transform: translate(38%, -18%) rotate(4deg) !important;
}

.sa-bundle-visual.c6 > img:nth-child(4) {
  transform: translate(-38%, 19%) rotate(-3deg) !important;
}

.sa-bundle-visual.c6 > img:nth-child(5) {
  z-index: 2 !important;
  transform: translate(0, 18%) !important;
}

.sa-bundle-visual.c6 > img:nth-child(6) {
  transform: translate(38%, 19%) rotate(3deg) !important;
}

/* ---------------------------------------------------------
   D. BEWUSSTER BESCHNITT NUR PER OPT-IN
   --------------------------------------------------------- */

.vh-media-cover > img,
.vh-media-cover > picture > img,
img.vh-media-cover,
[data-vh-media-fit="cover"] > img,
[data-vh-media-fit="cover"] > picture > img {
  object-fit: cover !important;
}

/* ---------------------------------------------------------
   E. MOBILE
   --------------------------------------------------------- */

@media (max-width: 560px) {
  :root {
    --vh-media-inset: 10px;
  }

  :where(
    .vh-price-media,
    .lk-price-image,
    .offer-card-image,
    .result-product-image,
    .finder-offer-image,
    .male-offer-image,
    .male-side-image,
    .male-final-image,
    .male-ingredient-image,
    .male-ingredient-media
  ) {
    --vh-media-inset: 12px;
  }

  .sa-bundle-visual.c1 > img {
    width: 43% !important;
    height: 84% !important;
  }

  .sa-bundle-visual.c3 > img {
    width: 46% !important;
    height: 72% !important;
  }

  .sa-bundle-visual.c6 > img {
    width: 34% !important;
    height: 52% !important;
  }
}

/* =========================================================
   VH STORY V2.3 · MEDIA MODE SPLIT
   Marker: VH_MEDIA_FIX_2301

   V2.2 war zu breit:
   Editorial- und Lifestyle-Bilder wurden ebenfalls wie feste
   Produktstages behandelt. Das erzeugte künstliche Rahmen,
   Leerflächen und kollabierende Hero-Produktdarstellungen.

   V2.3 trennt:
   1. natürliche redaktionelle Bilder
   2. begrenzte Produkt- und Preisstages
   ========================================================= */

:root {
  --vh-media-fix-version: 2301;
}

/* ---------------------------------------------------------
   A. REDAKTIONELLE UND LIFESTYLE-BILDER
   Natürliche Höhe, kein innerer Frame, keine künstliche
   Einspannung, kein zusätzlicher Weißraum.
   --------------------------------------------------------- */

:where(
  .vh-image-card,
  .sa-hero-photo,
  .sa-story-image,
  .lk-hero-photo,
  .lk-story-image,
  .lk-story-image figure,
  .lk-ingredients-image,
  .offer-mechanism-image,
  .quiz-hero-photo,
  .quiz-explain-image,
  .male-hero-image,
  .male-product-image,
  .male-ingredient-image,
  .male-ingredient-media,
  .sa-product-photo,
  .lk-product-photo,
  .reveal-media
) {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  contain: none !important;
}

:where(
  .vh-image-card,
  .sa-hero-photo,
  .sa-story-image,
  .lk-hero-photo,
  .lk-story-image,
  .lk-story-image figure,
  .lk-ingredients-image,
  .offer-mechanism-image,
  .quiz-hero-photo,
  .quiz-explain-image,
  .male-hero-image,
  .male-product-image,
  .male-ingredient-image,
  .male-ingredient-media,
  .sa-product-photo,
  .lk-product-photo,
  .reveal-media
) > picture {
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

:where(
  .vh-image-card,
  .sa-hero-photo,
  .sa-story-image,
  .lk-hero-photo,
  .lk-story-image,
  .lk-story-image figure,
  .lk-ingredients-image,
  .offer-mechanism-image,
  .quiz-hero-photo,
  .quiz-explain-image,
  .male-hero-image,
  .male-product-image,
  .male-ingredient-image,
  .male-ingredient-media,
  .sa-product-photo,
  .lk-product-photo,
  .reveal-media
) > img,
:where(
  .vh-image-card,
  .sa-hero-photo,
  .sa-story-image,
  .lk-hero-photo,
  .lk-story-image,
  .lk-story-image figure,
  .lk-ingredients-image,
  .offer-mechanism-image,
  .quiz-hero-photo,
  .quiz-explain-image,
  .male-hero-image,
  .male-product-image,
  .male-ingredient-image,
  .male-ingredient-media,
  .sa-product-photo,
  .lk-product-photo,
  .reveal-media
) > picture > img {
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  object-fit: initial !important;
  object-position: center !important;
}

/* Bildunterschriften bleiben normal unter dem Bild. */
:where(
  .vh-image-card,
  .lk-story-image figure,
  .lk-ingredients-image,
  .offer-mechanism-image,
  .quiz-explain-image
) > figcaption {
  position: static !important;
}

/* ---------------------------------------------------------
   B. PRODUKT- UND PREISSTAGES
   Feste Box, vollständiges Produkt, kein Übermalen von Copy.
   Das Bild bleibt als normales Grid-Element im Container.
   --------------------------------------------------------- */

:where(
  .vh-price-media,
  .vh-media-product,
  .vh-image-card--product,
  .vh-hero-product .vh-image-card,
  .vh-final-box .vh-image-card,
  .lk-price-image,
  .lk-product-image,
  .offer-card-image,
  .offer-final-image,
  .result-product-image,
  .finder-product,
  .finder-offer-image,
  .male-offer-image,
  .male-side-image,
  .male-final-image
) {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  isolation: isolate !important;
  contain: paint !important;
}

:where(
  .vh-price-media,
  .vh-media-product,
  .vh-image-card--product,
  .vh-hero-product .vh-image-card,
  .vh-final-box .vh-image-card,
  .lk-price-image,
  .lk-product-image,
  .offer-card-image,
  .offer-final-image,
  .result-product-image,
  .finder-product,
  .finder-offer-image,
  .male-offer-image,
  .male-side-image,
  .male-final-image
) > picture {
  position: static !important;
  inset: auto !important;
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

:where(
  .vh-price-media,
  .vh-media-product,
  .vh-image-card--product,
  .vh-hero-product .vh-image-card,
  .vh-final-box .vh-image-card,
  .lk-price-image,
  .lk-product-image,
  .offer-card-image,
  .offer-final-image,
  .result-product-image,
  .finder-product,
  .finder-offer-image,
  .male-offer-image,
  .male-side-image,
  .male-final-image
) > img,
:where(
  .vh-price-media,
  .vh-media-product,
  .vh-image-card--product,
  .vh-hero-product .vh-image-card,
  .vh-final-box .vh-image-card,
  .lk-price-image,
  .lk-product-image,
  .offer-card-image,
  .offer-final-image,
  .result-product-image,
  .finder-product,
  .finder-offer-image,
  .male-offer-image,
  .male-side-image,
  .male-final-image
) > picture > img {
  position: static !important;
  inset: auto !important;
  display: block !important;
  align-self: center !important;
  justify-self: center !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}

/* ---------------------------------------------------------
   C. ANGEBOTS-HERO
   Eigene Produktstage: sichtbar, zentriert und vollständig.
   Kein absolut positioniertes Bild mehr.
   --------------------------------------------------------- */

.offer-hero-product {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  min-height: 390px !important;
  overflow: hidden !important;
  isolation: isolate !important;
  contain: paint !important;
}

.offer-hero-product > img,
.offer-hero-product > picture {
  position: static !important;
  inset: auto !important;
  z-index: 1 !important;
  display: block !important;
  width: 82% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 82% !important;
  max-height: 330px !important;
  margin: auto !important;
  padding: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}

.offer-hero-product > picture {
  display: grid !important;
  place-items: center !important;
}

.offer-hero-product > picture > img {
  position: static !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

.offer-hero-badge {
  z-index: 4 !important;
}

/* ---------------------------------------------------------
   D. SA-BUNDLE-VISUAL BLEIBT PRODUKTSPEZIFISCH
   Die funktionierende 1-/3-/6-Paketdarstellung aus V2.2
   wird bewusst nicht zurückgesetzt.
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   E. MOBILE
   Redaktionelle Bilder bleiben natürlich; Produktstages
   bleiben begrenzt.
   --------------------------------------------------------- */

@media (max-width: 560px) {
  .offer-hero-product {
    min-height: 280px !important;
  }

  .offer-hero-product > img,
  .offer-hero-product > picture {
    width: 78% !important;
    height: auto !important;
    max-width: 78% !important;
    max-height: 225px !important;
  }

  :where(
    .vh-image-card,
    .sa-story-image,
    .lk-story-image,
    .lk-story-image figure,
    .lk-ingredients-image,
    .offer-mechanism-image,
    .quiz-explain-image
  ) > img,
  :where(
    .vh-image-card,
    .sa-story-image,
    .lk-story-image,
    .lk-story-image figure,
    .lk-ingredients-image,
    .offer-mechanism-image,
    .quiz-explain-image
  ) > picture > img {
    height: auto !important;
    max-height: none !important;
  }
}

/* =========================================================
   VH STORY V2.3 · LEBERKUR FOCUS FIX 2302
   Ausschließlich zwei Restprobleme:
   1. Lifestyle-Bilder in den dunklen/grünen Leberkur-Boxen
      füllen ihren vorgesehenen Rahmen wieder vollständig.
   2. Die Mechanismus-Section der Angebotsseite ist oben
      statt vertikal mittig ausgerichtet.
   ========================================================= */

/* ---------------------------------------------------------
   1. DUNKLE / GRÜNE LEBERKUR-BILDBOXEN
   Hier ist ein kontrollierter redaktioneller Beschnitt
   ausdrücklich gewollt. Produkt- und Preis-Packshots bleiben
   weiterhin vollständig sichtbar.
   --------------------------------------------------------- */

.lk-product-reveal .lk-product-photo,
body[data-vh-lp-id="LK-H1-01"] .lk-hero-photo {
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  contain: paint !important;
}

/* Long-/Compact-Product-Reveal */
.lk-product-reveal .lk-product-photo {
  aspect-ratio: 16 / 9 !important;
}

/* Hybrid-Hero */
body[data-vh-lp-id="LK-H1-01"] .lk-hero-photo {
  aspect-ratio: 16 / 10 !important;
}

.lk-product-reveal .lk-product-photo > picture,
body[data-vh-lp-id="LK-H1-01"] .lk-hero-photo > picture {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.lk-product-reveal .lk-product-photo > img,
.lk-product-reveal .lk-product-photo > picture > img,
body[data-vh-lp-id="LK-H1-01"] .lk-hero-photo > img,
body[data-vh-lp-id="LK-H1-01"] .lk-hero-photo > picture > img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  object-fit: cover !important;
  object-position: center !important;
  transform: none !important;
}

/* Produktbeutel im Reveal möglichst vollständig im Bild halten. */
.lk-product-reveal .lk-product-photo > img,
.lk-product-reveal .lk-product-photo > picture > img {
  object-position: 46% center !important;
}

/* ---------------------------------------------------------
   2. ANGEBOTSSEITE: MECHANISMUS-SECTION
   Bild und Kicker/Headline beginnen auf derselben Höhe.
   --------------------------------------------------------- */

body[data-vh-lp-id="LK-O1-01"] .offer-mechanism {
  align-items: start !important;
}

body[data-vh-lp-id="LK-O1-01"] .offer-mechanism-image,
body[data-vh-lp-id="LK-O1-01"] .offer-mechanism-copy {
  align-self: start !important;
}

body[data-vh-lp-id="LK-O1-01"] .offer-mechanism-image {
  margin-top: 0 !important;
}

@media (max-width: 560px) {
  body[data-vh-lp-id="LK-H1-01"] .lk-hero-photo {
    aspect-ratio: 4 / 3 !important;
  }

  .lk-product-reveal .lk-product-photo {
    aspect-ratio: 4 / 3 !important;
  }
  
}

/* =========================================================
   VH STORY V2.3 · MOBILE FINAL FIX
   1. Hero-Figure bleibt vollständig im Seitenraster.
   2. Pflanzenbild behält sein ursprüngliches Seitenverhältnis.
   ========================================================= */

@media (max-width: 560px) {

  /* Standard-Figure-Margin des Browsers entfernen.
     Genau dieses Margin hat das Hero-Bild rechts aus dem Raster geschoben. */
  figure.sa-hero-photo,
  figure.lk-hero-photo {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    justify-self: stretch !important;
  }

  figure.sa-hero-photo > img,
  figure.sa-hero-photo > picture,
  figure.sa-hero-photo > picture > img,
  figure.lk-hero-photo > img,
  figure.lk-hero-photo > picture,
  figure.lk-hero-photo > picture > img {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Die alte Mobile-Regel aspect-ratio: 4 / 3 verzerrt das
     breite Pflanzenmotiv. Deshalb wieder das Originalverhältnis nutzen. */
  .lk-story-image,
  .lk-story-image figure {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
  }

  .lk-story-image figure > img,
  .lk-story-image figure > picture,
  .lk-story-image figure > picture > img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    box-sizing: border-box !important;
  }
}
/* =========================================================
   VH STORY V2.3.1 · GLOBAL SOCIAL-PROOF COMPONENT
   Marker: VH_PROOF_COMPONENT_2305

   Ersetzt vollständig:
   VH_PROOF_COMPONENT_2304

   Wiederverwendbar für:
   - Long Story
   - Compact Story
   - Hybrid
   - Offer
   - Quiz-Ergebnis

   Neutrale Klassen:
   .vh-proof-section
   .vh-proof-head
   .vh-proof-summary
   .vh-proof-grid
   .vh-proof-card
   .vh-proof-note

   Legacy-Unterstützung:
   Die bestehenden male-* Klassen der Bierbauch-Seite
   werden weiterhin unterstützt, aber ausschließlich
   innerhalb von .male-proof-section.
   ========================================================= */

:root {
  --vh-proof-bg: #f4efe5;
  --vh-proof-card-bg: #ffffff;
  --vh-proof-border: var(--vh-line-dark, #d7d1c7);
  --vh-proof-green: #52654e;
  --vh-proof-green-soft: #edf2e9;
  --vh-proof-star: #e69b17;
}

/* ---------------------------------------------------------
   SECTION
   --------------------------------------------------------- */

.vh-proof-section,
.male-proof-section {
  padding: 58px 0 66px;
  background: var(--vh-proof-bg);
}

.vh-proof-head,
.male-proof-section .male-section-head {
  max-width: 820px;
  margin-bottom: 24px;
}

.vh-proof-kicker,
.male-proof-section .male-kicker {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  gap: 9px;
  color: var(--vh-proof-green);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: .085em;
  text-transform: uppercase;
}

.vh-proof-kicker::before,
.male-proof-section .male-kicker::before {
  content: "";
  width: 34px;
  height: 3px;
  flex: 0 0 auto;
  background: var(--vh-orange, #df6a16);
}

.vh-proof-head h2,
.male-proof-section .male-section-head h2 {
  margin: 9px 0 12px;
}

.vh-proof-head > p,
.male-proof-section .male-section-head > p {
  color: var(--vh-muted, #68747b);
  font-size: 16px;
  line-height: 1.57;
}

/* ---------------------------------------------------------
   RATING SUMMARY
   --------------------------------------------------------- */

.vh-proof-summary,
.male-proof-section .male-rating-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 11px 17px;
  margin-bottom: 20px;
  padding: 15px 17px;
  border: 1px solid var(--vh-proof-border);
  border-radius: 14px;
  background: var(--vh-proof-card-bg);
  box-shadow: var(
    --vh-shadow,
    0 14px 35px rgba(18, 41, 49, .08)
  );
}

.vh-proof-score,
.male-proof-section .male-rating-big {
  flex: 0 0 auto;
  color: var(--vh-proof-green);
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
}

.vh-proof-stars,
.male-proof-section .male-stars {
  color: var(--vh-proof-star);
  font-size: 16px;
  line-height: 1;
  letter-spacing: .04em;
  white-space: nowrap;
}

.vh-proof-rating-copy,
.male-proof-section .male-rating-copy {
  min-width: 0;
}

.vh-proof-rating-copy strong,
.male-proof-section .male-rating-copy strong {
  display: block;
  margin-bottom: 2px;
  font-size: 14px;
}

.vh-proof-rating-copy span,
.male-proof-section .male-rating-copy span {
  color: var(--vh-muted, #68747b);
  font-size: 11.5px;
  line-height: 1.4;
}

/* ---------------------------------------------------------
   TESTIMONIAL GRID
   --------------------------------------------------------- */

.vh-proof-grid,
.male-proof-section .male-testimonials {
  display: grid;
  gap: 15px;
}

.vh-proof-card,
.male-proof-section .male-testimonial {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--vh-proof-border);
  border-radius: 15px;
  background: var(--vh-proof-card-bg);
  box-shadow: var(
    --vh-shadow,
    0 14px 35px rgba(18, 41, 49, .08)
  );
}

.vh-proof-card-head,
.male-proof-section .male-testimonial-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.vh-proof-person,
.male-proof-section .male-testimonial-name {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-width: 0;
}

.vh-proof-avatar,
.male-proof-section .male-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--vh-navy, #0c2b4e);
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.vh-proof-person strong,
.male-proof-section .male-testimonial-name strong {
  display: block;
  margin-bottom: 1px;
  font-size: 13px;
}

.vh-proof-verified,
.male-proof-section .male-verified {
  display: block;
  color: var(--vh-proof-green);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.35;
}

.vh-proof-card h3,
.male-proof-section .male-testimonial h3 {
  margin: 0 0 8px;
  overflow-wrap: anywhere;
  color: var(--vh-ink, #142127);
  font-size: 19px;
  line-height: 1.18;
}

.vh-proof-card p,
.male-proof-section .male-testimonial p {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--vh-muted, #68747b);
  font-size: 13.5px;
  line-height: 1.52;
}

/* ---------------------------------------------------------
   NOTE
   --------------------------------------------------------- */

.vh-proof-note,
.male-proof-section .male-testimonial-note {
  margin-top: 17px;
  color: var(--vh-soft, #8a9499);
  font-size: 10.5px;
  line-height: 1.45;
}

/* ---------------------------------------------------------
   OPTIONAL MODIFIERS
   --------------------------------------------------------- */

/*
   COMPACT

   Zeigt auf allen Bildschirmgrößen maximal zwei Karten.
   Geeignet für Long Story, Compact Story oder Quiz-Ergebnis.
*/

.vh-proof-section.is-compact,
.male-proof-section.is-compact {
  padding-block: 48px 54px;
}

.vh-proof-section.is-compact .vh-proof-grid,
.male-proof-section.is-compact .male-testimonials {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vh-proof-section.is-compact .vh-proof-card:nth-child(n + 3),
.male-proof-section.is-compact .male-testimonial:nth-child(n + 3) {
  display: none;
}

/*
   FULL

   Geeignet für Offer-Seiten oder besonders starke
   Social-Proof-Abschnitte.
*/

.vh-proof-section.is-full .vh-proof-summary,
.male-proof-section.is-full .male-rating-summary {
  border-color: rgba(82, 101, 78, .35);
}

.vh-proof-section.is-full .vh-proof-card,
.male-proof-section.is-full .male-testimonial {
  min-height: 100%;
}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (min-width: 620px) {
  .vh-proof-grid,
  .male-proof-section .male-testimonials {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .vh-proof-section.is-compact .vh-proof-grid,
  .male-proof-section.is-compact .male-testimonials {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 619px) {
  .vh-proof-section,
  .male-proof-section {
    padding-block: 48px 54px;
  }

  .vh-proof-summary,
  .male-proof-section .male-rating-summary {
    align-items: flex-start;
  }

  .vh-proof-grid,
  .male-proof-section .male-testimonials,
  .vh-proof-section.is-compact .vh-proof-grid,
  .male-proof-section.is-compact .male-testimonials {
    grid-template-columns: 1fr;
  }

  .vh-proof-card,
  .male-proof-section .male-testimonial {
    padding: 16px;
  }

  .vh-proof-card-head,
  .male-proof-section .male-testimonial-head {
    align-items: flex-start;
  }
}