* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}

body {
    background: #d9d9d4;
    font-family: var(--sans);
    color: var(--wine-ink);
    padding: 24px 0;
}

/* Sprungziele nicht direkt an den oberen Rand kleben lassen */
.wine-subcat[id],
.wine-origin[id],
.wine-type[id] {
    scroll-margin-top: 24px;
}

.wine-body {
    width: 210mm;
    margin: 0 auto;
    /* Feste Breite der Nummern-Spalte (Kopf + Einträge teilen sie sich).
       So bleibt die "Bezeichnung"-Spalte immer an derselben Position,
       egal wie lang der eingetragene Nummern-Text ist. */
    --wine-art-width: 12mm;
}

/* ---- A4 Seite ---- */
.wine-page {
    position: relative;
    width: 210mm;
    height: 297mm;
    background: #fff;
    margin: 0 auto 24px;
    padding: 12mm 12mm 12mm;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.wine-page__inner {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: row;
}

.wine-page__content {
    flex: 1 1 auto;
    min-height: 0;
    /* Sicherheitsnetz: Inhalt endet oberhalb der Flaschenzone und überlappt sie nie */
    overflow: hidden;
}

/* ---- Coverseite ---- */
.wine-cover {
    /* align-items: center;
    justify-content: center;
    text-align: center; */
    position: relative;
}

.wine-cover__inner {
    /* display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin: auto; */
}

.wine-cover__date{
    font-size: calc(15px * var(--sans-scale, 1));
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--wine-muted);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.wine-cover__house {
    font-size: calc(15px * var(--sans-scale, 1));
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--wine-muted);
}

.wine-cover__title {
    font-family: var(--serif);
    /*font-style: italic;*/
    font-weight: 400;
    font-size: calc(110px * var(--serif-scale, 1));
    color: var(--wine-line);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.wine-cover__title span{
    font-size: calc(210px * var(--serif-scale, 1));
}

.wine-cover__sub {
    font-family: var(--serif);
    /*font-style: italic;*/
    font-size: calc(28px * var(--serif-scale, 1));
    color: var(--wine-muted);
}

.wine-cover__image{
    position: absolute;
    left: 50%;
    bottom: 15mm;
    transform: translateX(-50%);
}

.wine-cover__rule {
    display: block;
    width: 80px;
    border-top: 2px solid var(--wine-line);
    margin-top: 6px;
}

/* ---- Inhaltsverzeichnis ---- */
.wine-toc__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 16px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--wine-line);
}

.wine-toc__title {
    font-family: var(--serif);
    font-weight: 500;
    font-size: calc(40px * var(--serif-scale, 1));
    line-height: 1.1;
    color: var(--wine-line);
}

.wine-toc__sup {
    font-size: calc(13px * var(--sans-scale, 1));
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wine-muted);
    white-space: nowrap;
}

.wine-toc__list {
    list-style: none;
    column-count: 2;
    column-gap: 20mm;
}

.wine-toc__row {
    text-transform: uppercase;
    color: var(--wine-ink);
    break-inside: avoid;          /* eine Zeile nie über den Spaltenumbruch trennen */
}

.wine-toc__link {
    display: flex;
    align-items: baseline;
    gap: 8px;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease;
}

.wine-toc__link:hover .wine-toc__label,
.wine-toc__link:hover .wine-toc__page {
    color: var(--wine-line);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.wine-toc__dots {
    flex: 1 1 auto;
}

.wine-toc__page {
    flex: 0 0 auto;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Ebenen: Einrückung + Gewichtung (Unterkategorie / Herkunft / Weinart) */
.wine-toc__row--l0 {
    font-weight: 700;
    font-size: calc(11px * var(--sans-scale, 1));
    letter-spacing: 0.06em;
    margin-top: 22px;             /* mehr Abstand zwischen den Hauptkategorien */
    padding: 3px 0;
}

.wine-toc__row--l0:first-child {
    margin-top: 0;
}

.wine-toc__row--l1 {
    font-size: calc(11px * var(--sans-scale, 1));
    letter-spacing: 0.05em;
    padding: 2px 0 2px 24px;
}

.wine-toc__row--l2 {
    font-size: calc(11px * var(--sans-scale, 1));
    letter-spacing: 0.05em;
    padding: 1px 0 1px 48px;
    color: var(--wine-muted);
}

.wine-toc__row--l3 {
    font-size: calc(11px * var(--sans-scale, 1));
    letter-spacing: 0.05em;
    padding: 1px 0 1px 72px;
    color: var(--wine-muted);
}

/* ---- Überschriften ---- */
.wine-subcat {
    font-family: var(--serif);
    /*font-style: italic;*/
    font-weight: 400;
    font-size: calc(34px * var(--serif-scale, 1));
    line-height: 1.15;
    color: var(--wine-line);
    padding-bottom: 14px;
    margin-bottom: 22px;
    border-bottom: 2px solid var(--wine-line);
}

.wine-subcat__en {
    white-space: nowrap;
}

/* ---- Seitenkopf: Weinsorte links + Land rechts, über der Kopfzeile ---- */
.wine-pagehead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 8px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--wine-line);
}

.wine-pagehead .wine-sort {
    margin: 0;
}

.wine-land-head {
    flex: 0 0 auto;
    font-size: calc(15px * var(--sans-scale, 1));
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wine-ink);
    white-space: nowrap;
}

/* Beschreibung der Hauptkategorie – unter dem Seitenkopf, nur auf der ersten
   Seite einer Kategorie. Werte hier korrespondieren mit der Höhenschätzung in
   WineMenueController ($estimateCatDesc): ~4,6mm je Zeile, ~90 Zeichen/Zeile. */
.wine-catdesc {
    margin: 0 0 16px;
    display: flex;
    flex-direction: column;
    gap:8px; 
}

.wine-catdesc__text {
    font-family: var(--sans);
    font-size: calc(11.5px * var(--sans-scale, 1));
    line-height: 1.5;
    color: var(--wine-muted);
    max-width: 90ch;
    margin: 0;
}

.wine-catdesc__text--en {
    font-style: italic;
}

/* Inhalt aus dem RichEditor: Blockelemente erben Schrift und Farbe, bringen
   aber eigene UA-Abstände mit – die werden hier auf den Zeilenrhythmus der
   Beschreibung normalisiert. */
.wine-catdesc__text > :first-child {
    margin-top: 0;
}

.wine-catdesc__text > :last-child {
    margin-bottom: 0;
}

.wine-catdesc__text p,
.wine-catdesc__text ul,
.wine-catdesc__text ol {
    font: inherit;
    color: inherit;
    margin: 0 0 6px;
}

.wine-catdesc__text ul,
.wine-catdesc__text ol {
    padding-left: 18px;
}

.wine-catdesc__text a {
    color: inherit;
    text-decoration: underline;
}

/* Ebene 2 (Seitenkopf): Unterkategorie – unter Hauptkategorie/Land */
.wine-subhead {
    font-family: var(--sans);
    font-weight: 600;
    font-size: calc(17px * var(--sans-scale, 1));
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wine-muted);
    margin: -14px 0 14px;
}

/* Steht eine Kategorie-Beschreibung dazwischen, darf die Unterkategorie nicht
   per negativem Abstand darüber rutschen. */
.wine-catdesc + .wine-subhead {
    margin-top: 0;
}

/* Unterkategorie mitten im Fluss (wenn der Seitenumbruch je Unterkategorie
   deaktiviert ist) – braucht Abstand nach oben statt des negativen Kopf-Offsets. */
.wine-subhead--inline {
    margin: 14px 0 10px;
}

.wine-subhead--inline:first-child {
    margin-top: 0;
}

/* Hauptkategorie, die MITTEN auf der Seite beginnt (Toggle "Seitenumbruch nach
   dieser Hauptkategorie verhindern"): identischer Kopf wie oben auf der Seite,
   nur mit Abstand zum letzten Wein der vorherigen Kategorie.
   ACHTUNG: dieser Abstand steckt als $H_CAT_GAP (mm) in der Umbruchrechnung des
   WineMenueController – beide Werte immer gemeinsam ändern. */
.wine-pagehead--inline {
    margin-top: 15mm;
}

/* Die Unterkategorie darunter soll exakt so sitzen wie im echten Seitenkopf
   (dort zieht .wine-subhead sie per margin: -14px an die Kopflinie heran). */
.wine-pagehead--inline + .wine-subhead--inline {
    margin-top: -14px;
}

/* Ebene 1 (Seitenkopf): Weinsorte (prominente Serif-Zeile) */
.wine-sort {
    font-family: var(--serif);
    /* font-style: italic; */
    font-weight: 400;
    font-size: calc(35px * var(--serif-scale, 1));
    line-height: 1.15;
    color: var(--wine-line);
    margin: 28px 0 16px;
}

.wine-sort__en {
    /* font-style: italic; */
    white-space: nowrap;
}

.wine-subcat + .wine-sort,
.wine-sort:first-child {
    margin-top: 0;
}

/* Ebene 3: Land */
.wine-land {
    font-family: var(--serif);
    font-weight: 600;
    font-size: calc(20px * var(--serif-scale, 1));
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--wine-line);
    margin: 24px 0 14px;
}

.wine-sort + .wine-land,
.wine-land:first-child {
    margin-top: 0;
}

/* Ebene 4: Rebsorte */
.wine-grape {
    font-family: var(--sans);
    font-weight: 500;
    font-size: calc(15px * var(--sans-scale, 1));
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--wine-muted);
    margin: 12px 0 6px;
}

.wine-grape:first-child,
.wine-pagehead + .wine-grape,
.wine-sort + .wine-grape,
.wine-land + .wine-grape {
    margin-top: 0;
}

/* Rebsorte, die fuer diese Haupt-/Unterkategorie auf der Seite ausgeblendet ist:
   Es bleibt nur das Sprungziel fuer das Inhaltsverzeichnis. Das Element darf
   keinen Platz einnehmen -- die Seitenumbruch-Rechnung im WineMenueController
   setzt fuer diesen Fall ebenfalls 0 an. */
.wine-grape-anchor {
    display: block;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.wine-type__en {
    font-style: normal;
}

/* ---- Kopfzeile der Wein-Tabelle ---- */
.wine-head {
    display: flex;
    align-items: baseline;
    gap: 20px;
    padding-bottom: 8px;
    margin-bottom: 16px;
    border-bottom: 1px dotted rgba(85, 85, 85, 0.35);
    font-size: calc(11px * var(--sans-scale, 1));
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wine-muted);
}

.wine-head__art {
    flex: 0 0 var(--wine-art-width);
    width: var(--wine-art-width);
    text-align: left;
}

/* Platzhalter, damit die Bezeichnung-Spalte im "links"-Modus mit den Einträgen fluchtet */
.wine-head__bottle-spacer {
    flex: 0 0 auto;
    width: 12mm;
}

.wine-head__info {
    flex: 1 1 auto;
    min-width: 0;
}

.wine-head__cols {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 48px 70px;
    column-gap: 4px;
    text-align: right;
    white-space: nowrap;
}

/* ---- Wein-Eintrag ---- */
.wine-entry {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    break-inside: avoid;
    page-break-inside: avoid;
}

/* Grid: Zeile 1 = Titel (über Beschreibung + Größe/Preis),
   Zeile 2 = Nr. | Beschreibung | Größe/Preis
   -> Nr./Größe/Preis starten auf Beschreibungshöhe (unter dem Titel). */
.wine-entry__main {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    grid-template-columns: [nr] var(--wine-art-width) [info] 1fr [cols] auto;
    column-gap: 16px;
    row-gap: 1px;
}

/* Artikelnummer steht vor der Mengenangabe -> vordere Nr.-Spalte entfällt,
   Titel und Beschreibung nutzen die volle Breite (Spaltennamen bleiben erhalten). */
.wine-entry__main--art-amount {
    grid-template-columns: [nr info] 1fr [cols] auto;
}

.wine-entry__info {
    grid-column: info;
    grid-row: 2;
    min-width: 0;
}

.wine-entry__title {
    grid-column: info;
    grid-row: 1;
    font-weight: 700;
    font-size: calc(14px * var(--sans-scale, 1));
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--wine-ink);
    margin: 0;
}

/* Nr. je Variante, gestapelt (linke Spalte, Zeile 2) */
.wine-entry__nums {
    grid-column: nr;
    /* ab der Namenszeile beginnen, oben ausgerichtet: die erste Nummer sitzt
       auf Höhe des Weinnamens, weitere Varianten laufen darunter neben der
       Beschreibung weiter. span 2, da keine expliziten Grid-Zeilen definiert
       sind (mit -1 würde der Span kollabieren). */
    grid-row: 1 / span 2;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 0;
    font-size: calc(12px * var(--sans-scale, 1));
    color: var(--wine-ink);
}

.wine-entry__origin {
    font-weight: 400;
    white-space: nowrap;
}

/* Rebsortenkürzel hinter dem Jahrgang (z.B. "RI, CH") */
.wine-entry__grapecodes {
    font-weight: 400;
    white-space: nowrap;
}

/* ---- Menü-Options-Icons (angetoggelte Felder) ---- */
.wine-entry__icons {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 4px;
    vertical-align: super;
}

.wine-entry__icon {
    display: inline-flex;
    align-items: center;
}

/* Icons liegen als PNG (<img>) oder als inline-SVG vor – beide auf dieselbe
   Zeilenhoehe bringen, damit die Icon-Reihe im Eintrag gleich hoch bleibt. */
.wine-entry__icon svg,
.wine-entry__icon img {
    height: 11px;
    width: auto;
    display: block;
}

/* Leere Jahrgang-Zeile zum handschriftlichen Eintragen */
.wine-entry__year-blank {
    display: inline-block;
    font-weight: 400;
    width: 8ch;
    border-bottom: 0.1mm solid var(--wine-ink);
    vertical-align: baseline;
    opacity: 0.3;
}

.wine-entry__desc {
    /* <p> bringt margin: 1em 0 mit – das muss weg, sonst entstehen pro Eintrag
       ~26px Leerraum, die die Höhenschätzung im WineMenueController nicht kennt
       (Folge: Seiten laufen unten aus dem Inhaltsbereich). */
    margin: 0;
    font-size: calc(11px * var(--sans-scale, 1));
    color: var(--wine-muted);
    line-height: 1.3;
    /* Beschreibung darf weiter nach rechts reichen (~1/3 des Abstands zur
       Preisspalte). Dieser eine Wert steuert die Reichweite. */
    max-width: 72ch;
}

/* Englische Menü-Beschreibung: kursiv unter der deutschen Beschreibung */
.wine-entry__desc--en {
    /* font-style: italic; */
}

.wine-entry__desc--en em {
    /* font-style: italic; */
}

/* ---- rechte Spalten: Größe | Preis, je Variante eine Zeile (gestapelt) ---- */
.wine-entry__cols {
    grid-column: cols;
    /* Menge + Preis ebenfalls ab der Namenszeile (oben ausgerichtet). */
    grid-row: 1 / span 2;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 0;
    font-size: calc(12px * var(--sans-scale, 1));
    white-space: nowrap;
}

.wine-entry__col-row {
    display: grid;
    grid-template-columns: 48px 70px;
    column-gap: 4px;
    text-align: right;
}

/* Artikelnummer direkt vor der Mengenangabe -> zusätzliche Spalte in der Zeile */
.wine-entry__col-row--with-art {
    grid-template-columns: var(--wine-art-width) 48px 70px;
}

/* ---- Modus "Preise unter der Beschreibung" ----
   Titel und Beschreibung nutzen die volle Breite; Nummer/Menge/Preis stehen als
   eigene Zeile(n) darunter (eine je Variante), linksbündig. Die Spaltenbreiten der
   Zeile bleiben fest, damit die Varianten untereinander bündig stehen.
   Die Höhenschätzung im WineMenueController rechnet in diesem Modus Beschreibung
   UND Preisblock addiert (statt max()) – margin-top hier und dort gleich halten. */
.wine-entry__main--stacked {
    grid-template-columns: [nr info cols] 1fr;
}

.wine-entry__main--stacked .wine-entry__cols {
    grid-row: 3;
    align-self: start;
    margin-top: 4px;
}

/* Zeilenbreite = Breite der Beschreibung: .wine-entry__desc ist auf 72ch begrenzt,
   hat aber eine KLEINERE Schriftgröße (11px) als dieser Block (12px) -> 1ch ist hier
   größer. Damit der Preis genau am rechten Ende der Beschreibung endet, wird die
   Begrenzung auf die Schriftgröße der Beschreibung umgerechnet: 72ch * 11/12 = 66ch.
   Wird eine der beiden Größen geändert, muss dieser Wert mitgezogen werden. */
.wine-entry__cols--below {
    max-width: 66ch;
}

/* Nr. + Inhalt linksbündig, Preis am rechten Ende der Beschreibungsbreite */
.wine-entry__col-row--below {
    grid-template-columns: var(--wine-art-width) 48px 1fr;
}

.wine-entry__col-row--below .wine-entry__art--inline,
.wine-entry__col-row--below .wine-entry__qty {
    font-size: calc(11px * var(--sans-scale, 1) * 1) !important;
    text-align: left;
}

.wine-entry__col-row--below .wine-entry__price {
    text-align: left;
}

.wine-entry__qty {
    color: var(--wine-ink);
}

.wine-entry__price {
    font-weight: 700;
    color: var(--wine-ink);
}

/* Artikel-Nummer (eine je Variante, in .wine-entry__nums gestapelt) */
.wine-entry__art {
    text-align: left;
    overflow-wrap: break-word;
}

/* Artikel-Nummer in der Mengen-/Preis-Zeile: rechtsbündig zur Mengenangabe */
.wine-entry__art--inline {
    text-align: right;
    white-space: nowrap;
}

/* ---- Flaschenbilder (Platzhalter) ---- */
.wine-bottles {
    display: flex;
}

/* Position "unten": Reihe mit gleichmäßigem Abstand, unten in die Seite versinkend */
.wine-bottles--bottom {
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    gap: 4mm;                   /* gleichmäßiger Abstand zwischen den Flaschen */
    padding-top: 10px;
    /* nur den unteren Innenabstand (15mm) aufheben -> Flaschen stehen bündig an der
       Seitenkante, werden aber NICHT abgeschnitten */
    margin-bottom: -9mm;
}

/* Feld je Flasche: Breite = Flaschenbreite (per content), Höhe skaliert nach Volumen.
   Die Höhe steht am Bild selbst (nicht als feste Slot-Höhe): so ist die Reihe nur so
   hoch wie die größte Flasche der Seite. Eine feste Slot-Höhe hätte auch bei lauter
   0,75-l-Flaschen (Skalierung 0.707) die volle 1,5-l-Zone belegt – der Textbereich
   im Controller-Budget (bottleZone()) rechnet mit derselben Formel. */
.wine-bottle-slot {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
}

.wine-bottle-slot img,
.wine-bottle-slot .wine-bottle-placeholder svg {
    height: calc(58mm * var(--bottle-scale, 1));   /* 58mm = Referenzhöhe 1,5 l */
    width: auto;               /* Seitenverhältnis bleibt -> keine Verzerrung */
    display: block;
}

/* Platzhalter-Motiv (Wein ohne eigenes Bild): das SVG steht INLINE im Markup und
   zeichnet mit stroke: currentColor – die Linienfarbe kommt also von hier und folgt
   damit der Primärfarbe der Weinkarte. Als <img> eingebunden ginge das nicht. */
.wine-bottle-placeholder {
    display: block;
    color: #782327;
}

/* Das inline stehende <svg> traegt width/height="100%" aus der Datei. Die Hoehe kommt
   aus den Regeln oben, die Breite aus dem Seitenverhaeltnis der viewBox – explizit
   gesetzt, weil "width: auto" bei inline-SVG je nach Browser auch 100% des Elternteils
   bedeuten kann. Wert = viewBox-Breite / viewBox-Hoehe der Platzhalter-Datei. */
.wine-bottle-placeholder svg {
    aspect-ratio: 1270.4 / 4675;
}

/* Position "links": Flasche oben, Höhe = 24mm * Volumen-Skalierung. Als normales
   Flex-Element bestimmt sie mit der Texthöhe zusammen die Zeilenhöhe (max aus beiden)
   -> immer gleicher Abstand, kein Hineinragen in den nächsten Eintrag. */
.wine-entry__bottle {
    flex: 0 0 12mm;
    align-self: flex-start;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.wine-entry__bottle img,
.wine-entry__bottle .wine-bottle-placeholder svg {
    height: calc(24mm * var(--bottle-scale, 1));
    width: auto;               /* Seitenverhältnis bleibt -> keine Verzerrung */
    max-width: 100%;
    display: block;
}

/* ---- Seitenzahl ---- */
.wine-page__number {
    position: absolute;
    right: 16mm;
    bottom: 10mm;
    font-size: calc(13px * var(--sans-scale, 1));
    color: var(--wine-muted);
}

/* QR-Code auf den Inhaltsverzeichnis-Seiten: sitzt an der Stelle der Seitenzahl.
   Er hat keine eigene Reserve im TOC-Umbruch (siehe WineMenueController), deshalb
   kompakt gehalten und etwas tiefer in den unteren Seitenrand gesetzt. */
.wine-toc__qr {
    width: 22mm;
    height: 22mm;
    bottom: 8mm;
    line-height: 0;
}

.wine-toc__qr-code,
.wine-toc__qr-code svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Hinweis "Unsere Weinkarte" mit geschwungenem Pfeil: steht links neben dem Code
   (Seite mit Bundsteg links -> Code rechts). Absolut positioniert, damit die Box
   der Seitenzahl nur so groß wie der Code bleibt. */
.wine-toc__qr-hint {
    position: absolute;
    right: calc(100% + 1mm);
    top: 50%;
    transform: translateY(-50%);   /* Text + Pfeil vertikal mittig zum Code */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    color: var(--wine-ink);
    line-height: 1.1;
    white-space: nowrap;
}

.wine-toc__qr-text {
    font-family: var(--serif);
    font-style: italic;
    font-size: calc(18px * var(--serif-scale, 1));
    margin-right: 10mm;
}

.wine-toc__qr-arrow {
    width: 15mm;
    height: auto;
    margin-top: 1mm;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Linke Seiten (Code links): Hinweis rechts vom Code, Pfeil gespiegelt. */
.wine-body > .wine-page:nth-child(odd):not(:first-child) .wine-toc__qr-hint {
    right: auto;
    left: calc(100% + 1mm);
    align-items: flex-start;
}

.wine-body > .wine-page:nth-child(odd):not(:first-child) .wine-toc__qr-text {
    margin-right: 0;
    margin-left: 10mm;
}

.wine-body > .wine-page:nth-child(odd):not(:first-child) .wine-toc__qr-arrow {
    transform: scaleX(-1);
}

/* ---- Bundsteg: breiter Rand, abwechselnd links/rechts, beginnend
   LINKS. Nur das Cover (erstes Kind von .wine-body) bleibt ohne Bundsteg; alle
   uebrigen Seiten – auch die Inhaltsverzeichnis-Seiten (.wine-toc) – sind
   einbezogen, damit die Links/Rechts-Abwechslung ueber die ganze Karte
   durchlaeuft und nicht an der TOC-Strecke aus dem Takt geraet.
   Die Breite steht in den Weinkarten-Einstellungen (page_gutter_cm, Default 3cm) und
   kommt als --wine-gutter aus dem Blade; der Fallback hier haelt die Datei allein
   lauffaehig. ACHTUNG: dadurch ist der Textbereich entsprechend schmaler. Die Höhen-/
   Umbruchschätzung im WineMenueController rechnet mit demselben Wert ($PAGE_INNER).
   Der Bundsteg steht bewusst NICHT mehr nur in @media print: am Bildschirm sah die
   Karte dadurch anders aus als im Druck, und genau die Abweichung (breiterer Satz,
   andere Umbrüche) machte die Kontrolle über ?heights=1 wertlos. */
.wine-body > .wine-page:nth-child(even) {
    padding-left: var(--wine-gutter, 30mm);
}

.wine-body > .wine-page:nth-child(odd):not(:first-child) {
    padding-right: var(--wine-gutter, 30mm);
}

/* Seitenzahl wandert auf die Aussenkante: der Satz dieser Seiten ist rechtsbuendig
   und endet an der Bundstegkante rechts – eine Seitenzahl dort wuerde mit ihm
   kollidieren. Links steht sie am freien Aussenrand (16mm, spiegelbildlich zur
   Standardposition). "right: auto" ist noetig, weil die Grundregel right: 16mm setzt. */
.wine-body > .wine-page:nth-child(odd):not(:first-child) .wine-page__number {
    right: auto;
    left: 16mm;
}

/* ---- Rechtsbuendiger Satz auf den Seiten mit Bundsteg RECHTS ----
   Auf diesen Seiten liegt die Bundstegkante rechts. Der Satz wird deshalb
   rechtsbuendig ausgerichtet, damit Titel, Beschreibung und Preiszeile buendig an
   dieser Kante enden statt links zu haengen.
   WICHTIG: die Zeilenbreiten (.wine-entry__desc 72ch, .wine-entry__cols--below
   66ch) bleiben unveraendert – sie wandern nur per "margin-left: auto" nach
   rechts. Ohne das wuerde der Block weiter links kleben und der Text nur INNERHALB
   der 72ch rechtsbuendig stehen, also gar nicht an der Bundstegkante ankommen.
   Weil sich an den Breiten nichts aendert, bleibt die Umbruch- und
   Hoehenschaetzung im WineMenueController unveraendert gueltig. */
.wine-body > .wine-page:nth-child(odd):not(:first-child) .wine-page__content {
    text-align: right;
}

/* Der Seitenkopf ist ein Flex-Container (Titel links, Land rechts, space-between).
   Bei nur einem Kind wuerde der Titel dort trotz text-align links stehen bleiben –
   die Flex-Ausrichtung muss deshalb mitgedreht werden. */
.wine-body > .wine-page:nth-child(odd):not(:first-child) .wine-pagehead {
    justify-content: flex-end;
}

/* Auf 72ch/66ch begrenzte Bloecke an den rechten Rand ruecken */
.wine-body > .wine-page:nth-child(odd):not(:first-child) .wine-entry__desc,
.wine-body > .wine-page:nth-child(odd):not(:first-child) .wine-entry__cols--below {
    margin-left: auto;
}

/* Nummer/Menge/Preis sind im Modus "Preise unter der Beschreibung" fest auf
   linksbuendig gesetzt – hier gespiegelt. Die dritte Spalte schrumpft von 1fr auf
   auto und die Gruppe packt sich ans rechte Ende der Zeile, damit der Preis
   genau auf der Kante der Beschreibung endet. */
.wine-body > .wine-page:nth-child(odd):not(:first-child) .wine-entry__col-row--below {
    grid-template-columns: var(--wine-art-width) 48px auto;
    justify-content: end;
}

.wine-body > .wine-page:nth-child(odd):not(:first-child) .wine-entry__col-row--below .wine-entry__art--inline,
.wine-body > .wine-page:nth-child(odd):not(:first-child) .wine-entry__col-row--below .wine-entry__qty,
.wine-body > .wine-page:nth-child(odd):not(:first-child) .wine-entry__col-row--below .wine-entry__price,
.wine-body > .wine-page:nth-child(odd):not(:first-child) .wine-entry__art {
    text-align: right;
}

/* Legenden-Icons folgen der Satzrichtung: steht der Satz rechtsbuendig an der
   Bundstegkante, gehoert das Icon auf dieselbe Seite wie der Zeilenanfang – also
   rechts. Auf den linksbuendigen Seiten bleibt es links. "row-reverse" dreht nur
   die Reihenfolge, Breiten und Abstand (gap) bleiben identisch. */
.wine-body > .wine-page:nth-child(odd):not(:first-child) .wine-legend__row {
    flex-direction: row-reverse;
}

/* ---- Legende ---- */
.wine-legend__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wine-legend__row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wine-legend__icon {
    flex: 0 0 32px;
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wine-legend__icon img {
    max-height: 20px;
    max-width: 32px;
    width: auto;
    height: auto;
    /* inline-Bilder sitzen sonst auf der Grundlinie und schieben die Zeile auf */
    display: block;
}

.wine-legend__icon svg {
    max-height: 20px;
    max-width: 32px;
    width: auto;
    height: auto;
}

.wine-legend__text {
    flex: 1 1 auto;
    font-size: calc(10px * var(--sans-scale, 1));
    line-height: 1.5;
    color: var(--wine-ink);
}

/* ---- Rebsorten-Legende (Kuerzel + ausgeschriebene Form) ----
   Zweispaltig, damit auch viele Rebsorten auf eine Seite passen. */
.wine-grapelegend__list {
    list-style: none;
    columns: 3;
    column-gap: 32px;
    margin: 0;
    padding: 0;
}

.wine-grapelegend__row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    break-inside: avoid;
    margin: 0 0 4px;
}

.wine-grapelegend__code {
    flex: 0 0 48px;
    font-size: calc(10px * var(--sans-scale, 1));
    line-height: 1.5;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--wine-ink);
}

.wine-grapelegend__name {
    flex: 1 1 auto;
    font-size: calc(10px * var(--sans-scale, 1));
    line-height: 1.5;
    color: var(--wine-muted);
}

/* ---- Druck: echte A4-Seiten mit max. 8 Weinen ---- */
@media print {
    @page {
        size: A4 portrait;
        margin: 0;
    }

    body {
        background: #fff;
        padding: 0;
    }

    .wine-page {
        width: 210mm;
        height: 297mm;
        margin: 0;
        box-shadow: none;
        overflow: hidden;
        page-break-after: always;
        break-after: page;
    }

    .wine-page:last-child {
        page-break-after: auto;
        break-after: auto;
    }

}

/* ---- Handy / schmale Bildschirme: echte A4-Seiten, verkleinert ----
   Der Satz bleibt exakt der A4-Satz (gleiche Umbrüche wie Druck/PDF); die ganze
   Karte wird nur per zoom auf die Bildschirmbreite verkleinert. --wine-zoom setzt
   das Skript im <head> von wine-card.blade.php (1 = keine Verkleinerung, also am
   Desktop wirkungslos). zoom statt transform: scale(), weil zoom auch das Layout
   mitverkleinert – sonst bliebe rechts/unten der Platz der Originalgröße stehen. */
.wine-body {
    zoom: var(--wine-zoom, 1);
}

body {
    /* iOS vergrößert Text im Querformat sonst eigenmächtig */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

@media screen and (max-width: 840px) {
    body {
        padding: 8px 0;
    }
}

@media print {
    .wine-body {
        zoom: 1;
    }
}