/* Weinkontor Süd — Designsystem
   Dunkler, warmer Regalraum. Das Brett ist die Form, nicht die Metapher:
   Lichtkante oben, Schilderleiste vorn, Notizzettel in der Reihe. */

:root {
  /* Kontraste gerechnet mit scripts/kontrast.mjs, nicht geschätzt */
  --keller: #26221e;         /* Grundfläche, aufgehellt nach Rückmeldung */
  --brett: #423b33;          /* Regalflächen — deutlicher Abstand zur Grundfläche */
  --brett-licht: #4f473d;    /* oberer Rand des Bretts, wo das Punktlicht auftrifft */
  --kreide: #f4f0e9;         /* Text */
  --kreide-still: #c8c0b4;   /* Sekundärtext */
  --stift: #f79a82;          /* Einkäufernotiz */
  --messing: #e5c579;        /* Preise */
  --kante: #5a5249;          /* Trennlinien */
  --licht: #857a6c;          /* Lichtkante am Brett */

  --katalog: 'Libre Franklin', system-ui, sans-serif;
  --hand: 'Libre Caslon Text', Georgia, serif;

  /* Terz-Skala 1,25 ab 17px — dichter als Schieferhang, hier muss mehr auf die Seite */
  --t--1: 0.8rem;
  --t-0: 1rem;
  --t-1: 1.25rem;
  --t-2: 1.563rem;
  --t-3: 1.953rem;
  --t-4: 2.441rem;
  --t-5: 3.052rem;

  --rand: clamp(1rem, 4vw, 3.5rem);
  --inhalt: 78rem;

  /* Weinart — aufgehellt, weil Flaschenfotos auf dunklem Grund die Art nicht tragen */
  --art-rot: #d4707a;
  --art-weiss: #e8cf8a;
  --art-rose: #eda898;
  --art-sekt: #b9cfd4;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--keller);
  color: var(--kreide);
  font: 400 17px/1.55 var(--katalog);
}

h1, h2, h3, h4 {
  font-family: var(--katalog);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1em; max-width: 68ch; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }

:focus-visible { outline: 2px solid var(--messing); outline-offset: 3px; }

/* ── Demo-Leiste ─────────────────────────────────────────── */

.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;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem max(var(--rand), calc((100% - var(--inhalt)) / 2));
  background: #14120f;
  color: var(--kreide-still);
  font-size: var(--t--1);
  border-bottom: 1px solid var(--kante);
}
/* 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(--kreide); text-decoration: none; white-space: nowrap; padding: .35rem 0; }
.demo-bar a:hover { text-decoration: underline; text-underline-offset: 3px; }
.demo-bar .will-ich { border: 1px solid var(--kreide-still); padding: .3rem .8rem; }
.demo-bar .will-ich:hover { background: var(--kreide); color: var(--keller); text-decoration: none; }

/* ── Kopf ────────────────────────────────────────────────── */

.kopf {
  display: flex;
  align-items: baseline;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: 1.1rem max(var(--rand), calc((100% - var(--inhalt)) / 2));
  border-bottom: 1px solid var(--kante);
}

.marke { font-weight: 700; font-size: var(--t-1); letter-spacing: -0.03em; text-decoration: none; }
.marke small { display: block; font-size: var(--t--1); font-weight: 400; color: var(--kreide-still); letter-spacing: 0; }

.kopf nav { display: flex; gap: clamp(1rem, 2.5vw, 2rem); margin-left: auto; font-size: var(--t-0); }
.kopf nav a { text-decoration: none; padding: .3rem 0; border-bottom: 1px solid transparent; }
.kopf nav a:hover, .kopf nav a[aria-current] { border-bottom-color: var(--messing); }
.korb { color: var(--kreide-still); }

/* ── Hero: geführte Suche, kein Bild ─────────────────────── */

.hero {
  padding: clamp(2rem, 5vw, 3.5rem) max(var(--rand), calc((100% - var(--inhalt)) / 2));
  border-bottom: 1px solid var(--kante);
}
.hero h1 { font-size: var(--t-3); margin-bottom: 1.25rem; }

.suchfeld { display: flex; gap: .6rem; max-width: 34rem; margin-bottom: 1.25rem; }
.suchfeld input {
  flex: 1;
  min-height: 48px;
  background: var(--brett);
  border: 1px solid var(--kante);
  color: var(--kreide);
  padding: .6rem .9rem;
  font: inherit;
}
.suchfeld input::placeholder { color: var(--kreide-still); }
.suchfeld button {
  min-height: 48px;
  padding: 0 1.2rem;
  background: var(--messing);
  color: var(--keller);
  border: 0;
  font: 600 var(--t-0) var(--katalog);
  cursor: pointer;
}

.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
/* Die Knöpfe stehen auf dem Ladenbild, nicht auf einer Fläche. Ein Bild ist
   aber stellenweise hell: mobil fiel „Festessen 36" auf 4,39:1 (gemessen mit
   textaufbild-pruefen.mjs, Schwelle 4,5:1). Ein Rand allein trägt den Kontrast
   nicht — die Füllung schon, und sie hält den Glas-Eindruck. */
.chips a {
  font-size: var(--t--1);
  padding: .45rem .9rem;
  border: 1px solid var(--kante);
  background: rgba(18, 14, 11, .58);
  backdrop-filter: blur(3px);
  text-decoration: none;
  color: var(--kreide-still);
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}
.chips a:hover { border-color: var(--messing); color: var(--kreide); }
.chips a b { color: var(--kreide); font-weight: 600; margin-right: .35rem; }

.bestandszeile { font-size: var(--t--1); color: var(--kreide-still); margin: 1.25rem 0 0; }

/* ── Das Regal ───────────────────────────────────────────── */

.regal { padding: clamp(1.5rem, 4vw, 3rem) max(var(--rand), calc((100% - var(--inhalt)) / 2)); }

.regal-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.regal-kopf h2 { font-size: var(--t-2); }
.regal-kopf .zahl { font-size: var(--t--1); color: var(--kreide-still); font-variant-numeric: tabular-nums; }
.regal-kopf a { font-size: var(--t--1); color: var(--kreide-still); text-decoration: none; border-bottom: 1px solid var(--kante); }
.regal-kopf a:hover { color: var(--kreide); border-bottom-color: var(--messing); }

/* Brett: Lichtkante oben, Schatten darunter — die Flaschen stehen darauf, nicht davor */
/* Der Lichtstreifen liegt über allem, was im Regal steht — über der Fläche und
   über den Flaschen. Deshalb `::after` statt `background`: Ein Hintergrund läge
   unter den Bildern, und die brächten ihren eigenen dunklen Grund mit. */
.brett::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 10rem;
  background:
    linear-gradient(to bottom,
      rgb(168 150 124 / .20) 0,
      rgb(126 110 88 / .11) 5.5rem,
      rgb(42 37 31 / 0) 10rem),
    radial-gradient(120% 130% at 50% -16%, rgb(120 104 84 / .3) 0%, transparent 72%);
  pointer-events: none;
  z-index: 1;
}
/* Die Schilder stehen über dem Licht, sonst legt sich der Schleier auf den Text. */
.brett .schild, .brett .schnellkauf { position: relative; z-index: 2; }

.brett {
  position: relative;
  /* #2a251f ist die Hintergrundfarbe der Flaschenfotos, auf die Stelle genau.
     Darüber zwei Lichtschichten, die über die ganze Zeile laufen: ein warmer
     Streifen oben, wo der Strahler auftrifft, und ein weiter Schein zur Mitte.
     Beide gehen über alle Flaschen hinweg — deshalb steht keine einzelne mehr
     in ihrem eigenen Oval. */
  background: #2a251f;
  border-top: 2px solid var(--licht);
  box-shadow: 0 10px 22px -14px #000, inset 0 1px 0 #ffffff14;
  padding: 1.5rem 1.25rem 1.25rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 1.5rem .75rem;
  /* Nicht `end`: dann fluchten nur die Unterkanten der Schilder, und die Flaschen
     stehen je nach Namenslänge auf verschiedenen Höhen. Ein Regalbrett hat eine
     Standlinie — Befund des Creative Directors aus Tor 2. */
  align-items: stretch;
}

/* Jede Flasche ist eine Spalte: Bild oben mit fester Standhöhe, Schild unten bündig. */
/* Eine Deklaration statt zweier, die sich gegenseitig aufheben: Vorher stand hier
   `display: grid` und drei Zeilen später `display: flex` — die Standlinien-Reparatur
   war damit wirkungslos, und `.stand` war mit 8,5 rem niedriger als die Bilder mit
   9,6 rem, die unten herausliefen. Befund des Creative Directors in der Nachprüfung. */
.flasche {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Fester Raum für die Flasche: höher als das höchste Bild, und `flex-end`,
   damit alle Flaschenböden auf einer Linie stehen. */
.flasche .stand {
  height: 10.5rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
}

/* Das Schild wächst nach unten, der Preis sitzt immer auf derselben Höhe — sonst
   streut er über vier Linien, sobald ein Erzeugername umbricht. */
.schild { display: flex; flex-direction: column; flex: 1; }
.schild .preis { margin-top: auto; }
/* Das Foto bringt seinen eigenen Regalgrund mit. Ohne starke Maske stünden sechs
   Rechtecke nebeneinander auf dem Brett — dieselbe Kante wie auf der Produktseite. */
.flasche img.foto {
  max-height: 9rem;
  width: auto;
  /* Keine Maske mehr. Die Fotos tragen nur noch die Flasche auf gleichmäßigem
     Dunkel (#2a251f) — mit `lighten` setzt sich je Pixel der hellere von Bild
     und Untergrund durch: Der tote Hintergrund verschwindet im Brett, die
     Flasche bleibt stehen. Kein Oval, keine Kante, nichts zum Abschneiden.
     Vorher brachte jedes Foto seinen eigenen Lichtkegel mit, und sechs davon
     nebeneinander sahen aus wie aufgeklebte Ovale. */
}

.flasche .silhouette {
  width: auto;
  height: 8.2rem;
  filter: drop-shadow(0 7px 7px #0008);
}
.flasche .platzhalter {
  width: 3.2rem;
  height: 7.5rem;
  background: linear-gradient(105deg,
    color-mix(in srgb, currentColor 55%, #fff) 0 18%,
    currentColor 30% 78%,
    color-mix(in srgb, currentColor 70%, #000) 100%);
  clip-path: polygon(40% 0, 60% 0, 60% 22%, 100% 38%, 100% 100%, 0 100%, 0 38%, 40% 22%);
  opacity: .62;
  filter: drop-shadow(0 6px 6px #0007);
}

/* Schilderleiste an der Vorderkante des Bretts */
.schild {
  width: 100%;
  min-height: 6.2rem;
  margin-top: 0;
  padding: 1.1rem .55rem .5rem;
  background: linear-gradient(to bottom,
    rgb(26 22 19 / 0) 0,
    rgb(26 22 19 / .6) .75rem,
    rgb(26 22 19 / .93) 1.6rem,
    #1a1613 2.4rem);
  font-size: var(--t--1);
  line-height: 1.3;
  position: relative;
}
.schild b { display: block; font-weight: 600; color: var(--kreide); margin-bottom: .15rem; }
.schild > span { display: block; color: var(--kreide-still); font-size: .74rem; }
.schild .preis { display: block; margin-top: .45rem; font-size: var(--t-0); color: var(--messing); font-weight: 600; font-variant-numeric: tabular-nums; }
.schild .grund { color: var(--kreide-still); font-weight: 400; font-size: .72rem; }

/* Farbzeichen für die Weinart — trägt, was das Flaschenfoto auf dunklem Grund nicht kann */
.schild::before {
  content: "";
  position: absolute;
  left: 0; top: 1.6rem; bottom: 0;
  width: 3px;
  background: var(--zeichen, var(--kreide-still));
}
.art-rot   { --zeichen: var(--art-rot); }
.art-weiss { --zeichen: var(--art-weiss); }
.art-rose  { --zeichen: var(--art-rose); }
.art-sekt  { --zeichen: var(--art-sekt); }

.flasche:hover .schild b { text-decoration: underline; text-underline-offset: 3px; }

/* Der Notizzettel hängt IM Regal, nicht als Bildunterschrift darunter */
.zettel {
  grid-column: span 2;
  align-self: center;
  background: #efe7d9;
  color: #2a241d;
  font-family: var(--hand);
  font-style: italic;
  font-size: var(--t-0);
  line-height: 1.4;
  padding: .9rem 1rem .8rem;
  margin-bottom: 2.2rem;
  box-shadow: 0 6px 14px -8px #000;
  transform: rotate(-.6deg);
  position: relative;
}
.zettel::before {
  content: "";
  position: absolute;
  top: -6px; left: 50%;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--messing);
  transform: translateX(-50%);
  box-shadow: 0 1px 3px #0009;
}
.zettel cite { display: block; margin-top: .5rem; font-style: normal; font-size: var(--t--1); color: #6b5f4e; }

/* Schmal wird aus dem Raster eine Reihe, an der man entlanggeht — wie am echten
   Regal. Vier Flaschen nebeneinander auf 390 px ergeben 80-px-Silhouetten und
   dreizeilige Preise; das war gemessen schlechter als scrollen. */
@media (max-width: 52rem) {
  .brett {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    /* Der Rand läuft bis an die Kante, damit sichtbar ist, dass es weitergeht */
    padding-right: 1.25rem;
    scrollbar-width: thin;
    scrollbar-color: var(--licht) transparent;
    overscroll-behavior-x: contain;
  }
  .brett > .flasche {
    flex: 0 0 9.5rem;
    scroll-snap-align: start;
  }
  .zettel {
    flex: 0 0 15rem;
    transform: none;
    scroll-snap-align: start;
  }
  .brett::-webkit-scrollbar { height: 6px; }
  .brett::-webkit-scrollbar-thumb { background: var(--licht); border-radius: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .brett { scroll-snap-type: none; }
}

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

.fuss {
  padding: clamp(2rem, 4vw, 3rem) max(var(--rand), calc((100% - var(--inhalt)) / 2));
  border-top: 1px solid var(--kante);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 2rem;
  font-size: var(--t--1);
}
.fuss h4 { font-size: var(--t-0); margin-bottom: .6rem; }
.fuss ul { list-style: none; padding: 0; margin: 0; color: var(--kreide-still); line-height: 1.8; }
.fuss a { text-decoration: none; }
.fuss a:hover { text-decoration: underline; }
.fuss p { color: var(--kreide-still); margin: .75rem 0 0; }

/* ── Katalogseite ────────────────────────────────────────── */

.katalog { padding: clamp(1.5rem, 4vw, 3rem) max(var(--rand), calc((100% - var(--inhalt)) / 2)); }
.katalog-kopf h1 { font-size: var(--t-3); margin-bottom: .5rem; }
.katalog-kopf p { color: var(--kreide-still); font-size: var(--t-0); }

.katalog-raster {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: 2rem;
  align-items: start;
}

.filterleiste { position: sticky; top: 1rem; }
.filter-gruppe { margin-bottom: 1.5rem; }
.filter-gruppe h3 { font-size: var(--t--1); text-transform: none; color: var(--kreide-still); font-weight: 600; margin-bottom: .5rem; }
.filter-gruppe button {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: .5rem;
  align-items: center;
  min-height: 38px;
  padding: .4rem .6rem;
  margin-bottom: .25rem;
  background: transparent;
  border: 1px solid transparent;
  border-left: 3px solid var(--kante);
  color: var(--kreide-still);
  font: inherit;
  font-size: var(--t--1);
  text-align: left;
  cursor: pointer;
}
.filter-gruppe button:hover { color: var(--kreide); border-left-color: var(--licht); }
.filter-gruppe button[aria-pressed="true"] { background: var(--brett); color: var(--kreide); border-left-color: var(--messing); }
.filter-gruppe button span { color: var(--kreide-still); font-variant-numeric: tabular-nums; }

.ergebnis-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--kante);
}
.trefferzahl { margin: 0; font-size: var(--t-0); color: var(--kreide-still); }
.trefferzahl b { color: var(--kreide); font-size: var(--t-1); }
.trefferzahl button { background: none; border: 0; color: var(--messing); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.sortierung { font-size: var(--t--1); color: var(--kreide-still); }
.sortierung select {
  background: var(--brett);
  color: var(--kreide);
  border: 1px solid var(--kante);
  padding: .4rem .5rem;
  font: inherit;
  font-size: var(--t--1);
  margin-left: .4rem;
  min-height: 38px;
}

.katalog-zeile {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr) 7rem 9rem;
  gap: 1rem;
  align-items: center;
  padding: .85rem .6rem .85rem .9rem;
  border-bottom: 1px solid var(--kante);
  border-left: 3px solid var(--zeichen, var(--kante));
  text-decoration: none;
}
.katalog-zeile:hover { background: var(--brett); }
.kz-flasche { height: 2.6rem; width: 2.2rem; opacity: .9; }
.kz-name b { display: block; font-weight: 600; }
.kz-name span { font-size: var(--t--1); color: var(--kreide-still); }
.kz-koerper { font-size: var(--t--1); color: var(--kreide-still); }
.kz-preis { text-align: right; font-weight: 600; color: var(--messing); font-variant-numeric: tabular-nums; }
.kz-preis small { display: block; font-weight: 400; font-size: .72rem; color: var(--kreide-still); }

.mehr {
  display: block;
  width: 100%;
  margin-top: 1.25rem;
  min-height: 48px;
  background: transparent;
  border: 1px solid var(--kante);
  color: var(--kreide);
  font: inherit;
  cursor: pointer;
}
.mehr:hover { border-color: var(--messing); }

.nulltreffer { padding: 2.5rem 0; }
.nulltreffer b { color: var(--kreide); font-size: var(--t-1); }
.nulltreffer p { color: var(--kreide-still); }
.wege { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.wege button {
  min-height: 44px;
  padding: .5rem 1rem;
  background: var(--brett);
  border: 1px solid var(--kante);
  color: var(--kreide);
  font: inherit;
  font-size: var(--t--1);
  cursor: pointer;
}
.wege button:hover { border-color: var(--messing); }

@media (max-width: 52rem) {
  .katalog-raster { grid-template-columns: 1fr; }
  .filterleiste { position: static; }
  .filter-gruppe { display: flex; flex-wrap: wrap; gap: .4rem; }
  .filter-gruppe h3 { width: 100%; }
  .filter-gruppe button { width: auto; }
  .katalog-zeile { grid-template-columns: 2.2rem minmax(0, 1fr) auto; }
  .kz-koerper { display: none; }
}
/* ── Produktseite ──────────────────────────────────────────────────────
   Die Flasche steht links im Licht, alles Kaufbare rechts in einer Spalte.
   Kein Kartengitter: die Seite ist ein Regalplatz, keine Sammlung von Kacheln. */

.krume {
  max-width: var(--inhalt);
  margin: 0 auto;
  padding: 1.2rem var(--rand) 0;
  font-size: var(--t--1);
  color: var(--kreide-still);
}
.krume a { text-decoration: none; }
.krume a:hover { text-decoration: underline; text-underline-offset: 3px; }
.krume span[aria-hidden] { opacity: .5; margin: 0 .35rem; }

.produkt {
  max-width: var(--inhalt);
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 2.5rem) var(--rand) clamp(2rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

/* Kein Brett unter dem Foto: das Bild bringt seinen eigenen Regalgrund mit.
   Ein Kasten darum wäre ein Regal auf einem Regal — der Befund des Creative
   Directors aus Runde 2, hier vor dem Review gesehen statt danach. */
.produkt-bild {
  position: sticky;
  top: 1.5rem;
  display: grid;
  place-items: center;
  /* Ein weicher Schein in der Fotofarbe fängt auf, was die Maske übrig lässt —
     sonst steht eine gerade Bildkante gegen den Kellergrund. */
  background: radial-gradient(58% 50% at 50% 48%, #3b2f25 0%, rgba(59, 47, 37, 0) 78%);
}
.produktfoto {
  width: 100%;
  max-width: 34rem;
  height: auto;
  /* Weich nach außen auslaufen, damit keine Bildkante gegen den Kellergrund steht */
  -webkit-mask-image: radial-gradient(60% 72% at 50% 46%, #000 46%, transparent 98%);
  mask-image: radial-gradient(60% 72% at 50% 46%, #000 46%, transparent 98%);
}
/* Die gezeichnete Flasche hat keinen eigenen Grund — sie bekommt das Brett. */
.produkt-silhouette {
  width: 100%;
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 4vw, 3rem);
  background: var(--brett);
  background-image: radial-gradient(120% 90% at 50% -10%, var(--brett-licht) 0%, transparent 62%);
  border-top: 1px solid var(--licht);
}
.produkt-silhouette .silhouette { height: 24rem; width: auto; }

.herkunftszeile {
  margin: 0 0 .5rem;
  color: var(--kreide-still);
  font-size: var(--t--1);
}
.eu {
  border: 1px solid var(--kante);
  padding: .05em .4em;
  border-radius: 2px;
  font-size: .72rem;
  color: var(--kreide-still);
  white-space: nowrap;
}
.produkt-text h1 { font-size: var(--t-4); margin-bottom: .3rem; }
.produkt-text h1 .jahr { color: var(--kreide-still); font-weight: 400; }
.rebzeile { color: var(--kreide-still); font-size: var(--t-0); margin-bottom: 1.4rem; }

/* Die Notiz der Einkäuferin — als angehefteter Zettel wie im Regal, nur größer. */
.einkaeufer {
  margin: 0 0 1.6rem;
  padding: 1.1rem 1.3rem;
  background: #3a332c;
  border-left: 3px solid var(--stift);
  font-family: var(--hand);
  font-size: var(--t-1);
  line-height: 1.5;
}
.einkaeufer p { margin: 0 0 .6rem; color: var(--kreide); }
.einkaeufer cite {
  font-style: normal;
  font-family: var(--katalog);
  font-size: var(--t--1);
  color: var(--kreide-still);
}
.katalogzeile-hinweis {
  margin: 0 0 1.6rem;
  padding: 1rem 1.2rem;
  border: 1px dashed var(--kante);
  color: var(--kreide-still);
  font-size: var(--t-0);
}
.bewertung { color: var(--kreide-still); font-size: var(--t--1); margin-bottom: 1.4rem; }
.bewertung b { color: var(--kreide); font-size: var(--t-0); }

/* Kaufblock */
.kauf {
  background: var(--brett);
  border-top: 1px solid var(--licht);
  padding: clamp(1.2rem, 3vw, 1.8rem);
  margin-bottom: 2rem;
}
.kauf-preis { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; margin-bottom: 1rem; }
.kauf-preis b {
  font-size: var(--t-4);
  color: var(--messing);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.kauf-preis span { font-size: var(--t--1); color: var(--kreide-still); }

.gebinde { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .9rem; }
.gebinde button {
  flex: 1 1 8rem;
  min-height: 44px;
  background: none;
  border: 1px solid var(--kante);
  color: var(--kreide-still);
  font: inherit;
  font-size: var(--t--1);
  cursor: pointer;
  padding: .5rem .7rem;
}
.gebinde button:hover { border-color: var(--licht); color: var(--kreide); }
.gebinde button[aria-pressed="true"] {
  border-color: var(--messing);
  color: var(--kreide);
  background: rgba(229, 197, 121, .12);
}

.kaufzeile { display: flex; gap: .7rem; }
.mengenwahl {
  display: flex;
  border: 1px solid var(--kante);
  background: var(--keller);
}
.mengenwahl button {
  width: 44px;
  min-height: 48px;
  background: none;
  border: 0;
  color: var(--kreide);
  font-size: var(--t-1);
  cursor: pointer;
}
.mengenwahl button:hover { background: var(--brett-licht); }
.mengenwahl input {
  width: 3rem;
  background: none;
  border: 0;
  color: var(--kreide);
  font: inherit;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.kaufknopf {
  flex: 1;
  min-height: 48px;
  background: var(--messing);
  color: #2a241d;
  border: 0;
  font: inherit;
  font-weight: 700;
  font-size: var(--t-0);
  cursor: pointer;
}
.kaufknopf:hover { background: #f0d492; }

.fortschritt {
  margin: .8rem 0 1.2rem;
  font-size: var(--t--1);
  color: var(--kreide-still);
  max-width: none;
}
.fortschritt b { color: var(--messing); }

/* Versand und Abholung gleichrangig — nicht der eine groß, der andere im Kleingedruckten. */
.liefer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
  margin: 0 0 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--kante);
}
.liefer dt { font-weight: 600; font-size: var(--t--1); margin-bottom: .2rem; }
.liefer dd { margin: 0; font-size: var(--t--1); color: var(--kreide-still); line-height: 1.5; }

.bestand { margin: 0; font-size: var(--t--1); color: var(--kreide-still); }
.bestand.wenig { color: var(--stift); }

/* Steckbrief: zwei Spalten, Wert rechtsbündig auf der Zahlenkante. */
.steckbrief {
  margin: 0 0 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0 2.5rem;
}
.steckbrief > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--kante);
}
.steckbrief dt { color: var(--kreide-still); font-size: var(--t--1); }
.steckbrief dd { margin: 0; text-align: right; font-size: var(--t--1); font-variant-numeric: tabular-nums; }

.passt h2 { font-size: var(--t-1); margin-bottom: .7rem; }
.passt ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.passt li {
  border: 1px solid var(--kante);
  padding: .35rem .8rem;
  font-size: var(--t--1);
  color: var(--kreide-still);
}

/* ── Geschmacks-Karte ──────────────────────────────────────────────────
   Nachbarschaft statt Ergebnisliste: jede belegte Zelle führt in den Katalog. */

.geschmackskarte,
.pflicht,
.aehnlich {
  max-width: var(--inhalt);
  margin: 0 auto;
  padding: 0 var(--rand) clamp(2rem, 5vw, 3.5rem);
}
.geschmackskarte h2, .pflicht h2 { font-size: var(--t-2); margin-bottom: .5rem; }
.gk-lauftext { color: var(--kreide-still); font-size: var(--t-0); margin-bottom: 1.4rem; }

.gk-flaeche { display: flex; align-items: stretch; gap: .8rem; }
.gk-achse-y {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: center;
  font-size: var(--t--1);
  color: var(--kreide-still);
  padding: .3rem 0;
}
.gk-raster {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(5.5rem, auto) repeat(var(--spalten), minmax(0, 1fr));
  gap: .35rem;
  max-width: 46rem;
}
.gk-zeilentitel,
.gk-spaltentitel {
  display: flex;
  align-items: center;
  font-size: var(--t--1);
  color: var(--kreide-still);
}
.gk-spaltentitel { justify-content: center; padding-top: .2rem; }

.gk-zelle {
  display: grid;
  place-items: center;
  position: relative;
  min-height: 3.6rem;
  background: var(--brett);
  border: 1px solid transparent;
  color: var(--kreide-still);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.gk-zelle b { font-weight: 600; font-size: var(--t-0); }
.gk-zelle:hover { border-color: var(--licht); color: var(--kreide); }
.gk-zelle.leer {
  background: none;
  border: 1px dashed var(--kante);
  min-height: 3.6rem;
}
.gk-zelle.hier {
  background: rgba(229, 197, 121, .16);
  border-color: var(--messing);
  color: var(--kreide);
}
/* Punktform trägt die Süße: voll für trocken und brut, Ring für alles darüber.
   Festlegung aus Tor 1 — die Süße ist keine Achse, sie ist die Form des Punkts. */
.gk-punkt {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.gk-punkt.voll { background: var(--messing); }
.gk-punkt.ring { border: 1.5px solid var(--messing); }
.gk-zelle .gk-punkt { position: absolute; bottom: .45rem; }
.gk-legende { display: inline-flex; align-items: center; gap: .35rem; }
.gk-achse-x {
  margin: .7rem 0 0 calc(1.6rem + 5.5rem);
  font-size: var(--t--1);
  color: var(--kreide-still);
}

/* ── Pflichtangaben ───────────────────────────────────────────────────── */

.pflicht-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  border-top: 1px solid var(--kante);
  padding-top: 1.4rem;
}
.pflicht h3 { font-size: var(--t-0); margin: 0 0 .4rem; }
.pflicht h3 + p { margin-bottom: 1.2rem; color: var(--kreide-still); font-size: var(--t--1); }
.pflicht h3 + p b { color: var(--kreide); }
.pflicht-hinweis { color: var(--kreide-still); font-size: var(--t--1); font-style: italic; }
.pflicht.schmal { border-top: 1px solid var(--kante); padding-top: 1.4rem; }
.pflicht.schmal p { color: var(--kreide-still); font-size: var(--t--1); }
.pflicht.schmal a { color: var(--messing); }

.naehrwerte { width: 100%; border-collapse: collapse; font-size: var(--t--1); }
.naehrwerte th, .naehrwerte td { padding: .4rem 0; border-bottom: 1px solid var(--kante); text-align: left; }
.naehrwerte th { font-weight: 400; color: var(--kreide-still); }
.naehrwerte td { text-align: right; font-variant-numeric: tabular-nums; }

.aehnlich { padding-bottom: clamp(2.5rem, 6vw, 4rem); }

@media (max-width: 56rem) {
  .produkt { grid-template-columns: 1fr; }
  .produkt-bild { position: static; min-height: 0; }
  .produktfoto { max-height: 20rem; }
  .produkt-silhouette .silhouette { height: 16rem; }
  .gk-achse-x { margin-left: 0; }
}

@media (max-width: 40rem) {
  .gk-flaeche { gap: .4rem; }
  .gk-raster { grid-template-columns: minmax(4rem, auto) repeat(var(--spalten), minmax(0, 1fr)); gap: .25rem; }
  .gk-zelle, .gk-zelle.leer { min-height: 2.9rem; }
  .gk-zeilentitel, .gk-spaltentitel { font-size: .72rem; }
  .steckbrief { grid-template-columns: 1fr; }
}

/* ── Für Gastronomie ───────────────────────────────────────────────────
   Kein Login, sondern ein Umschalter: der Wirt sieht, was er bekommt,
   bevor er ein Formular ausfüllt. */

.gastro-hero,
.gastro-konditionen,
.gastro-liste,
.gastro-kontakt {
  max-width: var(--inhalt);
  margin: 0 auto;
  padding: 0 var(--rand);
}
.gastro-hero { padding-top: clamp(2rem, 6vw, 4rem); padding-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.oberzeile { color: var(--kreide-still); font-size: var(--t--1); margin-bottom: .6rem; }
.gastro-hero h1 { font-size: var(--t-4); max-width: 22ch; margin-bottom: 1rem; }
.gastro-lauftext { color: var(--kreide-still); font-size: var(--t-1); max-width: 58ch; }

.gastro-konditionen { padding-bottom: clamp(2rem, 5vw, 3rem); }
.gastro-konditionen h2 { font-size: var(--t-2); margin-bottom: 1.2rem; }
.gastro-karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1px;
  background: var(--kante);
  border: 1px solid var(--kante);
}
.gastro-karten > div {
  background: var(--brett);
  background-image: radial-gradient(120% 90% at 50% -10%, var(--brett-licht) 0%, transparent 62%);
  border-top: 1px solid var(--licht);
  padding: 1.3rem;
}
.gastro-karten h3 { font-size: var(--t-1); color: var(--messing); margin-bottom: .5rem; }
.gastro-karten p { color: var(--kreide-still); font-size: var(--t--1); margin: 0; }

.gastro-liste { padding-bottom: clamp(2rem, 5vw, 3rem); }
.gastro-kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: .8rem;
}
.gastro-kopf h2 { font-size: var(--t-2); }
#gastro-schalter {
  min-height: 44px;
  background: none;
  border: 1px solid var(--kante);
  color: var(--kreide-still);
  font: inherit;
  font-size: var(--t--1);
  padding: .5rem 1rem;
  cursor: pointer;
}
#gastro-schalter:hover { border-color: var(--licht); color: var(--kreide); }
#gastro-schalter b { color: var(--kreide); }
#gastro-schalter[aria-pressed="true"] { border-color: var(--messing); background: rgba(229, 197, 121, .12); }
#gastro-schalter[aria-pressed="true"] b { color: var(--messing); }

.gastro-hinweis { color: var(--kreide-still); font-size: var(--t--1); margin-bottom: 1.2rem; }

.preistabelle { width: 100%; border-collapse: collapse; }
.preistabelle caption { text-align: left; color: var(--kreide-still); font-size: var(--t--1); padding-bottom: .6rem; }
.preistabelle th, .preistabelle td { padding: .75rem .6rem; border-bottom: 1px solid var(--kante); text-align: left; }
.preistabelle thead th { font-size: var(--t--1); color: var(--kreide-still); font-weight: 400; }
.preistabelle tbody th { font-weight: 600; }
.preistabelle tbody th small { display: block; font-weight: 400; font-size: var(--t--1); color: var(--kreide-still); }
.preistabelle td { text-align: right; font-variant-numeric: tabular-nums; }
.preistabelle thead th.netto, .preistabelle thead th.gastro { text-align: right; }
.preistabelle thead th.brutto { text-align: right; }

/* Abgemeldet: nur der Ladenpreis. Der Umschalter dreht die Gewichtung um. */
.preistabelle .netto,
.preistabelle .gastro { display: none; }
.preistabelle .brutto { color: var(--messing); font-weight: 600; }
.preistabelle.angemeldet .netto,
.preistabelle.angemeldet .gastro { display: table-cell; }
/* Nur die Werte werden durchgestrichen, nicht die Spaltenüberschrift. */
.preistabelle.angemeldet tbody .brutto { color: var(--kreide-still); font-weight: 400; text-decoration: line-through; }
.preistabelle.angemeldet thead .brutto { color: var(--kreide-still); font-weight: 400; }
.preistabelle.angemeldet .netto { color: var(--kreide); font-weight: 600; }
.preistabelle.angemeldet .gastro { color: var(--messing); font-weight: 600; }

.gastro-fuss { color: var(--kreide-still); font-size: var(--t--1); margin-top: 1rem; }

.gastro-kontakt { padding-bottom: clamp(2.5rem, 6vw, 4rem); }
.gastro-kontakt h2 { font-size: var(--t-2); margin-bottom: .6rem; }
.gastro-kontakt p { color: var(--kreide-still); }
.gastro-kanal { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin: 1.2rem 0; }
.gastro-knopf {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 1.4rem;
  background: var(--messing);
  color: #2a241d;
  font-weight: 700;
  text-decoration: none;
}
.gastro-knopf:hover { background: #f0d492; }
.gastro-zweit { color: var(--kreide-still); font-size: var(--t--1); }

@media (max-width: 40rem) {
  .preistabelle th, .preistabelle td { padding: .6rem .35rem; font-size: var(--t--1); }
  .gastro-hero h1 { font-size: var(--t-3); }
}

/* Touch-Ziele: unter 40 px trifft auf dem Telefon niemand zuverlässig.
   Gemessen bei schmaler Ansicht — Demo-Leiste 31 px, Krume und Fußzeile 15 px. */
@media (max-width: 56rem) {
  /* Wie bei Schieferhang entschieden: schmal bleibt der Mitteltext weg. Mit ihm
     nimmt die Leiste vier Zeilen ein, bevor der Shop überhaupt anfängt. */
  /* 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 { font-size: .78rem; }
  .demo-bar a { display: inline-flex; align-items: center; min-height: 40px; }
  .krume { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .1rem; }
  .krume a, .krume > span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 .25rem; }
  .fuss a { display: inline-flex; align-items: center; min-height: 40px; }
  .fuss ul { line-height: 1.4; }
}

/* ── Korbseite, Rückmeldung und mitlaufende Kaufleiste ─────────────────
   Alle drei aus Tor 2: Weinkontor hatte keine eigene Korbseite, keine
   Rückmeldung beim Hinzufügen (Schieferhang schon) und schmal keinen Weg
   zum Kaufknopf, bei rund 4200 px Seitenhöhe. */

.kopf {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--keller);
}

#korb-melder {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translate(-50%, 1rem);
  z-index: 40;
  background: var(--messing);
  color: #2a241d;
  font-weight: 600;
  font-size: var(--t-0);
  padding: .75rem 1.3rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
#korb-melder.sichtbar { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  #korb-melder { transition: none; }
}

/* Korbseite */
.korb-seite-rahmen {
  max-width: var(--inhalt);
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3rem) var(--rand) clamp(2.5rem, 6vw, 4rem);
}
.korb-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--kante);
  padding-bottom: .8rem;
  margin-bottom: 1.6rem;
}
.korb-kopf h1 { font-size: var(--t-3); }
.korb-kopf .zahl { color: var(--kreide-still); font-size: var(--t--1); }

.korb-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}
.korb-rechnung-spalte {
  background: var(--brett);
  border-top: 1px solid var(--licht);
  padding: 1.3rem;
  position: sticky;
  top: 6rem;
}
.kaufknopf.breit { width: 100%; margin-top: 1rem; }

.demo-hinweis {
  margin-top: 1rem;
  border: 1px solid var(--messing);
  padding: 1rem;
  font-size: var(--t--1);
  color: var(--kreide-still);
}
.demo-hinweis b { color: var(--kreide); }
.demo-hinweis a { color: var(--messing); }

/* korb.js schreibt die Positionsliste hier hinein */
.korb-zeile {
  /* Auch der Korb steht im Regalraum — vorher war er die einzige Seite ohne
     Brettkante und Farbmarke (Creative Director, Nachprüfung). */
  background: var(--brett);
  border-left: 3px solid var(--zeichen, var(--kante));
  padding-left: 1rem;
  margin-bottom: .5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid var(--kante);
}
.korb-zeile b { font-weight: 600; }
.korb-zeile small { display: block; font-size: var(--t--1); color: var(--kreide-still); }
.korb-zeile .mengenwahl { border-color: var(--kante); }
.korb-summe { font-variant-numeric: tabular-nums; color: var(--messing); }
.korb-weg {
  background: none;
  border: 0;
  color: var(--kreide-still);
  font: inherit;
  font-size: var(--t--1);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: 40px;
}
.korb-weg:hover { color: var(--stift); }
.korb-leer { padding: 3rem 0; color: var(--kreide-still); }
.korb-leer a { color: var(--messing); }

#korb-rechnung { font-size: var(--t--1); }
#korb-rechnung div { display: flex; justify-content: space-between; padding: .35rem 0; }
#korb-rechnung .gesamt {
  border-top: 1px solid var(--kante);
  margin-top: .4rem;
  padding-top: .7rem;
  font-size: var(--t-1);
  font-weight: 700;
  color: var(--messing);
}
.korb-mwst { font-size: var(--t--1); color: var(--kreide-still); text-align: right; margin: .3rem 0 0; }

/* Mitlaufende Kaufleiste — schmal ist der Kaufknopf sonst 3000 px weit weg */
.kauf-leiste { display: none; }

@media (max-width: 56rem) {
  .kauf-leiste {
    display: flex;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 25;
    gap: 1rem;
    align-items: center;
    padding: .7rem var(--rand) calc(.7rem + env(safe-area-inset-bottom));
    background: var(--brett);
    border-top: 1px solid var(--licht);
  }
  .kauf-leiste div { display: flex; flex-direction: column; min-width: 0; }
  .kauf-leiste b { font-size: var(--t-1); font-weight: 700; color: var(--messing); font-variant-numeric: tabular-nums; }
  .kauf-leiste span {
    font-size: var(--t--1); color: var(--kreide-still);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .kauf-leiste .kaufknopf { margin-left: auto; min-height: 44px; padding: 0 1.1rem; }

  /* Platz, damit die Leiste nichts verdeckt */
  .fuss { padding-bottom: 6rem; }
  #korb-melder { bottom: 6rem; }

  .korb-raster { grid-template-columns: 1fr; }
  .korb-rechnung-spalte { position: static; }
}

/* ── Der Laden ─────────────────────────────────────────────────────────
   Die Navigation zeigte auf #laden, den Anker gab es nicht — und bei einem
   Fachhändler mit Ladengeschäft ist der Laden der Grund seiner Existenz. */

.laden {
  max-width: var(--inhalt);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem) var(--rand);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  border-top: 1px solid var(--kante);
}
.laden h2 { font-size: var(--t-2); margin-bottom: .6rem; grid-column: 1 / -1; }
.laden h3 { font-size: var(--t-0); margin-bottom: .4rem; }
.laden p, .laden ul { color: var(--kreide-still); font-size: var(--t--1); }
.laden ul { list-style: none; padding: 0; margin: 0; line-height: 1.9; }
.laden a { color: var(--messing); }
.laden .oeffnung { display: flex; justify-content: space-between; gap: 1rem; max-width: 20rem; }
.laden .oeffnung span:last-child { font-variant-numeric: tabular-nums; color: var(--kreide); }

/* Erzeuger auf dem Regalschild — vorher hießen sechs Weine schlicht „Riesling". */
.schild .erzeuger { font-size: var(--t--1); color: var(--kreide-still); }

/* Hinweis beim rabattbefreiten Wein, damit die Schnellwahl nichts verspricht,
   was der Korb nicht einlöst. */
.kein-rabatt {
  margin: .6rem 0 0;
  font-size: var(--t--1);
  color: var(--stift);
  max-width: none;
}

/* Schild kompakt halten: Mit Erzeuger und Versandhinweis war es auf sechs Zeilen
   gewachsen und drückte die Flaschen klein. Die Pflichtangaben bleiben vollständig,
   nur enger gesetzt. */
.schild { line-height: 1.35; }
.schild .erzeuger,
.schild .grund { font-size: .72rem; }
.schild .grund { display: block; margin-top: .1rem; }
.flasche img.foto { max-height: 9.6rem; }
.silhouette { height: 9.4rem; width: auto; }

/* Der angemeldete Zustand wird gezeigt, nicht behauptet — Festlegung aus Tor 1. */
.gastro-konto[hidden] { display: none; }
.gastro-konto {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 1.2rem;
  padding: .7rem 1rem;
  background: var(--brett);
  border-left: 3px solid var(--messing);
  font-size: var(--t--1);
  color: var(--kreide-still);
  max-width: none;
}
.gastro-konto b { color: var(--kreide); }
.gastro-punkt {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--messing); flex: 0 0 auto;
}

/* ── Diese Woche im Glas ───────────────────────────────────────────────
   Der eine Moment der Startseite. Kein Brett, kein Schild, kein Raster —
   die Flasche steht einmal so groß da, wie sie es verdient. Alles ringsum
   bleibt ruhig, deshalb hat dieser Abschnitt als einziger --t-5. */

.im-glas {
  max-width: var(--inhalt);
  margin: clamp(2rem, 6vw, 4.5rem) auto;
  padding: 0 var(--rand);
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.ig-bild {
  display: grid;
  place-items: center;
  /* Derselbe weiche Schein wie auf der Produktseite: das Foto bringt seinen
     eigenen Regalgrund mit, eine gerade Bildkante gegen den Keller wäre falsch. */
  background: radial-gradient(56% 50% at 50% 48%, #3b2f25 0%, rgba(59, 47, 37, 0) 78%);
}
.ig-bild img {
  width: 100%;
  max-width: 26rem;
  height: auto;
  -webkit-mask-image: radial-gradient(60% 72% at 50% 46%, #000 46%, transparent 98%);
  mask-image: radial-gradient(60% 72% at 50% 46%, #000 46%, transparent 98%);
}

.ig-ober { color: var(--messing); font-size: var(--t--1); margin-bottom: .6rem; }
.im-glas h2 {
  font-size: var(--t-5);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin-bottom: .5rem;
}
.ig-her { color: var(--kreide-still); font-size: var(--t-0); margin-bottom: 1.4rem; }

.ig-notiz {
  margin: 0 0 1.6rem;
  padding-left: 1.1rem;
  border-left: 2px solid var(--stift);
  font-family: var(--hand);
  font-size: var(--t-2);
  line-height: 1.4;
  max-width: 34ch;
}
.ig-notiz p { margin: 0 0 .5rem; max-width: none; }
.ig-notiz cite {
  font-style: normal;
  font-family: var(--katalog);
  font-size: var(--t--1);
  color: var(--kreide-still);
}

.ig-preis { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.ig-preis b { font-size: var(--t-3); color: var(--messing); font-variant-numeric: tabular-nums; line-height: 1; }
.ig-preis span { font-size: var(--t--1); color: var(--kreide-still); }

.ig-wege { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.ig-wege .kaufknopf { min-height: 48px; padding: 0 1.6rem; flex: 0 0 auto; }
.ig-wege a { color: var(--kreide-still); font-size: var(--t--1); }
.ig-wege a:hover { color: var(--kreide); }

.ig-laden { color: var(--kreide-still); font-size: var(--t--1); max-width: 42ch; }
.ig-laden a { color: var(--messing); }

@media (max-width: 56rem) {
  .im-glas { grid-template-columns: 1fr; gap: 1.5rem; }
  .ig-bild img { max-width: 18rem; }
  .im-glas h2 { font-size: var(--t-4); }
  .ig-notiz { font-size: var(--t-1); max-width: none; }
}

/* Zustände, die jeder Händler kennt: Jahrgangswechsel und „nur im Laden".
   Sie bekommen keinen Kaufknopf, der ins Leere führt, sondern die Auskunft,
   die man an der Theke bekäme. */
.kauf.zustand { border-top-color: var(--stift); }
.zustand-titel {
  margin: 0 0 .4rem;
  font-weight: 700;
  font-size: var(--t-1);
  color: var(--stift);
}
.zustand-text { color: var(--kreide-still); font-size: var(--t-0); margin-bottom: 1.2rem; }
.kauf.zustand .kaufknopf {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* Marke am Regalschild */
.schild .marke {
  display: inline-block;
  margin-top: .3rem;
  padding: .12rem .45rem;
  border: 1px solid var(--stift);
  color: var(--stift);
  font-size: .7rem;
}

/* ── Regalkärtchen ─────────────────────────────────────────────────────
   Am Bildschirm dunkel wie der Rest, im Druck hell auf Papier. Eine Pflege,
   zwei Ausgabewege — das ist das Argument, nicht die Gestaltung. */

.karten-kopf {
  max-width: var(--inhalt);
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3rem) var(--rand) 1.5rem;
}
.karten-kopf h1 { font-size: var(--t-3); margin-bottom: .6rem; }
.karten-kopf p { color: var(--kreide-still); }
.karten-hinweis { font-size: var(--t--1); max-width: 60ch; }
.drucken {
  background: none;
  border: 0;
  color: var(--messing);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0;
}

.karten-blatt {
  max-width: var(--inhalt);
  margin: 0 auto;
  padding: 0 var(--rand) clamp(2.5rem, 6vw, 4rem);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
}
.karte {
  background: var(--brett);
  border-left: 3px solid var(--zeichen, var(--messing));
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.karte header b { display: block; font-size: var(--t-1); }
.karte header span { font-size: var(--t--1); color: var(--kreide-still); }
.karte-notiz { font-family: var(--hand); font-size: var(--t-0); margin: 0; color: var(--kreide); }
.karte-werte { margin: 0; display: grid; gap: .15rem; font-size: var(--t--1); }
.karte-werte > div { display: flex; justify-content: space-between; gap: 1rem; }
.karte-werte dt { color: var(--kreide-still); }
.karte-werte dd { margin: 0; text-align: right; }
.karte-preis { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin: auto 0 0; }
.karte-preis b { font-size: var(--t-2); color: var(--messing); font-variant-numeric: tabular-nums; }
.karte-preis span { font-size: .7rem; color: var(--kreide-still); }
.karte-fuss { font-size: .7rem; color: var(--kreide-still); margin: 0; }

@media print {
  .demo-bar, .kopf, .fuss, .karten-hinweis, .drucken { display: none; }
  body { background: #fff; color: #111; font-size: 11pt; }
  .karten-kopf { padding: 0 0 8mm; }
  .karten-kopf h1 { font-size: 16pt; }
  .karten-kopf p { color: #444; }
  .karten-blatt {
    padding: 0;
    gap: 4mm;
    grid-template-columns: repeat(2, 1fr);
  }
  .karte {
    background: #fff;
    border: 0.4mm solid #999;
    border-left-width: 2mm;
    break-inside: avoid;
    page-break-inside: avoid;
    padding: 4mm;
  }
  .karte-notiz, .karte header b { color: #111; }
  .karte header span, .karte-werte dt, .karte-preis span, .karte-fuss { color: #555; }
  .karte-preis b { color: #111; }
  @page { margin: 12mm; }
}

/* Artikelnummer und Stand — ohne die beiden ist ein Kärtchen im Laden nicht
   brauchbar (Befund des Händlers in der Nachprüfung). */
.karte-nr { font-size: .68rem; color: var(--kreide-still); margin: 0; }

/* Kurzkärtchen für die Positionen ohne eigene Notiz */
.karten-blatt.kurz { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.karte.kurz { gap: .4rem; padding: .8rem .9rem; }
.karte.kurz header b { font-size: var(--t-0); }
.karten-kopf.zweiter { padding-top: 1.5rem; border-top: 1px solid var(--kante); }
.karten-kopf.zweiter h2 { font-size: var(--t-2); margin-bottom: .5rem; }

.gastro-regel {
  border-left: 2px solid var(--messing);
  padding-left: .8rem;
  font-size: var(--t--1);
  color: var(--kreide-still);
}

@media print {
  .karten-kopf.zweiter { break-before: page; page-break-before: always; }
  .karten-blatt.kurz { grid-template-columns: repeat(3, 1fr); }
}

/* Sprunglink: unsichtbar, bis jemand mit der Tastatur dorthin kommt. */
.zum-inhalt {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 50;
  background: var(--messing);
  color: #2a241d;
  padding: .7rem 1.2rem;
  font-weight: 600;
}
.zum-inhalt:focus { left: 1rem; top: 1rem; }

/* Mengenwaehler im Korb, den korb.js als .menge.klein schreibt */
/* korb.js ist beiden Shops gemeinsam und schreibt `.menge.klein`; Weinkontor nennt
   seinen eigenen Mengenwähler `.mengenwahl`. Ohne diese Regel bleiben die Felder im
   Browser-Weiß stehen, mitten im dunklen Regalraum. */
.korb-zeile .menge {
  display: flex;
  border: 1px solid var(--kante);
  background: var(--keller);
}
.korb-zeile .menge button {
  width: 40px;
  min-height: 40px;
  background: none;
  border: 0;
  color: var(--kreide);
  font-size: var(--t-1);
  cursor: pointer;
}
.korb-zeile .menge button:hover { background: var(--brett-licht); }
.korb-zeile .menge input {
  width: 3rem;
  background: none;
  border: 0;
  color: var(--kreide);
  font: inherit;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.korb-zeile > div:first-child span { display: block; font-size: var(--t--1); color: var(--kreide-still); }

/* ── Wortmarke mit Zeichen ─────────────────────────────────────────────
   Das Zeichen kommt aus der Form-Idee des Shops und erbt die Textfarbe,
   damit es auf jedem Grund und in jeder Größe funktioniert. */
.marke { display: inline-flex; align-items: center; gap: .6rem; }
.marke-zeichen { width: 2.3rem; height: 2.3rem; flex: 0 0 auto; color: var(--messing); }
.marke > span { display: block; }

/* ── Aufmacher mit Raum ────────────────────────────────────────────────
   Die geführte Suche bleibt der Funktionsbeweis dieses Shops und damit die
   Hauptsache. Sie liegt jetzt aber auf dem Laden, den sie durchsucht — bei
   1,4 % Bildfläche im ersten Bildschirm war der Raum nur behauptet, nicht
   gezeigt. Der Verlauf sichert den Kontrast, damit die Eingabe lesbar bleibt. */

.hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(24rem, 66vh, 38rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-raum {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 42% 52%;
  z-index: -2;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(20, 17, 14, .58) 0%,
    rgba(20, 17, 14, .78) 46%,
    rgba(20, 17, 14, .92) 100%);
}
.hero h1 { color: var(--kreide); }

@media (max-width: 46rem) {
  .hero { min-height: clamp(20rem, 56vh, 26rem); }
}

/* ── Telefon ───────────────────────────────────────────────────────────
   102 von 198 Seiten waren 495 px breit statt 390. Gemessen mit
   `scripts/mobil-pruefen.mjs`; die Verursacher sind die Kopfnavigation und
   die Kaufleiste, beide mit nicht umbrechenden Zeilen. */

@media (max-width: 56rem) {
  /* Sobald der Kurztext einspringt, muss die Leiste auch umbrechen dürfen —
     sonst steht sie zwar kürzer da, sprengt das Fenster aber weiterhin. */
  .demo-bar { flex-wrap: wrap; gap: .4rem .9rem; }
  .demo-bar a { white-space: normal; }
  .demo-bar .will-ich, .demo-bar .betrieb { margin-left: 0; }
}

@media (max-width: 32rem) {
  .kopf { flex-wrap: wrap; row-gap: .7rem; }
  .kopf nav {
    margin-left: 0;
    flex-wrap: wrap;
    row-gap: .4rem;
    width: 100%;
  }
  .kauf-leiste { flex-wrap: wrap; row-gap: .6rem; }
  .kauf-leiste > * { min-width: 0; }
}

/* Tippziele: 94 Links standen mit 15 px Höhe da — die WCAG-Schwelle sind 24.
   Betroffen sind die kleinen Links in Regalkopf und Fuß, die als Textzeile
   gesetzt sind und deshalb nur ihre Zeilenhöhe belegen. */
@media (max-width: 46rem) {
  /* Die Brotkrumen auf den 96 Produktseiten waren mit 15 px Höhe das
     häufigste zu kleine Tippziel — 94 Treffer über den ganzen Shop. */
  .krume a,
  .ig-wege a,
  .regal-kopf a,
  .fuss a,
  .schild a {
    display: inline-block;
    min-height: 24px;
    padding-block: 4px;
  }
}

/* ── Kaufen aus dem Regal ──────────────────────────────────────────────
   Die Kachel ist jetzt ein Container, nicht mehr selbst der Link: Bild und
   Schild verlinken, der Knopf steht darunter. Aus einer Liste heraus kaufen
   zu können ist laut Recherche bei 96 Weinen der teuerste fehlende Posten. */

.flasche-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 1 1 auto;
}

.schnellkauf {
  font: inherit;
  font-family: var(--display);
  font-size: var(--t--1);
  font-variation-settings: 'wdth' 104, 'wght' 550;
  margin-top: 0;
  min-height: 2.6rem;
  padding: .45rem .8rem;
  border: 0;
  border-top: 1px solid var(--kante);
  background: #1a1613;
  color: var(--kreide-still);
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.flasche:hover .schnellkauf,
.schnellkauf:focus-visible {
  background: var(--messing);
  border-color: var(--messing);
  color: var(--keller);
}
/* Auf dem Telefon gibt es kein Hover — dort steht der Knopf immer deutlich. */
@media (hover: none) {
  .schnellkauf { background: var(--brett-licht); color: var(--kreide); }
}
.schnellkauf-aus {
  margin-top: .5rem;
  min-height: 2.4rem;
  display: flex;
  align-items: center;
  font-size: var(--t--1);
  color: var(--kreide-still);
  opacity: .7;
}

/* ── Rückmeldung nach dem Kauf ─────────────────────────────────────────
   Vorher stand dort nur der Name. Jetzt steht daneben, wie weit es noch bis
   zur Versandfreiheit und bis zur nächsten Mengenstufe ist — in dem Moment,
   in dem jemand ohnehin über die nächste Flasche nachdenkt. */

#korb-melder {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  max-width: 21rem;
  line-height: 1.35;
}
#korb-melder .melder-korb { opacity: .85; font-size: .92em; }
#korb-melder .melder-gut { color: #9fd08a; 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;
}