/* Breitenachse: Bricolage Grotesque geht von 75 bis 100.
   Hier standen einmal 15 Deklarationen mit 104, 106 oder 112 — jede davon
   wirkungslos, weil der Browser außerhalb der Achse stillschweigend klemmt.
   Gemessen ergaben 100, 104, 106, 112 und 125 denselben Textlauf von
   336,58 px. Wer hier breiter setzen will, braucht eine andere Schrift, nicht
   eine höhere Zahl. Geprüft von scripts/schriftachsen-pruefen.mjs. */
/* Weingut Sandbühl — Designsystem
   Buntsandstein und Gegenwart. Der einzige der drei Shops, der Farbe führen darf.
   Violett statt Grün ist die bewusste Abweichung: Grün wäre das Bio-Klischee,
   und Buntsandstein hat tatsächlich violette Bänder.

   Alle Werte gerechnet mit `node scripts/kontrast.mjs --shop sandbuehl`,
   das die Tokens aus genau dieser Datei liest. */

:root {
  --loess: #e9dfd3;          /* Grundfläche, Lösslehm */
  --kalk: #faf7f3;           /* Karten und Etikettenflächen, ΔL* 8,1 zur Grundfläche */
  --band: #5e3247;           /* Buntsandstein-Violett: Text und Flächen */
  --band-tief: #472535;      /* dunklere Stufe für Flächen unter Flächen */
  --rost: #93381f;           /* Eisenoxid im Sandstein, zweiter Akzent.
                                Von #a6482f abgedunkelt: der erreichte auf Löss nur 4,45:1 */
  --muscaris: #bcd055;       /* Gelbgrün der Traube — FLÄCHEN- UND LINIENFARBE, NIE TEXTFARBE.
                                Auf Löss erreicht sie 1,3:1. Text darauf ist --band (6,08:1). */
  --linie: #cbbdad;          /* Trennlinien auf Löss — FLÄCHENFARBE, 1,40:1, nie Text */
  --band-still: #7a5a68;     /* Sekundärtext auf Löss und Kalk, 4,57:1 */

  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --lese: 'Source Serif 4', Georgia, serif;

  /* Fünf Stufen statt sieben, Quinte 1,5 statt Terz oder Quart.
     Der Creative Director hat in Tor 1 nachgewiesen, dass Sandbühl auf Tokenebene
     Schieferhang mit anderen Hex-Werten war: dieselbe siebenstufige Skala, dieselbe
     Grotesk-plus-Serif-Logik, fast dieselben Maße. Wenige, weit auseinanderliegende
     Größen sind die eigene Entscheidung — dazwischen gibt es nichts. */
  --t--1: 0.75rem;
  --t-0: 1rem;
  --t-1: 1.5rem;
  --t-2: 2.25rem;
  --t-3: 3.375rem;

  /* Breiter Rand, schmaler Satz: ein Buchbild, kein Schaufenster.
     Schieferhang und Weinkontor liegen beide bei 4vw und 76–78 rem. */
  --rand: clamp(1.5rem, 9vw, 9rem);
  --inhalt: 62rem;
  --spalte-beschriftung: 9rem;   /* Beschriftung steht rechts, nicht links */
}

/* ── Grundlagen ───────────────────────────────────────────────────────── */

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

html {
  /* 112,5 % = 18 px. Ohne sie gäbe es unter dem Fließtext nur eine einzige
     Größe für Label, Wert, Grundpreis und Pflichtangaben — die fünfstufige
     Skala trägt eine Produktseite erst damit. */
  font-size: 112.5%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--loess);
  color: var(--band);
  font: 400 1rem/1.6 var(--lese);
}

h1, h2, h3 {
  font-family: var(--display);
  font-variation-settings: 'wdth' 86, 'wght' 600, 'opsz' 24;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--t-3); font-variation-settings: 'wdth' 78, 'wght' 700, 'opsz' 40; }
h2 { font-size: var(--t-2); }
h3 { font-size: var(--t-1); }

p { margin: 0 0 1em; max-width: 68ch; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
small { font-size: var(--t--1); }

.zum-inhalt {
  position: absolute; left: -9999px; top: 0; z-index: 50;
  background: var(--band); color: var(--kalk); padding: .7rem 1.2rem;
}
.zum-inhalt:focus { left: 1rem; top: 1rem; }

/* ── Demo-Leiste und Kopf ─────────────────────────────────────────────── */

.demo-bar {
  /* Bleibt oben stehen. Ein weitergeleiteter Demo-Link verlor sonst beim
     ersten Scrollen den Absender — und mit ihm den Hinweis, dass der Betrieb
     erfunden ist. */
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 1rem;
  padding: .5rem var(--rand);
  background: var(--band-tief); color: var(--loess);
  font-family: var(--display);
  font-variation-settings: 'wdth' 100, 'wght' 450;
  font-size: var(--t--1);
}
/* Der lange Hinweis steht, der kurze wartet auf schmale Fenster.
   Diese Regel muss VOR dem Media-Block stehen: am Dateiende hätte sie
   ihn überschrieben, weil beide gleich spezifisch sind. */
.demo-bar .kurz { display: none; }
.demo-bar a { color: var(--loess); text-decoration: none; white-space: nowrap; }
.demo-bar a:hover { text-decoration: underline; text-underline-offset: 3px; }
.demo-bar span { opacity: .75; text-align: center; }
.demo-bar .will-ich { margin-left: auto; border: 1px solid currentColor; padding: .3rem .8rem; }
.demo-bar .betrieb { margin-left: auto; border-bottom: 1px solid currentColor; }

.kopf {
  display: flex; align-items: center; gap: 1.5rem;
  padding: 1.4rem var(--rand);
  border-bottom: 1px solid var(--linie);
  position: sticky; top: 0; z-index: 30;
  background: var(--loess);
}
.kopf nav { display: flex; gap: clamp(.9rem, 2.2vw, 1.8rem); margin-left: auto; }
.kopf nav a {
  text-decoration: none; padding: .25rem 0;
  border-bottom: 2px solid transparent;
  font-family: var(--display);
  font-variation-settings: 'wdth' 100, 'wght' 500;
  font-size: var(--t-0);
}
.kopf nav a:hover, .kopf nav a[aria-current] { border-bottom-color: var(--rost); }
.korb-zahl { color: var(--band-still); }

/* ── Die Tafel: Satzordnung des ganzen Shops ──────────────────────────────
   Inhalt links, Beschriftung rechts, dazwischen die Feldkante. Nicht eine
   Sektion, sondern das Raster jeder Seite — daran ist die erste Konzept-
   fassung gescheitert. */

.tafel {
  max-width: var(--inhalt);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem) var(--rand);
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--spalte-beschriftung);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  position: relative;
}

/* Die Feldkante läuft durch, nicht je Abschnitt */
.tafel::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  right: calc(var(--rand) + var(--spalte-beschriftung) + clamp(.75rem, 2vw, 1.5rem));
  width: 1px;
  background: var(--linie);
}

.tafel-inhalt { min-width: 0; }

.spalte {
  font-family: var(--display);
  font-variation-settings: 'wdth' 100, 'wght' 500, 'opsz' 12;
  font-size: var(--t--1);
  line-height: 1.5;
}
/* Versalien nur hier — im Fließtext nie */
.spalte dt, .spalte .feld {
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--band-still);
}
.spalte dd { margin: 0 0 .9rem; font-variation-settings: 'wdth' 100, 'wght' 500; }
.spalte dd:last-child { margin-bottom: 0; }

/* Die Tafelnummer ordnet die Seite wie ein Bestimmungsbuch */
.tafel-nr {
  display: block;
  font-family: var(--display);
  font-variation-settings: 'wdth' 100, 'wght' 600;
  font-size: var(--t--1);
  letter-spacing: .12em;
  color: var(--rost);
  margin-bottom: .8rem;
}

/* ── Hero ─────────────────────────────────────────────────────────────── */

.hero h1 { max-width: 14ch; margin-bottom: 1.2rem; }
.hero-lauf { font-size: var(--t-1); max-width: 40ch; margin-bottom: 1.8rem; }
.hero-wege { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }

.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: 0 1.5rem;
  background: var(--band); color: var(--kalk);
  font-family: var(--display);
  font-variation-settings: 'wdth' 100, 'wght' 600;
  font-size: var(--t-0);
  border: 0; cursor: pointer; text-decoration: none;
}
.knopf:hover { background: var(--band-tief); }
.knopf.zweit {
  background: none; color: var(--band);
  border: 1.5px solid var(--band);
}
.knopf.zweit:hover { background: var(--band); color: var(--kalk); }

/* ── Bildband ─────────────────────────────────────────────────────────────
   Über die volle Breite, ohne Tafelraster — der eine Bruch im Rhythmus. */

.bildband { margin: 0; }
.bildband img { width: 100%; height: clamp(14rem, 34vw, 26rem); object-fit: cover; display: block; }
.bildband.hoch img { height: clamp(18rem, 44vw, 34rem); }

/* ── Sortentafel ──────────────────────────────────────────────────────── */

.sorten-raster {
  display: grid;
  /* Feste Stufen statt auto-fit: Acht Kacheln gehen in 4, 2 und 1 Spalten
     restlos auf, in 3 nicht. Die Fuge zeichnen die Kacheln selbst, damit eine
     fehlende Zelle Weißraum bleibt statt ein Farbblock zu werden. */
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  border: 1px solid var(--linie);
  margin-bottom: 1.5rem;
}
.sorten-raster > * { box-shadow: 0 0 0 1px var(--linie); }
@media (max-width: 62rem) { .sorten-raster { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 30rem) { .sorten-raster { grid-template-columns: 1fr; } }
.sorte {
  background: var(--kalk);
  padding: 1rem .9rem 1.1rem;
  display: flex; flex-direction: column; gap: .5rem;
  text-decoration: none;
}
.sorte:hover { background: var(--muscaris); }
.sorte-bild { width: 100%; height: 5.5rem; }
.sorte b {
  font-family: var(--display);
  font-variation-settings: 'wdth' 86, 'wght' 600;
  font-size: var(--t-0);
  line-height: 1.15;
}
.sorte .feld {
  font-family: var(--display);
  font-variation-settings: 'wdth' 100, 'wght' 500;
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--band-still);
}
.sorte .wert { font-size: var(--t--1); margin-top: -.35rem; }

/* ── Das Abo ──────────────────────────────────────────────────────────── */

.abo { background: var(--kalk); border-top: 3px solid var(--band); }
.abo-kisten {
  display: grid;
  /* Drei Kisten, drei Spalten. `auto-fit` machte bei 1440 px zwei daraus und
     ließ „Ohne Netz" allein mit einem Loch daneben stehen — auch der CRO hat
     das als M-10 beanstandet. */
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1.5rem 0;
}
@media (max-width: 56rem) { .abo-kisten { grid-template-columns: 1fr; } }

/* Zustände tragen nie Gelbgrün: Fläche plus Rand, beide gerechnet. */
.kiste {
  border: 3px solid var(--linie);
  background: var(--loess);
  padding: 1.1rem;
  text-align: left;
  font: inherit;
  cursor: pointer;
  display: flex; flex-direction: column; gap: .35rem;
}
.kiste:hover { border-color: var(--band-still); }
.kiste[aria-pressed="true"] {
  background: var(--band);
  color: var(--kalk);
  border-color: var(--rost);
}
.kiste[aria-pressed="true"] .kiste-klein { color: var(--loess); }
.kiste b {
  font-family: var(--display);
  font-variation-settings: 'wdth' 86, 'wght' 600;
  font-size: var(--t-1);
}
.kiste .preis {
  font-family: var(--display);
  font-variation-settings: 'wdth' 100, 'wght' 600;
  font-size: var(--t-2);
  font-variant-numeric: tabular-nums;
}
.kiste-klein { font-size: var(--t--1); color: var(--band-still); }

.abo-zeile { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin-top: 1rem; }
.abo-punkte { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .5rem; }
.abo-punkte li { padding-left: 1.4rem; position: relative; font-size: var(--t--1); }
.abo-punkte li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: .5rem; height: .5rem; background: var(--rost);
}

/* ── Weine ────────────────────────────────────────────────────────────── */

.linie-kopf { margin-bottom: 1.2rem; }
.linie-kopf p { color: var(--band-still); max-width: 58ch; }

.weinliste { display: grid; gap: 1px; background: var(--linie); border: 1px solid var(--linie); }
.weinzeile {
  background: var(--kalk);
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: .9rem 1.1rem;
  text-decoration: none;
}
.weinzeile:hover { background: var(--loess); }
.etikett-klein { width: 3.5rem; height: 4.4rem; }
.weinzeile b {
  font-family: var(--display);
  font-variation-settings: 'wdth' 86, 'wght' 600;
  font-size: var(--t-0);
  display: block;
}
.weinzeile .meta { font-size: var(--t--1); color: var(--band-still); }
.weinzeile .preis {
  font-family: var(--display);
  font-variation-settings: 'wdth' 100, 'wght' 600;
  font-size: var(--t-1);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.weinzeile .grund { display: block; font-size: .62rem; color: var(--band-still); font-variation-settings: 'wght' 400; }

.marke-um { display: inline-block; font-size: .62rem; border: 1px solid var(--rost); color: var(--rost); padding: .05rem .35rem; }

/* ── Produktseite ─────────────────────────────────────────────────────── */

.produkt-etikett { background: var(--kalk); padding: clamp(1.5rem, 4vw, 3rem); display: grid; place-items: center; }
.produkt-etikett svg { width: 100%; max-width: 20rem; height: auto; }

.preisblock { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; margin: 1.2rem 0 .3rem; }
.preisblock b {
  font-family: var(--display);
  font-variation-settings: 'wdth' 100, 'wght' 600;
  font-size: var(--t-2);
  font-variant-numeric: tabular-nums;
}
.preisblock span { font-size: var(--t--1); color: var(--band-still); }

.kaufzeile { display: flex; gap: .7rem; margin: 1rem 0 1.5rem; }
.mengenwahl { display: flex; border: 1.5px solid var(--band); }
.mengenwahl button { width: 2.6rem; min-height: 3rem; background: none; border: 0; color: var(--band); font-size: var(--t-1); cursor: pointer; }
.mengenwahl button:hover { background: var(--kalk); }
.mengenwahl input { width: 3rem; background: none; border: 0; color: var(--band); font: inherit; text-align: center; font-variant-numeric: tabular-nums; }

.notiz {
  margin: 0 0 1.5rem;
  padding-left: 1.1rem;
  border-left: 3px solid var(--rost);
  font-size: var(--t-1);
  line-height: 1.45;
}
.notiz cite { display: block; margin-top: .5rem; font-style: normal; font-family: var(--display); font-size: var(--t--1); font-variation-settings: 'wdth' 100, 'wght' 500; text-transform: uppercase; letter-spacing: .08em; color: var(--band-still); }

.pflicht { border-top: 1px solid var(--linie); padding-top: 1.2rem; margin-top: 2rem; }
.pflicht h2 { font-size: var(--t-1); margin-bottom: .8rem; }
.pflicht-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.5rem; }
.naehrwerte { width: 100%; border-collapse: collapse; font-size: var(--t--1); }
.naehrwerte th, .naehrwerte td { padding: .35rem 0; border-bottom: 1px solid var(--linie); text-align: left; font-weight: 400; }
.naehrwerte td { text-align: right; font-variant-numeric: tabular-nums; }
.pflicht-hinweis { font-size: var(--t--1); color: var(--band-still); }
.pflicht-hinweis a { color: var(--rost); }

/* ── Betreiberansicht ─────────────────────────────────────────────────── */

.betrieb-tabelle { width: 100%; border-collapse: collapse; font-size: var(--t--1); }
.betrieb-tabelle th, .betrieb-tabelle td { padding: .5rem .6rem; border-bottom: 1px solid var(--linie); text-align: left; }
.betrieb-tabelle thead th {
  font-family: var(--display);
  font-variation-settings: 'wdth' 100, 'wght' 500;
  text-transform: uppercase; letter-spacing: .08em;
  font-size: .62rem; color: var(--band-still);
}
.betrieb-tabelle td.zahl { text-align: right; font-variant-numeric: tabular-nums; }
.betrieb-tabelle tr.eng td { color: var(--rost); font-weight: 600; }
.balken { display: block; height: .4rem; background: var(--linie); position: relative; }
.balken i { position: absolute; inset: 0 auto 0 0; background: var(--band); }
.balken.eng i { background: var(--rost); }

/* ── Fuß ──────────────────────────────────────────────────────────────── */

.fuss {
  border-top: 1px solid var(--linie);
  padding: clamp(2rem, 5vw, 3rem) var(--rand);
  display: grid;
  /* Fünf Spalten für fünf Blöcke. Drei Spalten ließen zwei davon in einer
     halben Reihe stehen — und fünf ist eine Primzahl, jede kleinere
     Spaltenzahl außer eins lässt ein Loch. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2rem;
  max-width: var(--inhalt);
  margin: 0 auto;
  font-size: var(--t--1);
}
.fuss h4 {
  font-family: var(--display);
  font-variation-settings: 'wdth' 100, 'wght' 600;
  text-transform: uppercase; letter-spacing: .08em;
  font-size: .68rem; margin: 0 0 .6rem;
}
.fuss ul { list-style: none; padding: 0; margin: 0; line-height: 1.9; color: var(--band-still); }
/* Fünf Spalten sind eine Desktop-Angelegenheit. Schmal bricht die Fußzeile auf
   zwei und dann eine Spalte — und weil fünf eine Primzahl ist, bleibt bei zwei
   Spalten eine Zelle offen. Das fällt dort nicht auf: Die Fußzeile trägt keine
   Fugenfarbe, ein fehlender Platz ist schlicht Weißraum. */
@media (max-width: 62rem) { .fuss { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; } }
@media (max-width: 34rem) { .fuss { grid-template-columns: 1fr; gap: 1.5rem; } }
.fuss a { text-decoration: none; }
.fuss a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Schmal ───────────────────────────────────────────────────────────────
   Die Spalte klappt unter den Inhalt und wird zur zweispaltigen Tafel:
   Bezeichnung links, Wert rechts, die Feldkante als Linie zwischen den Zeilen.
   Die Zielgruppe kommt über Instagram und damit vom Telefon. */

@media (max-width: 56rem) {
  .tafel { grid-template-columns: 1fr; }
  .tafel::after { display: none; }
  .spalte { border-top: 1px solid var(--linie); padding-top: .9rem; }
  .spalte dl { display: grid; grid-template-columns: auto 1fr; gap: 0; }
  .spalte dt { padding: .45rem 0; }
  .spalte dd {
    margin: 0; padding: .45rem 0; text-align: right;
    border-bottom: 1px solid var(--linie);
  }
  .spalte dt { border-bottom: 1px solid var(--linie); }
  .weinzeile { grid-template-columns: 2.8rem minmax(0, 1fr) auto; gap: .7rem; padding: .8rem; }
  .etikett-klein { width: 2.8rem; height: 3.5rem; }
  .kopf { padding: 1rem var(--rand); }
  /* Der Hinweis darf schmal NICHT verschwinden — ohne ihn steht auf dem
     Telefon nirgends, dass Betrieb und Weine erfunden sind (B2B, B-3).
     Stattdessen weicht der lange Text dem kurzen. */
  .demo-bar .lang { display: none; }
  .demo-bar .kurz { display: inline; }
  .demo-bar a { min-height: 40px; display: inline-flex; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ── Druck: die Packliste geht mit in den Keller ──────────────────────── */

@media print {
  .demo-bar, .kopf, .fuss, .knopf, .zum-inhalt { display: none; }
  body { background: #fff; color: #111; font-size: 10.5pt; }
  .tafel { padding: 0; max-width: none; }
  .tafel::after { display: none; }
  .betrieb-tabelle th, .betrieb-tabelle td { border-color: #bbb; }
  .balken { border: .3mm solid #666; }
  .balken i { background: #444; }
  @page { margin: 14mm; }
}

/* ── Logo: Zeichen und Wortmarke ───────────────────────────────────────
   Beide inline als SVG mit eingebetteter Maske, beide auf `currentColor` —
   so steht das Logo auf hellem wie dunklem Grund und das Zeichen kann auch
   allein verwendet werden (Kapsel, Karton, Favicon). Nicht als CSS-Maske mit
   externer Datei: Chrome lädt die über file:// nicht, das Logo blieb leer. */

.marke {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  line-height: 0;
}
.marke .zeichen { height: 1.35rem; width: auto; flex: 0 0 auto; }
.marke .wort { height: 1.3rem; width: auto; }
.marke > span {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* ── Produktkopf ───────────────────────────────────────────────────────
   Bis Tor 2 stand über der Falz nur das Etikett, die H1 begann bei y 985.
   Jetzt trägt der erste Bildschirm die Kaufentscheidung: Name, Preis,
   Kaufzeile links, Flasche und Etikett rechts. */

.produkt-zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.produkt-preis {
  font-family: var(--display);
  font-size: var(--t-2);
  font-variation-settings: 'wght' 600;
  margin: 1rem 0 .3rem;
  line-height: 1.1;
}
.produkt-preis .grundpreis {
  display: block;
  font-family: var(--text);
  font-size: var(--t--1);
  font-variation-settings: normal;
  color: var(--stift-still);
}
.produkt-bild { display: flex; flex-direction: column; gap: 1rem; }
.produkt-bild .flasche {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.produkt-etikett { max-width: 11rem; }

/* Das Glas zeigt die Farbe — bei Orange, Rosé und Pét Nat ist sie das
   Produktversprechen. Etwas flacher als die Stimmungsbänder, damit es als
   Produktabbildung liest und nicht als Stimmung. */
.bildband.glas img { height: clamp(11rem, 26vw, 19rem); }

/* Blatt der Sorte — ersetzt das gezeichnete Zeichen, das bei acht Sorten nur
   zwei Geometrien kannte und deshalb nichts unterschied. */
.sorte-foto {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}
.sorte-tafelbild { max-width: 13rem; margin-bottom: 1rem; }

@media (max-width: 46rem) {
  .produkt-zeile { grid-template-columns: minmax(0, 1fr); }
  .produkt-bild { flex-direction: row; align-items: flex-start; }
  .produkt-bild .flasche { flex: 1 1 0; }
  .produkt-etikett { flex: 0 0 7rem; max-width: 7rem; }
}

/* ── Hero mit Bild ─────────────────────────────────────────────────────
   Der erste Bildschirm trug 0,1 % Bildfläche, während kein geprüfter Weinshop
   unter 36,7 % liegt. Text und Bild stehen jetzt nebeneinander, beide über der
   Falz. Das Bild zeigt die Person, die im ganzen Shop in der Ich-Form spricht —
   sie war vorher auf keiner Seite zu sehen. */

/* Der Hero bricht aus der Tafelordnung aus: volle Breite, keine
   Beschriftungsspalte, keine Feldkante. In Tafelbreite kam das Bild auf 7,8 %
   des ersten Bildschirms — zu wenig, weil 62rem abzüglich 9rem Spalte und
   Rand nur ein schmales Feld übrig lassen. Die Betriebsdaten stehen dafür als
   Zeile unter dem Text, nicht rechts daneben. */
.tafel.hero {
  max-width: none;
  padding: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
.tafel.hero::after { display: none; }
.tafel.hero > .spalte { display: none; }

.hero-zeile {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3.5vw, 2.75rem);
  align-items: center;
}
.hero-bild { margin: 0; }
.hero-bild img {
  width: 100%;
  height: clamp(24rem, 70vh, 44rem);
  object-fit: cover;
  object-position: 54% 42%;
  display: block;
}
.hero-text {
  min-width: 0;
  padding: clamp(1.5rem, 4vw, 3rem) var(--rand) clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem);
}
/* Die Betriebsdaten stehen im Hero als Zeile unter dem Text statt in der
   Beschriftungsspalte — sie sollen den ersten Bildschirm nicht verengen. */
.hero-daten {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.6rem;
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--linie);
  font-family: var(--display);
  font-size: var(--t--1);
  font-variation-settings: 'wdth' 100, 'wght' 500;
}
.hero-daten b { font-variation-settings: 'wdth' 100, 'wght' 600; }
.hero-daten span { color: var(--band-still); }

@media (max-width: 52rem) {
  /* Auf dem Telefon zuerst das Bild, dann der Text — sonst steht die
     Überschrift über einem Bild, das niemand mehr sieht. */
  .hero-zeile { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .hero-bild img { height: clamp(14rem, 42vw, 18rem); }
}

/* ── Kündigung ─────────────────────────────────────────────────────────
   § 312k BGB verlangt eine Schaltfläche, die genauso gut lesbar ist wie der
   Abschluss — nicht kleiner, nicht versteckt, nicht grau. Deshalb hat sie
   dieselbe Größe wie „Abo abschließen" und nur eine ruhigere Farbe. */

.knopf.kuendigen {
  background: transparent;
  color: var(--band);
  border: 1px solid var(--band);
  margin-top: 1.5rem;
}
.knopf.kuendigen:hover { background: var(--band); color: var(--kalk); }

.kuendigen-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 28rem;
  margin: 1.5rem 0;
}
.kuendigen-form label {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-family: var(--display);
  font-size: var(--t--1);
  font-variation-settings: 'wdth' 100, 'wght' 550;
}
.kuendigen-form input,
.kuendigen-form select,
.kuendigen-form textarea {
  font: inherit;
  font-family: var(--text);
  padding: .55rem .7rem;
  border: 1px solid var(--linie);
  background: var(--kalk);
  color: var(--band-tief);
}

/* ── Telefon ───────────────────────────────────────────────────────────
   23 von 37 Seiten scrollten waagerecht; das Dokument war 528 px breit statt
   390. Gemessen mit `scripts/mobil-pruefen.mjs`, das jedes überstehende
   Element mit Selektor und Betrag nennt — vier Verursacher, hier alle vier. */

@media (max-width: 30rem) {
  /* 1. Die Demo-Leiste: drei nowrap-Links und zwei konkurrierende
        margin-left:auto ergaben 525 px. Sie darf umbrechen, und der
        Demo-Hinweis bleibt sichtbar — er ist der Grund für die Leiste. */
  .demo-bar {
    flex-wrap: wrap;
    gap: .4rem .9rem;
    row-gap: .45rem;
  }
  .demo-bar a { white-space: normal; }
  .demo-bar .will-ich,
  .demo-bar .betrieb { margin-left: 0; }
  .demo-bar span { flex-basis: 100%; text-align: left; }

  /* 2. Die Hauptnavigation lief auf 454 px. */
  .kopf { flex-wrap: wrap; row-gap: .8rem; }
  .kopf nav { margin-left: 0; flex-wrap: wrap; row-gap: .5rem; }

  /* 3. Der Produktkopf: Flasche und Etikett nebeneinander brauchten 499 px.
        Untereinander, das Etikett auf halbe Breite. */
  .produkt-bild { flex-direction: column; }
  .produkt-etikett { flex: none; max-width: 9rem; }

  /* 4. Die Betriebstabelle sprengt jedes schmale Fenster. Sie bekommt einen
        eigenen Scrollbereich, statt die ganze Seite zu verschieben. */
  .betrieb-tabelle { display: block; overflow-x: auto; white-space: nowrap; }
}

/* Schriftgrößen für das Telefon — der vorhandene Media-Block enthielt keine
   einzige Größenänderung, die H1 blieb bei 60,75 px (Creative Director). */
@media (max-width: 34rem) {
  :root {
    --t-5: 2.3rem;
    --t-4: 1.95rem;
    --t-3: 1.6rem;
    --t-2: 1.35rem;
    --t-1: 1.12rem;
  }
  h1 { line-height: 1.08; }
}

/* Die Weinliste bleibt bis hierher dreispaltig und quetscht den Namen auf
   80 px Restbreite. Ab hier stapelt sie: Etikett und Text nebeneinander,
   der Preis darunter auf voller Breite. */
@media (max-width: 40rem) {
  .weinzeile {
    grid-template-columns: 3.5rem minmax(0, 1fr);
    grid-template-areas: "bild text" "preis preis";
    row-gap: .6rem;
  }
  .weinzeile > .etikett-klein { grid-area: bild; }
  .weinzeile > span:not(.preis) { grid-area: text; }
  .weinzeile .preis {
    grid-area: preis;
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .2rem .7rem;
  }
}

/* ── Abo-Wahl ──────────────────────────────────────────────────────────
   Der Funktionsbeweis dieses Shops. Bis Tor 2 waren die Knöpfe tot: Der
   Handler setzte `aria-pressed` und sonst nichts, Sechser oder Dreier war
   nicht wählbar, und der Abschluss zeigte einen Demo-Hinweis ohne eine
   einzige Zahl. Jetzt trägt jede Wahl in die Rechnung. */

.abo-gebinde {
  display: flex;
  gap: .5rem;
  margin: 1.1rem 0 1.4rem;
  flex-wrap: wrap;
}
.abo-gebinde button {
  font: inherit;
  font-family: var(--display);
  font-variation-settings: 'wdth' 100, 'wght' 550;
  padding: .5rem 1.1rem;
  min-height: 2.5rem;
  border: 1px solid var(--linie);
  background: var(--kalk);
  color: var(--band-tief);
  cursor: pointer;
}
.abo-gebinde button[aria-pressed="true"] {
  background: var(--band);
  border-color: var(--band);
  color: var(--kalk);
}

.abo-summe {
  background: var(--kalk);
  border-left: 3px solid var(--band);
  padding: 1.2rem 1.4rem;
  margin: 1.4rem 0;
}
.abo-rechnung {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: .35rem 1.2rem;
  margin: 0;
}
.abo-rechnung dt {
  font-family: var(--display);
  font-size: var(--t--1);
  font-variation-settings: 'wdth' 100, 'wght' 500;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--band-still);
  align-self: baseline;
}
.abo-rechnung dd { margin: 0; }

@media (max-width: 34rem) {
  .abo-rechnung { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  .abo-rechnung dd { margin-bottom: .7rem; }
}

/* ── Lieferzeit und Claims ─────────────────────────────────────────────
   Beides stand bis Tor 2 nicht am Kaufbereich: Lieferzeit und Versandbetrag
   nur im Fuß, Claim-Zeilen gar nicht. Die Recherche fand sie bei jedem
   Vorbild direkt unter dem Preis — bei Winter und Loosen unabhängig
   voneinander mit genau drei Zeilen. */

.lieferzeit {
  font-family: var(--display);
  font-size: var(--t--1);
  font-variation-settings: 'wdth' 100, 'wght' 500;
  color: var(--band-still);
  margin: .3rem 0 1rem;
}
.lieferzeit b { color: var(--band); font-variation-settings: 'wdth' 100, 'wght' 650; }

.claims {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: .9rem 0 0;
  border-top: 1px solid var(--linie);
  display: flex;
  flex-direction: column;
  gap: .45rem;
  font-size: var(--t--1);
}
.claims li {
  display: flex;
  align-items: baseline;
  gap: .6rem;
}
/* Das Bildzeichen des Betriebs als Marke vor jeder Zeile — kein fremdes Icon. */
.claims li::before {
  content: '';
  flex: 0 0 auto;
  width: .55rem;
  height: .55rem;
  background: var(--band);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* ── Jahrgang, Verfügbarkeit, Fragen ───────────────────────────────────
   Drei Übernahmen aus der Weingut-Recherche: der Jahrgang vorn im Namen
   (Aldinger), der Verfügbarkeitsstatus am Produkt, und die Fragen, die am
   Verkaufsstand wirklich kommen (Kiefer). */

.jahr {
  font-variation-settings: 'wdth' 92, 'wght' 500;
  color: var(--band-still);
  margin-right: .15em;
}
h1 .jahr { font-size: .78em; }

.lage-status {
  display: block;
  font-family: var(--display);
  font-size: var(--t--2, .78rem);
  font-variation-settings: 'wdth' 100, 'wght' 550;
  margin-top: .2rem;
}
.lage-status.da { color: #3f6b3a; }
.lage-status.knapp { color: var(--rost); }
.lage-status.weg { color: var(--band-still); }
.lieferzeit .lage-status { display: inline; margin: 0; }

.fragen {
  border-top: 1px solid var(--linie);
  padding-top: 1.2rem;
  margin-top: 2rem;
}
.fragen h2 { font-size: var(--t-1); margin-bottom: .8rem; }
.fragen details {
  border-bottom: 1px solid var(--linie);
}
.fragen summary {
  cursor: pointer;
  padding: .7rem 0;
  font-family: var(--display);
  font-variation-settings: 'wdth' 100, 'wght' 550;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.6rem;
  align-items: center;
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after {
  content: '+';
  flex: 0 0 auto;
  color: var(--band-still);
  font-size: 1.2em;
  line-height: 1;
}
.fragen details[open] summary::after { content: '‘2'; }
.fragen details p { margin: 0 0 1rem; max-width: 42rem; }

/* ── Pfad ──────────────────────────────────────────────────────────────
   Auf den eigenen Sortenseiten braucht es einen Weg zurück. Die Brotkrume
   ist Navigation, kein Fließtext — deshalb Tippziele über 24 px. */

.pfad {
  font-family: var(--display);
  font-size: var(--t--1);
  font-variation-settings: 'wdth' 100, 'wght' 500;
  color: var(--band-still);
  margin-bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
}
.pfad a {
  color: var(--band);
  text-decoration: none;
  border-bottom: 1px solid var(--linie);
  display: inline-block;
  min-height: 24px;
  padding-block: 2px;
}
.pfad a:hover { border-bottom-color: var(--band); }

/* ── Rückmeldung nach dem Kauf ─────────────────────────────────────────
   Diesen Kasten gab es in Sandbühl gar nicht: `korb.js` legt ihn an, aber
   das CSS dazu fehlte, die Meldung stand also unformatiert unten im
   Dokument. Inhalt wie in den anderen beiden Shops, Anmutung wie hier. */

#korb-melder {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translate(-50%, 1rem);
  z-index: 40;
  background: var(--band-tief);
  color: var(--kalk);
  font-family: var(--display);
  font-size: var(--t-0);
  font-variation-settings: 'wdth' 100, 'wght' 450;
  padding: .8rem 1.2rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
#korb-melder.sichtbar { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#korb-melder .melder-gut { color: #a8cf8a; font-size: .92em; }

#korb-melder {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  max-width: 21rem;
  line-height: 1.35;
  text-align: left;
}
#korb-melder .melder-korb { opacity: .85; font-size: .92em; }
#korb-melder .melder-weg { font-size: .92em; opacity: .9; }
#korb-melder .zum-korb {
  margin-top: .35rem;
  align-self: flex-start;
  color: inherit;
  border-bottom: 1px solid currentColor;
  text-decoration: none;
  min-height: 24px;
  padding-block: 2px;
}

@media (prefers-reduced-motion: reduce) {
  #korb-melder { transition: none; }
}
@media (max-width: 30rem) {
  #korb-melder { left: 1rem; right: 1rem; transform: none; max-width: none; }
  #korb-melder.sichtbar { transform: none; }
}