/** Shopify CDN: Minification failed

Line 739:0 Unexpected "<"
Line 744:5 Unexpected "{"
Line 744:6 Expected identifier but found "-"
Line 745:4 Unexpected "<"
Line 748:9 Unexpected "{"
Line 748:18 Expected ":"
Line 749:6 Unexpected "<"
Line 750:7 Expected identifier but found "%"
Line 751:8 Unexpected "<"
Line 751:32 Unexpected "{"
... and 2 more hidden warnings

**/
  /* ── Kombi-Card Farb-Variablen — werden auf .vbg-kb3-Wrapper gesetzt
     damit die Card-Styles sowohl auf Produktseiten (Kombi-Section) als auch
     auf der Collection-Page (Featured-Sets) identisch funktionieren. ── */
  .vbg-kb3 {
    --kb-ink:        #1a2b21;
    --kb-ink-soft:   #4a5a50;
    --kb-forest:     #2c5f3f;
    --kb-forest-dk:  #1a3d28;
    --kb-moss:       #243d2f;
    --kb-moss-dk:    #1a2e22;
    --kb-gold:       #c9973a;
    --kb-gold-lt:    #e2c97e;
    --kb-gold-deep:  #a8802a;
  }

  .vbg-kombi-spacer { display: none; }

  /* ── HEADER ── */
  .vbg-kb3-eyebrow {
    font-family: var(--vbg-ff-body);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--kb-gold-lt);
    text-align: center;
    margin: 0 0 14px;
  }
  .vbg-kb3-headline {
    font-family: var(--vbg-ff-display);
    font-size: clamp(1.95rem, 4.2vw, 3.1rem);
    font-weight: 300;
    line-height: 1.06;
    letter-spacing: -0.024em;
    color: #fefcf3;
    text-align: center;
    max-width: 22ch;
    margin: 0 auto;
    text-wrap: balance;
  }
  .vbg-kb3-headline em {
    font-style: italic;
    font-weight: 300;
    color: var(--kb-gold-lt);
  }
  .vbg-kb3-sub {
    font-family: var(--vbg-ff-display);
    font-style: italic;
    font-size: clamp(0.95rem, 1.2vw, 1.08rem);
    color: rgba(254, 252, 243, 0.7);
    text-align: center;
    margin: 14px auto 0;
    max-width: 50ch;
  }

  /* ── GRID ── */
  .vbg-kombi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 32px;
    margin-top: clamp(40px, 5vh, 64px);
    /* Alle Rows gleich hoch damit alle Cards gleich gross sind */
    grid-auto-rows: 1fr;
  }

  /* ── CARD — Modern Flat White ── */
  .vbg-kb3 a.vbg-kombi-card {
    display: flex !important;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    position: relative;
    background: #ffffff !important;
    border: 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    isolation: isolate;
    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.08),
      0 24px 48px -16px rgba(0, 0, 0, 0.4) !important;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.5s ease;
  }
  .vbg-kb3 a.vbg-kombi-card:hover {
    transform: translateY(-6px);
    box-shadow:
      0 2px 4px rgba(0, 0, 0, 0.1),
      0 36px 64px -16px rgba(0, 0, 0, 0.55) !important;
  }
  /* Highlight Card — DEUTLICHER Goldrahmen laut User-Spec "satter Rahmen,
     nicht dezent". 4px echte Border (statt nur 2px box-shadow-Ring) plus
     warmer Gold-Glow als Hierarchie-Booster. Die Bestseller-Karte muss
     auf einen Blick als "die gefuehrte Karte" erkennbar sein. */
  .vbg-kb3 a.vbg-kombi-card.vbg-kombi-card-highlight {
    border: 4px solid var(--kb-gold) !important;
    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.08),
      0 24px 48px -16px rgba(0, 0, 0, 0.45),
      0 0 36px -6px rgba(201, 151, 58, 0.40) !important;
  }
  .vbg-kb3 a.vbg-kombi-card.vbg-kombi-card-highlight:hover {
    box-shadow:
      0 2px 4px rgba(0, 0, 0, 0.1),
      0 36px 64px -16px rgba(0, 0, 0, 0.6),
      0 0 56px -8px rgba(201, 151, 58, 0.60) !important;
  }

  /* ── EMPFEHLUNGS-BAND (NUR Bestseller-Karte) ──
     Vollbreiter Gold-Banner ganz oben in der Card. Versalien-Text dunkel
     auf Gold-Gradient, zentriert. Nimmt seinen eigenen Layout-Platz im
     flex-column der Card → schiebt img-wrap natuerlich nach unten. */
  .vbg-kb3 .vbg-kombi-recommend-band {
    display: block;
    background: linear-gradient(90deg, #CDAE71 0%, #E2C97E 50%, #B19050 100%);
    color: #1a2b21;
    font-family: var(--vbg-ff-body);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-align: center;
    padding: 11px 16px 10px;
    line-height: 1.2;
    flex-shrink: 0;
  }
  @media (max-width: 600px) {
    .vbg-kb3 .vbg-kombi-recommend-band {
      font-size: 0.62rem;
      letter-spacing: 0.18em;
      padding: 10px 14px 9px;
    }
  }

  /* Bestseller — minimal gold pill, override global */
  .vbg-kb3 .vbg-kombi-bestseller {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    padding: 6px 12px 5px !important;
    background: linear-gradient(90deg, #CDAE71 0%, #D6BC8B 50%, #B19050 100%) !important;
    border: 0 !important;
    color: #1a1a1a !important;
    font-family: var(--vbg-ff-body) !important;
    font-size: 0.56rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase;
    border-radius: 6px !important;
    z-index: 6 !important;
    transform: none !important;
    text-align: center !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
  }
  /* Nature-Green #2D5A43 */
  .vbg-kb3 .vbg-kombi-bestseller.is-green {
    background: linear-gradient(90deg, #4D735F 0%, #6C8C7B 50%, #28513C 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(45,90,67,0.45), 0 0 0 1px rgba(45,90,67,0.4) !important;
  }
  /* Vital-Petrol #205072 */
  .vbg-kb3 .vbg-kombi-bestseller.is-petrol {
    background: linear-gradient(90deg, #416A87 0%, #63849C 50%, #1D4867 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(32,80,114,0.45), 0 0 0 1px rgba(32,80,114,0.4) !important;
  }
  /* Rescue-Berry #8E2D3F */
  .vbg-kb3 .vbg-kombi-bestseller.is-berry {
    background: linear-gradient(90deg, #9F4C5C 0%, #B06C79 50%, #802839 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(142,45,63,0.45), 0 0 0 1px rgba(142,45,63,0.4) !important;
  }
  /* Elite-Navy #1B365D */
  .vbg-kb3 .vbg-kombi-bestseller.is-navy {
    background: linear-gradient(90deg, #3D5475 0%, #5F728E 50%, #183054 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(27,54,93,0.5), 0 0 0 1px rgba(27,54,93,0.4) !important;
  }
  /* Terracotta #D35400 */
  .vbg-kb3 .vbg-kombi-bestseller.is-terracotta {
    background: linear-gradient(90deg, #DA6E26 0%, #E0874C 50%, #BD4C00 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(211,84,0,0.45), 0 0 0 1px rgba(211,84,0,0.4) !important;
  }

  /* Savings badge — Overlay AUF dem Bild, kraeftiges Rot mit weisser
     Schrift. Bewusste Ausnahme vom Markenfarben-Set (User-Spec): das Badge
     SOLL auffallen. Markup-seitig liegt es jetzt INNERHALB .vbg-kombi-img-wrap
     (statt davor wie alter Tab). */
  .vbg-kb3 .vbg-kombi-savings {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    padding: 7px 13px !important;
    background: #c0392b !important;
    border: 0 !important;
    color: #ffffff !important;
    font-family: var(--vbg-ff-body) !important;
    font-size: 0.7rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase;
    border-radius: 6px !important;
    z-index: 6 !important;
    box-shadow: 0 4px 14px rgba(192, 57, 43, 0.35) !important;
  }

  /* Image area — square hero, override global */
  .vbg-kb3 .vbg-kombi-img-wrap {
    position: relative !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    background: linear-gradient(135deg, #f5efdf 0%, #ead8a8 100%) !important;
    overflow: hidden !important;
    border-radius: 17px 17px 0 0 !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .vbg-kb3 .vbg-kombi-img-wrap::after { content: none !important; }
  .vbg-kb3 .vbg-kombi-img-wrap img,
  .vbg-kb3 .vbg-kombi-img-wrap .vbg-kombi-img,
  .vbg-kb3 .vbg-kombi-img-wrap svg {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: scale(1);
    transform-origin: center top;
    will-change: transform;
    transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  /* Desktop-Hover: Bild schrumpft smooth nach oben (analog Mobile-Scroll-Reveal),
     damit das Reveal-Panel Platz bekommt und die "Im Set enthalten"-Liste
     nicht bloss den unteren Bildrand ueberdeckt. */
  @media (hover: hover) and (pointer: fine) {
    .vbg-kb3 .vbg-kombi-img-wrap > .vbg-kombi-composed {
      transform: scale(1);
      transform-origin: center top;
      will-change: transform;
      transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .vbg-kb3 a.vbg-kombi-card:hover .vbg-kombi-img-wrap > img,
    .vbg-kb3 a.vbg-kombi-card:hover .vbg-kombi-img-wrap > .vbg-kombi-composed {
      transform: scale(0.65);
    }
  }

  /* ── Composed Set-Image (dynamisch aus set_products-Metafield) ──
     Höhere Specificity als die generische img-Regel oben (.vbg-kb3 .vbg-kombi-img-wrap img),
     damit object-fit: cover / width: 100% nicht reinschlägt. */
  .vbg-kb3 .vbg-kombi-img-wrap .vbg-kombi-composed {
    position: absolute !important;
    inset: 0 !important;
    padding: 0 !important;
    pointer-events: none;
  }
  .vbg-kb3 .vbg-kombi-img-wrap .vbg-kombi-composed-item {
    position: absolute !important;
    /* Fixe Slot-Box pro Item + object-fit:contain → Bild wird in der Box
       zentriert und proportional skaliert. Damit haben Slots derselben
       Position dieselbe Bounding-Box, unabhängig vom Aspect-Ratio der
       Quell-Bilder (Spray vs schmale Drops-Flasche etc.). */
    object-fit: contain !important;
    object-position: center !important;
    top: 50% !important;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.16))
            drop-shadow(0 10px 20px rgba(44, 95, 63, 0.2));
    transition: left 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                top 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                width 0.4s ease,
                height 0.4s ease,
                filter 0.4s ease;
    will-change: transform, left;
    image-rendering: -webkit-optimize-contrast;
    margin: 0 !important;
  }
  /* 1er-Set: zentriert */
  .vbg-kb3 .vbg-kombi-img-wrap .vbg-kombi-composed--1 .vbg-kombi-composed-item--1 {
    left: 50% !important;
    width: 74% !important;
    height: 82% !important;
    transform: translate(-50%, -50%);
  }
  /* 2er-Set: zwei Flaschen gefächert */
  .vbg-kb3 .vbg-kombi-img-wrap .vbg-kombi-composed--2 .vbg-kombi-composed-item--1 {
    left: 32% !important;
    width: 56% !important;
    height: 85% !important;
    transform: translate(-50%, -50%) rotate(-6deg);
    z-index: 2;
  }
  .vbg-kb3 .vbg-kombi-img-wrap .vbg-kombi-composed--2 .vbg-kombi-composed-item--2 {
    left: 68% !important;
    width: 56% !important;
    height: 85% !important;
    transform: translate(-50%, -50%) rotate(6deg);
    z-index: 1;
  }
  /* 3er-Set: Triangular-Komposition mit Mitte leicht erhöht */
  .vbg-kb3 .vbg-kombi-img-wrap .vbg-kombi-composed--3 .vbg-kombi-composed-item--1 {
    left: 22% !important;
    top: 54% !important;
    width: 38% !important;
    height: 76% !important;
    transform: translate(-50%, -50%) rotate(-9deg);
    z-index: 2;
  }
  .vbg-kb3 .vbg-kombi-img-wrap .vbg-kombi-composed--3 .vbg-kombi-composed-item--2 {
    left: 50% !important;
    top: 48% !important;
    width: 42% !important;
    height: 86% !important;
    transform: translate(-50%, -50%) rotate(0deg);
    z-index: 3;
  }
  .vbg-kb3 .vbg-kombi-img-wrap .vbg-kombi-composed--3 .vbg-kombi-composed-item--3 {
    left: 78% !important;
    top: 54% !important;
    width: 38% !important;
    height: 76% !important;
    transform: translate(-50%, -50%) rotate(9deg);
    z-index: 2;
  }
  /* Hover: Fächer spreizt sich leicht */
  .vbg-kb3 a.vbg-kombi-card:hover .vbg-kombi-img-wrap .vbg-kombi-composed--2 .vbg-kombi-composed-item--1 {
    left: 30% !important;
    transform: translate(-50%, -50%) rotate(-8deg);
  }
  .vbg-kb3 a.vbg-kombi-card:hover .vbg-kombi-img-wrap .vbg-kombi-composed--2 .vbg-kombi-composed-item--2 {
    left: 70% !important;
    transform: translate(-50%, -50%) rotate(8deg);
  }
  .vbg-kb3 a.vbg-kombi-card:hover .vbg-kombi-img-wrap .vbg-kombi-composed--3 .vbg-kombi-composed-item--1 {
    left: 19% !important;
    transform: translate(-50%, -50%) rotate(-11deg);
  }
  .vbg-kb3 a.vbg-kombi-card:hover .vbg-kombi-img-wrap .vbg-kombi-composed--3 .vbg-kombi-composed-item--2 {
    top: 46% !important;
    transform: translate(-50%, -50%) rotate(0deg) scale(1.04);
  }
  .vbg-kb3 a.vbg-kombi-card:hover .vbg-kombi-img-wrap .vbg-kombi-composed--3 .vbg-kombi-composed-item--3 {
    left: 81% !important;
    transform: translate(-50%, -50%) rotate(11deg);
  }

  /* ── Slim "IM SET ENTHALTEN"-Strip zwischen Bild und Body ──
     Default: nur Label sichtbar (~32px hoch).
     Hover/in-view: expandiert via padding + max-height auf Bullet-Liste. */
  .vbg-kb3 .vbg-kombi-strip {
    background: rgba(22, 46, 30, 0.96);
    padding: 8px 22px;
    overflow: hidden;
    transition: padding 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    pointer-events: none;
  }
  .vbg-kb3 a.vbg-kombi-card:hover .vbg-kombi-strip,
  .vbg-kb3 a.vbg-kombi-card.vbg-kombi-card--in-view .vbg-kombi-strip {
    padding: 16px 22px 18px;
  }
  .vbg-kb3 .vbg-kombi-strip-label {
    font-family: var(--vbg-ff-body);
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--vbg-gold-lt, #e2c97e);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    transition: margin-bottom 0.45s ease;
  }
  .vbg-kb3 .vbg-kombi-strip-label::before {
    content: '';
    width: 16px;
    height: 1px;
    background: currentColor;
    opacity: 0.7;
  }
  .vbg-kb3 a.vbg-kombi-card:hover .vbg-kombi-strip-label,
  .vbg-kb3 a.vbg-kombi-card.vbg-kombi-card--in-view .vbg-kombi-strip-label {
    margin-bottom: 10px;
  }
  .vbg-kb3 .vbg-kombi-strip-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .vbg-kb3 a.vbg-kombi-card:hover .vbg-kombi-strip-list,
  .vbg-kb3 a.vbg-kombi-card.vbg-kombi-card--in-view .vbg-kombi-strip-list {
    max-height: 280px;
  }
  .vbg-kb3 .vbg-kombi-strip-list li {
    font-family: var(--vbg-ff-body);
    font-size: 0.84rem;
    line-height: 1.4;
    color: rgba(254, 252, 243, 0.95);
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }
  .vbg-kb3 .vbg-kombi-strip-list li::before {
    content: '';
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    margin-top: 8px;
    border-radius: 50%;
    background: var(--vbg-gold, #c9973a);
  }

  /* ── HOVER REVEAL: dark forest panel from below ── */
  .vbg-kb3 .vbg-kombi-reveal {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(22, 46, 30, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 18px 22px 20px;
    transform: translateY(100%);
    transition: transform 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.12s;
    pointer-events: none;
  }
  .vbg-kb3 a.vbg-kombi-card:hover .vbg-kombi-reveal {
    transform: translateY(0);
  }
  .vbg-kb3 .vbg-kombi-reveal-label {
    font-family: var(--vbg-ff-body);
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--kb-gold-lt);
    margin-bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .vbg-kb3 .vbg-kombi-reveal-label::before {
    content: '';
    width: 16px;
    height: 1px;
    background: currentColor;
    opacity: 0.7;
  }
  .vbg-kb3 .vbg-kombi-reveal ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .vbg-kb3 .vbg-kombi-reveal li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: var(--vbg-ff-body);
    font-size: 0.84rem;
    line-height: 1.4;
    color: rgba(254, 252, 243, 0.95);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.2,0.8,0.2,1);
  }
  .vbg-kb3 a.vbg-kombi-card:hover .vbg-kombi-reveal li {
    opacity: 1;
    transform: translateY(0);
  }
  .vbg-kb3 a.vbg-kombi-card:hover .vbg-kombi-reveal li:nth-child(1) { transition-delay: 0.18s; }
  .vbg-kb3 a.vbg-kombi-card:hover .vbg-kombi-reveal li:nth-child(2) { transition-delay: 0.24s; }
  .vbg-kb3 a.vbg-kombi-card:hover .vbg-kombi-reveal li:nth-child(3) { transition-delay: 0.30s; }
  .vbg-kb3 a.vbg-kombi-card:hover .vbg-kombi-reveal li:nth-child(4) { transition-delay: 0.36s; }
  .vbg-kb3 a.vbg-kombi-card:hover .vbg-kombi-reveal li:nth-child(5) { transition-delay: 0.42s; }
  .vbg-kb3 .vbg-kombi-reveal li::before {
    content: '';
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--kb-gold);
    color: #1a2b21;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 14px;
    text-align: center;
    margin-top: 3px;
  }

  /* ── BODY (Modern White Card) ── */
  .vbg-kb3 .vbg-kombi-body {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    padding: 26px 26px 24px !important;
    background: transparent;
    gap: 0 !important;
  }
  .vbg-kb3 .vbg-kombi-kicker {
    font-family: var(--vbg-ff-body);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--kb-gold-deep);
    margin-bottom: 10px;
  }
  .vbg-kb3 .vbg-kombi-title {
    font-family: var(--vbg-ff-body) !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: var(--kb-ink) !important;
    line-height: 1.3 !important;
    margin: 0 0 8px !important;
    letter-spacing: -0.01em !important;
    /* 2 Zeilen fixed — egal ob Titel kurz oder lang */
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.3em * 2);
  }
  .vbg-kb3 .vbg-kombi-desc {
    font-family: var(--vbg-ff-body) !important;
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
    color: var(--kb-ink-soft) !important;
    margin: 0 0 18px !important;
    /* User-Spec: keinen abgeschnittenen Halbsatz mit "..." mehr — Truncation
       und min-height entfernt. Text laeuft als vollstaendiger Satz; Autor
       muss in den Block-Settings auf 1–2 vollstaendige Saetze begrenzen. */
  }

  /* Price block — prominent.
     Streichpreis (vbg-kombi-price-compare) LINKS, klein durchgestrichen,
     gedaempfte Farbe. Set-Preis (vbg-kombi-price) RECHTS daneben gross
     in Forest. baseline-align sorgt fuer saubere Linie. */
  .vbg-kombi-pricewrap {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-top: auto;
    margin-bottom: 16px;
    flex-wrap: wrap;
  }
  .vbg-kb3 .vbg-kombi-price-compare {
    font-family: var(--vbg-ff-body);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--vbg-warm-gray, #6b5e50);
    text-decoration: line-through;
    text-decoration-thickness: 1.2px;
    text-decoration-color: rgba(107, 94, 80, 0.6);
    line-height: 1;
    letter-spacing: 0;
    order: 1;
  }
  .vbg-kb3 .vbg-kombi-price {
    font-family: var(--vbg-ff-display) !important;
    font-size: 2.6rem !important;
    font-weight: 500 !important;
    font-style: italic !important;
    color: var(--kb-forest) !important;
    line-height: 1 !important;
    letter-spacing: -0.025em;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    display: inline !important;
    gap: 0 !important;
    order: 2;
  }
  .vbg-kb3 .vbg-price-strike {
    display: inline-block;
    font-size: 0.95rem;
    color: #8c3322;
    text-decoration: line-through;
    text-decoration-thickness: 1.2px;
    font-family: var(--vbg-ff-body);
    font-weight: 500;
    line-height: 1;
    font-style: normal;
  }

  /* CTA — modern flat Forest pill */
  .vbg-kb3 .vbg-kb3-cta {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 15px 24px;
    font-family: var(--vbg-ff-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #ffffff;
    background: var(--kb-forest);
    border: 0;
    border-radius: 10px;
    box-shadow:
      0 1px 2px rgba(22, 48, 32, 0.2),
      0 8px 20px -6px rgba(22, 48, 32, 0.35);
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
                background 0.35s ease,
                box-shadow 0.35s ease;
    cursor: pointer;
    text-decoration: none !important;
    position: relative;
    overflow: hidden;
  }
  /* Subtle gold accent line at top of button */
  .vbg-kb3 .vbg-kb3-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--kb-gold-lt), transparent);
    opacity: 0.6;
  }
  .vbg-kb3 .vbg-kb3-cta svg { transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .vbg-kb3 a.vbg-kombi-card:hover .vbg-kb3-cta {
    background: var(--kb-forest-dk);
    box-shadow:
      0 1px 2px rgba(22, 48, 32, 0.25),
      0 14px 28px -6px rgba(22, 48, 32, 0.5);
  }
  .vbg-kb3 a.vbg-kombi-card:hover .vbg-kb3-cta svg {
    transform: translateX(5px);
  }
  .vbg-kb3 a.vbg-kombi-card:active .vbg-kb3-cta {
    transform: scale(0.98);
  }

  /* ═══ Tablet ═══ */
  @media (min-width: 601px) and (max-width: 900px) {
    .vbg-kombi-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 22px;
    }
    .vbg-kombi-body { padding: 20px; }
    .vbg-kombi-title { font-size: 1.08rem; }
    .vbg-kombi-price { font-size: 1.75rem; }
  }

  /* ═══ Mobile: schlichter vertikaler Stack + Scroll-Reveal für Reveal-Panel ═══ */
  @media (max-width: 900px) {
    .vbg-kb3 { padding: clamp(40px, 5.5vh, 64px) 0 clamp(48px, 6vh, 72px); }
    .vbg-kb3 .vbg-kombi-grid {
      display: flex !important;
      flex-direction: column;
      gap: 18px;
      padding: 0 !important;
    }
    .vbg-kombi-spacer { display: none !important; }
    .vbg-kb3 a.vbg-kombi-card,
    .vbg-kb3 .vbg-kombi-grid > a.vbg-kombi-card {
      position: relative !important;
      top: auto !important;
      margin: 0 !important;
      width: 100% !important;
      max-height: none !important;
      border-radius: 18px !important;
      overflow: hidden !important;
    }
    .vbg-kombi-img-wrap { aspect-ratio: 1 / 1; }
    .vbg-kombi-body { padding: 22px 22px 22px; }
    .vbg-kombi-mobile-contents { display: none !important; }
  }
  .vbg-kombi-mobile-contents { display: none; }

  /* ═══ Mobile / Touch: Reveal-Panel via Scroll-Trigger einblenden ═══
     Overlay ist aktiv solange die Oberkante der Card unterhalb des sticky
     Banners (--vbg-offset) und in der oberen Hälfte des sichtbaren Bereichs
     liegt. Sobald rect.top < Banner-Höhe → sofort zurück aufs Produktbild. */
  @media (hover: none) and (pointer: coarse) {
    /* Bild bereit für Shrink-Animation — Transition auf direkte img/composed-
       Kinder der img-wrap (nicht auf reveal, das soll unabhängig sliden). */
    .vbg-kb3 .vbg-kombi-img-wrap > img,
    .vbg-kb3 .vbg-kombi-img-wrap > .vbg-kombi-composed {
      transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
      transform-origin: center top;
    }
    /* Aktiver Zustand: Bild schrumpft nach oben, Reveal-Panel schiebt hoch —
       beide gleichzeitig sichtbar (Bild im oberen Drittel, grünes Panel unten). */
    .vbg-kb3 a.vbg-kombi-card.vbg-kombi-card--in-view .vbg-kombi-img-wrap > img,
    .vbg-kb3 a.vbg-kombi-card.vbg-kombi-card--in-view .vbg-kombi-img-wrap > .vbg-kombi-composed {
      transform: scale(0.6);
    }
    .vbg-kb3 a.vbg-kombi-card.vbg-kombi-card--in-view .vbg-kombi-reveal {
      transform: translateY(0) !important;
    }
    .vbg-kb3 a.vbg-kombi-card.vbg-kombi-card--in-view .vbg-kombi-reveal li {
      opacity: 1;
      transform: translateY(0);
    }
    .vbg-kb3 a.vbg-kombi-card.vbg-kombi-card--in-view .vbg-kombi-reveal li:nth-child(1) { transition-delay: 0.18s; }
    .vbg-kb3 a.vbg-kombi-card.vbg-kombi-card--in-view .vbg-kombi-reveal li:nth-child(2) { transition-delay: 0.24s; }
    .vbg-kb3 a.vbg-kombi-card.vbg-kombi-card--in-view .vbg-kombi-reveal li:nth-child(3) { transition-delay: 0.30s; }
    .vbg-kb3 a.vbg-kombi-card.vbg-kombi-card--in-view .vbg-kombi-reveal li:nth-child(4) { transition-delay: 0.36s; }
    .vbg-kb3 a.vbg-kombi-card.vbg-kombi-card--in-view .vbg-kombi-reveal li:nth-child(5) { transition-delay: 0.42s; }
  }
</style>

<section class="vbg-kb3" id="kombis" style="scroll-margin-top: calc(var(--vbg-offset, 108px) + 20px);">
  <div class="vbg-container">

    {{- '<!-- Headline -->' -}}
    <div class="vbg-text-center" style="margin-bottom: clamp(28px, 4vh, 44px);">
      <div class="vbg-kb3-eyebrow">Kombi-Sets</div>
      <h2 class="vbg-kb3-headline">
        {{ section.settings.headline | default: 'Noch besser <em>kombiniert.</em>' }}
      </h2>
      {%- if section.settings.subline != blank -%}
        <p class="vbg-kb3-sub">{{ section.settings.subline }}</p>