/**
 * Winzerseite.
 *
 * AUFBAU
 *   1  Token          2  Grundlagen      3  Bausteine
 *   4  Sektionsrumpf  5  Hero            6  Sortiment
 *   7  Kundenstimmen  8  Paket           9  Herkunft
 *  10  Über Vinomeet 11  Ähnliche       12  SEO
 *  13  FAQ           14  Breiten
 *
 * ZWEI REGELN, DIE HIER DURCHGEHALTEN WERDEN
 *
 * Alles haengt unter `.vmw-seite`. Kein `:root`, kein `body`, keine
 * Theme-Selektoren — die Seite darf ausserhalb ihrer selbst nichts aendern.
 * Die einzige Ausnahme ist `.vmw-hauptbereich` (Abschnitt 2). Das ist auch
 * keine echte: die Klasse ist unsere eigene, sie wird vom Plugin an `<main>`
 * gehaengt (`render/template.php`, Eingriff 4), und die Regel dahinter nimmt
 * nur Polster zurueck. Ein Theme-Selektor steht nach wie vor nirgends.
 *
 * Seit dem 08.09.2026 gibt es eine zweite dieser Art: `body.vmw-winzer`
 * (Abschnitt 6). Auch das ist unsere eigene Klasse, gesetzt ueber
 * `body_class` in `render/template.php`. Die Regel dahinter sperrt das
 * Scrollen, solange das mobile Filter-Sheet offen steht -- ein Dialog im
 * Top Layer bringt das nicht mit, und `<body>` ist die einzige Stelle, an
 * der es wirken kann.
 *
 * Seit dem 11.09.2026 traegt dieselbe Klasse zusaetzlich Woodmarts vier
 * Umriss-Stellschrauben (Abschnitt 2). Deren `:focus-visible`-Regel steht
 * mit `!important` und einer Spezifitaet von (0,2,1) ueber unserer (0,2,0)
 * und gewinnt ab 1025px in jedem Fall. Statt mit `!important` dagegen
 * anzutreten, werden ihre eigenen Variablen gesetzt -- die Theme-Regel malt
 * dann unseren Ring. Der Rumpf und nicht `.vmw-seite` ist dabei richtig,
 * weil Kopf, Menue und Fuss ausserhalb liegen: ein Tabulator-Durchlauf soll
 * nicht in der Mitte der Seite die Ringsorte wechseln.
 *
 * Kein `!important` auf Theme-Regeln. Woodmart setzt seine Schriften mit
 * Spezifitaet (0,0,1); `.vmw-seite h2` hat (0,1,1) und gewinnt ohne Gewalt.
 * Gegen das Elementor-Kit (`.elementor-kit-6 h2`, ebenfalls (0,1,1))
 * entscheidet die Ladereihenfolge: dieses Stylesheet meldet sich bei
 * Prioritaet 10030 an, nach dem Child-Theme (10010) und vinomeet-custom.css
 * (10020).
 */

/* ------------------------------------------------------------------ */
/* 1  Token                                                            */
/* ------------------------------------------------------------------ */

.vmw-seite {
	/* An das Elementor-Kit gebunden, mit dem Designwert als Rueckfall.
	   Der Rueckfall ist Pflicht, nicht Vorsicht: Elementor laedt sein
	   Kit-CSS nur auf Seiten, die mit Elementor gebaut sind — auf diesem
	   Template waere die Variable sonst leer. Beide Werte sind identisch,
	   die Bindung kostet also nichts und gewinnt, sobald jemand die
	   Markenfarbe im Kit aendert. */
	--vmw-beere: var(--e-global-color-primary, #8E2C5D);
	--vmw-rose: var(--e-global-color-secondary, #B95F68);

	--vmw-beere-dunkel: #7A2450;
	--vmw-ink: #3F3A3D;
	--vmw-soft: #5C545A;
	--vmw-muted: #6F676B;
	/* Seit dem 21.09.2026 nicht mehr fuer Schrift -- die nimmt
	   `--vmw-muted-hell-text` weiter unten. */
	--vmw-muted-hell: #8F868B;
	--vmw-flaeche: #F7F1F3;
	--vmw-linie: #E7DEE2;
	--vmw-linie-2: #DFCED6;
	--vmw-nacht: #2B1A22;

	/* Die Fuellung der aufgeklappten Filtertafel (Entwurf V5, `.refinement`).
	   EINE SPUR HELLER ALS `--vmw-flaeche` und deshalb ein eigener Wert: in
	   der Tafel stehen Pillen, deren gewaehlter Zustand `--vmw-flaeche`
	   benutzt. Waeren beide gleich, verschwaende die Auswahl im Untergrund --
	   genau der Zustand, den die Tafel zeigen soll. */
	--vmw-tafel: #FCFAFB;

	/* Die Etiketten auf der Kachel. Bis zum 08.09.2026 waren sie gelb --
	   der Kunde hat im Meeting am 04.09.2026 angemerkt, dass im CI nirgends
	   Gelb vorkommt, und weisse Schrift auf den Rottoenen der Seite
	   gewuenscht. Je Etikett ein eigener Ton, damit sie sich voneinander
	   abheben; kommen weitere Typen dazu ("Bestseller", "Jonathan
	   empfiehlt"), bekommen sie hier ihre eigene Zeile und im Markup
	   `vmw-badge--<typ>`.
	   Seit dem 09.09.2026 ist Gelb ganz weg: der Spar-Chip des Pakets war
	   sein letzter Verwender, und der Kunde wollte ihn nicht. Die Ersparnis
	   steht jetzt als eigene weisse Zeile unter dem Preis. `--vmw-gelb` ist
	   deshalb aus dieser Liste verschwunden -- eine Farbe, die dasteht, wird
	   irgendwann benutzt. */
	--vmw-badge-empfehlung: var(--vmw-beere);
	/* Angebot auf der Textfassung der Rose: Weiss auf der Markenrose hielt
	   nur 4,29:1 (A3, Review vom 24.09.2026). Gilt shopweit -- die Kachel
	   steckt ueberall in `.vmw-seite`. */
	--vmw-badge-angebot: var(--vmw-rose-text);
	--vmw-badge-eigen: var(--vmw-beere);
	--vmw-eyebrow-dunkel: #E8C7DB;

	/* Die Eyebrow im Hero steht auf dem abgedunkelten Foto und soll die
	   Markenfarbe tragen (Rueckmeldung vom 08.09.2026). --vmw-beere selbst
	   ist dort zu dunkel, und --vmw-eyebrow-dunkel laesst sich nicht einfach
	   umstellen: dasselbe Token traegt die Eyebrow der Paket-Sektion, die auf
	   dem beerefarbenen Band steht -- Beere auf Beere verschwindet. Deshalb
	   ein eigener Ton: gleicher Farbwinkel wie die Beere, nur heller. */
	--vmw-eyebrow-hero: #E495BC;
	--vmw-aus-flaeche: #EFE9EB;
	--vmw-aus-text: #A79EA2;
	--vmw-gesperrt: #C4BCB9;
	--vmw-initiale-flaeche: #F0E2E9;

	--vmw-gruen: #4F7556;
	--vmw-orange: #B96845;
	--vmw-rot: #A34747;

	/* TEXTFASSUNGEN DER AKZENTFARBEN (21.09.2026, Audit FE-014).
	   Rose, Orange und das helle Grau stehen auf der Seite auch als SCHRIFT,
	   in 11 bis 12px: Eyebrows, "Nur noch 4 Flaschen", Bildquellen,
	   Zertifikatslabels. Gemessen auf der Pfaffmann-Seite erreichten sie auf
	   Weiss und auf `--vmw-flaeche` die 4,5:1 nicht (Rose 4,29 und 3,84,
	   Orange 4,09, helles Grau 3,53 und 3,16).
	   Die Markenfarben bleiben, wie sie sind -- sie tragen weiter Punkte,
	   Sterne, Symbole und Flaechen, wo 3:1 genuegt. Fuer Schrift gibt es je
	   einen eigenen, dunkleren Ton mit GLEICHEM Farbwinkel und gleicher
	   Saettigung, nur weniger Helligkeit. Jeder erreicht auf Weiss, auf
	   `--vmw-flaeche` und auf `--vmw-tafel` mindestens 4,6:1 -- mit etwas
	   Luft, damit Kantenglaettung nicht unter die Grenze zieht.
	   Die Rose-Textfassung haengt bewusst NICHT am Elementor-Kit: der
	   Kit-Wert ist die Markenfarbe selbst und genau der, der nicht reicht.
	     --vmw-rose-text        #B14D57  Weiss 5,16  Flaeche 4,63
	     --vmw-orange-text      #A15B3C  Weiss 5,15  Flaeche 4,62
	     --vmw-muted-hell-text  #746B70  Weiss 5,15  Flaeche 4,62 */
	--vmw-rose-text: #B14D57;
	--vmw-orange-text: #A15B3C;
	--vmw-muted-hell-text: #746B70;

	/* Fliesstext ans Theme gebunden — dort steht ohnehin Jost.
	   Ueberschriften nach Design. */
	--vmw-sans: var(--wd-text-font, "Jost", "Segoe UI", system-ui, sans-serif);
	--vmw-serif: "PT Serif", Georgia, serif;

	/* An Woodmarts Containerbreite gebunden, nicht an die Designzahl 1440.
	   Header, Menue, Prefooter und Footer laufen in .container mit
	   --wd-container-w — auf dieser Site 1400px. Eine Winzerseite auf 1440
	   haette auf demselben Bildschirm eine andere Maximalbreite als ihr
	   eigener Kopf. Der Rueckfall traegt bewusst den Theme-Wert und nicht
	   den Designwert: faellt die Variable weg, ist Fluchten immer noch
	   richtiger als 1440. Wer die Site global auf 1440 hebt, zieht die
	   Winzerseite damit automatisch mit. */
	--vmw-container: var(--wd-container-w, 1400px);
	--vmw-gutter: 20px;
	--vmw-sekt-oben: 40px;
	--vmw-sekt-unten: 40px;

	--vmw-radius-karte: 14px;
	--vmw-radius-pille: 999px;
	--vmw-radius-bild: 12px;
	--vmw-radius-klein: 4px;
	/* Listen und Aufklapp-Flaechen: Kaufliste, Filter-Panel, Kaufbestaetigung.
	   Zahlenwert wie `--vmw-radius-bild`, aber ein eigenes Token — Bilder
	   springen ab 768px auf 16px, diese drei sollen es ausdruecklich nicht.
	   Vorher stand an allen drei Stellen eine nackte 12, und man sah der
	   Datei nicht an, ob das Absicht war. */
	--vmw-radius-liste: 12px;

	/* DREI STUFEN FUER ALLES ANKLICKBARE.
	   Vorher standen sieben verschiedene Hoehen auf der Seite, drei davon in
	   derselben Werkzeugleiste. Hier stehen die Zahlen, die untereinander
	   stimmen muessen — Polster bleibt bei den Elementen, weil es dort
	   unterschiedlich sein darf.
	     L  Sektions-Handlung: Hero, Paket, Ueber, FAQ, Zuruecksetzen, Nachladen
	     M  Kachel-Handlung:   In den Warenkorb, Nicht verfuegbar, Zum Wein
	     S  Werkzeugleiste:    Chip, Segment, Dropdown-Kopf, Filter-Knopf
	   Die Hoehen sind Mindesthoehen. Bricht eine Beschriftung um, waechst der
	   Knopf mit, statt seinen Text zu quetschen. */
	--vmw-knopf-l-hoehe: 50px;
	--vmw-knopf-l-schrift: 17px;
	--vmw-knopf-m-hoehe: 44px;
	--vmw-knopf-m-schrift: 16px;
	/* 44 SCHMAL, 40 AB 768px (20.09.2026).

	   Die kleinen Knoepfe sind die Bedienelemente der Filterleiste: Chips,
	   Geschmacks-Segmente, der Aufklapper und der Reset. Auf einem Telefon
	   werden sie mit dem Finger getroffen, und 44px ist die Grenze, die
	   diese Datei an anderen Stellen laengst zitiert.

	   Aufgefallen ist es erst am 20.09.2026, und zwar am Aufklapper: seit
	   das Filter-Sheet fort ist, ist er schmal der EINZIGE Weg zu Geschmack,
	   Rebsorte, Ausbau, Alkohol, Preis und "Passt zu". Vorher stand er dort
	   auf `hidden`, und ein verborgener Knopf wird von keiner Messung
	   eingeholt. Die 40px galten aber genauso fuer die Chips daneben -- nur
	   hat sie nie jemand gemessen.

	   Ab 768px zeigt eine Maus darauf; dort bleiben es 40, sonst waechst die
	   Leiste ohne Gegenwert. Entwurf V5 haelt es genauso herum (43 breit,
	   40 schmal) -- wir gehen schmal bewusst darueber. */
	--vmw-knopf-s-hoehe: 44px;
	--vmw-knopf-s-schrift: 14px;

	/* Eine Dauer fuer alles, was auf Zeigen und Klicken antwortet. */
	--vmw-uebergang: 0.16s ease;

	/* Der Fokusring erbt sich. Auf den Beere-Baendern und im Nacht-Panel
	   setzen diese Bloecke ihn auf Weiss um — ein beerefarbener Ring waere
	   dort so gut wie unsichtbar. */
	--vmw-fokus-ring: var(--vmw-beere);

	/* Und dasselbe noch einmal fuer Woodmart. Eine benutzerdefinierte
	   Eigenschaft wird auf dem Element aufgeloest, auf dem sie DEKLARIERT
	   wird -- ein einzelnes `--wd-otl-color: var(--vmw-fokus-ring)` weiter
	   oben wuerde hier zu Beere und vererbte sich als Literal weiter. Die
	   Stellen, die den Ring auf Weiss stellen, erreichten es nie mehr.
	   Deshalb steht neben jeder Umschaltung eine Zwillingszeile. */
	--wd-otl-color: var(--vmw-beere);

	/* Weinart-Farbpunkt. Wird je Kachel inline ueberschrieben, damit eine
	   neue Weinart keine CSS-Aenderung braucht. */
	--vmw-art: #C8C0B8;

	/* DIE SCHRIFTSKALA (21.09.2026).

	   Eine Rolle, eine Fassung. Bis zu diesem Tag stand jede Groesse an ihrer
	   Regel: drei H2-Groessen (34, 38, 40), fuenf fuer Kartentitel in zwei
	   Schriften, Versalien in vier Groessen, drei Staerken und sieben
	   Sperrungen. Der Kunde hat es gesehen ("mal serifenlos, mal mit Serifen,
	   mal kleiner, mal groesser").

	   Die Grundlage ist design-spez.md:36-50 -- PT Serif fuer Ueberschriften,
	   Titel, Leads, Preise und Knoepfe; Jost fuer Text, Labels und
	   Bedienelemente; Versalien nur im Label -- mit den am 13.09.2026
	   bestaetigten Werten H2 34/28 und Label 11 (filter.md:209).

	   Hier stehen die SCHMALEN Werte. Der 768er-Block setzt die breiten an
	   genau einer Stelle um; keine Rollenregel traegt mehr eine eigene
	   768er-Groesse. Die Produktkachel steht bewusst ausserhalb: ihre Werte
	   sind einzeln vom Kunden entschieden (design-spez.md:233, :347). */
	--vmw-schrift-h2: 28px;
	--vmw-schrift-h3: 20px;
	--vmw-schrift-lead: 19px;
	--vmw-schrift-text: 15px;
	--vmw-schrift-karte: 14px;
	--vmw-schrift-meta: 13px;
	--vmw-schrift-fein: 12px;
	--vmw-schrift-label: 11px;
	--vmw-schrift-link: 14px;
	--vmw-sperrung-label: 0.16em;
}

/* ------------------------------------------------------------------ */
/* 2  Grundlagen                                                       */
/* ------------------------------------------------------------------ */

.vmw-seite {
	font-family: var(--vmw-sans);
	font-size: 16px;
	line-height: 1.6;
	color: var(--vmw-ink);
	background: #FFFFFF;
	overflow-x: clip;
}

/* Das Theme polstert `<main class="wd-content-layout">` mit
   `padding-block: 40px` (base.min.css). Sein eigener Gegen-Reset haengt an
   der Body-Klasse `wd-header-overlap`, die diese Seite nicht hat — also
   standen 40px Weiss zwischen Menue und Hero und noch einmal 40px zwischen
   FAQ und Footer. Die Sektionen tragen ihr Polster selbst, hier gehoert
   keins hin.
   Die Klasse kommt aus `render/template.php` (Eingriff 4) und hat dieselbe
   Spezifitaet wie `.wd-content-layout`; dieses Stylesheet meldet sich bei
   Prioritaet 10030 an und laedt spaeter. Deshalb kein `!important`. */
.vmw-hauptbereich {
	padding-block: 0;
}

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

.vmw-seite p,
.vmw-seite h1,
.vmw-seite h2,
.vmw-seite h3,
.vmw-seite h4,
.vmw-seite figure,
.vmw-seite blockquote,
.vmw-seite dl,
.vmw-seite dd {
	margin: 0;
}

.vmw-seite ul,
.vmw-seite ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* WOODMART GESTALTET NACKTE ELEMENTE MIT — DAS NEHMEN DIESE ZWEI REGELN
   ZURUECK.
   Der Reset darueber setzt nur `margin`. Woodmart gestaltet aber ueber
   Element- und `:is()`-Selektoren weiter, und was dort steht, kam bis zum
   03.09.2026 ungefiltert durch. Beide Regeln gewinnen mit (0,1,1) gegen
   (0,1,0) bzw. (0,0,1) — ohne `!important`, wie im Kopf zugesagt.
   Sie nehmen ausschliesslich zurueck, was das Theme setzt; gestaltet wird
   in Abschnitt 3. */

/* `base.min.css`: blockquote{margin-bottom:20px; padding-left:30px;
   border-left:2px solid var(--wd-primary-color); text-align:left;
   font-size:110%}. Der beerefarbene Strich links am Zitat war nie
   entworfen — er stand an der Hero-Kuration, an den Kundenstimmen und an
   der Herkunft-Buehne. Das `text-align: left` schlug dort ausserdem die
   Zentrierung der Buehne, die sich sonst vererbt haette. */
.vmw-seite blockquote {
	padding: 0;
	border: 0;
	font-size: inherit;
	text-align: inherit;
}

/* `base.min.css`: :is(.btn,.button,button,[type=submit],[type=button]) mit
   `text-transform: uppercase`, `font-weight: 600`, `min-height: 42px`,
   eigener Flaeche, eigenem Rahmen und `transition: all .25s`.
   Folgen, die man der Seite ansah: Filter-Chips und Geschmacks-Segmente
   standen in VERSALIEN, die Dropdown-Koepfe daneben nicht — die sind
   `<summary>`. Der Warenkorb-Knopf stand in Versalien, der Hero-Knopf
   nicht — der ist ein `<a>`. Und der auf 22px entworfene Stepper war
   42px hoch.
   `display` und die Ausrichtung bleiben stehen: inline-flex mit
   zentriertem Inhalt ist genau das, was die Schaltflaechen hier brauchen. */
.vmw-seite button,
.vmw-seite [type="submit"],
.vmw-seite [type="button"] {
	min-height: 0;
	padding: 0;
	gap: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-style: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-transform: none;
	text-shadow: none;
	transition: none;
}

/* Derselbe Reset fuer die beiden Zustaende, in denen ELEMENTOR angreift.
   Der globale Kit-Stil (Dokument 6, `uploads/elementor/css/post-6.css`)
   setzt
     `.elementor-kit-6 button:hover, … button:focus { color:#FFFFFF;
      box-shadow: 0 0 10px rgba(0,0,0,0.5) }`
   -- also einen schwarzen Schein von 10px bei halber Deckung unter JEDEN
   Knopf der Seite. Der Reset darueber hat zwei Einheiten und verliert
   gegen die drei der Kit-Regel; er wirkt deshalb nur im Ruhezustand.

   Aufgefallen ist es an der Filterleiste: Chips und Geschmacks-Segmente
   sind <button> und leuchteten beim Zeigen auf, die Klappkoepfe daneben
   sind <summary> und blieben ruhig. Am 09.09.2026 gemeldet. Betroffen
   waren neun Knopfarten, gemessen am ausgelieferten Dokument.

   Gleiche Spezifitaet wie die Kit-Regel -- es entscheidet die
   Reihenfolge, und `winzer.css` haengt an Prioritaet 10030 und laedt
   zuletzt. Dasselbe Prinzip wie bei `vmw-hauptbereich`.

   NUR `box-shadow`, ausdruecklich nicht `color` und nicht `background`:
   der Ausverkauft-Knopf setzt seine Farbe mit zwei Einheiten und
   verloere sie hier. Die Schriftfarbe wird stattdessen dort geregelt,
   wo sie hingehoert -- an den Elementen selbst, die einen eigenen
   Zeigen-Zustand haben. */
.vmw-seite button:hover,
.vmw-seite button:focus,
.vmw-seite [type="submit"]:hover,
.vmw-seite [type="submit"]:focus,
.vmw-seite [type="button"]:hover,
.vmw-seite [type="button"]:focus {
	box-shadow: none;
}

/* Dasselbe fuer Eingabefelder. Woodmart gibt `input` und `select` eine feste
   `height: 42px` — gemessen am 03.09.2026: der auf 22px entworfene
   Mengenwaehler war dadurch 52px hoch (42 fuer das Zahlenfeld plus Polster
   und Rahmen des Gehaeuses), und die Sortier-Auswahl blies die
   Werkzeugleiste auf. `height: auto` gibt beiden ihre Texthoehe zurueck.
   Kaestchen und die versteckten Radios bleiben unberuehrt: `.vmw-option__haken`
   und `.screen-reader-text` setzen ihre Masse selbst und mit mehr Klassen. */
.vmw-seite input,
.vmw-seite select,
.vmw-seite textarea {
	min-height: 0;
	height: auto;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-transform: none;
}

/* WOODMART FAERBT JEDE PREISZAHL, UEBERALL.
   `woocommerce-base.min.css` traegt `.amount { color: var(--wd-primary-color);
   font-weight: 600 }` -- ohne jede Einschraenkung auf einen Vorfahren. Und
   `wc_price()` verpackt jeden Betrag in genau so ein `<span class="amount">`.
   Unsere Preisregeln sitzen am aeusseren Element; die Zahl darin ERBT deren
   Farbe nur, und ein geerbter Wert verliert gegen jede direkte Regel, egal
   wie schwach sie ist.

   Am 09.09.2026 gemessen (kopfloser Chrome mit dem echten Theme-CSS): auf
   dieser Box ist `--wd-primary-color` rgb(164,64,112), und damit standen
   Kachelpreis, Literpreis, Kaufzeile und der Streichpreis des Pakets in
   Rosa statt in Tinte oder Weiss -- alle vier zusaetzlich halbfett. Die
   Abmachung vom 04.09.2026 („Preise einheitlich in PT Serif, schwarz und
   nicht fett“) war damit still ausgehebelt. Der Kunde hat es an der
   auffaelligsten Stelle bemerkt und „zu transparent“ genannt: Rosa auf dem
   beerefarbenen Band sieht ausgewaschen aus.

   Bis dahin gab es dieses Gegenstueck nur einmal, an `.vmw-paket__betrag`.
   Eine Regel fuer alle ist nicht nur kuerzer, sie kann auch nicht beim
   naechsten Preis wieder vergessen werden.

   Zwei Klassen -- schwach genug, dass jede unserer eigenen Preisregeln und
   jeder Elementor-Stilregler sie schlaegt. Genau das ist gewollt: sie soll
   nichts bestimmen, sondern nur die Vererbung wiederherstellen. */
.vmw-seite .amount {
	color: inherit;
	font-weight: inherit;
}

.vmw-seite img {
	display: block;
	max-width: 100%;
	height: auto;
}

.vmw-seite a {
	color: var(--vmw-beere);
	text-decoration: none;
}

.vmw-seite a:hover {
	color: var(--vmw-beere-dunkel);
}

/* Die Seite hat lange Sprungziele. 96px halten die Ueberschrift frei,
   auch wenn ein klebriger Header darueber steht. */
.vmw-seite [id] {
	scroll-margin-top: 96px;
}

/* Kein `border-radius` mehr an dieser Stelle: die Eigenschaft gehoert dem
   Element, nicht dem Ring. Der Wert 2px machte aus jeder Pille im Fokus ein
   Rechteck — der Ring folgt dem Radius des Elements ohnehin von selbst. */
.vmw-seite :focus-visible {
	outline: 2px solid var(--vmw-fokus-ring);
	outline-offset: 3px;
}

/* WOODMART MALT DEN RING, NICHT WIR (11.09.2026).

   `:is(a,button,input[...],[tabindex="0"]):focus-visible` setzt dort einen
   gepunkteten schwarzen Umriss mit `!important`. Die Regel darueber
   verliert -- und zwar auch ohne `!important`, denn `:is()` erbt die
   Spezifitaet seines staerksten Arguments und kommt mit `:focus-visible`
   auf (0,2,1) gegen unsere (0,2,0). Sichtbar war ein Mischwesen: deren
   schwarze Punkte mit deren Abstand von -1px.

   Gemessen am 11.09.2026: bei 1422px `dotted 2px rgb(0,0,0)` bei -1px, bei
   504px dagegen `solid 2px rgb(142,44,93)` bei 3px -- die Theme-Regel liegt
   in `@media (min-width: 1025px)` und gilt auf einem Telefon gar nicht.
   Repariert wird trotzdem: ein Ring, der breit anders aussieht als schmal,
   ist kein Ring, sondern ein Zufall.

   Kein `!important`-Krieg, sondern die Stellschrauben des Themes selbst.
   Die Farbe steht bei jeder Umschaltung von `--vmw-fokus-ring` als
   Zwillingszeile daneben; hier steht nur der Rueckfall fuer Kopf, Menue und
   Fuss, die ausserhalb von `.vmw-seite` liegen. Bricht ein Woodmart-Update
   die Variablennamen, faellt der Ring stumm auf schwarze Punkte zurueck --
   dagegen steht eine eigene Zusicherung im Pruefling. */
body.vmw-winzer {
	--wd-otl-style: solid;
	--wd-otl-width: 2px;
	--wd-otl-offset: 3px;
	--wd-otl-color: var(--e-global-color-primary, #8E2C5D);
}

/* Die eingebaute `[hidden]`-Regel des Browsers verliert gegen JEDE
   display-Deklaration
   einer Author-Regel -- nicht wegen der Spezifitaet, sondern wegen der
   Kaskaden-Herkunft. Ohne diese Zeile ist `el.hidden = true` im Skript
   wirkungslos, sobald die Klasse ein `display` traegt. 2.1.0 hatte die Regel
   (`winzer.css:77` dort), 3.0.0 hat sie beim Umbau verloren -- und daran hingen
   am 08.09.2026 gleich sechs Stellen: Leer-Block, Nachlade-Block, Filterleiste,
   Reset-Knopf, das Abzeichen am Filterknopf und die Kaufzeile nach dem Kauf.
   `!important` ist hier richtig und nicht ersetzbar: `[hidden]` ist ein
   Zustand, kein Vorschlag, und eine spaetere Regel darf ihn nicht kippen. */
.vmw-seite [hidden] {
	display: none !important;
}

.vmw-seite .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* 3  Bausteine                                                        */
/* ------------------------------------------------------------------ */

.vmw-seite .vmw-eyebrow {
	font-size: var(--vmw-schrift-label);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: var(--vmw-sperrung-label);
	text-transform: uppercase;
	color: var(--vmw-rose-text);
}

.vmw-seite .vmw-eyebrow--hell {
	color: var(--vmw-eyebrow-dunkel);
}

/* HIER STAND BIS ZUM 15.09.2026 DER HELLE HERO-TON.

   Er war dafuer da, dass die Eyebrow auf dem abgedunkelten Foto lesbar
   blieb und trotzdem nach Marke aussah -- `--vmw-beere` war dort zu dunkel.
   Seit der Hero zweispaltig ist, steht sie auf der hellen Flaeche neben dem
   Foto, und dort ist die Beere genau richtig. Die Eyebrow des Hero
   unterscheidet sich damit nicht mehr von der jeder anderen Sektion auf
   Papier, also braucht sie auch keine eigene Regel mehr.

   `--vmw-eyebrow-hero` bleibt als Token stehen, ungenutzt: wer den
   Vollbild-Hero zurueckholen will, braucht ihn wieder, und ein Farbwert mit
   dieser Begruendung ist schwerer wiederzufinden als wiederzuverwenden. */

.vmw-seite .vmw-h2 {
	font-family: var(--vmw-serif);
	font-weight: 400;
	font-size: var(--vmw-schrift-h2);
	line-height: 1.2;
	color: var(--vmw-ink);
}

/* EINE H2-GROESSE FUER ALLE NEUN SEKTIONEN (21.09.2026).

   Hier stand "bewusst gestaffelt -- die Baender tragen 40, die Herkunft 42.
   Nicht angleichen." Gerendert wurden 34, 38 und 40, und der Kunde hat genau
   diese Streuung gemeldet. Seither gilt `--vmw-schrift-h2` (28 / 34) ueberall;
   die Baender unterscheiden sich durch ihre Flaeche, nicht durch die
   Ueberschrift. */
.vmw-seite .vmw-h2--hell {
	color: #FFFFFF;
}

.vmw-seite .vmw-h3 {
	font-family: var(--vmw-serif);
	font-weight: 400;
	font-size: var(--vmw-schrift-h3);
	line-height: 1.25;
	color: var(--vmw-ink);
}

.vmw-seite .vmw-h3 a {
	color: inherit;
}

.vmw-seite .vmw-h4 {
	font-family: var(--vmw-serif);
	font-weight: 400;
	font-size: var(--vmw-schrift-h3);
	line-height: 1.25;
	color: var(--vmw-ink);
}

.vmw-seite .vmw-sub {
	font-size: var(--vmw-schrift-text);
	line-height: 1.55;
	color: var(--vmw-muted);
}

.vmw-seite .vmw-sub--breit {
	max-width: 78ch;
}

.vmw-seite .vmw-lead-serif {
	font-family: var(--vmw-serif);
	font-size: var(--vmw-schrift-lead);
	line-height: 1.5;
	max-width: 50ch;
	color: rgba(255, 255, 255, 0.95);
}

.vmw-seite .vmw-fliesstext {
	font-size: var(--vmw-schrift-text);
	line-height: 1.6;
	color: var(--vmw-ink);
}

.vmw-seite .vmw-fliesstext p + p {
	margin-top: 1em;
}

.vmw-seite .vmw-fliesstext--hell {
	color: rgba(255, 255, 255, 0.86);
}

/* Die Initiale steht nicht im Markup — sonst waere sie im Vorlesetext ein
   einzelner Buchstabe vor dem Wort. */
.vmw-seite .vmw-fliesstext--initiale > p:first-of-type::first-letter {
	float: left;
	font-family: var(--vmw-serif);
	font-size: 48px;
	line-height: 0.85;
	padding: 5px 8px 0 0;
	color: var(--vmw-beere);
}

.vmw-seite .vmw-fliesstext--hell.vmw-fliesstext--initiale > p:first-of-type::first-letter {
	color: var(--vmw-eyebrow-dunkel);
}

/* Knoepfe. Die Pillenform bleibt Knoepfen vorbehalten — Links sind
   Textlinks mit Pfeil, nie Pillen.
   Das hier ist Stufe L: die Handlung einer Sektion. Die Hoehe kommt als
   Mindestmass, nicht aus dem Polster — nur so ist sie dieselbe, egal ob
   der Knopf ein `<a>` (Hero, Paket, Ueber, FAQ) oder ein `<button>`
   (Zuruecksetzen, Nachladen) ist. */
.vmw-seite .vmw-knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: var(--vmw-knopf-l-hoehe);
	font-family: var(--vmw-serif);
	font-size: var(--vmw-knopf-l-schrift);
	font-weight: 400;
	line-height: 1.2;
	text-align: center;
	padding: 12px 30px;
	border: 1px solid transparent;
	border-radius: var(--vmw-radius-pille);
	background: var(--vmw-beere);
	color: #FFFFFF;
	cursor: pointer;
	transition:
		background-color var(--vmw-uebergang),
		color var(--vmw-uebergang),
		border-color var(--vmw-uebergang);
}

/* Stufe M — dieselbe Formsprache, eine Nummer kleiner. So steht es in der
   Design-Spez: „Button (Produktkachel) PT Serif 16px", „Button 44".
   Die Stufe haengt am Knopf, nicht am Elternteil. Vorher stand sie als
   `.vmw-kauf .vmw-knopf` und traf damit nur den kaufbaren Fall: „Nicht
   verfuegbar" und „Zum Wein" stehen im Markup AUSSERHALB von `.vmw-kauf`
   und blieben deshalb 17px gross. Im dreispaltigen Raster bekamen
   benachbarte Kacheln dadurch unterschiedlich hohe Fuesse. */
.vmw-seite .vmw-knopf--kachel {
	min-height: var(--vmw-knopf-m-hoehe);
	font-size: var(--vmw-knopf-m-schrift);
	padding: 10px 22px;
}

.vmw-seite .vmw-knopf--voll:hover {
	background: var(--vmw-beere-dunkel);
	color: #FFFFFF;
}

.vmw-seite .vmw-knopf--hell {
	background: #FFFFFF;
	color: var(--vmw-beere);
}

.vmw-seite .vmw-knopf--hell:hover {
	background: var(--vmw-flaeche);
	color: var(--vmw-beere-dunkel);
}

.vmw-seite .vmw-knopf--geist {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.6);
	color: #FFFFFF;
}

.vmw-seite .vmw-knopf--geist:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #FFFFFF;
}

/* DER STRICH KOMMT AUS `text-decoration` UND NICHT AUS EINER LINIE
   (22.09.2026).

   Bis dahin war es eine `border-bottom` an einem `inline-flex`-Element.
   Zwei Dinge gingen damit schief. Erstens lief der Strich unter dem
   GANZEN Element, also auch unter einem vorangestellten Zeichen -- in der
   Einstiegs-Box begann er unter der Sprechblase und las sich als loser
   Strich statt als Linksignal. Zweitens bricht eine Unterkante am
   Zeilenumbruch nicht mit, ein Unterstrich schon.

   Der Hero-Zweitweg hat diese Form seit dem 20.09. bereits (Abschnitt 5);
   dort ist sie entstanden, nachdem am 19.09. beides gleichzeitig stand und
   der Kunde zwei Striche untereinander sah. Jetzt gilt sie fuer alle elf
   Verwender der Klasse, und der Sonderfall im Hero ist keiner mehr.

   `padding-bottom` ist ersatzlos entfallen: es hielt den Abstand zur
   Unterkante frei, den es nicht mehr gibt. Den Abstand traegt jetzt
   `text-underline-offset`. Wo eine Zeile die alten 2px braucht -- der
   Hero-Zweitweg in der Knopfreihe --, steht das Polster an der Zeile
   selbst.

   `text-decoration-thickness: 1px` ausdruecklich: ohne die Angabe leitet
   der Browser die Staerke aus der Schrift ab, und Jost 600 ergibt bei
   14px zwei Pixel. Die Linie war eine Haarlinie und soll eine bleiben. */
.vmw-seite .vmw-textlink {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	font-size: var(--vmw-schrift-link);
	font-weight: 600;
	color: var(--vmw-beere);
	text-decoration: underline;
	text-decoration-color: var(--vmw-linie-2);
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
	transition: color var(--vmw-uebergang), text-decoration-color var(--vmw-uebergang);
}

.vmw-seite .vmw-textlink:hover {
	text-decoration-color: currentColor;
}

.vmw-seite .vmw-textlink--hell {
	color: #FFFFFF;
	text-decoration-color: rgba(255, 255, 255, 0.45);
}

.vmw-seite .vmw-textlink--hell:hover {
	color: #FFFFFF;
}

.vmw-seite .vmw-textlink--klein {
	font-size: 13px;
}

.vmw-seite .vmw-chip {
	display: inline-flex;
	align-items: center;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.3;
	padding: 6px 14px;
	border-radius: var(--vmw-radius-pille);
	background: rgba(255, 255, 255, 0.94);
	color: var(--vmw-beere);
}

.vmw-seite .vmw-sterne {
	color: var(--vmw-rose);
	letter-spacing: 0.1em;
	font-size: 14px;
}

.vmw-seite .vmw-bild {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--vmw-radius-bild);
}

.vmw-seite .vmw-icon {
	flex: 0 0 auto;
}

/* ------------------------------------------------------------------ */
/* 4  Sektionsrumpf                                                    */
/* ------------------------------------------------------------------ */

/* Jede Sektion traegt ihr Polster selbst; einen zusaetzlichen Abstand
   zwischen den Sektionen gibt es nicht. An den Naehten addieren sich die
   Polster — das ist im Design so gerechnet. */
.vmw-seite .vmw-sektion {
	padding: var(--vmw-sekt-oben) var(--vmw-gutter) var(--vmw-sekt-unten);
}

.vmw-seite .vmw-sektion--flaeche {
	background: var(--vmw-flaeche);
}

.vmw-seite .vmw-sektion--band {
	background: var(--vmw-beere);
	color: #FFFFFF;

	/* Auf Beere ist ein beerefarbener Fokusring nicht zu sehen. Der Wert
	   erbt sich an alles in diesem Band weiter — es braucht keine Regel je
	   Schaltflaeche. */
	--vmw-fokus-ring: #FFFFFF;
	--wd-otl-color: #FFFFFF;
}

.vmw-seite .vmw-sektion--nacht {
	background: var(--vmw-nacht);
	color: rgba(255, 255, 255, 0.86);
	--vmw-fokus-ring: #FFFFFF;
	--wd-otl-color: #FFFFFF;
}

/* ------------------------------------------------------------------ */
/* 5  Hero                                                             */
/* ------------------------------------------------------------------ */

/* ZWEISPALTIG SEIT DEM 15.09.2026, UND DAS LOEST DREI ALTE PROBLEME AUF.

   Bis dahin lag ein Vollbild-Foto absolut hinter dem Text, darueber ein
   Schleier, damit weisse Schrift lesbar blieb. Was daran haengengeblieben
   ist, steht ausfuehrlich im Kopf von `hero.php`; hier nur, was es fuer
   dieses Stylesheet bedeutet:

     - `position: absolute` am Bild, `grid-area: 1 / 1 / 3 / 2`, `z-index:
       -1` und der ganze Verlauf: ersatzlos weg. Das Foto ist ein
       gewoehnliches Gitterkind.
     - Der Reparaturblock `--ohne-bild` mit acht Regeln, der die weisse
       Schrift fuer Winzer ohne Foto zurueck auf dunkel stellte: ersatzlos
       weg. Dunkel ist jetzt der Normalfall, und ein Winzer ohne Foto
       bekommt schlicht eine Spalte statt zwei.
     - Die Mindesthoehen 396px und 560px, die den ersten Bildschirm fuellen
       sollten: weg. Die Hoehe kommt jetzt vom Foto und vom Text.

   SCHMAL IST ES EINE SPALTE: Text, darunter das Foto. Dass das Foto im
   Dokument NACH dem Text steht, ist genau dafuer da -- ohne Umsortierung
   durch `order`, das die Vorlesereihenfolge von der sichtbaren trennt. */

/* SCHMAL IST DIESER ABSCHNITT SEIT DEM 18.09.2026 DIE VARIANTE M1.

   Was der Kunde am Canvas gewaehlt hat, in einem Satz: das Foto traegt das
   Zitat, der Hero gibt seine beiden Knoepfe an die Sektionsleiste darunter
   ab, und statt der Kurzbeschreibung steht der kurze Stilsatz unter dem
   Namen. Gemessen endet die Sortiment-Ueberschrift dadurch bei 628px statt
   bei 950px -- 322px frueher.

   Was das fuer dieses Stylesheet heisst:

     - Die Grundfassung OHNE Medienabfrage ist die schmale, wie im ganzen
       Rest der Datei. Alles ab 768px wird in Abschnitt 14 zurueckgenommen.
     - Foto und Zitat stehen zusammen in `.vmw-hero__medien`. Schmal ist die
       Huelle ein Gitter mit einer Zeile: das Foto liegt absolut darin, das
       Zitat ist das einzige Kind im Fluss und sitzt unten. Ab 768px loest
       `display: contents` sie auf, und beide werden unmittelbare
       Gitterkinder der Buehne -- das Zitat wandert damit zurueck in die
       Textspalte, wo Entwurf V5 es haben will.
     - Der Schleier haengt an der Zitat-Figur, nicht am Fotokasten, und seine
       Deckung steht in PIXELN. Naeheres bei `.vmw-hero__kuration`.
     - Das Band ist randlos: `margin-inline` hebt das Polster der Sektion
       auf. Das sind 350px Textbreite statt 300 -- dieselbe Kante wie beim
       Paket- und beim Ueber-Band. */
.vmw-seite .vmw-hero {
	padding: 14px var(--vmw-gutter) 0;
	background: #FFFFFF;
}

/* DIE BROTKRUME STEHT AUSSERHALB DER BUEHNE.

   Vorher war sie deren erstes Gitterkind, und davor sogar absolut gesetzt.
   Der absolute Stand war die Ursache der Kollision vom 12.09.2026: der
   Textkasten darunter war unten verankert, wuchs nach oben und lief bei
   einem langen Namen in sie hinein -- gemessen 33,6px Ueberlappung. Als
   Gitterzeile konnte das nicht mehr passieren, als eigene Zeile UEBER dem
   Kasten erst recht nicht.

   Sie steht jetzt auf Weiss und nicht mehr auf einem abgedunkelten Foto,
   also dunkel. */
.vmw-seite .vmw-hero__brotkrume {
	padding-bottom: 12px;
	font-size: 11px;
	color: var(--vmw-muted);
}

.vmw-seite .vmw-hero__brotkrume ol {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

/* Der Trenner ist ein Mittelpunkt, kein Geviertstrich. */
.vmw-seite .vmw-hero__brotkrume li + li::before {
	content: "·";
	margin-right: 6px;
	color: var(--vmw-linie-2);
}

.vmw-seite .vmw-hero__brotkrume a {
	color: inherit;
}

.vmw-seite .vmw-hero__brotkrume a:hover {
	color: var(--vmw-beere);
}

.vmw-seite .vmw-hero__brotkrume [aria-current] {
	color: var(--vmw-ink);
}

/* `overflow: hidden` ist hier kein Zierrat, sondern das, was das Foto an
   der gerundeten Ecke abschneidet. Eine gerundete Ecke schneidet ihre
   Kinder NICHT von selbst ab -- dieselbe Falle wie an der Kaufbox.

   SCHMAL GIBT ES DIE RUNDUNG NICHT: das Band laeuft von Kante zu Kante.
   `overflow: hidden` bleibt trotzdem stehen, denn es haelt auch das
   waagerechte Ueberlaufen eines 2048px breiten Fotos ab. */
.vmw-seite .vmw-hero__buehne {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin: 0 calc(var(--vmw-gutter) * -1);
	overflow: hidden;
	border-radius: 0;
	background: var(--vmw-flaeche);
}

/* Ein Winzer ohne Hero-Foto bekommt eine Spalte statt zwei. Mehr ist nicht
   noetig: es gibt keine weisse Schrift mehr, die zurueckgestellt werden
   muesste, und keine zweite Spalte, die leer bliebe. Aus acht Regeln ist
   eine geworden.

   Schmal ist ohnehin schon eine Spalte; diese Regel wirkt erst ab 768px --
   und dort stand sie bis zum 18.09.2026 gar nicht. Sie steht im Grundteil,
   die zweispaltige Vorgabe kommt spaeter in der Datei und hat dieselbe
   Spezifitaet: ein Winzer ohne Foto bekam auf dem Desktop eine leere zweite
   Spalte. Das Gegenstueck steht jetzt in Abschnitt 14. */
.vmw-seite .vmw-hero__buehne--ohne-bild {
	grid-template-columns: minmax(0, 1fr);
}

/* 12px Abstand statt 10: gemessen stehen im Entwurf 12px zwischen
   Ueberschrift und Satz darunter. */
.vmw-seite .vmw-hero__text {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	padding: 22px var(--vmw-gutter);
}

/* Die Eyebrow steht in BEERE, nicht in Rose. Rose auf der Flaeche `#F7F1F3`
   kommt auf 3,84:1 und verfehlt damit AA fuer kleinen Text; Beere erreicht
   7,05:1. Gerechnet am 18.09.2026, gilt an jeder Breite. */
.vmw-seite .vmw-hero__text > .vmw-eyebrow {
	color: var(--vmw-beere);
}

.vmw-seite .vmw-hero__titel {
	font-family: var(--vmw-serif);
	font-weight: 400;
	font-size: 40px;
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--vmw-ink);
}

/* DER EINE SATZ UNTER DEM NAMEN.

   16px statt 15: es ist jetzt der kurze Satz aus `typisch_fuer`, nicht mehr
   die vierzeilige Kurzbeschreibung, und der darf etwas groesser stehen. */
.vmw-seite .vmw-hero__lead {
	max-width: 48ch;
	font-size: 16px;
	line-height: 1.5;
	color: var(--vmw-soft);
}

/* HIER STANDEN ZWEI SAETZE, VON DENEN JE BREITE EINER SICHTBAR WAR.

   Die Kurzbeschreibung brauchte schmal vier bis fuenf Zeilen, der Stilsatz
   aus `typisch_fuer` zwei; `--nur-breit` blendete die eine schmal aus,
   `.vmw-hero__stilsatz` die andere breit. Am 19.09.2026 hat sich gezeigt,
   dass die Kurzbeschreibung auch auf dem Desktop vier Zeilen braucht (216
   Zeichen gegen 116 im Entwurf). Seitdem steht der kurze Satz an beiden
   Breiten, `hero.php` waehlt ihn aus, und beide Regeln sind weg. */

/* Die Zeile unter dem Einleitungssatz ("Familienweingut aus Walsheim · Seit
   1955") gibt es nur auf grossen Bildschirmen. Schmal zaehlt jeder Pixel bis
   zur Bildschirmkante, und sie ordnet ein, statt zu fuehren. */
.vmw-seite .vmw-hero__ortszeile {
	display: none;
}

.vmw-seite .vmw-hero__aktionen {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-top: 10px;
}

.vmw-seite .vmw-hero__aktionen .vmw-knopf {
	align-self: stretch;
}

/* BEIDE WEGE STEHEN AUCH SCHMAL IM HERO (19.09.2026).

   Hier standen drei Regeln, die dem Hero auf dem Handy seine Knoepfe
   wegnahmen, sobald die Sektionsleiste darunter dieselben zwei Ziele trug --
   ausser bei langem Inhalt, dann kam der gefuellte Knopf zurueck und der
   zweite Weg blieb weg. Das kostete keine Hoehe, aber es hiess: der Kopf
   sieht bei jedem Winzer anders aus, und welche Fassung er bekommt,
   entscheiden drei Zeichenzahlen, die nie an echten Daten kalibriert worden
   sind.

   Der Kunde hat am 19.09.2026 entschieden: Knopf und Textlink stehen mobil
   immer, die Leiste traegt die Wege ein zweites Mal. Das kostet gemessene
   74px -- Pfaffmanns Sortiment-Ueberschrift rutscht von 597 auf rund 671px
   und damit unter die Kante 614. Bewusst bezahlt: ein Kopf, der ueberall
   gleich aussieht, ist mehr wert als eine Ueberschrift, die bei einem von
   drei Winzern gerade eben noch ins Bild passt.

   `vmw-hero--eng` bleibt und steuert nur noch die Freizone ueber dem Zitat
   (72 statt 56px). Es entscheidet damit nichts mehr ueber Wege. */

/* DER ZWEITE WEG AUF DEM HANDY: UNTERSTRICHEN UND ZENTRIERT.

   Dritte Fassung an dieser Stelle, und jede hatte ihren Grund.

   Bis zum 10.09.2026 ein Textlink mit Haarlinie: 184px breit, 27px hoch,
   unter einem 448px breiten gefuellten Knopf. Der Kunde meldete, dass nicht
   erkennbar ist, dass "Das Weingut kennenlernen" ueberhaupt anklickbar ist
   -- und 27px sind kein Fingerziel, die WCAG nennt 44px als Untergrenze.
   Danach ein Umriss-Knopf in voller Breite; damit standen zwei Pillen
   untereinander und zwei gleich starke Hauptwege.

   Seit dem 19.09.2026 auf Wunsch des Kunden: kein Knopf, unterstrichen,
   zentriert unter dem gefuellten Knopf. Der Unterstrich ist das
   Klicksignal, das der ersten Fassung fehlte; die 44px Mindesthoehe bleiben
   das Fingerziel. Damit sieht der zweite Weg schmal aus wie auf dem Desktop
   -- eine Gestalt statt zwei.

   Die Klassen `vmw-textlink vmw-textlink--hell` bleiben am Element: an
   ihnen haengen zwei Elementor-Regler. `--hell` faerbt Text und Linie
   weiss; hier gewinnt die Beere, sonst waere der Link auf der hellen
   Flaeche unsichtbar. */
.vmw-seite .vmw-hero__zweitweg {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	min-height: 44px;
	padding: 10px 6px;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: var(--vmw-schrift-link);
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	text-decoration: underline;
	text-underline-offset: 5px;
	color: var(--vmw-beere);
}

/* Drei Einheiten und ausdruecklich noetig: `.vmw-textlink--hell:hover` hat
   ebenfalls drei und wuerde den Text auf Weiss stellen -- auf dem hellen
   Grund, auf dem dieser Link steht, waere er dann unsichtbar. */
.vmw-seite .vmw-hero__zweitweg:hover,
.vmw-seite .vmw-hero__zweitweg:focus {
	color: var(--vmw-beere-dunkel);
}

/* DIE MEDIEN-HUELLE -- FOTO UND ZITAT IN EINEM KASTEN.

   Sie ist reine Ordnung: keine Flaeche, kein Radius, kein `overflow`. Ab
   768px loest `display: contents` sie auf (Abschnitt 14), und Foto wie Zitat
   werden unmittelbare Gitterkinder der Buehne -- das Zitat steht dann in der
   Textspalte, wie Entwurf V5 es will.

   SCHMAL IST SIE EIN GITTER MIT EINER ZEILE. Das Foto liegt absolut darin
   und traegt deshalb nichts zur Hoehe bei; das Zitat ist das einzige Kind im
   Fluss und sitzt unten.

   DIE EINE ZEILENANGABE IST KEIN SCHMUCK. Ohne Zitat haette die Huelle gar
   keinen Inhalt im Fluss und fiele auf 0px zusammen -- das Foto verschwaende
   lautlos. Am Canvas gemessen: der Zustand "Tag 1" war dann Pixel fuer Pixel
   derselbe wie "ohne Foto". `minmax(200px, auto)` haelt 200px Bild, waechst
   mit dem Zitat mit und aendert am Zustand mit Zitat nichts.

   `#271921` ist der Rueckfall, wenn das Bild nicht laedt oder gar keines
   gepflegt ist: weisse Schrift auf Hell waere sonst unlesbar. Der Wert ist
   der Endton des Schleiers und bewusst kein Token -- ihn auf `--vmw-ink`
   oder `--vmw-beere` zu biegen faerbte das Foto anders ein. */
.vmw-seite .vmw-hero__medien {
	position: relative;
	display: grid;
	grid-template-rows: minmax(200px, auto);
	background: #271921;
}

/* DAS ZITAT LIEGT IM FOTO, AUF EINEM SCHLEIER (18.09.2026).

   Die sechste Fassung, und die erste, die gemessen ist. Die Vorgeschichte
   kurz: weisse Karte auf Weiss (10.09.), rahmenloses Zitat (10.09.),
   getoente Karte (11.09.), Pille mit Aufklapper im Foto (11.09.), dauerhaft
   offen im Foto (12.09.), Haarlinie im Textfluss (15.09.). Der Kunde hat am
   18.09. die Fassung im Foto gewaehlt -- dieselbe, die er am 12.09. gelobt
   hatte, jetzt aber mit nachgerechnetem Kontrast.

   DER SCHLEIER HAENGT AN DIESER FIGUR UND NICHT AM FOTOKASTEN, und seine
   Deckung steht in PIXELN statt in Prozent. Das ist der Unterschied
   zwischen lesbar und nicht: ueber 295px Fotohoehe verteilt kommt ein
   prozentualer Verlauf an der ersten Textzeile auf rund 0,4 Deckung -- weiss
   auf einem hellen Motiv sind das etwa 2:1. Bei 0,72 an genau der Zeile, an
   der der Text beginnt, sind es rechnerisch 6,7:1 selbst gegen ein
   reinweisses Foto.

   `--vmw-freizone` ist zugleich das Oberpolster und der Ort des zweiten
   Farbstopps -- beide muessen dieselbe Zahl tragen, sonst liegt der Stopp
   nicht auf der ersten Zeile. Die Inhaltsweiche stellt nur diese eine
   Eigenschaft um.

   UNTER DER ERSTEN TEXTZEILE WIRD ER NICHT MEHR DUNKLER (20.09.2026).
   Bis dahin lief der Verlauf von 0,72 auf 0,92 zu. An der 0,72 haengt die
   Rechnung oben; an der 0,92 hing nichts -- sie hat nur das untere
   Bilddrittel fast schwarz gemacht. Der Kunde hat das am 19.09. gemeldet.
   Jetzt steigt der Schleier bis zur ersten Zeile und bleibt dann stehen.

   DIE DECKUNG IST EIN FELD, KEINE KONSTANTE. `hero_schleier` je Winzer,
   Vorgabe 61 -- der hellste Wert, der weisse Schrift auf einem REINWEISSEN
   Foto noch ueber 4,5:1 haelt (gerechnet 4,61:1; bei 0,60 sind es 4,47:1).
   Ein dunkles Motiv vertraegt weniger, ein sehr helles braucht mehr; die
   Zahl hier ist der Wert fuer den schlimmsten Fall.

   DER RUECKFALL IN DER REGEL IST PFLICHT und nicht Zierde: ein leeres
   `--vmw-schleier` machte die ganze `background`-Deklaration ungueltig, und
   weisse Schrift staende auf dem nackten Foto. Deshalb steht die Zahl hier
   und nicht nur im `style`-Attribut. */
.vmw-seite .vmw-hero__kuration {
	--vmw-freizone: 72px;
	--vmw-schleier: 0.61;

	/* DAS FOTO LIEGT ABSOLUT, ALSO MUSS DAS ZITAT POSITIONIERT SEIN.

	   Ohne diese zwei Zeilen ist das Zitat auf dem Geraet UNSICHTBAR. Ein
	   positionierter Nachfahre malt ueber statischen Inhalt -- unabhaengig
	   davon, wo er im Gitter sitzt und in welcher Reihenfolge er im Markup
	   steht. Die Geometrie stimmte, der gerechnete Kontrast stimmte, und
	   gesehen hat das Zitat trotzdem niemand. Gemeldet vom Kunden am
	   19.09.2026, zwoelf gruene Hero-Zusicherungen daneben.

	   Im Pruefstand konnte es nicht auffallen: die Bildadressen zeigen auf
	   die Box hinter Basic-Auth, dort laedt nie ein Foto, also malt auch nie
	   eines darueber. Seit dem 19.09. bettet `seite-bauen.php` die Bilder ein.

	   `position: relative` ist nicht schmueckend -- ohne einen anderen Wert
	   als `static` greift `z-index` nicht. */
	position: relative;
	z-index: 1;

	grid-area: 1 / 1 / 2 / 2;
	align-self: end;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: var(--vmw-freizone) var(--vmw-gutter) 20px;
	border: 0;
	border-radius: 0;
	background: linear-gradient(
		rgba(39, 25, 33, 0),
		rgba(39, 25, 33, var(--vmw-schleier)) var(--vmw-freizone),
		rgba(39, 25, 33, var(--vmw-schleier))
	);
}

/* Langer Name, langes Zitat oder langer Stilsatz: die Freizone schrumpft von
   72 auf 56px. Sie kauft Klarheit, nicht Hoehe -- der Text steht dann
   ohnehin schon tief, und 16px Foto weniger sind billiger als eine weitere
   Zeile. Welche Laengen das ausloesen, entscheidet `hero_eng()`; eine
   Zeichenzahl laesst sich in einer Stilregel nicht pruefen. */
.vmw-seite .vmw-hero--eng .vmw-hero__kuration {
	--vmw-freizone: 56px;
}

/* DER AUFKLAPPER IST STILLGELEGT (15.09.2026), NICHT AUSGEBAUT.

   Er war die Antwort auf "Kasten auf dem Foto, schmal zu hoch": eine Pille
   auf dem Schleier, ein Tipp zeigte das Zitat. Mit dem zweispaltigen Hero
   gibt es weder Schleier noch Mindesthoehe, die er einhalten muesste -- das
   Zitat steht im Textfluss und kostet dort nur die Hoehe, die es braucht.

   `hero_kuration_ausloeser` hat seit dem 12.09.2026 einen leeren
   Standardwert, `hero-kuration.php` rendert also ohnehin kein <details>.
   Fuellt es jemand trotzdem, faellt der Auslöser hier weg und der Inhalt
   steht unbedingt -- der Feldhinweis im Backend sagt das seit dem
   15.09.2026 dazu. Markup und Feld bleiben stehen: ein ausgebauter Weg
   laesst sich nicht zurueckholen, ein abgeschalteter schon. */
.vmw-seite .vmw-kuration__schalter {
	display: none;
}

.vmw-seite .vmw-kuration__inhalt {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Die Eyebrow benennt, was der kursive Satz darunter ist -- ohne sie steht
   ein Zitat im Foto und niemand sagt, von wem die Auswahl stammt.

   SIE IST WEISS UND NICHT ROSE. Der Entwurf faerbt diese Zeile rosé
   (242, 208, 225); auf dem Schleier ueber einem hellen Motiv sind das 4,7:1
   bei 10px Versalien -- zu knapp fuer eine Beschriftung, die klein und
   gesperrt ist. Weiss hebt sie auf denselben Wert wie das Zitat.

   Ab 768px liegt sie nicht mehr auf einem Foto. Dort faellt sie ganz weg:
   Entwurf V5 zeigt ueber dem Zitat nur die Haarlinie. */
.vmw-seite .vmw-kuration__inhalt > .vmw-eyebrow {
	display: block;
	color: #FFFFFF;
}

/* KEIN DECKEL MEHR.

   Bis zum 15.09.2026 stand hier `-webkit-line-clamp: 3` mit einer langen
   Begruendung: das Zitat lag im Foto, und der erste Bildschirm sollte bei
   jedem Winzer gleich aussehen. Gemessen wurden dafuer drei Winzer gegen
   eine Bildschirmkante von rund 614px.

   Diese Rechnung ist mit der Mindesthoehe entfallen. Das Zitat steht jetzt
   unter den Knoepfen im Fluss; was es an Hoehe braucht, nimmt es sich, und
   darunter kommt die naechste Sektion. Der Deckel haette dafuer einen Preis
   gehabt, der ebenfalls gemessen ist: griff er, schnitt er `::after` mit ab
   -- das schliessende Anfuehrungszeichen fehlte dann. Die Zusicherung "das
   Zitat passt bei 350px in den Deckel" in `pruefling.js` ist damit
   gegenstandslos. */
.vmw-seite .vmw-hero__zitat {
	font-family: var(--vmw-serif);
	font-style: italic;
	font-size: 16px;
	line-height: 1.6;
	max-width: 29em;
	color: #FFFFFF;
}

/* Der Feldhinweis im Backend verspricht es woertlich: "Ein Satz ohne
   Anfuehrungszeichen -- die setzt die Seite selbst." Bis zum 11.09.2026
   setzte sie keine, und ein kursiver Satz ohne Kasten und ohne Zeichen
   liest sich als verirrter Fliesstext. Pseudoelemente zaehlen nicht gegen
   die Vier-Einheiten-Grenze; und damit sich nichts verdoppelt, schneidet
   `hero_kuration()` getippte Zeichen vorher ab. */
.vmw-seite .vmw-hero__zitat::before {
	content: "\201E";
}

.vmw-seite .vmw-hero__zitat::after {
	content: "\201C";
}

.vmw-seite .vmw-person {
	display: flex;
	align-items: center;
	gap: 11px;
}

/* 32px auf dem Schleier statt 39: die Zeile steht hier im Foto und nicht in
   einer Textspalte, und jede Zeile im Foto kostet Freizone. Ab 768px sind es
   wieder 39px -- die Zahl des Entwurfs. */
.vmw-seite .vmw-person__foto,
.vmw-seite .vmw-person__initialen {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
}

/* Gefuellt und nicht nur umrandet: eine Haarlinie in `--vmw-linie-2` ist auf
   dem dunklen Schleier nicht zu sehen. */
.vmw-seite .vmw-person__initialen {
	display: grid;
	place-items: center;
	border: 1px solid transparent;
	background: rgb(241, 227, 234);
	font-family: var(--vmw-serif);
	font-size: 18px;
	font-weight: 400;
	color: var(--vmw-beere);
}

.vmw-seite .vmw-person__daten {
	display: flex;
	flex-direction: column;
}

/* `.vmw-person*` kommt nur in `hero-kuration.php` vor. Die beiden hellen
   Farben sind seit dem 18.09.2026 zurueck: die Zeile steht schmal wieder auf
   dem Schleier. Ab 768px stehen hier die dunklen Toene, dort steht sie in der
   Textspalte auf Papier. */
.vmw-seite .vmw-person__name {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: #FFFFFF;
}

.vmw-seite .vmw-person__rolle {
	font-size: 12px;
	color: rgb(240, 229, 235);
}

/* DAS FOTO LIEGT ABSOLUT IN DER MEDIEN-HUELLE.

   Schmal traegt es nichts zur Hoehe bei -- die bestimmen das Zitat und die
   eine Zeilenangabe der Huelle. Das ist der Unterschied zur Fassung vom
   15.09.2026, in der es mit `height: 220px` als gewoehnliches Gitterkind
   unter dem Text stand: jetzt liegt das Zitat darauf, und eine feste Hoehe
   wuerde es entweder abschneiden oder unter sich Luft lassen.

   `min-width: 0`: ohne das wird ein Gitterkind nie schmaler als sein Inhalt,
   und ein 2048px breites Foto sprengte die Spalte. Ab 768px ist es wieder
   ein gewoehnliches Gitterkind, dann greift die Zeile wieder. */
.vmw-seite .vmw-hero__bild {
	position: absolute;
	inset: 0;
	display: block;
	min-width: 0;
}

.vmw-seite .vmw-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--vmw-fokus) 50%;
}

/* ------------------------------------------------------------------ */
/* 5b  Sektionsleiste unter dem Hero                                   */
/* ------------------------------------------------------------------ */

/* WAS SIE TRAEGT, TRAEGT DER HERO NICHT MEHR.

   Auf dem Handy gibt der Hero seine beiden Knoepfe an dieses Band ab; die
   Begruendung steht oben bei `.vmw-hero--mit-leiste .vmw-hero__aktionen`.
   Deshalb schliesst es OHNE Abstand an die Fotokante an: es ist der
   sichtbare Uebergang ins Sortiment und kein Zierstreifen. Ab 768px stehen
   34px davor, wie im Entwurf.

   RANDLOS WIE DIE BUEHNE: `margin-inline` hebt das Polster der Sektion auf,
   damit die Haarlinie von Kante zu Kante laeuft. Das Polster wandert zur
   Reiterreihe, damit der erste Reiter trotzdem buendig unter dem Namen
   steht.

   SIE KLEBT NICHT. Der Shop hat schon ein klebendes Kopfband und auf dem
   Handy eine klebende untere Leiste; ein drittes war im Canvas eine offene
   Frage an den Kunden und kein Beschluss. Im Elementor-Weg waere es ohnehin
   folgenlos -- ein Widget steckt dort in einer Huelle, die nur so hoch ist
   wie sein Inhalt, und daran klebt nichts. */
.vmw-seite .vmw-hero__leiste {
	margin: 0 calc(var(--vmw-gutter) * -1);
	border-bottom: 1px solid var(--vmw-linie);
	background: #FFFFFF;
}

/* Die Reihe wischt waagerecht und schrumpft ihre Eintraege nie. Der letzte
   Reiter laeuft dabei sichtbar ueber die Kante -- das ist der Hinweis, dass
   es weitergeht. */
.vmw-seite .vmw-hero__reiter {
	display: flex;
	align-items: center;
	gap: 23px;
	min-height: 58px;
	padding: 0 var(--vmw-gutter);
	overflow-x: auto;
	scrollbar-width: thin;
}

/* 55,6px hoch und damit ein Fingerziel: die WCAG-Empfehlung nennt 44px als
   Untergrenze. Die zwei Pixel Unterkante sind der Platz, den der aktive
   Reiter braucht -- sie stehen auch im Ruhezustand da, sonst sprangen die
   Beschriftungen beim Wechsel um zwei Pixel. */
.vmw-seite .vmw-hero__reiter > a {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	padding: 19px 0 16px;
	border-bottom: 2px solid transparent;
	font-size: 12px;
	line-height: 1.55;
	color: var(--vmw-ink);
	white-space: nowrap;
}

.vmw-seite .vmw-hero__reiter > a:hover,
.vmw-seite .vmw-hero__reiter > a:focus {
	border-bottom-color: var(--vmw-beere);
	color: var(--vmw-beere);
}

/* Welcher Abschnitt gerade im Bild ist, setzt `winzer.js` beim Scrollen.
   Im Markup steht es nicht: beim Laden steht dort der Hero, und jede feste
   Angabe waere dann falsch. */
.vmw-seite .vmw-hero__reiter > [aria-current="location"] {
	border-bottom-color: var(--vmw-beere);
	color: var(--vmw-beere);
}

/* Der Zaehler steht zweimal da: die Zahl im Kreis fuer das Auge, der Zusatz
   "(31 Weine)" fuer die Vorlesehilfe -- "Die Weine 31" ist gesprochen kein
   Satz. Deshalb traegt der Kreis `aria-hidden`. */
.vmw-seite .vmw-hero__zaehler {
	display: inline-grid;
	place-items: center;
	min-width: 15px;
	height: 15px;
	margin-left: 5px;
	border-radius: 50%;
	background: var(--vmw-flaeche);
	font-size: 9px;
	font-weight: 600;
	line-height: 1;
}

/* WEGWEISER: DIE FAKTENREIHE STAND BIS ZUM 15.09.2026 HIER.

   Sie heisst jetzt `.vmw-fakten` statt `.vmw-hero__fakten` und ihre Regeln
   liegen in Abschnitt 9 bei der Herkunft, wo sie auch gerendert wird.
   Senkrechte Trennstriche hat sie keine mehr. */

/* ------------------------------------------------------------------ */
/* 6  Sortiment                                                        */
/* ------------------------------------------------------------------ */

.vmw-seite .vmw-sortiment {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.vmw-seite .vmw-sortiment__kopf {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.vmw-seite .vmw-sortiment__einleitung {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

/* DIE STEUERZEILE: TREFFERZAHL LINKS, WERKZEUGE RECHTS (20.09.2026).

   Sie steht UNTER der Werkzeugleiste und nicht mehr neben der Ueberschrift.
   Entwurf V5 ordnet es so, und die Zahl steht damit da, wo sie hingehoert:
   unmittelbar ueber dem Regal, das sie zaehlt.

   Bis dahin gab es zwei Zahlen an zwei Orten -- oben "31 Weine im
   Sortiment", hier "9 von 31 Weinen", sobald gefiltert war. Nur die zweite
   zog das Skript nach. Jetzt ist es ein Element mit beiden Marken.

   Der Oeffner stand bis zum 10.09.2026 unten in der Werkzeugleiste, als
   direkter Nachbar der Geschmackschips. Er hatte KEINE einzige eigene
   Regel: Hoehe, Rand, Radius und Schrift kamen komplett von `.vmw-bedien`,
   gemessen 40px / rgb(223,206,214) / 999px / 14px-600 -- Zeichen fuer
   Zeichen dieselben Werte wie ein Geschmackschip. Der Kunde hat ihn dort
   fuer einen fuenften Geschmack gehalten. Neben der Zahl, die er
   veraendert, ist er die Handlung zu dieser Zahl -- daran aendert der Umzug
   nichts, die Zahl ist mitgekommen.

   KEIN `margin-top`: `.vmw-sortiment` ist eine Flex-Spalte mit `gap`,
   der Abstand zur Leiste kommt von dort. Ein eigener Rand kaeme obendrauf.

   `min-height` haelt die Zeile ruhig: der Handy-Oeffner ist 40px hoch und
   erscheint erst, wenn das Skript laeuft -- ohne Mindesthoehe waechst die
   Zeile in dem Moment und schiebt das Regal nach unten. */
.vmw-seite .vmw-sortiment__steuer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 9px 16px;
	min-height: 40px;
}

.vmw-seite .vmw-sortiment__werkzeuge {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 9px 14px;
}

.vmw-seite .vmw-sortiment__zaehler {
	margin: 0;
	font-size: 14px;
	color: var(--vmw-muted);
}

/* DIE GESETZTEN FILTER, EINZELN ENTFERNBAR.

   Wert-Chips, also die Form der Schnellauswahl -- aber gefuellt und mit
   einem Kreuz: sie zeigen keinen Vorschlag, sondern einen Zustand, und ihr
   Klick nimmt etwas weg statt etwas hinzuzufuegen.

   SEIT DEM 24.09.2026 GEFUELLT UND BORDEAUX UMRANDET (Runde 16,
   Kundenwunsch "aktive Auswahl deutlicher": helle Flaeche behalten, klaren
   Rahmen dazu). Beim Zeigen wird die Flaeche eine Stufe kraeftiger
   (`--vmw-initiale-flaeche`, kein neuer Ton), der Rand bleibt.

   UND SEITDEM UEBERHAUPT GEFUELLT. Die Regeln standen bis dahin mit zwei
   Einheiten VOR `.vmw-seite .vmw-bedien` (Abschnitt 6, gleich stark) und
   verloren gegen sie: gemessen auf Staging am 24.09.2026 war der Chip
   durchsichtig mit grauem Linienrand, 16px Polster und 8px Abstand -- nichts
   von dem, was hier stand. Der Behaelter im Selektor macht sie drei
   Einheiten stark; beim Zeigen vier, gegen die drei von `.vmw-bedien:hover`.
   Beide Wege, auf denen Chips entstehen (Server im Archiv, winzer.js auf der
   Winzerseite), setzen sie in `.vmw-aktivliste`. */

/* `:empty` und nicht nur `hidden`: das Skript leert die Reihe, statt sie zu
   verbergen -- ohne diese Regel bliebe der Flex-Abstand der Sektion stehen
   und das Regal saesse 20px zu tief. */
.vmw-seite .vmw-aktivliste {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.vmw-seite .vmw-aktivliste:empty {
	display: none;
}

.vmw-seite .vmw-aktivliste .vmw-aktivchip {
	gap: 6px;
	padding: 0 10px 0 14px;
	border-color: var(--vmw-beere);
	background: var(--vmw-flaeche);
}

.vmw-seite .vmw-aktivliste .vmw-aktivchip:hover,
.vmw-seite .vmw-aktivliste .vmw-aktivchip:focus-visible {
	border-color: var(--vmw-beere);
	background: var(--vmw-initiale-flaeche);
	color: var(--vmw-beere-dunkel);
}

/* Das Kreuz ist ein Zeichen und kein Wort -- was der Knopf tut, steht im
   `aria-label`. Es traegt deshalb `aria-hidden` und wird hier nur
   ausgerichtet. */
.vmw-seite .vmw-aktivchip__kreuz {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: rgba(39, 25, 33, 0.07);
	font-size: 13px;
	line-height: 1;
}

.vmw-seite .vmw-aktivliste__reset {
	margin-inline-start: 4px;
}

/* --- Einstiegswein -------------------------------------------------- */

/* KEIN KASTEN, SONDERN EIN BAND ZWISCHEN ZWEI LINIEN.

   Die naheliegende Form waere eine getoente Karte mit Rahmen und Radius —
   und genau die ist auf dieser Seite dreimal beanstandet worden, zuletzt am
   11.09.2026 an der Kurationsbox im Hero ("Kastenoptik",
   "Testimonial-Anmutung", "gebrochener Rhythmus"). Zwischen der Ueberschrift
   des Sortiments und der Filterleiste stuende hier ein vierter Kasten in
   einer Spalte, die sonst nur aus Text und Linien besteht.

   Ober- und Unterlinie statt Flaeche: der Hinweis hebt sich ab, ohne eine
   zweite Ebene aufzumachen. Dieselbe Entscheidung wie bei der Faktenreihe
   der Herkunft-Sektion, und dieselbe wie im Entwurf.

   SCHMAL BRICHT DIE REIHE UM, und das ist der Grundzustand — die Datei ist
   durchgehend mobile-first, die Breitfassung steht im 768er-Block.
   `align-items: flex-start`, damit der umgebrochene Hilfe-Link nicht mittig
   neben einem zweizeiligen Satz haengt. */
.vmw-seite .vmw-einstieg {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 9px 12px;
	padding: 16px 0 13px;
	border-top: 1px solid var(--vmw-linie);
	border-bottom: 1px solid var(--vmw-linie);
}

/* Das Glas ist Zierde, der Text traegt die Aussage — schmal bleibt es
   stehen, nur kleiner. Die Groesse steht hier und nicht am `icon()`-Aufruf:
   der kann nur EINE Zahl, und die muesste dann fuer beide Breiten stimmen. */
.vmw-seite .vmw-einstieg > .vmw-icon {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	color: var(--vmw-beere);
}

/* `flex-basis` und nicht `flex: 1`: schmal soll der Text die ganze Zeile
   neben dem Glas fuellen und den Hilfe-Link in die naechste druecken
   (22px Glas + 12px Abstand = 34px). */
.vmw-seite .vmw-einstieg__text {
	flex: 1 1 calc(100% - 34px);
	min-width: 0;
}

.vmw-seite .vmw-einstieg__satz {
	font-size: 14px;
	line-height: 1.45;
	color: var(--vmw-ink);
}

/* DER WEINNAME MUSS ALS LINK ZU ERKENNEN SEIN, UND ZWAR IM SATZ.

   Er steht mitten in einem Satz, der selbst schon fett ist — Farbe allein
   reicht hier nicht, und Fettschrift kann er nicht zusaetzlich tragen. Der
   Unterstrich ist das einzige Signal, das in dieser Umgebung uebrigbleibt.
   Er ist ausserdem das Signal, das nicht an Farbwahrnehmung haengt; WCAG
   1.4.1 verlangt genau das fuer einen Link im Fliesstext.

   `text-underline-offset` statt eines Rahmens: ein `border-bottom` an einem
   Inline-Element bricht am Zeilenumbruch nicht mit, der Unterstrich schon.
   Der Weinname ist lang genug, dass er umbricht. */
.vmw-seite .vmw-einstieg__wein {
	color: var(--vmw-beere);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.vmw-seite .vmw-einstieg__wein:hover,
.vmw-seite .vmw-einstieg__wein:focus {
	color: var(--vmw-beere-dunkel);
	text-decoration-thickness: 2px;
}

/* Hier stand bis zum 24.09.2026 `.vmw-einstieg__grund`, die Begruendung
   unter dem Satz. Sie ist samt Feld entfallen (Runde 16). */

/* DIE HILFE-ZEILE IST DIE ZWEITE ZEILE DERSELBEN AUFTEILUNG (22.09.2026).

   Bis dahin war sie eine eigene kleine Gestalt: 16px-Zeichen statt 22,
   7px Abstand statt 12, 12px Schrift statt 13 -- und der Gleichstand mit
   dem Satz darueber kam aus der Handrechnung `margin-left: 34px` (22px
   Glas + 12px gap). Der Kunde hat genau das beanstandet: die Zeile soll
   aussehen wie der Satz ueber ihr.

   Jetzt traegt das Zeichen dieselbe Groesse wie das Weinglas und die
   Zeile denselben Abstand wie der Behaelter. Damit beginnt das Wort von
   selbst dort, wo der Satz beginnt -- 22 + 12 = 34 --, und die Zahl 34
   steht nirgends mehr. Wer die Icongroesse aendert, verschiebt beide
   Zeilen gemeinsam statt eine davon still aus dem Lot.

   `margin-left: 0` heisst hier: das Zeichen steht UNTER dem Glas, nicht
   mehr daneben. Der alte Einzug wollte verhindern, dass sich der Link als
   Beschriftung des Weinglases liest. Das Argument galt einem 16px-Zeichen
   in eigener Gestalt; zwei gleich grosse Zeichen untereinander lesen sich
   als Spalte, nicht als Beschriftung.

   44px Mindesthoehe bleibt: WCAG-Untergrenze fuer ein Fingerziel. */
.vmw-seite .vmw-einstieg__hilfe {
	flex-shrink: 0;
	align-items: center;
	gap: 12px;
	margin-left: 0;
	min-height: 44px;
	font-size: 13px;
	text-decoration: none;
}

/* Das Zeichen wird NICHT von `.vmw-einstieg > .vmw-icon` erfasst -- es
   steckt im `<a>` und ist damit kein direktes Kind. Die Groesse steht
   deshalb hier, und zwar in derselben Zahl wie dort. */
.vmw-seite .vmw-einstieg__hilfe > .vmw-icon {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
}

/* Der Strich am Wort statt am Link: siehe Begruendung im Template. Die
   Werte sind dieselben wie in `.vmw-textlink` (Abschnitt 3) -- geerbt
   werden koennen sie nicht, weil der Link dort ausdruecklich `none`
   traegt. Aendert sich der Link-Strich, gehoert diese Regel mitgeaendert. */
.vmw-seite .vmw-einstieg__hilfewort {
	text-decoration: underline;
	text-decoration-color: var(--vmw-linie-2);
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
	transition: text-decoration-color var(--vmw-uebergang);
}

.vmw-seite .vmw-einstieg__hilfe:hover .vmw-einstieg__hilfewort,
.vmw-seite .vmw-einstieg__hilfe:focus .vmw-einstieg__hilfewort {
	text-decoration-color: currentColor;
}

/* --- Werkzeugleiste ------------------------------------------------ */

/* KEIN `gap` MEHR, seit die zweite Zeile eine Tafel ist (20.09.2026).

   Der Abstand zwischen Chipzeile und Tafel steht jetzt als `margin-top` an
   der Tafel selbst -- so, wie Entwurf V5 ihn setzt (18px). Bliebe hier ein
   `gap`, rechnete sich beides zusammen, und niemand saehe der Zahl 18 noch
   an, dass in Wahrheit 32 herauskommen.

   Das <dialog> als drittes Kind macht dabei nichts: geschlossen ist es
   `display: none`, und ein solches Kind ist kein Flex-Element, erzeugt also
   auch keinen `gap`. Das steht hier, weil es beim Lesen wie eine Falle
   aussieht und keine ist. */
.vmw-seite .vmw-leiste {
	display: flex;
	flex-direction: column;
}

.vmw-seite .vmw-leiste__zeile {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}

/* DIE TAFEL. Bis zum 20.09.2026 war das hier eine Zeile mit einer Linie
   darueber -- kein Behaelter, nur ein Strich. Der Kunde hat das Filtermenue
   daraufhin ZWEIMAL beanstandet; beim zweiten Mal mit drei Bildern, und der
   Unterschied auf ihnen ist genau dieser: in V5 (`.refinement`) ist der
   aufgeklappte Bereich eine eigene Flaeche mit Rahmen, in der drei Baender
   untereinander stehen.

   Warum das mehr ist als Geschmack: eine Linie sagt "hier geht es weiter",
   ein Rahmen sagt "das hier gehoert zusammen und ist aufgeklappt". Die
   zweite Aussage ist die richtige -- der Bereich ist ein Zustand, den man
   selbst geoeffnet hat und wieder schliessen kann.

   ZAHLEN AUS V5, nicht geschaetzt: `catalogue.css:30` gibt Rahmen
   (`var(--line)` = unser `--vmw-linie`), 9px Radius, 21/23 Polster und 18px
   Abstand nach oben. Die Fuellung `#fcfafb` ist der einzige Wert ohne
   Entsprechung im Tokensatz -- eine Spur heller als `--vmw-flaeche`
   (#F7F1F3), damit die gewaehlten Chips darin noch als Flaeche wirken. Er
   steht deshalb als eigenes Token oben in Abschnitt 1 und nicht roh hier.

   `flex-direction: column` und KEIN `gap`: die drei Baender tragen ihre
   Abstaende selbst (V5 setzt sie als `padding-block` am Geschmacksband). Ein
   `gap` hier addierte sich dazu. */
.vmw-seite .vmw-leiste__zeile--zwei {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	margin-top: 18px;
	padding: 21px 23px;
	border: 1px solid var(--vmw-linie);
	border-radius: 9px;
	background: var(--vmw-tafel);
}

/* Das zweite Band traegt den Abstand zum ersten (V5
   `.refinement .taste-picks`, `padding-block: 14px 20px`). Der Nachbar-
   Selektor und nicht eine zweite Klasse am Geschmacksband: welches Band das
   zweite ist, entscheidet sich beim Rendern -- bei einem Weingut ohne
   Empfehlung und ohne Preisstufe faellt die Schnellauswahl ganz weg, und
   dann darf das Geschmacksband den Abstand NICHT tragen. */
.vmw-seite .vmw-filterband + .vmw-filterband {
	padding-top: 14px;
}

/* --- Stufenfilter --------------------------------------------------- */

/* DER AUFKLAPPER IST EIN ZUSTANDSKNOPF, ALSO MUSS MAN SEINEN ZUSTAND SEHEN.

   Er traegt `.vmw-filterknopf` und sieht damit aus wie der Sheet-Oeffner
   auf dem Handy — das ist Absicht, es ist derselbe Handgriff. Offen bekommt
   er die Fuellung eines gewaehlten Chips: dieselbe Sprache, die die
   Schnellauswahl daneben schon spricht (`[aria-pressed="true"]`), und
   dieselbe, die der Nutzer zwei Zentimeter weiter links gerade gelernt hat.

   DER WINKEL KAM AM 20.09.2026 DAZU, und am 15.09. war er ausdruecklich
   abgelehnt worden -- mit dem Argument, die Klappgruppen darunter traegen
   bereits jede einen. Das Argument galt einer Zeile, in der er zwischen
   Chips und Sortierung stand. Seit die Sortierung eine Zeile tiefer steht,
   ist er das einzige Element am rechten Ende und hat keinen Nachbarn mehr,
   mit dem er sich verwechseln liesse. Entwurf V5 zeigt ihn dort.

   Der Knopf steht schmal auf `hidden` — das setzt `verfeinerungStand()`,
   nicht dieses Stylesheet: `.vmw-seite [hidden]` sticht mit `!important`
   jedes `display`, und ein zweiter Schalter fuer dieselbe Sache waere eine
   zweite Wahrheit. */
/* GETOENT, NICHT GEFUELLT (20.09.2026).

   Bis dahin bekam der offene Aufklapper die volle Beere-Fuellung -- dieselbe
   Sprache wie ein GEWAEHLTER Chip. Das war der Gedanke, und er war falsch:
   ein gewaehlter Chip sagt "dieser Filter ist gesetzt", der offene
   Aufklapper sagt nur "hier steht etwas offen". Nebeneinander sahen ein
   gesetzter Filter und ein aufgeklappter Bereich gleich aus.

   V5 (`.refine-toggle[aria-expanded="true"]`) toent stattdessen die Flaeche
   und faerbt Rand und Schrift. Das ist dieselbe Abstufung, die die Seite
   ueberall benutzt: Flaeche = Zustand, Kontur = Zugang. Und es passt zur
   Tafel darunter, die ebenfalls getoent und umrandet ist -- Knopf und
   Flaeche gehoeren sichtbar zusammen.

   NACHTRAG 24.09.2026 (Runde 16): Die Regel "Kontur = Zugang" gilt seitdem
   nicht mehr ausnahmslos. Auf Kundenwunsch tragen die gesetzten Filter
   (`.vmw-aktivchip`) und die gewaehlte Kaufzeile zur hellen Flaeche eine
   Bordeaux-Kante. Die Aktivchips sehen damit diesem offenen Knopf aehnlich;
   das war bekannt und ist so entschieden. Unterscheidbar bleiben sie am
   Kreuz und an der Schrift (hier Beere, dort Tinte). */
.vmw-seite .vmw-verfeinern[aria-expanded="true"] {
	border-color: var(--vmw-beere);
	background: var(--vmw-flaeche);
	color: var(--vmw-beere);
}

/* KEINE EIGENE AUSRICHTUNG FUER DEN AUFKLAPPER -- mit Absicht (22.09.2026).

   Bis zum 20.09.2026 standen drei Dinge in dieser Reihe -- Chips, dieser
   Knopf, die Sortierung --, und `space-between` setzte den Knopf dazwischen:
   er schwebte zwischen zwei Nachbarn, zu denen er nicht gehoert. Deshalb
   stand hier `margin-inline-start: auto`, das ihn rechts hielt.

   Seit die Sortierung eine Zeile tiefer steht, hat die Reihe genau ZWEI
   Kinder, und `space-between` an `.vmw-leiste__zeile` erledigt beides
   allein: teilen Chips und Knopf eine Zeile, steht er am rechten Ende;
   steht er allein in einer Zeile, wirkt `space-between` wie `flex-start`,
   und er steht links.

   Das `auto` machte genau den zweiten Fall falsch. Schmal beansprucht
   `.vmw-chips` mit `flex: 1 0 100%` die ganze Zeile, der Knopf faellt in
   eine eigene -- und `auto` schob ihn dort als EINZIGES Element der Seite
   nach rechts. Gemessen am 22.09.2026 bei 390px: Knopf ab 194,5px, jeder
   andere Seiteninhalt ab 20px. Der Kunde hat das gemeldet und aus vier
   gemessenen Fassungen die linksbuendige gewaehlt
   (`design/canvas-filterknopf/`, dort auch die drei anderen samt Messung).

   WARUM WEGLASSEN UND NICHT „SCHMAL 0, BREIT AUTO": ab 768px bleiben dem
   Knopf neben der laengsten heutigen Chipreihe (Alle + vier Weinarten) nur
   16px. Mehr Weinarten in `chip_weinarten` -- eine Einstellung, kein Code --
   druecken ihn dort in eine eigene Zeile, und ein `auto` im 768er-Block
   stellte ihn wieder allein nach rechts: derselbe Befund, eine Breite
   weiter. Ohne Regel steht er dann links. Beides ist gemessen, nicht
   angenommen.

   WER EIN DRITTES KIND IN DIESE REIHE SETZT, muss hier neu entscheiden --
   dann setzt `space-between` den Knopf wieder in die Mitte.

   Der Winkel dreht sich, wenn der Aufklapper offen ist -- 150ms auf 14px.
   Das ist die Bewegung, die `prefers-reduced-motion` hier abschalten
   koennte; sie bleibt, weil sie den Zustand mittraegt und nicht schmueckt. */
.vmw-seite .vmw-verfeinern .vmw-icon--winkel-unten {
	transition: transform var(--vmw-uebergang);
}

.vmw-seite .vmw-verfeinern[aria-expanded="true"] .vmw-icon--winkel-unten {
	transform: rotate(180deg);
}

/* DER FUSS DER TAFEL -- SCHMAL IST ER JETZT DER EINZIGE WEG ZURUECK.

   Bis zum 20.09.2026 stand hier `display: none`: schmal schloss der
   Fussknopf des Filter-Sheets, und ein zweiter Knopf mit demselben Wortlaut
   eine Zeile darueber waere eine Frage zuviel gewesen. Mit dem Sheet ist
   der andere Knopf weg -- bliebe diese Zeile stehen, koennte man die Tafel
   auf dem Handy nur noch ueber den Aufklapper oben schliessen, und der
   steht nach fuenf Filtergruppen weit ausserhalb des Bildschirms.

   Schmal steht der Knopf unter dem Hinweis und ueber die volle Breite
   (V5 `@media(max-width:760px) .refinement-finish`); breit nebeneinander.
   Die Spaltenform ist die Grundfassung, die Reihe die Ausnahme. */
.vmw-seite .vmw-verfeinerung__fuss {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
	margin-top: 19px;
}

.vmw-seite .vmw-verfeinerung__hinweis {
	margin: 0;
	font-size: 12px;
	color: var(--vmw-muted);
}

/* Auf dem Handy eine Reihe, die man schiebt. Ab 768 px umbrechen sie
   wieder, dort ist Platz. Ohne `min-width: 0` am Elternteil waere die Reihe
   nicht schmaler zu bekommen als ihr Inhalt und schoebe die Leiste auf.

   VOLLBLEED seit dem 10.09.2026. Die Design-Spez verlangt ihn fuer die
   Chip-Leiste seit jeher (`margin: 0 -20px; padding: 0 20px`, Abschnitt
   Raster) -- umgesetzt war er nie. Der Kommentar hier behauptete bis heute,
   der angeschnittene Chip sage, dass es weitergeht; gemessen begann die
   Reihe aber 20px INNERHALB der Seitenkante, der Schnitt lag also am Gutter
   und las sich als Layoutrand. Der Kunde hat genau das gemeldet: man KANN
   wischen, man sieht es nur nicht. Denselben Kniff traegt
   `.vmw-stimmen__liste` (Abschnitt 7); Ueberhang faengt `overflow-x: clip`
   an `.vmw-seite` ab (Abschnitt 2).

   `flex: 1 0 100%` gehoert dazu. Der negative Rand verkleinert die aeussere
   Hauptgroesse um 40px, und `.vmw-leiste__zeile` ist `flex-wrap: wrap` mit
   `space-between`: bei einem Winzer mit nur zwei oder drei Chips passte die
   Sortierung danach in dieselbe Zeile, die heute umbricht. Die eigene Zeile
   darf nicht von der Chipzahl abhaengen.

   `padding-block: 6px` (hier als erste Zahl im `padding`) behebt einen
   Fehler, der aelter ist als diese Runde: `overflow-x: auto` mit
   `overflow-y: visible` rechnet der Browser zu `overflow-y: auto` um, der
   Behaelter klippt also auch oben und unten. Der Fokusring sitzt 3px
   ausserhalb des Chips (Abschnitt 2) und wurde bei 40px Zeilenhoehe
   abgeschnitten -- wer mit der Tastatur filtert, sah ihn halb.

   `proximity` und nicht `mandatory`: die Chips sind unterschiedlich breit,
   `mandatory` risse jeden halben Schiebeweg auf den naechsten Chip und
   naehme damit genau die Andeutung weg, um die es geht. Ohne
   `scroll-snap-align` am Chip taete `scroll-snap-type` uebrigens gar nichts
   -- ohne Fehler, ohne Warnung. */
.vmw-seite .vmw-chips {
	display: flex;
	flex: 1 0 100%;
	flex-wrap: nowrap;
	gap: 10px;
	min-width: 0;
	margin: 0 calc(var(--vmw-gutter) * -1);
	padding: 6px var(--vmw-gutter);
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
	scroll-padding-inline: var(--vmw-gutter);
}

.vmw-seite .vmw-chips::-webkit-scrollbar {
	display: none;
}

/* DIE WEICHE KANTE sagt, dass es weitergeht -- und zwar nur an dem Ende, an
   dem tatsaechlich noch etwas liegt. Die beiden Zustandsklassen setzt
   `chipkante()` in winzer.js.

   Maske statt Pseudoelement: ein `::after` steckt IM Scrollbehaelter und
   wandert mit dem Inhalt aus dem Bild, die Maske haengt am Rahmenkasten und
   bleibt stehen.

   Keine Maske ohne Zustandsklasse: sie blendete beide Enden immer aus, und
   beim Scrollstand 0 waere der aktive, beerefarben gefuellte erste Chip
   links angefressen -- das liest sich als Renderfehler, nicht als Hinweis.
   Und kein `animation-timeline: scroll()`: das laeuft in WebKit nicht, also
   gerade dort nicht, wo diese Reihe ueberhaupt nur existiert, und der
   Reduced-Motion-Block am Dateiende froere es auf seinem Startwert ein. */
.vmw-seite .vmw-chips.is-ende {
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
	mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
}

.vmw-seite .vmw-chips.is-anfang {
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px);
	mask-image: linear-gradient(to right, transparent 0, #000 28px);
}

.vmw-seite .vmw-chips.is-anfang.is-ende {
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}

/* Solange die Tastatur in der Reihe steht, keine Maske. Sie gilt fuer den
   ganzen Malbaum des Elements, Fokusringe eingeschlossen, und ein halb
   ausgeblendeter Fokusring ist keiner. Vier Einheiten, damit sie die
   kombinierte Regel darueber schlaegt -- gleiche Zahl, spaetere Stelle. */
.vmw-seite .vmw-chips.is-anfang:focus-within,
.vmw-seite .vmw-chips.is-ende:focus-within {
	-webkit-mask-image: none;
	mask-image: none;
}

/* DIE PFEILE (07.10.2026, Kundenwunsch: "sonst versteht keiner, dass er
   wischen muss"). Ein runder weisser Knopf auf der weichen Kante, nur an dem
   Ende, an dem noch etwas liegt; Lage und Sichtbarkeit setzt `chipkante()`.
   Sie stehen neben der Reihe, nicht in ihr -- die Maske oben gaelte sonst
   auch fuer sie.

   GEGEN THEME UND KIT. Woodmart gibt jedem nackten `button` Mindesthoehe und
   Polster, das Elementor-Kit Flaeche, Rand und einen eigenen Zeigen-Zustand
   (`.elementor-kit-6 button:hover`, drei Einheiten). Deshalb stehen hier
   Hoehe, Polster, Rand und Flaeche ausdruecklich, und der Zeigen-Zustand hat
   eigene drei Einheiten, nach dem Grundzustand. */
.vmw-seite .vmw-chipspfeil {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	min-height: 0;
	padding: 0;
	border: 1px solid var(--vmw-linie-2);
	border-radius: 50%;
	background: #FFFFFF;
	color: var(--vmw-beere);
	box-shadow: 0 2px 8px rgba(42, 35, 38, .14);
	cursor: pointer;
}

.vmw-seite .vmw-chipspfeil:hover,
.vmw-seite .vmw-chipspfeil:focus {
	border-color: var(--vmw-beere);
	background: #FFFFFF;
	color: var(--vmw-beere);
}

.vmw-seite .vmw-chipspfeil[hidden] {
	display: none;
}

.vmw-seite .vmw-chipspfeil > .vmw-icon {
	flex: none;
}

/* STUFE S — DIE WERKZEUGLEISTE, EINE FORM FUER ALLE VIER.
   Chip, Geschmacks-Segment, Dropdown-Kopf und Filter-Knopf standen mit 36,2 /
   40,2 / 40,4 / 42,4px nebeneinander. Zwei davon setzten `line-height`, zwei
   nicht, und Woodmart schob allen ein `min-height: 42px` unter. Ueber das
   gemeinsame Token wurden sie gleich hoch — und liefen danach wieder
   auseinander: 18px statt 16px Polster am Chip, Beere statt Tinte am
   Filterknopf, und das Segment blieb 32px hoch in einer eigenen Pille.
   Am 08.09.2026 ist das dem Kunden aufgefallen.

   Deshalb steht die Form jetzt EINMAL hier. Die vier alten Klassen bleiben
   am Markup und tragen nur noch ihre Zustaende — an ihnen haengen fuenf
   Elementor-Regler (`widgets.php:143-151`). Sie umzubenennen haette alle
   fuenf auf einmal stumm geschaltet; deshalb kommt die Basisklasse DAZU,
   statt sie zu ersetzen. */
.vmw-seite .vmw-bedien {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: var(--vmw-knopf-s-hoehe);
	white-space: nowrap;
	font-family: inherit;
	font-size: var(--vmw-knopf-s-schrift);
	/* Konstant, nicht erst im aktiven Zustand: das Umschalten auf 600 machte
	   den Chip breiter und schob die ganze Reihe beim Klicken zur Seite.
	   Aktiv wird jetzt allein ueber Flaeche und Farbe gezeigt — 600 ist
	   ohnehin das Gewicht, das die Seite fuer Beschriftungen benutzt. */
	font-weight: 600;
	line-height: 1.3;
	padding: 0 16px;
	border: 1px solid var(--vmw-linie-2);
	border-radius: var(--vmw-radius-pille);
	background: transparent;
	color: var(--vmw-ink);
	cursor: pointer;
	/* Das <summary> der Klappgruppe traegt sonst ein Dreieck vor dem Text. */
	list-style: none;
	transition:
		background-color var(--vmw-uebergang),
		color var(--vmw-uebergang),
		border-color var(--vmw-uebergang);
}

/* DIE PILLEN DER TAFEL SIND WEISS (21.09.2026, Kundenwunsch).

   Grund oben ist `transparent` -- richtig fuer die Weinart-Reihe, die auf
   Weiss steht. In der Tafel (`--vmw-tafel`) standen Schnellauswahl und
   Geschmack damit auf dem getoenten Grund, waehrend die Klappkoepfe daneben
   weiss waren: zwei Sorten Bedienelement in einem Kasten, die sich nur in der
   Flaeche unterschieden. Entwurf V5 hat sie weiss (layout.css:24).

   DIESE REGEL STEHT MIT ABSICHT HIER, vor Zeigen und vor den gedrueckten
   Zustaenden weiter unten. Sie hat dieselbe Spezifitaet (0,3,0) wie
   `[aria-pressed="true"]` -- stuende sie danach, blieben gedrueckte Pillen
   weiss statt beere. Beim Zeigen aendert sich die Flaeche nicht, wie beim
   Klappkopf: "Zeigen-Zustand bei allen gleich" vergleicht genau das. */
.vmw-seite .vmw-filterband .vmw-bedien {
	background: #FFFFFF;
}

/* EIN ZEIGEN-ZUSTAND FUER ALLE VIER.
   Dauer und Kurve waren durch `.vmw-bedien` laengst gleich. Unterschiedlich
   war, WELCHE Eigenschaften der Zeigen-Zustand ueberhaupt anfasste: Chip und
   Klappkopf faerbten Rand und Schrift, das Segment nur die Schrift, und der
   Filterknopf legte eine Flaeche darunter, ohne die Schrift zu faerben. Am
   09.09.2026 hat der Kunde gemeldet, dass sich die Leiste uneinheitlich
   anfuehlt, und den Klappkopf als Vorlage benannt.

   Drei Einheiten -- vier waeren die Grenze (`trait-stil-regler.php:83-96`).

   ACHTUNG BEIM VERSCHIEBEN: alles, was diesen Zustand UEBERSTIMMEN muss,
   steht weiter unten in dieser Datei -- `[aria-pressed="true"]:hover` bei
   Chip und Segment, `[disabled]` am Segment und `--reset` am Filterknopf.
   Diese Regel darf nicht nach hinten wandern und keine der vier nach vorn.

   Setzt die Redaktion den Regler "Schnellauswahl-Chip -- Farbe", schlaegt er
   mit fuenf Einheiten auch diesen Zustand tot. Das ist kein Fehler, sondern
   der Preis der Regler -- mit vier Einheiten waere es nicht zu heilen. */
.vmw-seite .vmw-bedien:hover,
.vmw-seite .vmw-bedien:focus {
	border-color: var(--vmw-beere);
	color: var(--vmw-beere);
}

/* BEFUND VOM 20.09.2026 -- EINE URSACHE SEIT DEM 24.09.2026 BEKANNT.

   Die Review vom 24.09.2026 (A5) hat eine Ursache gefunden, die zu diesem
   Bild passt: `.vmw-bedien:focus` direkt oben. Nach einem Mausklick auf
   "Filter verfeinern" setzte das Skript den Fokus in die erste Pille der
   Tafel, und `:focus` malt dasselbe wie `:hover` -- also genau eine Pille
   mit Beere-Rand, die erste. Behoben in winzer.js: der Fokus wandert nur
   noch nach einer Tastatureingabe in die Tafel. Ob das auch die Bedingung
   "nur mit Theme-CSS" unten erklaert, ist nicht nachgemessen. Der Text
   bleibt als Protokoll der Suche stehen.

   (Hier stand bis zum 20.09.2026 eine Reparatur, und sie ist
   zurueckgenommen.)

   Gemessen, nur im Durchgang MIT Theme-CSS: der Chip "Vinomeet empfiehlt"
   traegt in der Tafel einen beerefarbenen Rand, obwohl er nicht gedrueckt
   ist. Sein Nachbar "bis 10 EUR" -- dieselbe Klasse, derselbe Behaelter,
   derselbe Zustand -- traegt den Linienrand. Ohne Theme-CSS sind beide
   gleich.

   WAS AUSGESCHLOSSEN IST, gemessen und nicht vermutet: Zeigen, Fokus,
   Fokus-innerhalb, aktiv, `aria-pressed`, die Ersatzklassen `.vmw-zeig` und
   `.vmw-fokus` des Pruefstands, ein Elementor-Regler (im Dokument ist
   keiner gesetzt), veraltetes CSS auf der Box (Pruefsumme stimmt mit dem
   Repository ueberein), und eine Beere-Regel im Theme-CSS des Dokuments
   (nur drei Stellen, alle woanders).

   WAS DAGEGEN SPRICHT, DASS ES VON AUSSEN KOMMT: verschiebt man eine
   eigene Regel mit denselben drei Einheiten hinter `.vmw-bedien:hover`,
   gewinnt sie -- der Gegner sitzt also in DIESER Datei. Davor verliert sie.
   Welche Regel es ist, ist damit noch nicht gefunden.

   WARUM TROTZDEM NICHTS EINGEBAUT WURDE: die Reparatur, die den Rand richtig
   machte, nahm dem Chip gleichzeitig die Reaktion auf die Maus -- der
   Pruefling hat das im selben Lauf gemeldet. Eine Zeile, die ein sichtbares
   Problem gegen ein anderes tauscht, ist keine Reparatur. Die Zusicherung
   "Tafel-Pillen einheitlich: rand" bleibt deshalb ROT stehen, bis die
   Ursache gefunden ist. Eine rote Zeile, die etwas Wahres sagt, ist mehr
   wert als eine gruene, die es verdeckt. */

/* Ohne diese Zeile ist `scroll-snap-type` an der Reihe wirkungslos. */
.vmw-seite .vmw-schnellchip {
	scroll-snap-align: start;
}


.vmw-seite .vmw-schnellchip[aria-pressed="true"] {
	background: var(--vmw-beere);
	border-color: var(--vmw-beere);
	color: #FFFFFF;
}

.vmw-seite .vmw-schnellchip[aria-pressed="true"]:hover,
.vmw-seite .vmw-schnellchip[aria-pressed="true"]:focus {
	background: var(--vmw-beere-dunkel);
	border-color: var(--vmw-beere-dunkel);
	color: #FFFFFF;
}

.vmw-seite .vmw-sortierung {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--vmw-muted);
}

/* SCHMAL STEHT NUR DER WERT, NICHT DIE FRAGE (V5, `base.css:2027`).

   "Sortieren:" und "Vinomeet empfiehlt" nebeneinander brauchen bei 390px
   mehr Platz, als neben der Trefferzahl uebrig ist -- die Zeile bricht, und
   dann steht eine Beschriftung allein ueber ihrem Feld. Das Feld sagt
   ohnehin, was es tut.

   `display: none` und nicht `hidden`: fuer ein Vorleseprogramm bleibt die
   Beschriftung ueber `<label for>` an ihrem Feld, und das ist der Grund,
   warum sie hier verschwinden DARF. Ein `aria-label` waere ein zweiter Text
   fuer dieselbe Sache. */
.vmw-seite .vmw-sortierung label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.vmw-seite .vmw-sortierung select {
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--vmw-ink);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--vmw-linie-2);
	border-radius: 0;
	padding: 3px 18px 3px 0;
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--vmw-muted) 50%), linear-gradient(135deg, var(--vmw-muted) 50%, transparent 50%);
	background-position: right 6px center, right 1px center;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	cursor: pointer;
	transition: border-color var(--vmw-uebergang), color var(--vmw-uebergang);
}

/* Bleibt bewusst eine unterstrichene Auswahl und wird keine Pille: die
   Sortierung ist kein Filter, sie steht rechts als Beschriftung mit Wert.
   Sie soll aber auf den Mauszeiger antworten wie alles andere. */
.vmw-seite .vmw-sortierung select:hover {
	border-bottom-color: var(--vmw-beere);
	color: var(--vmw-beere);
}

/* --- Filterbaender (Rubrik links, Pillen daneben) -------------------- */

/* EINE FORM FUER ZWEI BAENDER. Im Aufklapper stehen seit dem 20.09.2026
   zwei strukturgleiche Zeilen untereinander: "Schnellauswahl" mit zwei
   Abkuerzungen und "Geschmack" mit den vier Stufen. Entwurf V5 hat dafuer
   `preference-picks` und `taste-picks` -- zwei Namen, eine Gestalt.

   Hier ist es ein Name. Bis zum 20.09.2026 hiess das Ganze `.vmw-segmente`
   und es gab nur das Geschmacksband; ein zweites mit eigenem Namen und
   denselben vier Zeilen waere genau die Verdopplung, an der solche
   Stylesheets auseinanderlaufen. Die Pillen darin behalten ihre eigenen
   Klassen (`.vmw-segment`, `.vmw-schnellchip`) -- sie verhalten sich
   verschieden, das Band nicht.

   `min-width` an der Rubrik ist V5 (`.filter-label`, 104px): die beiden
   Rubriken stehen dadurch untereinander in einer Flucht, und die Pillen
   fangen auf derselben Senkrechten an. Ohne sie richtete sich jede Zeile
   nach der Laenge ihres eigenen Wortes. */
.vmw-seite .vmw-filterband {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.vmw-seite .vmw-filterband__label {
	min-width: 104px;
	font-size: 14px;
	color: var(--vmw-muted);
}

/* Keine gemeinsame Pille mehr: die vier Segmente sind eigenstaendige
   Pillen wie die Chips, damit die Leiste eine Form traegt. Der Container
   haelt sie nur noch zusammen und behaelt seine Rolle als Traeger der
   Gruppenbeschriftung (`aria-labelledby`).

   `flex-wrap` bleibt: bei vier Segmenten rutscht das letzte auf schmalen
   Geraeten sonst aus der Leiste — und `.vmw-seite` schneidet Ueberhang ab
   (`overflow-x: clip`, Abschnitt 2), statt ihn scrollbar zu machen. Es waere
   also nicht nur abgeschnitten, sondern unerreichbar. */
.vmw-seite .vmw-filterband__gruppe {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Die Reihenfolge macht hier die Arbeit, nicht `:not()`. „Aktiv“ und
   „gesperrt“ stehen unter dem gemeinsamen Zeigen-Zustand — der sitzt seit
   dem 09.09.2026 rund hundert Zeilen hoeher an `.vmw-bedien:hover` — und
   gewinnen bei gleicher Spezifitaet, weil sie spaeter stehen. Mit
   `:not([disabled])` waere der Selektor eine Einheit breiter geworden und
   haette damit die Elementor-Stilregler geschlagen. */
.vmw-seite .vmw-segment[aria-pressed="true"] {
	background: var(--vmw-beere);
	/* Seit dem 08.09.2026 traegt das Segment einen eigenen Rand -- ohne diese
	   Zeile blieb ein blasser Ring um die beerefarbene Fuellung stehen. */
	border-color: var(--vmw-beere);
	color: #FFFFFF;
}

.vmw-seite .vmw-segment[aria-pressed="true"]:hover,
.vmw-seite .vmw-segment[aria-pressed="true"]:focus {
	background: var(--vmw-beere-dunkel);
	border-color: var(--vmw-beere-dunkel);
	/* Ausdruecklich, obwohl schon die Regel darueber Weiss setzt: sonst
	   haenge die Schriftfarbe allein daran, dass diese vier Einheiten
	   spaeter stehen als die drei von `.vmw-bedien:hover`. */
	color: #FFFFFF;
}

/* Die Trefferzahl im Geschmacks-Segment -- Entwurf V5 (`.choice-count`).

   SIE ERBT IHRE FARBE, sie setzt keine. Das Segment hat vier Zustaende
   (ruhend, gezeigt, gewaehlt, gesperrt), und in jedem einzelnen soll die
   Zahl zum Wort gehoeren. Eine eigene Farbe muesste alle vier nachbauen --
   und bliebe beim fuenften stehen. `opacity` nimmt sie in jedem Zustand um
   dasselbe zurueck.

   `font-weight: 400` gegen die 600 von `.vmw-bedien`: die Zahl ist die
   Nebenangabe, das Wort ist die Wahl. `min-width` haelt einstellige und
   zweistellige Zahlen auf derselben Breite, damit die Reihe beim Filtern
   nicht zuckt. */
.vmw-seite .vmw-segment__zahl {
	min-width: 14px;
	font-size: 11px;
	font-weight: 400;
	text-align: center;
	opacity: 0.75;
}

.vmw-seite .vmw-segment[disabled] {
	color: var(--vmw-gesperrt);
	/* Ohne diese Zeile gaebe `.vmw-bedien:hover` auch dem gesperrten Segment
	   einen Beere-Rand — die Regel dort setzt Rand UND Schrift, diese hier
	   nahm bisher nur die Schrift zurueck. Gleichstand mit drei Einheiten,
	   es entscheidet, dass diese Zeilen spaeter stehen. */
	border-color: var(--vmw-linie-2);
	cursor: default;
	background: transparent;
}

/* DAS FELD IST JETZT DIE GRUNDFASSUNG (20.09.2026).

   Bis dahin stand hier das Gegenteil: eine Akkordeon-ZEILE ueber die volle
   Breite, und erst ab 768px wurde daraus eine Dropdown-Pille. Grund war das
   Filter-Sheet -- schmal zogen die Gruppen in ein <dialog>, und dort haette
   ein schwebendes Panel an dessen `overflow: hidden` geendet. Der Kunde hatte
   am 11.09.2026 gestapelte, ungleich breite Kapseln gemeldet (gemessen bei
   504px: 107, 98, 99, 81 und 101px in einem 468px breiten Sheet), und die
   Zeilenform war die Antwort darauf.

   MIT DEM SHEET IST BEIDES WEG -- der Behaelter, der abschnitt, UND der
   Grund fuer zwei Formen. Entwurf V5 hat nur eine: ein Feld mit 8px Radius
   in einem Raster gleicher Spalten, an jeder Breite. Das loest die alte
   Meldung sogar besser, als die Zeilenform es tat: `minmax(0, 1fr)` macht
   die Koepfe rechnerisch gleich breit, statt sie nur alle gleich breit
   aussehen zu lassen.

   ZWEI SPALTEN HIER, drei ab 768px, fuenf ab 1025px -- die Staffelung aus
   V5, auf die zwei Haltepunkte dieser Datei gelegt. Jede der beiden
   spaeteren Regeln aendert NUR `grid-template-columns`; alles andere steht
   einmal hier. Das ist der Unterschied zu vorher, wo der 768er-Block acht
   Zeilen zurueckzunehmen hatte und beim Vergessen einer davon nur die
   Zeilenhoehe danebenlag.

   Ohne Skript steht die Tafel offen: das Raster ist dann das, was man
   sieht, und es traegt sich auch ungeklappt. */
.vmw-seite .vmw-gruppen {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 9px;
	margin-top: 20px;
}

.vmw-seite .vmw-gruppe {
	position: relative;
	/* Sonst waere die Mindestbreite der Spalte der Inhalt des Kopfes, und
	   ein langer Gruppenname schoebe seine Spalte breiter als die anderen. */
	min-width: 0;

	/* Das Zeichen laeuft ueber eine eigene Eigenschaft statt ueber einen
	   zweiten [open]-Selektor am <summary>: gesetzt auf einem Dreier,
	   gelesen von einem Zweier. So bleibt das Einheitenbudget frei. */
	--vmw-klapp: "\25BE";
}

/* Offen sieht man dem Kopf sonst nicht an — nur das Panel darunter
   erschiene. Ein Umschalter, der offen aussieht wie geschlossen, laesst
   den Nutzer zweimal klicken. */
.vmw-seite .vmw-gruppe[open] > .vmw-gruppe__kopf {
	border-color: var(--vmw-beere);
	background: var(--vmw-flaeche);
	color: var(--vmw-beere);
}

.vmw-seite .vmw-gruppe__kopf::-webkit-details-marker {
	display: none;
}

/* Nimmt `.vmw-bedien` dort zurueck, wo das Feld etwas anderes ist als eine
   Pille: `display: flex` statt `inline-flex` (ein inline-flex-Kind waechst
   nicht mit seiner Rasterspalte -- genau daran lagen die ungleich breiten
   Kapseln), 46px statt 40px Hoehe, 8px statt Pillenradius.

   `overflow: hidden` mit `text-overflow: ellipsis`: die Spalte ist bei 390px
   rund 160px breit, und "Passt zu" passt, aber ein kuenftiger laengerer
   Gruppenname muss abschneiden statt auszubrechen. */
.vmw-seite .vmw-gruppe__kopf {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	min-height: 46px;
	padding: 11px 14px;
	border: 1px solid var(--vmw-linie-2);
	border-radius: 8px;
	background: #FFFFFF;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: var(--vmw-knopf-s-schrift);
	line-height: 1.3;
}

.vmw-seite .vmw-gruppe__kopf::after {
	content: var(--vmw-klapp);
	margin-left: auto;
	flex: 0 0 auto;
	font-size: 10px;
	line-height: 1;
	color: var(--vmw-muted);
	transition: transform var(--vmw-uebergang), color var(--vmw-uebergang);
}

.vmw-seite .vmw-gruppe[open] > .vmw-gruppe__kopf::after {
	transform: rotate(180deg);
	color: var(--vmw-beere);
}

/* Der Pfeil traegt seinen Uebergang auf `color` seit jeher, benutzt hat ihn
   nur `[open]`. Beim Zeigen wurde die Beschriftung beere und der Pfeil blieb
   grau — das Bedienelement antwortete halb. Drei Einheiten: ein
   Pseudoelement zaehlt nicht mit (`pruefe-bausteine.php:16`). */
.vmw-seite .vmw-gruppe__kopf:hover::after,
.vmw-seite .vmw-gruppe__kopf:focus::after {
	color: var(--vmw-beere);
}

/* DAS SCHWEBENDE PANEL, an jeder Breite (20.09.2026).

   Bis dahin lag diese Liste schmal im Fluss und wurde erst ab 768px ein
   Dropdown -- weil sie schmal im Filter-Sheet stand und `overflow: hidden`
   dort ein schwebendes Panel abgeschnitten haette. Mit dem Sheet ist dieser
   Grund entfallen.

   `max-width: calc(100vw - 40px)` ist die Zahl aus V5 (`.facet-panel`): das
   Panel ist 290px breit, die Rasterspalte bei 390px aber nur rund 160px --
   es ragt also absichtlich ueber seine Spalte hinaus und darf dabei die
   Seite nicht sprengen. `.vmw-seite` schneidet Ueberhang waagerecht ab
   (`overflow-x: clip`, Abschnitt 2); was dort herausragte, waere nicht
   scrollbar, sondern unerreichbar.

   Die letzten beiden Spalten oeffnen nach LINKS. Ohne das stuende das Panel
   der rechten Spalte halb ausserhalb -- und genau dort landet bei zwei
   Spalten jede zweite Gruppe. */
.vmw-seite .vmw-gruppe__inhalt {
	position: absolute;
	z-index: 3;
	top: calc(100% + 8px);
	left: 0;
	min-width: 0;
	width: 290px;
	max-width: calc(100vw - 40px);
	padding: 10px;
	border: 1px solid var(--vmw-linie-2);
	border-radius: 9px;
	background: #FFFFFF;
	box-shadow: 0 12px 35px rgba(63, 35, 51, 0.13);
}

.vmw-seite .vmw-gruppe:nth-child(even) > .vmw-gruppe__inhalt {
	left: auto;
	right: 0;
}

/* Schmal ein Fingerziel. Gemessen waren die Zeilen 36px hoch und standen
   ohne Abstand untereinander -- fuenf bis zwoelf davon auf einem Telefon,
   und ein Fehlgriff kostet einen ganzen Facettendurchlauf. Ab 768px
   zeigt eine Maus darauf, dort reichen 6px. */
.vmw-seite .vmw-option {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 12px 0;
	font-size: 14px;
	color: var(--vmw-soft);
	cursor: pointer;
	transition: color var(--vmw-uebergang);
}

.vmw-seite .vmw-option:hover {
	color: var(--vmw-beere);
}

/* Null Treffer werden ausgegraut, nicht versteckt — sonst springt die
   Liste bei jedem Klick. Die Regel steht bewusst NACH dem Zeigen-Zustand:
   gleiche Spezifitaet, spaeter im File — ein leerer Eintrag bleibt damit
   auch unter dem Mauszeiger grau. */
.vmw-seite .vmw-option.is-leer {
	color: var(--vmw-gesperrt);
	cursor: default;
}

.vmw-seite .vmw-option__haken {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	accent-color: var(--vmw-beere);
}

.vmw-seite .vmw-option__zahl {
	margin-left: auto;
	font-size: 13px;
	color: var(--vmw-muted);
}

.vmw-seite .vmw-option.is-leer .vmw-option__zahl {
	color: var(--vmw-gesperrt);
}

/* Das Abzeichen zaehlt GESETZTE FILTER, nicht Treffer -- die Trefferzahl
   steht im Fussknopf des Sheets. */
.vmw-seite .vmw-filterknopf__zahl {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: var(--vmw-radius-pille);
	background: var(--vmw-beere);
	color: #FFFFFF;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
}

/* Steht neben den Klappgruppen und traegt deshalb keinen Rahmen: er ist
   eine Handlung, keine weitere Gruppe. Randlos im Ruhezustand (zwei
   Einheiten), Rand beim Zeigen aus `.vmw-bedien:hover` (drei) — seit dem
   09.09.2026 entscheidet das die Spezifitaet und nicht mehr die
   Reihenfolge. */
/* Hoehe, Rand, Radius und Schrift bleiben, wie `.vmw-bedien` sie setzt --
   genau die vier misst `pruefling.js` (`formen()`), und die Werkzeugleiste
   soll EINE Form tragen. Unterschieden wird ueber das, was dort nicht
   gemessen wird: das Schieberegler-Zeichen und ein engeres Polster. Der
   Reset traegt dieselbe Klasse und bekommt das engere Polster mit; er steht
   daneben, und zwei Werte waeren dort ein Bruch. */
.vmw-seite .vmw-filterknopf {
	gap: 7px;
	padding: 0 14px;
}

/* Das Zeichen traegt die Markenfarbe, die Beschriftung bleibt Tinte. Beides
   beere waere lauter als der aktive Chip -- und der ist der Zustand, nicht
   der Zugang. */
.vmw-seite .vmw-filterknopf .vmw-icon {
	color: var(--vmw-beere);
}

.vmw-seite .vmw-filterknopf--reset {
	border-color: transparent;
	color: var(--vmw-beere);
}

.vmw-seite .vmw-filterknopf--reset:hover,
.vmw-seite .vmw-filterknopf--reset:focus {
	border-color: var(--vmw-beere);
	color: var(--vmw-beere-dunkel);
}

/* --- Wo das Filter-Sheet stand ------------------------------------ */

/* HIER LAGEN RUND 130 ZEILEN FUER EIN <dialog>: Griff, Kopf, Kreuz,
   Inhaltsbereich, Fuss, Rueckseite und eine Scroll-Sperre am Rumpf.

   Sie sind am 20.09.2026 entfallen. Der Kunde hat die V5-Fassung des
   Filters auch fuer das Handy gewaehlt: dort steht dieselbe Tafel im
   Fluss wie breit, nur mit zwei Rasterspalten statt fuenf. Es gibt keinen
   zweiten Ort mehr, an dem Filter wohnen.

   MIT DEM SHEET GING AUCH DER GRUND FUER ZWEI AUSNAHMEN WEITER OBEN:
   die Klappgruppen standen schmal als Akkordeon-Zeilen im Fluss, weil
   `overflow: hidden` am Sheet ein schwebendes Panel abgeschnitten haette.
   Ohne Sheet schwebt es wieder, an jeder Breite. Und `.vmw-leiste__handy`
   -- der Knopf, der das Sheet aufschlug -- gibt es nicht mehr. */

/* --- Die Kachel im Shop-Loop --------------------------------------- */

/* Eine Huelle um eine einzelne Kachel, gesetzt von
   `templates/loop/kachel-global.php`. `.vmw-seite` bringt die Token mit;
   drei Regeln der Grundfassung passen an dieser Stelle aber nicht. */
.vmw-seite.vmw-loop {
	position: relative;
	/* DER FOKUSRING, ZUM ZWEITEN MAL.
	   `body.vmw-winzer` traegt diese vier Stellschrauben (siehe dort),
	   aber `body_klassen()` steigt ausserhalb der Winzerseite sofort aus.
	   Im Shop-Loop lief die Regel deshalb leer, und Woodmarts
	   `:focus-visible` mit `!important` und (0,2,1) gewann wieder -- ab
	   1025px schwarze Punkte bei -1px an jedem Link und Knopf der Kachel,
	   schmal dagegen unser Ring, weil die Theme-Regel in
	   `@media (min-width: 1025px)` liegt. Derselbe Befund wie am
	   11.09.2026, nur an einem Ort, den damals niemand gemessen hat.

	   Bewusst hier an der Huelle und nicht am `body`: benutzerdefinierte
	   Eigenschaften vererben, das genuegt -- und so aendert sich im Shop
	   nichts ausserhalb unserer Kachel. */
	--wd-otl-style: solid;
	--wd-otl-width: 2px;
	--wd-otl-offset: 3px;
	--wd-otl-color: var(--e-global-color-primary, #8E2C5D);
	/* Der farbige Kartengrund kommt im Shop von Woodmart
	   (`.wd-product-card-bg`). Ein weisser Grund von uns wuerde ihn
	   zudecken -- und genau dieser Kontrast hat dem Kunden gefallen. */
	background: transparent;
	/* `overflow-x: clip` schuetzt auf der Winzerseite das Seitenlayout. Hier
	   waere es ein Kaefig: die Zeigen-Effekte des Themes ragen ueber die
	   Karte hinaus. */
	overflow: visible;
	height: 100%;
}

/* Im Shop tragen die Karten keinen Trennstrich: dort steht jede fuer sich
   auf einem eigenen Grund, waehrend sie auf der Winzerseite in einer Liste
   untereinander haengen. */
.vmw-seite.vmw-loop .vmw-kachel {
	height: 100%;
	padding-bottom: 0;
	border-bottom: 0;
}

/* HIER STAND BIS ZUM 22.09.2026 EINE EIGENE BILDREGEL FUER DEN SHOP:
   `aspect-ratio: 4 / 5` mit `max-height: 270px` statt der festen Hoehe.

   Ihre Begruendung war, dass Woodmart die Spalten macht und die "schmaler
   sind: mobil zweispaltig rund 165px" -- eine feste Hoehe von 260px haette
   dort ein Hochformat 165 x 260 ergeben. Und die Uebertragungsfalle aus
   Abschnitt 6 schlage in einer 165px-Spalte nicht zu, weil der
   uebertragene Breitendeckel (216px) groesser sei als die Spalte.

   Beides gilt seit dem 22.09.2026 nicht mehr. `shop_breit_greift()` in
   `kachel-global.php` stellt das Archiv auf eine Spalte (390px: 345px
   breit) und auf drei volle Spalten (1440px: 443px). Damit war die Regel
   erstens ueberfluessig, zweitens machte sie den Shop ungleich zur
   Winzerseite (mobil 270px statt 260), und drittens lag die Spalte jetzt
   UEBER dem Breitendeckel -- die Falle waere scharf gewesen. Seitdem gilt
   im Shop dieselbe Grundregel wie auf der Winzerseite, bewusst ohne
   `aspect-ratio`.

   Wer die Regel zurueckholen will, weil die Spalten wieder schmal werden:
   erst `shop_breit_greift()` pruefen, dann auf einem echten iPhone messen.
   Playwright-WebKit zeigte die Falle am 22.09.2026 nicht, Safari auf dem
   iPhone am 10.09.2026 schon. */

/* Wunschliste und Quick View liegen ueber dem Bild, wie im Theme. */
.vmw-seite .vmw-loop__aktionen {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Ein Raster mit genau einer Kachel: die Spalten macht im Shop Woodmart.

   DIE SPEZIFITAET (0,3,0) IST ABSICHT. Bis zum 22.09.2026 stand hier
   `.vmw-seite .vmw-raster--einzeln` -- (0,2,0), also dieselbe Staerke wie
   die Grundregel sechs Zeilen darunter, und die steht SPAETER. Die Ausnahme
   hat deshalb nie gegolten: jede Shop-Kachel stand in einem Dreispalten-
   Raster mit genau einem Kind und bekam ein Drittel der Woodmart-Spalte --
   bei 1440px rund 73px. Daher das Briefmarkenbild, der vierzeilige Name und
   der abgeschnittene Kaufknopf.

   Aufgefallen ist es erst am 21.09.2026, als der Schalter zum ersten Mal
   ueberhaupt wirkte: davor las `global_zahl()` Ja/Nein-Felder falsch
   (behoben in 3.2.0). Die Regel war geschrieben, aber nie ausgefuehrt.

   Die hoehere Spezifitaet schlaegt die Grundregel UND beide Fassungen in den
   Media-Bloecken (768 und 1025) -- Media-Abfragen erhoehen die Spezifitaet
   nicht. `display: block` macht `grid-template-columns` gegenstandslos,
   deshalb genuegt diese eine Regel fuer alle drei Breiten.

   Gehaengt an `.vmw-loop` statt an einen Modifikator am `<ul>`: die Huelle
   setzt `templates/loop/kachel-global.php` an EINER Stelle, und sie gilt
   fuer jeden Einzelkachel-Ort (Kategorie, Suche, Karussell auf Start- und
   Produktseiten). Ein Modifikator, den jemand am `<ul>` vergisst, waere
   genau derselbe stumme Fehler noch einmal. */
.vmw-seite.vmw-loop .vmw-raster {
	display: block;
	/* DIE HOEHENKETTE DARF HIER NICHT REISSEN.
	   Woodmarts Rasterzelle streckt `.vmw-seite.vmw-loop` auf die Hoehe der
	   Reihe (`height: 100%` weiter oben). Die Kachel holt sich daraus ihre
	   eigene Hoehe -- aber nur, wenn das `<ul>` dazwischen sie weitergibt.
	   Als Block mit automatischer Hoehe tut es das nicht: `height: 100%` an
	   der Kachel bezieht sich dann auf einen Behaelter, der selbst nur so
	   hoch ist wie sein Inhalt, und `margin-top: auto` am Preis hat keinen
	   Verteilraum mehr. Sichtbar war das am 22.09.2026 als Reihe mit drei
	   verschieden hoch endenden Kaufboxen -- derselbe Befund, den der Kunde
	   am 04.09.2026 gemeldet hat ("hier einen Zweizeiler, die anderen haben
	   drei Zeilen"), nur an einem anderen Ort. */
	height: 100%;
}

/* --- Die Kachel im Karussell --------------------------------------- */

/* Karussells zeigen unsere Kachel mit derselben Treppe wie das Archiv und
   die Winzerseite: eine Karte bis 768px, zwei bis 1024px, drei ab 1025px.

   DER BEFUND VOM 22.09.2026
   Startseite (drei Tab-Widgets), Aehnliche Produkte und Upsells zeigten bei
   390px zwei Kacheln zu 178px nebeneinander, bei 900px vier zu 219px. Die
   Kachel ist fuer 371-430px entworfen; der Mengenwaehler stand ueber den
   Kachelrand hinaus. Das Archiv hatte denselben Fehler, bis
   `shop_breit_greift()` dort die Spalten umstellte -- Karussells erreicht
   diese Weiche nicht, sie sind keine Archivabfrage.

   WARUM HIER `!important` STEHT -- UND AM MENGENWAEHLER NICHT
   Woodmart schreibt die Kartenzahl als Inline-Stil an `.wd-carousel`
   (`--wd-col-lg/md/sm`, aus `slides_per_view` bzw.
   `related_product_columns`), und `swiperInit.js` liest sie beim Start
   EINMAL ueber `getComputedStyle`. Gegen einen Inline-Stil gewinnt eine
   Regel aus einem Stylesheet nur mit `!important`; Spezifitaet und
   Ladereihenfolge zaehlen dort nicht. Beim Mengenwaehler
   (`kachel_global_assets()` in `kachel-global.php`) stritten zwei
   Stylesheet-Regeln gleicher Spezifitaet, da war die Reihenfolge der
   richtige Hebel und `!important` der falsche.

   WARUM OHNE MEDIA-ABFRAGE
   Swiper nimmt beim Start alle drei Werte mit und wechselt dann selbst an
   seinen Grenzen (0 / 768,98 / 1025, `woodmart_settings.carousel_breakpoints`).
   Eine Fassung nur bis 576px haette beim Drehen des Geraets den alten Wert
   behalten, weil niemand ihn neu liest.

   DREI AUCH UEBER 1280 (25.09.2026)
   Bis dahin galt die Zahl aus dem Theme ab 1280px -- vier Karten, 323 bis
   328px breit bei 1440. Die Kachel ist fuer 371-430px entworfen; bei vier
   brachen Name, "Passt zu" und Paketweine oefter um, und die Kacheln
   wurden lang. Gewuenscht waren drei: bei 1440 gemessen 437 bis 443px,
   so breit wie im Archiv (443px). Mit der 1280er-Grenze entfiel auch ihr
   Vorbehalt -- wer das Fenster ueber sie hinweg zog, behielt die Zahl vom
   Start bis zum Neuladen.

   WO ES GREIFT
   Nur in Karussells, in denen mindestens eine Vinomeet-Kachel steht. Ein
   gemischtes (Weinpakete neben Weinen) zeigt dann auch die Paketkarten
   einzeln; sonst bliebe der Fehler in zwei der drei Startseiten-Widgets.
   Reine Woodmart-Karussells (Blog, Marken, Galerie, und seit 3.3.1 auch
   "Frequently bought together", siehe `kachel_im_fbt()`) bleiben, wie sie
   sind. Mit `kachel_global` aus gibt es kein `.vmw-loop` -- und diese Datei
   laedt ausserhalb der Winzerseite gar nicht.

   `:has()` fehlt in Safari vor 15.4 und Firefox vor 121. Dort bleibt es
   beim Stand vor 3.3.1, schlechter wird nichts. */
.wd-carousel:has(> .wd-carousel-wrap > .wd-carousel-item > .wd-product > .vmw-loop) {
	--wd-col-sm: 1 !important;
	--wd-col-md: 2 !important;
	--wd-col-lg: 3 !important;
}

/* --- Raster und Kachel --------------------------------------------- */

/* `minmax(0, 1fr)` und nicht `1fr`: das automatische Minimum einer Spur ist
   min-content. Ohne den Boden kann die Spur nicht schmaler werden als das
   breiteste unteilbare Stueck der Kachel -- und laeuft dann aus dem
   Behaelter heraus statt umzubrechen. Die beiden Fassungen in den
   Media-Bloecken (768 und 1025) tragen den Boden laengst; hier fehlte er,
   und genau diese Regel gilt unter 768px. */
.vmw-seite .vmw-raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: 40px;
	row-gap: 34px;
}

/* Die Kachel ist keine Box: nur eine Spalte mit Fusslinie. */
.vmw-seite .vmw-kachel {
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding-bottom: 26px;
	border-bottom: 1px solid var(--vmw-linie);
}

/* Breite von der Kachel, Hoehe aus der Spez (Abschnitt 4: 260px schmal,
   270px im Desktop-Raster).

   Bis zum 10.09.2026 stand hier `aspect-ratio: 3 / 4` mit
   `max-height: 270px`. Das ist eine Falle, die je nach Engine zuschlaegt
   oder nicht. Chrome streckt die Flaeche als Flex-Sohn auf die volle
   Kachelbreite und verletzt dabei das Verhaeltnis -- an der ausgelieferten
   Seite gemessen: 448 von 448px schmal, 370,7 von 370,7px breit, also
   hundert Prozent. WebKit uebertraegt den Hoehendeckel ueber das
   Verhaeltnis in einen BREITENDECKEL: 270 x 3/4 = 202px in einer 362px
   breiten Spalte, 56 Prozent. Genau das hat der Kunde am 10.09.2026 auf
   seinem iPhone gesehen und gemeldet, waehrend hier alles gruen war.

   `width: 100%` und eine feste `height` nehmen die Zweideutigkeit heraus:
   ohne `aspect-ratio` gibt es nichts mehr zu uebertragen. `height` und
   nicht `min-height`, weil `.vmw-kachel__bild a` und `.vmw-kachel__img`
   beide mit `height: 100%` rechnen -- ein Prozentwert braucht eine
   BESTIMMTE Hoehe am Elternteil. Bisher hat das Verhaeltnis sie bestimmt
   gemacht.

   Die Artboards kennen dieses Verhaeltnis ohnehin nicht: dort steht
   schlicht `height: 260px` bzw. `270px` bei voller Spaltenbreite. */
.vmw-seite .vmw-kachel__bild {
	position: relative;
	width: 100%;
	height: 260px;
	background: linear-gradient(180deg, #FAF7F4 0%, #F1EAE6 100%);
	border-radius: var(--vmw-radius-klein);
	overflow: hidden;
}

.vmw-seite .vmw-kachel__bild a {
	display: block;
	width: 100%;
	height: 100%;
}

.vmw-seite .vmw-kachel__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.vmw-seite .vmw-kachel__bild.is-aus .vmw-kachel__img {
	filter: grayscale(0.55);
	opacity: 0.75;
}

/* Buendig zur linken Bildkante, ohne Radius — so steht es im Entwurf.

   DREI QUELLEN FUER EINE FARBE, IN DIESER REIHENFOLGE (22.09.2026):

   1. `--vmw-badge-ton` -- am Produkt gepflegt, kommt als `style` am
      Etikett selbst an (`badge_farbe()` haelt es gegen ein Hexmuster).
   2. `--vmw-badge-<typ>` -- der Ton des Typs. Dieses Token setzt auch der
      Elementor-Regler „Fläche"; er faerbt damit die Vorgabe und nicht die
      Flaeche, sonst schluege er die Produktfarbe.
   3. Der Wert des Tokens aus Abschnitt 1 dieser Datei.

   Dasselbe fuer die Schrift: `--vmw-badge-schrift` steht nur dann im
   `style`, wenn eine eigene Flaechenfarbe gepflegt ist -- dann hat
   `badge_schriftfarbe()` die lesbarere der beiden Schriftfarben
   ausgerechnet. Ohne eigene Farbe bleibt es bei Weiss bzw. bei dem, was
   der Elementor-Regler „Schrift" setzt. */
.vmw-seite .vmw-badge {
	position: absolute;
	left: 0;
	top: 16px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	padding: 6px 14px;
	background: var(--vmw-badge-ton, var(--vmw-badge-empfehlung));
	color: var(--vmw-badge-schrift, #FFFFFF);
}

.vmw-seite .vmw-badge--empfehlung {
	background: var(--vmw-badge-ton, var(--vmw-badge-empfehlung));
}

.vmw-seite .vmw-badge--angebot {
	background: var(--vmw-badge-ton, var(--vmw-badge-angebot));
}

/* Das frei betextete Etikett. Ohne gepflegte Farbe traegt es den Ton der
   Empfehlung -- ein neuer Typ ohne eigene Zeile erschiene sonst still
   beerefarben, ohne dass jemand es entschieden haette. Hier ist es
   entschieden. */
.vmw-seite .vmw-badge--eigen {
	background: var(--vmw-badge-ton, var(--vmw-badge-eigen));
}

/* Die Text-Huelle (seit 25.09.2026): Name bis Vertrauenszeile, beim Paket
   Name bis "und n weitere". Sie gibt dem Text EINE Spur im Raster der
   Reihenflucht (Abschnitt 18) -- ohne sie laege jede Textzeile auf einer
   eigenen Spur, und eine fehlende Geschmackszeile riss ein Loch mitten in
   den Text der Nachbarkachel. Im Flex-Layout aendert sie nichts: dieselbe
   Luecke von 9px wie die Kachel selbst. */
.vmw-seite .vmw-kachel__text {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

/* B5: Der Name darf zwei oder drei Zeilen brauchen. Ausgerichtet wird
   deshalb nicht der Name, sondern alles darunter -- siehe `__preis`. */
.vmw-seite .vmw-kachel__name {
	margin-top: 6px;
	font-family: var(--vmw-serif);
	font-weight: 400;
	font-size: 21px;
	line-height: 1.25;
	color: var(--vmw-ink);
}

.vmw-seite .vmw-kachel__name a {
	color: inherit;
}

/* Das Weingut ueber dem Weinnamen -- nur im Shop, siehe
   `kachel_weingut()`. Leise gesetzt: der Name bleibt die Ueberschrift, das
   Weingut ist die Zeile, die man liest, wenn man sucht.

   Die 6px Abstand zum Bild uebernimmt diese Zeile vom Namen; der Name
   rueckt dafuer an sie heran. Ohne das stuenden Weingut und Wein mit 15px
   Luft auseinander und laesen sich wie zwei Angaben statt wie eine. */
.vmw-seite .vmw-kachel__weingut {
	margin: 6px 0 -5px;
	font-family: var(--vmw-sans);
	font-size: 13px;
	line-height: 1.35;
	letter-spacing: 0.02em;
	color: var(--vmw-muted);
}

/* Seit der Text-Huelle ist der Name nicht mehr Nachbar des Weinguts, sondern
   erstes Kind der Huelle daneben. Die alte Fassung `__weingut + __name`
   griff danach ins Leere, und Weingut und Wein standen 10 statt 4px
   auseinander. */
.vmw-seite .vmw-kachel__weingut:not(.vmw-kachel__weingut--leer) + .vmw-kachel__text > .vmw-kachel__name {
	margin-top: 0;
}

/* Die leere Oberzeile (Shop, kein Weingut bzw. keine Herkunft bekannt, seit
   29.09.2026) haelt ab 768px nur den Platz, damit auch eine Reihe ohne ein
   einziges Weingut den Titel auf derselben Hoehe hat wie alle anderen
   (Abschnitt 19). Darunter steht eine Kachel je Reihe, dort faellt sie weg. */
.vmw-seite .vmw-kachel__weingut--leer {
	display: none;
}

.vmw-seite .vmw-kachel__weingut a {
	color: inherit;
	text-decoration: none;
}

.vmw-seite .vmw-kachel__weingut a:hover {
	color: var(--vmw-beere);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.vmw-seite .vmw-kachel__merkmale {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--vmw-soft);
}

.vmw-seite .vmw-geschmack {
	display: inline-flex;
	align-items: center;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 3px 12px;
	border: 1px solid var(--vmw-linie-2);
	border-radius: var(--vmw-radius-pille);
	color: var(--vmw-beere);
}

.vmw-seite .vmw-art {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.vmw-seite .vmw-art__punkt {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--vmw-art);
}

/* Die Rebsorte mit Traube (07.10.2026, Kundenwunsch): Zeichen und Name als
   Paar wie bei der Weinart. Beere wie Weinglas und Kochtopf darunter -- das
   Zeichen sagt "hier steht die Rebsorte", nicht "das ist wichtig". */
.vmw-seite .vmw-kachel__reben {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.vmw-seite .vmw-kachel__reben > .vmw-icon {
	flex: none;
	color: var(--vmw-beere);
}

/* 14px statt 15: die Masse des Entwurfs V5 (`.taste`). Der Stilsatz ist
   die laengste Zeile der Kachel, und im Dreierraster sind die Kacheln seit
   dem 19.09.2026 430px breit statt 371. */
.vmw-seite .vmw-kachel__stil {
	font-size: 14px;
	line-height: 1.55;
	color: var(--vmw-soft);
}

/* EIN GEDECKTER SATZ, KEIN LABEL MIT LISTE.

   Bis zum 19.09.2026 war das ein `flex` mit fettem `<strong>Passt zu:</strong>`
   davor. Der Kunde fand den Inhalt richtig und die Darstellung nicht: zwei
   Schriftschnitte und zwei Farben fuer eine Nebenangabe. Jetzt ist es ein
   gewoehnlicher Absatz in einer Farbe -- Entwurf V5 (`.pairing-line`).

   14px SEIT DEM 20.09.2026, vorher 13. Der Kunde hat nach der Entwurfsrunde
   (Variante K1) ausdruecklich dieselbe Schriftgroesse fuer beide Zeilen
   verlangt. Damit bleibt als Rangfolge allein die Textfarbe: `--vmw-soft`
   ueber `--vmw-muted`. Das ist der LETZTE Unterschied zwischen den beiden
   Zeilen -- wer ihn spaeter auch noch einebnet, hat zwei Saetze ohne jede
   Staffelung, und das Zeichen leistet dann allein, was vorher Groesse,
   Farbe und Zeichen gemeinsam getan haben.

   Der Satz ist trotz `display: flex` am Elternteil (siehe unten) ein Satz
   geblieben: das Flex-Paar ist Zeichen und Satz, nicht Wort und Wort. Der
   Satztext wird dabei zu einem namenlosen Flex-Kind -- er hat kein Element,
   ist also nicht zu treffen und nicht zu gestalten. Das ist hier richtig, und
   es ist der Grund, warum alles, was den SATZ betrifft (Groesse, Zeilenhoehe,
   Farbe), am Absatz stehen muss und nicht an einem inneren `<span>`. */
.vmw-seite .vmw-kachel__passt {
	font-size: 14px;
	line-height: 1.55;
	color: var(--vmw-muted);
}

/* --- Die beiden Zeichen (Entwurfsrunde 12, Variante K1) -------------- */

/* WAS DAS ZEICHEN LEISTET UND DIE GROESSE NICHT LEISTEN KANN: es sagt,
   WORUEBER die Zeile spricht, ohne dafuer ein Wort auszugeben. Ohne die
   Zeichen stehen dort zwei Saetze, und wer die Kachel zum ersten Mal sieht,
   muss aus dem Wortlaut schliessen, welcher welcher ist. "Passt zu Lamm und
   Kraeutern" sagt es selbst, ein Geschmackssatz sagt es nicht.

   Weinglas und Kochtopf liegen seit dem 15.09.2026 in `icons.php` und stehen
   auf derselben Seite bereits an anderer Stelle -- das Weinglas am
   Einstiegskasten, der Kochtopf in der Erlebnis-Leiste von Ueber Vinomeet.
   Es kommt also kein neues Zeichen in die Seite, nur eines an eine zweite
   Stelle.

   `align-items: flex-start` und nicht `center`: sonst saesse das Zeichen bei
   einem zweizeiligen Satz in dessen Mitte statt an seiner ersten Zeile. Auf
   dem Handy ist fast jeder dieser Saetze zweizeilig. */
.vmw-seite .vmw-kachel__stil,
.vmw-seite .vmw-kachel__passt {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

/* BEIDE ZEICHEN TRAGEN BEERE. Im Entwurfsboard war das zweite gedeckt wie
   seine Zeile; der Kunde hat am 20.09.2026 beide in der Markenfarbe
   verlangt. Sie sind damit das einzige Paar auf der Kachel, das nicht
   staffelt -- das ist gewollt: sie sagen "hier steht eine Angabe", nicht
   "diese ist wichtiger".

   2px Versatz nach unten: die optische Mitte eines 16px-Zeichens liegt
   hoeher als die Mittellinie der ersten Textzeile. Gemessen an der
   Grundlinie, nicht geschaetzt.

   `flex: none` haelt das Zeichen bei seiner Groesse -- ohne die Zeile
   schruempfte es, sobald der Satz die Breite fuellt, und zwar ohne
   Fehlermeldung und an jeder Kachel ein bisschen anders.

   GETROFFEN WIRD UEBER `.vmw-icon`, nicht ueber eine eigene Klasse: `icon()`
   in `includes/render/icons.php` schreibt eine feste Klassenliste, und eine
   zusaetzliche Klasse gaebe es nur mit einem Huellen-`<span>` oder einem
   neuen Parameter an der Hilfsfunktion. Der direkte Kindselektor reicht und
   bleibt bei drei Einheiten -- das Einheitenbudget gegen die
   Elementor-Regler ist damit gewahrt. */
.vmw-seite .vmw-kachel__stil > .vmw-icon,
.vmw-seite .vmw-kachel__passt > .vmw-icon {
	flex: none;
	margin-top: 2px;
	color: var(--vmw-beere);
}

.vmw-seite .vmw-kachel__vertrauen {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 13px;
	color: var(--vmw-muted);
}

/* `margin-top: auto` schiebt Preis UND Fuss gemeinsam an die Unterkante der
   Kachel. Im Raster sind alle Kacheln einer Reihe gleich hoch, also stehen
   Trennlinie, Preis und Kaufknopf danach auf einer Linie -- gleich, ob der
   Produktname zwei oder drei Zeilen braucht und ob Stilsatz oder
   Vertrauenszeile ueberhaupt da sind. Der Kunde hatte im Meeting am
   04.09.2026 genau darauf gezeigt: "Dann habe ich jetzt hier einen
   Zweizeiler, die anderen haben drei Zeilen."
   Das `auto` stand vorher am Fuss; dort richtete es nur den Knopf aus und
   liess den Preis mit dem Text nach oben wandern. */
.vmw-seite .vmw-kachel__preis {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 12px;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--vmw-linie);
}

.vmw-seite .vmw-kachel__betrag {
	font-family: var(--vmw-serif);
	font-size: 26px;
	line-height: 1.1;
	color: var(--vmw-ink);
}

.vmw-seite .vmw-kachel__betrag del {
	font-size: 16px;
	color: var(--vmw-muted);
}

.vmw-seite .vmw-kachel__betrag ins {
	text-decoration: none;
}

/* B3: gleiche Schrift wie der Betrag daneben, schwarz und nicht fett. Der
   Kunde hatte am 04.09.2026 gesehen, dass Betrag und Literpreis in zwei
   verschiedenen Schriften standen -- der Betrag in PT Serif, der Literpreis
   in der Theme-Grundschrift und grau. */
.vmw-seite .vmw-kachel__grundpreis {
	font-family: var(--vmw-serif);
	font-size: 14px;
	font-weight: 400;
	color: var(--vmw-ink);
}

.vmw-seite .vmw-kachel__fuss {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

/* STEUERHINWEIS LINKS, LAGERBESTAND RECHTS -- IN EINER ZEILE.

   Der Lagerbestand stand bis zum 19.09.2026 ganz unten in der Kachel, unter
   Kaufknopf und Lebensmittelangaben, also am weitesten weg vom Preis, auf
   den er sich bezieht. Der Steuerhinweis stand ueberhaupt nicht da -- er
   kam nur mit, wenn Germanized ihn ins Preis-HTML schrieb.

   `space-between` und nicht zwei feste Spalten: faellt eine der beiden
   Angaben weg (leere Beschriftung, kein Bestand gefuehrt), rueckt die
   andere an den Rand, statt eine Luecke zu hinterlassen. `flex-wrap`
   fuer den Fall, dass beide zusammen breiter sind als die Kachel --
   dann stehen sie untereinander statt gedraengt. */
.vmw-seite .vmw-kachel__steuer {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 2px 14px;
	margin-top: 5px;
	font-size: 11px;
	color: var(--vmw-muted);
}

.vmw-seite .vmw-kachel__steuer .vmw-ampel {
	font-size: 12px;
}

/* Hier stand bis zum 24.09.2026 `.vmw-kachel__melden`, der Link
   "Benachrichtigen" unter dem gesperrten Knopf. Er ist samt Feldern
   entfallen (Runde 16), siehe `sortiment-kachel.php`. */

/* Der rechtliche Hinweis, seit dem 20.09.2026 unter dem Steuerhinweis statt
   unter dem Kaufknopf. Klein und ruhig: eine Pflichtangabe, kein Angebot.

   Er steht damit bei den anderen Pflichtangaben und weiterhin VOR dem Knopf
   -- man liest ihn auf dem Weg zum Klick, nicht danach.

   ER GEHOERT ZUR ZEILE DARUEBER, NICHT ZUR KAUFBOX DARUNTER -- und seit dem
   20.09.2026 sieht man das auch. Der Kunde hat gemeldet, dass er zu weit
   oben und zu nah am Knopf klebt. Gerechnet, nicht geschaetzt: `.vmw-kachel`
   ist `flex-direction: column` mit `gap: 9px`, also

       vorher   9 + 3 =  12px nach oben, 9 + 0 =  9px nach unten
       jetzt    9 - 4 =   5px nach oben, 9 + 10 = 19px nach unten

   DER NEGATIVE WERT IST KEIN KNIFF, SONDERN DIE EINZIGE STELLE. Die 9px
   kommen vom `gap` der Kachel, und ein `gap` laesst sich an einem einzelnen
   Kind nicht unterschreiten -- `margin-top` ist das einzige, was dagegen
   rechnet. Dieselbe Datei macht es an zwei weiteren Stellen so
   (`.vmw-chips`, `.vmw-stimmen__liste`), beide Male aus demselben Grund.

   Die Alternative waere, Steuerzeile und Hinweis in einen gemeinsamen
   Behaelter zu legen. Das kostete ein Element im Markup, eine Klasse, und
   eine Fallunterscheidung fuer die Weine ohne Lebensmittelangaben -- fuer
   einen Abstand, den zwei Zahlen hier erledigen. */
.vmw-seite .vmw-kachel__recht {
	margin: -4px 0 10px;
}

.vmw-seite .vmw-kachel__recht .vmw-textlink {
	font-weight: 400;
	color: var(--vmw-muted);
}

.vmw-seite .vmw-kachel__recht .vmw-textlink:hover {
	color: var(--vmw-beere);
}

/* --- Paket-Kachel im Shop (seit 25.09.2026) ------------------------- */

/* Nur die Teile, die die Weinkachel nicht hat. Rahmen, Bild, Name, Pille,
   Farbpunkt, Preis mit Angebot, Steuerzeile und Knoepfe kommen unveraendert
   aus den Regeln darueber -- dieselben Klassen, damit Wein und Paket in
   einem Karussell aus einem Guss stehen. Alles haengt an `.vmw-kachel--paket`
   und trifft die Paketkarte der Winzerseite (`.vmw-paket--p1`) nicht.

   DIE WEINE STEHEN JE EINE ZEILE, NICHT UMBROCHEN. Drei Namen, die mal eine,
   mal zwei Zeilen brauchen, liessen die Preislinie benachbarter Pakete
   springen. Der volle Name steht auf der Produktseite.

   IM ZEILENMASS DER WEINKACHEL (29.09.2026): 14px auf 1,55 mit 9px Abstand,
   wie Stil und "Passt zu" beim Wein, statt 14/1,4 mit 14px. Drei Eintraege
   sind damit so hoch wie drei Detailzeilen des Weins daneben. */
.vmw-seite .vmw-kachel--paket .vmw-kachel__weine {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	line-height: 1.55;
	color: var(--vmw-soft);
}

/* Woodmart gibt jedem `li` ausser dem letzten 10px Rand nach unten. Bis
   25.09.2026 kam der Zeilenabstand von dort (10px + 4px gap); seit der Rest
   in einer zweiten Liste aufklappt, fehlte er an der Naht. Der Abstand steht
   jetzt allein im `gap`, derselbe wie vorher. */
.vmw-seite .vmw-kachel--paket .vmw-kachel__weine li {
	margin: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.vmw-seite .vmw-kachel--paket .vmw-kachel__weine .vmw-art__punkt {
	display: inline-block;
	margin-right: 8px;
	vertical-align: 1px;
}

/* Der Jahrgang vor dem Namen, leiser: er unterscheidet, er fuehrt nicht. */
.vmw-seite .vmw-kachel--paket .vmw-kachel__jahrgang {
	color: var(--vmw-muted);
}

/* "2 × " vor dem Namen (seit 29.09.2026), in der Farbe des Namens: die
   Menge ist Teil der Angabe, nicht Beiwerk wie der Jahrgang. */
.vmw-seite .vmw-kachel--paket .vmw-kachel__menge {
	font-variant-numeric: tabular-nums;
	color: var(--vmw-ink);
}

/* Beigaben (Glas, Geschenkverpackung) ohne Farbpunkt, eingerueckt auf die
   Namen: 9px Punkt plus 8px Abstand. */
.vmw-seite .vmw-kachel--paket .vmw-kachel__beigabe {
	padding-left: 17px;
	color: var(--vmw-muted);
}

/* Die Verteilung bleibt eine Zeile; die Liste darunter nennt die Mengen. */
.vmw-seite .vmw-kachel--paket .vmw-kachel__verteilung {
	flex-wrap: nowrap;
	overflow: hidden;
	white-space: nowrap;
}

/* "und n weitere" klappt den Rest der Weine auf. Liste und Text-Huelle haben
   seit dem 29.09.2026 denselben Abstand (9px), ein eigener Rand entfaellt.
   Unter 768px verschwindet die Zeile offen, und die Liste laeuft ohne Naht
   weiter; ab 768px oeffnet die Liste als Ebene (Abschnitt 19).
   Eingerueckt auf die Hoehe der Namen: 9px Punkt plus 8px Abstand. */
.vmw-seite .vmw-kachel--paket .vmw-kachel__weitere {
	margin: 0;
}

.vmw-seite .vmw-kachel--paket .vmw-kachel__weine-mehr {
	display: block;
	padding-left: 17px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--vmw-muted);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 3px;
	list-style: none;
	cursor: pointer;
	transition: color .15s ease, text-decoration-color .15s ease;
}

.vmw-seite .vmw-kachel--paket .vmw-kachel__weine-mehr::-webkit-details-marker {
	display: none;
}

.vmw-seite .vmw-kachel--paket .vmw-kachel__weine-mehr:hover,
.vmw-seite .vmw-kachel--paket .vmw-kachel__weine-mehr:focus-visible {
	color: var(--vmw-beere);
	text-decoration-color: currentColor;
}

.vmw-seite .vmw-kachel--paket .vmw-kachel__weitere[open] > .vmw-kachel__weine-mehr {
	display: none;
}

/* Die Ersparnis-Zeile unter dem Preis ist am 29.09.2026 entfallen: der
   Vergleich mit dem Einzelkauf steht in Zeile 2 der Kaufbox (Kaufzeile,
   `.vmw-kauf__preis.is-vorteil`). */

/* Lebensmittelangaben je Wein, wenn das Paket selbst keine Seite hat. */
.vmw-seite .vmw-kachel--paket .vmw-kachel__recht--liste summary {
	cursor: pointer;
}

.vmw-seite .vmw-kachel--paket .vmw-kachel__recht--liste ul {
	margin: 6px 0 0;
	padding-left: 18px;
	font-size: 12px;
}

.vmw-seite .vmw-kachel--paket .vmw-kachel__recht--liste a {
	color: var(--vmw-muted);
}

/* Das eigene Paketformular (`.vmw-kachel__paketkauf`) ist am 29.09.2026
   entfallen: das Paket hat dieselbe Kaufzeile wie der Wein. */

/* --- Kaufzeile ------------------------------------------------------ */

.vmw-seite .vmw-kauf {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.vmw-seite .vmw-kauf__liste {
	display: flex;
	flex-direction: column;
	/* `min-width: 0` an einem `<fieldset>` ist kein Schmuck: das Element
	   bringt vom UA-Stylesheet eine intrinsische Mindestbreite mit und
	   verweigert die Schrumpfung in Flex und Grid, solange sie nicht
	   ausdruecklich aufgehoben ist. Auf der Winzerseite (371-430px Spalte)
	   faellt das nie auf; in einer schmalen Woodmart-Spalte ist die Kaufbox
	   sonst das einzige Stueck, das sich weigert zu passen, und schiebt sich
	   ueber den Rand. Die Datei setzt denselben Reset an neun weiteren
	   Stellen -- hier fehlte er. */
	min-width: 0;
	margin: 0;
	/* Ohne Polster, damit die Flaeche der gewaehlten Zeile bis an den
	   Rahmen reicht. Siehe die beiden Regeln darunter. */
	padding: 0;
	border: 1px solid var(--vmw-linie-2);
	border-radius: var(--vmw-radius-liste);
	background: #FFFFFF;
}

/* DIE ECKE.
   `border-radius` schneidet Kinder nicht ab. Die gewaehlte Zeile ist ein
   Rechteck ohne eigenen Radius, also malte sie ueber den Bogen -- und
   weil Kinder NACH dem Rahmen des Elternteils gezeichnet werden, lag das
   Rosa in der Ecke ueber der Rahmenlinie. Mit dem alten Polster von 5px
   waren es 1,8px Ueberdeckung (innerer Radius 11, Bogen bei y=5 noch
   11 - Wurzel(11^2-6^2) weiter innen). Am 09.09.2026 beim Hineinzoomen
   gemeldet. Gilt genauso fuer den Zeigen-Zustand.

   Kein `overflow: hidden` auf der Liste: ein <fieldset> rendert seinen
   Inhalt in einer anonymen Box, und ob deren Clip die Rundung des
   Fieldsets kennt, ist nicht verlaesslich. Traefe es nicht zu, waere der
   Mangel ohne Polster sogar groesser (6,4px statt 1,8px). Ausdrueckliche
   Radien sind rechnerisch exakt und haengen von nichts ab.

   WARUM DER GESCHWISTERSELEKTOR: `:first-child` greift nicht -- erstes
   Kind des Fieldsets ist die <legend>. `:first-of-type` greift DREIMAL,
   weil die drei Zeilen drei verschiedene Tags sind (label / label|p /
   div). Nur `legend + …` trifft genau die erste Zeile. Zwei Einheiten. */
.vmw-seite legend + .vmw-kauf__zeile {
	border-top-left-radius: calc( var( --vmw-radius-liste ) - 1px );
	border-top-right-radius: calc( var( --vmw-radius-liste ) - 1px );
}

/* Die letzte Zeile ist immer die mit dem Mengenwaehler. */
.vmw-seite .vmw-kauf__zeile:last-child {
	border-bottom-left-radius: calc( var( --vmw-radius-liste ) - 1px );
	border-bottom-right-radius: calc( var( --vmw-radius-liste ) - 1px );
}

/* Der Bezugsrahmen fuer das versteckte Radio in dieser Zeile.
   .screen-reader-text ist absolut positioniert; ohne positionierten Vorfahr
   bezoege sich ein fremdes top/left auf das ganze Dokument, und das Element
   landete am Seitenanfang.
   Ehrlicher Stand nach der Suche vom 08.09.2026: auf der Winzerseite liegt
   KEINE solche Regel -- weder Woodmart noch WooCommerce noch Germanized
   bringen hier ein `.screen-reader-text:focus` mit, und die Fassung von
   WooCommerce Blocks wird auf dieser Seite gar nicht geladen. Diese Zeile
   ist also Vorsorge, nicht die Behebung des gemeldeten Sprungs. Sie bleibt,
   weil sie zwei Klassen kostet und die Annahme abstuetzt. */
.vmw-seite .vmw-kauf__zeile {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 14px;
	margin: 0;
	font-size: 14.5px;
	color: var(--vmw-soft);
	cursor: pointer;
	transition: background-color var(--vmw-uebergang), color var(--vmw-uebergang);
}

/* Dieselbe Flaeche wie bei der gewaehlten Zeile, aber ohne Gewicht und
   ohne Kante -- die Zeile antwortet auf den Mauszeiger, sieht aber nicht
   gewaehlt aus. Ein eigener Hover-Ton haette einen vierten Rosaton in die
   Palette gebracht. */
.vmw-seite .vmw-kauf__zeile:hover {
	background: var(--vmw-flaeche);
	color: var(--vmw-ink);
}

/* DIE GEWAEHLTE ZEILE TRAEGT EINE BORDEAUX-KANTE (24.09.2026, Runde 16).

   Bis dahin war die Auswahl Flaeche plus Gewicht -- und die Flaeche war
   dieselbe wie beim Zeigen. Wer mit der Maus ueber "6 Flaschen" fuhr, sah
   zwei hinterlegte Zeilen und musste am Gewicht erkennen, welche gilt. Der
   Kunde hat verlangt, die Flaeche zu behalten und einen klaren Rahmen
   dazuzunehmen.

   Als Schatten nach innen und nicht als `border`: ein Rand machte die Zeile
   um 3px hoeher und schoebe den Kaufknopf beim Umschalten. Der Schatten
   folgt dem Radius der ersten und letzten Zeile (siehe DIE ECKE oben) von
   selbst. 1,5px wie der Rand am gewaehlten Mengenwaehler. */
.vmw-seite .vmw-kauf__zeile.is-gewaehlt {
	background: var(--vmw-flaeche);
	box-shadow: inset 0 0 0 1.5px var(--vmw-beere);
	font-weight: 600;
	color: var(--vmw-ink);
}

/* DER FOKUS SITZT AN DER ZEILE, NICHT AM RADIO (21.09.2026, Audit FE-005).

   Das Radio ist `.screen-reader-text`: 1x1 Pixel, `clip-path: inset(50%)`.
   Der Ring von `.vmw-seite :focus-visible` -- und ab 1025px Woodmarts
   gepunkteter mit `!important` -- lag also an einem Element, das man nicht
   sieht. Wer mit Tab in die Mengenwahl kam, sah nicht, wo er stand.

   Gemalt wird deshalb an der sichtbaren Zeile, als Umriss nach innen:
   nach aussen laege er ueber dem Rahmen der Liste und stiesse an die
   Nachbarzeile. Der Umriss folgt dem Radius der ersten und letzten Zeile
   von selbst.

   SEIT DEM 24.09.2026 5PX NACH INNEN, NICHT MEHR 2. Die Auswahl traegt
   jetzt selbst eine Bordeaux-Kante am Zeilenrand (oben). Ein Ring bei -2px
   laege genau darauf und saehe an einer ungewaehlten Zeile aus wie eine
   Auswahl. Bei -5px bleibt zwischen beiden ein Spalt: AUSWAHL ist die
   Kante aussen, FOKUS der Ring innen -- getrennt erkennbar, auch zusammen
   an derselben Zeile.

   Woodmarts Regel trifft nur Links, Knoepfe und bestimmte Inputs; ein
   <label> ist nicht darunter, die Zeile gehoert also uns an jeder Breite.

   Zwei Stufen: `:focus-within` als Rueckfall fuer Browser ohne `:has()`.
   Dort erscheint der Ring auch nach einem Mausklick -- was selten ist,
   weil der Klick das Radio gar nicht fokussiert (winzer.js bremst ihn).
   Mit `:has()` nur bei Tastaturfokus. Nur die Radiozeilen: die Zeile
   "eigene Anzahl" enthaelt ein Zahlenfeld mit eigenem Ring. */
.vmw-seite label.vmw-kauf__zeile:focus-within {
	outline: 2px solid var(--vmw-fokus-ring);
	outline-offset: -5px;
}

@supports selector(:has(*)) {
	.vmw-seite label.vmw-kauf__zeile:focus-within {
		outline: none;
	}

	.vmw-seite label.vmw-kauf__zeile:has(> input:focus-visible) {
		outline: 2px solid var(--vmw-fokus-ring);
		outline-offset: -5px;
	}
}

/* `background` steht hier nur wegen des Zeigen-Zustands oben: eine gesperrte
   Zeile soll sich auch unter dem Mauszeiger nicht anfuehlen wie eine Wahl. */
.vmw-seite .vmw-kauf__zeile.is-gesperrt {
	background: transparent;
	color: var(--vmw-gesperrt);
	cursor: default;
}

/* B3: auch hier PT Serif. "Ueberall dieselbe Schriftart" war die Ansage --
   der Kunde hatte drei verschiedene Preisdarstellungen auf einer Kachel
   gezaehlt. 700 statt 600, weil PT Serif nur 400 und 700 mitbringt. */
.vmw-seite .vmw-kauf__preis {
	font-family: var(--vmw-serif);
	font-size: 14px;
	color: var(--vmw-muted);
}

.vmw-seite .vmw-kauf__zeile.is-gewaehlt .vmw-kauf__preis {
	font-size: 15px;
	font-weight: 700;
	color: var(--vmw-ink);
}

.vmw-seite .vmw-kauf__zeile.is-gesperrt .vmw-kauf__preis {
	color: var(--vmw-gesperrt);
}

/* DREI FESTE SPUREN, DAMIT DER MENGENWAEHLER STILLSTEHT.
   Vorher war die Zeile ein Flex-Behaelter mit `space-between`. Die Summe
   ist serverseitig leer und faellt per `:empty` aus dem Fluss -- die
   Zeile hatte also mal zwei, mal drei Kinder, und der Waehler sprang beim
   ersten Klick auf `+` von rechts in die Mitte. Am 09.09.2026 gemeldet.

   Ein Raster mit AUSDRUECKLICHEN Spuren hat die dritte Spalte auch dann,
   wenn die Summe gar kein Item ist. Deshalb braucht es weder eine immer
   sichtbare Summe (die stuende bei Menge 1 zweimal auf der Kachel) noch
   eine reservierte Pixelbreite.

   `align-items` und `gap` aus der Basisregel wirken im Raster
   unveraendert, `justify-content: space-between` wird wirkungslos. */
.vmw-seite .vmw-kauf__zeile--eigene {
	display: grid;
	grid-template-columns: auto auto 1fr;
	margin-top: 4px;
	padding-top: 11px;
	border-top: 1px solid var(--vmw-linie);
}

/* Ohne diese Zeile wuerde die Beschriftung beim Umschalten auf
   `is-gewaehlt` fett und damit breiter -- und der Waehler rutschte unter
   dem Finger nach rechts. Also genau der Sprung, den das Raster darueber
   beseitigt, nur ein paar Pixel kleiner. Die Wahl bleibt an Flaeche,
   Textfarbe und dem Beere-Rand am Waehler erkennbar. */
.vmw-seite .vmw-kauf__zeile--eigene .vmw-kauf__text {
	font-weight: 400;
}

/* ZEILE 2 ALS INFOZEILE (29.09.2026, "Ein Kaufbereich"). Bei Set, Paket und
   Flasche ohne Karton steht dort, was im Kauf steckt: "Inhalt 6 Flaschen ·
   4,5 L" oder beim Paket "Im Einzelkauf 57,00 EUR · 9,50 EUR gespart". Masse
   einer Wahlzeile, aber nichts zu waehlen: kein Zeigen-Zustand, kein Zeiger. */
.vmw-seite .vmw-kauf__zeile--info {
	cursor: default;
}

.vmw-seite .vmw-kauf__zeile--info:not(.is-gesperrt):hover {
	background: transparent;
	color: var(--vmw-soft);
}

.vmw-seite .vmw-kauf__zeile--info .vmw-kauf__preis {
	text-align: right;
}

/* Der Vorteil gegenueber dem Einzelkauf in Beere, wie bis dahin
   "Du sparst" unter dem Preis. */
.vmw-seite .vmw-kauf__preis.is-vorteil {
	font-weight: 700;
	color: var(--vmw-beere);
}

/* DER GRUND STATT DER MENGE (29.09.2026): "Auswahl auf der Produktseite",
   "Höchstmenge im Warenkorb". Die Zeile ist so hoch wie die Mengenzeile mit
   ihrem Waehler (32,4px), damit Box und Knopf mit den Nachbarn fluchten. */
.vmw-seite .vmw-kauf__zeile--hinweis .vmw-kauf__text {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	min-height: 32.4px;
}

/* NUR EINE MENGE (29.09.2026): "1 · nur einzeln bestellbar" statt eines
   Waehlers, an dem Plus und Minus nichts taten. Rechts, wo sonst der Waehler
   bzw. die Summe steht, und so hoch wie der Waehler (32,4px) -- Box und Knopf
   fluchten mit den Nachbarn. Kein Zeigen-Zustand, hier ist nichts zu waehlen. */
.vmw-seite .vmw-kauf__zeile--fest {
	cursor: default;
}

.vmw-seite .vmw-kauf__zeile--fest:hover {
	background: transparent;
	color: var(--vmw-soft);
}

.vmw-seite .vmw-kauf__fest {
	grid-column: 2 / -1;
	justify-self: end;
	display: flex;
	align-items: center;
	min-height: 32.4px;
	font-size: 14px;
	color: var(--vmw-muted);
	text-align: right;
}

.vmw-seite .vmw-kauf__fest b {
	font-weight: 600;
	color: var(--vmw-ink);
}

.vmw-seite .vmw-stepper {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 8px;
	border: 1px solid var(--vmw-linie-2);
	border-radius: var(--vmw-radius-pille);
}

.vmw-seite .vmw-kauf__zeile--eigene.is-gewaehlt .vmw-stepper {
	border-width: 1.5px;
	border-color: var(--vmw-beere);
	font-weight: 600;
}

/* Waehrend jemand eine Menge tippt, die es nicht gibt (0, 2,8, ueber dem
   Deckel), setzt winzer.js `aria-invalid` -- der Knopf behaelt so lange die
   letzte gueltige Menge. Der rote Rand sagt, warum; beim Verlassen rastet
   das Feld ein und der Rand geht wieder weg. Ohne `:has()` bleibt es beim
   gesprochenen Hinweis. */
.vmw-seite .vmw-stepper:has(.vmw-stepper__feld[aria-invalid="true"]) {
	border-color: var(--vmw-rot);
}

/* 22px sind entworfen — Woodmart schob jedem nackten Knopf ein
   `min-height: 42px` unter und machte den Stepper damit doppelt so hoch.
   Der Reset in Abschnitt 2 nimmt das zurueck; `height` steht hier trotzdem
   ausdruecklich, damit die Taste rund bleibt. */
.vmw-seite .vmw-stepper__taste {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	width: 22px;
	height: 22px;
	border: 0;
	border-radius: var(--vmw-radius-pille);
	background: transparent;
	color: var(--vmw-beere);
	cursor: pointer;
	transition: background-color var(--vmw-uebergang), color var(--vmw-uebergang);
}

/* Gefuellte Beere statt heller Flaeche: die Zeile darunter faerbt sich beim
   Zeigen selbst auf `--vmw-flaeche`, ein heller Hover waere darauf
   unsichtbar. Aktiv gleich gefuellt ist ausserdem dieselbe Sprache wie bei
   Chips und Segmenten. */
.vmw-seite .vmw-stepper__taste:hover {
	background: var(--vmw-beere);
	color: #FFFFFF;
}

/* An der Grenze (29.09.2026): Minus bei der kleinsten, Plus bei der
   groessten Menge. winzer.js setzt `aria-disabled`, nicht `disabled` --
   warum, steht in mengeZeigen(). Grau wie eine gesperrte Zeile und ohne
   Fuellung unter dem Mauszeiger. */
.vmw-seite .vmw-stepper__taste[aria-disabled="true"],
.vmw-seite .vmw-stepper__taste[aria-disabled="true"]:hover {
	background: transparent;
	color: var(--vmw-gesperrt);
	cursor: default;
}

.vmw-seite .vmw-stepper__feld {
	width: 3.5ch;
	font-family: inherit;
	font-size: 14px;
	text-align: center;
	border: 0;
	background: transparent;
	color: var(--vmw-ink);
	appearance: textfield;
	-moz-appearance: textfield;
}

.vmw-seite .vmw-stepper__feld::-webkit-outer-spin-button,
.vmw-seite .vmw-stepper__feld::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

.vmw-seite .vmw-kauf__summe:empty {
	display: none;
}

/* `justify-self` statt `text-align`: das Element ist ein Raster-Item und
   soll seine Spur nicht fuellen, sondern rechts in ihr stehen -- in
   derselben Flucht wie die Preise der Zeilen darueber (Design-Spez,
   Abschnitt Kauf-Zeile). */
.vmw-seite .vmw-kauf__summe {
	justify-self: end;
	font-family: var(--vmw-serif);
	font-size: 15px;
	font-weight: 700;
	color: var(--vmw-ink);
}

/* Die Groesse des Kachel-Knopfes steht jetzt bei den Stufen in Abschnitt 3
   (`.vmw-knopf--kachel`) — hier stand sie als `.vmw-kauf .vmw-knopf` und
   erwischte zwei von drei Kachel-Knoepfen nicht. */

/* Zwei Grautoene sind hier Absicht, kein Ausrutscher: die Design-Spez trennt
   „gesperrte Beschriftung" (--vmw-aus-text, auf gefuellter Flaeche) von
   „gesperrte Listenzeile" (--vmw-gesperrt, auf weissem Grund). */
.vmw-seite .vmw-knopf--aus {
	background: var(--vmw-aus-flaeche);
	color: var(--vmw-aus-text);
	cursor: default;
}

/* DIE AUSGEGRAUTE KAUFBOX (28.09.2026, Test auf Branch test/reihenflucht).
   Ausverkaufte Kacheln zeigen die Liste gesperrt ueber dem grauen Knopf,
   statt dort 191px leer zu lassen; warum, steht in sortiment-kaufzeile.php.
   Die Zeilen tragen `is-gesperrt` und nehmen damit Farbe und Zeigen-Zustand
   der gesperrten Kartonzeile. Der Mengenwaehler hat keine gesperrte Fassung,
   er wird deshalb als Ganzes blass -- so wie in der gewaehlten Probe. Die
   Tasten bleiben dabei ohne Fuellung unter dem Mauszeiger: `:hover` greift
   auch an einem gesperrten Knopf.

   "Menge" ist ein <label>, und Woodmart gibt jedem Label eine eigene
   Farbe -- es erbte das Grau der Zeile deshalb nicht und stand in der
   ersten Auslieferung dunkel da (28.09.2026, am Bild gesehen). */
.vmw-seite .vmw-kauf--aus .vmw-kauf__zeile--eigene .vmw-kauf__text {
	color: var(--vmw-gesperrt);
}

.vmw-seite .vmw-kauf--aus .vmw-stepper {
	opacity: 0.45;
}

.vmw-seite .vmw-kauf--aus .vmw-stepper__taste,
.vmw-seite .vmw-kauf--aus .vmw-stepper__feld {
	cursor: default;
}

.vmw-seite .vmw-kauf--aus .vmw-stepper__taste:hover {
	background: transparent;
	color: var(--vmw-beere);
}

/* Der Rand stand bis zum 08.09.2026 auf `--vmw-linie-2` (#DFCED6) — auf
   weissem Grund ein Umriss, den man kaum als Knopf erkennt. Der Kunde hat
   genau das gemeldet. Jetzt traegt schon die Ruhelage die CI-Farbe, und der
   Zeigen-Zustand geht eine Stufe weiter.
   Gilt fuer alle drei Geist-Knoepfe auf hellem Grund: Nachladen, Reset im
   Sheet und "Zum Wein" bei variablen Produkten. */
.vmw-seite .vmw-knopf--geist-hell {
	background: transparent;
	border-color: var(--vmw-beere);
	color: var(--vmw-beere);
}

.vmw-seite .vmw-knopf--geist-hell:hover,
.vmw-seite .vmw-knopf--geist-hell:focus {
	border-color: var(--vmw-beere-dunkel);
	color: var(--vmw-beere-dunkel);
}

/* WooCommerce haengt nach dem Kauf einen eigenen Link hinter den Knopf.
   Seit dem 29.09.2026 steht an der Stelle des Knopfs die eigene Bestaetigung
   mit "Ansehen" (winzer.js); der zweite Link waere doppelt und machte die
   Kachel um eine Zeile hoeher als ihre Nachbarn. */
.vmw-seite .vmw-kauf .added_to_cart {
	display: none;
}

/* Nach dem Kauf tritt die Bestaetigung an die Stelle der Kaufzeile. */
.vmw-seite .vmw-gekauft {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	background: var(--vmw-flaeche);
	border-radius: var(--vmw-radius-liste);
	font-size: 15px;
	font-weight: 600;
	color: var(--vmw-beere);
}

.vmw-seite .vmw-gekauft::before {
	content: "✓";
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--vmw-beere);
	color: #FFFFFF;
	font-size: 12px;
}

/* NACH DEM KAUF BLEIBT DIE BOX (29.09.2026). Die Bestaetigung steht an der
   Stelle des Knopfs und ist so hoch wie er (44px): die Kachel wird weder
   kuerzer noch hoeher, die Reihe bleibt, wie sie war (reihenflucht.cjs Z5).
   Eine neue Menge holt den Knopf zurueck. */
.vmw-seite .vmw-gekauft.vmw-gekauft--knopf {
	justify-content: center;
	box-sizing: border-box;
	height: var(--vmw-knopf-m-hoehe, 44px);
	margin: 0;
	padding: 0 16px;
	border-radius: var(--vmw-radius-pille);
	/* In einer Kachel von 313px darf "12 Pakete im Warenkorb · Ansehen"
	   zweizeilig werden; die Hoehe bleibt die des Knopfs. */
	font-size: 14px;
	line-height: 1.2;
	text-align: center;
}

.vmw-seite .vmw-gekauft--knopf a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- Ampel ---------------------------------------------------------- */

/* `inline-flex`, weil die Ampel seit dem 19.09.2026 zwei Rollen hat: in
   der Kachel steht sie als `<span>` neben dem Steuerhinweis, anderswo als
   eigener Absatz. `flex` zwaenge sie dort in eine eigene Zeile. */
.vmw-seite .vmw-ampel {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--vmw-muted);
}

.vmw-seite .vmw-ampel__punkt {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--vmw-muted);
}

.vmw-seite .vmw-ampel--gruen .vmw-ampel__punkt {
	background: var(--vmw-gruen);
}

.vmw-seite .vmw-ampel--gruen {
	color: var(--vmw-gruen);
}

.vmw-seite .vmw-ampel--orange .vmw-ampel__punkt {
	background: var(--vmw-orange);
}

.vmw-seite .vmw-ampel--orange {
	color: var(--vmw-orange-text);
}

.vmw-seite .vmw-ampel--rot .vmw-ampel__punkt {
	background: var(--vmw-rot);
}

.vmw-seite .vmw-ampel--rot {
	color: var(--vmw-rot);
}

/* --- Nachladen und Leerzustand -------------------------------------- */

.vmw-seite .vmw-sortiment__mehr {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding-top: 8px;
}

.vmw-seite .vmw-sortiment__fortschritt {
	font-size: 13px;
	color: var(--vmw-muted);
}

.vmw-seite .vmw-sortiment__hinweis {
	font-size: 13px;
	line-height: 1.5;
	text-align: center;
	color: var(--vmw-muted);
}

.vmw-seite .vmw-sortiment__leer {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: 24px 0;
}

/* ------------------------------------------------------------------ */
/* 7  Kundenstimmen                                                    */
/* ------------------------------------------------------------------ */

.vmw-seite .vmw-stimmen {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.vmw-seite .vmw-stimmen__kopf {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.vmw-seite .vmw-stimmen__einleitung {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.vmw-seite .vmw-score {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 16px;
	padding: 10px 20px;
	background: #FFFFFF;
	border: 1px solid var(--vmw-linie);
	border-radius: var(--vmw-radius-pille);
}

.vmw-seite .vmw-score__zahl {
	font-family: var(--vmw-serif);
	font-size: 28px;
	line-height: 1;
	color: var(--vmw-ink);
}

.vmw-seite .vmw-score__daten {
	display: flex;
	flex-direction: column;
}

.vmw-seite .vmw-score__anzahl {
	font-size: 13px;
	color: var(--vmw-muted);
}

/* Auf dem Handy ein Scroll-Streifen mit Einrastpunkten. Kein Skript
   noetig — das macht der Browser. */
.vmw-seite .vmw-stimmen__liste {
	display: flex;
	gap: 14px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: var(--vmw-gutter);
	margin: 0 calc(var(--vmw-gutter) * -1);
	padding: 0 var(--vmw-gutter);
	scrollbar-width: none;
}

.vmw-seite .vmw-stimmen__liste::-webkit-scrollbar {
	display: none;
}

.vmw-seite .vmw-stimme {
	flex: 0 0 300px;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 20px;
	background: #FFFFFF;
	border: 1px solid var(--vmw-linie);
	border-radius: var(--vmw-radius-karte);
}

.vmw-seite .vmw-stimme__zitat {
	flex: 1 1 auto;
	font-family: var(--vmw-serif);
	font-style: italic;
	font-size: 15px;
	line-height: 1.55;
	color: var(--vmw-ink);
}

.vmw-seite .vmw-stimme__fuss {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-top: 14px;
	border-top: 1px solid #EFE6EA;
}

.vmw-seite .vmw-stimme__name {
	font-size: 14px;
	font-weight: 600;
	color: var(--vmw-ink);
}

.vmw-seite .vmw-stimme__geprueft {
	font-weight: 400;
	color: var(--vmw-muted-hell-text);
}

.vmw-seite .vmw-stimmen__mehr {
	text-align: center;
}

/* Die Punkte erzeugt das Skript, weil sie ohne Scrollposition nichts
   anzeigen koennten. Ab der Rasteransicht entfallen sie — ausgeblendet im
   768er-Block, nicht im Skript. */
.vmw-seite .vmw-punkte-leiste {
	display: flex;
	justify-content: center;
	gap: 7px;
}

.vmw-seite .vmw-punkte-leiste__punkt {
	width: 6px;
	height: 6px;
	border-radius: var(--vmw-radius-pille);
	background: var(--vmw-linie-2);
	transition: width 0.18s ease, background-color 0.18s ease;
}

.vmw-seite .vmw-punkte-leiste__punkt.is-aktiv {
	width: 20px;
	background: var(--vmw-beere);
}

/* ------------------------------------------------------------------ */
/* 8  Paket                                                            */
/* ------------------------------------------------------------------ */

/* EIN KOPF UND EINE LISTE (19.09.2026).

   Bis dahin WAR die Sektion das Layout: schmal eine Flex-Spalte, breit ein
   zweispaltiges Gitter, und `.vmw-paket__inhalt` loeste sich mit
   `display: contents` darin auf. Das trug genau ein Paket.

   Drei Pakete in dieser Fassung liefen ineinander -- erst alle Bilder, dann
   alle Ueberschriften, dann alles Uebrige, weil `display: contents` die
   Kinder an die Sektion durchreicht. Die beiden Huellen `__kopf` und
   `__liste` sind deshalb Pflicht und nicht Geschmack. */
.vmw-seite .vmw-paket {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.vmw-seite .vmw-paket__kopf {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* SCHMAL EIN SCHNAPPSTREIFEN -- dieselbe Mechanik wie die Kundenstimmen, und
   ohne Skript. Die negativen Raender holen den Streifen an die Fensterkante,
   das Polster setzt den Inhalt wieder in den Satzspiegel: so laeuft die
   dritte Karte sichtbar aus dem Bild heraus, statt an einer Kante abzubrechen.

   BEI EINEM PAKET FAELLT DER STREIFEN WEG. Eine einzelne 290-px-Karte in
   einem 350-px-Satzspiegel saehe aus, als fehlte rechts daneben etwas. */
.vmw-seite .vmw-paket__liste {
	display: flex;
	gap: 14px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: var(--vmw-gutter);
	margin: 0 calc(var(--vmw-gutter) * -1);
	padding: 0 var(--vmw-gutter);
	scrollbar-width: none;
}

.vmw-seite .vmw-paket__liste::-webkit-scrollbar {
	display: none;
}

.vmw-seite .vmw-paket__liste[data-vmw-pakete="1"] {
	display: block;
	overflow: visible;
	margin: 0;
	padding: 0;
}

.vmw-seite .vmw-paketkarte {
	display: flex;
	flex-direction: column;
	flex: 0 0 290px;
	gap: 10px;
	scroll-snap-align: start;
	padding: 16px 16px 18px;
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: var(--vmw-radius-bild);
	background: rgba(255, 255, 255, 0.06);
}

/* Ohne diese Zeile bliebe die einzelne Karte auf 290px stehen, waehrend die
   Liste darum herum schon voll breit ist. */
.vmw-seite .vmw-paket__liste[data-vmw-pakete="1"] .vmw-paketkarte {
	flex: 1 1 auto;
}

.vmw-seite .vmw-paketkarte__text {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

/* Der Fuss haengt unten, damit die Knoepfe dreier verschieden langer Karten
   auf einer Linie stehen. Er ist eine eigene Huelle und nicht nur eine
   Regel an der Kaufzeile: `margin-top: auto` wirkt am letzten Flex-Kind,
   und Preis und Kaufzeile sind zwei. */
.vmw-seite .vmw-paketkarte__fuss {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: auto;
	padding-top: 6px;
}

.vmw-seite .vmw-paketkarte__titel {
	font-family: var(--vmw-serif);
	font-size: var(--vmw-schrift-h3);
	font-weight: 400;
	line-height: 1.25;
	color: #FFFFFF;
}

/* "2 weiß · 1 rot" mit den Farbpunkten der Kachel. Sie steht ueber der
   Weinliste: bei drei sichtbaren Weinen von sechs sagt erst die Verteilung,
   woraus das Paket besteht, und dann folgen die Namen. */
.vmw-seite .vmw-paketkarte__verteilung {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.92);
}

/* Der Aufklapp-Knopf unter der Weinliste. Ein Textlink in Knopfform, kein
   zweiter Kaufknopf -- er holt Inhalt, er fuehrt nicht weg. Das Fingerziel
   kommt aus `min-height`, nicht aus dem Polster: so bleibt die Schrift an
   der Liste darueber und die Flaeche trotzdem 44px hoch. */
.vmw-seite .vmw-paket__mehr {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	min-height: 44px;
	font-size: 13px;
	font-weight: 600;
	color: #FFFFFF;
	text-decoration: underline;
	text-underline-offset: 4px;
	cursor: pointer;
}

.vmw-seite .vmw-paket__mehr:hover,
.vmw-seite .vmw-paket__mehr:focus {
	color: var(--vmw-eyebrow-dunkel);
}

/* Auf der Karte ist die Kuration ein Untertitel und kein Vorspann. */
.vmw-seite .vmw-paketkarte .vmw-paket__kuration {
	font-size: var(--vmw-schrift-karte);
	line-height: 1.55;
	max-width: none;
	color: rgba(255, 255, 255, 0.86);
}

/* Der Bildkasten IN der Karte. Er ist derselbe Block wie bisher
   (`paket-bild.php`), nur flacher -- 150px statt 280, weil darunter auf
   290px Breite noch Titel, Satz, Verteilung, drei Weine, Preis und zwei
   Knoepfe stehen. */
.vmw-seite .vmw-paketkarte .vmw-paket__bild--flaschen {
	min-height: 150px;
}

.vmw-seite .vmw-paketkarte .vmw-paket__flaschen {
	height: 118px;
	margin-top: 16px;
}

.vmw-seite .vmw-paketkarte .vmw-paket__zaehler {
	top: 12px;
	left: 14px;
}


/* DAS BILD STEHT ZUERST -- und zwar ohne `order` (19.09.2026).

   Bis zum Vormittag desselben Tages stand hier `order: 0` gegen die
   `order`-Regeln von `.vmw-paket__inhalt`. Beides ist entfallen: der
   Bildkasten ist jetzt das erste Kind SEINER KARTE, und eine Reihenfolge,
   die schon aus dem Markup folgt, gehoert nicht ins Stylesheet. */
.vmw-seite .vmw-paket__bild {
	position: relative;
	aspect-ratio: 16 / 11;
	border-radius: var(--vmw-radius-bild);
	overflow: hidden;
}

/* DER HELLE KASTEN MIT DEN DREI FLASCHEN.

   Der Packshot fuellt seinen Kasten und braucht keinen Grund; das
   Arrangement steht auf einem. `#F5EDF1` ist der Wert des Entwurfs -- ein
   sehr helles Rose, auf dem `mix-blend-mode: multiply` die weissen
   Freisteller der Flaschenfotos verschwinden laesst, ohne dass jemand sie
   freistellen musste. Auf Weiss saehe man die Kanten der Fotos. */
.vmw-seite .vmw-paket__bild--flaschen {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: auto;
	min-height: 280px;
	background: #F5EDF1;
}

.vmw-seite .vmw-paket__flaschen {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 100%;
	height: 215px;
	margin-top: 24px;
	mix-blend-mode: multiply;
}

/* 42 Prozent je Flasche, die mittlere 49 -- und beide Nachbarn schieben sich
   mit negativem Rand darunter. Das ist die Staffelung des Entwurfs: drei
   Flaschen, die einander beruehren, statt drei Bilder nebeneinander. */
.vmw-seite .vmw-paket__flasche {
	position: relative;
	flex-shrink: 0;
	width: 42%;
	max-height: 100%;
	height: auto;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.vmw-seite .vmw-paket__flasche:first-child {
	z-index: 1;
	transform: rotate(-10deg) translate(24px, 10px);
}

.vmw-seite .vmw-paket__flasche:nth-child(2) {
	z-index: 3;
	width: 49%;
	margin-inline: -15%;
	transform: translateY(-16px);
}

.vmw-seite .vmw-paket__flasche:nth-child(3) {
	z-index: 2;
	transform: rotate(10deg) translate(-24px, 10px);
}

/* Die beiden Plaketten. Sie stehen IM Kasten und tragen deshalb die
   Beerenfarbe auf Hell -- nicht Weiss wie der Rest der Sektion. */
.vmw-seite .vmw-paket__zaehler,
.vmw-seite .vmw-paket__notiz {
	position: absolute;
	z-index: 4;
	font-size: var(--vmw-schrift-label);
	letter-spacing: var(--vmw-sperrung-label);
	text-transform: uppercase;
	color: var(--vmw-beere);
	font-weight: 700;
}

.vmw-seite .vmw-paket__zaehler {
	top: 19px;
	left: 20px;
}

.vmw-seite .vmw-paket__notiz {
	right: 20px;
	bottom: 19px;
	left: 20px;
	text-align: center;
}

.vmw-seite .vmw-paket__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vmw-seite .vmw-paket__kuration {
	font-size: 16px;
	line-height: 1.55;
	max-width: 56ch;
	color: rgba(255, 255, 255, 0.9);
}

.vmw-seite .vmw-paket__weine {
	border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.vmw-seite .vmw-paketwein {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	padding: 11px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.vmw-seite .vmw-paketwein:last-child {
	border-bottom-color: rgba(255, 255, 255, 0.25);
}

.vmw-seite .vmw-paketwein__menge {
	font-size: 13px;
	font-weight: 700;
	color: var(--vmw-eyebrow-dunkel);
}

.vmw-seite .vmw-paketwein__name {
	font-size: 16px;
	font-weight: 600;
	color: #FFFFFF;
}

.vmw-seite .vmw-paketwein__name a {
	color: inherit;
}

/* Eigene Zeile statt Anhaengsel: die Kleinzeile traegt seit dem 19.09.2026
   Jahrgang, Geschmack und Fuellmenge und waere hinter dem Namen zu lang. */
.vmw-seite .vmw-paketwein__jahr {
	display: block;
	margin-top: 1px;
	font-size: 12px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.7);
}

/* `display: block`, weil die Notiz seit dem 19.09.2026 INNERHALB der
   Namensspalte steht und nicht mehr als eigenes Gitterkind. Ohne das
   stuende sie hinter der Kleinzeile in derselben Zeile. */
.vmw-seite .vmw-paketwein__notiz {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.75);
	font-weight: 400;
}

.vmw-seite .vmw-paket__preis {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 12px;
}

/* "6 Flaschen · 4,5 l" -- gehoert zum Betrag und steht deshalb unmittelbar
   darunter, nicht im Kleingedruckten unter dem Knopf. */
.vmw-seite .vmw-paket__menge {
	margin-top: 2px;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.8);
}

/* 32px statt 36/42: der Kunde fand den Betrag am 09.09.2026 zu gross. Bei
   42px stand er ueber der H2 der eigenen Sektion (40px) und 61 Prozent ueber
   dem Kachelpreis (26px), der als einziger Preis eine Spez-Deckung hat.

   `font-weight` steht hier, damit der Elementor-Regler „Betrag“ ihn schlagen
   kann. Der Tuersteher gegen Woodmarts `.amount { font-weight: 600 }` sitzt
   weiter oben an `.vmw-seite .amount`; ohne den waere diese Zeile hier
   wirkungslos, weil das aeussere Element das innere nur vererbt. */
.vmw-seite .vmw-paket__betrag {
	font-family: var(--vmw-serif);
	font-size: 32px;
	font-weight: 400;
	line-height: 1;
	color: #FFFFFF;
}

/* Untergeordnet ueber Groesse und Durchstreichung, nicht ueber Transparenz.

   Am 08.09.2026 wurde hier eine `opacity: 0.6` entfernt, weil der Kunde den
   Vergleichspreis ausgewaschen fand -- und er fand ihn danach immer noch
   ausgewaschen. Am 09.09.2026 gemessen: es lag nie an der Deckkraft, sondern
   an der Farbe der ZAHL. Das `<span class="amount">` in diesem `<del>` bekam
   von Woodmart rgb(164,64,112), und dieses Weiss hier erreichte es nie. Der
   Tuersteher dafuer steht oben an `.vmw-seite .amount`.

   Zur Sicherheit nachgesehen: unter den 73 Stylesheets der ausgelieferten
   Seite setzt keines eine Deckkraft auf ein nacktes `del`. Die beiden
   Fundstellen (`.woosb-price del`, `.woobt-price del`) brauchen einen
   Vorfahren, den unser Markup nicht hat. */
.vmw-seite .vmw-paket__streich {
	font-size: 15px;
	color: #FFFFFF;
	font-family: var(--vmw-serif);
}

/* Die Ersparnis stand bis zum 09.09.2026 als gelbe Pille in der Preiszeile.
   Der Kunde wollte sie anders: eigene Zeile, keine Fremdfarbe. 15px wie der
   Streichpreis daneben und ueber den 13px der Metazeile darunter; 600 gibt
   ihr die Betonung zurueck, die vorher die Fuellung getragen hat. */
.vmw-seite .vmw-paket__ersparnis {
	font-size: 15px;
	font-weight: 600;
	color: #FFFFFF;
}

/* Klein und ohne eigenes Gewicht: das Wort traegt nichts, es ordnet nur die
   beiden Zahlen zueinander. Ein blosses `<del>` wird von den meisten
   Screenreadern nicht angesagt -- ohne dieses Wort liest sich die Zeile als
   „133 Euro 143 Euro“. */
.vmw-seite .vmw-paket__statt {
	font-size: 15px;
	color: #FFFFFF;
	font-family: var(--vmw-serif);
}

/* `flex-start` statt `center` (10.09.2026). Die Zentrierung hat allein die
   beiden Absaetze darin getroffen: `.vmw-paket__knoepfe` traegt
   `align-self: stretch`, und die Knoepfe selbst haengen nicht direkt hier,
   sondern in `__knoepfe` bzw. `__kauf`. Uebrig blieb die Metazeile -- sie
   stand mittig unter einem linksbuendigen Preis, gemessen 125px aus der
   Flucht. Der Kunde hat das am 10.09.2026 gemeldet.
   Der Wert steht jetzt in der Grundfassung: mobile-first heisst, dass hier
   das Handy steht, und der 768er-Block hatte ihn seit dem 08.09.2026
   schon -- nur der Mobilzweig wurde damals nicht mitgezogen. */
.vmw-seite .vmw-paket__aktion {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.vmw-seite .vmw-paket__aktion .vmw-knopf {
	align-self: stretch;
}

/* Zwei Ausgaenge statt einem (08.09.2026): "In den Warenkorb" und "Paket
   ansehen". Der Kaufknopf steckt in einem <form>, damit er ohne Skript
   funktioniert -- die beiden Knoepfe bekommen deshalb eine eigene Reihe und
   haengen nicht direkt in `.vmw-paket__aktion`, wo seit dem 08.09.2026
   darueber die Fussnote und der Ausverkauft-Hinweis stehen. */
.vmw-seite .vmw-paket__knoepfe {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-self: stretch;
}

.vmw-seite .vmw-paket__kauf {
	display: flex;
	flex-direction: column;
}

/* Auch hier deckend: die Zeile traegt den Grundpreis, also eine
   Pflichtangabe. Die stellt man nicht auf 65 Prozent. */
.vmw-seite .vmw-paket__note,
.vmw-seite .vmw-paket__ausverkauft {
	font-size: 13px;
	color: #FFFFFF;
}

/* ------------------------------------------------------------------ */
/* 9  Herkunft                                                         */
/* ------------------------------------------------------------------ */

.vmw-seite .vmw-herkunft {
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding-bottom: 0;
}

/* Derselbe Fall wie bei `.vmw-ueber__kopf`: bis zum 03.09.2026 stand die
   einzige Regel im 768er-Block, darunter war es ein Block ohne `gap` —
   Einleitung und Bild beruehrten sich auf dem Handy ohne Abstand. */
.vmw-seite .vmw-herkunft__kopf {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.vmw-seite .vmw-herkunft__einleitung {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* DER LEITSATZ STATT DER ORTSZEILE (19.09.2026, Entwurf V5).

   Hier stand bis dahin „Ort · Region · Land" in Grau, 13px, halbfett. Der
   Ort stand damit dreimal auf derselben Seite: in der Eyebrow des Hero,
   hier, und noch einmal im ersten Fakt zwei Bloecke weiter unten. Die
   Region ist in den Fakt gewandert, die Zeile ersatzlos entfallen.

   An ihrer Stelle steht ein Satz in Serifenschrift und Beere. Er ist der
   einzige Ort der Sektion, an dem in EINEM Satz steht, wofuer das Weingut
   arbeitet -- der Fliesstext darunter erzaehlt, der Satz benennt.

   Nicht `.vmw-lead-serif`: die Klasse gibt es, sie steht aber auf dem
   Beerenband der Ueber-Sektion und traegt deshalb Weiss. */
.vmw-seite .vmw-herkunft__lead {
	font-family: var(--vmw-serif);
	font-size: var(--vmw-schrift-lead);
	line-height: 1.5;
	color: var(--vmw-beere);
}

/* --- Die Faktenreihe --------------------------------------------- */

/* OHNE SENKRECHTE TRENNSTRICHE (14.09.2026 abgewaehlt).

   Sie hingen an der ANZAHL der Fakten, nicht an einer festen Zahl:
   `.vmw-fakt:nth-child(2n)` setzte schmal einen Strich in die Mitte,
   `:nth-child(-n + 2):nth-last-child(n + 3)` eine Querlinie, wenn es drei
   oder vier waren, und breit trug jeder Fakt ab dem zweiten einen links.
   Bei zwei gepflegten Fakten sah die Reihe deshalb anders aus als bei vier.

   SEIT DEM 21.09.2026 AUCH OHNE OBER- UND UNTERLINIE (Kundenwunsch). Die
   beiden Linien waren am 14.09. geblieben, um "das gehoert zusammen" zu
   sagen; mit den Linien der Zertifikate darunter und der Flaeche des Zitats
   waren es am Ende vier Querlinien in einer Sektion. Das `padding-block`,
   das nur die Linien von der Schrift fernhielt, ist mit ihnen gegangen --
   den Abstand zu Kopf und Karten traegt allein der Sektionsabstand.

   Der Abstand macht die Trennung: `gap: 0 44px` breit, schmal
   `20px 24px`. Ohne Striche braucht es mehr davon, sonst laufen
   „Löss & Kalk" und „Riesling & Burgunder" ineinander.

   Sie hiess bis zum 15.09.2026 `.vmw-hero__fakten` und stand unter dem
   Vollbild-Hero. */
.vmw-seite .vmw-fakten {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 24px;
}

/* `min-width: 0` an jedem Fakt: ein Gitterkind wird sonst nie schmaler als
   sein laengstes Wort, und „Botschaftersortiment" spraengte die Spalte. */
.vmw-seite .vmw-fakt {
	min-width: 0;
}

/* DIE WERTE DES ENTWURFS V5 (19.09.2026).

   Drei Dinge haben sich geaendert, und jedes einzeln: Gewicht 700 -> 600,
   Sperrung 0,14em -> 0,055em schmal (0,09em breit), und der Abstand zum Wert
   steht jetzt am LABEL statt am Wert. Das letzte ist kein Geschmack: mit
   `margin-top` am Wert haette ein Fakt OHNE Beschriftung -- den es gibt,
   `herkunft_fakten()` laesst eine leere Beschriftung ausdruecklich zu --
   oben einen Abstand zu nichts.

   Die 700 bei 0,14em war die Sperrung der Eyebrow. Auf Versalien dieser
   Groesse liest sich das wie eine zweite Rubrik; die Reihe ist aber eine
   Auskunft und keine Ueberschrift. */
.vmw-seite .vmw-fakt__label {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 7px;
	font-size: var(--vmw-schrift-label);
	font-weight: 700;
	letter-spacing: var(--vmw-sperrung-label);
	text-transform: uppercase;
	color: var(--vmw-ink);
}

/* Die Groesse steht hier und nicht nur am `<svg>`: die Vorlage gibt EINE
   Zahl mit (16), V5 will schmal 15 und breit 16. Das CSS schlaegt die
   Attribute, ohne dass die Vorlage zwei Faelle kennen muss. */
.vmw-seite .vmw-fakt__label .vmw-icon {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	color: var(--vmw-rose);
}

.vmw-seite .vmw-fakt__wert {
	font-size: var(--vmw-schrift-text);
	line-height: 1.5;
	color: var(--vmw-ink);
	overflow-wrap: break-word;
}

/* GENAU EIN FAKT IST EIN WEG -- das Sortiment.

   Das Fingerziel entsteht ueber `padding-block` mit gleich grossem negativem
   `margin-block`: die anklickbare Flaeche waechst um 10px ueber die
   Zeilenhoehe hinaus, die Zeile selbst bleibt, wo sie ist. Ohne das negative
   Gegenstueck schoebe der Link den vierten Fakt gegenueber den drei anderen
   nach unten. */
.vmw-seite .vmw-fakt__weg {
	display: inline-block;
	padding-block: 5px;
	margin-block: -5px;
	color: var(--vmw-beere);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* --- Das Portraetfoto -------------------------------------------- */

/* QUADRATISCH, MIT EINER ZEILE IM BILD (19.09.2026, Entwurf V5).

   Das Format war 4/3 schmal und eine feste Mindesthoehe von 440px breit. Es
   ist jetzt an beiden Breiten dasselbe Quadrat -- eine Zahl weniger, die
   auseinanderlaufen kann, und die Registry ist mitgezogen (ratio 1.00).

   `overflow: hidden` HAELT DAS VERHAELTNIS und ist kein Zierrat: gemessen
   stand der Kasten am 19.09.2026 auf 291,7 statt 262,5px bei 390px
   Fensterbreite. Das Foto ist 1200x1000, und 350 x 1000/1200 = 291,7 -- es
   stand also in seiner natuerlichen Hoehe. An einem Flex- oder Gitterkind
   gilt die automatische Mindestgroesse `min-height: auto` und hebt den
   Kasten ueber die `aspect-ratio` hinweg mit; sie entfaellt erst, wenn
   `overflow` nicht `visible` ist. Dieselbe Sache wie bei
   `.vmw-nachbar__bild` (Abschnitt 11).

   `isolation: isolate` haelt Verlauf und Zeile in einem eigenen
   Stapelkontext. */
.vmw-seite .vmw-herkunft__bild {
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
	isolation: isolate;
	border-radius: 7px;
	background: var(--vmw-flaeche);
}

/* DIE ZEILE LIEGT IM BILD, NICHT DARUNTER -- Zeichen fuer Zeichen dieselben
   Werte wie bei `.vmw-ueber__bild` (Abschnitt 10). Der Verlauf sitzt auf dem
   unteren Drittel und nicht auf dem ganzen Bild: ein durchgehender Schleier
   nimmt dem Motiv die Farbe, ein Verlauf nur dort, wo Schrift steht. */
.vmw-seite .vmw-herkunft__bild::after {
	content: "";
	position: absolute;
	inset: 65% 0 0;
	background: linear-gradient(transparent, rgba(30, 20, 25, 0.65));
	pointer-events: none;
}

.vmw-seite .vmw-herkunft__bildzeile {
	position: absolute;
	right: 16px;
	bottom: 17px;
	left: 19px;
	z-index: 1;
	font-size: var(--vmw-schrift-fein);
	line-height: 1.5;
	color: #FFFFFF;
}

/* --- Die beiden Karten ------------------------------------------- */

/* SIE HIESSEN BIS ZUM 19.09.2026 `.vmw-wechsel` UND WAREN ZWEI VOLLE ZEILEN.

   Bild neben Text, im Wechsel links und rechts -- das war auf dieser Sektion
   der eigentliche Laengentreiber. Entwurf V5 stellt sie nebeneinander, Bild
   ueber Text, und braucht dafuer eine Zeile statt zweier.

   Mit dem Umbau faellt eine Regel ersatzlos weg, die nie das getan hat, was
   ihr Kommentar behauptete: `.vmw-wechsel:nth-of-type(even) .vmw-wechsel__bild
   { order: 2 }` sollte die ZWEITE Zeile drehen. `nth-of-type` zaehlt aber
   alle `<div>`-Geschwister, und in dieser Sektion standen Kopf (1), Zeile
   eins (2), Zeile zwei (3) und Band (4) -- gedreht hat sich also die erste. */
.vmw-seite .vmw-karten {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 25px;
}

.vmw-seite .vmw-karte {
	min-width: 0;
}

/* 1600/920 ist die in der Registry hinterlegte Vorgabe (1,74:1) und steht
   hier als Verhaeltnis statt als feste Hoehe: eine Zahl in Pixeln waere bei
   jeder anderen Spaltenbreite falsch. `overflow: hidden` aus demselben Grund
   wie am Portraetfoto. */
.vmw-seite .vmw-karte__bild {
	aspect-ratio: 1600 / 920;
	overflow: hidden;
	margin-bottom: 15px;
	border-radius: 7px;
	background: var(--vmw-flaeche);
}

.vmw-seite .vmw-karte__text {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Der Text der beiden Karten ist KARTENTEXT, nicht Fliesstext -- eine Stufe
   kleiner als das Portraet darueber, so wie die Angebote der Erlebnis-Leiste
   und die Zertifikate. Bis zum 21.09.2026 stand er als einziger Kartentext
   in voller Fliesstextgroesse (16px) neben 14 und 15. */
.vmw-seite .vmw-karte__text .vmw-fliesstext {
	font-size: var(--vmw-schrift-karte);
	line-height: 1.55;
}

/* --- Das Zitat --------------------------------------------------- */

/* LINKSBUENDIG AUF DER FLAECHE (19.09.2026, Entwurf V5).

   Es stand bis dahin zentriert zwischen Ober- und Unterlinie, in Ink. Beides
   ist entfallen: zentrierter Fliesstext liest sich auf Handybreite an jeder
   Zeile neu ein, und die Flaeche leistet die Absetzung ohne Linie. Seit dem
   21.09.2026 traegt die ganze Sektion keine Trennlinie mehr.

   Die Farbe wechselt mit: das Zitat steht jetzt in Beere und ist damit
   sichtbar eine Stimme und kein Absatz. `max-width: 880px` statt `34ch` --
   eine Zeichenbreite traegt bei 23px anders als bei 19px.

   Es steht seit demselben Tag NACH den beiden Karten. */
.vmw-seite .vmw-buehne {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 23px 22px;
	border-radius: 7px;
	background: var(--vmw-flaeche);
}

.vmw-seite .vmw-buehne__zitat {
	font-family: var(--vmw-serif);
	font-style: italic;
	font-size: 20px;
	line-height: 1.5;
	max-width: 880px;
	margin: 0;
	color: var(--vmw-beere);
}

.vmw-seite .vmw-buehne__quelle {
	font-size: var(--vmw-schrift-fein);
	color: var(--vmw-muted-hell-text);
}

/* --- Zertifikate und Qualitaetssignale --------------------------- */

/* DIE UEBERSCHRIFT IST SEIT DEM 19.09.2026 SICHTBAR.

   `zertifikate_label` -- gepflegt, Vorgabewert „Zertifikate &
   Qualitätssignale" -- stand bis dahin nur als `aria-label` an der Liste.
   Fuer Sehende begann die Reihe damit ohne Ansage mitten in der Sektion.

   Die Huelle `.vmw-signale` trug bis zum 21.09.2026 eine Oberlinie samt
   Polster; beides ist mit den uebrigen Linien der Sektion entfallen. Sie
   bleibt als Klammer um Ueberschrift und Liste und bringt ab 768px ihren
   Einzug mit. Die Liste behaelt ihre Klasse, weil sechs Elementor-Regler
   darauf zeigen.

   Die Ueberschrift ist ein <h3>, aber ein LABEL und keine Titelzeile --
   deshalb Jost und ausdruecklich gesetzt. Ohne `font-family` erbte sie bis
   zum 21.09.2026 die Schrift des Themes. */

.vmw-seite .vmw-signale__titel {
	margin-bottom: 18px;
	font-size: var(--vmw-schrift-label);
	font-weight: 700;
	letter-spacing: var(--vmw-sperrung-label);
	text-transform: uppercase;
	color: var(--vmw-muted-hell-text);
	font-family: var(--vmw-sans);
}

.vmw-seite .vmw-zertifikate {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* SCHMAL EINE LISTE, BREIT DREI SPALTEN.

   Die Trennlinien zwischen den Zeilen und die Polster, die sie trugen, sind
   am 21.09.2026 entfallen; den Abstand gibt jetzt `gap` an der Liste. Damit
   wirkt auch der Abstandsregler des Bausteins (blocks.php) schmal -- vorher
   kam er zu den 40px Zeilenpolster hinzu.

   Das Zeichen steht schmal links neben der ganzen Zeile, breit ueber dem
   Text -- beides Entwurf V5. Der 40px-Kreis mit Rand ist entfallen; das
   Zeichen steht jetzt frei und 26px gross. Ein Kreis um jedes Signal war
   eine dritte Rahmenform neben Karte und Flaeche. */
.vmw-seite .vmw-zertifikat {
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr);
	column-gap: 14px;
	align-items: start;
}

.vmw-seite .vmw-zertifikat__zeichen {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	margin-top: 2px;
	color: var(--vmw-beere);
}

.vmw-seite .vmw-zertifikat__text {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.vmw-seite .vmw-zertifikat__kategorie {
	font-size: var(--vmw-schrift-label);
	font-weight: 700;
	letter-spacing: var(--vmw-sperrung-label);
	text-transform: uppercase;
	color: var(--vmw-muted-hell-text);
}

.vmw-seite .vmw-zertifikat__titel {
	font-size: var(--vmw-schrift-h3);
	font-weight: 400;
	line-height: 1.25;
	color: var(--vmw-ink);
	font-family: var(--vmw-serif);
}

.vmw-seite .vmw-zertifikat__beschreibung {
	font-size: var(--vmw-schrift-karte);
	line-height: 1.55;
	color: var(--vmw-muted);
}

/* Das Abschlussband liegt vollbreit — es beendet die Sektion, deshalb
   traegt sie unten kein eigenes Polster.

   LINKSBUENDIG SEIT DEM 22.09.2026. Das Band war an jeder Breite zentriert
   und las sich dadurch wie eine eigene kleine Sektion mitten in einer
   Seite, die sonst durchgehend linksbuendig ist. Der Kunde hat es
   zusammen mit Paket und FAQ auf links gestellt.

   Die Flaeche bleibt vollbreit -- der negative Rand und das Polster sind
   davon unberuehrt. Nur der Inhalt darin beginnt jetzt an derselben Kante
   wie der Rest der Herkunft-Sektion. `.vmw-handschrift__satz` behaelt
   seine `max-width: 32ch`; ohne `align-items` gilt `stretch`, der Satz
   endet also an dieser Grenze statt am letzten Buchstaben.

   AB 1025PX WIEDER MITTIG (24.09.2026, Runde 16). Auf dem Desktop steht
   das Band seitdem wieder zentriert, zusammen mit der schmalen, mittigen
   Zitatbox darueber -- beide im Block "Runde 16" am Dateiende. Schmal und
   auf dem Tablet bleibt es links. Paket und FAQ bleiben ueberall links. */
.vmw-seite .vmw-handschrift {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 4px calc(var(--vmw-gutter) * -1) 0;
	padding: 36px var(--vmw-gutter) 40px;
	background: var(--vmw-flaeche);
}

.vmw-seite .vmw-handschrift__satz {
	font-family: var(--vmw-serif);
	font-size: var(--vmw-schrift-lead);
	line-height: 1.5;
	max-width: 32ch;
	color: var(--vmw-ink);
}

/* ------------------------------------------------------------------ */
/* 10  Über Vinomeet                                                   */
/* ------------------------------------------------------------------ */

.vmw-seite .vmw-ueber {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Der Kopfbereich muss AUCH unter 768 px ein Flex-Container sein.
   Bis zum 03.09.2026 stand seine einzige Regel im 768er-Block; darunter war
   er ein gewoehnlicher Block. In einem Block sind `order` und `gap`
   wirkungslos — ohne Fehler, ohne Warnung. Zwei Dinge gingen dadurch schief:
   die fuenf Reihenfolge-Regeln unten feuerten nie (das Bild landete ganz
   unten statt hinter dem Vorspann), und der ganze Textblock stand ohne
   Zeilenabstand, weil p, h2 und ul oben auf `margin: 0` gesetzt sind.

   16px, weil das der mobile Abstand von `.vmw-ueber` und `.vmw-paket` ist.
   Die Ausrichtung bleibt bewusst auf dem Vorgabewert `stretch`: dadurch geht
   der Knopf ueber die volle Breite, so wie in Hero, Paket und FAQ. */
.vmw-seite .vmw-ueber__kopf {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* WARUM `display: contents` HIER BLEIBT
   Unter 768 px stehen Vorspann, Bild und Fliesstext ineinander verschraenkt:
   Eyebrow, Ueberschrift, Vorspann, BILD, dann Text, Punkte, Knopf. Ab 768 px
   sitzt derselbe Text als GESCHLOSSENER Block links neben dem Bild.

   Beides zugleich geht nur, wenn die Textbox mobil verschwindet und ihre
   Kinder Geschwister des Bildes werden — genau das leistet `display:
   contents`. Der Plan sah vor, diese Zeile zu loeschen und die Reihenfolge
   ueber Elementor-Regler nachzubauen. Nachgerechnet am 03.09.2026: dafuer
   muesste die Struktur flach werden, und dann laesst sich der Textblock auf
   dem Desktop nicht mehr neben dem Bild zentrieren — ein Rasterelement, das
   alle Zeilen ueberspannt, zwingt die Zeilen auf seine Hoehe und zieht die
   Abstaende auseinander. Der Nachbau waere schlechter als der Bestand.

   Fuer den Theme Builder ist das kein Verlust: `display: contents` ist
   MECHANIK, keine Gestaltung — dieselbe Kategorie wie `grid-template` oder
   `aspect-ratio`, die aus demselben Grund keinen Regler bekommen. Der
   Container bleibt im Struktur-Panel anklickbar, seine Kinder auch. */
.vmw-seite .vmw-ueber__text {
	display: contents;
}

/* Seit dem 19.09.2026 ein `<figure>`: es traegt eine Bildunterschrift, und
   die gehoert mit dem Bild in dieselbe Klammer. `margin: 0`, weil ein
   `<figure>` von sich aus 40px seitlichen Rand mitbringt -- der stuende hier
   quer im Raster. */
.vmw-seite .vmw-ueber__bild {
	position: relative;
	order: 3;
	margin: 0;
	overflow: hidden;
	aspect-ratio: 16 / 11;
}

/* Das Motiv füllt den Rahmen, ohne über sein eigenes Hochformat die
   Sektionshöhe vorzugeben. Mobil bestimmt das Seitenverhältnis den Rahmen. */
.vmw-seite .vmw-ueber__bild > .vmw-bild {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* DIE ZEILE LIEGT IM BILD, NICHT DARUNTER.

   Darunter waere sie eine weitere Textzeile auf dem Beerenband und saehe aus
   wie ein Nachsatz zum Absatz daneben. Im Bild benennt sie das Motiv.

   Der Verlauf sitzt auf dem unteren Drittel und nicht auf dem ganzen Bild:
   ein durchgehender Schleier nimmt dem Motiv die Farbe, ein Verlauf nur dort,
   wo Schrift steht. Die Werte sind die des Entwurfs. */
.vmw-seite .vmw-ueber__bild::after {
	content: "";
	position: absolute;
	inset: 65% 0 0;
	background: linear-gradient(transparent, rgba(30, 20, 25, 0.65));
	pointer-events: none;
}

.vmw-seite .vmw-ueber__bildzeile {
	position: absolute;
	right: 16px;
	bottom: 17px;
	left: 19px;
	z-index: 1;
	font-size: var(--vmw-schrift-fein);
	line-height: 1.5;
	color: #FFFFFF;
}

/* Auffangregel. Sie zaehlt fuer den nativen Aufbau: dort sind die Kinder
   Elementor-Huellen, und `.vmw-punkte` oder `.vmw-knopf` sitzen erst DARIN.
   Die Regeln weiter unten traefen sie nicht mehr, und alles ohne eigene
   Reihenfolge spraenge nach vorn. Am Plugin-Weg aendert sie nichts: dessen
   Kinder tragen ihre Reihenfolge ohnehin alle selbst. */
.vmw-seite .vmw-ueber__text > * {
	order: 4;
}

.vmw-seite .vmw-ueber__text > .vmw-eyebrow {
	order: 0;
}

.vmw-seite .vmw-ueber__text > .vmw-h2 {
	order: 1;
}

.vmw-seite .vmw-ueber__text > .vmw-lead-serif {
	order: 2;
}

.vmw-seite .vmw-ueber__text > .vmw-fliesstext,
.vmw-seite .vmw-ueber__text > .vmw-punkte,
.vmw-seite .vmw-ueber__text > .vmw-knopf {
	order: 4;
}

/* Zwei Wege nebeneinander: ein gefuellter Knopf und ein Textlink. Schmal
   stehen sie untereinander, der Knopf ueber die volle Breite -- dieselbe
   Ordnung wie im Hero. */
.vmw-seite .vmw-ueber__wege {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
	order: 4;
	margin-top: 4px;
}

.vmw-seite .vmw-ueber__weg {
	align-self: center;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
}

.vmw-seite .vmw-punkte {
	border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.vmw-seite .vmw-punkt {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	gap: 16px;
	align-items: start;
	padding: 14px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.vmw-seite .vmw-punkt:last-child {
	border-bottom-color: rgba(255, 255, 255, 0.25);
}

.vmw-seite .vmw-punkt__zeichen {
	color: var(--vmw-eyebrow-dunkel);
	margin-top: 2px;
}

.vmw-seite .vmw-punkt__text {
	font-size: var(--vmw-schrift-text);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.82);
}

.vmw-seite .vmw-punkt__text strong {
	color: #FFFFFF;
	font-weight: 600;
}

.vmw-seite .vmw-erlebnis {
	margin-top: 20px;
	padding-top: 28px;
	border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.vmw-seite .vmw-erlebnis__kopf {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 20px;
}

/* ORT UND LINK IN EINER NORMALEN ZEILE (10.09.2026).

   Der Ort steckte bis dahin IM Eyebrow-Absatz und erbte dort Versalien,
   11px und 0,16em Sperrung -- gemessen 1,76px je Zeichen. "Erleben im Alten
   Winzerhof - Weisenheim am Berg" passt damit bei 402px Textbreite nicht in
   eine Zeile, und "BERG" stand allein. So loest es der Handy-Entwurf
   (`design/canvas/UeberBandMobil.dc.html`).

   Ab 768px loest sich dieser Absatz mit `display: contents` auf, der Ort
   wird direktes Kind der Kopfzeile und tritt in die Eyebrow zurueck -- wie
   im Desktop-Entwurf und wie bisher. Ausgegeben wird er dabei nur einmal. */
.vmw-seite .vmw-erlebnis__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.7);
}

/* Bis zum 10.09.2026 hatte diese Klasse KEINE einzige Regel und nur einen
   Elementor-Regler (`blocks.php:385`) -- einen Farbregler ohne Basisfarbe.
   `inherit` gibt ihr eine; der Regler kommt auf fuenf Einheiten und sticht
   sie weiterhin. */
.vmw-seite .vmw-erlebnis__ort {
	color: inherit;
}

/* Der Trenner steht im CSS und nicht im Text: schmal zwischen Ort und Link,
   ab 768px zwischen Eyebrow und Ort. Er sitzt am Ort und nicht am Link --
   im Link waere er unterstrichen und anklickbar. Pseudoelemente zaehlen bei
   der Einheiten-Grenze nicht mit. */
.vmw-seite .vmw-erlebnis__ort::after {
	content: "\00B7";
	margin-left: 6px;
	color: rgba(255, 255, 255, 0.45);
}

/* Ohne Link kein Trenner -- sonst endete die Zeile auf einem Mittelpunkt. */
.vmw-seite .vmw-erlebnis__ort:last-child::after {
	content: none;
}

.vmw-seite .vmw-erlebnis__punkte {
	display: flex;
	flex-direction: column;
}

.vmw-seite .vmw-erlebnispunkt:first-child {
	border-top: 0;
	padding-top: 0;
}

/* SCHMAL: ZEICHEN LINKS, ALLES ANDERE RECHTS DANEBEN.

   Der Entwurf setzt das Zeichen auf dem Handy in eine eigene schmale Spalte
   und laesst Titel, Text und Weg daneben laufen -- so bleibt die linke Kante
   der Schrift ueber alle drei Angebote hinweg dieselbe. Ab 768px steht es
   ueber dem Titel (Abschnitt 14).

   Bis zum 19.09.2026 stand das Zeichen INNERHALB einer Kopfzeile neben dem
   Titel, und der Titel war ein `<p>` in 16px. Jetzt ist er ein `<h3>`. */
.vmw-seite .vmw-erlebnispunkt {
	display: grid;
	grid-template-columns: 27px minmax(0, 1fr);
	column-gap: 15px;
	padding: 14px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.vmw-seite .vmw-erlebnispunkt > .vmw-icon {
	grid-column: 1;
	grid-row: 1 / 4;
	margin-top: 2px;
	color: var(--vmw-eyebrow-dunkel);
}

.vmw-seite .vmw-erlebnispunkt__titel {
	grid-column: 2;
	margin: 0 0 6px;
	font-family: var(--vmw-serif);
	font-weight: 400;
	font-size: var(--vmw-schrift-h3);
	line-height: 1.25;
	color: #FFFFFF;
}

.vmw-seite .vmw-erlebnispunkt__text {
	grid-column: 2;
	margin: 0 0 8px;
	font-size: var(--vmw-schrift-karte);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.78);
}

/* Der eigene Weg je Angebot. `margin-top: auto` schiebt ihn ab 768px an die
   Unterkante der Spalte, damit die drei Links auf einer Linie stehen, auch
   wenn die Texte verschieden lang sind. */
.vmw-seite .vmw-erlebnispunkt__weg {
	grid-column: 2;
	display: inline-flex;
	align-items: center;
	align-self: start;
	gap: 10px;
	min-height: 44px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 5px;
	color: #FFFFFF;
}

.vmw-seite .vmw-erlebnispunkt__weg:hover,
.vmw-seite .vmw-erlebnispunkt__weg:focus {
	color: var(--vmw-eyebrow-dunkel);
}

/* Der Satz rechts im Kopf der Leiste, wenn er gepflegt ist. */
.vmw-seite .vmw-erlebnis__claim {
	margin: 0;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.85);
}

/* ------------------------------------------------------------------ */
/* 11  Ähnliche Weingüter                                              */
/* ------------------------------------------------------------------ */

.vmw-seite .vmw-aehnliche {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.vmw-seite .vmw-aehnliche__kopf {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
}

.vmw-seite .vmw-aehnliche__zeile {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
}

.vmw-seite .vmw-aehnliche__karten {
	display: grid;
	gap: 16px;
}

.vmw-seite .vmw-nachbar {
	display: flex;
	flex-direction: column;
	background: #FFFFFF;
	border: 1px solid var(--vmw-linie);
	border-radius: var(--vmw-radius-karte);
	overflow: hidden;
}

/* `overflow: hidden` HAELT DAS SEITENVERHAELTNIS (19.09.2026).

   Ohne diese Zeile stand der Kasten auf der NATUERLICHEN Bildhoehe: gemessen
   581,3 statt 272,5 px bei 1440 px Fensterbreite, 464 statt 195,8 bei 390.
   Das Beitragsbild ist 900x1200, und 436 x 1200/900 = 581,3 -- das Bild stand
   also ungeschnitten da. `object-fit: cover` hat hier nie etwas beschnitten.

   Der Grund: `.vmw-nachbar` ist eine Spalten-Flexbox, der Kasten also ein
   Flex-Kind auf der Hauptachse. Dort gilt die automatische Mindestgroesse
   `min-height: auto`, und die richtet sich nach dem INHALT -- sie hebt den
   Kasten ueber die `aspect-ratio` hinweg mit. `height: 100%` am Bild kann
   nichts dagegen ausrichten, weil der Kasten zu diesem Zeitpunkt schon auf
   Inhaltshoehe steht. Sobald `overflow` nicht `visible` ist, entfaellt die
   automatische Mindestgroesse und das Verhaeltnis bestimmt wieder.

   Genau so loesen es `.vmw-ueber__bild` (Abschnitt 10) und `.vmw-kachel__bild`
   (Abschnitt 5) seit jeher; hier fehlte die Zeile als einzige. Die Alternative
   -- das Bild mit `position: absolute; inset: 0` aus dem Fluss nehmen -- misst
   auf die Nachkommastelle dasselbe und braucht zwei Deklarationen statt einer.

   Der Kasten traegt KEIN eigenes Radius; den Zuschnitt macht die Karte
   (`.vmw-nachbar`). Diese Zeile schneidet deshalb nur das Bild, nicht die
   Ecken. */
.vmw-seite .vmw-nachbar__bild {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--vmw-flaeche);
}

.vmw-seite .vmw-nachbar__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vmw-seite .vmw-chip--auf-bild {
	position: absolute;
	left: 14px;
	bottom: 14px;
}

.vmw-seite .vmw-nachbar__text {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1 1 auto;
	padding: 20px 22px 22px;
}

.vmw-seite .vmw-nachbar__ort {
	font-size: 13px;
	color: var(--vmw-muted);
}

.vmw-seite .vmw-nachbar__teaser {
	font-size: var(--vmw-schrift-text);
	line-height: 1.6;
	color: var(--vmw-ink);
}

.vmw-seite .vmw-nachbar__fuss {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--vmw-linie);
}

.vmw-seite .vmw-nachbar__sorten {
	font-size: 12px;
	line-height: 1.5;
	color: var(--vmw-muted);
}

.vmw-seite .vmw-nachbar__sorten strong {
	color: var(--vmw-ink);
	font-weight: 600;
}

/* Ohne Strich — die ganze Karte ist hier die Klickflaeche, ein Strich
   unter dem Text saehe nach zweitem Ziel aus.

   `text-decoration: none` statt `border-bottom: 0` seit dem 22.09.2026:
   die Klasse zieht ihren Strich jetzt aus `text-decoration` (Abschnitt 3).
   Wer hier nur die Unterkante zuruecknimmt, bekommt den Strich zurueck --
   und zwar still, denn die Regel sieht weiterhin richtig aus. */
.vmw-seite .vmw-nachbar__fuss .vmw-textlink {
	align-self: flex-start;
	text-decoration: none;
	transition: color var(--vmw-uebergang);
}

/* Damit faellt allerdings auch `.vmw-textlink:hover` aus, das nur die
   Unterkante einfaerbt — der Link war die einzige Klickflaeche der
   Nachbarkarten ohne jede Rueckmeldung. */
.vmw-seite .vmw-nachbar__fuss .vmw-textlink:hover {
	color: var(--vmw-beere-dunkel);
}

/* ------------------------------------------------------------------ */
/* 12  SEO-Text                                                        */
/* ------------------------------------------------------------------ */

.vmw-seite .vmw-seo {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.vmw-seite .vmw-seo__kopf {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.vmw-seite .vmw-seo__spalten {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.vmw-seite .vmw-seo__text {
	font-size: var(--vmw-schrift-text);
	line-height: 1.6;
}

.vmw-seite .vmw-seo__text strong {
	color: #FFFFFF;
	font-weight: 600;
}

.vmw-seite .vmw-panel {
	padding: 22px 24px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--vmw-radius-karte);
}

.vmw-seite .vmw-panel__sub {
	margin-top: 8px;
	margin-bottom: 18px;
	font-size: 14px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.7);
}

.vmw-seite .vmw-panel__links {
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.vmw-seite .vmw-panel__links li + li a {
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.vmw-seite .vmw-panel__links a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 0;
	font-size: 15px;
	font-weight: 600;
	color: #FFFFFF;
	transition: color var(--vmw-uebergang);
}

/* Diese Zeilen hatten als einzige Klickflaeche der Seite gar keine
   Rueckmeldung: der globale `a:hover` (0,2,1) verliert gegen den Selektor
   darueber (0,3,1), und eine eigene Regel gab es nicht. Der Hover geht auf
   den hellen Eyebrow-Ton — Weiss kann auf Weiss nichts zeigen. */
.vmw-seite .vmw-panel__links a:hover {
	color: var(--vmw-eyebrow-dunkel);
}

.vmw-seite .vmw-panel__pfeil {
	color: var(--vmw-eyebrow-dunkel);
}

/* ------------------------------------------------------------------ */
/* 13  FAQ                                                             */
/* ------------------------------------------------------------------ */

.vmw-seite .vmw-faq {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.vmw-seite .vmw-faq__kopf {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.vmw-seite .vmw-faq__liste {
	width: 100%;
	max-width: 880px;
	border-top: 1px solid var(--vmw-linie);
}

.vmw-seite .vmw-frage {
	border-bottom: 1px solid var(--vmw-linie);
}

.vmw-seite .vmw-frage__kopf {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	padding: 16px 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--vmw-ink);
	cursor: pointer;
	list-style: none;
	transition: color var(--vmw-uebergang);
}

.vmw-seite .vmw-frage__kopf:hover {
	color: var(--vmw-beere);
}

.vmw-seite .vmw-frage__kopf::-webkit-details-marker {
	display: none;
}

/* Das Zeichen ist Zierde — den Zustand meldet <details> selbst. */
.vmw-seite .vmw-frage__kopf::after {
	content: "+";
	flex: 0 0 auto;
	font-size: 20px;
	line-height: 1;
	color: var(--vmw-beere);
}

.vmw-seite .vmw-frage[open] > .vmw-frage__kopf::after {
	content: "–";
}

.vmw-seite .vmw-frage__antwort {
	padding: 0 34px 20px 0;
	font-size: var(--vmw-schrift-text);
	line-height: 1.6;
	color: var(--vmw-soft);
}

.vmw-seite .vmw-frage__antwort p + p {
	margin-top: 1em;
}

.vmw-seite .vmw-faq__abschluss {
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
	max-width: 880px;
	padding: 22px 24px;
	background: var(--vmw-flaeche);
	border-radius: var(--vmw-radius-karte);
}

.vmw-seite .vmw-faq__abschlusstext {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Auf dem Handy steht der Knopf zuerst, der Kontaktlink darunter. */
.vmw-seite .vmw-faq__abschlussaktion {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	gap: 14px;
}

.vmw-seite .vmw-faq__abschlussaktion .vmw-knopf {
	align-self: stretch;
}

/* DIE KONTAKTZEILEN (24.09.2026, Runde 16).

   Telefon mit Erreichbarkeit und der Abholort -- die Unternehmensangaben,
   mit denen der Kasten ab 1025px als Karte neben den Fragen steht. Das
   Zeichen haengt in einer eigenen Spalte, damit die zweite Zeile unter dem
   Text beginnt und nicht unter dem Zeichen. Kartentext-Groesse wie die
   Texte der anderen Karten; die Zeiten eine Stufe leiser darunter. */
.vmw-seite .vmw-faq__kontakt {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.vmw-seite .vmw-faq__kontaktzeile {
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr);
	column-gap: 10px;
	align-items: start;
	margin: 0;
	font-size: var(--vmw-schrift-karte);
	line-height: 1.5;
	color: var(--vmw-ink);
}

.vmw-seite .vmw-faq__kontaktzeile > .vmw-icon {
	margin-top: 2px;
	color: var(--vmw-beere);
}

/* `padding-block` an einem Inline-Element vergroessert nur die
   Trefferflaeche (22,5px Text + 2 x 11px = 44,5px, wie B4), die Zeile
   bleibt, wo sie ist. */
.vmw-seite .vmw-faq__telefon {
	padding-block: 11px;
	font-weight: 600;
	color: var(--vmw-ink);
	text-decoration: underline;
	text-decoration-color: var(--vmw-linie-2);
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.vmw-seite .vmw-faq__telefon:hover {
	color: var(--vmw-beere);
	text-decoration-color: currentColor;
}

.vmw-seite .vmw-faq__zeiten {
	display: block;
	color: var(--vmw-soft);
}

/* ------------------------------------------------------------------ */
/* 14  Breiten                                                         */
/* ------------------------------------------------------------------ */

/* Die Leiter richtet sich nach den Elementor-Haltepunkten der Site
   (md 768, lg 1025), damit die Winzerseite an denselben Stellen
   umbricht wie alles andere. Das Design definiert nur 390 und 1440;
   die Stufe dazwischen ist hier begruendet ergaenzt. */

@media (min-width: 768px) {

	/* Ab hier zeigt eine Maus auf die Filterleiste, kein Finger. Die
	   Bedienelemente duerfen wieder 40px hoch sein -- warum sie schmal 44
	   sind, steht bei der Vorgabe in Abschnitt 1. Die Regel haengt an
	   `.vmw-seite`, nicht an `:root`: die Vorgaben dieser Datei gehoeren der
	   Seite, und ein `:root` in einer Medienabfrage traefe auch alles
	   ausserhalb. */
	.vmw-seite {
		--vmw-knopf-s-hoehe: 40px;
		/* Die breite Haelfte der Schriftskala -- Begruendung in Abschnitt 1.
		   Meta, Fein, Label und Link bleiben an jeder Breite gleich. */
		--vmw-schrift-h2: 34px;
		--vmw-schrift-h3: 22px;
		--vmw-schrift-lead: 21px;
		--vmw-schrift-text: 16px;
		--vmw-schrift-karte: 15px;
	}

	/* DER SEITENRAND IST DER RAND DES THEMES (19.09.2026).

	   Hier stand `clamp(40px, 6.67vw, 96px)`, und ab 1401px setzte ein
	   eigener Block `(100vw - Container) / 2 + 96px`. Beides kam aus dem
	   Entwurf, und dort ist es richtig: im Entwurf laeuft der Kopf in
	   derselben `.wrap` wie der Inhalt und hat dieselben 72px Luft vor sich.

	   Auf Staging ist das anders. Woodmarts Kopf, Prefooter und Footer
	   laufen in `.container`: 1400px breit, zentriert, OHNE Polster -- die
	   15px Innenpolster kommen aus `.row`/`.col`. Die Inhaltskante des
	   Themes liegt damit bei `(Dokument - 1400) / 2 + 15`. Unsere lag bei
	   derselben Rechnung mit +96 statt +15. Gemessen am 19.09.2026 bei
	   Fenster 1884: Woodmarts Spalte 240,5 bis 1610,5, unser Hero 329 bis
	   1522 -- 88,5px zu weit innen, auf jeder Seite, bei jeder Breite. Die
	   Winzerseite floh sauber gegen einen Kopf, den es hier nicht gibt.

	   ZWEI SCHREIBWEISEN DERSELBEN ZAHL, und das ist Absicht.

	   `--vmw-gutter` rechnet mit `100vw` und ist damit um eine halbe
	   Rollbalkenbreite zu gross (7,5px bei 15px Rollbalken, 0 bei
	   ueberlagerten). Das Polster der Sektion rechnet gleich darunter mit
	   `100%` und ist exakt: ein Prozentwert loest dort gegen die
	   Dokumentbreite auf.

	   Fuer die randlosen Baender ergibt die Kombination genau das Richtige.
	   Sie ziehen mit dem zu grossen Wert 7,5px UEBER die Fensterkante hinaus
	   -- `.vmw-seite` schneidet das mit `overflow-x: clip` ab, zu weit ist
	   harmlos, zu kurz waere sichtbar -- und polstern innen um dieselben
	   7,5px zu viel. Ihr Inhalt steht damit exakt auf der Kante der Sektion
	   darueber.

	   In ein Custom Property gehoert `100%` deshalb NICHT: ein Prozentwert
	   wird beim VERBRAUCHER aufgeloest, und fuer ein Kind der Sektion waeren
	   100% deren Innenbreite statt der Dokumentbreite. Die Baender blieben
	   dann bei 15px stehen, statt bis an die Kante zu laufen. */
	.vmw-seite {
		--vmw-gutter: max(15px, calc((100vw - var(--vmw-container) + 30px) / 2));
		--vmw-sekt-oben: clamp(48px, 5vw, 72px);
		--vmw-sekt-unten: clamp(44px, 4.5vw, 64px);
		--vmw-radius-bild: 16px;
		font-size: 17px;
	}

	.vmw-seite .vmw-fliesstext--initiale > p:first-of-type::first-letter {
		font-size: 54px;
		padding: 6px 10px 0 0;
	}

	/* Die exakte Kante. Siehe die Begruendung oben bei `--vmw-gutter`:
	   `100%` loest hier gegen die Dokumentbreite auf und kennt den
	   Rollbalken, `100vw` nicht. Deshalb steht die Zahl zweimal da. */
	.vmw-seite .vmw-sektion,
	.vmw-seite .vmw-hero {
		padding-inline: max(15px, calc((100% - var(--vmw-container) + 30px) / 2));
	}

	/* --- Hero: zwei Spalten ---------------------------------------- */

	/* Nur die Hoehe: die seitliche Kante kommt aus der Regel darueber und
	   rechnet mit `100%`. Ein `padding`-Kurzwort hier zoege sie wieder auf
	   `--vmw-gutter` zurueck -- und das ist um den halben Rollbalken zu
	   gross. Genau so stand der Hero am 19.09.2026 7,5px neben dem
	   Sortiment darunter. */
	.vmw-seite .vmw-hero {
		padding-block: 22px 0;
	}

	.vmw-seite .vmw-hero__brotkrume {
		padding-bottom: 16px;
		font-size: 13px;
	}

	/* 1,08fr zu 1fr: der Text bekommt etwas mehr als die Haelfte. Das ist
	   die Aufteilung des abgenommenen Entwurfs und keine gerundete Zahl --
	   die Textspalte traegt Name, Einleitung, zwei Knoepfe und das Zitat,
	   die Bildspalte nur ein Motiv.

	   `align-items: stretch` ist der Vorgabewert und steht deshalb nicht
	   da; er ist aber der Grund, warum das Foto ohne feste Hoehe auskommt:
	   es zieht sich auf die Hoehe der Textspalte.

	   Radius und Rand kommen hier zurueck: schmal laeuft das Band von Kante
	   zu Kante, hier ist es wieder eine gerundete Flaeche im Satzspiegel. */
	.vmw-seite .vmw-hero__buehne {
		grid-template-columns: 1.08fr 1fr;
		margin: 0;
		border-radius: var(--vmw-radius-karte);
	}

	/* Gegenstueck zur Regel im Grundteil. Ohne diese Zeile gewinnt die
	   zweispaltige Vorgabe darueber -- gleiche Spezifitaet, spaeter in der
	   Datei --, und ein Winzer ohne Foto bekaeme eine leere zweite Spalte.
	   Genau das war bis zum 18.09.2026 der Fall. */
	.vmw-seite .vmw-hero__buehne--ohne-bild {
		grid-template-columns: minmax(0, 1fr);
	}

	/* DIE MEDIEN-HUELLE IST HIER DIE RECHTE SPALTE.

	   Bis zum 19.09.2026 stand hier `display: contents`: die Huelle loeste
	   sich auf, Foto und Zitat wurden unmittelbare Gitterkinder der Buehne,
	   und das Zitat konnte in die Textspalte unter eine Haarlinie ruecken.
	   Der Preis dafuer war, dass die Huelle weder Flaeche noch Radius noch
	   `overflow` tragen durfte -- alles davon waere hier ersatzlos verloren
	   gewesen.

	   Der Kunde hat am 19.09. das Zitat im Foto gewaehlt, an beiden Breiten.
	   Damit entfaellt der ganze Kunstgriff. Die Huelle bleibt eine Huelle,
	   wird von der Buehne in die zweite Spalte gesetzt (kein `grid-column`
	   noetig -- sie ist das zweite Kind) und darf wieder alles tragen.

	   360px statt der 400 des Entwurfs: der Hero soll flacher werden, und
	   seine Hoehe haengt jetzt an dieser Zahl statt am laengsten Text. */
	.vmw-seite .vmw-hero__medien {
		grid-template-rows: minmax(360px, 1fr);
	}

	/* 32 statt 42 und 10 statt 13: der Hero soll flacher werden, ohne dass
	   die Spalte gedraengt wirkt. Die Gitterlage steht nicht mehr da -- Text
	   und Medien-Huelle sind die einzigen beiden Kinder und finden ihre
	   Spalten von selbst. */
	.vmw-seite .vmw-hero__text {
		gap: 10px;
		padding: 32px 40px;
	}

	/* Das Zitat steht nicht mehr unter der Textspalte, sondern im Foto
	   daneben. Der Modifikator `--mit-zitat`, der hier das Unterpolster auf
	   0 setzte, hat damit keine Aufgabe mehr und ist aus `hero.php` raus. */

	.vmw-seite .vmw-hero__titel {
		max-width: 9em;
		font-size: clamp(43px, 4.5vw, 64px);
		line-height: 1.05;
		letter-spacing: -0.035em;
	}

	.vmw-seite .vmw-hero__lead {
		max-width: 31em;
		font-size: 17px;
		line-height: 1.6;
	}

	.vmw-seite .vmw-hero__ortszeile {
		display: block;
		margin-top: 2px;
		font-size: 13px;
		color: var(--vmw-muted);
	}

	.vmw-seite .vmw-hero__aktionen {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 15px 22px;
		margin-top: 14px;
	}

	.vmw-seite .vmw-hero__aktionen .vmw-knopf {
		align-self: auto;
	}

	/* Beide Knoepfe kommen zurueck. Schmal traegt die Leiste ihre Wege, hier
	   ist Platz fuer beides -- und der Entwurf zeigt sie. Jede der beiden
	   Zeilen nimmt genau eine Zeile aus dem Grundteil zurueck. */
	.vmw-seite .vmw-hero--mit-leiste .vmw-hero__aktionen {
		display: flex;
	}

	.vmw-seite .vmw-hero--mit-leiste.vmw-hero--eng .vmw-hero__zweitweg {
		display: inline-flex;
	}

	/* Gegenstueck zum Umriss-Knopf der Grundfassung. Jede Zeile hier nimmt
	   genau eine Zeile von dort zurueck; kommt dort eine dazu, muss sie hier
	   auch stehen. Die Werte sind ausgeschrieben und nicht ererbt:
	   `.vmw-textlink` und `.vmw-textlink--hell` haben dieselben zwei
	   Einheiten und stehen frueher in der Datei, sie wuerden verlieren.

	   Der Textlink ist seit dem 15.09.2026 beerefarben statt weiss -- er
	   steht neben dem Knopf auf der hellen Flaeche und nicht mehr auf dem
	   abgedunkelten Foto.

	   DER STRICH KOMMT AUS `text-decoration` UND NICHT AUS EINER LINIE
	   (20.09.2026). Genau die Regel im ersten Absatz wurde am 19.09.
	   verletzt: der Grundteil bekam `text-decoration: underline` dazu, hier
	   blieb die `border-bottom` stehen -- und der Kunde sah zwei Striche
	   untereinander. Es ist EINE Gestalt an beiden Breiten, also gehoert der
	   Strich an eine Stelle.

	   Seit dem 22.09.2026 traegt `.vmw-textlink` selbst keine Unterkante
	   mehr, sondern denselben Unterstrich. `border: 0` ist damit wirkungslos
	   geworden und steht nur noch als Schutz, falls Theme oder Kit von
	   aussen eine Kante setzen. Die Farbe des Strichs kommt hier aus der
	   Kurzform `text-decoration: underline` der Grundfassung, also
	   `currentColor` -- und nicht aus `--hell`, das ihn weiss faerben und
	   auf dieser hellen Flaeche unsichtbar machen wuerde.

	   `padding-bottom` bleibt ebenfalls -- es haelt den Abstand zur
	   Grundlinie in der Knopfreihe, den vorher die Linie mitbrachte. */
	.vmw-seite .vmw-hero__zweitweg {
		display: inline-flex;
		align-items: baseline;
		justify-content: flex-start;
		align-self: auto;
		min-height: 0;
		padding: 0 0 2px;
		border: 0;
		background: none;
		font-family: inherit;
		font-weight: 600;
		line-height: inherit;
		text-align: inherit;
		color: var(--vmw-beere);
	}

	.vmw-seite .vmw-hero__zweitweg:hover,
	.vmw-seite .vmw-hero__zweitweg:focus {
		color: var(--vmw-beere-dunkel);
	}

	/* DAS ZITAT LIEGT AUCH HIER IM FOTO.

	   Bis zum 19.09.2026 stand es in der Textspalte unter einer Haarlinie --
	   Entwurf V5, entschieden am 18.09. Dafuer brauchte es vier Regeln, die
	   nichts anderes taten, als aus einem Aufbau zwei zu machen: die
	   aufgeloeste Medien-Huelle, eine eigene Gitterzeile fuer das Zitat, die
	   `margin-inline: 40px` der Haarlinie und das abgegebene Unterpolster
	   der Textspalte. Dazu sieben Regeln, die den Schleier des Grundteils
	   wieder zuruecknahmen: Eyebrow weg, Zitat dunkel, Initialenkreis,
	   Name und Rolle zurueck auf Papier.

	   Elf Regeln sind eine geworden. Der Kunde hat am 19.09. das Zitat im
	   Foto gewaehlt, an beiden Breiten -- und damit erbt der Desktop
	   Schleier, weisse Schrift und Lage einfach aus dem Grundteil.

	   Freizone 88 statt 72px: das Foto ist hier hoeher, der Verlauf darf
	   sich mehr Zeit lassen. Die Fassung fuer langen Inhalt braucht drei
	   Klassen, sonst gewaenne die 56px-Regel des Grundteils. */
	.vmw-seite .vmw-hero__kuration {
		--vmw-freizone: 88px;

		padding: var(--vmw-freizone) 40px 28px;
	}

	.vmw-seite .vmw-hero--eng .vmw-hero__kuration {
		--vmw-freizone: 72px;
	}

	.vmw-seite .vmw-hero__zitat {
		font-size: 19px;
		line-height: 1.55;
	}

	.vmw-seite .vmw-person__foto,
	.vmw-seite .vmw-person__initialen {
		width: 39px;
		height: 39px;
	}

	.vmw-seite .vmw-person__initialen {
		font-size: 22px;
	}

	/* Das Foto braucht hier gar keine Regel mehr. Es liegt absolut in der
	   Medien-Huelle, genau wie schmal, und die Huelle sagt, wie hoch die
	   Spalte mindestens ist. Bis zum 19.09.2026 standen hier zwei Regeln,
	   die es aus der Huelle heraus in die zweite Gitterspalte der Buehne
	   setzten -- die Huelle gab es dort ja nicht mehr. */

	/* --- Sektionsleiste: groessere Reiter, Abstand zur Buehne ------- */

	/* 20px statt der 34 des Entwurfs, 56 statt 65 hoch: beides zahlt auf die
	   Bildschirmkante ein. Schmal sind es 0px -- dort schliesst das Band
	   unmittelbar an die Fotokante an und ist der Uebergang ins Sortiment.

	   56px bleiben ueber der WCAG-Untergrenze von 44px fuer ein Fingerziel. */
	.vmw-seite .vmw-hero__leiste {
		margin-top: 20px;
	}

	.vmw-seite .vmw-hero__reiter {
		gap: 32px;
		min-height: 56px;
	}

	.vmw-seite .vmw-hero__reiter > a {
		padding: 17px 0 14px;
		font-size: 14px;
	}

	.vmw-seite .vmw-hero__zaehler {
		min-width: 18px;
		height: 18px;
		font-size: 11px;
	}

	/* Sortiment: zwei Spalten, Kopf und Leiste nebeneinander. */
	.vmw-seite .vmw-sortiment {
		gap: 26px;
	}

	.vmw-seite .vmw-sortiment__kopf {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: 32px;
	}

	/* Hier erscheint der Fuss des Aufklappers: Hinweis links, Knopf mit der
	   Trefferzahl rechts. Er schliesst die zweite Zeile ab, so wie der
	   Fussknopf das Sheet abschliesst.

	   `width: 100%` und `order: 1`: die zweite Zeile ist ein umbrechender
	   Flex-Behaelter, in dem Segmente, Gruppen und Reset nebeneinander
	   stehen. Ohne beides saesse der Fuss als vierter Mitspieler in
	   derselben Reihe und schoebe den Reset in die naechste. */
	/* Breit nebeneinander: Hinweis links, Knopf mit der Trefferzahl rechts
	   (V5 `.refinement-finish`). Schmal steht er als Spalte -- siehe
	   Grundfassung.

	   `order` und `width: 100%` sind am 20.09.2026 ENTFALLEN. Sie standen
	   hier, weil die zweite Zeile ein umbrechender Flex-Behaelter war, in
	   dem Segmente, Gruppen und Fuss um denselben Platz stritten -- ohne
	   beides sass der Fuss als vierter Mitspieler in derselben Reihe. Die
	   Tafel ist jetzt eine Spalte; die Reihenfolge macht das Markup.

	   Die Trennlinie ist ebenfalls weg: sie ersetzte den Rahmen, den die
	   Tafel nicht hatte. Jetzt hat sie einen, und eine Linie 21px vor der
	   Kante waere eine zweite Aussage ueber dieselbe Grenze. */
	.vmw-seite .vmw-verfeinerung__fuss {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
	}

	.vmw-seite .vmw-verfeinerung__hinweis {
		font-size: 13px;
	}

	/* Der Einstiegskasten wird eine Reihe: Glas, Text, Hilfe-Link
	   nebeneinander auf einer Grundlinie. Jede Zeile hier nimmt genau eine
	   der Grundfassung zurueck -- kommt dort eine dazu, muss sie hier auch
	   stehen. */
	.vmw-seite .vmw-einstieg {
		flex-wrap: nowrap;
		align-items: center;
		gap: 15px;
		padding: 16px 0;
	}

	.vmw-seite .vmw-einstieg > .vmw-icon {
		width: 29px;
		height: 29px;
	}

	.vmw-seite .vmw-einstieg__text {
		flex: 1 1 0;
	}

	.vmw-seite .vmw-einstieg__satz {
		font-size: 15px;
	}

	/* Nur noch EINE Ruecknahme, seit die Hilfe-Zeile schmal dieselbe
	   Aufteilung traegt wie der Satz (22.09.2026): `margin-left` ist dort
	   schon 0 und der Schriftgrad schon 13px. Hier bleibt allein die
	   Mindesthoehe -- das Fingerziel braucht es breit nicht, und 44px
	   machten die Reihe sonst hoeher als ihren Inhalt.

	   Die 29px des Glases treffen das Sprechblasen-Zeichen nicht: der
	   Selektor oben ist `> .vmw-icon`, und das Zeichen steckt im `<a>`.
	   Breit stehen beide nebeneinander statt untereinander, dort ist die
	   kleinere Sprechblase die richtige Gewichtung. */
	.vmw-seite .vmw-einstieg__hilfe {
		min-height: 0;
	}

	/* Die Steuerzeile ist so hoch wie ihr Text. Die Mindesthoehe der
	   Grundfassung hielt Platz fuer den Handy-Oeffner frei, den es seit dem
	   20.09.2026 nicht mehr gibt -- sie steht dort nur noch, weil eine
	   Zeile, die je nach Winzer mal 20 und mal 40px hoch ist, den Abstand
	   zum Regal springen liesse. */
	.vmw-seite .vmw-sortiment__steuer {
		min-height: 0;
	}

	/* Ab hier ist neben der Trefferzahl Platz fuer die Frage, nicht nur fuer
	   den Wert -- siehe die Begruendung an `.vmw-sortierung label`. */
	.vmw-seite .vmw-sortierung label {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip-path: none;
	}

	.vmw-seite .vmw-raster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 44px;
	}

	/* Nur die Hoehe, kein Verhaeltnis: die Breite macht die Rasterspalte. */
	.vmw-seite .vmw-kachel__bild {
		height: 270px;
	}

	.vmw-seite .vmw-sortiment__hinweis {
		margin-top: 6px;
	}

	/* Kundenstimmen: aus dem Streifen wird ein Raster. */
	.vmw-seite .vmw-stimmen__kopf {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: 48px;
	}

	.vmw-seite .vmw-stimmen__liste {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
		gap: 24px;
		overflow: visible;
		margin: 0;
		padding: 0;
	}

	.vmw-seite .vmw-stimme {
		flex: initial;
		padding: 28px;
	}

	.vmw-seite .vmw-stimme__zitat {
		font-size: 16px;
		line-height: 1.6;
	}

	.vmw-seite .vmw-stimme__fuss {
		flex-direction: row;
		align-items: baseline;
		justify-content: space-between;
		gap: 16px;
	}

	.vmw-seite .vmw-score {
		padding: 12px 24px;
	}

	.vmw-seite .vmw-score__zahl {
		font-size: 32px;
	}

	/* Die Punktleiste gehoert zum Scroll-Streifen und hat im Raster keinen
	   Sinn. Das Skript baut sie nur, wenn der Streifen beim Laden ueberlaeuft
	   (winzer.js:741) — es kennt aber keinen Haltepunkt und laeuft nicht
	   erneut. Wer von Handy- auf Desktopbreite zieht, haette die Punkte sonst
	   stehen. Deshalb hier, nicht im Skript: das deckt auch das Vergroessern ab. */
	.vmw-seite .vmw-punkte-leiste {
		display: none;
	}

	.vmw-seite .vmw-paket {
		gap: 30px;
	}

	/* BREIT EIN GITTER STATT EINES STREIFENS. Die Spaltenzahl kommt aus dem
	   Attribut und nicht aus `auto-fit`: bei zwei Paketen sollen es zwei
	   HALBE Spalten sein und nicht zwei von dreien mit einer Luecke rechts. */
	.vmw-seite .vmw-paket__liste {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 26px;
		overflow: visible;
		margin: 0;
		padding: 0;
	}

	.vmw-seite .vmw-paket__liste[data-vmw-pakete="2"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* EIN PAKET IST DER HAEUFIGSTE FALL, nicht der Randfall: jedes Weingut
	   hat heute genau eines. Eine 560px breite Karte in einem 1370px breiten
	   Band saehe danach aus, als fehlte der Rest -- deshalb legt sich die
	   Karte im Einzelfall selbst zweispaltig: Bild links ueber beide Zeilen,
	   Text oben rechts, Kaufzeile darunter. Dieselbe Aufteilung wie die
	   abgenommene Sektion vor dem Umbau (0,92 zu 1,08). */
	.vmw-seite .vmw-paket__liste[data-vmw-pakete="1"] {
		display: block;
	}

	.vmw-seite .vmw-paket__liste[data-vmw-pakete="1"] .vmw-paketkarte {
		display: grid;
		grid-template-columns: 0.92fr 1.08fr;
		grid-template-rows: auto auto;
		gap: 18px 48px;
		padding: 28px;
	}

	/* GEMESSEN AM 19.09.2026, UND ES WAR EIN FEHLER.

	   Der Kasten ueberspannt beide Zeilen, und die rechte Spalte traegt
	   Weinliste, Preis und zwei Knoepfe -- gemessen 790px. Das Foto wurde
	   auf diese Hoehe gestreckt, und drei Flaschen standen in einem fast
	   leeren Feld. Genau dieselbe Falle stand vor dem Umbau schon einmal
	   hier, mit derselben Loesung: `align-self: center` nimmt die Streckung
	   zurueck, und die Hoehe kommt dann aus dem Inhalt.

	   460 und 320 sind die Werte, auf die die alte zweispaltige Fassung
	   nach demselben Befund gelaufen ist. Sie stehen hier wieder, weil der
	   Fall derselbe ist: EIN Paket, Bild links, lange Spalte rechts. */
	.vmw-seite .vmw-paket__liste[data-vmw-pakete="1"] .vmw-paket__bild {
		grid-column: 1;
		grid-row: 1 / 3;
		align-self: center;
	}

	.vmw-seite .vmw-paket__liste[data-vmw-pakete="1"] .vmw-paket__bild--flaschen {
		min-height: 460px;
	}

	.vmw-seite .vmw-paket__liste[data-vmw-pakete="1"] .vmw-paketkarte__text {
		grid-column: 2;
		grid-row: 1;
		align-self: end;
	}

	.vmw-seite .vmw-paket__liste[data-vmw-pakete="1"] .vmw-paketkarte__fuss {
		grid-column: 2;
		grid-row: 2;
		margin-top: 0;
	}

	/* Im Einzelfall stehen die beiden Knoepfe nebeneinander: die rechte
	   Spalte ist breit genug, und gestapelt saehen sie dort verloren aus.
	   Im Dreierraster bleiben sie gestapelt -- bei rund 380px Spaltenbreite
	   quetschten sich "In den Warenkorb" und "Paket ansehen" sonst. */
	.vmw-seite .vmw-paket__liste[data-vmw-pakete="1"] .vmw-paket__knoepfe {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.vmw-seite .vmw-paket__liste[data-vmw-pakete="1"] .vmw-paket__knoepfe .vmw-knopf {
		flex: 1 1 auto;
		width: auto;
	}

	.vmw-seite .vmw-paketkarte {
		gap: 12px;
		padding: 24px 24px 26px;
	}

	/* Grosse Flaschen im Einzelfall. Im Dreierraster ist der Kasten 220px
	   hoch und traegt 176px Flasche; hier ist er 340 und traegt 260 --
	   dasselbe Verhaeltnis. Bliebe es bei 176, stuenden drei kleine Flaschen
	   in einem fast leeren Kasten. */
	.vmw-seite .vmw-paketkarte .vmw-paket__bild--flaschen {
		min-height: 220px;
	}

	.vmw-seite .vmw-paketkarte .vmw-paket__flaschen {
		height: 176px;
		margin-top: 22px;
	}

	.vmw-seite .vmw-paket__liste[data-vmw-pakete="1"] .vmw-paket__flaschen {
		height: 320px;
		margin-top: 30px;
	}

	.vmw-seite .vmw-paket__zaehler {
		top: 25px;
		left: 25px;
	}

	.vmw-seite .vmw-paket__notiz {
		right: 22px;
		bottom: 25px;
		left: 22px;
	}

	/* Zwei Spalten, nicht drei. Bis zum 19.09.2026 stand die Geschmacksnotiz
	   hier rechtsbuendig in einer eigenen Spalte -- auf gleicher Hoehe mit
	   dem Namen und in derselben Groesse wie er, also wie eine zweite
	   Ueberschrift. Entwurf V5 setzt sie unter den Namen, wo sie als
	   Nachsatz liest. */
	.vmw-seite .vmw-paketwein {
		grid-template-columns: 44px minmax(0, 1fr);
		align-items: start;
		gap: 16px;
	}

	/* Bleibt eine Spalte, anders als bis zum 08.09.2026. Dort stand hier
	   `flex-direction: row` OHNE `flex-wrap` -- zwischen 768 und rund 900px
	   quetschten sich Knopfzeile und Metazeile deshalb in eine Zeile, die
	   nicht umbrechen durfte. Links ausgerichtet statt zentriert: der Block
	   steht unter einem linksbuendigen Preis. */
	.vmw-seite .vmw-paket__aktion {
		gap: 16px;
	}

	.vmw-seite .vmw-paket__aktion .vmw-knopf {
		align-self: auto;
	}

	/* Hier stand die Regel, die den Handy-Oeffner des Filter-Sheets breit
	   ausblendete. Beides gibt es seit dem 20.09.2026 nicht mehr. */

	/* Ab hier ist Platz: die Chips brechen um, statt zu schieben. Vollbleed,
	   eigene Zeile, Einrasten und Kantenandeutung werden zusammen
	   zurueckgenommen -- bleibt eine der Zeilen stehen, wirkt sie an einem
	   umbrechenden Behaelter, den niemand mehr daraufhin liest. */
	.vmw-seite .vmw-chips {
		flex: 0 1 auto;
		flex-wrap: wrap;
		margin: 0;
		padding: 0;
		overflow-x: visible;
		scroll-snap-type: none;
		-webkit-mask-image: none;
		mask-image: none;
	}

	/* DREI SPALTEN STATT ZWEI -- mehr aendert sich an den Filtergruppen
	   hier nicht.

	   Bis zum 20.09.2026 standen an dieser Stelle acht Regeln, die aus
	   einer Akkordeon-Zeile wieder eine Pille machten: Anzeige,
	   Ausrichtung, Hoehe, Polster, Rahmen, Radius, Umbruch, Schrift. Sie
	   sind entfallen, weil die Grundfassung jetzt schon das Feld traegt.
	   Was bleibt, ist die eine Zahl, die sich mit der Breite wirklich
	   aendert.

	   V5 schaltet bei 1000px von fuenf auf drei Spalten; diese Datei kennt
	   768 und 1025, und die 1025 traegt dieselbe Absicht. Ein dritter
	   Haltepunkt fuer 25 Pixel waere ein Ort mehr, den man vergessen
	   kann. */
	.vmw-seite .vmw-gruppen {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 10px;
	}

	/* Das schwebende Panel steht seit dem 20.09.2026 in der Grundfassung
	   -- schmal gab es bis dahin das Filter-Sheet, dessen
	   `overflow: hidden` es abgeschnitten haette. Hier bleibt nur, was
	   breit wirklich anders ist: ein Panel darf auf dem Desktop laenger
	   werden, bevor es selbst scrollt. */
	.vmw-seite .vmw-gruppe__inhalt {
		max-height: min(340px, 50vh);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	/* Bei drei und fuenf Spalten oeffnen die LETZTEN BEIDEN nach links,
	   nicht die geraden. Die Grundfassung rechnet mit zwei Spalten, wo
	   jede zweite die rechte ist; hier stimmt das nicht mehr. */
	.vmw-seite .vmw-gruppe:nth-child(even) > .vmw-gruppe__inhalt {
		left: 0;
		right: auto;
	}

	.vmw-seite .vmw-gruppe:nth-last-child(-n+2) > .vmw-gruppe__inhalt {
		left: auto;
		right: 0;
	}

	.vmw-seite .vmw-option {
		padding: 6px 0;
	}

	.vmw-seite .vmw-paket__knoepfe {
		flex-direction: row;
		/* Sonst schrumpfen die beiden Knoepfe bei Enge, statt untereinander
		   zu rutschen -- und der Text bricht IM Knopf um. */
		flex-wrap: wrap;
		align-items: center;
		align-self: auto;
	}

	.vmw-seite .vmw-paket__kauf {
		flex-direction: row;
	}

	/* Herkunft: Kopf zweispaltig, die beiden Karten nebeneinander. */
	.vmw-seite .vmw-herkunft {
		gap: 48px;
		padding-left: 0;
		padding-right: 0;
	}

	/* 1,12 zu 1 statt 55 zu 45, und 64px statt 72 -- die Aufteilung des
	   Entwurfs V5. Der Textblock gewinnt dabei, weil das Foto quadratisch
	   geworden ist und bei gleicher Spaltenbreite hoeher steht als das alte
	   Querformat. */
	.vmw-seite .vmw-herkunft__kopf {
		display: grid;
		grid-template-columns: 1.12fr 1fr;
		gap: 64px;
		align-items: center;
		padding: 0 var(--vmw-gutter);
	}

	/* JEDES KIND BRINGT SEIN POLSTER SELBST MIT -- die Regel darueber nimmt
	   es der Sektion ab 768px weg, damit Zitat und Band voll durchlaufen
	   koennen. Ohne diese Zeile stand die Faktenreihe am 15.09.2026 ueber die
	   ganze Fensterbreite: gemessen bei 1440px linke Kante 0 statt 101,
	   Breite 1409 statt 1208. Die Zusicherung „Fakten: die Reihe steht im
	   Satzspiegel" haelt das fest -- aufgefallen ist es beim Ansehen der
	   Seite und nicht dem Pruefstand, der die Reihe damals nur auf Striche
	   und Linien pruefte. */
	.vmw-seite .vmw-fakten {
		/* VIER SPALTEN, NICHT ZWEI MAL ZWEI. Die Grundfassung stellt schmal
		   zwei nebeneinander; breit gehoeren alle vier in EINE Reihe, so wie
		   sie es im Hero auch taten. Diese Zeile stand bis zum 15.09.2026 im
		   Hero-Teil des 768er-Blocks und ist beim Umzug zunaechst
		   liegengeblieben -- die Reihe brach dadurch bei 1440px in zwei
		   Zeilen um. Die Zusicherung „alle Fakten stehen breit auf einer
		   Linie" haelt das jetzt fest.

		   44px Spaltenabstand statt der 24px von schmal: ohne senkrechte
		   Striche muss der Abstand die Trennung leisten. Kein Zeilenabstand,
		   es gibt nur eine Zeile. */
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 0 44px;
		margin: 0 var(--vmw-gutter);
	}

	.vmw-seite .vmw-fakt__label {
		gap: 8px;
		margin-bottom: 9px;
	}

	.vmw-seite .vmw-fakt__label .vmw-icon {
		width: 16px;
		height: 16px;
	}

	.vmw-seite .vmw-herkunft__einleitung {
		gap: 18px;
	}

	/* KEINE MINDESTHOEHE MEHR. Hier standen `aspect-ratio: auto` und
	   `min-height: 440px`; das Quadrat der Grundfassung gilt jetzt an beiden
	   Breiten. Eine feste Hoehe war ohnehin eine Zahl, die bei jeder anderen
	   Spaltenbreite ein anderes Format ergab. */
	.vmw-seite .vmw-herkunft__bild {
		border-radius: 9px;
	}

	.vmw-seite .vmw-herkunft__bildzeile {
		right: 20px;
		bottom: 21px;
		left: 24px;
	}

	.vmw-seite .vmw-karten {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 64px;
		margin: 0 var(--vmw-gutter);
	}

	.vmw-seite .vmw-karte__bild {
		margin-bottom: 19px;
		border-radius: 8px;
	}

	.vmw-seite .vmw-karte__text {
		gap: 13px;
	}

	/* DER EINZUG KOMMT NICHT AUS `margin` (21.09.2026).

	   Hier stand `margin: 0 var(--vmw-gutter)` wie bei allen Geschwistern --
	   und auf der ausgelieferten Seite lief die Box trotzdem ueber die volle
	   Fensterbreite. Elementors Grund-Stylesheet setzt

	     .elementor .elementor-widget:not(.elementor-widget-text-editor)
	       :not(.elementor-widget-theme-post-content) figure { margin: 0 }

	   mit Spezifitaet (0,4,1) gegen unsere (0,2,0). Die Box ist das einzige
	   Kind der Sektion, das ein <figure> ist; die anderen sind <div> und
	   <dl> und behalten ihren Rand. Schmal traegt sie keinen, deshalb stimmte
	   es dort.

	   Die Sektion ist eine Spalten-Flexbox: zentriert und um zwei Einzuege
	   schmaler liegt die Box auf genau denselben Kanten wie die Geschwister.
	   Das <figure> bleibt (Begruendung in `herkunft-buehne.php`), und ein
	   Selektor ueber vier Klassen, der Elementor schluege, wuerde auch die
	   Stilregler schlagen. */
	.vmw-seite .vmw-buehne {
		align-self: center;
		width: calc(100% - 2 * var(--vmw-gutter));
		padding: 27px 34px;
	}

	.vmw-seite .vmw-buehne__zitat {
		font-size: 23px;
	}

	.vmw-seite .vmw-signale {
		margin: 0 var(--vmw-gutter);
	}

	.vmw-seite .vmw-signale__titel {
		margin-bottom: 22px;
	}

	.vmw-seite .vmw-zertifikate {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 34px;
	}

	/* BREIT STEHT DAS ZEICHEN UEBER DEM TEXT, nicht daneben. Die Grundfassung
	   ist ein zweispaltiges Gitter -- schmal die richtige Form, breit waere sie
	   drei schmale Spalten mit noch schmalerem Text. */
	.vmw-seite .vmw-zertifikat {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.vmw-seite .vmw-zertifikat__zeichen {
		margin: 0 0 12px;
	}

	.vmw-seite .vmw-zertifikat__text {
		gap: 8px;
	}

	.vmw-seite .vmw-handschrift {
		margin: 16px 0 0;
		padding: 52px var(--vmw-gutter) 56px;
	}

	/* Über Vinomeet: Text links, Bild rechts. 1,1 zu 1 statt 58 zu 42 und
	   mittig statt oben -- die Aufteilung des Entwurfs V5. Das Bild wird
	   dadurch breiter und steht auf der Mitte des Textes statt an dessen
	   Oberkante; bei einem Textblock mit Punkte-Liste war die Oberkante
	   sonst das einzige, was beide gemeinsam hatten. */
	.vmw-seite .vmw-ueber__kopf {
		display: grid;
		grid-template-columns: 1.1fr 1fr;
		gap: 64px;
		align-items: center;
	}

	.vmw-seite .vmw-ueber__text {
		display: flex;
		flex-direction: column;
		gap: 18px;
	}

	/* Derselbe Fall wie im Paket, nur noch unsichtbar: der Reset stand mit
	   (0,2,0) gegen vier Einzelregeln mit (0,3,0) und feuerte nie. Es faellt
	   heute nicht auf, weil auf dem Plugin-Weg jedes Kind eine eigene
	   Reihenfolge traegt und die zufaellig stimmt. Auf dem nativen
	   Elementor-Weg traegt die Huelle von `ueber-punkte` und `ueber-knopf`
	   keine `vmw-`Klasse — die beiden fielen auf die Auffangregel `order: 4`
	   und stuenden dann hinter dem Fliesstext statt an ihrem Platz. */
	.vmw-seite .vmw-ueber .vmw-ueber__text > * {
		order: 0;
	}

	/* Die beiden Wege stehen hier NEBENEINANDER und linksbuendig, nicht
	   gestapelt und nicht in voller Breite. */
	.vmw-seite .vmw-ueber__wege {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		align-self: flex-start;
		gap: 10px 24px;
		margin-top: 9px;
	}

	.vmw-seite .vmw-ueber__weg {
		align-self: auto;
	}

	.vmw-seite .vmw-ueber__text .vmw-knopf {
		align-self: flex-start;
		margin-top: 6px;
	}

	.vmw-seite .vmw-ueber__bild {
		order: 0;
		aspect-ratio: auto;
		height: clamp(360px, 42vw, 600px);
		min-height: 0;
	}

	.vmw-seite .vmw-ueber__bildzeile {
		right: 20px;
		bottom: 21px;
		left: 24px;
	}

	.vmw-seite .vmw-punkt {
		grid-template-columns: 52px minmax(0, 1fr);
		align-items: center;
	}

	.vmw-seite .vmw-punkt__zeichen {
		margin-top: 0;
	}

	.vmw-seite .vmw-erlebnis {
		margin-top: 48px;
		padding-top: 36px;
	}

	.vmw-seite .vmw-erlebnis__kopf {
		flex-direction: row;
		align-items: baseline;
		justify-content: space-between;
		/* DER UMBRUCH IST DIE ZWEITE ZEILE (19.09.2026).

		   Seit der Besuchshinweis im Kopf steht, hat diese Reihe vier Kinder:
		   Eyebrow, Ort, Link und den Satz -- `.vmw-erlebnis__meta` loest sich
		   zwei Regeln weiter unten mit `display: contents` auf. Ohne Umbruch
		   draengten sich alle vier in EINE Zeile, und `space-between` verteilte
		   sie auf vier Stellen.

		   Mit Umbruch und `flex: 0 0 100%` am Satz bleibt Zeile eins genau so,
		   wie sie war, und der Satz bekommt seine eigene. */
		flex-wrap: wrap;
		/* 6 statt 24px: mit `margin-right: auto` am Ort sammelt sich der freie
		   Raum dort, der Link steht weiterhin rechts, und `gap` wirkt nur noch
		   zwischen Eyebrow und Ort -- dort, wo bisher ein Leerzeichen stand. */
		gap: 6px;
		margin-bottom: 24px;
	}

	/* Aufloesen, damit Ort und Link direkte Kinder der Kopfzeile werden.
	   Ohne das stuende der Ort bei `space-between` und drei Kindern allein in
	   der MITTE statt neben der Eyebrow. */
	.vmw-seite .vmw-erlebnis__meta {
		display: contents;
	}

	/* Der Ort tritt in die Eyebrow zurueck: gleiche Groesse, gleiches
	   Gewicht, gleiche Sperrung, gleiche Farbe. `margin-right: auto` haelt
	   den Link rechts. */
	.vmw-seite .vmw-erlebnis__ort {
		margin-right: auto;
		font-size: var(--vmw-schrift-label);
		font-weight: 700;
		letter-spacing: var(--vmw-sperrung-label);
		text-transform: uppercase;
		color: var(--vmw-eyebrow-dunkel);
	}

	.vmw-seite .vmw-erlebnis__ort::after {
		content: none;
	}

	.vmw-seite .vmw-erlebnis__ort::before {
		content: "\00B7";
		margin-right: 6px;
	}

	/* Eigene Zeile, nicht vierte Spalte. Der Abstand nach oben ist 12px und
	   nicht 6: die Kopfzeile hat `gap: 6px`, und beim Umbruch wirkt das auch
	   zwischen den Zeilen -- diese 6px kommen dazu. Schmal braucht es die
	   Regel nicht, dort ist der Kopf ohnehin eine Spalte. */
	.vmw-seite .vmw-erlebnis__claim {
		flex: 0 0 100%;
		margin-top: 6px;
	}

	/* EIN RASTER, KEINE FLEX-REIHE -- und das ist der Grund:
	
	   Mit `display: flex; flex: 1 1 0` sassen die drei Angebote zwar richtig
	   nebeneinander und gleich breit, blieben aber VERSCHIEDEN HOCH: gemessen
	   199,7 gegen 209,7px am 19.09.2026, auch mit ausgeschriebenem
	   `align-items: stretch`. Damit standen die drei Wege am Fuss der Spalten
	   10px versetzt, obwohl jeder sein `margin-top: auto` hat.
	
	   Im Raster ist gleiche Zeilenhoehe keine Eigenschaft, die man anfordert,
	   sondern der Aufbau selbst. Entwurf V5 macht es genauso
	   (`.hospitality-offers`). */
	.vmw-seite .vmw-erlebnis__punkte {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* Hier steht das Zeichen UEBER dem Titel, nicht daneben: die Spalte ist
	   schmal, und drei Zeilen untereinander lesen sich besser als eine
	   Einrueckung, die 27px von 380 frisst. `display: flex` loest das
	   Handy-Raster auf. */
	/* `height: 100%` und nicht `align-items: stretch` am Behaelter.
	
	   Gemessen am 19.09.2026: als Rasterkind mit ausgeschriebenem
	   `align-self: stretch` blieb das erste Angebot 199,7px hoch, waehrend
	   die Zeile 209,7 hoch war -- der Weg am Fuss stand damit 10px hoeher als
	   bei den Nachbarn, obwohl jeder sein `margin-top: auto` hat. Ein
	   Flex-Behaelter, der selbst Rasterkind ist und ein Kind mit automatischem
	   Randabstand enthaelt, nimmt die Streckung nicht zuverlaessig an.
	
	   `height: 100%` loest gegen die Rasterzelle auf und ist damit dieselbe
	   Zahl -- nur nachrechenbar. Danach stehen alle drei Wege auf 365,6. */
	.vmw-seite .vmw-erlebnispunkt {
		display: flex;
		flex-direction: column;
		height: 100%;
		padding: 4px 36px;
		border-top: 0;
		border-left: 1px solid rgba(255, 255, 255, 0.2);
	}

	.vmw-seite .vmw-erlebnispunkt > .vmw-icon {
		margin: 0 0 16px;
	}

	.vmw-seite .vmw-erlebnispunkt__titel {
		margin-bottom: 12px;
	}

	.vmw-seite .vmw-erlebnispunkt__weg {
		margin-top: auto;
	}

	/* `padding-top` steht hier ausdruecklich wieder da. Die Regel im
	   Grundteil nimmt dem ersten Eintrag sein oberes Polster -- richtig, wenn
	   die drei untereinander stehen und eine Trennlinie dazwischen liegt,
	   falsch, wenn sie nebeneinander stehen: dann saesse der erste 4px hoeher
	   als seine Nachbarn. Und sie hat mit `:first-child` die hoehere
	   Spezifitaet, greift hier also auch ohne Zutun. */
	.vmw-seite .vmw-erlebnispunkt:first-child {
		padding-top: 4px;
		padding-left: 0;
		border-left: 0;
	}

	.vmw-seite .vmw-erlebnispunkt:last-child {
		padding-right: 0;
	}

	.vmw-seite .vmw-erlebnispunkt__text {
		margin-bottom: 15px;
	}

	/* Ähnliche: zwei Spalten. */
	.vmw-seite .vmw-aehnliche__karten {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px;
	}

	.vmw-seite .vmw-nachbar__bild {
		aspect-ratio: 16 / 10;
	}

	.vmw-seite .vmw-nachbar__text {
		gap: 10px;
		padding: 24px 26px 26px;
	}

	.vmw-seite .vmw-nachbar__fuss {
		gap: 12px;
	}

	/* SEO: Text und Panel nebeneinander. */
	.vmw-seite .vmw-seo__spalten {
		display: grid;
		grid-template-columns: 62fr 38fr;
		gap: 72px;
		align-items: start;
	}

	.vmw-seite .vmw-panel {
		padding: 28px 30px;
	}

	.vmw-seite .vmw-panel__links a {
		padding: 15px 0;
		font-size: 16px;
	}

	/* FAQ: Kopf, Liste und Abschluss linksbuendig (22.09.2026).

	   Bis dahin stand hier `align-items: center` an der SEKTION und
	   `text-align: center` am Kopf. Die eine Zeile an der Sektion war die
	   folgenreichere: sie zentrierte nicht nur den Kopf, sondern auch die
	   880px breite Fragenliste und den Abschlusskasten. Bei 1440px wandern
	   beide durch diese Aenderung rund 245px nach links -- das ist die
	   groessere sichtbare Aenderung, nicht die Ueberschrift.

	   Der Kunde hat die Zentrierung beanstandet: die Seite ist sonst
	   durchgehend linksbuendig. Damit wird ausdruecklich eine fruehere
	   eigene Entwurfsentscheidung zurueckgenommen -- V5 zentriert
	   `.faq-intro` breit und stellt sie erst unter 760px auf links
	   (winzerseite-entwurf-v5.html:1885 und :2946). Schmal war die FAQ
	   deshalb schon immer linksbuendig; dort aendert sich nichts.

	   Kein `align-items` mehr statt `flex-start`: der Flex-Standard ist
	   `stretch`, und genau der ist hier richtig. Kopf, Liste und Abschluss
	   beginnen an der Sektionskante und enden an ihrer eigenen
	   `max-width`. Mit `flex-start` schrumpften sie stattdessen auf ihren
	   Inhalt, und der Trennstrich der Liste endete am letzten Buchstaben.

	   `max-width: 720px` bleibt: Zeilenlaengenbegrenzung, keine
	   Ausrichtung. */
	.vmw-seite .vmw-faq {
		gap: 34px;
	}

	.vmw-seite .vmw-faq__kopf {
		max-width: 720px;
	}

	.vmw-seite .vmw-frage__kopf {
		padding: 20px 0;
		font-size: 18px;
	}

	.vmw-seite .vmw-frage__kopf::after {
		font-size: 22px;
	}

	.vmw-seite .vmw-frage__antwort {
		padding: 0 46px 22px 0;
	}

	.vmw-seite .vmw-faq__abschluss {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 32px;
		padding: 26px 30px;
	}

	/* `flex: 0 0 auto`, damit die Aktionen nicht schrumpfen. Der Kasten ist
	   eine Zeile mit `space-between`; ohne die Regel gab der Knopf nach und
	   „Zum Sortiment" brach auf zwei Zeilen um — gemessen 165x67px statt
	   einzeilig. Nachgeben soll der Text links, der bricht ohnehin um. */
	.vmw-seite .vmw-faq__abschlussaktion {
		flex: 0 0 auto;
		flex-direction: row;
		gap: 20px;
	}

	.vmw-seite .vmw-faq__abschlussaktion .vmw-knopf {
		align-self: auto;
	}
}

@media (min-width: 1025px) {

	.vmw-seite .vmw-raster {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.vmw-seite .vmw-aehnliche__karten {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.vmw-seite .vmw-stimmen__liste {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* Erst hier passen alle fuenf Filtergruppen nebeneinander (V5 schaltet
	   bei 1000px; die naechste Stufe dieser Datei ist 1025). Darunter stehen
	   sie zu dritt -- siehe die Begruendung beim 768er-Block. */
	.vmw-seite .vmw-gruppen {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

/* Der Container begrenzt die Seite erst oberhalb seiner eigenen Breite.
   1401 statt 1441, seit --vmw-container an --wd-container-w haengt. */
/* HIER STAND DIE DRITTE BREITENSTUFE.

   `(100vw - Container) / 2 + 96px` ab 1401px: der Satzspiegel hoerte bei
   1208px auf zu wachsen und stand dabei 96px innerhalb der Inhaltskante des
   Themes. Genau diese 96px waren die Fehlflucht, die der Kunde am
   19.09.2026 gemeldet hat -- gemessen 88,5px je Seite, der Rest ist der
   halbe Rollbalken.

   Die Rechnung steht jetzt in EINER Regel ab 768px (Abschnitt 14, oben),
   und der Satzspiegel endet bei 1370px: der Inhaltsbreite des Themes. */

@media (prefers-reduced-motion: reduce) {

	.vmw-seite *,
	.vmw-seite *::before,
	.vmw-seite *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}


/* 21.09.2026: freigegebene Sektionen P1 / U2. Auf diese Bereiche begrenzt. */

/* LINKSBUENDIG SEIT DEM 22.09.2026, und das ist eine Korrektur, keine neue
   Entscheidung. Der am 21.09. abgenommene Entwurf zentriert den Kopf nur ab
   1100px und nur bei EINEM Paket (sektionen-entwuerfe/sections.css:10) und
   stellt ihn unter 768px ausdruecklich wieder auf links (:12). Hier stand
   dagegen eine unbedingte Zentrierung -- an jeder Breite und bei ein, zwei
   oder drei Paketen. Die Abweichung ist bei der Uebertragung entstanden.

   ALLE DREI EIGENSCHAFTEN MUSSTEN GEMEINSAM FALLEN. Nur `text-align` zu
   nehmen haette es schlechter gemacht: der 740px-Kasten stuende weiter
   mittig, der linksbuendige Text begaenne bei 1440px 315px innerhalb der
   Sektionskante -- die Fehlflucht waere dann sichtbar, statt von der
   Symmetrie kaschiert zu werden.

   `max-width: 740px` BLEIBT. Es ist Zeilenlaengenbegrenzung und keine
   Ausrichtung; ohne es liefe der Text ueber die vollen 1370px. */
.vmw-seite .vmw-paket--p1 .vmw-paket__kopf { max-width:740px; margin:0 0 8px; align-items:stretch; gap:14px; }
.vmw-seite .vmw-paket--p1 .vmw-paket__kopf .vmw-h2 { font-size:26px; line-height:1.3; letter-spacing:-.4px; text-wrap:balance; }
.vmw-seite .vmw-paket--p1 .vmw-paket__einleitung { max-width:620px; font-size:15px; line-height:1.6; color:#f2e4eb; }
.vmw-seite .vmw-paket--p1 .vmw-paket__liste[data-vmw-pakete] { display:grid; grid-template-columns:minmax(0,1fr); gap:24px; overflow:visible; margin:0; padding:0; list-style:none; }
.vmw-seite .vmw-paket--p1 .vmw-paket__liste[data-vmw-pakete] .vmw-paketkarte { display:flex; flex-direction:column; gap:0; min-width:0; padding:0; border:0; background:#fff; color:var(--vmw-ink); border-radius:12px; overflow:hidden; }
.vmw-seite .vmw-paket--p1 .vmw-paketkarte__body { display:flex; flex-direction:column; flex:1; min-width:0; padding:22px; }
.vmw-seite .vmw-paket--p1 .vmw-paketkarte__text { gap:13px; align-self:stretch; }
.vmw-seite .vmw-paket--p1 .vmw-paketkarte__titel { color:#3f3a3d; font-size:26px; line-height:1.25; }
.vmw-seite .vmw-paket--p1 .vmw-paketkarte__verteilung { color:#75646e; font-size:12px; align-items:center; gap:7px 10px; }
.vmw-seite .vmw-paket--p1 .vmw-paketkarte__flaschenzahl { border:1px solid #dfc7d3; border-radius:999px; padding:3px 10px; color:var(--vmw-beere); font-size:11px; white-space:nowrap; }
.vmw-seite .vmw-paket--p1 .vmw-paket__kuration { color:#76656f; font-size:13px; line-height:1.6; }
.vmw-seite .vmw-paket--p1 .vmw-paket__liste[data-vmw-pakete] .vmw-paket__bild { min-height:0; border-radius:0; grid-row:auto; align-self:stretch; }
.vmw-seite .vmw-paket--p1 .vmw-paket__bild--flaschen { flex-direction:column; padding:30px 20px 18px; background:radial-gradient(ellipse at center,#fffaf7,#f3ece8); }
.vmw-seite .vmw-paket--p1 .vmw-paket__liste[data-vmw-pakete] .vmw-paket__flaschen { height:205px; margin:0; gap:0; }
.vmw-seite .vmw-paket--p1 .vmw-paket__flasche { width:30%; height:90%; max-width:130px; object-fit:cover; margin:0; transform:none; }
.vmw-seite .vmw-paket--p1 .vmw-paket__flasche:nth-child(2) { height:100%; width:30%; margin:0; transform:none; }
.vmw-seite .vmw-paket--p1 .vmw-paket__zaehler { position:static; order:2; padding-top:16px; color:#7b6d68; font-size:11px; font-weight:400; text-align:center; text-transform:none; letter-spacing:.5px; }
.vmw-seite .vmw-paket--p1 .vmw-paket__notiz { position:static; order:3; margin-top:6px; font-weight:400; font-size:11px; text-transform:none; }
.vmw-seite .vmw-paket--p1 .vmw-paket__details { border-block:1px solid #e9e0e4; margin-top:3px; }
.vmw-seite .vmw-paket--p1 .vmw-paket__details summary { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:13px 0; cursor:pointer; list-style:none; font-size:12px; color:#493d44; }
.vmw-seite .vmw-paket--p1 .vmw-paket__details summary::-webkit-details-marker { display:none; }
.vmw-seite .vmw-paket--p1 .vmw-paket__details summary::after { content:'+'; flex-shrink:0; color:var(--vmw-beere); font-size:20px; }
.vmw-seite .vmw-paket--p1 .vmw-paket__details[open] summary::after { content:'−'; }
.vmw-seite .vmw-paket--p1 .vmw-paket__vorschau { display:block; margin-top:5px; color:#76656f; font-weight:400; line-height:1.6; }
.vmw-seite .vmw-paket--p1 .vmw-paket__weine { margin:0; padding:0 0 12px; border:0; list-style:none; }
.vmw-seite .vmw-paket--p1 .vmw-paketwein { grid-template-columns:24px minmax(0,1fr); gap:9px; padding:12px 0; border-color:#eee4e8; }
.vmw-seite .vmw-paket--p1 .vmw-paketwein__menge { color:var(--vmw-beere); font-size:12px; }
.vmw-seite .vmw-paket--p1 .vmw-paketwein__name { color:#493d44; font-size:14px; font-weight:400; line-height:1.5; min-width:0; overflow-wrap:anywhere; }
/* Jost ist nur in 400, 600 und 700 geladen; 500 fiel im Browser still auf 400 zurueck (pruefe-laufzeit: "kein Jost 500"). Seit 3.2.1 steht hier, was ohnehin zu sehen war. */
.vmw-seite .vmw-paket--p1 .vmw-paketwein__name a { color:inherit; font-weight:400; }
.vmw-seite .vmw-paket--p1 .vmw-paketwein__jahr { display:block; color:#7c6d76; font-size:12px; margin-top:4px; }
.vmw-seite .vmw-paket--p1 .vmw-paketwein__notiz { display:flex; gap:7px; color:#66565f; text-align:left; font-size:12px; line-height:1.6; margin-top:6px; }
.vmw-seite .vmw-paket--p1 .vmw-paketwein__notiz svg { flex:0 0 14px; margin-top:3px; color:var(--vmw-beere); }
.vmw-seite .vmw-paket--p1 .vmw-paket__liste[data-vmw-pakete] .vmw-paketkarte__fuss { margin-top:auto; padding-top:20px; gap:8px; }
.vmw-seite .vmw-paket--p1 .vmw-paket__vergleich { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:12px; color:#74646d; }
.vmw-seite .vmw-paket--p1 .vmw-paket__streich { color:inherit; font-size:inherit; margin-left:4px; }
.vmw-seite .vmw-paket--p1 .vmw-paket__vorteil { color:var(--vmw-beere); background:#f4e7ee; padding:5px 10px; border-radius:4px; font-size:11px; font-weight:600; }
.vmw-seite .vmw-paket--p1 .vmw-paket__preis { display:flex; align-items:baseline; flex-wrap:wrap; gap:10px; }
.vmw-seite .vmw-paket--p1 .vmw-paket__betrag { color:#3f3a3d; font-size:29px; font-weight:400; }
.vmw-seite .vmw-paket--p1 .vmw-paket__grundpreis { color:#3f3a3d; font-size:12px; }
.vmw-seite .vmw-paket--p1 .vmw-paket__grundpreis del { display:none; }
.vmw-seite .vmw-paket--p1 .vmw-paket__grundpreis ins { text-decoration:none; background:none; }
.vmw-seite .vmw-paket--p1 .amount { color:inherit; font-weight:inherit; font-size:inherit; }
.vmw-seite .vmw-paket--p1 .vmw-paket__ersparnis { color:var(--vmw-beere); font-size:12px; }
.vmw-seite .vmw-paket--p1 .vmw-paket__aktion { display:flex; flex-direction:column; align-items:stretch; gap:8px; }
.vmw-seite .vmw-paket--p1 .vmw-paket__steuer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:5px 10px; color:#81727a; font-size:11px; }
.vmw-seite .vmw-paket--p1 .vmw-paket__lebensmittel { font-size:12px; color:var(--vmw-beere); }
.vmw-seite .vmw-paket--p1 .vmw-paket__lebensmittel summary { cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.vmw-seite .vmw-paket--p1 .vmw-paket__lebensmittel ul { margin:8px 0; padding-left:16px; }
.vmw-seite .vmw-paket--p1 .vmw-paket__liste[data-vmw-pakete] .vmw-paket__knoepfe { display:flex; flex-direction:column; align-items:stretch; gap:9px; margin-top:10px; }
.vmw-seite .vmw-paket--p1 .vmw-paket__kauf { width:100%; margin:0; }
.vmw-seite .vmw-paket--p1 .vmw-paket__liste[data-vmw-pakete] .vmw-paket__knoepfe .vmw-knopf--hell { width:100%; background:var(--vmw-beere); border-color:var(--vmw-beere); color:#fff; min-height:48px; }
.vmw-seite .vmw-paket--p1 .vmw-paket__liste[data-vmw-pakete] .vmw-paket__knoepfe .vmw-knopf--geist { align-self:center; flex:none; width:auto; border:0; border-radius:0; padding:8px 12px; min-height:44px; font:400 15px/1.6 var(--vmw-sans); color:var(--vmw-beere); background:none; text-decoration:underline; text-underline-offset:4px; }
.vmw-seite .vmw-erlebnis--u2 { border-top:0; }
.vmw-seite .vmw-erlebnis--u2 .vmw-erlebnis__intro { display:grid; grid-template-columns:minmax(0,1fr); background:#fcf8f4; color:#3f3a3d; border-radius:12px; overflow:hidden; margin-bottom:48px; }
.vmw-seite .vmw-erlebnis--u2 .vmw-erlebnis__introtext { padding:26px 24px; }
.vmw-seite .vmw-erlebnis--u2 .vmw-eyebrow { color:var(--vmw-beere); }
.vmw-seite .vmw-erlebnis--u2 .vmw-erlebnis__titel { font:400 29px/1.2 var(--vmw-serif); color:#3f3a3d; margin:14px 0; }
.vmw-seite .vmw-erlebnis--u2 .vmw-erlebnis__einleitung { font-size:14px; line-height:1.75; color:#74646d; }
.vmw-seite .vmw-erlebnis--u2 .vmw-erlebnis__hauslink { display:inline-block; color:var(--vmw-beere); font-size:13px; font-weight:600; margin-top:18px; text-decoration:underline; text-underline-offset:4px; }
.vmw-seite .vmw-erlebnis--u2 .vmw-erlebnis__hof { position:relative; margin:0; min-height:220px; }
.vmw-seite .vmw-erlebnis--u2 .vmw-erlebnis__hofbild { position:absolute; width:100%; height:100%; object-fit:cover; inset:0; }
.vmw-seite .vmw-erlebnis--u2 .vmw-erlebnis__hof figcaption { position:absolute; inset:auto 0 0; color:#fff; font-size:12px; padding:40px 24px 16px; background:linear-gradient(transparent,#0009); }
@media (min-width:768px) {
 .vmw-seite .vmw-paket--p1 .vmw-paket__kopf .vmw-h2 { font-size:30px; }
 .vmw-seite .vmw-paket--p1 .vmw-paket__einleitung { font-size:16px; }
 .vmw-seite .vmw-paket--p1 .vmw-paket__liste[data-vmw-pakete="2"] { grid-template-columns:repeat(2,minmax(0,1fr)); }
 /* `margin-inline:0` seit dem 22.09.2026: der Kopf darueber steht jetzt
    links, eine mittige Karte darunter waere eine neue Fehlflucht. Die
    1130px bleiben -- sie begrenzen die Karte, sie zentrieren sie nicht. */
 .vmw-seite .vmw-paket--p1 .vmw-paket__liste[data-vmw-pakete="1"] { max-width:1130px; width:100%; margin-inline:0; }
 .vmw-seite .vmw-paket--p1 .vmw-paket__liste[data-vmw-pakete="1"] .vmw-paketkarte { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto; }
 .vmw-seite .vmw-paket--p1 .vmw-paket__liste[data-vmw-pakete="1"] .vmw-paket__flaschen { height:310px; }
 .vmw-seite .vmw-paket--p1 .vmw-paketkarte__body { padding:28px; }
 .vmw-seite .vmw-paket--p1 .vmw-paket__betrag { font-size:31px; }
 .vmw-seite .vmw-erlebnis--u2 .vmw-erlebnis__intro { grid-template-columns:1.1fr 1fr; margin-bottom:56px; }
 .vmw-seite .vmw-erlebnis--u2 .vmw-erlebnis__intro--ohne-bild { grid-template-columns:1fr; }
 .vmw-seite .vmw-erlebnis--u2 .vmw-erlebnis__introtext { padding:34px; }
 .vmw-seite .vmw-erlebnis--u2 .vmw-erlebnis__titel { font-size:35px; }
 .vmw-seite .vmw-erlebnis--u2 .vmw-erlebnis__einleitung { font-size:16px; }
}
@media (min-width:1025px) {
 .vmw-seite .vmw-paket--p1 .vmw-paket__liste[data-vmw-pakete="3"] { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .vmw-seite .vmw-paket--p1 .vmw-paket__liste[data-vmw-pakete="1"] .vmw-paketkarte__body { padding:30px 36px 25px; }
}

/* ------------------------------------------------------------------ */
/* 15  Die Filterleiste der Produktarchive (Plan F, F5, 23.09.2026)    */
/* ------------------------------------------------------------------ */

/* DIESELBE LEISTE, EIN ANDERER ORT. Das Markup ist das der Winzerseite
   (sortiment-leiste.php im Archivmodus), und deren Regeln gelten hier
   unveraendert -- Schrift, Rahmen und Flaechen sind gemessen schon gleich.
   Was folgt, verlangt nur der Ort. Der Block steht am ENDE der Datei: er
   nimmt Regeln aus dem 768er- und dem 1025er-Block bei gleicher
   Spezifitaet zurueck, und das geht nur von weiter unten.

   - Die vier `--wd-otl-*`: `body.vmw-winzer` gibt es nur auf der
     Winzerseite. Ohne sie gewinnt ab 1025px Woodmarts gepunkteter Ring
     (derselbe Befund wie an der Kachel, `.vmw-seite.vmw-loop`).
   - Kein Weiss: die Leiste steht auf dem Grund des Shops.
   - Den Abstand zwischen Leiste, Steuerzeile und gesetzten Filtern traegt
     auf der Winzerseite `.vmw-sortiment` (Flex-Spalte mit `gap`), hier das
     Formular.
   - `scroll-margin-top`: nach dem Absenden springt die Seite hierher
     (`#vmw-archivfilter`), und der klebende Kopf laege sonst ueber der
     Leiste. `.vmw-seite [id]` greift an der Huelle selbst nicht -- sie IST
     `.vmw-seite`.
   - Schmal RANDLOS: `main` polstert im Shop 15px, nicht 20 wie die
     Winzerseite. Die Chipreihe zieht mit `--vmw-gutter` bis an die
     Fensterkante (Abschnitt 3); mit 20px liefe sie 5px ueber, mit der
     Huelle als Kante schnitte `overflow-x: clip` sie 15px zu frueh ab.
     Deshalb reicht die Huelle selbst bis an den Rand und polstert zurueck. */
.vmw-seite.vmw-archivfilter {
	--wd-otl-style: solid;
	--wd-otl-width: 2px;
	--wd-otl-offset: 3px;
	--wd-otl-color: var(--e-global-color-primary, #8E2C5D);
	--vmw-gutter: 15px;
	margin: 0 calc(var(--vmw-gutter) * -1) 24px;
	padding: 0 var(--vmw-gutter);
	background: transparent;
	scroll-margin-top: 96px;
}

.vmw-seite.vmw-archivfilter .vmw-archivfilter__form {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0;
}

/* Die Weinart-Chips tragen im Archiv ihre Zahl -- und sind bei null
   gesperrt: ein Klick fuehrte dort sonst auf eine leere Seite. Dieselbe
   Sprache wie ein gesperrtes Geschmackssegment. */
.vmw-seite.vmw-archivfilter .vmw-schnellchip[disabled] {
	color: var(--vmw-gesperrt);
	border-color: var(--vmw-linie-2);
	background: transparent;
	cursor: default;
}

/* Regionen stehen eingerueckt unter ihrem Land: Kaestchen 18px plus
   Abstand 11px -- der Text der Region beginnt unter dem des Landes. */
.vmw-seite.vmw-archivfilter .vmw-option--ebene-1 {
	padding-left: 29px;
}

/* DAS SUCHFELD bleibt oben stehen, wenn das Panel scrollt: Herkunft und
   Rebsorte haben lange Listen, und wer darin sucht, soll nicht erst
   zuruecksrollen muessen. Der negative Rand holt das Polster des Panels
   (10px) herein, damit keine Zeile hinter dem Feld durchscheint. */
.vmw-seite.vmw-archivfilter .vmw-archivsuche {
	position: sticky;
	top: -10px;
	z-index: 1;
	margin: -10px -10px 4px;
	padding: 10px 10px 6px;
	background: #FFFFFF;
}

.vmw-seite.vmw-archivfilter .vmw-archivsuche__feld {
	box-sizing: border-box;
	width: 100%;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--vmw-linie-2);
	border-radius: 8px;
	background: #FFFFFF;
	font-family: inherit;
	font-size: 14px;
	color: var(--vmw-ink);
}

.vmw-seite.vmw-archivfilter .vmw-archivsuche__liste {
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
}

/* Ein Vorschlag sieht aus wie eine Option darunter -- Name links, Zahl
   rechts --, nur ohne Kaestchen: er wird erst eines, wenn man ihn waehlt.
   `is-markiert` ist die Tastaturwahl (Pfeiltasten), sie folgt derselben
   Toenung wie ein offener Klappkopf. */
.vmw-seite.vmw-archivfilter .vmw-archivsuche__treffer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 11px;
	padding: 10px 8px;
	border-radius: 6px;
	font-size: 14px;
	color: var(--vmw-soft);
	cursor: pointer;
}

.vmw-seite.vmw-archivfilter .vmw-archivsuche__treffer:hover,
.vmw-seite.vmw-archivfilter .vmw-archivsuche__treffer.is-markiert {
	background: var(--vmw-flaeche);
	color: var(--vmw-beere);
}

.vmw-seite.vmw-archivfilter .vmw-archivsuche__treffer[aria-disabled="true"] {
	color: var(--vmw-gesperrt);
	cursor: default;
}

.vmw-seite.vmw-archivfilter .vmw-archivsuche__treffer[aria-selected="true"] {
	font-weight: 600;
}

/* Waehrend die gefilterte Seite laedt (1,3 bis 1,8 s, nie aus dem
   Seitencache): die Leiste nimmt keinen zweiten Klick an, und das soll man
   ihr ansehen. */
.vmw-seite.vmw-archivfilter[aria-busy="true"] {
	cursor: progress;
}

.vmw-seite.vmw-archivfilter[aria-busy="true"] .vmw-archivfilter__form {
	opacity: 0.6;
	transition: opacity var(--vmw-uebergang);
}

/* Schmal ohne Hoehengrenze stuende das Panel der Herkunft (rund 20 Zeilen
   zu 44px) weit unter dem Fenster, und sein Ende waere nur ueber die Seite
   zu erreichen. Ab 768px gilt die Grenze der Grundfassung. */
@media (max-width: 767.98px) {
	.vmw-seite.vmw-archivfilter .vmw-gruppe__inhalt {
		max-height: min(420px, 60vh);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

/* WOHIN DIE PANELS AUFGEHEN. Die Winzerseite hat hoechstens sechs Gruppen,
   und dort oeffnen "die letzten beiden" nach links -- bei fuenf Spalten in
   der ersten Zeile und einer in der zweiten ist das die rechte Kante. Im
   Archiv sind es bis zu acht: fuenf plus drei. Dann laege die fuenfte
   Gruppe rechts aussen und oeffnete nach rechts aus der Tafel hinaus.
   Deshalb hier nach der Spalte statt nach der Stellung am Ende: bei drei
   Spalten oeffnet die dritte nach links, bei fuenf die vierte und fuenfte. */
@media (min-width: 768px) {
	.vmw-seite.vmw-archivfilter {
		margin: 0 0 30px;
		padding: 0;
	}

	/* DIE ZEILENHOEHE DARF NICHT AN DER SCHRIFT HAENGEN (24.09.2026).

	   Auf der Winzerseite brechen die Chips ab 768px um, und der Filterknopf
	   steht neben ihnen, wenn er passt. Im Archiv sind es bis zu acht Chips,
	   und auf /weine/ bei 1440px passte der Knopf mit der Webschrift gerade
	   noch daneben, mit der Ersatzschrift davor nicht: er stand erst in einer
	   eigenen Zeile und sprang nach 0,4 s hinauf. Die ganze Seite darunter
	   rutschte 54px -- gemessen CLS 0,376, fuenfmal in Folge. Auf der
	   Winzerseite faellt so ein Sprung nicht ins Gewicht, sie steht weit
	   unten; hier steht die Leiste im ersten Bildschirm.

	   Deshalb im Archiv an jeder Breite wie schmal: die Chips in EINER Zeile,
	   die man schiebt, und der Knopf immer in der Zeile darunter. Welche
	   Schrift gerade gilt, aendert dann Breiten, aber keine Hoehe. */
	.vmw-seite.vmw-archivfilter .vmw-chips {
		flex: 1 0 100%;
		flex-wrap: nowrap;
		overflow-x: auto;
		padding: 6px 0;
		scroll-snap-type: x proximity;
	}


	.vmw-seite.vmw-archivfilter .vmw-gruppe > .vmw-gruppe__inhalt {
		left: 0;
		right: auto;
	}

	.vmw-seite.vmw-archivfilter .vmw-gruppe:nth-child(3n) > .vmw-gruppe__inhalt {
		left: auto;
		right: 0;
	}
}

@media (min-width: 1025px) {
	.vmw-seite.vmw-archivfilter .vmw-gruppe:nth-child(3n) > .vmw-gruppe__inhalt {
		left: 0;
		right: auto;
	}

	.vmw-seite.vmw-archivfilter .vmw-gruppe:nth-child(5n+4) > .vmw-gruppe__inhalt,
	.vmw-seite.vmw-archivfilter .vmw-gruppe:nth-child(5n) > .vmw-gruppe__inhalt {
		left: auto;
		right: 0;
	}
}

/* OHNE SKRIPT. Serverseitig steht die Fassung MIT Skript da (Tafel zu,
   Filterknopf sichtbar), weil jede Aenderung beim Start im ersten
   Bildschirm die Seite verschoebe. Diese Abfrage schaltet um, wenn gar kein
   Skript laeuft: Tafel auf, der Absendeknopf der Sortierung und der Reset
   sichtbar, und weg, was nur mit Skript etwas tut (Filterknopf,
   Schnellauswahl, Geschmack, die Reihe der gesetzten Filter).

   `!important` gegen `!important`: `.vmw-seite [hidden]` (Abschnitt 2) haelt
   jedes `hidden` fest, und nur eine hoehere Spezifitaet mit derselben
   Markierung loest es. Browser ohne `scripting` (vor Chrome 120, Safari 17,
   Firefox 113) bleiben ohne Skript bei der Fassung mit Skript -- sie
   filtern dann ueber die Chips und die Sortierung, nicht ueber die Tafel. */
@media (scripting: none) {
	.vmw-seite.vmw-archivfilter [data-vmw-js] {
		display: none !important;
	}

	.vmw-seite.vmw-archivfilter .vmw-leiste__zeile--zwei[data-vmw-ohnejs][hidden] {
		display: flex !important;
	}

	.vmw-seite.vmw-archivfilter button[data-vmw-ohnejs][hidden] {
		display: inline-flex !important;
	}
}

/* ------------------------------------------------------------------ */
/* 16  Frontend-Review vom 24.09.2026, Gruppen A bis C                 */
/* ------------------------------------------------------------------ */
/*
   Befunde und Messwerte: design/frontend-review-2026-09-24.md, Ist gegen
   Neu in design/frontend-review-2026-09-24/vorschau/ (136 Zusicherungen).

   Bewusst als ein Abschnitt AM ENDE und nicht in die Sektionen verteilt:
   genau in dieser Lage ist er gegen die Seite geprüft worden. Jede Regel
   nutzt denselben Selektor wie die, die sie ändert, und gewinnt allein
   durch die Reihenfolge -- in die Sektionen einsortiert, stünde sie vor den
   Breiten-Blöcken aus Abschnitt 14 und verlöre gegen sie, still (vgl.
   „CSS-Zusatz steht vor dem 1025er-Block"). Wer eine Regel hier später in
   ihre Sektion zieht, zieht die Breiten-Regeln mit.

   Was nicht hier steht, weil es kein CSS ist:
     A5  Fokus nur nach Tastatur        winzer.js, sortiment() und archiv()
     A6  sanftes Scrollen               winzer.js, scrollArt()
     A10 getippte Anführungszeichen     data/hero.php, zitat_ohne_zeichen()
     A12 ein Link je Karte              templates/blocks/aehnliche-karten.php
*/

/* ------------------------------------------------------------------ */
/* A1  Fokusring auf den hellen Karten im Beere-Band                   */
/* Das Band stellt den Ring auf Weiß; die weiße Paketkarte und die      */
/* cremefarbene Winzerhof-Karte stellen ihn zurück. Zwillingszeile für  */
/* Woodmart wie in winzer.css:202-208.                                  */
/* ------------------------------------------------------------------ */
.vmw-seite .vmw-paket--p1 .vmw-paketkarte,
.vmw-seite .vmw-erlebnis--u2 .vmw-erlebnis__intro {
	--vmw-fokus-ring: var(--vmw-beere);
	--wd-otl-color: var(--vmw-beere);
}

/* ------------------------------------------------------------------ */
/* A2  Rolle unter dem Kuratornamen: reines Weiß, wie der Name          */
/* ------------------------------------------------------------------ */
.vmw-seite .vmw-person__rolle {
	color: #FFFFFF;
}

/* ------------------------------------------------------------------ */
/* A3  P1/U2-Rohfarben auf Tokens. Das Angebot-Badge (5,16:1) und      */
/*     `--vmw-text` -> `--vmw-ink` sind in Abschnitt 1 und 8 geändert.   */
/* ------------------------------------------------------------------ */
.vmw-seite .vmw-paket--p1 .vmw-paketkarte__titel { color: var(--vmw-ink); }
.vmw-seite .vmw-paket--p1 .vmw-paketkarte__verteilung { color: var(--vmw-muted); }
.vmw-seite .vmw-paket--p1 .vmw-paket__kuration { color: var(--vmw-muted); }
.vmw-seite .vmw-paket--p1 .vmw-paket__zaehler { color: var(--vmw-muted); }
.vmw-seite .vmw-paket--p1 .vmw-paket__details summary { color: var(--vmw-ink); }
.vmw-seite .vmw-paket--p1 .vmw-paket__vorschau { color: var(--vmw-muted); }
.vmw-seite .vmw-paket--p1 .vmw-paketwein__name { color: var(--vmw-ink); }
.vmw-seite .vmw-paket--p1 .vmw-paketwein__jahr { color: var(--vmw-muted); }
.vmw-seite .vmw-paket--p1 .vmw-paketwein__notiz { color: var(--vmw-soft); }
.vmw-seite .vmw-paket--p1 .vmw-paket__vergleich { color: var(--vmw-muted); }
.vmw-seite .vmw-paket--p1 .vmw-paket__betrag { color: var(--vmw-ink); }
.vmw-seite .vmw-paket--p1 .vmw-paket__grundpreis { color: var(--vmw-ink); }
.vmw-seite .vmw-paket--p1 .vmw-paket__steuer { color: var(--vmw-muted); }
.vmw-seite .vmw-erlebnis--u2 .vmw-erlebnis__intro { color: var(--vmw-ink); }
.vmw-seite .vmw-erlebnis--u2 .vmw-erlebnis__titel { color: var(--vmw-ink); }
.vmw-seite .vmw-erlebnis--u2 .vmw-erlebnis__einleitung { color: var(--vmw-muted); }

/* ------------------------------------------------------------------ */
/* A4  Sprungleiste: der Fokusring liegt innen, Zähler 11px             */
/* Die Reihe schneidet mit overflow-x:auto auch senkrecht; ein Ring mit  */
/* 3px Abstand nach außen verlor oben und unten je 4-5px. Nach innen     */
/* gelegt bleibt er ganz, und die Höhe der Leiste ändert sich nicht.     */
/* ------------------------------------------------------------------ */
.vmw-seite .vmw-hero__reiter > a:focus-visible {
	outline-offset: -2px;
}
.vmw-seite .vmw-hero__zaehler {
	min-width: 18px;
	height: 18px;
	padding-inline: 4px;
	border-radius: 999px;
	font-size: 11px;
}

/* ------------------------------------------------------------------ */
/* A7  Herkunft ohne Handschrift-Band trägt ihr Polster selbst.         */
/* :has() statt einer Template-Klasse: das Band ist ein eigener Block,  */
/* der ohne Daten ganz fehlt; die Sektion weiß davon sonst nichts.      */
/* ------------------------------------------------------------------ */
.vmw-seite .vmw-herkunft:not(:has(> .vmw-handschrift)) {
	padding-bottom: var(--vmw-sekt-unten);
}

/* ------------------------------------------------------------------ */
/* A9  Winzerhof-Titel eine Stufe unter der H2 (28/34): 26 / 30         */
/* ------------------------------------------------------------------ */
.vmw-seite .vmw-erlebnis--u2 .vmw-erlebnis__titel {
	font-size: 26px;
}

/* ------------------------------------------------------------------ */
/* A10 Winzerzitat mit deutschen Anführungszeichen, das öffnende hängt  */
/* ------------------------------------------------------------------ */
.vmw-seite .vmw-buehne__zitat::before {
	content: "\201E";
}
.vmw-seite .vmw-buehne__zitat::after {
	content: "\201C";
}
.vmw-seite .vmw-buehne__zitat {
	text-indent: -0.42em;
}

/* ------------------------------------------------------------------ */
/* A11 Über Vinomeet: Abstand zur Winzerhof-Karte wie im Entwurf        */
/*     (schmal 34, breit 52 statt 64 / 100), Punkte ohne Haarlinien.     */
/* ------------------------------------------------------------------ */
.vmw-seite .vmw-erlebnis--u2 {
	margin-top: 18px;
	padding-top: 0;
}
.vmw-seite .vmw-punkte {
	display: flex;
	flex-direction: column;
	gap: 17px;
	border-top: 0;
}
.vmw-seite .vmw-punkt {
	padding: 0;
	border-bottom: 0;
}

/* ------------------------------------------------------------------ */
/* A12 Nachbarkarte: EIN Link je Karte über die ganze Fläche.            */
/* Der Textlink „Weine ansehen“ wird im Template ein <span>.            */
/* ------------------------------------------------------------------ */
.vmw-seite .vmw-nachbar {
	position: relative;
}
.vmw-seite .vmw-nachbar .vmw-h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.vmw-seite .vmw-nachbar:hover .vmw-h3 a {
	text-decoration: underline;
	text-underline-offset: 4px;
}
.vmw-seite .vmw-nachbar:hover .vmw-nachbar__fuss .vmw-textlink {
	color: var(--vmw-beere-dunkel);
}
.vmw-seite .vmw-nachbar .vmw-h3 a:focus-visible {
	outline: 0;
}
.vmw-seite .vmw-nachbar:has(.vmw-h3 a:focus-visible) {
	outline: 2px solid var(--vmw-fokus-ring);
	outline-offset: 3px;
}

/* ------------------------------------------------------------------ */
/* A13 Brotkrume: der Trenner hängt am vorigen Eintrag, eine umbrechende */
/*     Zeile beginnt nie mit „·“.                                        */
/* ------------------------------------------------------------------ */
.vmw-seite .vmw-hero__brotkrume li + li::before {
	content: none;
}
.vmw-seite .vmw-hero__brotkrume li:not(:last-child)::after {
	content: "·";
	margin-left: 6px;
	color: var(--vmw-linie-2);
}

/* ------------------------------------------------------------------ */
/* A15 Offenes FAQ-Zeichen: echtes Minus (U+2212) wie Paket und Spez     */
/* ------------------------------------------------------------------ */
.vmw-seite .vmw-frage[open] > .vmw-frage__kopf::after {
	content: "\2212";
}

/* ------------------------------------------------------------------ */
/* C1  Lesebreite: höchstens ca. 80 Zeichen je Zeile (Jost 16px ≈ 7px   */
/*     je Zeichen, 35em = 560px). Liste, Linien und Panel bleiben.       */
/* ------------------------------------------------------------------ */
.vmw-seite {
	--vmw-lesebreite: 35em;
}
.vmw-seite .vmw-frage__antwort,
.vmw-seite .vmw-seo__text,
.vmw-seite .vmw-ueber__text .vmw-fliesstext,
.vmw-seite .vmw-herkunft__einleitung .vmw-fliesstext,
.vmw-seite .vmw-erlebnis--u2 .vmw-erlebnis__einleitung {
	max-width: var(--vmw-lesebreite);
}

/* ------------------------------------------------------------------ */
/* C2  Kachel: Schriftleiter 12 / 14 / 16 / 21 / 26 (sichtbar waren neun */
/*     Grade: 11, 12, 13, 14, 14,5, 15, 16, 21, 26).                     */
/*     Entschieden und unverändert: Name 21, Preis 26, Literpreis 14,    */
/*     Geschmacks- und Speisezeile 14, Knopf 16. Gilt shopweit.          */
/* ------------------------------------------------------------------ */
.vmw-seite .vmw-stepper__taste {
	font-size: 16px;
}
.vmw-seite .vmw-kachel__weingut,
.vmw-seite .vmw-geschmack,
.vmw-seite .vmw-kachel__vertrauen,
.vmw-seite .vmw-kachel__steuer {
	font-size: 12px;
}
.vmw-seite .vmw-kauf__zeile {
	font-size: 14px;
}
.vmw-seite .vmw-kauf__zeile.is-gewaehlt .vmw-kauf__preis {
	font-size: 14px;
}

/* ------------------------------------------------------------------ */
/* C4  Serif-Zitate mit etwas mehr Durchschuss als der Jost-Text (1,6).  */
/*     Das Hero-Zitat schmal bleibt (Höhenbudget 611/614px).             */
/* ------------------------------------------------------------------ */
.vmw-seite .vmw-stimme__zitat,
.vmw-seite .vmw-buehne__zitat {
	line-height: 1.65;
}

/* ------------------------------------------------------------------ */
/* C5  Band-Frage als Einlauf in Satzschreibung (V5), nicht als Versal   */
/* ------------------------------------------------------------------ */
.vmw-seite .vmw-handschrift .vmw-eyebrow {
	font-size: var(--vmw-schrift-meta);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

/* ================================================================== */
/* Schmal (unter 768px)                                                */
/* ================================================================== */
@media (max-width: 767px) {
	/* B4  Alleinstehende Textlinks: 44px Trefferfläche ohne Layoutänderung. */
	.vmw-seite .vmw-stimme__fuss .vmw-textlink,
	.vmw-seite .vmw-nachbar__fuss .vmw-textlink,
	.vmw-seite .vmw-handschrift .vmw-textlink,
	.vmw-seite .vmw-aehnliche__zeile .vmw-textlink,
	.vmw-seite .vmw-kachel .vmw-kachel__recht .vmw-textlink {
		padding-block: 12px;
		margin-block: -12px;
	}
}

/* ================================================================== */
/* Ab 768px                                                             */
/* ================================================================== */
@media (min-width: 768px) {
	/* A8  Die Herkunft behält die exakte Kante. Ihre Kinder rechnen mit
	   100% der Sektion (= Dokumentbreite, die Sektion hat hier kein
	   Polster) statt mit `--vmw-gutter`, der mit 100vw rechnet und um
	   einen halben Rollbalken zu groß ist. Die Eigenschaft wird beim
	   Verbraucher aufgelöst -- für die direkten Kinder genau richtig. */
	.vmw-seite .vmw-herkunft {
		--vmw-kante: max(15px, calc((100% - var(--vmw-container) + 30px) / 2));
	}
	.vmw-seite .vmw-herkunft__kopf {
		padding: 0 var(--vmw-kante);
	}
	.vmw-seite .vmw-fakten,
	.vmw-seite .vmw-karten,
	.vmw-seite .vmw-signale {
		margin: 0 var(--vmw-kante);
	}
	.vmw-seite .vmw-buehne {
		width: calc(100% - 2 * var(--vmw-kante));
	}
	.vmw-seite .vmw-handschrift {
		padding: 52px var(--vmw-kante) 56px;
	}

	/* A9  */
	.vmw-seite .vmw-erlebnis--u2 .vmw-erlebnis__titel {
		font-size: 30px;
	}

	/* A11 16px gap + 36px = 52px wie im Entwurf. */
	.vmw-seite .vmw-erlebnis--u2 {
		margin-top: 36px;
	}

	/* A14 Die Initiale bleibt in zwei Zeilen: 54 x 0,8 + 6 = 49,2px unter
	   2 x 25,6 = 51,2px. */
	.vmw-seite .vmw-fliesstext--initiale > p:first-of-type::first-letter {
		line-height: 0.8;
	}

	/* B2  Drei Pakete ab 768px in drei Spalten wie im Entwurf. */
	.vmw-seite .vmw-paket--p1 .vmw-paket__liste[data-vmw-pakete="3"] {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* B5  Stimmen-Fuß: Name und Weinlink brechen als Ganzes um, statt den
	   Link in eine schmale Spalte zu drücken. */
	.vmw-seite .vmw-stimme__fuss {
		flex-wrap: wrap;
		row-gap: 8px;
	}
	.vmw-seite .vmw-stimme__name {
		flex: 0 0 auto;
	}

	/* C1  SEO: die Textspalte in Lesebreite, das Panel rückt nach rechts. */
	.vmw-seite .vmw-seo__spalten {
		grid-template-columns: minmax(0, var(--vmw-lesebreite)) minmax(260px, 420px);
		justify-content: space-between;
	}

	/* C4  Hero-Zitat breit. */
	.vmw-seite .vmw-hero__zitat {
		line-height: 1.65;
	}
}

/* ================================================================== */
/* Tablet (768 bis 1024px)                                              */
/* ================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
	/* B2  Entwurfswerte für drei schmale Karten. */
	.vmw-seite .vmw-paket--p1 .vmw-paket__liste[data-vmw-pakete="3"] .vmw-paketkarte__body {
		padding: 20px;
	}
	.vmw-seite .vmw-paket--p1 .vmw-paket__liste[data-vmw-pakete="3"] .vmw-paketkarte__titel {
		font-size: 23px;
	}

	/* B3  V5-Tabletwerte: engerer Spaltenabstand, Foto oben statt mittig,
	   Über-Bild höher. */
	.vmw-seite .vmw-herkunft__kopf,
	.vmw-seite .vmw-ueber__kopf {
		gap: 36px;
		align-items: start;
	}
	.vmw-seite .vmw-ueber__bild {
		height: 470px;
	}
}

/* ================================================================== */
/* B1  Touch-Geräte ab 768px (iPad, Handy quer): Fingergrößen zurück.   */
/* ================================================================== */
@media (pointer: coarse) and (min-width: 768px) {
	.vmw-seite {
		--vmw-knopf-s-hoehe: 44px;
	}
	.vmw-seite .vmw-option {
		padding: 12px 0;
	}
	/* 22,4px Text + 2 x 11px = 44,4px Trefferfläche; der negative Rand
	   hält das Layout, wo es war. */
	.vmw-seite .vmw-hero__zweitweg {
		padding-block: 11px;
		margin-block: -11px;
	}
}

/* ================================================================== */
/* 17  Feinschliff-Runde 16 (24.09.2026)                                */
/*                                                                      */
/* Steht am Ende aus demselben Grund wie Abschnitt 16: Herkunft, FAQ    */
/* und Ueber hatten keine eigene Regel ab 1025px, ihr "Desktop" war der */
/* 768er-Block. Eine Regel davor verloere gegen ihn, still (siehe       */
/* Kopf von Abschnitt 16). Hoechstens vier Klassen, kein !important.    */
/*                                                                      */
/*   3   Zitatbox der Herkunft: schmaler Kasten, mittig                 */
/*   4   Band "Was heisst das fuer deine Auswahl?": wieder mittig       */
/*   5   FAQ: der Abschlusskasten als Kontaktkarte rechts               */
/*   K1  Erlebnis-Leiste mit vier Angeboten                             */
/*                                                                      */
/* Schmal und auf dem Tablet bleibt alles, wie es war -- ausser der     */
/* Leiste, die dort vier Angebote als zwei mal zwei stellt.             */
/* ================================================================== */

/* K1  Tablet: vier Angebote in zwei Reihen. In einer Reihe blieben bei
   768px rund 150px Text je Spalte. Die Regeln aus Abschnitt 14 kennen nur
   "erstes" und "letztes" Kind; im Raster zwei mal zwei braucht die linke
   Spalte (ungerade) keine Linie und kein linkes Polster, die rechte
   (gerade) kein rechtes. Bei drei Angeboten greift hier nichts. */
@media (min-width: 768px) and (max-width: 1024px) {
	.vmw-seite [data-vmw-erlebnisse="4"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 36px;
	}

	.vmw-seite [data-vmw-erlebnisse="4"] > .vmw-erlebnispunkt:nth-child(odd) {
		padding-left: 0;
		border-left: 0;
	}

	.vmw-seite [data-vmw-erlebnisse="4"] > .vmw-erlebnispunkt:nth-child(even) {
		padding-right: 0;
	}
}

@media (min-width: 1025px) {

	/* 3  DIE ZITATBOX STEHT SCHMAL UND MITTIG. Bis hierher lief sie ueber
	   die volle Satzbreite (1370px bei 1440), das Zitat endete bei 880px,
	   und rechts blieben rund 420px leere Flaeche im Kasten. Jetzt ist der
	   Kasten selbst hoechstens 880px breit -- dieselbe Lesebreite wie die
	   FAQ-Liste -- und steht in der Mitte (`align-self: center` gilt seit
	   Abschnitt 14). Der Text bleibt links, das haengende Anfuehrungszeichen
	   (A10) auch. `min()` statt `max-width`, weil die Breite ab 768px aus
	   `--vmw-kante` gerechnet wird (A8) und bei 1025px schmaler sein kann
	   als 880px. */
	.vmw-seite .vmw-buehne {
		width: min(880px, calc(100% - 2 * var(--vmw-kante)));
	}

	/* 4  Das Band traegt den Inhalt wieder in der Mitte. Die Flaeche
	   bleibt vollbreit; der Satz behaelt seine 32ch und wandert mit. */
	.vmw-seite .vmw-handschrift {
		align-items: center;
		text-align: center;
	}

	/* 5  DIE FAQ WIRD ZWEISPALTIG: links die Fragen in ihrer Lesebreite,
	   rechts der Abschlusskasten als Karte mit den Kontaktzeilen. Der
	   Kasten war schon Geschwister der Liste, es braucht dafuer kein neues
	   Markup. Bei 1025px: 572 + 360px, bei 1440px: 880 + 360px, der Rest
	   geht in den Abstand (`space-between`).

	   Nicht klebend: Liste (erste Frage offen) und Karte sind etwa gleich
	   hoch, und das Plugin kennt die Hoehe von Woodmarts klebendem Kopf
	   nicht -- die Karte liefe darunter. */
	.vmw-seite .vmw-faq {
		display: grid;
		grid-template-columns: minmax(0, 880px) minmax(260px, 360px);
		justify-content: space-between;
		align-items: start;
		column-gap: 48px;
		row-gap: 34px;
	}

	.vmw-seite .vmw-faq__kopf {
		grid-column: 1 / -1;
	}

	.vmw-seite .vmw-faq__liste {
		grid-column: 1;
		grid-row: 2;
	}

	/* Die Karte: aus der 768er-Reihe (Text links, Aktionen rechts) wird
	   eine Spalte. Knopf zuerst und volle Breite, der Kontaktlink darunter
	   -- dieselbe Ordnung wie schmal. */
	.vmw-seite .vmw-faq__abschluss {
		grid-column: 2;
		grid-row: 2;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 24px;
		max-width: none;
		padding: 28px 28px 30px;
	}

	.vmw-seite .vmw-faq__abschlussaktion {
		flex-direction: column-reverse;
		align-items: center;
		gap: 14px;
	}

	.vmw-seite .vmw-faq__abschlussaktion .vmw-knopf {
		align-self: stretch;
	}

	/* K1  Vier Angebote in einer Reihe. Bei 1025px ist jede Spalte rund
	   245px breit; mit den 36px Polster aus Abschnitt 14 blieben 173px
	   Text. Das Polster waechst deshalb mit der Breite mit (25,6px bei
	   1025, 36px ab 1440). Erstes und letztes Angebot behalten ihre
	   Aussenkante ohne Polster. */
	.vmw-seite [data-vmw-erlebnisse="4"] {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.vmw-seite [data-vmw-erlebnisse="4"] > .vmw-erlebnispunkt:not(:first-child) {
		padding-left: clamp(20px, 2.5vw, 36px);
	}

	.vmw-seite [data-vmw-erlebnisse="4"] > .vmw-erlebnispunkt:not(:last-child) {
		padding-right: clamp(20px, 2.5vw, 36px);
	}
}

/* ================================================================== */
/* 18  Reihenflucht (25.09.2026)                                        */
/*                                                                      */
/* Der Kunde zeigte Reihen, in denen Bild, Titel und Kaufknopf          */
/* fluchteten, Trennlinie und Preis aber von Kachel zu Kachel sprangen  */
/* -- im Tab "Weinpakete" der Startseite um bis zu 165px. Ursache war   */
/* das `margin-top: auto` am Preis (Abschnitt 6): es schiebt Preis UND  */
/* alles darunter als EINEN Block an die Unterkante, und dieser Block   */
/* ist je Produkt verschieden hoch -- "Du sparst", Lebensmittelangaben, */
/* eine Kaufbox mit drei, zwei oder gar keiner Zeile.                   */
/*                                                                      */
/* Hier teilen die Kacheln einer Reihe ihre Zeilen: jede Zone liegt auf */
/* einer eigenen Spur eines gemeinsamen Rasters (`subgrid`), und jede   */
/* Spur ist so hoch wie ihr hoechster Eintrag in der Reihe. Damit stehen*/
/* Titelanfang, Trennlinie, Steuerzeile, Unterkante der Kaufbox und     */
/* Knopf je auf einer Hoehe. Der Leerraum verschwindet nicht, er        */
/* wandert: dorthin, wo einer Kachel etwas fehlt, das die Nachbarin hat.*/
/*                                                                      */
/* DREI WURZELN, JE EINE KETTE                                          */
/*   Karussell   .wd-carousel-wrap > .wd-carousel-item > .wd-product    */
/*               > .vmw-loop > .vmw-raster > .vmw-kachel                */
/*   Archiv      .wd-products > .wd-product > .vmw-loop > .vmw-raster   */
/*               > .vmw-kachel                                          */
/*   Winzerseite .vmw-sortiment > .vmw-raster > .vmw-kachel             */
/* Ein Subgrid greift nur, wenn JEDE Ebene bis zur Wurzel mitmacht;     */
/* sonst wird es zu einem gewoehnlichen Raster, und das verteilt mit    */
/* `height: 100%` den Leerraum auf alle Zonen. Deshalb haengt jede      */
/* Regel an der ganzen Kette: passt ein Glied nicht, bleibt die Kachel  */
/* im Flex-Layout von Abschnitt 6.                                      */
/*                                                                      */
/* ABSTAENDE                                                            */
/* Die Luecke von 9px der Flex-Kachel wird zu Raendern an den Zonen,    */
/* `row-gap` ist ueberall 0. Eine Luecke laege auch um leere Spuren     */
/* (fehlendes Weingut, fehlende Ersparnis), ein Rand faellt mit seiner  */
/* Zone weg. Jeder Wert ergibt denselben Abstand wie vorher:            */
/*   Bild -> Weingut 6+9 = 15      Bild -> Name 6+9 = 15                */
/*   Weingut -> Name -5+9 = 4      Preis -> Ersparnis 4                 */
/*   Preis/Ersparnis -> Steuer 14  Steuer -> Recht 5                    */
/*   Recht -> Fuss 10+9 = 19       Steuer -> Fuss 9                     */
/* 5 und 19 prueft `pruefling.js` (je +-2).                             */
/*                                                                      */
/* WO ES NICHT GREIFT                                                   */
/* Unter 768px: eine Kachel je Reihe bzw. je Ansicht, nichts zu         */
/* fluchten -- und dort liegen die iPhone-Befunde, die niemand wieder   */
/* anfassen soll. Ohne `subgrid` (Safari vor 16) oder `:has()` (Firefox */
/* vor 121) bleibt der Stand vor dem 25.09.2026.                        */
/*                                                                      */
/* Gemessen mit `werkzeuge/abnahme/reihenflucht.cjs` (Streuung <= 1px), */
/* Gegenprobe: ohne diesen Abschnitt ist es rot.                        */
/* ================================================================== */

@supports (grid-template-rows: subgrid) {
	@media (min-width: 768px) {

		/* --- Wurzeln ------------------------------------------------- */

		/* Karussell: aus der Flex-Spur von Swiper wird ein Raster mit einer
		   Spalte je Folie. Swiper setzt jeder Folie `width` = Containerbreite
		   / Kartenzahl und rechnet seine Verschiebung aus diesen Groessen,
		   nicht aus dem Fluss -- die Spalten hier sind genau so breit, auch
		   vor dem Start, wenn WP Rocket `swiperInit.js` noch zurueckhaelt.
		   Das `max-width` in Prozent bezoege sich im Raster auf die Spalte
		   statt auf das Karussell und muss weg. */
		.wd-carousel-wrap:has(> .wd-carousel-item > .wd-product > .vmw-loop) {
			display: grid;
			grid-auto-flow: column;
			grid-auto-columns: calc(100% / var(--wd-col));
			grid-template-rows: repeat(8, auto);
			row-gap: 0;
			column-gap: 0;
		}

		.wd-carousel-wrap:has(> .wd-carousel-item > .wd-product > .vmw-loop) > .wd-carousel-item {
			grid-row: 1 / -1;
			max-width: none;
			height: auto;
		}

		/* Archiv: Woodmarts Raster (`gap: var(--wd-gap)`, 20px). Jede Karte
		   ueberspannt acht Zeilen, auch eine Woodmart-Karte ohne unsere
		   Kachel -- sonst verrutschte die automatische Platzierung. Der
		   Reihenabstand kommt als Rand unter jede Karte; der negative Rand
		   am Raster nimmt ihn unter der letzten Reihe wieder weg. */
		.wd-products:has(> .wd-product > .vmw-loop) {
			row-gap: 0;
			margin-bottom: calc(-1 * var(--wd-gap, 0px));
		}

		.wd-products:has(> .wd-product > .vmw-loop) > * {
			grid-row: span 8;
			margin-bottom: var(--wd-gap, 0px);
		}

		/* Winzerseite: 44px Reihenabstand (Abschnitt 14) plus Woodmarts
		   `:is(ul, ol) li { margin-bottom: var(--li-mb) }` -- zwischen zwei
		   Reihen standen bisher 54px, und genau die bleiben. */
		.vmw-sortiment > .vmw-raster {
			row-gap: 0;
			margin-bottom: -44px;
		}

		.vmw-sortiment > .vmw-raster > .vmw-kachel {
			grid-row: span 8;
			margin-bottom: calc(44px + var(--li-mb, 0px));
		}

		.vmw-sortiment > .vmw-raster > .vmw-kachel:last-child {
			margin-bottom: 44px;
		}

		/* --- Zwischenebenen ------------------------------------------ */

		.wd-carousel-wrap:has(> .wd-carousel-item > .wd-product > .vmw-loop) > .wd-carousel-item:has(> .wd-product > .vmw-loop),
		.wd-carousel-wrap:has(> .wd-carousel-item > .wd-product > .vmw-loop) > .wd-carousel-item > .wd-product:has(> .vmw-loop),
		.wd-carousel-wrap:has(> .wd-carousel-item > .wd-product > .vmw-loop) > .wd-carousel-item > .wd-product > .vmw-loop,
		.wd-carousel-wrap:has(> .wd-carousel-item > .wd-product > .vmw-loop) > .wd-carousel-item > .wd-product > .vmw-loop > .vmw-raster,
		.wd-products:has(> .wd-product > .vmw-loop) > .wd-product:has(> .vmw-loop),
		.wd-products:has(> .wd-product > .vmw-loop) > .wd-product > .vmw-loop,
		.wd-products:has(> .wd-product > .vmw-loop) > .wd-product > .vmw-loop > .vmw-raster {
			display: grid;
			/* EINE Spalte, ausdruecklich. `.vmw-raster` traegt aus Abschnitt
			   14 drei Spalten ab 1025px; im Shop machte sie bisher nur
			   `display: block` gegenstandslos. Als Raster kaeme die Treppe
			   zurueck, und die Kachel bekaeme ein Drittel ihrer Karte --
			   121px, gemessen in der ersten Probe am 25.09.2026, derselbe
			   Befund wie am 22.09.2026. Der Boden 0 haelt die Spur schmal,
			   wenn eine Paketzeile mit `nowrap` breiter waere. */
			grid-template-columns: minmax(0, 1fr);
			column-gap: 0;
			grid-template-rows: subgrid;
			row-gap: 0;
			height: auto;
		}

		/* `1 / -1` zaehlt in einem Subgrid die Linien des Subgrids, also
		   seine acht Spuren. Die Karte im Archiv traegt schon `span 8` (oben)
		   -- `1 / -1` hiesse dort "die explizite Zeile des Woodmart-Rasters",
		   und das hat keine. */
		.wd-carousel-wrap:has(> .wd-carousel-item > .wd-product > .vmw-loop) > .wd-carousel-item > .wd-product:has(> .vmw-loop),
		.wd-carousel-wrap:has(> .wd-carousel-item > .wd-product > .vmw-loop) > .wd-carousel-item > .wd-product > .vmw-loop,
		.wd-carousel-wrap:has(> .wd-carousel-item > .wd-product > .vmw-loop) > .wd-carousel-item > .wd-product > .vmw-loop > .vmw-raster,
		.wd-products:has(> .wd-product > .vmw-loop) > .wd-product > .vmw-loop,
		.wd-products:has(> .wd-product > .vmw-loop) > .wd-product > .vmw-loop > .vmw-raster {
			grid-row: 1 / -1;
		}

		/* --- Die Kachel ---------------------------------------------- */

		:is(
			.wd-carousel-wrap:has(> .wd-carousel-item > .wd-product > .vmw-loop) > .wd-carousel-item > .wd-product > .vmw-loop > .vmw-raster,
			.wd-products:has(> .wd-product > .vmw-loop) > .wd-product > .vmw-loop > .vmw-raster,
			.vmw-sortiment > .vmw-raster
		) > .vmw-kachel {
			display: grid;
			grid-template-columns: minmax(0, 1fr);
			grid-template-rows: subgrid [bild] [weingut] [text] [preis] [ersparnis] [steuer] [recht] [fuss] [ende];
			row-gap: 0;
			height: auto;
		}

		:is(
			.wd-carousel-wrap:has(> .wd-carousel-item > .wd-product > .vmw-loop) > .wd-carousel-item > .wd-product > .vmw-loop > .vmw-raster,
			.wd-products:has(> .wd-product > .vmw-loop) > .wd-product > .vmw-loop > .vmw-raster
		) > .vmw-kachel {
			grid-row: 1 / -1;
		}

		:is(
			.wd-carousel-wrap:has(> .wd-carousel-item > .wd-product > .vmw-loop) > .wd-carousel-item > .wd-product > .vmw-loop > .vmw-raster,
			.wd-products:has(> .wd-product > .vmw-loop) > .wd-product > .vmw-loop > .vmw-raster,
			.vmw-sortiment > .vmw-raster
		) > .vmw-kachel > .vmw-kachel__bild {
			grid-row: bild / weingut;
			margin-bottom: 6px;
		}

		:is(
			.wd-carousel-wrap:has(> .wd-carousel-item > .wd-product > .vmw-loop) > .wd-carousel-item > .wd-product > .vmw-loop > .vmw-raster,
			.wd-products:has(> .wd-product > .vmw-loop) > .wd-product > .vmw-loop > .vmw-raster,
			.vmw-sortiment > .vmw-raster
		) > .vmw-kachel > .vmw-kachel__weingut {
			grid-row: weingut / text;
			margin: 9px 0 -5px;
		}

		/* Weingut und Text auf getrennten Spuren: ein Paket hat kein
		   Weingut, und sein Name stuende sonst 20px ueber dem Weinnamen
		   daneben. So bleibt beim Paket die Weingut-Zeile leer, und die
		   Titel fluchten. */
		:is(
			.wd-carousel-wrap:has(> .wd-carousel-item > .wd-product > .vmw-loop) > .wd-carousel-item > .wd-product > .vmw-loop > .vmw-raster,
			.wd-products:has(> .wd-product > .vmw-loop) > .wd-product > .vmw-loop > .vmw-raster,
			.vmw-sortiment > .vmw-raster
		) > .vmw-kachel > .vmw-kachel__text {
			grid-row: text / preis;
			margin-top: 9px;
		}

		:is(
			.wd-carousel-wrap:has(> .wd-carousel-item > .wd-product > .vmw-loop) > .wd-carousel-item > .wd-product > .vmw-loop > .vmw-raster,
			.wd-products:has(> .wd-product > .vmw-loop) > .wd-product > .vmw-loop > .vmw-raster,
			.vmw-sortiment > .vmw-raster
		) > .vmw-kachel > .vmw-kachel__text > .vmw-kachel__name {
			margin-top: 0;
		}

		/* 9px statt `auto`: im Raster schoebe `auto` den Preis nur innerhalb
		   seiner eigenen Spur nach unten -- bricht bei einer Kachel der
		   Grundpreis um, stuende die Trennlinie der anderen dann tiefer. */
		:is(
			.wd-carousel-wrap:has(> .wd-carousel-item > .wd-product > .vmw-loop) > .wd-carousel-item > .wd-product > .vmw-loop > .vmw-raster,
			.wd-products:has(> .wd-product > .vmw-loop) > .wd-product > .vmw-loop > .vmw-raster,
			.vmw-sortiment > .vmw-raster
		) > .vmw-kachel > .vmw-kachel__preis {
			grid-row: preis / ersparnis;
			margin-top: 9px;
		}

		:is(
			.wd-carousel-wrap:has(> .wd-carousel-item > .wd-product > .vmw-loop) > .wd-carousel-item > .wd-product > .vmw-loop > .vmw-raster,
			.wd-products:has(> .wd-product > .vmw-loop) > .wd-product > .vmw-loop > .vmw-raster,
			.vmw-sortiment > .vmw-raster
		) > .vmw-kachel > .vmw-kachel__ersparnis {
			grid-row: ersparnis / steuer;
			margin: 4px 0 0;
		}

		:is(
			.wd-carousel-wrap:has(> .wd-carousel-item > .wd-product > .vmw-loop) > .wd-carousel-item > .wd-product > .vmw-loop > .vmw-raster,
			.wd-products:has(> .wd-product > .vmw-loop) > .wd-product > .vmw-loop > .vmw-raster,
			.vmw-sortiment > .vmw-raster
		) > .vmw-kachel > .vmw-kachel__steuer {
			grid-row: steuer / recht;
			margin-top: 14px;
		}

		:is(
			.wd-carousel-wrap:has(> .wd-carousel-item > .wd-product > .vmw-loop) > .wd-carousel-item > .wd-product > .vmw-loop > .vmw-raster,
			.wd-products:has(> .wd-product > .vmw-loop) > .wd-product > .vmw-loop > .vmw-raster,
			.vmw-sortiment > .vmw-raster
		) > .vmw-kachel > .vmw-kachel__recht {
			grid-row: recht / fuss;
			margin: 5px 0 10px;
		}

		/* Der Fuss fuellt seine Spur und stellt Kaufbox und Knopf an ihre
		   Unterkante: die beiden bleiben beisammen, und Menge und Knopf
		   fluchten auch dann, wenn die Nachbarin eine Zeile mehr in der
		   Kaufbox hat. Seit dem 29.09.2026 hat jeder Fuss eine. */
		:is(
			.wd-carousel-wrap:has(> .wd-carousel-item > .wd-product > .vmw-loop) > .wd-carousel-item > .wd-product > .vmw-loop > .vmw-raster,
			.wd-products:has(> .wd-product > .vmw-loop) > .wd-product > .vmw-loop > .vmw-raster,
			.vmw-sortiment > .vmw-raster
		) > .vmw-kachel > .vmw-kachel__fuss {
			grid-row: fuss / ende;
			margin-top: 9px;
			justify-content: flex-end;
		}

		/* DIE MISCHFORM IST ENTFALLEN (29.09.2026). Vom 28.09. an stand der
		   Knopf eines Fusses ohne Kaufbox (Paket, "Zum Wein", ohne Preis)
		   direkt unter den Pflichtangaben, die Luecke am Kachelende. Seit
		   jede Kachel eine Kaufbox hat -- das Paket dieselbe Kaufzeile wie der
		   Wein, "Zum Wein" und "ohne Preis" die graue Box --, gibt es diesen
		   Fuss nicht mehr, und die Regel oben gilt fuer alle: Box und Knopf an
		   der Unterkante, bei allen Arten auf einer Hoehe. Entschieden am
		   Bildvergleich V1-V3 (design/kaufbereich-varianten/).

		   DIE DEHNUNGSKETTE. Bricht in einer Kachel Zeile 2 der Box um (313 bis
		   355px Kachelbreite, ein langer Vergleich, spaeter der Mengenrabatt),
		   wird die Fuss-Spur der ganzen Gruppe hoeher. Ohne Kette stuende die
		   Box der anderen Kacheln unveraendert an der Unterkante, und ihre
		   Oberkante laege tiefer. Mit Kette fuellt jede Box die Spur, und
		   Zeile 2 nimmt den Zuwachs auf: Box-Oberkante, Menge und Knopf
		   bleiben in einer Flucht (reihenflucht.cjs Z6; Gegenprobe ohne Kette
		   rot, 28.09.2026). */
		:is(
			.wd-carousel-wrap:has(> .wd-carousel-item > .wd-product > .vmw-loop) > .wd-carousel-item > .wd-product > .vmw-loop > .vmw-raster,
			.wd-products:has(> .wd-product > .vmw-loop) > .wd-product > .vmw-loop > .vmw-raster,
			.vmw-sortiment > .vmw-raster
		) > .vmw-kachel > .vmw-kachel__fuss > .vmw-kauf,
		:is(
			.wd-carousel-wrap:has(> .wd-carousel-item > .wd-product > .vmw-loop) > .wd-carousel-item > .wd-product > .vmw-loop > .vmw-raster,
			.wd-products:has(> .wd-product > .vmw-loop) > .wd-product > .vmw-loop > .vmw-raster,
			.vmw-sortiment > .vmw-raster
		) > .vmw-kachel > .vmw-kachel__fuss > .vmw-kauf > .vmw-kauf__liste,
		:is(
			.wd-carousel-wrap:has(> .wd-carousel-item > .wd-product > .vmw-loop) > .wd-carousel-item > .wd-product > .vmw-loop > .vmw-raster,
			.wd-products:has(> .wd-product > .vmw-loop) > .wd-product > .vmw-loop > .vmw-raster,
			.vmw-sortiment > .vmw-raster
		) > .vmw-kachel > .vmw-kachel__fuss .vmw-kauf__liste > .vmw-kauf__zeile + .vmw-kauf__zeile:not(.vmw-kauf__zeile--eigene) {
			flex: 1 1 auto;
		}
	}
}

/* ================================================================== */
/* 19  Ein Kaufbereich (29.09.2026)                                    */
/* ================================================================== */

/* Nutzerwahl V1 am Bildvergleich (design/kaufbereich-varianten/): jede
   Kachel -- Wein, Set, Paket -- hat dieselbe Kaufbox mit drei Zeilen, dazu
   eine begrenzte Textzone. Die Kaufbox selbst steht bei der Kaufzeile, die
   Dehnungskette in Abschnitt 18. Hier nur, was ab 768px gilt, unabhaengig
   davon, ob der Browser Subgrid kann: die Kacheln stehen dann nebeneinander.

   Grundlage und Messungen: betrieb/kachel-stand-2026-09-28.md,
   betrieb/abnahme-2026-09-28-kaufbereich/. */
@media (min-width: 768px) {
	/* Der Titel im Shop hoechstens zweizeilig. Dreizeilige Titel standen bei
	   10 % der Weine und 27 % der Pakete und schoben alles darunter
	   treppenfoermig nach unten (Befund P19). Der volle Name steht auf der
	   Produktseite und im `title` des Browsers beim Zeigen.
	   `.vmw-seite.vmw-loop` sitzen auf DEMSELBEN Element (loop/kachel-*.php);
	   die Probe vom 28.09. schrieb sie als Nachfahren und griff deshalb nie.
	   Die Winzerseite hat kein `.vmw-loop` und behaelt ihre Titel. */
	.vmw-seite.vmw-loop .vmw-kachel__name {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		overflow: hidden;
	}

	/* Die leere Oberzeile haelt ihre Zeile (siehe `.vmw-kachel__weingut--leer`
	   weiter oben): so steht der Titel auch in einer Reihe ohne ein einziges
	   Weingut 305px unter der Kacheloberkante. */
	.vmw-seite .vmw-kachel__weingut--leer {
		display: block;
		min-height: 1.35em;
	}

	/* "UND N WEITERE" UND DIE LEBENSMITTELLISTE OEFFNEN ALS EBENE ueber der
	   Kachel, nach oben. Bis dahin streckten sie die Reihe bzw. das ganze
	   Karussell um 42 bis 68px (Befund P20). Die Zeile "und n weitere" bleibt
	   stehen und schliesst die Ebene wieder; Escape und ein Klick daneben
	   schliessen sie auch (winzer.js). Die Ebene bleibt in ihrer Kachel
	   (reihenflucht.cjs Z5, Z7). */
	.vmw-seite .vmw-kachel--paket .vmw-kachel__weitere,
	.vmw-seite .vmw-kachel--paket .vmw-kachel__recht--liste {
		position: relative;
	}

	.vmw-seite .vmw-kachel--paket .vmw-kachel__weitere[open] > .vmw-kachel__weine-mehr {
		display: block;
	}

	.vmw-seite .vmw-kachel--paket .vmw-kachel__weitere > .vmw-kachel__weine,
	.vmw-seite .vmw-kachel--paket .vmw-kachel__recht--liste > ul {
		position: absolute;
		left: 0;
		right: 0;
		bottom: calc(100% + 6px);
		z-index: 6;
		max-height: 300px;
		overflow: auto;
		margin: 0;
		padding: 12px 14px;
		background: #FFFFFF;
		border: 1px solid var(--vmw-linie-2);
		border-radius: var(--vmw-radius-liste);
		box-shadow: 0 10px 28px rgba(42, 35, 38, .12);
	}

	.vmw-seite .vmw-kachel--paket .vmw-kachel__recht--liste > ul {
		list-style: none;
	}
}

/* ================================================================== */
/* 20  Woodmart-Karte neben der Kachel: ohne Streckung (07.10.2026)    */
/* ================================================================== */

/* Befund vom 07.10.2026, Suche "romantischen" bei 1265px: zwei Woodmart-
   Karten (Trinkessig) neben einer Paket-Kachel waren so hoch wie die Kachel,
   der Preis stand unten, darueber ein Loch. Zwei Ursachen zusammen:
     - Woodmarts eigene Option `stretch_product_desktop` (Klasse
       `wd-stretch-cont-lg`) streckt ab 1025px `.wd-product-wrapper` auf
       100% und schiebt den Preis mit `margin-top: auto` nach unten;
     - die Karte ist ein Rasterelement, und das Raster dehnt sie auf die
       Hoehe der Reihe (im Archiv ueberspannt sie dazu acht Zeilen,
       Abschnitt 18).
   Entscheidung vom 30.09.2026: ohne Streckung. 3.4.1 hat nur die beiden
   Optionen fuer Tablet und Handy zurueckgegeben, die das Plugin selbst
   gesetzt hatte; ab 1025px streckte das Theme weiter.

   HIER UND NICHT IN DER THEME-OPTION. Eine Liste nur aus Woodmart-Karten
   (Genusswelten, Zubehoer) bleibt, wie das Theme sie zeichnet; die Regel
   greift nur, wenn in derselben Liste bzw. demselben Karussell eine Kachel
   steht. Die Karte steht dann in ihrer natuerlichen Hoehe oben in der
   Reihe, der Preis direkt unter dem Titel -- wie bei 769 bis 1024px seit
   3.4.1. Spezifitaet (0,5,0) bzw. (0,6,0) gegen Woodmarts (0,3,0). */
.wd-products:has(> .wd-product > .vmw-loop) > .wd-product:not(:has(> .vmw-loop)),
.wd-carousel-wrap:has(> .wd-carousel-item > .wd-product > .vmw-loop) > .wd-carousel-item > .wd-product:not(:has(> .vmw-loop)) {
	align-self: start;
	height: auto;
}

.wd-products:has(> .wd-product > .vmw-loop) > .wd-product:not(:has(> .vmw-loop)) > .wd-product-wrapper,
.wd-carousel-wrap:has(> .wd-carousel-item > .wd-product > .vmw-loop) > .wd-carousel-item > .wd-product:not(:has(> .vmw-loop)) > .wd-product-wrapper {
	height: auto;
}

/* ================================================================== */
/* 21  Karussell unter 768px: jede Kachel in ihrer Hoehe (07.10.2026)  */
/* ================================================================== */

/* Befund vom 07.10.2026 (Jonathan, Punkt 4): beim Wischen standen zwischen
   "Passt zu" und dem Preis bis zu 124px Leerraum (390px, Startseite und
   Portwein-Sets). Swipers Flex-Spur streckt jede Folie auf die Hoehe der
   hoechsten im GANZEN Karussell, die Kachel nimmt `height: 100%` mit, und
   `margin-top: auto` am Preis schiebt ihn nach unten.

   Unter 768px zeigt das Karussell genau eine Kachel (Abschnitt "Karussell",
   `--wd-col-sm: 1`). Es gibt nichts, woran Preis und Knopf fluchten muessten;
   jede Kachel bleibt so hoch wie ihr Inhalt, der Preis folgt direkt auf den
   Text. Ab 768px gilt weiter die Flucht ueber das Subgrid (Abschnitt 18),
   ausdruecklich gewuenscht am 25.09.2026.

   Ohne `!important`: auf Staging gemessen (karussell-luecken.cjs, Variante
   `karussell-mobil-ohne-important`), alle 15 Startseiten-Reiter, beide
   Portwein-Karussells und die Suche: Loch 0px. */
@media (max-width: 767.98px) {
	.wd-carousel-wrap:has(> .wd-carousel-item > .wd-product > .vmw-loop) {
		align-items: flex-start;
	}

	.wd-carousel-wrap:has(> .wd-carousel-item > .wd-product > .vmw-loop) > .wd-carousel-item,
	.wd-carousel-wrap:has(> .wd-carousel-item > .wd-product > .vmw-loop) > .wd-carousel-item > .wd-product,
	.wd-carousel-wrap:has(> .wd-carousel-item > .wd-product > .vmw-loop) > .wd-carousel-item > .wd-product > .vmw-loop,
	.wd-carousel-wrap:has(> .wd-carousel-item > .wd-product > .vmw-loop) > .wd-carousel-item > .wd-product > .vmw-loop > .vmw-raster,
	.wd-carousel-wrap:has(> .wd-carousel-item > .wd-product > .vmw-loop) > .wd-carousel-item > .wd-product > .vmw-loop > .vmw-raster > .vmw-kachel {
		height: auto;
	}
}

/* ================================================================== */
/* 22  Produktseite: keine Brotkrume "Start" unter 1025px (07.10.2026) */
/* ================================================================== */

/* Jonathan, Punkt 10: auf der Produktseite stand unter dem Bild nur "Start".
   Das ist Woodmarts eigene Brotkrume (Option `product_page_breadcrumbs`);
   unter 1025px kuerzt das Theme sie auf den ersten Eintrag, und der heisst
   "Start". Gemessen auf Staging (werkzeuge/abnahme/brotkrume.cjs): bei 390
   und 768px "Start", ab 1025px "Start / <Produktname>".

   Weg ist nur die Krume, nicht ihr Behaelter: in `.single-breadcrumbs-wrapper`
   kann Woodmart auch die Vor/Zurueck-Pfeile zwischen Produkten setzen. Ab
   1025px bleibt alles, wie das Theme es zeichnet. Die Datei laedt auf
   Produktseiten ueber `kachel_global_assets()`. */
@media (max-width: 1024.98px) {
	body.single-product .single-breadcrumbs-wrapper > .wd-breadcrumbs {
		display: none;
	}
}