/* =====================================================================================
   Weingut Steinleiten · Gestaltung, Bautyp Etikett
   Aufbau: Grundlagen · Kopf · Jahrgangsleiste · Etikett (Rahmen, Zier, Kapitälchen) · Knöpfe (Siegel) ·
           Das Glas · Der Weg (klebend) · Weinkarte · Ausg’steckt · Jause · Lage · Verkostung ·
           Fragen und Kontakt · Fuß · Auftritt und kleine Bewegungen · Schmal
   Bewegt wird nur transform, opacity und stroke-dashoffset. Ohne JavaScript ist alles sichtbar.
   ===================================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--schrift); font-size: 17px; line-height: 1.6; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, dl, dd, ul, ol, figure, blockquote, address { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--accent); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.sprung { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: var(--radius-klein); background: var(--accent); color: var(--on-accent); font-weight: 700; }
.sprung:focus { top: 12px; }
.leise { color: var(--muted); }
.klein { font-size: 14px; }

/* Kapitälchen mit Sperrung: die Zeile über jeder Überschrift, Knöpfe, kleine Schilder */
.kapitaelchen { font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
h1 { font-size: clamp(30px, 8vw, 56px); font-weight: 500; letter-spacing: .2em; text-transform: uppercase; line-height: 1.1; margin-top: 6px; }
h2 { font-size: clamp(24px, 4.2vw, 32px); font-weight: 500; line-height: 1.2; letter-spacing: .01em; text-wrap: balance; margin-top: 8px; }
h3 { font-size: 20px; font-weight: 600; line-height: 1.25; }
.jahrgang { font-size: clamp(56px, 11vw, 88px); font-weight: 200; line-height: 1; letter-spacing: .06em; font-variant-numeric: tabular-nums lining-nums; }

/* Zierlinie: Linie, Rhombus, Linie */
.zier { display: flex; align-items: center; gap: 14px; margin: 0 auto 18px; max-width: 320px; color: var(--linie); }
.zier::before, .zier::after { content: ""; flex: 1; height: 1px; background: currentColor; }
.zier i { width: 7px; height: 7px; border: 1px solid currentColor; transform: rotate(45deg); flex: none; }

/* ---------- Kopf ---------- */
.kopf { position: sticky; top: 0; z-index: 30; height: var(--kopf); background: var(--bg); border-bottom: 1px solid var(--border); }
.kopf-innen { height: 100%; width: min(100% - 32px, 1120px); margin-inline: auto; display: flex; align-items: center; gap: 20px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-size: 13px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; }
.siegel-zeichen { width: 30px; height: 30px; color: var(--accent); }
.kopf-tel { margin-left: auto; color: var(--text); text-decoration: none; font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.kopf-tel:hover { color: var(--accent); }

/* ---------- Jahrgangsleiste: links fest am Rand (ab 1220 px mit Namen, bis 1000 px nur Zahlen), darunter Streifen oben ---------- */
.jahrgaenge { position: fixed; left: calc((100vw - var(--breite)) / 2 - 214px); top: 50%; transform: translateY(-50%); z-index: 20; width: 190px; }
.jahrgaenge ol { display: grid; gap: 2px; }
.jahrgaenge a { display: grid; grid-template-columns: 54px auto; align-items: baseline; gap: 10px; min-height: 44px; padding: 4px 10px; border-left: 1px solid transparent; color: var(--muted); text-decoration: none; transition: color .25s, border-color .25s; }
.jahrgaenge b { font-size: 22px; font-weight: 300; letter-spacing: .04em; font-variant-numeric: tabular-nums; color: var(--text); transition: color .25s, font-weight .25s; }
.jahrgaenge span { font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.jahrgaenge a:hover { border-left-color: var(--linie); color: var(--text); }
.jahrgaenge a.ist-aktiv { border-left-color: var(--accent); color: var(--text); }
.jahrgaenge a.ist-aktiv b { color: var(--accent); font-weight: 500; }

/* ---------- Knöpfe wie Siegel: rund, Ton in Ton, Prägung durch Schatten innen ---------- */
.knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border: 1px solid var(--linie); border-radius: 999px; background: var(--surface-2); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; line-height: 1; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -2px 0 rgba(90, 70, 40, .16), inset 0 0 0 3px var(--surface), inset 0 0 0 4px var(--border);
  transition: transform .2s, box-shadow .2s, background .2s, color .2s; }
.knopf:hover { transform: translateY(-1px); background: #f1e8d4; }
.knopf:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 1px 2px rgba(90, 70, 40, .25), inset 0 0 0 3px var(--surface), inset 0 0 0 4px var(--border); }
.knopf-klein { min-height: 44px; padding: 0 16px; font-size: 12px; }
.knopf-siegel { background: var(--accent); color: var(--on-accent); border-color: var(--accent-tief);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -2px 0 rgba(0, 0, 0, .3), inset 0 0 0 3px var(--accent), inset 0 0 0 4px rgba(255, 255, 255, .55); }
.knopf-siegel:hover { background: var(--accent-tief); }
.knopf-siegel:active { box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35), inset 0 0 0 3px var(--accent), inset 0 0 0 4px rgba(255, 255, 255, .55); }
.knopf[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent-tief);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -2px 0 rgba(0, 0, 0, .3), inset 0 0 0 3px var(--accent), inset 0 0 0 4px rgba(255, 255, 255, .55); }

/* ---------- Das Etikett: die Mittelspalte mit Doppelrahmen ---------- */
.etikett { position: relative; width: min(100% - 32px, var(--breite)); margin: 22px auto 40px; padding: 0 clamp(18px, 6vw, 60px);
  background: linear-gradient(180deg, #fbf7ee, var(--surface) 260px); border: 1px solid var(--linie); outline: 1px solid var(--linie); outline-offset: 5px; }
.etikett::before, .etikett::after { content: ""; position: absolute; top: -5px; width: 9px; height: 9px; border: 1px solid var(--linie); background: var(--surface); transform: rotate(45deg); }
.etikett::before { left: -5px; }
.etikett::after { right: -5px; }
.etikett > section { padding: 64px 0; }
.etikett > section + section { border-top: 1px solid var(--surface-2); }
.abschnitt-kopf { text-align: center; }
.abschnitt-kopf .leise { margin: 14px auto 0; max-width: 36rem; }

/* =====================================================================================
   1 · Das Glas (js/glas.js)
   ===================================================================================== */
.etikett > .held { padding-top: 40px; text-align: center; }
.held-ort { margin-bottom: 30px; }
.held .jahrgang { margin-top: 4px; }
.held .zier { max-width: 240px; margin: 20px auto 18px; }
.einleitung { max-width: 34rem; margin: 0 auto; font-size: 18px; color: var(--muted); }

.glas-buehne { position: relative; max-width: 420px; margin: 14px auto 0; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
html.js[data-bewegung="mittel"] .glas-buehne, html.js[data-bewegung="dynamisch"] .glas-buehne { cursor: ew-resize; }
.glas-svg { width: 100%; height: auto; overflow: visible; --kf: #c9bf7a; }
.glas-koerper { fill: rgba(255, 255, 255, .45); stroke: var(--glas-linie); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.glas-fuellung { fill: rgba(255, 255, 255, .45); }
.glas-kontur { fill: none; stroke: var(--glas-linie); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.glas-rand { fill: none; stroke: var(--glas-linie); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.glas-licht { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; opacity: .8; }
.glas-licht-leise { stroke-width: 2; opacity: .5; }
.wein-welsch { fill: var(--wein-welsch); }
.wein-sauvignon { fill: var(--wein-sauvignon); }
.wein-rose { fill: var(--wein-rose); }
.wein-spiegel { fill: #fff; opacity: .35; }
/* drei Weinebenen übereinander, die Sorte schaltet nur die Deckkraft */
.glas-svg .wein { opacity: 0; }
.glas-svg[data-sorte="welsch"] .wein-welsch, .glas-svg[data-sorte="sauvignon"] .wein-sauvignon, .glas-svg[data-sorte="rose"] .wein-rose { opacity: .92; }
.glas-svg[data-sorte="rose"] { --kf: #d98a95; }
html.js[data-bewegung="mittel"] .glas-svg .wein, html.js[data-bewegung="dynamisch"] .glas-svg .wein { transition: opacity .5s; }
.kirchenfenster path { fill: none; stroke: var(--kf); stroke-width: 1.4; stroke-linecap: round; opacity: 0; }
.kirchenfenster.an path { animation: kirchenfenster 1.8s ease-out forwards; }
.kirchenfenster.an path:nth-child(2) { animation-delay: .12s; }
.kirchenfenster.an path:nth-child(3) { animation-delay: .22s; }
@keyframes kirchenfenster { 0% { opacity: 0; transform: translateY(-4px); } 25% { opacity: .8; } 100% { opacity: 0; transform: translateY(8px); } }
.glas-hinweis { margin-top: 2px; font-size: 13px; color: var(--muted); }
html:not(.js) .glas-hinweis, html[data-bewegung="starr"] .glas-hinweis { display: none; }
.nur-finger { display: none; }
@media (hover: none) { .nur-maus { display: none; } .nur-finger { display: inline; } }

.sorten-wahl { display: none; }
html.js .sorten-wahl { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 8px 0 22px; }
.sorten { display: grid; gap: 14px; }
.sorte { padding: 22px 24px 20px; border: 1px solid var(--border); background: var(--surface); box-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 4px var(--surface-2); }
html.js .sorte:not(.ist-aktiv) { display: none; }
html.js[data-bewegung="mittel"] .sorte.ist-aktiv, html.js[data-bewegung="dynamisch"] .sorte.ist-aktiv { animation: karte-ein .4s cubic-bezier(.2, .8, .2, 1); }
@keyframes karte-ein { from { opacity: 0; transform: translateY(8px); } }
.sorte-titel { font-size: 22px; font-weight: 500; margin-top: 10px; }
.sorte-text { margin: 10px auto 0; max-width: 32rem; font-size: 16px; color: var(--muted); }
.sorte-preis { margin-top: 14px; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 12px; }
.sorte-preis span { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.sorte-preis b { font-size: 18px; font-weight: 600; margin-right: 10px; }
.zahlenzeile { margin-top: 26px; }
.held-knoepfe { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* =====================================================================================
   2 · Der Weg: Vom Stock ins Glas (js/stock-ins-glas.js)
   Ruhige Fassung (ohne JavaScript, starr, niedriger Bildschirm): Szene zeigt das Glas am Tisch,
   die Schritte als Karten. Mit html.weg-an klebt die Bühne, die Schritte scrollen vorbei.
   ===================================================================================== */
.weg-raster { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 32px; align-items: start; margin-top: 40px; }
.weg-buehne { display: flex; flex-direction: column; gap: 14px; }
.tafel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--radius); background: #2b2523; color: #f1e9d6; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.tafel-zeile { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #cdbfa6; }
.tafel-wert { margin-top: 3px; font-size: 16px; font-weight: 500; line-height: 1.3; }
.thermo { display: flex; align-items: center; gap: 6px; }
.thermo svg { width: 20px; height: 92px; overflow: visible; }
.thermo-rohr { fill: #f7f2e7; stroke: #a89778; stroke-width: 1; }
.thermo-fuellung, .thermo-kugel { fill: var(--accent); }
.thermo-kugel { stroke: #f7f2e7; stroke-width: 1.5; }
.thermo-strich { stroke: #a89778; stroke-width: 1; }
.thermo-wert { font-size: 12px; color: #cdbfa6; white-space: nowrap; }
.thermo-wert b { font-size: 20px; font-weight: 500; color: #fff; font-variant-numeric: tabular-nums; }
.szene { width: 100%; aspect-ratio: 360 / 520; border: 1px solid var(--border); background: var(--surface); overflow: hidden; }
.szene-bild { width: 100%; height: 100%; }
html.js .bild { opacity: 0; }
html.js .bild.an { opacity: 1; }
html.js[data-bewegung="mittel"] .bild, html.js[data-bewegung="dynamisch"] .bild { transition: opacity .4s; }
html:not(.js) .bild:not(.bild-ende) { display: none; }

/* Zeichnung: Farben der Teile */
.blatt { fill: var(--laub); stroke: var(--laub-dunkel); stroke-width: .8; }
.blatt-ader { fill: none; stroke: var(--laub-dunkel); stroke-width: .7; }
.stiel { stroke: var(--holz-dunkel); stroke-width: 1.6; }
.beere { fill: var(--traube); stroke: #9aa445; stroke-width: .8; }
.beere-licht { fill: #fff; opacity: .7; }
.holz { fill: var(--holz); }
.holz-dunkel { fill: var(--holz-dunkel); }
.holz-hell { fill: var(--holz-hell); }
.holz-dunkel-linie { stroke: var(--holz-dunkel); stroke-width: 3; }
.rebzeile path { fill: none; stroke: #8fa06a; stroke-width: 2; stroke-dasharray: 2 6; }
.rebzeile-fein path, .rebzeile-fein { fill: none; stroke: #8fa06a; stroke-width: 1.5; stroke-dasharray: 2 5; }
.boden { fill: var(--boden); }
.stamm { fill: none; stroke: var(--holz-dunkel); stroke-width: 9; stroke-linecap: round; }
.arm { fill: none; stroke: var(--holz-dunkel); stroke-width: 5; stroke-linecap: round; }
.trieb path { fill: none; stroke: var(--laub-dunkel); stroke-width: 2; stroke-linecap: round; }
.haut { fill: var(--haut); stroke: #b58a66; stroke-width: .8; }
.aermel { fill: none; stroke: #4a5a7a; stroke-width: 9; stroke-linecap: round; }
.most { fill: var(--most); }
.stahl { fill: var(--stahl); }
.stahl-dunkel { fill: var(--stahl-dunkel); }
.keller { fill: var(--keller); }
.keller-wand { fill: var(--keller-wand); }
.blasen circle { fill: #fff; opacity: .85; }
.flasche-leer { fill: #fff; fill-opacity: .25; stroke: var(--laub-dunkel); stroke-width: .8; opacity: .55; }
.flasche-glas { fill: #d9e6c9; fill-opacity: .35; stroke: var(--laub-dunkel); stroke-width: 1.5; }
.flasche-dunkel { fill: #4f6a33; fill-opacity: .8; stroke: #2f3a1a; stroke-width: 1.2; }
.strahl { fill: none; stroke: var(--wein-sauvignon); stroke-width: 3.5; stroke-linecap: round; }

/* Schritte, ruhig: Karten */
.schritte { display: grid; gap: 14px; }
.schritt { padding: 20px 22px; border: 1px solid var(--border); background: var(--surface); }
.schritt h3 { margin: 6px 0 8px; font-weight: 500; }
.schritt p { font-size: 16px; color: var(--muted); }
.schritt .schritt-wert { margin-top: 12px; font-size: 26px; font-weight: 300; letter-spacing: .02em; color: var(--text); font-variant-numeric: tabular-nums; }
.schritt-wert span { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.schritt .knopf { margin-top: 14px; }

/* Schritte, klebend */
html.weg-an .weg-raster { align-items: stretch; }
html.weg-an .weg-buehne { position: sticky; top: calc(var(--kopf) + 14px); height: calc(100vh - var(--kopf) - 28px); justify-content: center; }
html.weg-an .szene { width: min(100%, calc((100vh - var(--kopf) - 150px) * 360 / 520)); margin-inline: auto; }
html.weg-an .schritte { gap: 0; padding: calc(50vh - var(--kopf)) 0 50vh; }
html.weg-an .schritt { display: flex; flex-direction: column; justify-content: center; min-height: 84vh; padding: 0 0 0 22px; border: 0; border-left: 1px solid var(--border); background: transparent; opacity: .35; transition: opacity .4s, border-color .4s; }
html.weg-an .schritt.ist-aktiv { opacity: 1; border-left-color: var(--accent); }

/* =====================================================================================
   3 · Weinkarte
   ===================================================================================== */
.weinliste { margin-top: 32px; border-top: 1px solid var(--border); }
/* Zeile wie auf einer Karte: Jahrgang, Name, Punktlinie bis zum Preis, darunter die Beschreibung */
.wein-zeile { display: grid; grid-template-columns: 96px auto minmax(28px, 1fr) auto; grid-template-areas: "jahr name punkte preis" "jahr text text preis"; align-items: baseline; gap: 2px 14px; padding: 18px 0; border-bottom: 1px solid var(--border); }
.wein-jahrgang { grid-area: jahr; align-self: start; font-size: 34px; font-weight: 200; line-height: 1; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.wein-name { grid-area: name; font-size: 18px; white-space: nowrap; }
.wein-name .kapitaelchen { margin-left: 8px; font-size: 11px; }
.wein-beschreibung { grid-area: text; font-size: 15px; color: var(--muted); }
.punkte { grid-area: punkte; align-self: baseline; height: 2px; background-image: radial-gradient(circle, var(--linie) 1px, transparent 1.3px); background-size: 6px 2px; background-repeat: repeat-x; transform-origin: left; }
.wein-preis { grid-area: preis; text-align: right; }
.wein-preis b { font-size: 18px; font-weight: 600; }
.wein-preis span { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.weinkarte-fuss { margin-top: 18px; text-align: center; }

/* =====================================================================================
   4 · Ausg’steckt: Kalenderstreifen (main.js markiert heute)
   ===================================================================================== */
.kalender { margin-top: 32px; }
.monate { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; }
.monat { display: grid; gap: 6px; text-align: center; }
.monat-name { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.monat-balken { position: relative; display: block; height: 34px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.monat .offen { position: absolute; top: 0; bottom: 0; left: calc(var(--von) * 100%); width: calc((var(--bis) - var(--von)) * 100%); background: var(--accent); transform-origin: left; }
.monat.heute .monat-name { color: var(--accent); }
.monat.heute .monat-balken::after { content: ""; position: absolute; top: -1px; bottom: -1px; left: calc(var(--heute, .5) * 100%); width: 2px; background: var(--text); }
.zeiten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin-top: 20px; }
.zeiten li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 15px; }
.zeiten b { font-weight: 600; }
.zeiten li.jetzt { color: var(--accent); }
.heute-zeile { margin-top: 16px; font-weight: 600; text-align: center; }
.heute-zeile:empty { display: none; }
.kalender > .leise { margin-top: 16px; text-align: center; }

/* =====================================================================================
   5 · Jause
   ===================================================================================== */
.jause-karte { margin-top: 32px; border-top: 1px solid var(--border); }
.jause-karte li { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.jause-karte h3 { font-size: 17px; }
.jause-karte p { margin-top: 2px; font-size: 14.5px; color: var(--muted); }
.preis { white-space: nowrap; font-weight: 600; margin: 0; }
.preis span { font-weight: 400; font-size: 12.5px; color: var(--muted); }
.jause-bild { margin-top: 28px; }

/* Platzhalter für Fotos: wird im Kundenprojekt durch ein <img> ersetzt (img/BILDLISTE.md) */
.bild-platzhalter { position: relative; display: flex; align-items: flex-end; margin: 0; overflow: hidden; aspect-ratio: var(--format, 3 / 2); border: 1px solid var(--border); border-radius: var(--radius);
  background: radial-gradient(110% 80% at 85% 12%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 60%), repeating-linear-gradient(135deg, rgba(110, 26, 43, .07) 0 1px, transparent 1px 13px), var(--surface-2); }
.bild-platzhalter figcaption { margin: 16px; padding: 8px 12px; border-radius: var(--radius-klein); max-width: calc(100% - 32px); background: rgba(255, 255, 255, .94); color: var(--text); font-size: 14px; font-weight: 600; line-height: 1.35; }

/* =====================================================================================
   6 · Lage und Anfahrt
   ===================================================================================== */
.karte { margin-top: 32px; }
.karte svg { width: 100%; height: auto; border: 1px solid var(--border); background: #e8ecd6; }
.karte figcaption { margin-top: 8px; text-align: center; }
.karte-ort circle { fill: var(--text); }
.karte-ort text, .karte-name, .karte-nord text { font-family: var(--schrift); font-size: 13px; font-weight: 600; text-anchor: middle; fill: var(--text); }
.karte-ort-leise circle { fill: var(--muted); }
.karte-ort-leise text { fill: var(--muted); font-weight: 500; }
.karte-name-leise { fill: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .12em; }
.karte-nord text { font-size: 11px; fill: var(--muted); }
.route { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.anfahrt { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 28px; }
.anfahrt p + p { margin-top: 8px; font-size: 16px; }

/* =====================================================================================
   7 · Verkostung: Demo-Formular
   ===================================================================================== */
.formular { margin: 32px auto 0; max-width: 560px; display: grid; gap: 18px; }
.feld { position: relative; display: grid; gap: 6px; }
.feld label { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.feld input, .feld select, .feld textarea { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-klein) var(--radius-klein) 0 0; background: #fff; font: inherit; color: var(--text); }
.feld textarea { resize: vertical; }
.feld::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--linie); transform-origin: left; }
.feld-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.formular .knopf { justify-self: center; }
.formular-meldung { padding: 10px 14px; border: 1px solid var(--accent); color: var(--accent); font-weight: 600; font-size: 15px; text-align: center; }
.formular-meldung:empty { display: none; }
.formular .klein { text-align: center; }

/* =====================================================================================
   8 · Fragen und Kontakt
   ===================================================================================== */
.fragen-liste { margin-top: 28px; border-top: 1px solid var(--border); }
.fragen-liste details { border-bottom: 1px solid var(--border); }
.fragen-liste summary { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 16px 0; cursor: pointer; list-style: none; font-weight: 600; font-size: 17px; }
.fragen-liste summary::-webkit-details-marker { display: none; }
.fragen-liste summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-top: 9px; border: 1px solid var(--linie); transform: rotate(45deg); transition: background .3s, border-color .3s; }
.fragen-liste details[open] summary::after { background: var(--accent); border-color: var(--accent); }
.fragen-liste details p { padding: 0 0 18px; max-width: 40rem; color: var(--muted); }
.kontakt-raster { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 28px; align-items: center; margin-top: 56px; }
.kontakt-untertitel { font-size: 24px; }
.kontakt-text address { margin-top: 14px; font-style: normal; line-height: 1.7; }
.kontakt-text .leise { margin-top: 14px; font-size: 15.5px; }
.siegel-gross { width: 150px; height: 150px; }
.siegel-gross text { font-family: var(--schrift); }
.kontakt-bild { margin-top: 32px; }

/* ---------- Fuß ---------- */
.fuss { padding: 8px 20px 0; text-align: center; color: var(--muted); font-size: 14px; }
.fuss a { color: inherit; }
.fuss-name { font-size: 13px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--text); margin-bottom: 6px; }
.fuss-links { margin-top: 6px; }
.fuss-links a { margin: 0 8px; }
.fuss-demo { margin-top: 18px; font-size: 13px; }
.fuss-zeile { width: 100%; max-width: none; margin: 0; padding: 22px 20px 26px; text-align: center; font-size: 13px; color: var(--muted); }

/* =====================================================================================
   Auftritt beim Scrollen (mittel, dynamisch) und die kleine Bewegung je Abschnitt
   main.js setzt .ist-da, sobald ein Block im Bild ist. Eine Idee je Abschnitt, höchstens 600 ms, läuft einmal.
   ===================================================================================== */
html.js[data-bewegung="mittel"] [data-auftritt], html.js[data-bewegung="dynamisch"] [data-auftritt] { opacity: 0; transform: translateY(18px); transition: opacity .6s, transform .6s cubic-bezier(.2, .8, .2, 1); }
html.js [data-auftritt].ist-da { opacity: 1 !important; transform: none !important; }

/* Zierlinie zeichnet sich vom Rhombus nach außen */
html.js:not([data-bewegung="starr"]) [data-auftritt]:not(.ist-da) .zier::before, html.js:not([data-bewegung="starr"]) [data-auftritt]:not(.ist-da) .zier::after { transform: scaleX(0); }
.zier::before { transform-origin: right; transition: transform .6s ease .15s; }
.zier::after { transform-origin: left; transition: transform .6s ease .15s; }
/* Weinkarte: die Punktlinie zum Preis zieht sich, Zeile für Zeile */
html.js:not([data-bewegung="starr"]) [data-auftritt]:not(.ist-da) .punkte { transform: scaleX(0); }
.punkte { transition: transform .5s ease; }
.wein-zeile:nth-child(2) .punkte { transition-delay: .07s; } .wein-zeile:nth-child(3) .punkte { transition-delay: .14s; } .wein-zeile:nth-child(4) .punkte { transition-delay: .21s; }
.wein-zeile:nth-child(5) .punkte { transition-delay: .28s; } .wein-zeile:nth-child(6) .punkte { transition-delay: .35s; }
/* Ausg’steckt: die offenen Wochen füllen sich, Monat für Monat */
html.js:not([data-bewegung="starr"]) [data-auftritt]:not(.ist-da) .monat .offen { transform: scaleX(0); }
.monat .offen { transition: transform .5s ease; }
.monat:nth-child(4) .offen { transition-delay: .08s; } .monat:nth-child(5) .offen { transition-delay: .16s; } .monat:nth-child(6) .offen { transition-delay: .24s; }
.monat:nth-child(8) .offen { transition-delay: .32s; } .monat:nth-child(10) .offen { transition-delay: .4s; } .monat:nth-child(11) .offen { transition-delay: .48s; }
/* Jause: die Teller kommen nacheinander */
html.js:not([data-bewegung="starr"]) [data-auftritt]:not(.ist-da) .jause-karte li, html.js:not([data-bewegung="starr"]) .jause-karte[data-auftritt]:not(.ist-da) li { opacity: 0; transform: scale(.96); }
.jause-karte li { transition: opacity .5s, transform .5s cubic-bezier(.2, .8, .2, 1); }
.jause-karte li:nth-child(2) { transition-delay: .06s; } .jause-karte li:nth-child(3) { transition-delay: .12s; } .jause-karte li:nth-child(4) { transition-delay: .18s; }
.jause-karte li:nth-child(5) { transition-delay: .24s; } .jause-karte li:nth-child(6) { transition-delay: .3s; } .jause-karte li:nth-child(7) { transition-delay: .36s; }
/* Lage: die Strecke zeichnet sich, dann erscheint das Ziel */
html.js:not([data-bewegung="starr"]) [data-auftritt]:not(.ist-da) .route { stroke-dashoffset: 1; }
html.js:not([data-bewegung="starr"]) [data-auftritt]:not(.ist-da) .karte-ziel { opacity: 0; }
.route { transition: stroke-dashoffset .6s ease .2s; }
.karte-ziel { transition: opacity .4s ease .7s; }
/* Verkostung: die Linien unter den Feldern ziehen sich */
html.js:not([data-bewegung="starr"]) [data-auftritt]:not(.ist-da) .feld::after { transform: scaleX(0); }
.feld::after { transition: transform .5s ease .1s; }
.feld-zeile .feld:nth-child(2)::after { transition-delay: .2s; }
.formular > .feld:nth-child(2)::after { transition-delay: .2s; }
.formular > .feld:nth-child(4)::after { transition-delay: .3s; }
/* Kontakt: das Siegel drückt sich auf */
html.js:not([data-bewegung="starr"]) .kontakt-siegel[data-auftritt]:not(.ist-da) .siegel-gross { opacity: 0; transform: scale(1.3) rotate(-10deg); }
.siegel-gross { transition: opacity .45s, transform .5s cubic-bezier(.2, .8, .2, 1); }

@media (prefers-reduced-motion: reduce) {
  /* main.js setzt .ist-da dann sofort; hier nur noch jede Übergangszeit auf null */
  html.js [data-auftritt] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .zier::before, .zier::after, .punkte, .monat .offen, .jause-karte li, .route, .karte-ziel, .feld::after, .siegel-gross, .bild, .glas-svg .wein, .schritt, .sorte.ist-aktiv, .knopf { transition: none !important; animation: none !important; }
  .kirchenfenster.an path { animation: none !important; }
}

/* =====================================================================================
   Schmal
   ===================================================================================== */
@media (max-width: 1220px) {
  /* Zwischen 1000 und 1220 px bleibt die Leiste links, aber nur mit den Zahlen */
  .jahrgaenge { left: calc((100vw - var(--breite)) / 2 - 100px); width: 76px; }
  .jahrgaenge a { grid-template-columns: auto; }
  .jahrgaenge span { display: none; }
}
@media (max-width: 1000px) {
  html { scroll-padding-top: calc(var(--kopf) + var(--leiste) + 12px); }
  .jahrgaenge { position: sticky; top: var(--kopf); left: auto; transform: none; width: 100%; height: var(--leiste); background: var(--bg); border-bottom: 1px solid var(--border); }
  .jahrgaenge ol { display: flex; justify-content: space-between; gap: 0; width: min(100% - 32px, var(--breite)); height: 100%; margin-inline: auto; }
  .jahrgaenge li { flex: 1; display: flex; }
  .jahrgaenge a { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 0; height: 100%; padding: 0 2px; border-left: 0; border-bottom: 2px solid transparent; }
  .jahrgaenge b { font-size: 15px; }
  .jahrgaenge a:hover { border-color: var(--linie); }
  .jahrgaenge a.ist-aktiv { border-bottom-color: var(--accent); }
  html.weg-an .weg-buehne { top: calc(var(--kopf) + var(--leiste) + 12px); height: calc(100vh - var(--kopf) - var(--leiste) - 24px); }
  html.weg-an .szene { width: min(100%, calc((100vh - var(--kopf) - var(--leiste) - 150px) * 360 / 520)); }
  html.weg-an .schritte { padding-top: calc(50vh - var(--kopf) - var(--leiste)); }
}
@media (max-width: 720px) {
  .etikett > section { padding: 48px 0; }
  .weg-raster { display: block; }
  .weg-buehne { margin-bottom: 20px; }
  .kontakt-raster { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .anfahrt, .feld-zeile, .zeiten { grid-template-columns: minmax(0, 1fr); }
  .wein-zeile { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "jahr jahr" "name preis" "text text"; gap: 4px 12px; }
  .punkte { display: none; }
  .wein-jahrgang { font-size: 26px; margin-bottom: 2px; }
  .wein-name { white-space: normal; }
  /* Klebend am Handy: Tafel und Zeichnung nebeneinander als schmale Zeile oben, die Schritte laufen darunter durch */
  html.weg-an .weg-buehne { position: sticky; top: calc(var(--kopf) + var(--leiste)); z-index: 2; height: auto; flex-direction: row; align-items: stretch; gap: 10px; margin: 0; padding: 10px 0 12px; background: var(--surface); justify-content: flex-start; }
  /* Tafel ohne Thermometersäule, nur die Zahl; sonst zerbricht der Text neben der Zeichnung */
  html.weg-an .tafel { flex: 1; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 6px; padding: 10px 12px; }
  html.weg-an .thermo svg { display: none; }
  html.weg-an .thermo-wert { font-size: 11px; }
  html.weg-an .thermo-wert b { font-size: 18px; }
  html.weg-an .tafel-wert { font-size: 14px; }
  html.weg-an .szene { flex: none; height: 28vh; width: calc(28vh * 360 / 520); margin: 0; }
  html.weg-an .schritte { padding: 20vh 0 30vh; }
  html.weg-an .schritt { min-height: 70vh; }
}
@media (max-width: 480px) {
  body { font-size: 16px; }
  .kopf-tel { display: none; }
  .logo { letter-spacing: .18em; }
  .etikett { width: calc(100% - 24px); margin-top: 16px; }
  .monate { gap: 2px; }
  .monat-name { font-size: 9.5px; letter-spacing: 0; }
  .monat-balken { height: 28px; }
  .sorte { padding: 18px 16px; }
  .sorte-titel { font-size: 20px; }
  .jahrgaenge b { font-size: 13px; }
  html.weg-an .thermo svg { height: 70px; }
  html.weg-an .tafel-wert { font-size: 14px; }
}
@media (max-height: 560px) {
  /* zu niedrig für den klebenden Weg: stock-ins-glas.js schaltet auf die ruhige Fassung */
  html.weg-an .weg-buehne { position: static; }
}