/** Shopify CDN: Minification failed

Line 58:33 Expected ":"

**/
/* ═══════════════════════════════════════════════════════════════════════════
   tilvy-system.css — Tilvy Designsystem (Grundgeruest fuer 25 Produkte)
   Laedt ALS LETZTES. Diese Datei definiert das System (Tokens, Typo, Flaechen,
   Buttons, Karten, Navigation, Sektionsrhythmus). tilvy-redesign.css bleibt die
   Korrekturschicht frueherer Messungen und wird hier nicht zurueckgesetzt.

   Leitentscheidungen dieser Runde:
   · SANS FUEHRT. Jost traegt Commerce, Navigation, Preise, Buttons UND die
     Ueberschriften. Gilda Display ist nur noch Akzentstimme (.tv-serif) fuer
     genau drei Stellen: Markenmoment, Zitat, Oeffnungs-Sektion.
   · KEINE CREME-WUESTE. Drei Flaechen im Wechsel (Ivory / Sand / Wein) mit
     definierter Reihenfolge, statt einer durchgehenden hellen Bahn.
   · KEINE KARTENWAND. Karten haben keine Schatten und keine Kaesten mehr,
     sondern eine gemeinsame Bildkante und eine Haarlinie.
   · KEINE UPPERCASE-EYEBROW-KETTE. .tv-kicker ist gemischt gesetzt, klein,
     mit kurzer Marke — nicht gesperrtes Versal-Kleingedrucktes.
   ═════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Flaechen ─────────────────────────────────────────────────────────── */
  --tv-ivory:      #FBF7F2;   /* Grundflaeche */
  --tv-sand:       #F1E6DD;   /* zweite Flaeche, warm */
  --tv-sand-deep:  #E8D9CE;   /* Bildfenster / Platzhalter */
  --tv-wine:       #4A1220;   /* Markenflaeche, tiefer Kontrast */
  --tv-wine-deep:  #2E0B14;   /* Hover / Fussbereich */

  /* ── Schrift-/Linienfarben ────────────────────────────────────────────── */
  --tv-ink:        #2B1219;   /* Text auf hell */
  --tv-ink-soft:   #6B565B;   /* Sekundaertext, AA auf Ivory */
  --tv-on-wine:    #F6EAE2;   /* Text auf Wein */
  --tv-on-wine-soft:#D3B3B8;
  --tv-line:       #E2D3C9;   /* Haarlinie auf hell */
  --tv-line-wine:  #6A3040;   /* Haarlinie auf Wein */
  --tv-accent:     #8E2436;   /* interaktiver Akzent, AA auf Ivory */
  --tv-gold:       #B98D3E;   /* nur Haarlinien/Ziffern, nie Flaeche */

  /* ── Raster ───────────────────────────────────────────────────────────── */
  --tv-max:        1240px;
  --tv-gut:        24px;
  --tv-section:    clamp(56px, 7vw, 104px);
  --tv-section-tight: clamp(40px, 5vw, 72px);
  --tv-radius:     3px;

  /* ── Typo-Skala (mobile-first, fluid) ─────────────────────────────────── */
  --tv-fs-display: clamp(31px, 5.2vw, 54px);
  --tv-fs-h2:      clamp(25px, 3.2vw, 38px);
  --tv-fs-h3:      clamp(19px, 1.7vw, 23px);
  --tv-fs-lede:    clamp(16px, 1.25vw, 18.5px);
  --tv-fs-body:    16px;
  --tv-fs-small:   13.5px;
  --tv-fs-micro:   12px;

  /* Bruecke: bestehende pl-*/tv-* Regeln lesen diese Namen weiter. */
  --pl-ink:  var(--tv-ink);
  --pl-line: var(--tv-line);
  --pl-muted: var(--tv-ink-soft);
  --pl-d:    var(--tv-wine);
  --pl-d2:   var(--tv-wine-deep);
  --pl-l:    var(--tv-ivory);
  --pl-t:    var(--tv-sand);
  --pl-radius: var(--tv-radius);
  --pl-radius-sm: var(--tv-radius);
  --pl-radius-pill: var(--tv-radius);
}

/* ── Grundtypografie ──────────────────────────────────────────────────────
   Ueberschriften laufen ab hier in der Sans. Das ist der sichtbarste Eingriff
   dieser Runde und der direkte Gegenzug zum beanstandeten Serif-/Creme-Look. */
html body {
  font-size: var(--tv-fs-body);
  color: var(--tv-ink);
  background: var(--tv-ivory);
  text-rendering: optimizeLegibility;
}
html body h1, html body h2, html body h3,
html body h4, html body h5, html body h6 {
  font-family: var(--font-body-family, "Jost", system-ui, sans-serif);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.12;
  color: inherit;
}
/* Die Serif bleibt — als bewusst gesetzte Stimme, nicht als Grundton. */
html body .tv-serif,
html body .tv-serif h1,
html body .tv-serif h2,
html body em.tv-akzent {
  font-family: var(--font-heading-family, "Gilda Display", Georgia, serif);
  font-weight: 400;
  letter-spacing: -0.005em;
}
html body em.tv-akzent { font-style: italic; }

.tv-display { font-size: var(--tv-fs-display); margin: 0; }
.tv-h2      { font-size: var(--tv-fs-h2); margin: 0; }
.tv-h3      { font-size: var(--tv-fs-h3); margin: 0; font-weight: 500; }
.tv-lede    { font-size: var(--tv-fs-lede); line-height: 1.6; color: var(--tv-ink-soft); margin: 0; max-width: 62ch; }
.tv-small   { font-size: var(--tv-fs-small); line-height: 1.5; color: var(--tv-ink-soft); }

/* Kicker: gemischt gesetzt, mit kurzer Marke statt gesperrter Versalzeile. */
html body .tv-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 500; letter-spacing: 0.01em;
  text-transform: none; color: var(--tv-ink-soft); margin: 0 0 14px;
}
html body .tv-kicker::before {
  content: ""; width: 22px; height: 1px; background: var(--tv-gold); flex: none;
}
/* Alt-Klasse aus der Bestandsschicht auf denselben Ton bringen. */
html body .tv-eyebrow {
  font-size: 13px; font-weight: 500; letter-spacing: 0.01em;
  text-transform: none; color: var(--tv-ink-soft);
}

/* ── Container und Sektionsrhythmus ──────────────────────────────────────── */
.tv-container { max-width: var(--tv-max); margin-inline: auto; padding-inline: var(--tv-gut); }
.tv-section        { padding-block: var(--tv-section); }
.tv-section--tight { padding-block: var(--tv-section-tight); }
.tv-section--ivory { background: var(--tv-ivory); color: var(--tv-ink); }
.tv-section--sand  { background: var(--tv-sand);  color: var(--tv-ink); }
.tv-section--wine  { background: var(--tv-wine);  color: var(--tv-on-wine); }
.tv-section--wine .tv-lede,
.tv-section--wine .tv-small,
.tv-section--wine .tv-kicker { color: var(--tv-on-wine-soft); }
.tv-section--wine .tv-kicker::before { background: var(--tv-gold); }

/* Sektionskopf: eine Anordnung fuer alle Sektionen. */
.tv-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 34px; }
.tv-head__text { max-width: 46ch; }
.tv-head__link { flex: none; }
@media (max-width: 749px) {
  .tv-head { display: block; margin-bottom: 24px; }
  .tv-head__link { display: inline-block; margin-top: 16px; }
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
html body .tv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 14px 26px;
  background: var(--tv-wine); color: var(--tv-on-wine);
  border: 1px solid var(--tv-wine); border-radius: var(--tv-radius);
  font-family: inherit; font-size: 15px; font-weight: 500; letter-spacing: 0.01em;
  text-decoration: none; cursor: pointer;
  transition: background .18s ease-out, border-color .18s ease-out, color .18s ease-out;
}
html body .tv-btn:hover { background: var(--tv-wine-deep); border-color: var(--tv-wine-deep); }
html body .tv-btn--ghost { background: transparent; color: inherit; border-color: currentColor; }
html body .tv-btn--ghost:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
html body .tv-btn--onwine { background: var(--tv-on-wine); color: var(--tv-wine); border-color: var(--tv-on-wine); }
html body .tv-btn--onwine:hover { background: #fff; border-color: #fff; }

html body .tv-textlink {
  display: inline-flex; align-items: center; gap: 8px;
  color: inherit; font-size: 14.5px; text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, currentColor 40%, transparent);
  padding-bottom: 2px; transition: border-color .18s;
}
html body .tv-textlink:hover { border-bottom-color: currentColor; }

a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--tv-accent); outline-offset: 3px;
}

/* ── Produktkarte (ein Format fuer Start, Kategorie, Suche, Auswahl) ─────
   Kein Kasten, kein Schatten: gemeinsame Bildkante, Haarlinie darunter.
   Genau das trennt eine Geschenkmarke von der Kartenwand. */
.tv-cards {
  display: grid; gap: 28px 24px; list-style: none; margin: 0; padding: 0;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
}
.tv-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tv-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 989px) { .tv-cards--4, .tv-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Mobil immer zwei Spalten: bei 25 Geschenken ist eine einspaltige Liste
   kein Katalog, sondern ein Endlosscroll. */
@media (max-width: 749px) {
  .tv-cards, .tv-cards--4, .tv-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
}

html body .tv-card { position: relative; display: flex; flex-direction: column; background: none; box-shadow: none; border-radius: 0; overflow: visible; }
html body .tv-card__media {
  position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden;
  background: var(--tv-sand-deep); border-radius: var(--tv-radius);
}
html body .tv-card__media img,
html body .tv-card__media svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 48%; display: block;
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
html body .tv-card__media img.tv-card__alt { opacity: 0; transition: opacity .3s ease; }
html body .tv-card:hover .tv-card__media img.tv-card__alt { opacity: 1; }
html body .tv-card:hover .tv-card__media img:first-child { transform: scale(1.03); }
html body .tv-card__body { padding: 14px 2px 0; display: flex; flex-direction: column; gap: 5px; }
html body .tv-card__title { font-size: 16.5px; font-weight: 500; letter-spacing: -0.01em; margin: 0; line-height: 1.3; }
html body .tv-card__title a { color: inherit; text-decoration: none; }
html body .tv-card__title a::after { content: ""; position: absolute; inset: 0; }
html body .tv-card__note { font-size: 13.5px; line-height: 1.45; color: var(--tv-ink-soft); margin: 0; }
html body .tv-card__price { font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; margin: 3px 0 0; display: flex; gap: 9px; align-items: baseline; }
html body .tv-card__compare { text-decoration: line-through; color: var(--tv-ink-soft); font-size: 13px; font-weight: 400; }
html body .tv-card__flag {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: var(--tv-wine); color: var(--tv-on-wine);
  font-size: 11px; font-weight: 500; letter-spacing: .02em;
  padding: 5px 10px; border-radius: var(--tv-radius);
}
html body .tv-card.is-ausverkauft .tv-card__media img { opacity: .55; filter: saturate(.6); }
html body .tv-card.is-ausverkauft .tv-card__price { color: var(--tv-ink-soft); }

/* ── Bestandsraster (pl-pcard) auf dasselbe Format bringen ───────────────── */
html body .pl-pcard { background: none !important; box-shadow: none !important; border-radius: 0 !important; overflow: visible !important; }
html body .pl-pcard__media { border-radius: var(--tv-radius); background: var(--tv-sand-deep); }
html body .pl-pcard__body { padding: 14px 2px 0 !important; }
html body .pl-pcard__title { font-size: 16.5px; font-weight: 500; letter-spacing: -0.01em; }
html body .pl-pcard__price { font-weight: 500; font-variant-numeric: tabular-nums; }
html body .pl-pcard__sale {
  background: var(--tv-wine); color: var(--tv-on-wine);
  border-radius: var(--tv-radius); font-size: 11px; font-weight: 500; padding: 5px 10px;
}

/* ── Redaktionelle Flaechen ohne Kasten ─────────────────────────────────── */
html body .tv-rule { border: 0; border-top: 1px solid var(--tv-line); margin: 0; }
.tv-section--wine .tv-rule { border-top-color: var(--tv-line-wine); }

/* ── Kaufbereich: Typohierarchie des Systems ────────────────────────────── */
html body .pl-pb__title {
  font-family: var(--font-body-family, inherit) !important;
  font-weight: 500 !important;
  font-size: clamp(26px, 3vw, 36px) !important;
  letter-spacing: -0.024em !important;
  line-height: 1.14 !important;
}
html body .pl-pb__badge {
  font-size: 12.5px !important; letter-spacing: 0.01em !important;
  text-transform: none !important; opacity: 1 !important;
  color: var(--tv-ink-soft) !important; font-weight: 500 !important;
}
html body .pl-pb__p, html body .pl-pb__price .pl-pb__p {
  font-family: var(--font-body-family, inherit) !important;
  font-variant-numeric: tabular-nums; letter-spacing: -0.015em;
}
/* Zwei sichtbare Flaechen sind das Maximum im Kaufbereich (Vorgabe T1/5). */
html body .pl-pb__buy .pl-pb__offer,
html body .pl-pb__buy .pl-pb__vstack { background: none !important; box-shadow: none !important; }

/* ── Ausgeblendete Bestandsteile mit benanntem Ersatz ────────────────────
   Der Zertifikats-Streifen unter der Desktopgalerie ist ein Fremdkoerper aus
   der Library (generische Haken-Chips ohne Datenquelle). Ersatz ist die
   belegte Offer-Liste im Kaufbereich; er wird deshalb nicht gerendert. */
html body .pl-pb__certs { display: none !important; }

/* ── Bewegung nur fuer Zustandswechsel ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html body .tv-card__media img { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   KAUFBEREICH — Korrekturen aus der eigenen Sichtpruefung 10.09.2026 (1440/390)
   Alle vier Regeln brauchen !important, weil die Bestandssektionen ihre Werte
   unter #shopify-section-<id> setzen (ID-Spezifitaet). Jede Regel hat einen
   benannten Befund, keine Geschmacksaenderung.
   ═════════════════════════════════════════════════════════════════════════ */

/* 1 · BEFUND: Die Zeile ueber dem Produktnamen war eine rosa Pille im
   Akzentton — genau die "generische Badge", die der Auftrag ausschliesst.
   Sie ist eine Einordnung, kein Siegel: also Text, keine Flaeche. */
html body .pl-pb__badge {
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  color: var(--tv-ink-soft) !important;
  margin-bottom: 10px !important;
}

/* 2 · BEFUND: "WAS BEIM ÖFFNEN SICHTBAR WIRD" stand gesperrt in Versalien im
   Akzentrot. Das ist die beanstandete Eyebrow-Kette. Der Lieferumfang ist eine
   Aussage, keine Auszeichnung. */
html body .pl-pb__offer-t {
  text-transform: none !important;
  letter-spacing: .01em !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--tv-ink-soft) !important;
  opacity: 1 !important;
}

/* 3 · BEFUND: Vor jeder Lieferumfangszeile sass ein rotes Haken-Icon. Drei
   davon lesen sich als Icon-Sammlung und als Werbeversprechen. Der Haken wird
   zu einem stillen Strich — die Zeile bleibt eine Liste, wird aber nicht mehr
   als Guetezeichen gelesen. */
html body .pl-pb__ck {
  width: 14px !important; height: 1px !important;
  min-width: 14px !important; flex: none !important;
  background: color-mix(in srgb, currentColor 42%, transparent) !important;
  border-radius: 0 !important; margin-top: .72em !important;
  color: inherit !important; box-shadow: none !important;
}
html body .pl-pb__ck svg { display: none !important; }

/* 4 · BEFUND: Ueber dem Footer stand ein goldenes Rauten-Ornament aus der
   Fremdvorlage, dazu ein Schattenverlauf am Sektionskopf. Beides ist Zierrat
   ohne Informationsaufgabe und gehoert nicht zu dieser Marke. */
html body .pl-faq::after,
html body .pl-faq::before,
html body .pl-benefits::after,
html body .pl-fl::after { content: none !important; background-image: none !important; }

/* 5 · BEFUND: Die Bildlegende der Galerie lief in Versalien ("1/1 ·
   ORIGINALANSICHT …"). Legenden sind Fliesstext. */
html body .pl-pb__cap { text-transform: none !important; letter-spacing: .01em !important; }

/* 6 · BEFUND (Messung im Render, 390): Der Badge trug weiterhin einen goldenen
   Rahmen aus pl-lux.css — eine Auszeichnungsoptik ohne Auszeichnung. */
html body .pl-pb__badge { border: 0 !important; box-shadow: none !important; }

/* 7 · BEFUND: Produktname UND Preis standen in Weinrot (#4A1220). Damit trug
   der Kaufbereich drei rote Ebenen (Titel, Preis, Button) und der Button
   verlor seine Alleinstellung. Weinrot bleibt der Handlung vorbehalten;
   Text liest sich in Tinte. */
html body .pl-pb__title,
html body .pl-pb__p,
html body .pl-pb__price .pl-pb__p { color: var(--tv-ink) !important; }

/* 8 · BEFUND: Die Zahlungsarten sassen in sandfarbenen Pillen. Native
   Shopify-Zahlungsicons brauchen keine Kachel; die Flaeche taeuscht eine
   Auszeichnung vor. Ruhige Reihe ohne Hintergrund. */
html body .pl-pb__pays span,
html body .pl-footer__pill {
  background: none !important; border: 0 !important; padding: 0 !important;
}
html body .pl-pb__pays { gap: 10px !important; align-items: center; }

/* 9 · BEFUND: Die Personalisierungsgruppe war mit "DEINE GRAVUR" ueberschrieben —
   gesperrte Versalien in Kleinstgroesse, dieselbe Eyebrow-Schablone wie oben.
   Es ist eine Feldbeschriftung und wird auch so gesetzt. */
html body .tv-perso__titel {
  text-transform: none; letter-spacing: .01em; font-size: 13px; font-weight: 500;
  color: var(--tv-ink);
}
html body .tv-perso__hinweis { font-size: 13px; }

/* 10 · BEFUND (Drawer, 390): Das Label des Suchfelds stand sichtbar im Menue
   und quetschte das Eingabefeld — die Klasse pl-visually-hidden existierte im
   Theme gar nicht. Sie wird hier einmal zentral definiert, damit jedes
   Formularlabel im Theme sie nutzen kann. */
.pl-visually-hidden, .visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   T3 · 11.09.2026 — Kampagne, Galerie im 1:1-Format, Offer aus Produktdaten
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Sparauszeichnung ────────────────────────────────────────────────────
   EINE Optik im ganzen Shop, gerechnet aus echten Variantendaten. Bewusst
   kein Signalrot und keine Schreipille: Weinrot auf hellem Sand, ruhige
   Kante. Ein Preisvorteil ist eine Information, kein Alarm. */
html body .tv-spar {
  display: inline-flex; align-items: center; flex: none;
  padding: 4px 9px; border-radius: 2px;
  background: color-mix(in srgb, var(--tv-wine) 10%, transparent);
  color: var(--tv-wine);
  font-size: 12.5px; font-weight: 500; letter-spacing: .01em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
html body .tv-spar--inline { background: none; padding: 0; }
html body .tv-card .tv-spar { font-size: 12px; padding: 3px 7px; }
/* Auf der Karte sitzt sie in der Preiszeile, nicht als Ecke auf dem Bild:
   ein Rabatt gehoert zum Preis, nicht auf das Produktfoto. */
html body .tv-card__flag--sale { display: none; }

/* ── PDP-Galerie im freigegebenen 1:1-Format ─────────────────────────────
   Die Bildserie ist durchgaengig quadratisch (1254x1254). Das alte
   1179/1301-Hochformat stammte von der einzelnen Mama-Originalaufnahme und
   haette jedes Serienbild oben und unten beschnitten. */
html body .pl-pb__main img,
html body .pl-pb__slide img {
  aspect-ratio: auto !important;
  object-fit: contain !important;
  max-height: none !important;
  width: 100% !important; height: auto !important;
}
html body .pl-pb__main { background: transparent; border-radius: var(--tv-radius); overflow: hidden; }
html body .pl-pb__thumb { border-radius: var(--tv-radius); overflow: hidden; }
html body .pl-pb__thumb img { aspect-ratio: 1 / 1 !important; object-fit: cover !important; }
/* Desktop-Ruhe: keine Schattenbuehne unter dem Hauptbild. */
@media (min-width: 900px) {
  html body .pl-pb__main { box-shadow: none !important; }
}
/* Mobil: volle Breite, ein Bild je Ansicht, Dots und Legende darunter. */
@media (max-width: 749px) {
  /* pl-base.css hielt jede mobile Slide trotz height:auto auf 4:5. Bei den
     quadratischen Importbildern blieb dadurch unter dem voll sichtbaren Motiv
     ein ca. 84px hoher Sandstreifen. Die Slide folgt jetzt dem nativen
     Bildformat; align-self verhindert ein Strecken auf die Rail-Höhe. */
  html body .pl-pb__slide {
    height: fit-content !important;
    aspect-ratio: auto !important;
    align-self: flex-start !important;
    background: transparent !important;
    border-radius: var(--tv-radius) !important;
    overflow: hidden;
  }
  html body .pl-pb__railwrap { margin-bottom: 14px !important; }
}
/* Bildlegende: die Rolle des Bildes, nicht Dekoration. */
html body .pl-pb__cap {
  font-size: 12.5px !important; color: var(--tv-ink-soft) !important;
  text-transform: none !important; letter-spacing: .01em !important;
}

/* ── Gegatete Zugabe im Kaufbereich ─────────────────────────────────────
   Erscheint nur, wenn am Produkt tilvy.zugabe_frei = true gesetzt ist. */
html body .pl-pb__zugabe {
  margin: 10px 0 0; padding-top: 10px;
  border-top: 1px solid var(--tv-line);
  font-size: 13.5px; line-height: 1.45; color: var(--tv-ink);
}

/* ── Kampagnenband ──────────────────────────────────────────────────────
   Zurueckhaltend statt Ramsch: Weinrot als Flaeche, eine Zeile, ein Link. */
html body .tv-kampagne { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
html body .tv-kampagne__text { margin: 0; font-size: clamp(18px, 2vw, 24px); font-weight: 500; letter-spacing: -.015em; }
html body .tv-kampagne__sub { margin: 6px 0 0; font-size: 13.5px; }

/* ── T3 · Befunde der eigenen Sichtpruefung 1440/390 ─────────────────────── */

/* 11 · BEFUND: Unter dem Hauptbild stand eine leere Sandflaeche. Die Buehne
   trug noch das Hochformat der einzelnen Mama-Aufnahme; die freigegebene
   Serie ist quadratisch. Buehne und Bild bekommen dasselbe Format. */
html body .pl-pb__main { aspect-ratio: auto !important; }
html body .pl-pb__main img { position: static; inset: auto; height: auto !important; }
html body .pl-pb__main { position: relative; }

/* 12 · BEFUND: Jede Variantenkarte trug einen goldenen Kreis mit Geschenk-
   Icon. Drei davon untereinander sind genau die Icon-Suppe, die der Auftrag
   ausschliesst — und sie sagen nichts, was die Karte nicht schon sagt.
   Der Auswahlpunkt wird wieder das, was er ist: ein Radioknopf. */
html body .pl-pb__dot {
  background: transparent !important; box-shadow: none !important;
  width: 18px !important; height: 18px !important; min-width: 18px !important;
  border: 1.5px solid color-mix(in srgb, var(--tv-ink) 32%, transparent) !important;
  border-radius: 50% !important;
}
html body .pl-pb__dot::before,
html body .pl-pb__dot::after { content: none !important; }
html body .pl-pb__dot svg { display: none !important; }
html body .pl-pb__tier.is-sel .pl-pb__dot {
  border-color: var(--tv-wine) !important;
  box-shadow: inset 0 0 0 4px var(--tv-wine) !important;
}

/* 13 · BEFUND: „DEINE AUSWAHL" stand gesperrt in Versalien — dieselbe
   Schablone wie die uebrigen Uebertitel, die bereits ersetzt wurde. */
html body .pl-pb__optlabel {
  text-transform: none !important; letter-spacing: .01em !important;
  font-size: 13px !important; font-weight: 500 !important;
  color: var(--tv-ink-soft) !important;
}

/* 14 · Variantenkarten: ruhige Reihe statt drei gerahmter Kaesten. */
html body .pl-pb__tier {
  background: none !important; box-shadow: none !important;
  border: 1px solid var(--tv-line) !important; border-radius: var(--tv-radius) !important;
}
html body .pl-pb__tier.is-sel { border-color: var(--tv-wine) !important; background: color-mix(in srgb, var(--tv-wine) 4%, transparent) !important; }
html body .pl-pb__tp { font-variant-numeric: tabular-nums; }
html body .pl-pb__tp-old { color: var(--tv-ink-soft) !important; }

/* 15 · Sehr lange Produktnamen (das Sortiment hat welche mit 90 Zeichen)
   duerfen die Kaufbox nicht sprengen. */
html body .pl-pb__title { text-wrap: balance; }
@media (min-width: 900px) {
  html body .pl-pb__title { font-size: clamp(24px, 2.2vw, 31px) !important; }
}

/* 16 · BEFUND (Sichtpruefung PDP, 1440): Vor jeder Variantenkarte sass ein
   goldener Kreis mit Geschenk-Icon aus pl-base.css (.pl-pb__tier::before,
   radial-gradient + Maske). Drei davon untereinander sind Dekoration ohne
   Aussage — und sie verschieben die Karte um 34px nach rechts. Kreis und
   Innenabstand entfallen; die Auswahl fuehrt der Radioknopf. */
html body .pl-pb__tier::before { content: none !important; }
html body .pl-pb__tier::after { content: none !important; }
html body .pl-pb__tier { padding-left: 14px !important; gap: 10px; }

/* 17 · Preiszeile der Produktkarte: Preis, Streichpreis und Ersparnis duerfen
   umbrechen, aber nie mitten im Betrag. */
html body .tv-card__price { flex-wrap: wrap; row-gap: 5px; }
html body .tv-card__price > * { white-space: nowrap; }

/* 18 · Oeffnungs-Sektion ohne gesetzte Bildpunkte: die Buehne bekommt eine
   Lesebreite, damit rechts keine tote Flaeche steht. */
html body .op-grid:not(:has(.op-punkt)) .op-buehne { max-width: 620px; }
html body .op-grid:not(:has(.op-punkt)) { display: block; }

/* ═══════════════════════════════════════════════════════════════════════════
   R16 · MARKENFORMEN, FLAECHENRHYTHMUS UND KAUFNAHER VERTRAUENSBLOCK
   Befund Sven 11.09.2026: Die Seite las sich als Creme-Standardseite mit
   Standardkarten — zu wenig bewusste Farbe, keine wiederkehrende Form.
   Antwort: EINE Formfamilie (Bogen + Raute + Goldhaarlinie) auf Bildfenstern
   und Trennern, zwei echte Weinflaechen im Home-Rhythmus, und ein kompakter
   Vertrauensblock direkt unter dem CTA.
   Dieser Abschnitt ist rein additiv und setzt frueher definierte Regeln nicht
   zurueck; er steht bewusst am Dateiende.
   ═════════════════════════════════════════════════════════════════════════ */

/* R16.1 · Bogenfenster — die Tilvy-Grundform auf Bildflaechen, nie auf Text.
   Die Hero-/Story-Bilder tragen die Rundung in der Section selbst (ID-
   Spezifitaet); hier stehen die uebrigen Bildfenster. */
html body .tv-arch,
html body .tv-sel__media,
html body .op-buehne {
  border-radius: 190px 190px var(--tv-radius) var(--tv-radius);
  overflow: hidden;
}
@media (max-width: 749px) {
  html body .tv-arch,
  html body .tv-sel__media,
  html body .op-buehne { border-radius: 130px 130px var(--tv-radius) var(--tv-radius); }
}

/* R16.2 · Trenner: Raute links, Goldhaarlinie rechts.
   Ersetzt die nackte 1px-Linie der frueheren .tv-rule additiv. */
html body .tv-rule {
  display: flex; align-items: center; gap: 12px;
  border: 0; border-top: 0; height: auto; margin: 26px 0 0; padding: 0;
}
html body .tv-rule::before {
  content: ""; flex: none; width: 7px; height: 7px; rotate: 45deg;
  background: var(--tv-gold); border-radius: 1px;
}
html body .tv-rule::after {
  content: ""; flex: 1 1 auto; height: 1px;
  background: color-mix(in srgb, var(--tv-gold) 55%, transparent);
}
html body .tv-section--wine .tv-rule::after { background: color-mix(in srgb, var(--tv-gold) 78%, transparent); }

/* R16.3 · Weinflaeche mit Licht statt Blockton. Kein Bildmaterial, keine Ladekosten. */
html body .tv-wine-field {
  background:
    radial-gradient(120% 90% at 12% 0%, #5E1A2B 0%, rgba(94,26,43,0) 62%),
    var(--tv-wine);
  color: var(--tv-on-wine);
}
html body .tv-wine-field .tv-editorial__title,
html body .tv-wine-field .tv-editorial__text { color: var(--tv-on-wine); }
html body .tv-wine-field figcaption { color: var(--tv-on-wine-soft); }

/* R16.4 · Kaufnaher Vertrauensblock — kompakte Flaeche, keine Siegelwand.
   Inhalt kommt ausschliesslich aus echten Shopdaten (siehe pl-main-buybox). */
html body .tv-trust {
  display: grid; gap: 10px; margin-top: 18px; padding: 14px 16px;
  background: color-mix(in srgb, var(--tv-sand) 60%, var(--tv-ivory));
  border: 1px solid var(--tv-line);
  border-left: 3px solid var(--tv-wine);
  border-radius: var(--tv-radius);
  text-align: left;
}
html body .tv-trust__zeile {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; line-height: 1.5; color: var(--tv-ink);
}
html body .tv-trust__zeile svg { flex: none; width: 17px; height: 17px; margin-top: 2px; color: var(--tv-wine); }
html body .tv-trust__pay { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; vertical-align: middle; }
html body .tv-trust__pay svg, html body .tv-trust__pay img { height: 20px; width: auto; }
html body .tv-trust__quelle { font-size: 12.5px; color: var(--tv-ink-soft); margin: 2px 0 0; }
html body .tv-trust__quelle a { color: var(--tv-ink-soft); }

/* R16.5 · Personalisierung als bewusster Markenschritt, nicht als nacktes Formular. */
html body .tv-perso {
  background: var(--tv-ivory);
  border: 1px solid var(--tv-line);
  border-top: 3px solid var(--tv-wine);
  border-radius: var(--tv-radius);
  padding: 18px 16px 16px;
  margin: 20px 0;
  position: relative;
}
html body .tv-perso::before {
  content: ""; position: absolute; top: -3px; left: 0; width: 64px; height: 3px;
  background: var(--tv-gold);
}
html body .tv-perso__titel { font-weight: 600; font-size: 16px; color: var(--tv-ink); letter-spacing: -.005em; }
html body .tv-perso__hinweis { color: var(--tv-ink-soft); font-size: 13.5px; }
html body .tv-perso__label { font-weight: 500; font-size: 14.5px; color: var(--tv-ink); }
html body .tv-perso__pflicht { color: var(--tv-wine); font-weight: 700; }
html body .tv-perso__opt { color: var(--tv-ink-soft); font-weight: 400; font-size: 12.5px; }
html body .tv-perso__in {
  border: 1px solid var(--tv-line);
  border-radius: var(--tv-radius);
  background: #fff;
  padding: 11px 12px;
  font-size: 16px;          /* verhindert iOS-Zoom beim Fokus */
  min-height: 46px;
}
html body .tv-perso__in:focus-visible {
  outline: 2px solid var(--tv-wine); outline-offset: 1px; border-color: var(--tv-wine);
}
html body .tv-perso__fehler { color: var(--tv-accent); font-size: 13px; font-weight: 500; }
html body .tv-perso__zaehler { color: var(--tv-ink-soft); font-size: 12.5px; }
html body .tv-perso__anzahl {
  display:grid; grid-template-columns:1fr 92px; align-items:center; gap:12px;
  padding:12px 0; margin-bottom:4px; border-bottom:1px solid var(--tv-line);
}
html body .tv-perso__anzahl .tv-perso__in { min-height:42px; padding-block:8px; }
html body [data-tv-count-field][hidden] { display:none !important; }

/* ══════════════════════════════════════════════════════════════════════
   R16.6 · MOBILE BUYBOX-REIHENFOLGE FUER DIE R16-BLOECKE
   BEFUND (Codex, echtes Development-Theme @390, kein Mock): .tv-trust
   stand mit top≈640 VOR dem Produkttitel top≈882.
   URSACHE: pl-base.css macht .pl-pb__buy bei max-width:749px zum
   Flex-Container und vergibt an alle bekannten Kinder ein order
   (.pl-pb__form 0 … .pl-pb__desc 18). Die beiden neuen R16-Kinder
   .tv-perso und .tv-trust kannte diese Liste nicht; ohne order gilt
   der Initialwert 0 und beide rutschen vor Badge und Titel.
   KORREKTUR: beide werden in das BESTEHENDE Ordersystem eingeordnet,
   ohne fremde Werte umzunumerieren (andere Writer aktiv).
     .tv-perso -> order 7, gleichauf mit .pl-pb__tiers. Bei Gleichstand
     entscheidet die Quellreihenfolge; .pl-pb__tiers steht im Markup vor
     dem Personalisierungs-Snippet. Ergebnis: Varianten -> Gravur/Foto
     -> Kaufbutton (order 8).
     .tv-trust -> order 8, gleichauf mit .pl-pb__atc. Der Haupt-CTA steht
     im Markup vor dem Vertrauensblock, also folgt .tv-trust direkt unter
     dem Button und bleibt vor .pl-pb__mrev (9) und .pl-pb__guar (10).
   Reine order-Korrektur: kein Markup, kein Formular, keine Feldfolge.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 749px) {
  html body .pl-pb__buy .tv-perso { order: 7; margin-bottom: 12px; }
  html body .pl-pb__buy .tv-trust { order: 8; margin-top: 14px; }
}

/* R17 · persönliches Schmuckatelier: rechteckige Bildbühnen, Silber nur für
   eigene Garantien. Die R16-Bogenform ist nach Svens Mobilreview entfernt. */
html body .tv-arch,
html body .tv-sel__media,
html body .op-buehne { border-radius: var(--tv-radius); }
html body .tv-trust__garantien {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;
  padding-bottom:11px; border-bottom:1px solid var(--tv-line);
}
html body .tv-trust__garantien > span {
  display:flex; align-items:center; gap:7px; min-height:34px; padding:2px 0;
  background:none; color:var(--tv-ink); border:0; font-size:12px; line-height:1.25;
}
html body .tv-trust__garantien b {
  width:24px; height:24px; border:1px solid #9b9da1; border-radius:50%;
  display:grid; place-items:center; font-size:10px; flex:none;
  background:linear-gradient(145deg,#fafafa,#d7d8da); box-shadow:inset 0 0 0 2px #f6f1ed;
}
html body .ta__grid--no-media {
  grid-template-columns:minmax(0,760px) !important;
  justify-content:center;
}
html body .ta__grid--no-media .ta__copy { max-width:760px !important; }
@media (max-width:749px) {
  html body .pl-pb__buy .tv-bb-benefits { order:3; }
  html body .tv-trust__garantien { grid-template-columns:1fr; }
}