/* Weingut Graßmück · Richtung 2: Milchglas und Ocker (Kundenwunsch 24.09.2026: „deutlich mehr Interaktion, Navigation
   weg von der alten Seite, Richtung Liquid Glass/Milchglas, weniger Weiß, ein passender Ockerton“).
   Liegt nach site.css, seiten.css und shop.css. Glas = warm getöntes Milchglas mit Lichtreflex, der dem Zeiger folgt
   (--lx/--ly aus site.js). Web-Annäherung an „Liquid Glass“ über backdrop-filter, kein offizielles Apple-Material.
   Ohne backdrop-filter oder bei „Transparenz reduzieren“: volle Flächen (Abschnitt Rückfall am Ende). */

/* ================================================================ Glas-Grundbaustein */
.glas, .glas-dunkel { position: relative; isolation: isolate; border-radius: var(--r-glas); }
.glas { background: var(--glas-hell); border: 1px solid var(--glas-rand-hell); box-shadow: var(--glas-schatten);
  -webkit-backdrop-filter: var(--glas-filter); backdrop-filter: var(--glas-filter); }
.glas-dunkel { background: var(--glas-dunkel); border: 1px solid var(--glas-rand-dunkel); color: var(--auf-dunkel);
  box-shadow: 0 18px 50px -20px rgb(0 0 0 / .6), inset 0 1px 0 rgb(255 255 255 / .16);
  -webkit-backdrop-filter: var(--glas-filter); backdrop-filter: var(--glas-filter); }
/* Lichtreflex: oben eine Kante, dazu ein weicher Fleck, der dem Zeiger folgt */
.glas::after, .glas-dunkel::after, .kopf__in::after, .mega__tafel::after, .pk::after, .vk__link::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  background: radial-gradient(260px circle at var(--lx, 22%) var(--ly, -30%), rgb(255 255 255 / .14), transparent 70%),
              linear-gradient(180deg, rgb(255 255 255 / .07), transparent 38%);
  opacity: .9; transition: opacity var(--d3) var(--aus); }
/* kein mix-blend-mode am Reflex: Chromium bildet sonst eine Mischgruppe, und backdrop-filter der Fläche greift nicht mehr */

/* ================================================================ Grund: weniger Weiß */
.sektion--weiss { background: var(--sand); --ring: var(--sand); }
.rahmen { background: rgb(255 253 248 / .72); border-color: rgb(255 255 255 / .75); border-radius: var(--r-glas);
  box-shadow: 0 16px 40px -26px rgb(46 30 8 / .45), inset 0 1px 0 rgb(255 255 255 / .8); }
.medium { border-radius: var(--r-glas); }

/* ================================================================ Knöpfe: Pillen, Ocker statt Gold */
.knopf { border-radius: var(--r-rund); }
.knopf--gold { --k-grund: var(--ocker); --k-text: var(--tinte); --k-rand: var(--ocker); box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 10px 24px -14px rgb(122 78 20 / .8); }
.knopf--gold:hover { --k-grund: var(--ocker-hell); --k-rand: var(--ocker-hell); }
.knopf--rand-hell { --k-grund: rgb(255 255 255 / .12); --k-rand: rgb(255 255 255 / .55);
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); box-shadow: inset 0 1px 0 rgb(255 255 255 / .25); }
.knopf--rand-hell:hover { --k-grund: rgb(255 255 255 / .92); --k-text: var(--tinte); --k-rand: rgb(255 255 255 / .92); }
.chip:hover { border-color: var(--ocker); }
.linkpfeil { color: var(--ocker-tief); }
.dunkel .linkpfeil, .mega__feature .linkpfeil { color: var(--ocker-hell); }
.kicker { color: var(--ocker-tief); }
.dunkel .kicker, .hero .kicker, .seitenkopf .kicker, .cta-bande .kicker { color: var(--ocker-hell); }

/* ================================================================ Kopf: schwebende Glasleiste
   Die Kopfzone behält ihre Höhe (--kopf-h, Grundlage für Sprungziele und klebende Elemente), die Leiste schwebt darin
   mit Abstand und fluchtet außen auf der Content-Kante. Ton: dunkles Glas über Fotos und dunklen Flächen, helles Glas
   über hellen Flächen (site.js prüft, was unter der Leiste liegt). */
.kopf, .ist-start .kopf, .ist-start .kopf.is-fest, .ist-start .kopf.is-mega { position: fixed; top: 0; left: 0; right: 0;
  background: none; box-shadow: none; pointer-events: none; }
.kopf::after, .ist-start .kopf::after { display: none; }
.kopf__in { pointer-events: auto; isolation: isolate; top: var(--kopf-abstand); height: calc(var(--kopf-h) - 2 * var(--kopf-abstand)); padding-inline: 16px 6px;
  border-radius: var(--r-rund); color: var(--auf-dunkel); border: 1px solid var(--glas-rand-dunkel);
  box-shadow: 0 14px 40px -18px rgb(0 0 0 / .55), inset 0 1px 0 rgb(255 255 255 / .18);
  transition: border-color var(--d3) var(--aus), color var(--d3) var(--aus), box-shadow var(--d3) var(--aus); }
/* Glasfläche als Pseudo-Element: hätte die Leiste selbst backdrop-filter, könnte die Mega-Tafel darunter die Seite nicht mehr weichzeichnen */
.kopf__in::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: rgb(26 23 18 / .64);
  -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%); transition: background-color var(--d3) var(--aus); }
.kopf.is-gescrollt .kopf__in { box-shadow: 0 18px 50px -18px rgb(0 0 0 / .6), inset 0 1px 0 rgb(255 255 255 / .18); }
.kopf__logo img { height: 34px; }
@media (min-width: 1024px) { .kopf__logo img { height: 40px; } }
.kopf__knopf { border-radius: var(--r-rund); color: inherit; }
.kopf__knopf:hover { background: rgb(0 0 0 / .18); color: var(--ocker-licht); }
.kopf__tel { color: inherit; border-radius: var(--r-rund); }
.fortschritt { left: 24px; right: 24px; width: auto; bottom: -1px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--ocker), var(--gold-hell)); }
.kopf .fortschritt { position: absolute; left: calc((100% - min(100% - 2 * var(--rand), var(--wrap))) / 2 + 28px); right: calc((100% - min(100% - 2 * var(--rand), var(--wrap))) / 2 + 28px); bottom: calc(var(--kopf-abstand) - 1px); }
/* heller Ton über hellen Flächen */
.kopf.is-hell .kopf__in { color: var(--tinte); border-color: var(--glas-rand-hell); box-shadow: 0 14px 40px -20px rgb(46 30 8 / .45), inset 0 1px 0 rgb(255 255 255 / .9); }
.kopf.is-hell .kopf__in::before { background: var(--glas-hell-stark); }
.kopf.is-hell .kopf__knopf:hover, .kopf.is-hell .kopf__tel:hover { background: rgb(197 139 47 / .16); color: var(--ocker-tief); }
.kopf.is-hell .korb__zahl { background: var(--tinte); color: var(--weiss); }
.nav__licht { display: none; }
.korb__zahl { background: var(--ocker); color: var(--tinte); }

@media (min-width: 1180px) {
  .nav__link { color: inherit; padding: 0 12px; }
  .nav__link::after { display: none; }
  .nav__link:hover, .nav__punkt.is-offen > .nav__link, .nav__link[aria-current], .nav__link.is-spy { color: var(--ocker-licht); }
  .kopf.is-hell .nav__link:hover, .kopf.is-hell .nav__punkt.is-offen > .nav__link, .kopf.is-hell .nav__link[aria-current], .kopf.is-hell .nav__link.is-spy { color: var(--ocker-tief); }
  .nav__pfeil { color: inherit; opacity: .75; border-radius: var(--r-rund); }
  .nav__pfeil:hover { color: var(--ocker-licht); opacity: 1; }
  .kopf.is-hell .nav__pfeil:hover { color: var(--ocker-tief); }
  /* flüssiger Lichtpunkt, der unter die Menüpunkte gleitet (site.js setzt --nx, --nw) */
  .nav__licht { display: block; position: absolute; left: 0; top: 50%; width: 100px; height: 40px; margin-top: -20px; border-radius: var(--r-rund); pointer-events: none; z-index: -1;
    /* vertiefte Glaslinse: dunkelt den Grund leicht ab, damit der Punkt darüber an Kontrast gewinnt, heller Rand als Lichtkante */
    background: rgb(0 0 0 / .2);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14), inset 0 1px 0 rgb(255 255 255 / .22);
    transform: translateX(var(--nx, 0)) scaleX(var(--nw, 1)); transform-origin: 0 50%; opacity: 0;
    transition: transform 520ms var(--aus), opacity var(--d2) var(--aus); }
  .nav__licht.is-an { opacity: 1; }
  /* Menü mittig: drei Spalten, die äußeren gleich breit (1fr), so steht die Mitte der Navigation auf der Mitte der Leiste */
  .kopf .kopf__in { display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); padding-inline: 16px; }
  .kopf .kopf__logo { justify-self: start; }
  .kopf .nav { margin-left: 0; }
  .kopf .kopf__aktionen { justify-self: end; margin-left: 0; margin-right: -10px; }   /* Polster symmetrisch (sonst steht die Mitte 5 px rechts), Knöpfe bleiben 6 px vor dem Rand */
  .kopf.is-hell .nav__licht { background: rgb(197 139 47 / .16); box-shadow: inset 0 0 0 1px rgb(122 78 20 / .16), inset 0 1px 0 rgb(255 255 255 / .8); }
}

/* ================================================================ Mega-Menü: Glastafel unter der Leiste */
.mega { top: calc(100% + 10px); left: -1px; right: -1px; }
.mega__tafel { position: relative; isolation: isolate; border-radius: var(--r-glas); background: var(--glas-hell-stark); border: 1px solid var(--glas-rand-hell);
  -webkit-backdrop-filter: blur(30px) saturate(170%); backdrop-filter: blur(30px) saturate(170%);
  box-shadow: 0 34px 80px -34px rgb(40 26 6 / .55), inset 0 1px 0 rgb(255 255 255 / .9); }
.mega__spalte { border-right-color: rgb(46 34 21 / .1); }
.mega__titel { color: var(--ocker-tief); }
.mega__link:hover, .mega__link:focus-visible, .mega__eintrag:hover, .mega__eintrag:focus-visible { background: rgb(197 139 47 / .14); color: var(--ocker-tief); }
.mega__feature { background-color: #5A3B14; background-image: linear-gradient(155deg, #2E2215, #45301A 55%, #5A3B14); }
.mega__feature::before { background: radial-gradient(closest-side, rgb(221 176 100 / .38), transparent); }
.mega__fuss { background: rgb(197 139 47 / .1); border-top-color: rgb(46 34 21 / .08); }
.mega__fuss .linkpfeil { color: var(--ocker-tief); }

/* ================================================================ Mobilmenü: Glas über der Seite, Leiste an derselben Stelle */
.menue { background: rgb(24 21 16 / .88); -webkit-backdrop-filter: blur(28px) saturate(150%); backdrop-filter: blur(28px) saturate(150%); }
.menue__kopf { border-bottom: 0; }
.menue__kopf .kopf__in { height: calc(var(--kopf-h) - 2 * var(--kopf-abstand)); }
.menue__gruppe, .menue__link { border-bottom-color: rgb(255 255 255 / .1); }
.menue__zeichen::before, .menue__zeichen::after { background: var(--ocker-hell); }
.menue__unter h3 { color: var(--ocker-hell); }
.menue__unter a:hover { color: var(--ocker-hell); }

/* ================================================================ Schnellkontakt: Glas */
.rail__knopf { background: transparent; }
@media (min-width: 1024px) {
  .rail { padding: 5px; background: var(--glas-dunkel); border: 1px solid var(--glas-rand-dunkel); -webkit-backdrop-filter: var(--glas-filter); backdrop-filter: var(--glas-filter);
    box-shadow: 0 18px 44px -18px rgb(0 0 0 / .55), inset 0 1px 0 rgb(255 255 255 / .16); }
  .rail__knopf:hover, .rail__knopf:focus-visible { background: var(--ocker); color: var(--tinte); }
  .rail__label { background: var(--glas-dunkel-stark); border: 1px solid var(--glas-rand-dunkel); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
  /* über hellen Flächen helles Glas, wie die Kopfleiste (site.js setzt is-hell) */
  .rail { transition: background-color var(--d3) var(--aus), border-color var(--d3) var(--aus), color var(--d3) var(--aus); }
  .rail.is-hell { background: var(--glas-hell-stark); border-color: var(--glas-rand-hell); box-shadow: 0 18px 44px -22px rgb(46 30 8 / .45), inset 0 1px 0 rgb(255 255 255 / .9); }
  .rail.is-hell .rail__knopf { color: var(--tinte); }
  .rail.is-hell .rail__knopf:hover, .rail.is-hell .rail__knopf:focus-visible { background: var(--ocker); color: var(--tinte); }
}
@media (max-width: 1023px) {
  .rail { background: rgb(24 21 16 / .97); border-top: 1px solid rgb(255 255 255 / .14); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); }
  .rail__knopf + .rail__knopf { border-left-color: rgb(255 255 255 / .1); }
  /* Mobil nahezu deckend: bei .8 bzw. .64/.86 lief Text lesbar unter Leiste und Logo durch und die Leiste wirkte über hellen
     Abschnitten grau (Aufnahmen 07.10.2026). Das Milchglas bleibt als Rest, der Ton dunkel/hell wie am Desktop. */
  .kopf__in::before { background: rgb(26 23 18 / .93); }
  .kopf.is-hell .kopf__in::before { background: rgb(255 251 243 / .97); }
}

/* ================================================================ Seitenköpfe: Platz für die schwebende Leiste */
.seitenkopf__in { padding-top: calc(var(--kopf-h) + clamp(28px, 7vh, 96px)); }
.seitenkopf--kurz .seitenkopf__in { padding-top: calc(var(--kopf-h) + clamp(20px, 4vh, 48px)); }
.shopkopf, .produkt { padding-top: calc(var(--kopf-h) + 24px); }
.seitenkopf--ohnebild { background: radial-gradient(80% 140% at 90% -10%, rgb(197 139 47 / .38), transparent 60%), linear-gradient(160deg, #2A241C, #1D1A15); }

/* ================================================================ Hero: Glas-Chip „Nächster Termin“, Tiefe beim Scrollen (site.js) */
.hero__buehne { will-change: transform; }
.hero__termin { display: none; }
@media (min-width: 1024px) {
  .hero__termin { position: absolute; right: calc((100% - min(100% - 2 * var(--rand), var(--wrap))) / 2); bottom: calc(clamp(28px, 5vh, 48px) + 72px);
    display: grid; grid-template-columns: auto 22px; align-items: center; gap: 2px 18px; max-width: 320px; padding: 16px 18px 16px 20px;
    border-radius: 20px; text-decoration: none; transition: transform var(--d3) var(--aus), background-color var(--d3) var(--aus); }
  .hero__termin:hover { transform: translateY(-3px); background: rgb(26 23 18 / .64); }
  .hero__termin-k { grid-column: 1; font-size: var(--t-mini); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ocker-hell); }
  .hero__termin b { grid-column: 1; font-family: var(--serif); font-size: 1.3rem; font-weight: 500; line-height: 1.15; color: var(--weiss); }
  .hero__termin-z { grid-column: 1; font-size: var(--t-klein); color: var(--auf-dunkel); }
  .hero__termin .i { grid-column: 2; grid-row: 1 / span 3; color: var(--ocker-hell); transition: transform var(--d2) var(--aus); }
  .hero__termin:hover .i { transform: translateX(4px); }
}
.pause-knopf { background: rgb(255 255 255 / .12); border-color: rgb(255 255 255 / .45); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* ================================================================ Sortiment auf Sand: Flaschen auf einer Glaskante
   Ruhig: dieselbe Farbfamilie wie der Seitengrund, nur ein Hauch heller oben; die Kante ist eine dünne, klare Glasleiste
   mit Lichtreflex, die zu den Seiten ausläuft, darunter ein weicher Widerschein statt eines harten Schattens. */
.sektion--sand { position: relative; isolation: isolate;
  background: radial-gradient(60% 55% at 50% 58%, rgb(255 255 255 / .5), transparent 70%), linear-gradient(180deg, #EEE8DE, var(--sand) 70%); }
.sektion--sand .regal::after { bottom: 89px; border-radius: var(--r-rund); opacity: 1;
  height: 8px; background: linear-gradient(180deg, rgb(255 255 255 / .95), rgb(255 255 255 / .5) 45%, rgb(228 219 205 / .7));
  box-shadow: inset 0 -1px 0 rgb(110 90 60 / .2), inset 0 1px 0 #fff, 0 16px 22px -14px rgb(110 90 60 / .34);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.sektion--sand .fach__flaschen img { filter: drop-shadow(0 14px 12px rgb(70 55 35 / .2)); }
@media (max-width: 1023px) { .sektion--sand .fach__text { border-top-color: rgb(110 90 60 / .22); } }

/* ================================================================ Weinfinder: Glastafel über dem Weinberg */
.weinfinder { position: relative; isolation: isolate; overflow: clip; color: var(--tinte); }
.weinfinder__grund { position: absolute; inset: 0; z-index: -3; }
.weinfinder__grund img { width: 100%; height: 100%; object-fit: cover; }
.weinfinder::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, rgb(36 28 18 / .35), rgb(36 28 18 / .55)); }
.weinfinder__tropfen { position: absolute; z-index: -1; width: 46vmax; height: 46vmax; border-radius: 50%; pointer-events: none; opacity: .75;
  background: radial-gradient(closest-side, rgb(240 222 186 / .6), rgb(214 190 150 / .2) 55%, transparent); animation: tropfen 22s ease-in-out infinite alternate; }
.weinfinder__tropfen--1 { left: -12vmax; top: -18vmax; }
.weinfinder__tropfen--2 { right: -16vmax; bottom: -22vmax; animation-duration: 28s; animation-direction: alternate-reverse; background: radial-gradient(closest-side, rgb(255 244 222 / .55), rgb(214 190 150 / .16) 60%, transparent); }
@keyframes tropfen { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(8vmax, 6vmax, 0) scale(1.18); } }
/* Weinfinder als Abfrage (site.js): eine Frage nach der anderen, Trefferzahl je Antwort, Antworten ohne Treffer gesperrt, daneben das ganze
   Sortiment als Flaschenwand. Ohne Skript stehen alle drei Fragen untereinander und das Formular führt in den gefilterten Shop. */
.wf { display: grid; gap: 22px clamp(28px, 4vw, 64px); padding: clamp(22px, 3.4vw, 52px); background: rgb(255 251 243 / .8);
  grid-template-columns: minmax(0, 1fr); grid-template-areas: "kopf" "pfad" "schritte" "nav" "seite"; }
@media (min-width: 1024px) { .wf { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); grid-template-rows: auto auto auto 1fr; grid-template-areas: "kopf seite" "pfad seite" "schritte seite" "nav seite"; } }
.wf__kopf { grid-area: kopf; } .wf__pfad { grid-area: pfad; } .wf__schritte { grid-area: schritte; min-width: 0; } .wf__nav { grid-area: nav; } .wf__seite { grid-area: seite; }
.wf h2 { font-size: clamp(2rem, 1.5rem + 2vw, 3.1rem); margin-top: 6px; }
.wf__hinweis { margin-top: 10px; color: var(--text-2); max-width: 40ch; }

/* Pfad: Farbe · Geschmack · Preis · Ergebnis, mit der gegebenen Antwort; besuchte Schritte sind anklickbar */
.wf__pfad { display: none; }
.js .wf__pfad { display: grid; grid-template-columns: repeat(4, minmax(max-content, 1fr)); gap: 8px; list-style: none; margin: 4px 0 0; padding: 0; }
.wf__pfad button { display: grid; gap: 2px; justify-items: start; width: 100%; min-height: 48px; padding: 10px 2px 0 0; border: 0; border-top: 3px solid rgb(46 34 21 / .12);
  background: none; font: inherit; text-align: left; color: var(--text-3); cursor: pointer; transition: border-color 260ms var(--aus), color 200ms var(--aus); }
.wf__pfad button:disabled { cursor: default; }
.wf__pfad button:not(:disabled):hover { color: var(--tinte); border-top-color: var(--ocker-hell); }
.wf__pfad button:focus-visible { outline: 3px solid var(--ocker); outline-offset: 3px; }
.wf__pfad-titel { font-size: var(--t-mini); font-weight: 700; letter-spacing: .03em; }
.wf__pfad-wert { width: 0; min-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-klein); font-weight: 600; color: var(--text-3); }
.wf__pfad .is-erledigt { border-top-color: var(--ocker); }
.wf__pfad .is-erledigt .wf__pfad-wert { color: var(--tinte); }
.wf__pfad [aria-current="step"] { border-top-color: var(--tinte); color: var(--tinte); }
.wf__pfad [aria-current="step"] .wf__pfad-wert { color: var(--tinte); }

/* Fragen */
.wf__gruppe { border: 0; margin: 0; padding: 0; min-width: 0; }
.wf__gruppe + .wf__gruppe { margin-top: 28px; }
.wf__frage { display: block; float: none; width: 100%; padding: 0; margin: 0 0 16px; font-family: var(--serif); font-weight: 500; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.15; color: var(--tinte); }
.wf__frage:focus { outline: 0; }
.wf__nr { display: block; margin-bottom: 4px; font-family: var(--sans); font-size: var(--t-klein); font-weight: 600; color: var(--text-3); }
.wf__wahlen { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 176px), 1fr)); gap: 10px; }
.wf__wahl { position: relative; display: block; }
.wf__wahl input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.wf__wahl input:disabled { cursor: not-allowed; }
/* Kachel: Zeichen links, darunter gestapelt Antwort und Trefferzahl */
.wf__kachel { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; row-gap: 1px; min-height: 64px; padding: 10px 14px 10px 12px; border-radius: 16px;
  background: rgb(255 255 255 / .58); border: 1px solid rgb(46 34 21 / .12); box-shadow: inset 0 1px 0 rgb(255 255 255 / .85), 0 10px 22px -20px rgb(46 30 8 / .5);
  transition: transform 220ms var(--aus), background-color 200ms var(--aus), border-color 200ms var(--aus), box-shadow 220ms var(--aus), opacity 200ms var(--aus); }
.wf__text { font-size: var(--t-klein); font-weight: 600; line-height: 1.25; color: var(--tinte); hyphens: auto; overflow-wrap: break-word; }
.wf__treffer { grid-column: 2; font-size: var(--t-mini); color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wf__kachel .wf__zeichen { grid-row: 1 / span 2; }
/* „egal“ bzw. „offen für alles“ ist keine weitere Antwort, sondern das Auslassen: eigene schmale Zeile unter den Antworten */
.wf__wahl:has(> input[value=""]) { grid-column: 1 / -1; }
.wf__wahl > input[value=""] + .wf__kachel { grid-template-columns: auto minmax(0, 1fr) auto; min-height: 48px; padding-block: 6px; background: rgb(255 255 255 / .22); border-style: dashed; border-color: rgb(46 34 21 / .22); box-shadow: none; }
.wf__wahl > input[value=""] + .wf__kachel .wf__zeichen { grid-row: auto; width: 22px; height: 22px; }
.wf__wahl > input[value=""] + .wf__kachel .wf__treffer { grid-column: 3; }
.wf__wahl > input[value=""]:checked + .wf__kachel { background: #fff; border-style: solid; }
.wf__treffer b { font-weight: 700; color: var(--tinte); }
@media (hover: hover) { .wf__wahl:hover input:not(:disabled) + .wf__kachel { transform: translateY(-2px); background: rgb(255 255 255 / .85); border-color: rgb(197 139 47 / .5); } }
.wf__wahl input:active:not(:disabled) + .wf__kachel { transform: scale(.985); }
.wf__wahl input:checked + .wf__kachel { background: #fff; border-color: var(--ocker); box-shadow: inset 0 0 0 1px var(--ocker), 0 16px 28px -20px rgb(122 78 20 / .6); }
.wf__wahl input:checked + .wf__kachel .wf__treffer, .wf__wahl input:checked + .wf__kachel .wf__treffer b { color: var(--ocker-tief); }
.wf__wahl input:focus-visible + .wf__kachel { outline: 3px solid var(--ocker); outline-offset: 2px; }
.wf__wahl input:disabled + .wf__kachel { opacity: .45; box-shadow: none; background: rgb(255 255 255 / .3); }

/* Zeichen: Weinfarbe als Glastropfen, Geschmack und Preis als Stufen */
.wf__zeichen { width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(46 34 21 / .14), inset 0 3px 4px rgb(255 255 255 / .55), 0 3px 6px -3px rgb(46 30 8 / .4); }
.wf__zeichen--weisswein { background: radial-gradient(circle at 34% 28%, #FFFBEA, #EEDF9F 55%, #D6BE68); }
.wf__zeichen--rose { background: radial-gradient(circle at 34% 28%, #FFEFEF, #EFAEB4 55%, #D5808B); }
.wf__zeichen--rotwein { background: radial-gradient(circle at 34% 28%, #B04A5C, #6B1E2A 58%, #45101A); }
.wf__zeichen--schaumwein { background: radial-gradient(circle at 30% 60%, #fff 0 1.6px, transparent 2.2px), radial-gradient(circle at 62% 42%, #fff 0 1.2px, transparent 1.8px), radial-gradient(circle at 48% 74%, #fff 0 1px, transparent 1.6px), radial-gradient(circle at 34% 28%, #FFFBEA, #E9D994 55%, #C9AF5A); }
.wf__zeichen--edelsuess { background: radial-gradient(circle at 34% 28%, #FFEAB8, #DFA43E 55%, #B27418); }
.wf__zeichen--egal { background: none; box-shadow: none; border: 1.5px dashed rgb(46 34 21 / .35); }
[data-wf-schritt="0"] .wf__zeichen--egal { border: 0; box-shadow: inset 0 0 0 1px rgb(46 34 21 / .14), inset 0 3px 4px rgb(255 255 255 / .45);
  background: conic-gradient(from 210deg, #EEDF9F, #EFAEB4, #6B1E2A, #DFA43E, #EEDF9F); }
.wf__stufen { display: flex; align-items: flex-end; gap: 3px; height: 24px; border-radius: 0; box-shadow: none; }
.wf__stufen i { flex: 1; border-radius: 2px; background: rgb(46 34 21 / .14); }
.wf__stufen i:nth-child(1) { height: 40%; } .wf__stufen i:nth-child(2) { height: 60%; } .wf__stufen i:nth-child(3) { height: 80%; } .wf__stufen i:nth-child(4) { height: 100%; }
.wf__stufen i.an { background: var(--ocker); }

/* Ergebnis */
.wf__ende { display: grid; gap: 16px; align-content: start; min-width: 0; margin-top: 28px; }
html:not(.js) .wf__ende .wf__frage, html:not(.js) .wf__neu { display: none; }
.wf__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .wf__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wf__karte { position: relative; display: grid; justify-items: center; align-content: end; gap: 6px; height: 100%; padding: 16px 10px 14px; border-radius: 16px; text-decoration: none; color: var(--tinte);
  background: linear-gradient(170deg, rgb(255 255 255 / .9), rgb(255 255 255 / .6)); border: 1px solid rgb(255 255 255 / .85); box-shadow: 0 14px 30px -22px rgb(46 30 8 / .6);
  transition: transform var(--d3) var(--aus), box-shadow var(--d3) var(--aus); }
.wf__karte:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -22px rgb(46 30 8 / .7); }
.wf__karte img { height: 116px; width: auto; max-width: 70%; object-fit: contain; filter: drop-shadow(0 12px 10px rgb(46 30 8 / .25)); }
.wf__name { font-size: var(--t-mini); line-height: 1.3; text-align: center; font-weight: 600; }
.wf__preis { font-size: var(--t-klein); color: var(--ocker-tief); font-weight: 700; font-variant-numeric: tabular-nums; }
.wf__grundpreis { margin-top: -4px; font-size: var(--t-mini); color: var(--text-3); font-variant-numeric: tabular-nums; }
.wf__preishinweis { margin: 10px 0 0; font-size: var(--t-mini); color: var(--text-3); }
.wf__preishinweis a { color: inherit; }
.wf__karte.is-neu { animation: wf-rein 520ms var(--aus) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes wf-rein { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.wf__leer { grid-column: 1 / -1; padding: 22px; border-radius: 16px; background: rgb(255 255 255 / .6); color: var(--text-2); }
.wf__schluss { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.wf__neu, .wf__zurueck { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; border: 0; background: none; font: inherit; font-size: var(--t-klein); font-weight: 600;
  color: var(--text-2); cursor: pointer; text-decoration: underline; text-decoration-color: rgb(46 34 21 / .3); text-underline-offset: 5px; transition: color var(--d2) var(--aus), text-decoration-color var(--d2) var(--aus); }
.wf__neu:hover, .wf__zurueck:hover { color: var(--tinte); text-decoration-color: var(--ocker); }
.wf__zurueck { text-decoration: none; }
.wf__zurueck .i { width: 18px; height: 18px; transition: transform var(--d2) var(--aus); }
.wf__zurueck:hover .i { transform: translateX(-3px); }

/* Steuerung unter der Frage */
.wf__nav { display: flex; align-items: center; justify-content: flex-end; gap: 16px; align-self: start; }
.wf__zurueck { display: none; }
.js .wf__zurueck { display: inline-flex; margin-right: auto; }
.wf__weiter .i { width: 18px; height: 18px; }

/* Mit Skript: Schritte liegen übereinander (Höhe = höchster Schritt, nichts springt), der aktive gleitet herein */
.js .wf__schritte { display: grid; grid-template-columns: minmax(0, 1fr); }
.js .wf__schritte > * { grid-area: 1 / 1; align-self: start; margin-top: 0; visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity 160ms var(--ein), transform 200ms var(--ein), visibility 0s linear 200ms; }
.js .wf__schritte > [data-lage="links"] { transform: translate3d(-28px, 0, 0); }
.js .wf__schritte > [data-lage="rechts"] { transform: translate3d(28px, 0, 0); }
.js .wf__schritte > .is-aktiv { visibility: visible; opacity: 1; pointer-events: auto; transform: none;
  transition: opacity 320ms var(--aus) 90ms, transform 420ms var(--aus) 90ms, visibility 0s linear 0s; }

/* Flaschenwand: das ganze Sortiment auf Glasböden, was nicht passt, tritt zurück */
.wf__seite { display: grid; gap: 18px; align-content: center; min-width: 0; }
@media (min-width: 1024px) { .wf__seite { padding-left: clamp(24px, 3vw, 48px); border-left: 1px solid rgb(46 34 21 / .08); } }
.wf__zahl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; }
.wf__zahl b { font-family: var(--serif); font-weight: 500; font-size: clamp(3.4rem, 2.4rem + 4vw, 5.4rem); line-height: 1; font-variant-numeric: lining-nums tabular-nums; color: var(--ocker-tief); }
.wf__zahl span { font-size: var(--t-lead); color: var(--text-2); }
.wf__wand { display: grid; gap: 16px; }
.wf__wand:empty { display: none; }
.wf__boden { position: relative; display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); align-items: end; gap: 3px; height: 74px; padding: 0 4px 6px; }
.wf__boden::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; border-radius: var(--r-rund);
  background: linear-gradient(180deg, rgb(255 255 255 / .95), rgb(255 255 255 / .45) 50%, rgb(228 219 205 / .7));
  box-shadow: inset 0 -1px 0 rgb(110 90 60 / .2), 0 10px 16px -10px rgb(110 90 60 / .35); }
.wf__f { display: flex; justify-content: center; align-items: flex-end; height: 100%; min-width: 0;
  transition: opacity 420ms var(--aus), transform 460ms var(--aus), filter 420ms var(--aus); transition-delay: calc(var(--i, 0) * 6ms); }
.wf__f img { height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: 50% 100%; }
.wf__f.is-weg { opacity: .16; transform: translate3d(0, 5px, 0) scale(.9); filter: grayscale(1); }
.wf.ist-am-ende .wf__f:not(.is-weg) { transform: translate3d(0, -4px, 0); }
@media (max-width: 1023px) { .wf__boden { height: 58px; gap: 2px; } .wf__zahl b { font-size: 3rem; } }
@media (max-width: 639px) {
  .wf__wahlen { grid-template-columns: repeat(auto-fill, minmax(min(100%, 118px), 1fr)); gap: 8px; }
  .wf__kachel { column-gap: 10px; padding: 10px; }
  .wf__kachel .wf__zeichen:not(.wf__stufen) { width: 24px; height: 24px; }
  .wf__stufen { height: 20px; }
  .wf__liste { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 44%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
  .wf__liste::-webkit-scrollbar { display: none; }
  .wf__liste > li { scroll-snap-align: start; }
  .wf__karte img { height: 100px; }
  .wf__schluss .knopf { width: 100%; white-space: normal; text-align: center; }
}
@media (max-width: 380px) { .wf { padding: 20px 16px; } .wf__kachel { column-gap: 8px; padding: 10px 8px; } .js .wf__pfad { gap: 6px; } .wf__pfad-titel { font-size: 12px; letter-spacing: 0; } .wf__pfad-wert { font-size: 13px; }
  .wf__nav { gap: 8px; } .wf__zurueck .i { display: none; } .wf__weiter { padding-inline: 16px; } }
@media (prefers-reduced-motion: reduce) { .js .wf__schritte > *, .wf__f { transition: none; } }

/* ================================================================ Karten: Glanz und Neigung (site.js, nur Zeigergeräte) */
.pk, .vk__link { border-radius: var(--r-glas); border-color: rgb(255 255 255 / .8); background: linear-gradient(170deg, rgb(255 255 255 / .92), rgb(255 253 248 / .74));
  box-shadow: 0 16px 36px -26px rgb(46 30 8 / .5); transition: box-shadow var(--d3) var(--aus), transform 320ms var(--aus); transform-style: preserve-3d; }
.pk::after, .vk__link::after { opacity: 0; }
.pk:hover::after, .vk__link:hover::after { opacity: 1; }
.pk:hover, .vk__link:hover { box-shadow: 0 30px 50px -28px rgb(46 30 8 / .6); }
/* Mobiler Karten-Stapel (site.css [data-stapel], bis 640 px): Die obere Karte liegt über der unteren, mit .74 am Fuß
   schien deren Text durch (Aufnahme 07.10.2026). Im Stapel daher deckend, Ton wie im Rückfall unten. */
@media (max-width: 640px) { [data-stapel] .vk__link { background: #FBF7EF; } }
.pk__buehne { background: radial-gradient(70% 60% at 50% 88%, #fff 0%, rgb(239 226 198 / .7) 72%); }
.ist-neigend { transition: box-shadow var(--d3) var(--aus), transform 80ms linear !important; }

/* ================================================================ Lagen-Karte: Glas-Tooltip am Zeiger */
.karte-tip { position: fixed; left: 0; top: 0; z-index: 60; display: grid; gap: 4px; min-width: 200px; max-width: 280px; padding: 14px 16px; border-radius: 16px; pointer-events: none;
  color: var(--tinte); background: var(--glas-hell-stark); border: 1px solid var(--glas-rand-hell); box-shadow: 0 20px 44px -18px rgb(46 30 8 / .5);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  opacity: 0; transform: translate3d(var(--tx, 0), var(--ty, 0), 0) scale(.96); transition: opacity var(--d2) var(--aus), transform 90ms linear; }
.karte-tip.is-an { opacity: 1; transform: translate3d(var(--tx, 0), var(--ty, 0), 0); }
.karte-tip b { font-family: var(--serif); font-size: 1.2rem; font-weight: 500; }
.karte-tip span { font-size: var(--t-klein); color: var(--text-2); }
.karte-tip em { font-style: normal; font-size: var(--t-mini); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ocker-tief); }

/* ================================================================ Zeitstrahl: füllt sich beim Scrollen (site.js setzt --fortschritt) */
.js .strahl[data-strahl]::after, .js .strahl[data-strahl]:not(.is-da)::after { transform: scaleX(var(--fortschritt, 0)); transition: none; background: linear-gradient(90deg, var(--ocker), var(--gold-hell)); }
.js .strahl[data-strahl] .strahl__schritt .strahl__punkt { transition: background-color 260ms var(--aus), color 260ms var(--aus), transform 260ms var(--aus); }
.js .strahl[data-strahl] .strahl__schritt.is-an .strahl__punkt { background: var(--ocker); color: var(--tinte); border-color: var(--ocker); transform: scale(1.12); }
.js .strahl[data-strahl] .strahl__schritt:not(.is-an) .strahl__punkt { background: var(--anthrazit); color: var(--gold); }
.js .strahl--hell[data-strahl] .strahl__schritt:not(.is-an) .strahl__punkt { background: var(--papier); color: var(--gold-text); }

/* ================================================================ Bewegung reduziert: keine Tropfen, keine Tiefe */
@media (prefers-reduced-motion: reduce) {
  .weinfinder__tropfen { animation: none; }
  .wf__karte.is-neu { animation: none; }
  .js .strahl[data-strahl]::after { transform: none; }
}
html.bewegung-aus .weinfinder__tropfen { animation-play-state: paused; }

/* ================================================================ Rückfall: ohne backdrop-filter oder bei „Transparenz reduzieren“ volle Flächen */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .kopf__in::before, .glas-dunkel, .rail, .menue { background: #221F1A; }
  .kopf.is-hell .kopf__in::before, .glas, .mega__tafel, .karte-tip, .wf { background: #FBF7EF; }
}
@media (prefers-reduced-transparency: reduce) {
  .kopf__in::before, .glas-dunkel, .rail, .menue, .hero__termin { background: #221F1A; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .kopf.is-hell .kopf__in::before, .glas, .mega__tafel, .karte-tip, .wf, .rahmen, .pk, .vk__link { background: #FBF7EF; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .glas::after, .glas-dunkel::after, .kopf__in::after, .mega__tafel::after, .pk::after, .vk__link::after { display: none; }
}