/* ===========================================================
   Staatsweingut Weinsberg — Custom-Layer (Hybrid mit Tailwind)
   Leise, editoriale Linie (nach Hero-Feedback).
   =========================================================== */

:root {
  --navy: #2A3D58;
  --navy-deep: #182334;
  --navy-veil: rgba(50, 70, 99, 0.65);
  --gold: #C4A873;   /* leicht aufgehellt (war #BEA16B): Gold-Kicker (12,5px bold) auf Navy #2A3D58 erreicht so ≥4.5:1 (WCAG AA / BITV) */
  --gold-deep: #A88E58;
  --sand: #D6CEC6;
  --cream: #DCD4CE;
  --off-white: #FAF7F2;
  --charcoal: #212529;
  --stone: #847862;
  --ink-soft: #3C424A;
  --ink-disabled: #786D5C;   /* gedämpfter Deaktiviert-Ton, aber ≥4,5:1 auf Off-White */
  --error: #8A3324;          /* der eine Funktions-Alarmton: gedeckter Oxblood (wein-nah), KEIN Discount-Rot */
  /* Abgeleitete Alpha-Stufen (aus Basis-Tokens) — keine rohen rgba in Komponenten; Palettenwechsel propagiert */
  --cream-strong: color-mix(in srgb, var(--cream) 85%, transparent);  /* gedämpfter Fließtext auf Dunkel */
  --cream-mid:    color-mix(in srgb, var(--cream) 72%, transparent);  /* Labels / sekundär auf Dunkel */
  --cream-faint:  color-mix(in srgb, var(--cream) 60%, transparent);  /* Hinweise / Feindruck auf Dunkel */
  --line-cream:   color-mix(in srgb, var(--cream) 16%, transparent);  /* Hairline auf Dunkel */
  --gold-hair:    color-mix(in srgb, var(--gold) 24%, transparent);   /* leiseste Gold-Kante */
  --gold-line:    color-mix(in srgb, var(--gold) 34%, transparent);   /* Gold-Kante / Plate-Rand */
  --gold-rule:    color-mix(in srgb, var(--gold) 43%, transparent);   /* Gold-Trennlinie / Regel */
  --gold-mono:    color-mix(in srgb, var(--gold) 85%, transparent);   /* dekoratives Gold-Monogramm */
  --gold-glow:    color-mix(in srgb, var(--gold) 10%, transparent);   /* Gold-Vignette / Schimmer */
  --line-navy:    color-mix(in srgb, var(--navy) 18%, transparent);   /* Hairline auf Hell */
  --tint-navy:    color-mix(in srgb, var(--navy) 5%, transparent);    /* Hover-Tint auf Hell */

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Satoshi", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --d-state: 200ms;
  --pad-x: clamp(1.25rem, 5vw, 4rem);

  /* Spacing-Rhythmus (brand: großzügig, fluid) — kohärente Skala: airy > standard > tight */
  --section: clamp(3.5rem, 7vw, 6rem);         /* Standard-Content-Sektion (Werte, Kacheln, Shop, CTA) */
  --section-airy: clamp(7rem, 13vh, 11rem);    /* Text-Intro-Atempausen (Beige-Statements) */
  --section-tight: clamp(3rem, 6vw, 5rem);     /* leise Bänder (Newsletter) */
  --row-gap: clamp(4rem, 8vw, 7rem);          /* zwischen den Teaser-Reihen */

  /* ---- Typo-Skala (benannt, Ratio ~1.27; Headlines fluid, Body fix) ---- */
  --fs-display: clamp(2.9rem, 6.4vw, 5.25rem); /* kurze Punch-h1 (Unterseiten-Hero, „1868") */
  --fs-hero: clamp(2.1rem, 4.6vw, 3.5rem);     /* lange Hero-Fließsatz-Headline (Startseite) */
  --fs-schlagwort: clamp(2.5rem, 4.8vw, 4rem); /* Säulen-Schlagworte (Trias) */
  --fs-h2:      clamp(2rem, 3.4vw, 3rem);     /* Sektions-Headline */
  --fs-lead:    clamp(1.7rem, 2.8vw, 2.35rem);/* Lead-Statement */
  --fs-h3:      clamp(1.4rem, 2.3vw, 1.85rem);/* leise Sektion (Newsletter) */
  --fs-h4:      clamp(1.3rem, 1.7vw, 1.5rem); /* Karten-/Item-Titel, Namen (füllt Lücke h3↔body) */
  --fs-body:    1.1875rem;                    /* Fließtext (19px) */
  --fs-meta:    1rem;                         /* Links, Buttons */
  --fs-kicker:  0.78rem;                      /* Kicker / Label */
  --fs-fine:    0.875rem;                     /* Feindruck: Fußnoten, Hinweise, Fehlermeldungen */

  --lh-display: 1.04;   /* Hero */
  --lh-tight:   1.1;    /* Headlines */
  --lh-snug:    1.18;   /* Lead */
  --lh-body:    1.7;    /* Fließtext */

  --ls-display: -0.03em;
  --ls-heading: -0.015em;
  --ls-kicker:  0.14em;   /* einheitliches Tracking für ALLE Versal-Kicker/Labels */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--off-white); color: var(--charcoal); font-family: var(--sans); line-height: 1.7; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }

/* ---------- Typo ---------- */
.serif-display { font-family: var(--serif); font-weight: 500; text-transform: none; letter-spacing: var(--ls-heading); line-height: var(--lh-tight); margin: 0; color: var(--navy); text-wrap: balance; }
p { text-wrap: pretty; }
.kicker { font-family: var(--sans); font-weight: 700; font-size: var(--fs-kicker); letter-spacing: var(--ls-kicker); text-transform: uppercase; }

/* Skala-Klassen — eine Quelle der Wahrheit für die Hierarchie */
.t-h2   { font-size: var(--fs-h2);   line-height: var(--lh-tight); }
.t-lead { font-size: var(--fs-lead); line-height: var(--lh-snug); }
.t-h3   { font-size: var(--fs-h3);   line-height: var(--lh-tight); }
.t-body { font-size: var(--fs-body); line-height: var(--lh-body); }

/* ==========================================================================
   BUTTON- & LINK-SYSTEM — 3 Stufen · 6 Zustände · hell/dunkel
   Primary (.btn--primary) · Secondary (.btn--secondary) · Text-Link (.link)
   ========================================================================== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; position: relative; box-sizing: border-box;
  font-family: var(--sans); font-weight: 500; font-size: var(--fs-meta); line-height: 1.1;
  padding: 16px 34px; border: 1px solid transparent; border-radius: 0; cursor: pointer; text-decoration: none; text-align: center; -webkit-tap-highlight-color: transparent;
  transition: background var(--d-state) var(--ease-out), color var(--d-state) var(--ease-out), border-color var(--d-state) var(--ease-out), transform var(--d-state) var(--ease-out), opacity var(--d-state) var(--ease-out); }
.btn__label { display: inline-block; }
/* Nur für Assistive Tech sichtbar (Screenreader) — visuell verborgen, im AccName/Live-Region wirksam */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Stufe 1 — Primary: Gold-Fläche, die eine Hauptaktion */
.btn--primary { background: var(--gold); color: var(--charcoal); border-color: var(--gold); }
.btn--primary:focus-visible { outline: 2px solid var(--navy-deep); outline-offset: 3px; }
.btn--primary:active { transform: scale(0.98); background: var(--gold-deep); border-color: var(--gold-deep); }
@media (hover: hover) { .btn--primary:hover { background: var(--gold-deep); border-color: var(--gold-deep); transform: translateY(-2px); } }

/* Stufe 2 — Secondary: Navy-Outline, sichtbar aber untergeordnet */
.btn--secondary { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--secondary:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.btn--secondary:active { transform: scale(0.98); background: var(--navy); color: var(--off-white); border-color: var(--navy); }
@media (hover: hover) { .btn--secondary:hover { background: var(--navy); color: var(--off-white); border-color: var(--navy); transform: translateY(-2px); } }

/* Zustand deaktiviert (beide) — nie nur über Farbe */
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.btn:disabled:hover, .btn[aria-disabled="true"]:hover { transform: none; }

/* Zustand ladend (beide) — Label bleibt SICHTBAR (kein nackter Ring), Inline-Spinner dahinter; aria-busy + role=status */
.btn.is-loading { cursor: progress; pointer-events: none; }
/* Loading soll natives `disabled` tragen (blockt Tastatur + Pointer gegen Doppel-Absenden),
   behält aber den Lade-Look statt der Dimmung. Produktion: alternativ aria-disabled + JS-preventDefault, um den Fokus zu halten. */
.btn.is-loading:disabled, .btn.is-loading[aria-disabled="true"] { opacity: 1; cursor: progress; }
/* Spinner-Ring: gemeinsame Basis für Button & Text-Link (keine Duplizierung) — jeweils INLINE (Flex-Gap trägt den Abstand) */
.btn.is-loading::after, .link.is-loading::after { content: ""; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: btn-spin .7s linear infinite; }
.btn.is-loading::after { width: 1.05em; height: 1.05em; flex: none; }
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* Zustand 7 — Fehler: gedeckter Oxblood-Rahmen (kein Discount-Rot); Bedeutung IMMER zusätzlich über
   Text + aria-invalid + eine begleitende role="alert"-Meldung (Farbe nie alleiniger Träger). Button bleibt klickbar (Retry). */
.btn.is-error { border-color: var(--error); border-width: 2px; }
.btn-error { display: flex; align-items: center; gap: .45rem; margin-top: .6rem; font-family: var(--sans); font-size: var(--fs-fine); line-height: 1.4; color: var(--error); }
.btn-error svg { width: 16px; height: 16px; flex: none; }

/* Overdrive „Folienglanz" (opt-in) — Lichtstreif gleitet bei Hover 1× übers Gold (Heißfolienprägung).
   Nur als Zusatzschicht über .btn--primary; gezielt an EINER Haupt-CTA einsetzen, nicht global. */
.btn--overdrive { overflow: hidden; }
.btn--overdrive::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 42%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.34) 50%, rgba(255,255,255,0) 100%);
  transform: translateX(-130%) skewX(-20deg); pointer-events: none; z-index: 0;
}
.btn--overdrive .btn__label { position: relative; z-index: 1; }
@media (hover: hover) { .btn--overdrive:hover::before { animation: ov-sheen-sweep 1.5s cubic-bezier(0.37,0,0.63,1); } }
@keyframes ov-sheen-sweep { from { transform: translateX(-130%) skewX(-20deg); } to { transform: translateX(250%) skewX(-20deg); } }
/* Effekt aus bei Deaktiviert/Ladend/Fehler und bei Reduced-Motion */
.btn--overdrive:disabled::before, .btn--overdrive[aria-disabled="true"]::before, .btn--overdrive.is-loading::before, .btn--overdrive.is-error::before { display: none; }
@media (prefers-reduced-motion: reduce) { .btn--overdrive:hover::before { animation: none; } }

/* Globaler Fokus-Fallback: hell = Navy (10:1, ≥3:1 sicher). Dunkle Nicht-System-Controls,
   die diesen Fallback erben, bekommen einen hellen Ring (Navy auf Navy wäre unsichtbar). */
:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.burger:focus-visible, .nav-overlay a:focus-visible,
.hdr-lions:focus-visible, .hdr-word:focus-visible, .nl-live__btn:focus-visible { outline-color: var(--off-white); }

/* Anker-Ziele nicht unter den fixierten Header springen lassen */
#staatsweingut, #herkunft, #erleben, #shop { scroll-margin-top: clamp(72px, 9vh, 100px); }

/* Stufe 3 — Text-Link (.link): leiseste Stufe · Navy-Unterstrich (≥3:1), Gold als Hover-Akzent, Pfeil */
.link { display: inline-block; font-family: var(--sans); font-weight: 500; font-size: var(--fs-meta); color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--navy); padding-bottom: 3px;
  transition: color var(--d-state) var(--ease-out), border-color var(--d-state) var(--ease-out), opacity var(--d-state) var(--ease-out); }
.link::after { content: "\00a0\00a0\2192"; display: inline-block; transition: transform .25s var(--ease-out); }
/* Kein visited-Dimming: besuchte Links behalten ihre Kontextfarbe. Ein pauschales .link:visited{navy} hat höhere Spezifität (Klasse+Pseudoklasse) als .link--nav/.on-dark und färbte besuchte Footer-Links navy-auf-navy (unsichtbar). */
.link:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 2px; }
.link:active { opacity: .75; }
@media (hover: hover) { .link:hover { color: var(--navy-deep); border-color: var(--gold); } .link:hover::after { transform: translateX(4px); } }
/* Deaktiviert: Rolle bleibt sichtbar (gepunkteter Unterstrich + gedämpfter Pfeil), nur der Zustand ist gedämpft */
.link[aria-disabled="true"], .link.is-disabled { color: var(--ink-disabled); border-bottom-style: dotted; border-bottom-color: var(--ink-disabled); cursor: not-allowed; pointer-events: none; }
.link.is-loading { pointer-events: none; cursor: progress; }
.link.is-loading::after { display: inline-block; vertical-align: -.1em; margin-left: .5rem; width: 1em; height: 1em; transform: none; }

/* Nav-Variante (.link--nav): Listen-Links (Footer) — ohne Pfeil, Unterstrich bei Hover, ≥44px Fläche */
.link--nav { display: block; align-self: auto; border-bottom: 0; padding: 11px 0; font-weight: 400; color: var(--sand); }
.link--nav::after { content: none; }
.link--nav:focus-visible { outline: 2px solid var(--off-white); outline-offset: 2px; border-radius: 2px; }
@media (hover: hover) { .link--nav:hover { color: var(--off-white); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 4px; } }

/* Kontext dunkler Grund (.on-dark am Element oder Container) */
.on-dark .btn--secondary, .btn--secondary.on-dark { color: var(--cream); border-color: var(--cream); }
.on-dark .btn--secondary:active, .btn--secondary.on-dark:active { background: var(--cream); color: var(--navy-deep); border-color: var(--cream); }
@media (hover: hover) { .on-dark .btn--secondary:hover, .btn--secondary.on-dark:hover { background: var(--cream); color: var(--navy-deep); border-color: var(--cream); } }
.on-dark .link, .link.on-dark { color: var(--cream); border-bottom-color: var(--gold); }
@media (hover: hover) { .on-dark .link:hover, .link.on-dark:hover { color: var(--off-white); border-color: var(--cream); } }
/* Fokus-Ring auf dunklem Grund: Off-White (immer sichtbar, nie gold-auf-gold) */
.on-dark .btn:focus-visible, .btn.on-dark:focus-visible, .on-dark .link:focus-visible, .link.on-dark:focus-visible { outline-color: var(--off-white); }

/* Bewegung reduzieren: kein Lift/Pfeil-Gleiten/Rotation — Feedback über Farbe/Opacity + aria-busy */
@media (prefers-reduced-motion: reduce) {
  .btn--primary:hover, .btn--secondary:hover { transform: none; }
  .link:hover::after, .on-dark .link:hover::after { transform: none; }
  .btn.is-loading::after, .link.is-loading::after { animation: none; border-top-color: currentColor; opacity: .55; }
}

/* ---------- Input ---------- */
.ds-input { background: var(--off-white); color: var(--charcoal); border: 1px solid var(--stone); border-radius: 2px; padding: 14px 16px; font-family: var(--sans); font-size: 1rem; }
.ds-input::placeholder { color: #6b6155; }
.ds-input:focus { outline: 2px solid rgba(42,61,88,.35); border-color: var(--navy); }

/* ---------- Header ---------- */
/* Skip-Link: Tastatur/Screenreader springen an Header/Overlays vorbei zum Inhalt */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 300; }
.skip-link:focus, .skip-link:focus-visible { left: var(--pad-x); top: .6rem; background: var(--navy-deep); color: var(--off-white); padding: .7rem 1.1rem; border-radius: 4px; font-family: var(--sans); font-weight: 700; }
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
  padding: max(clamp(.9rem, 2vw, 1.4rem), env(safe-area-inset-top)) max(var(--pad-x), env(safe-area-inset-right)) clamp(.9rem, 2vw, 1.4rem) max(var(--pad-x), env(safe-area-inset-left));
  transition: background var(--d-state) var(--ease-out), box-shadow var(--d-state) var(--ease-out);
}
.site-header.scrolled { background: var(--navy); padding-top: max(.7rem, env(safe-area-inset-top)); padding-bottom: .7rem; box-shadow: 0 1px 0 rgba(190,161,107,.22); }
.hdr-lions { justify-self: start; display: inline-flex; }
.hdr-lions img { height: clamp(34px, 4vw, 46px); width: auto; }
.hdr-word { justify-self: center; display: inline-flex; }
.hdr-word img { height: clamp(20px, 2.2vw, 34px); width: auto; max-width: 60vw; filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
.burger { justify-self: end; background: none; border: 0; cursor: pointer; padding: 10px 4px; min-height: 44px; display: inline-flex; align-items: center; gap: 12px; -webkit-tap-highlight-color: transparent; }
.burger .menu-label { font-family: var(--sans); font-weight: 500; letter-spacing: var(--ls-kicker); text-transform: uppercase; font-size: 13px; color: var(--off-white); }
.burger .menu-lines { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.burger .menu-lines span { display: block; height: 2px; background: var(--off-white); transition: width var(--d-state) var(--ease-out); }
.burger .menu-lines span:nth-child(1) { width: 30px; }
.burger .menu-lines span:nth-child(2) { width: 30px; }
.burger .menu-lines span:nth-child(3) { width: 19px; }
.burger:hover .menu-lines span:nth-child(3) { width: 30px; }

/* ---- Overlay-Menü: Panel-Drawer rechts (Gegenstück-Look zum Shop-Störer) ---- */
.nav-overlay { position: fixed; inset: 0; z-index: 200; visibility: hidden; transition: visibility 0s linear .5s; }
.nav-overlay.open { visibility: visible; transition-delay: 0s; }
.nav-overlay__backdrop { position: absolute; inset: 0; background: rgba(18,26,40,.62); opacity: 0; transition: opacity .4s var(--ease-out); }
.nav-overlay.open .nav-overlay__backdrop { opacity: 1; }
.navp { position: absolute; top: 0; right: 0; bottom: 0; width: min(480px, 94vw); background: #151F2E; box-shadow: -24px 0 80px rgba(0,0,0,.5);
  display: flex; flex-direction: column; transform: translateX(100%); transition: transform .5s cubic-bezier(0.32,0.72,0,1); will-change: transform; }
.nav-overlay.open .navp { transform: none; }
.navp__top { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: clamp(1.5rem,3.4vh,2.2rem) clamp(2rem,4.4vw,3rem) 0; }
/* Wortmarke oben links = Weg zur Startseite */
.navp__home { display: inline-flex; align-items: center; text-decoration: none; opacity: .9; transition: opacity .2s var(--ease-out); }
.navp__home-word { display: block; width: auto; height: 24px; }
@media (hover:hover){ .navp__home:hover { opacity: 1; } }
.navp__home:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 4px; }
/* Close-Button: Kreis, wird gold + hebt sich leicht beim Hover, drückt sich beim Klick */
.navp__close { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(214,206,198,.28); background: rgba(255,255,255,.02); color: var(--cream);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .25s var(--ease-out), border-color .25s var(--ease-out), color .25s var(--ease-out), transform .2s var(--ease-out); }
@media (hover:hover){ .navp__close:hover { background: rgba(190,161,107,.16); border-color: var(--gold); color: var(--gold); transform: scale(1.06); } }
.navp__close:active { transform: scale(.94); }
.navp__close:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.navp__scroll { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: clamp(1.2rem,2.4vh,2rem) clamp(2rem,4.4vw,3rem) clamp(2.4rem,5vh,3.2rem); }
/* Säulen + Untermenüs */
.navp__pillar { padding: clamp(1.3rem,2.6vh,1.7rem) 0; border-bottom: 1px solid rgba(214,206,198,.1); }
.navp__pillar:first-child { padding-top: 0; }
.navp__tri { font-family: var(--sans); font-weight: 700; font-size: var(--fs-kicker); letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--gold); margin: 0 0 .6rem; }
.navp__name { font-family: var(--serif); font-weight: 500; font-size: var(--fs-lead); line-height: var(--lh-display); letter-spacing: var(--ls-heading); color: #F3EFE9; text-decoration: none; display: block; transition: color .25s var(--ease-out); }
@media (hover:hover){ .navp__name:hover { color: var(--gold); } }
.navp__sub { display: flex; flex-wrap: wrap; gap: .5rem 1.3rem; margin-top: .9rem; }
.navp__sub a { font-family: var(--sans); font-size: var(--fs-fine); color: rgba(220,212,206,.62); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; transition: color .2s var(--ease-out), border-color .2s var(--ease-out); }
@media (hover:hover){ .navp__sub a:hover { color: var(--cream); border-bottom-color: var(--gold); } }
/* Shop-CTA */
.navp__shop { display: flex; align-items: center; justify-content: space-between; margin-top: 2.4rem; padding: 17px 24px; background: var(--gold); color: var(--navy-deep); text-decoration: none; font-family: var(--sans); font-weight: 500; letter-spacing: .02em; transition: background .2s var(--ease-out); }
@media (hover:hover){ .navp__shop:hover { background: var(--gold-deep); } .navp__shop:hover .navp__shoparrow { transform: translateX(4px); } }
.navp__shoparrow { transition: transform .25s var(--ease-out); }
/* Meta: Kontakt / Öffnungszeiten / Social / Rechtliches */
.navp__meta { margin-top: 2.8rem; }
.navp__block + .navp__block { margin-top: 2rem; }
.navp__label { font-family: var(--sans); font-weight: 700; font-size: var(--fs-kicker); letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--gold); margin: 0 0 1rem; }
.navp__kname { font-family: var(--serif); font-weight: 500; font-size: var(--fs-h4); letter-spacing: var(--ls-heading); color: #F3EFE9; margin: 0 0 .5rem; }
.navp__addr { font-style: normal; font-family: var(--sans); font-size: var(--fs-meta); line-height: 1.9; color: rgba(220,212,206,.78); }
.navp__addr a { color: rgba(220,212,206,.78); text-decoration: none; transition: color .2s var(--ease-out); }
@media (hover:hover){ .navp__addr a:hover { color: var(--gold); } }
.navp__hours { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.navp__hours li { display: flex; justify-content: space-between; gap: 1rem; max-width: 18rem; font-family: var(--sans); font-size: var(--fs-meta); }
.navp__hours li span:first-child { color: rgba(220,212,206,.68); }
.navp__hours li span:last-child { color: #F3EFE9; font-weight: 500; white-space: nowrap; }
.navp__social { display: flex; gap: .55rem; margin-top: 2.2rem; }
.navp__social a { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(214,206,198,.24); color: rgba(220,212,206,.82); transition: color .2s var(--ease-out), border-color .2s var(--ease-out); }
@media (hover:hover){ .navp__social a:hover { border-color: var(--gold); color: var(--gold); } }
.navp__legal { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: 2.6rem; padding-top: 1.8rem; border-top: 1px solid rgba(214,206,198,.1); }
.navp__legal a { font-family: var(--sans); font-size: var(--fs-fine); color: rgba(214,206,198,.68); text-decoration: none; transition: color .2s var(--ease-out); }
@media (hover:hover){ .navp__legal a:hover { color: var(--cream); } }
/* Einblend-Stagger als einmalige Keyframe beim Öffnen; Items bleiben default sichtbar → gleiten beim Schließen mit dem Drawer raus (kein leerer Panel) */
@keyframes navItemIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.nav-overlay.open .navp__pillar, .nav-overlay.open .navp__shop, .nav-overlay.open .navp__meta { animation: navItemIn .5s var(--ease-out) both; }
.nav-overlay.open .navp__pillar:nth-child(1) { animation-delay: .12s; }
.nav-overlay.open .navp__pillar:nth-child(2) { animation-delay: .2s; }
.nav-overlay.open .navp__pillar:nth-child(3) { animation-delay: .28s; }
.nav-overlay.open .navp__shop { animation-delay: .34s; }
.nav-overlay.open .navp__meta { animation-delay: .4s; }
@media (prefers-reduced-motion: reduce){
  .nav-overlay { transition-delay: .3s; }
  .navp { transition: opacity .3s ease; opacity: 0; }
  .nav-overlay.open .navp { opacity: 1; transform: none; }
  .nav-overlay.open .navp__pillar, .nav-overlay.open .navp__shop, .nav-overlay.open .navp__meta { animation: none; }
  .navp__close { transition: background .25s ease, border-color .25s ease, color .25s ease; }
}

/* ---------- Sticky Shop-Tab (rechter Rand) ---------- */
.shop-tab {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 90;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  width: 46px; min-height: 140px; padding: 15px 0;
  background: var(--gold); color: var(--charcoal); text-decoration: none;
  border-radius: 6px 0 0 6px; box-shadow: -3px 0 16px rgba(24,35,52,.16);
  transition: width .25s var(--ease-out), background .2s var(--ease-out), color .2s var(--ease-out);
}
.shop-tab__icon { width: 20px; height: 20px; flex: none; }
/* Vertikales „SHOP": writing-mode statt rotate → sauberer Layout-Kasten unter dem Icon */
.shop-tab span { writing-mode: vertical-rl; white-space: nowrap; font-family: var(--sans); font-weight: 700; font-size: 13px; letter-spacing: var(--ls-kicker); text-transform: uppercase; }
.shop-tab:hover { width: 56px; background: var(--gold-deep); }
.shop-tab:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
@media (max-width: 768px) { .shop-tab { display: none; } }

/* Mobil: runder Shop-FAB unten rechts */
.shop-fab { display: none; }
.shop-fab:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
@media (max-width: 768px) {
  .shop-fab {
    position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 90;
    display: flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--gold); color: var(--charcoal); text-decoration: none;
    box-shadow: 0 6px 20px rgba(24,35,52,.28);
    transition: transform .18s var(--ease-out), background .2s var(--ease-out), color .2s var(--ease-out);
  }
  .shop-fab svg { width: 24px; height: 24px; }
  .shop-fab:hover { background: var(--gold-deep); }
  .shop-fab:active { transform: scale(.94); }
  /* Footer-Fußzeile darf nicht unter dem fixierten FAB verschwinden */
  footer.pb-8 { padding-bottom: calc(6rem + env(safe-area-inset-bottom)); }
}

/* ---------- HERO (editorial) ---------- */
.hero { position: relative; min-height: 100svh; overflow: hidden; background: var(--navy-deep); }
.hero__media { position: absolute; inset: 0; }
.hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* Crossfade-Film: geteilter langsamer Ken-Burns + weiche ein/aus-Blende, ~30s / ~10s je Bild */
.hero__slide { opacity: 0; transform: scale(1); filter: saturate(.82) contrast(1.04) brightness(.86); animation: heroCross 30s linear infinite; }
.hero__slide.s2 { animation-delay: 10s; }
.hero__slide.s3 { animation-delay: 20s; }
@keyframes heroCross {
  0%   { opacity: 0; transform: scale(1.0); animation-timing-function: ease-in-out; }
  6.7% { opacity: 1; animation-timing-function: linear; }
  33.3%{ opacity: 1; animation-timing-function: ease-in-out; }
  40%  { opacity: 0; transform: scale(1.06); }
  100% { opacity: 0; transform: scale(1.06); }
}
.hero__grade { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(24,35,52,.5) 0%, rgba(24,35,52,.42) 40%, rgba(24,35,52,.74) 100%); }
.hero__content { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 var(--pad-x); animation: heroFade .7s var(--ease-out) .1s both; }
/* Zentriertes Scrim → Text frame-unabhängig lesbar */
.hero__content::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(122% 82% at 50% 45%, rgba(24,35,52,.70) 0%, rgba(24,35,52,.45) 50%, transparent 86%); }
.hero__theme { position: relative; height: 1.3em; margin: 0 0 .9rem; font-family: var(--sans); font-weight: 700; font-size: var(--fs-kicker); letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--cream); }
.hero__theme span { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; opacity: 0; text-shadow: 0 1px 20px rgba(24,35,52,.55), 0 1px 3px rgba(24,35,52,.85); animation: heroWord 30s linear infinite; }
.hero__theme .t2 { animation-delay: 10s; }
.hero__theme .t3 { animation-delay: 20s; }
@keyframes heroWord { 0%{opacity:0} 8%{opacity:.9} 30%{opacity:.9} 38%{opacity:0} 100%{opacity:0} }
@keyframes heroFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.hero__headline {
  margin: 0; width: min(1000px, 90vw);
  font-family: var(--serif); font-weight: 500; font-style: normal; text-transform: none;
  font-size: var(--fs-hero); line-height: var(--lh-tight); letter-spacing: var(--ls-display); color: var(--cream);
  text-wrap: balance; text-shadow: 0 1px 34px rgba(24,35,52,.5), 0 1px 3px rgba(24,35,52,.85);
}
.hero__vdp { position: absolute; z-index: 1; left: max(var(--pad-x), env(safe-area-inset-left)); bottom: max(clamp(1.4rem, 4vw, 2.4rem), env(safe-area-inset-bottom)); }
.hero__vdp img { height: clamp(30px, 3.2vw, 44px); width: auto; }
.hero__seit { position: absolute; z-index: 1; right: max(var(--pad-x), env(safe-area-inset-right)); bottom: max(clamp(1.4rem, 4vw, 2.4rem), env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hero__seit span { font-family: var(--sans); font-weight: 700; font-size: 12px; letter-spacing: var(--ls-kicker); color: #fff; }
.hero__seit img { height: clamp(18px, 2vw, 26px); width: auto; }
@media (max-width: 600px) { .hero__headline br { display: none; } .hero__seit { display: none; } }

/* Splash-Intro (Löwenmaske) entfernt — Hero ist jetzt ein ruhiger Crossfade-Film (siehe oben). */

/* ---------- Statement-Band (Navy-Commitment, via live) ---------- */
.statement { background: var(--navy-deep); text-align: center; padding: var(--section) var(--pad-x); }
/* Sprungziel-Anker (Kapitel-Schiene/Footer springen zu #vision/#forschung) klar vom fixen Header freihalten */
.statement[id] { scroll-margin-top: clamp(72px, 11vh, 104px); }
/* Aktive Seite im Menü-Drawer sichtbar markieren (Gold-Text auf Dunkel, regelkonform) */
.navp__name[aria-current="page"] { color: var(--gold); }
.statement__inner { max-width: 60ch; margin: 0 auto; }
.statement__lions { height: clamp(40px, 4.5vw, 52px); width: auto; display: block; margin: 0 auto clamp(1.9rem, 3.4vw, 2.6rem); }
.statement__lead { font-family: var(--serif); font-weight: 500; color: var(--cream); font-size: clamp(2rem,4vw,3rem); line-height: var(--lh-tight); letter-spacing: var(--ls-heading); text-wrap: balance; max-width: 28ch; margin: 0 auto clamp(1.6rem, 2.6vw, 2rem); }
.statement__body { font-family: var(--sans); font-size: var(--fs-body); line-height: var(--lh-body); color: rgba(220,212,206,.82); max-width: 52ch; margin: 0 auto clamp(2.6rem, 4.5vw, 3.4rem); }
.statement__cta { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
/* Tonaler Lift: Statement als warmes Beige-Manifest (bricht den langen Dunkel-Lauf) */
.statement--beige { background: var(--sand); padding-block: var(--section-airy); }
.statement--beige .statement__lead { max-width: 30ch; font-size: clamp(2.1rem,4.2vw,3.2rem); letter-spacing: var(--ls-display); margin-bottom: clamp(2.2rem,3.6vw,3rem); }
.statement--beige .statement__body { max-width: 56ch; }
.statement--beige .statement__lead { color: var(--navy); }
.statement--beige .statement__body { color: var(--ink-soft); }
/* Kapitel-Caption (Kicker) über dem Statement — führt in das Kapitel ein */
.statement__kicker { color: var(--navy); margin: 0 0 clamp(.9rem,1.8vw,1.3rem); }
/* Gold-CTA auf tonal nahem Beige: feine gold-deep-Kante definiert den Rand */
.statement--beige .btn--primary { border-color: var(--gold-deep); }
/* Dunkle Statement-Variante — gleiche Geometrie wie --beige, dunkle Farben (Kapitel-Rhythmus: Historie- & Forschung-Intro dunkel) */
.statement--dark { padding-block: var(--section-airy); }
.statement--dark .statement__lead { max-width: 30ch; font-size: clamp(2.1rem,4.2vw,3.2rem); letter-spacing: var(--ls-display); margin-bottom: clamp(2.2rem,3.6vw,3rem); color: var(--off-white); }
.statement--dark .statement__body { max-width: 56ch; color: rgba(220,212,206,.82); }
.statement--dark .statement__kicker { color: var(--gold); }
/* Forschung: dunkles Intro + dunkles Register = EIN Kapitel → doppelten Sektionsabstand dazwischen zusammenlegen (kein Farbbruch rechtfertigt die Luft) */
.statement--dark + .sw-sec--dark { padding-top: 0; }
.statement--dark:has(+ .sw-sec--dark) { padding-bottom: var(--section); }
.statement--dark:has(+ .sw-sec--dark) .statement__body { margin-bottom: 0; }
/* Gestapelte dunkle Sektionen desselben Kapitels (Vinothek → Angebote → Anfrage): doppelte Luft zusammenlegen — analog zum Sand-Pendant */
.sw-sec--dark + .sw-sec--dark { padding-top: 0; }
/* Adapt: CTAs stapeln auf schmalen Screens gleich breit (keine ragged Breiten / Umbrüche) */
@media (max-width: 560px) {
  .statement__cta { flex-direction: column; align-items: center; }
  .statement__cta .btn { width: 100%; max-width: 24rem; padding-inline: 1.5rem; }
}

/* ---------- Editoriale Reihen (Vollbild-Split) ---------- */
.ed-row { display: grid; }
.ed-media { overflow: hidden; }
.ed-media img { width: 100%; height: clamp(320px, 56vh, 520px); object-fit: cover; }
.ed-text { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.75rem, 7vw, 2.5rem); }
.ed-kicker { display: flex; align-items: center; gap: .7rem; }
.ed-lion { height: 18px; width: auto; display: block; flex: none; }
.shop-lion { height: 30px; width: auto; margin: 0 auto 1.1rem; }
@media (min-width: 800px) {
  .ed-row { grid-template-columns: 1.08fr 0.92fr; align-items: stretch; }
  .ed-media img { height: clamp(460px, 82vh, 780px); }
  .ed-text { padding: clamp(2.5rem, 6vw, 6rem); }
  .ed-row--rev .ed-media { order: 2; }
  .ed-row--rev .ed-text { order: 1; }
}
.js .ed-media img { transform: scale(1.08); transition: transform 1300ms var(--ease-out); }
.ed-row.in-view .ed-media img { transform: scale(1); }

/* ===========================================================
   DREI SÄULEN — Triptychon (alle sichtbar, ein Viewport)
   Ruhig (alles im Ruhezustand lesbar) mit einem Hauch Aufklappen:
   Hover weitet die Spalte sanft, Bild zoomt, Pfeil gleitet.
   =========================================================== */
.trip { display: flex; gap: 3px; background: var(--navy-deep); }
.trip__col {
  position: relative; flex: 1 1 0%; min-width: 0;
  height: clamp(560px, 84vh, 860px); overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  text-decoration: none; color: var(--cream);
}
.trip__media { position: absolute; inset: 0; }
.trip__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.trip__scrim { position: absolute; inset: 0; background:
  linear-gradient(to top, rgba(24,35,52,.95) 8%, rgba(24,35,52,.86) 45%, rgba(24,35,52,.68) 68%, rgba(24,35,52,.30) 88%, rgba(24,35,52,0) 100%); }
.trip__text { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start;
  padding: var(--pad-x); }
.trip .kicker { color: var(--gold); margin-bottom: 1.2rem; text-shadow: 0 1px 12px rgba(24,35,52,.65); }
/* Schlagworte hervorgehoben: Trias gestapelt, kräftiger, eng */
.trip__title { color: var(--cream); font-family: var(--serif); font-weight: 500; font-size: var(--fs-schlagwort); line-height: var(--lh-display); letter-spacing: var(--ls-display); margin-bottom: clamp(1.4rem, 2vw, 1.8rem); text-shadow: 0 1px 24px rgba(24,35,52,.45); }
.trip__title span { display: block; }
.trip__body { font-family: var(--sans); font-size: var(--fs-body); line-height: var(--lh-body);
  color: rgba(220,212,206,.94); max-width: 34ch; margin-bottom: 1.25rem; }
/* Karten-Affordanz = Text-Link-Stufe (.on-dark), Hover wird von der ganzen Spalte getragen */
.trip__cue { font-family: var(--sans); font-weight: 500; font-size: var(--fs-meta); color: var(--cream);
  border-bottom: 1px solid var(--gold); padding-bottom: 3px;
  transition: color var(--d-state) var(--ease-out), border-color var(--d-state) var(--ease-out); }
.trip__cue::after { content: "\00a0\00a0\2192"; display: inline-block; transition: transform .25s var(--ease-out); }
.trip__col:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; }

/* Ruhig: nur ein minimaler Bild-Zoom + Pfeil bei Hover (kein Aufweiten) */
@media (hover: hover) {
  .trip__col:hover .trip__media img { transform: scale(1.035); }
  .trip__col:hover .trip__cue { color: var(--off-white); border-color: var(--cream); }
  .trip__col:hover .trip__cue::after { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) { .trip__col:hover .trip__cue::after { transform: none; } }

@media (max-width: 1023px) {
  .trip { flex-direction: column; gap: 2px; }
  .trip__col { height: clamp(400px, 58vh, 560px); }
}

@media (prefers-reduced-motion: reduce) {
  .trip__media img, .trip__cue::after { transition: none !important; }
  .trip__col:hover .trip__media img { transform: none !important; }
}

/* ===========================================================
   WEINE-SLIDER (Shop-Teaser) — gleich große Flaschen auf hellem Beige
   =========================================================== */
.wineshop { background: var(--off-white); padding-block: var(--section); }
.wineshop__head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.wineshop__rule { display: inline-block; width: 26px; height: 2px; background: var(--gold); margin-right: .65rem; vertical-align: middle; }
.wineshop__all { text-align: center; padding-top: clamp(2rem, 4vw, 3rem); }

/* Reihe: gleichrangige Flaschen, editorial (keine Trennlinien), Peek der nächsten Karte */
.wineslider { display: block; }
.wineslider__track { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
  padding: 0 calc(var(--pad-x) - clamp(.9rem, 1.8vw, 1.6rem)); scrollbar-width: none; cursor: grab; }
.wineslider__track::-webkit-scrollbar { display: none; }
.wineslider__track:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
.winecard { flex: 0 0 clamp(290px, 28vw, 380px); scroll-snap-align: start; text-decoration: none; color: inherit;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: .5rem clamp(.9rem,1.8vw,1.6rem) 1rem; transition: background .3s var(--ease-out); }
.winecard__cat { font-family: var(--sans); font-weight: 700; font-size: var(--fs-kicker); letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--navy); margin-bottom: .5rem; }
/* Bühne = Flasche + eigene, geclippte Spiegelungs-Zone (blutet nicht in den Text) */
.winecard__stage { order: -1; display: flex; flex-direction: column; align-items: center; margin-bottom: 1.2rem; }
.winecard__btlwrap { height: clamp(390px, 52vh, 560px); display: flex; align-items: flex-end; justify-content: center; }
.winecard__btlwrap img { height: 100%; width: auto; object-fit: contain; object-position: center bottom; transition: transform .5s var(--ease-out); }
.winecard__refl { height: 60px; overflow: hidden; margin-top: 1px; pointer-events: none; }
.winecard__refl img { height: clamp(390px, 52vh, 560px); width: auto; object-fit: contain; object-position: center bottom; transform: scaleY(-1);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.26), rgba(0,0,0,0) 62%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.26), rgba(0,0,0,0) 62%); }
.winecard__lage { font-family: var(--serif); font-weight: 500; color: var(--navy);
  font-size: var(--fs-h4); line-height: var(--lh-tight); letter-spacing: var(--ls-heading);
  text-wrap: balance; min-height: 2.3em; display: flex; align-items: flex-end; justify-content: center; }
.winecard__grape { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--ink-soft);
  font-size: var(--fs-body); line-height: 1.2; letter-spacing: var(--ls-heading); margin: .1rem 0 .6rem; }
.winecard__price { font-family: var(--sans); font-weight: 700; font-size: 1.2rem; color: var(--charcoal); }
.winecard__base { font-family: var(--sans); font-size: var(--fs-fine); color: var(--ink-soft); margin-top: .15rem; }
/* Karten-Affordanz = Text-Link-Stufe (hell), Hover wird von der ganzen Karte getragen */
.winecard__link { font-family: var(--sans); font-weight: 500; font-size: var(--fs-meta); color: var(--navy);
  border-bottom: 1px solid var(--navy); padding-bottom: 3px; margin-top: 1rem;
  transition: color var(--d-state) var(--ease-out), border-color var(--d-state) var(--ease-out); }
.winecard__link::after { content: "\00a0\00a0\2192"; display: inline-block; transition: transform .25s var(--ease-out); }
.winecard:focus-visible { outline: 2px solid var(--navy); outline-offset: -3px; }
@media (hover: hover) {
  .winecard:hover { background: rgba(24,35,52,.05); }
  .winecard:hover .winecard__btlwrap img { transform: translateY(-10px); }
  .winecard:hover .winecard__link { color: var(--navy-deep); border-color: var(--gold); }
  .winecard:hover .winecard__link::after { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) { .winecard:hover .winecard__link::after, .winecard:hover .winecard__btlwrap img { transform: none; } }

/* Delight 1 — Scroll-Nudge beim Einblenden (hint auf Scrollbarkeit) */
@keyframes wineNudge { 0% { transform: translateX(0); } 32% { transform: translateX(-24px); } 100% { transform: translateX(0); } }
.wineslider__track.is-nudge { animation: wineNudge .85s var(--ease-out) both; }
/* Delight 2 — Snap-Quittung: verankerte Karte „landet" nach dem Scroll-Ende */
@keyframes wineSettle { from { transform: translateY(-6px); } to { transform: translateY(0); } }
.winecard.just-snapped .winecard__btlwrap img { animation: wineSettle .22s var(--ease-out); }

/* Reihen-Fuß: Zähler + Fortschritt + Pfeile (am Content) */
.wineslider__foot { display: flex; align-items: center; gap: 1.2rem; padding: 1.4rem var(--pad-x) 0; }
.wineslider__count { font-family: var(--sans); font-weight: 700; font-size: var(--fs-meta); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.wineslider__progress { position: relative; flex: 1; height: 2px; background: rgba(42,61,88,.16); }
.wineslider__progress i { position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: var(--gold); transform-origin: left center; transform: translateX(0) scaleX(.4); transition: transform .2s var(--ease-out); }
.wineslider__navs { display: flex; gap: .5rem; flex: none; }
.wineslider__nav { z-index: 3;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(24,35,52,.35);
  background: transparent; color: var(--navy-deep); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .2s var(--ease-out), color .2s var(--ease-out), border-color .2s, opacity .2s, transform .15s var(--ease-out); }
.wineslider__nav:focus-visible { outline-color: var(--navy-deep); }
.wineslider__nav:not([disabled]):active { transform: scale(0.92); }
.wineslider__nav svg { width: 20px; height: 20px; }
.wineslider__nav[disabled] { opacity: .3; cursor: default; }
@media (hover: hover) { .wineslider__nav:not([disabled]):hover { background: var(--navy-deep); color: var(--gold); border-color: var(--navy-deep); } }
@media (max-width: 860px) { .winecard { flex-basis: clamp(250px, 70vw, 320px); } }
@media (prefers-reduced-motion: reduce) { .wineslider__track { scroll-behavior: auto; } .winecard__btlwrap img { transition: none; } .wineslider__progress i { transition: none; } .wineslider__track.is-nudge, .winecard.just-snapped .winecard__btlwrap img { animation: none; } }

/* ===========================================================
   MOTION — zurückhaltend (Emil)
   =========================================================== */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: var(--rd, 0ms); }
.is-loaded .reveal, .in-view .reveal, .reveal.in-view { opacity: 1; transform: none; }

.js .hero__vdp, .js .hero__seit { opacity: 0; transition: opacity 850ms var(--ease-out) 150ms; }
.is-loaded .hero__vdp, .is-loaded .hero__seit { opacity: 1; }

/* ===========================================================
   ADAPT — Kontext statt Skalierung
   =========================================================== */

/* Touch: Transform-/Breiten-Hover kleben nach dem Tap → neutralisieren.
   :active-Feedback (scale) bleibt erhalten, Farb-Hover sind unkritisch. */
@media (hover: none) {
  .btn-accent:hover { background: var(--gold); transform: none; }
  .btn-primary:hover { background: var(--navy-deep); transform: none; }
  .shop-tab:hover { width: 46px; background: var(--gold); }
  .shop-fab:hover { background: var(--gold); }
  .burger:hover .menu-lines span:nth-child(3) { width: 19px; }
}

/* Landscape-Handy (kurze Höhe): die große Hero-Headline darf nicht dominieren */
@media (orientation: landscape) and (max-height: 480px) {
  .hero__headline { font-size: clamp(1.5rem, 5.5vh, 2.4rem); }
  .hero__theme { margin-bottom: .5rem; }
  .hero__headline br { display: none; }
  .hero__vdp img { height: 26px; }
  .hero__seit { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js .hero__headline, .js .hero__vdp, .js .hero__seit { opacity: 1; transform: none; transition: opacity 300ms ease; }
  .js .ed-media img { transform: none; }
  /* Hero-Film einfrieren: nur s1 sichtbar, kein Ken-Burns/Crossfade — Grade-Filter bleibt (Kontrast) */
  .hero__slide { animation: none !important; transform: none !important; }
  .hero__slide.s1 { opacity: 1; } .hero__slide.s2, .hero__slide.s3 { opacity: 0; }
  .hero__theme span { animation: none !important; opacity: 0; } .hero__theme .t1 { opacity: .9; }
  .hero__content { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ---------- Newsletter: vollflächiges helles Einladungs-Band (Sand) ---------- */
/* Newsletter als Bild-Band (setzt sich immer ab): Foto + Navy-Verlauf-Scrim (unten kräftiger, wo das Feld sitzt) */
.nl-section { position: relative; background: linear-gradient(rgba(24,35,52,.60), rgba(24,35,52,.84)), url("../img/sw/lagen-terroir.jpg") center / cover no-repeat; padding-block: var(--section); text-align: center; border-top: 1px solid var(--gold-hair); border-bottom: 1px solid var(--gold-hair); }
.nl-inner { max-width: 52rem; margin: 0 auto; padding-inline: var(--pad-x); }
.nl-kicker { color: var(--gold); margin-bottom: .85rem; }
.nl-title { color: var(--off-white); margin-bottom: .9rem; }
.nl-lead { font-family: var(--sans); font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--cream); max-width: 46ch; margin: 0 auto clamp(1.9rem, 3.4vw, 2.75rem); }
/* Living-Input auf dem dunklen Bild-Band: Ruhelinie/Placeholder/Werte hell — via .nl-live__form--on-dark */
.nl-section .nl-live__form { max-width: 520px; }

/* ---------- Living-Input (Löwe + Feld + Button als eine Zeile) ---------- */
.nl-live__form { position: relative; display: flex; align-items: center; gap: 0; max-width: 460px; margin: 0 auto; border-bottom: 2px solid var(--stone); transition: border-color .25s var(--ease-out); padding-bottom: 4px; }
.nl-live__form:focus-within { border-color: var(--navy); }
.nl-live__lion { width: 18px; height: auto; margin-right: .7rem; opacity: .8; flex: none; }
.nl-live__input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; font-family: var(--sans); font-size: 1.0625rem; color: var(--charcoal); padding: .5rem 0; outline: none; }
.nl-live__input::placeholder { color: #6b6155; }
.nl-live__error { position: absolute; top: calc(100% + 6px); left: 0; margin: 0; font-family: var(--sans); font-size: var(--fs-meta); color: #9B4722; }
.nl-live__form--on-dark .nl-live__error { color: #EBC0AC; }
.nl-live__error[hidden] { display: none; }
.nl-live__form:has(.nl-live__input[aria-invalid="true"]) { border-color: #C86B4A; }
.nl-live__btn { position: relative; flex: none; background: none; border: 0; color: var(--navy); font-family: var(--sans); font-weight: 500; font-size: var(--fs-meta); cursor: pointer; padding: .5rem .25rem; display: inline-flex; align-items: center; gap: .4rem; transition: color .2s var(--ease-out); }
.nl-live__btn::after { content: "\2192"; transition: transform .25s var(--ease-out); }
@media (hover: hover) {
  .nl-live__btn:hover { color: var(--navy-deep); }
  .nl-live__btn:hover::after { transform: translateX(4px); }
}
/* Erfolgs-Mikrointeraktion: Button-Label morpht zu Häkchen + „Angemeldet".
   Grid-Overlay statt absoluter Positionierung: der Button wird von Haus aus
   so breit wie der längere Text — kein Overflow, kein Sprung beim Umschalten. */
.nl-live__btn-stack { display: inline-grid; }
.nl-live__btn-label, .nl-live__check-wrap { grid-column: 1; grid-row: 1; display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; transition: opacity .28s var(--ease-out); }
.nl-live__check-wrap { opacity: 0; color: var(--navy); }
.nl-live__check { width: 16px; height: 16px; flex: none; }
.nl-live__form.is-success .nl-live__btn-label { opacity: 0; }
.nl-live__form.is-success .nl-live__check-wrap { opacity: 1; }
.nl-live__form.is-success { border-color: var(--gold); }
@media (prefers-reduced-motion: reduce) {
  .nl-live__btn-label, .nl-live__check-wrap { transition: none; }
}
/* Variante auf dunklem Panel — Farben invertiert, Gold als Aktiv-/Fokus-Ton */
.nl-live__form--on-dark { border-bottom-color: rgba(214,206,198,.4); }
.nl-live__form--on-dark:focus-within { border-color: var(--gold); }
.nl-live__form--on-dark .nl-live__lion { opacity: .95; }
.nl-live__form--on-dark .nl-live__input { color: var(--off-white); }
.nl-live__form--on-dark .nl-live__input::placeholder { color: rgba(214,206,198,.6); }
.nl-live__form--on-dark .nl-live__btn { color: var(--gold); }
.nl-live__form--on-dark .nl-live__check-wrap { color: var(--gold); }
@media (hover: hover) { .nl-live__form--on-dark .nl-live__btn:hover { color: var(--off-white); } }

/* ===========================================================
   UNTERSEITEN — geteilter Hero (Kapitel-Auftakt, unten-links) + Intro/These
   Wiederverwendbar: pro Seite nur Bild + Kicker + Titel + Lead tauschen.
   =========================================================== */
.subhero { position: relative; min-height: 100svh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; background: var(--navy-deep); isolation: isolate; }
.subhero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;
  filter: saturate(.86) contrast(1.03) brightness(.88); transform: scale(1.005); animation: subheroKB 9s var(--ease-out) both; z-index: 0; }
@keyframes subheroKB { from { transform: scale(1.005); } to { transform: scale(1.05); } }
.subhero__grade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 92% at 50% 48%, rgba(24,35,52,.72) 0%, rgba(24,35,52,.5) 44%, rgba(24,35,52,.28) 74%, rgba(24,35,52,.44) 100%); }
.subhero__content { position: relative; z-index: 2; width: 100%; max-width: 64rem; margin: 0 auto; padding: clamp(5.5rem,10vh,7rem) var(--pad-x) 0; }
.subhero__kicker { color: var(--gold); margin: 0 0 1rem; text-shadow: 0 1px 12px rgba(24,35,52,.6); }
.subhero__title { font-family: var(--serif); font-weight: 500; color: var(--cream); font-size: var(--fs-display);
  line-height: var(--lh-display); letter-spacing: var(--ls-display); text-wrap: balance; margin: 0;
  text-shadow: 0 1px 30px rgba(24,35,52,.55), 0 1px 3px rgba(24,35,52,.7); }
.subhero__lead { font-family: var(--sans); font-size: var(--fs-body); line-height: var(--lh-body); color: rgba(224,216,208,.92);
  max-width: 54ch; margin: 1.3rem auto 0; text-shadow: 0 1px 12px rgba(24,35,52,.7); }
@media (prefers-reduced-motion: reduce) { .subhero__img { animation: none; transform: none; } }

/* ---- Kapitel-Teaser: Fullscreen-Auftakt je Abschnitt (Vision, Forschung) ---- */
.chapter { position: relative; min-height: 100svh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; background: var(--navy-deep); isolation: isolate; scroll-margin-top: 0; }
.chapter__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;
  filter: saturate(.86) contrast(1.03) brightness(.82); z-index: 0; animation: chapterKB 18s var(--ease-in-out) infinite alternate; }
@keyframes chapterKB { from { transform: scale(1.02); } to { transform: scale(1.09); } }
.chapter__grade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 95% at 50% 48%, rgba(24,35,52,.74) 0%, rgba(24,35,52,.54) 46%, rgba(24,35,52,.34) 76%, rgba(24,35,52,.5) 100%); }
@media (prefers-reduced-motion: reduce) { .chapter__img { animation: none; } }
/* Slider-Variante: mehrere Bilder cross-faden (Forschung) */
/* Slider: JS-gesteuertes Crossfade (.is-active) + Pager (Dots/Pfeile) zum Durchblättern */
.chapter--slider .chapter__img { opacity: 0; animation: none; transition: opacity .8s var(--ease-out); }
.chapter--slider .chapter__img.is-active { opacity: 1; }
/* wechselndes Bereichs-Label pro Slide (macht das Blättern inhaltlich) */
/* wechselndes Slide-Wort (Bereich/Wert) als großes Serifen-Wort — Haupttext des Sliders (Intro liegt darüber) */
.chapter__pager { display: inline-flex; align-items: center; gap: clamp(1rem,2vw,1.6rem); margin-top: clamp(.7rem,1.4vh,1.1rem); }
/* im Bildslider: Navigation an den unteren Bildrand, über der Chapternav — getrennt vom zentrierten Lesetext */
.chapter--slider .chapter__pager { position: absolute; left: 50%; bottom: clamp(52px,7vh,84px); transform: translateX(-50%); margin: 0; z-index: 4; }
.chapter__dots { display: inline-flex; gap: .15rem; }
.chapter__dot { width: 34px; height: 34px; border: 0; padding: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.chapter__dot::before { content: ""; width: 9px; height: 9px; border-radius: 99px; background: rgba(224,216,208,.4); transition: width .4s var(--ease-out), background .3s var(--ease-out); }
.chapter__dot.is-on::before { width: 26px; background: var(--gold); }
.chapter__dot:focus-visible { outline: 2px solid var(--off-white); outline-offset: 2px; border-radius: 50%; }
.chapter__arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(224,206,198,.45); background: rgba(24,35,52,.55); color: var(--cream); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s var(--ease-out), color .2s, border-color .2s, transform .12s var(--ease-out); }
.chapter__arrow svg { width: 18px; height: 18px; }
.chapter__arrow:active { transform: scale(.92); }
.chapter__arrow:focus-visible { outline: 2px solid var(--off-white); outline-offset: 2px; }
@media (hover:hover){ .chapter__arrow:hover { background: var(--gold); color: var(--navy-deep); border-color: var(--gold); } }
/* Auto-Advance Pause/Play (WCAG 2.2.2) — Button erbt .chapter__arrow; Icon folgt aria-pressed */
.chapter__playpause .chapter__pp-pause, .chapter__playpause .chapter__pp-play { display: inline-flex; align-items: center; justify-content: center; }
.chapter__playpause .chapter__pp-play { display: none; }
.chapter__playpause[aria-pressed="true"] .chapter__pp-pause { display: none; }
.chapter__playpause[aria-pressed="true"] .chapter__pp-play { display: inline-flex; }
@media (prefers-reduced-motion: reduce) { .chapter--slider .chapter__img { transition: none; } }

/* ---- Vision · Unsere Werte: Reihen (Zickzack Bild/Text, Scroll-Reveal) · helle Sektion ---- */
.sw-sec--werte .sw-head { max-width: 1200px; }
.wrows { max-width: 1200px; margin-inline: auto; }
.wrow { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,5rem); align-items: center; padding-block: clamp(2.4rem,6vh,5rem); }
.wrow:first-child { padding-top: clamp(.5rem,1.5vh,1.4rem); }
.wrow__media { position: relative; overflow: hidden; aspect-ratio: 3/2; box-shadow: 0 30px 60px rgba(24,35,52,.14); }
.wrow__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wrow__body { min-width: 0; }
.wrow:nth-child(even) .wrow__media { order: 2; }   /* Zickzack: gerade Reihen Bild rechts */
.wrow__index { display: flex; align-items: center; gap: .8rem; margin: 0 0 1.1rem; }
.wrow__num { font-family: var(--sans); font-weight: 700; font-size: var(--fs-kicker); letter-spacing: var(--ls-kicker); color: var(--navy); }
.wrow__line { display: inline-block; width: 34px; height: 1px; background: rgba(42,61,88,.35); }
.wrow__name { font-family: var(--serif); font-weight: 500; font-size: clamp(2.4rem, 4vw, 3.6rem); line-height: var(--lh-tight); letter-spacing: var(--ls-display); color: var(--navy); margin: 0 0 1.1rem; }
.wrow__text { font-family: var(--sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-soft); margin: 0; max-width: 46ch; }
/* Delight: Bild fährt beim Reinscrollen von scale(1.06) auf 1 (Text-Reveal via .reveal) */
.js .wrow__img { transform: scale(1.06); transition: transform 1s var(--ease-out); }
.wrow.in-view .wrow__img { transform: scale(1); }
@media (max-width: 760px){
  .wrow { grid-template-columns: 1fr; gap: clamp(1.1rem,4vw,1.7rem); padding-block: clamp(2rem,7vw,3rem); }
  .wrow:nth-child(even) .wrow__media { order: 0; }   /* mobil: Bild immer oben */
  .wrow__media { aspect-ratio: 3/2; }
}
@media (prefers-reduced-motion: reduce){ .js .wrow__img { transform: none; transition: none; } }


/* ---- Kapitel-Sektionen (generisch) ---- */
.sw-sec { padding: var(--section) var(--pad-x); scroll-margin-top: clamp(72px,11vh,104px); }
/* Desktop: symmetrischer Rand ≥ Schienenbreite (klärt Schiene links + Shop-Störer rechts), Inhalt bleibt zentriert */
@media (min-width: 769px) {
  .sw-sec { padding-inline: clamp(132px, 10vw, 164px); }
}
.sw-sec--sand { background: var(--sand); }
.sw-sec--dark { background: var(--navy-deep); }
.sw-head { max-width: 62rem; margin: 0 auto clamp(2.2rem,4vw,3.2rem); }
.sw-head__kicker { color: var(--navy); margin-bottom: .7rem; }
.sw-sec--dark .sw-head__kicker { color: var(--gold); }
.sw-head__title { font-family: var(--serif); font-weight: 500; color: var(--navy); font-size: var(--fs-h2); line-height: var(--lh-tight); letter-spacing: var(--ls-heading); text-wrap: balance; margin: 0 0 .9rem; }
.sw-sec--dark .sw-head__title { color: var(--cream); }
.sw-head__lead { font-family: var(--sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-soft); max-width: 60ch; margin: 0; }
.sw-sec--dark .sw-head__lead { color: rgba(220,212,206,.86); }


/* ---- Kacheln (Forschung), Bild + Scrim ---- */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem,1.6vw,1.4rem); max-width: 78rem; margin: 0 auto; }
.tile { position: relative; overflow: hidden; min-height: clamp(340px,44vh,460px); display: flex; align-items: flex-end; text-decoration: none; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform .6s var(--ease-out); }
.tile__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(24,35,52,.9) 0%, rgba(24,35,52,.45) 45%, rgba(24,35,52,.12) 80%); }
.tile__body { position: relative; z-index: 2; padding: clamp(1.3rem,2vw,2rem); }
.tile__title { font-family: var(--serif); font-weight: 500; font-size: var(--fs-h3); letter-spacing: var(--ls-heading); color: var(--cream); line-height: 1.1; margin: 0 0 .5rem; }
.tile__text { font-family: var(--sans); font-size: var(--fs-meta); line-height: 1.55; color: rgba(220,212,206,.9); margin: 0; }
@media (hover: hover) { .tile:hover img { transform: scale(1.05); } }
@media (max-width: 820px) { .tiles { grid-template-columns: 1fr; } .tile { min-height: 300px; } }
@media (prefers-reduced-motion: reduce) { .tile:hover img { transform: none; } }

/* ---- Forschung · Register (ARIA-Tabs: nummerierter Index links, Detailfläche rechts) ---- */
.reg__grid { max-width: 78rem; margin-inline: auto; display: grid; grid-template-columns: minmax(0,32%) 1fr; gap: clamp(2rem,4vw,3.5rem); align-items: start; }
.reg__index { position: relative; display: flex; flex-direction: column; }
/* gleitender Gold-Indikator (ein Element, transform-only, ease-in-out) */
.reg__marker { position: absolute; left: 0; top: 0; width: 3px; height: 1.7rem; background: var(--gold); transform: translateY(0); transition: transform .28s var(--ease-in-out); will-change: transform; }
.reg__tab { position: relative; display: block; padding: clamp(1rem,2vw,1.45rem) .6rem clamp(1rem,2vw,1.45rem) 1.4rem; background: none; border: 0; border-bottom: 1px solid rgba(214,206,198,.26); text-align: left; cursor: pointer; transition: transform .16s var(--ease-out); }
.reg__tab:first-of-type { border-top: 1px solid rgba(214,206,198,.26); }
.reg__tab:active { transform: scale(.99); }
/* Ziffer im Werte-Stil (kleine getrackte Sans-Kicker-Ziffer) — auf Dunkel gold statt navy */
.reg__ord { font-family: var(--sans); font-weight: 700; font-size: var(--fs-kicker); letter-spacing: var(--ls-kicker); color: var(--gold); line-height: 1; }
.reg__name { font-family: var(--serif); font-weight: 500; font-size: var(--fs-h4); letter-spacing: var(--ls-heading); color: var(--sand); transition: color .25s var(--ease-out); }
.reg__tab.is-active .reg__name { color: var(--off-white); }
.reg__tab:focus-visible { outline: 2px solid var(--off-white); outline-offset: -2px; }
@media (hover: hover) { .reg__tab:hover .reg__name { color: var(--off-white); } }
.reg__figure { position: relative; margin: 0; aspect-ratio: 16/10; overflow: hidden; }
.reg__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(0 0 0 100%); transition: clip-path .36s var(--ease-out); z-index: 0; }
.reg__img.is-active { clip-path: inset(0 0 0 0); z-index: 1; }
.reg__textwrap { position: relative; padding-top: clamp(1.2rem,2.5vw,1.8rem); min-height: 8.5rem; }
.reg__text { display: none; }
.reg__text.is-active { display: block; animation: regTextIn .26s var(--ease-out) both; }
@keyframes regTextIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.reg__title { font-family: var(--serif); font-weight: 500; font-size: var(--fs-lead); color: var(--off-white); margin: 0 0 .6rem; letter-spacing: var(--ls-heading); line-height: var(--lh-tight); }
.reg__body { font-family: var(--sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--cream); margin: 0; max-width: 54ch; }
@media (max-width: 820px) {
  .reg__grid { grid-template-columns: 1fr; gap: 1.4rem; }
  .reg__marker { display: none; }
  .reg__index { flex-direction: row; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: .5rem; }
  .reg__tab { flex: 0 0 auto; border: 1px solid rgba(214,206,198,.26); padding: .7rem 1rem; }
  .reg__tab.is-active { border-color: var(--gold); }
}
@media (prefers-reduced-motion: reduce) {
  .reg__img { transition: none; }
  .reg__marker { transition: none; }
  .reg__text.is-active { animation: none; }
  .reg__tab { transition: none; }
}

/* ---- Historie: Kino-Zeitstrahl (gepinnt, 7 Stationen, Jahres-Scrubber unten) ---- */
.hkino { position: relative; height: 100svh; overflow: hidden; background: var(--navy-deep); scroll-margin-top: 0; }
.hkino__stage { position: absolute; inset: 0; touch-action: pan-y; }
.hkino__panel { position: absolute; inset: 0; display: flex; align-items: flex-end; opacity: 0; visibility: hidden; transition: opacity .6s var(--ease-out), visibility .6s; }
.hkino__panel.is-active { opacity: 1; visibility: visible; }
.hkino__photo { position: absolute; inset: 0; background: var(--navy-deep) center/cover no-repeat; filter: brightness(.58) saturate(.82); }
.hkino__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(24,35,52,.97) 3%, rgba(24,35,52,.52) 40%, rgba(24,35,52,.2) 70%, rgba(24,35,52,.55) 100%); }
.hkino__panel--solo { background: radial-gradient(120% 100% at 50% 40%, #22314a 0%, var(--navy-deep) 70%); }
.hkino__year { position: absolute; z-index: 1; left: clamp(1rem,4vw,4rem); top: clamp(3vh,7vh,8vh); font-family: var(--serif); font-weight: 500; font-size: clamp(6rem,22vw,20rem); line-height: .8; letter-spacing: -.03em; color: var(--gold); opacity: .9; text-shadow: 0 2px 34px rgba(24,35,52,.5); pointer-events: none; }
.hkino__year--solo { left: 0; right: 0; top: 50%; transform: translateY(-56%); text-align: center; font-size: clamp(7rem,30vw,26rem); }
.hkino__emblemwrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.hkino__emblemcard { background: #f7f4ef; padding: clamp(22px,3vw,38px) clamp(28px,3.6vw,46px); box-shadow: 0 34px 80px rgba(0,0,0,.55); }
.hkino__emblem { width: min(44vw,300px); aspect-ratio: 112.976/51.9847; background: center/contain no-repeat; }
.hkino__content { position: relative; z-index: 3; max-width: 62ch; box-sizing: border-box; padding: clamp(1.6rem,5vw,5rem); padding-bottom: clamp(5rem,13vh,7.5rem); transform: translateY(16px); opacity: .35; transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.hkino__panel.is-active .hkino__content { transform: none; opacity: 1; }
.hkino__kicker { font-family: var(--sans); font-weight: 700; font-size: var(--fs-kicker); letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--gold); margin: 0 0 .9rem; }
.hkino__title { font-family: var(--serif); font-weight: 500; font-size: clamp(1.9rem,3.6vw,3.2rem); line-height: var(--lh-tight); letter-spacing: var(--ls-display); color: #F3EFE9; margin: 0 0 .8rem; text-wrap: balance; max-width: 20ch; }
.hkino__text { font-family: var(--sans); font-size: var(--fs-body); line-height: 1.68; color: rgba(224,216,208,.9); margin: 0; max-width: 54ch; text-wrap: pretty; }
/* Jahres-Scrubber unten (frei von Kapitel-Schiene links & Shop-Störer rechts) */
.hkino__scrubber { position: absolute; left: 50%; transform: translateX(-50%); bottom: clamp(16px,3vh,28px); z-index: 20; width: min(92%, 720px); display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.hkino__navrow { display: flex; align-items: center; justify-content: center; gap: clamp(.6rem,1.8vw,1.3rem); width: 100%; }
.hkino__arrow { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(224,206,198,.45); background: rgba(24,35,52,.55); color: var(--cream); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s var(--ease-out), color .2s, border-color .2s, opacity .2s, transform .12s var(--ease-out); }
.hkino__arrow svg { width: 18px; height: 18px; }
.hkino__arrow:active:not([disabled]) { transform: scale(.92); }
.hkino__arrow[disabled] { opacity: .28; cursor: default; }
.hkino__arrow:focus-visible { outline: 2px solid var(--off-white); outline-offset: 2px; }
@media (hover:hover){ .hkino__arrow:not([disabled]):hover { background: var(--gold); color: var(--navy-deep); border-color: var(--gold); } }
.hkino__years { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(.5rem,2vw,1.5rem); flex: 1 1 auto; }
.hkino__yr { background: none; border: 0; cursor: pointer; font-family: var(--sans); font-weight: 500; font-size: var(--fs-fine); letter-spacing: .06em; color: rgba(224,216,208,.72); padding: .35rem .15rem; transition: color .3s var(--ease-out); }
.hkino__yr.is-on { color: var(--off-white); font-weight: 700; }
@media (hover:hover){ .hkino__yr:not(.is-on):hover { color: var(--cream); } }
.hkino__yr:focus-visible { outline: 2px solid var(--off-white); outline-offset: 2px; border-radius: 3px; }
.hkino__track { position: relative; width: 100%; height: 2px; background: rgba(220,212,206,.18); border-radius: 2px; }
.hkino__fill { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: var(--gold); border-radius: 2px; transition: width .18s linear; }
.hkino__fill::after { content: ""; position: absolute; right: -3px; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); transform: translateY(-50%); box-shadow: 0 0 0 3px rgba(24,35,52,.5); }
@media (max-width: 900px){
  .hkino__year { top: clamp(4vh,8vh,9vh); font-size: clamp(4.4rem,20vw,10rem); }
  .hkino__content { padding-bottom: clamp(6rem,15vh,8.5rem); }
  .hkino__text { font-size: var(--fs-meta); }
}
/* Mobil: Shop-FAB unten rechts → Scrubber darüber heben; Kino-Text an der Kapitel-Schiene vorbei */
@media (max-width: 768px){
  .hkino__scrubber { bottom: clamp(80px,11vh,100px); width: min(94%,560px); gap: .55rem; }
  .hkino__years { gap: clamp(.45rem,2.2vw,1rem); }
  .hkino__yr { font-size: var(--fs-kicker); padding: .3rem .1rem; }
  .hkino__content { padding-left: 64px; padding-bottom: clamp(9rem,21vh,12rem); }
}
@media (prefers-reduced-motion: reduce){
  .hkino__panel, .hkino__content, .hkino__fill { transition-duration: .01ms; }
}

/* ---- CTA-Band ---- */
.cta-band { background: var(--navy-deep); text-align: center; padding: var(--section) var(--pad-x); }
.cta-band__title { font-family: var(--serif); font-weight: 500; font-size: var(--fs-h2); line-height: var(--lh-tight); letter-spacing: var(--ls-heading); color: var(--cream); text-wrap: balance; margin: 0 auto .9rem; max-width: 24ch; }
.cta-band__text { font-family: var(--sans); font-size: var(--fs-body); line-height: var(--lh-body); color: rgba(220,212,206,.82); max-width: 46ch; margin: 0 auto clamp(1.8rem,3vw,2.4rem); }

/* ---- Mitlaufende Kapitel-Leiste (unten, Scroll-Spy + Fortschritt) ---- */
/* Vertikale Kapitel-Spur an der linken Kante: minimale Dots (Morph zur Gold-Pille) +
   mitlaufender Fortschritt in einer schlanken dunklen Schiene (legibel auf Hell wie Dunkel).
   Standard-Muster für alle Unterseiten mit Kapitel-Ankerlinks. */
/* An der linken Kante angedockt — Gegenstück zum Shop-Störer rechts (spiegelbildlich abgerundet) */
.chapternav { position: fixed; left: 0; top: 50%; z-index: 60;
  display: flex; flex-direction: column; align-items: center; gap: clamp(.85rem,2.2vh,1.4rem); padding: 18px 10px;
  background: rgba(24,35,52,.92); border: 1px solid rgba(220,212,206,.1); border-left: 0;
  border-radius: 0 14px 14px 0; box-shadow: 6px 0 22px rgba(24,35,52,.28);
  opacity: 0; visibility: hidden; transform: translateY(-50%) translateX(-100%);
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out), visibility .45s; }
.chapternav.is-visible { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); }
/* Spur exakt zwischen erstem u. letztem Dot-Zentrum: 20px Padding + 15px (halbe Item-Höhe 30px) */
.chapternav__track { position: absolute; left: 50%; transform: translateX(-50%); top: 33px; bottom: 33px; width: 2px; background: rgba(220,212,206,.22); border-radius: 2px; }
.chapternav__fill { position: absolute; inset: 0 auto auto 0; width: 100%; height: 100%; transform-origin: top; transform: scaleY(0); background: var(--gold); border-radius: 2px; transition: transform .35s var(--ease-out); }
.chapternav__item { position: relative; z-index: 1; }
.chapternav__item a { position: relative; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; text-decoration: none; }
.chapternav__dot { width: 8px; height: 8px; border-radius: 99px; background: rgba(214,206,198,.6);
  box-shadow: 0 0 0 4px rgba(24,35,52,.82); transition: background .4s var(--ease-out), height .4s var(--ease-out); }
@media (hover: hover) { .chapternav__item a:hover .chapternav__dot { background: rgba(250,247,242,.9); } }
.chapternav__item.is-active .chapternav__dot { background: var(--gold); height: 22px; }
.chapternav__label { position: absolute; left: calc(100% + 16px); top: 50%; transform: translate(-8px,-50%);
  background: var(--navy-deep); color: var(--cream); font-family: var(--sans); font-weight: 500; font-size: var(--fs-fine);
  padding: .32rem .7rem; border-radius: 7px; white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .3s var(--ease-out), transform .3s var(--ease-out); box-shadow: 0 6px 18px rgba(24,35,52,.35); }
.chapternav__label::before { content: ""; position: absolute; right: 100%; top: 50%; transform: translateY(-50%); border: 5px solid transparent; border-right-color: var(--navy-deep); }
.chapternav__item a:hover .chapternav__label,
.chapternav__item a:focus-visible .chapternav__label,
.chapternav__item.is-active .chapternav__label { opacity: 1; transform: translate(0,-50%); }
.chapternav a:focus-visible { outline: 2px solid var(--off-white); outline-offset: 3px; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) {
  .chapternav { transition: opacity .25s, visibility .25s; }
  .chapternav__fill, .chapternav__dot, .chapternav__label { transition-duration: .01ms; }
  .tile img { transition: none; }
}

/* ---------- Footer: Marke, Adresse, Kontakt, Social ---------- */
.footer-logo-row { display: flex; justify-content: center; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
/* Verkauf-Spalte: kurze Einladung + Öffnungszeiten (Tag links, Zeit rechts, Zeit betont) */
.footer-note { font-family: var(--sans); font-size: var(--fs-fine); line-height: 1.6; color: var(--sand); margin: 0 0 1.1rem; max-width: 26ch; }
.footer-hours { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .55rem; }
.footer-hours li { display: flex; justify-content: space-between; gap: 1rem; max-width: 15rem; }
.footer-hours__day { color: var(--sand); }
.footer-hours__time { color: var(--cream); font-weight: 500; white-space: nowrap; }
/* Rechtliches als kleine Links in der Fußzeile */
.footer-legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer-legal__link { color: rgba(214,206,198,.7); text-decoration: none; transition: color .2s var(--ease-out); }
.footer-legal__link:focus-visible { outline: 2px solid var(--off-white); outline-offset: 2px; border-radius: 2px; }
@media (hover: hover) { .footer-legal__link:hover { color: var(--off-white); } }
.footer-brand { display: inline-flex; flex-direction: column; align-items: center; gap: 12px; text-decoration: none; }
.footer-lions { height: 56px; width: auto; }
.footer-word { height: 32px; width: auto; }
.footer-address { font-style: normal; font-family: var(--sans); font-size: var(--fs-meta); line-height: 1.6; color: var(--sand); margin-bottom: 1rem; }
.footer-address__note { color: rgba(214,206,198,.65); font-size: var(--fs-fine); }
.footer-contact { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1.4rem; }
.footer-contact a { font-family: var(--sans); font-size: var(--fs-meta); color: var(--sand); text-decoration: none; transition: color var(--d-state) var(--ease-out); width: fit-content; }
.footer-contact a:hover { color: var(--off-white); }
.footer-social { display: flex; gap: .35rem; margin-left: -10px; }
.footer-social a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--sand); transition: color var(--d-state) var(--ease-out), transform .15s var(--ease-out); }
.footer-social svg { width: 22px; height: 22px; }
.footer-social a:active { transform: scale(.9); }
@media (hover: hover) { .footer-social a:hover { color: var(--gold); } }
.footer-social a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }

/* ---- Mobil: Kapitel-Schiene nur Dots (Label-Chip aus) + Grid-Sektionen von der Schiene wegrücken ---- */
/* Schiene endet bei ~51px → 58px Links-Clearance; rechts gespiegelt für symmetrische Ränder */
@media (max-width: 768px) {
  .chapternav__item.is-active .chapternav__label { opacity: 0; }
  .sw-sec { padding-left: 58px; padding-right: 58px; }
}

/* ============================================================
   UNSERE HERKUNFT — seitenspezifische Komponenten
   ============================================================ */
/* Kapitel-Abstand: auch helles Statement + helle sw-sec zusammenlegen (analog dunkel) */
.statement--beige + .sw-sec--sand { padding-top: 0; }
.statement--beige:has(+ .sw-sec--sand) { padding-bottom: var(--section); }
.statement--beige:has(+ .sw-sec--sand) .statement__lead:last-child,
.statement--beige:has(+ .sw-sec--sand) .statement__body:last-child { margin-bottom: 0; }

/* ---- Philosophie · Credo (4 Leitsätze, dunkel) ---- */
.credo .sw-head { text-align: center; }
.credo .kicker { color: var(--navy); }
.credo__grid { list-style: none; margin: clamp(1.6rem,3vw,2.6rem) auto 0; padding: 0; max-width: 62rem; display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: rgba(42,61,88,.16); border: 1px solid rgba(42,61,88,.16); }
.credo__item { background: var(--sand); display: flex; align-items: baseline; gap: 1rem; padding: clamp(1.6rem,3vw,2.4rem); }
.credo__num { font-family: var(--sans); font-weight: 700; font-size: var(--fs-kicker); letter-spacing: var(--ls-kicker); color: var(--navy); flex: none; }
.credo__name { font-family: var(--serif); font-weight: 500; font-size: var(--fs-h3); line-height: var(--lh-tight); letter-spacing: var(--ls-heading); color: var(--navy); margin: 0; }
@media (max-width: 640px) { .credo__grid { grid-template-columns: 1fr; } }

/* ---- Lagen: heller Register (auf Sand navy statt gold) ---- */
.reg--light .reg__tab { border-color: rgba(42,61,88,.18); }
.reg--light .reg__tab:first-of-type { border-top-color: rgba(42,61,88,.18); }
.reg--light .reg__marker { background: var(--navy); }
.reg--light .reg__ord { color: var(--navy); }
.reg--light .reg__name { color: var(--ink-soft); }
.reg--light .reg__tab.is-active .reg__name { color: var(--navy); }
.reg--light .reg__tab:focus-visible { outline-color: var(--navy); }
@media (hover: hover) { .reg--light .reg__tab:hover .reg__name { color: var(--navy); } }
.reg--light .reg__title { color: var(--navy); }
.reg--light .reg__body { color: var(--ink-soft); }
.reg--light .reg__textwrap { min-height: 0; }

/* Lagen-Karten-Platzhalter (echte interaktive Karte folgt) */
.lagenmap { position: relative; max-width: 58rem; margin: 0 auto clamp(2.2rem,4vw,3rem); height: clamp(190px,26vh,264px); overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem; text-align: center; border: 1px solid rgba(190,161,107,.35); }
.lagenmap__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.42) saturate(.7); }
.lagenmap__scrim { position: absolute; inset: 0; background: rgba(24,35,52,.45); }
.lagenmap__pin { position: relative; width: 26px; height: 26px; color: var(--gold); }
.lagenmap__note { position: relative; margin: 0; font-family: var(--sans); font-weight: 700; font-size: var(--fs-kicker); letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--off-white); }
.lagenmap__sub { position: relative; margin: 0; font-family: var(--sans); font-size: var(--fs-fine); color: rgba(220,212,206,.7); }

/* Lagen-Detail: VDP-Klasse, Fakten (Punkt-Liste), Stilistik */
.lage__class { font-family: var(--sans); font-weight: 700; font-size: var(--fs-kicker); letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--gold); margin: 0 0 .55rem; }
.lage__facts { list-style: none; margin: clamp(1.1rem,2vw,1.5rem) 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .5rem 1.4rem; }
.lage__facts li { display: flex; align-items: flex-start; gap: .55rem; font-family: var(--sans); font-size: var(--fs-meta); color: rgba(220,212,206,.82); }
.lage__ico { flex: none; width: 19px; height: 19px; margin-top: .12em; color: var(--gold); stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lage__stil { font-family: var(--sans); font-size: var(--fs-body); line-height: var(--lh-body); color: rgba(220,212,206,.82); margin: 0; max-width: 54ch; }
.lage__stil-label { display: block; font-weight: 700; font-size: var(--fs-kicker); letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--gold); margin-bottom: .35rem; }

/* ---- Die Weine: VDP-Pyramide + Nebenkategorien (dunkel) ---- */
.weine__grid { max-width: 74rem; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(2.5rem,5vw,5rem); align-items: center; }
.pyramid__cap { font-family: var(--sans); font-weight: 700; font-size: .72rem; letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--navy); text-align: center; margin: 0 0 1rem; }
/* VDP-Pyramide: durchgehende Dreiecksfläche aus Trapez-Bändern (clip-path), Namen IM Band; Gold-Spitze = H.A.D.E.S mit Krone darüber */
.pyramid { max-width: 560px; margin: 0 auto; }
.pyr { margin: clamp(.7rem,1.5vw,1.2rem) auto 0; }
.pyr__crown { text-align: center; margin: 0 0 .25rem; }
.pyr__crown-name { display: block; font-family: var(--sans); font-weight: 700; text-transform: uppercase; letter-spacing: .16em; font-size: clamp(1rem,1.5vw,1.28rem); color: var(--navy); line-height: 1.1; }
.pyr__crown-sub { display: block; font-family: var(--sans); font-weight: 700; font-size: .68rem; letter-spacing: var(--ls-kicker); text-transform: uppercase; color: rgba(42,61,88,.6); margin-top: .35rem; }
.pyr__bands { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; -webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.pyr__band { display: flex; align-items: center; justify-content: center; transition: filter .25s var(--ease-out); }
.pyr__name { font-family: var(--sans); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: clamp(.7rem,1vw,.9rem); color: var(--off-white); padding: 0; text-align: center; text-wrap: balance; line-height: 1.35; }
.pyr__band--tip { min-height: clamp(60px,7.2vh,84px); background: linear-gradient(90deg, #d0b57e 0 50%, #a98c54 50% 100%); }
.pyr__band--gg { min-height: clamp(92px,11.5vh,118px); background: linear-gradient(90deg, #243652 0 50%, #131d31 50% 100%); }
.pyr__band--el { min-height: clamp(92px,11.5vh,118px); background: linear-gradient(90deg, #304461 0 50%, #1d2b42 50% 100%); }
.pyr__band--ow { min-height: clamp(92px,11.5vh,118px); background: linear-gradient(90deg, #3d5170 0 50%, #29374d 50% 100%); }
.pyr__band--gw { min-height: clamp(92px,11.5vh,118px); background: linear-gradient(90deg, #4f6178 0 50%, #384658 50% 100%); }
.pyr__band--gg .pyr__name { max-width: 26%; }
.pyr__band--el .pyr__name { max-width: 44%; }
.pyr__band--ow .pyr__name { max-width: 64%; }
.pyr__band--gw .pyr__name { max-width: 82%; }
@media (hover: hover) { .pyr__band:not(.pyr__band--tip):hover { filter: brightness(1.12); } }
.weine__extra { max-width: 60rem; margin: clamp(2.8rem,5vw,4.4rem) auto 0; text-align: center; }
.weine__extra-label { color: var(--navy); margin: 0 0 1.15rem; display: block; }
.wine-cats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .5rem clamp(1.3rem,2.6vw,2.2rem); }
.wine-cats li { font-family: var(--serif); font-weight: 500; font-size: var(--fs-h4); letter-spacing: var(--ls-heading); color: var(--navy); }
.wine-cats li:last-child { border-bottom: 0; }
.weine__teaser { max-width: 52rem; margin: clamp(2.8rem,5vw,4.4rem) auto 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.3rem; border-top: 1px solid rgba(42,61,88,.2); padding-top: clamp(2rem,3.5vw,2.8rem); }
.weine__teaser-text { font-family: var(--serif); font-weight: 500; font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: var(--ls-heading); color: var(--navy); margin: 0; max-width: 36ch; }
@media (max-width: 620px) { .pyramid { max-width: 100%; } .pyr__name { font-size: clamp(.58rem,2.3vw,.74rem); } }


/* Overdrive „Firnis": beim Reveal zieht einmal ein warmer Lichtstreif zur Gold-Spitze hinauf */
.fx-firnis .pyr__band { position: relative; }
.fx-firnis .pyr__band--tip::after,
.fx-firnis .pyr__band--gg::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 40%, rgba(255,248,235,.42) 50%, transparent 60%); mix-blend-mode: screen; transform: translateX(-150%) skewX(-16deg); opacity: 0; }
.fx-firnis.in-view .pyr__band--gg::after { animation: pyrFirnis 1.25s var(--ease-out) .18s forwards; }
.fx-firnis.in-view .pyr__band--tip::after { animation: pyrFirnis 1.25s var(--ease-out) .32s forwards; }
@keyframes pyrFirnis { 0% { transform: translateX(-150%) skewX(-16deg); opacity: 0; } 15% { opacity: 1; } 70% { transform: translateX(60%) skewX(-16deg); opacity: 1; } 100% { transform: translateX(130%) skewX(-16deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fx-firnis .pyr__band::after { animation: none !important; opacity: 0; } }

/* ============================================================
   WEINSBERG ERLEBEN — seitenspezifische Komponenten
   ============================================================ */
/* ---- Das Team: Portrait-Grid (Platzhalter-Monogramme, hell) ---- */
/* Gruppenbild-Platzhalter (Team-Intro) — konsistent mit den Portrait-Kacheln (Navy-Slot, Gold-Marke) */
.team__group { max-width: 80rem; margin: 0 auto clamp(1.8rem,3.5vw,2.8rem); aspect-ratio: 20 / 7; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; background: linear-gradient(150deg, var(--navy) 0%, var(--navy-deep) 100%); border: 1px solid var(--gold-hair); }
.team__group-ico { width: clamp(46px,5vw,64px); height: auto; color: var(--gold); stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.team__group-note { font-family: var(--sans); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-kicker); font-size: var(--fs-kicker); color: var(--gold); margin: 0; }
.team__grid { list-style: none; margin: 0 auto; padding: 0; max-width: 80rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap: clamp(1.4rem,2.6vw,2.4rem); }
.team__member { display: flex; flex-direction: column; }
.team__photo { position: relative; aspect-ratio: 4/5; overflow: hidden; display: flex; align-items: center; justify-content: center; background: linear-gradient(150deg, var(--navy) 0%, var(--navy-deep) 100%); border: 1px solid var(--gold-hair); transition: border-color .3s var(--ease-out); }
.team__photo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 18%, var(--gold-glow), transparent 55%); pointer-events: none; z-index: 2; }
.team__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; z-index: 1; }
.team__mono { position: relative; font-family: var(--serif); font-weight: 500; font-size: clamp(2.4rem,4.4vw,3.4rem); color: var(--gold-mono); letter-spacing: var(--ls-display); transition: color .3s var(--ease-out); }
.team__name { font-family: var(--serif); font-weight: 500; font-size: var(--fs-h4); letter-spacing: var(--ls-heading); color: var(--navy); margin: .95rem 0 0; line-height: 1.25; }
.team__role { font-family: var(--sans); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-kicker); font-size: var(--fs-kicker); color: var(--ink-soft); margin: .5rem 0 0; }
.team__quote { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: var(--fs-meta); line-height: 1.45; letter-spacing: var(--ls-heading); color: var(--ink-soft); margin: .55rem 0 0; max-width: 30ch; }
@media (hover: hover) { .team__member:hover .team__photo { border-color: var(--gold); } .team__member:hover .team__mono { color: var(--gold); } }
/* Desktop: 12 Mitglieder sauber in 3 volle Reihen (kein toter Rechtsrand aus 5+5+2) */
@media (min-width: 1000px) { .team__grid { grid-template-columns: repeat(4, 1fr); } }
/* Mobil: kompaktes Namensregister statt Held-Wand — 2 Spalten, quadratisch */
@media (max-width: 620px) { .team__grid { grid-template-columns: repeat(2, 1fr); gap: 1.1rem; } .team__photo { aspect-ratio: 1/1; } }

/* ---- Vinothek: Bild + Text + Öffnungszeiten als EIN Block (dunkel) ---- */
.vinothek__grid { max-width: 78rem; margin: 0 auto; display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2rem,4.5vw,4rem); align-items: stretch; }
.vinothek__media { margin: 0; overflow: hidden; min-height: clamp(19rem,28vw,26rem); }
.vinothek__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vinothek__text { display: flex; flex-direction: column; justify-content: center; }
.vinothek__text > .kicker { color: var(--gold); margin: 0; }
.vinothek__title { font-family: var(--serif); font-weight: 500; font-size: var(--fs-lead); line-height: var(--lh-snug); letter-spacing: var(--ls-heading); color: var(--off-white); margin: .6rem 0 0; text-wrap: balance; }
.vinothek__body { font-family: var(--sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--cream-strong); margin: clamp(1rem,1.8vw,1.4rem) 0 0; max-width: 44ch; }
.vinothek__hours { margin-top: clamp(1.7rem,2.8vw,2.3rem); padding-top: clamp(1.4rem,2.2vw,1.9rem); border-top: 1px solid var(--gold-line); }
.vinothek__hours-kicker { color: var(--gold); margin: 0 0 .9rem; }
.vinothek__hours-list { list-style: none; margin: 0; padding: 0; max-width: 26rem; }
.vinothek__hours-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--line-cream); font-family: var(--sans); color: var(--cream); }
.vinothek__hours-list li:last-child { border-bottom: 0; }
.vinothek__hours-list span { white-space: nowrap; }
.vinothek__hours-list span:first-child { color: var(--cream-mid); }

/* ---- Weinprobenangebote: 3 Karten (dunkel) ---- */
.angebote__head { max-width: 62rem; margin-inline: auto; text-align: center; }
.angebote__head .kicker { color: var(--gold); }
.angebote__lead { font-family: var(--serif); font-weight: 500; font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: var(--ls-heading); color: var(--off-white); margin: .7rem auto 0; max-width: 34ch; text-wrap: balance; }
.angebote__grid { max-width: 78rem; margin: clamp(2rem,3.8vw,3rem) auto 0; display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(2rem,3.5vw,3.4rem); align-items: start; }
.angebot { padding: clamp(1.4rem,2.2vw,1.8rem) 0 0; border-top: 1px solid var(--gold-rule); }
.angebot__title { font-family: var(--serif); font-weight: 500; font-size: var(--fs-h3); letter-spacing: var(--ls-heading); color: var(--off-white); margin: 0 0 .7rem; line-height: var(--lh-tight); }
.angebot__text { font-family: var(--sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--cream-strong); margin: 0 0 clamp(1rem,1.6vw,1.3rem); }
.angebot .link { margin-top: 0; }
@media (max-width: 860px) { .angebote__grid { grid-template-columns: 1fr; } }

/* ---- Veranstaltungskalender (hell) ---- */
.events { text-align: left; }
.events__list { list-style: none; margin: 0 auto; padding: 0; max-width: 60rem; }
.event { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(1.4rem,3vw,2.4rem); padding: clamp(1rem,1.9vw,1.5rem) 0; border-top: 1px solid var(--line-navy); }
.event:last-child { border-bottom: 1px solid var(--line-navy); }
/* Datums-Kachel: gefülltes Navy-Quadrat, weiße Ziffer + Gold-Monat (Gold auf Dunkel = erlaubt) */
.event__date { flex: none; width: clamp(4.6rem,7vw,5.4rem); height: clamp(4.6rem,7vw,5.4rem); display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--navy); }
.event__day { font-family: var(--sans); font-weight: 700; font-size: clamp(1.7rem,2.4vw,2rem); color: var(--off-white); line-height: 1; }
.event__mon { font-family: var(--sans); font-weight: 700; font-size: var(--fs-kicker); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-top: .3rem; }
.event__sub { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: var(--fs-body); letter-spacing: var(--ls-heading); color: var(--ink-soft); margin: .2rem 0 0; }
.event__title { font-family: var(--serif); font-weight: 500; font-size: var(--fs-h3); letter-spacing: var(--ls-heading); color: var(--navy); margin: 0; line-height: var(--lh-tight); }
.event__go { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--sans); font-size: var(--fs-fine); letter-spacing: .01em; color: var(--ink-soft); white-space: nowrap; text-decoration: none; }
a.event__go:hover { color: var(--navy); }
a.event__go:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 3px; }
.event__go i { font-style: normal; display: inline-block; transition: transform var(--d-state,.2s) var(--ease-out); }
.events__note { max-width: 60rem; margin: clamp(1.4rem,2.5vw,2rem) auto 0; font-family: var(--sans); font-size: var(--fs-fine); color: var(--ink-soft); }
.event { transition: background-color var(--d-state,.2s) var(--ease-out); }
@media (hover: hover) { .event:hover { background-color: var(--tint-navy); } .event:hover .event__go { color: var(--navy); } .event:hover .event__go i { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .event__go i { transition: none; } .event:hover .event__go i { transform: none; } }
@media (max-width: 620px) { .event { gap: 1.1rem; } .event__go { display: none; } }

/* ---- Kontaktanfrage + Kontakt (dunkel) ---- */
.anfrage__grid { max-width: 78rem; margin: 0 auto; display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(2rem,4vw,4rem); align-items: start; }
.anfrage__form { display: flex; flex-direction: column; gap: 1.1rem; }
.anfrage__title { font-family: var(--serif); font-weight: 500; font-size: var(--fs-h2); letter-spacing: var(--ls-heading); color: var(--off-white); margin: 0; line-height: var(--lh-tight); }
.anfrage__intro { font-family: var(--sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--cream-strong); margin: 0 0 .4rem; max-width: 46ch; }
.anfrage__field { display: flex; flex-direction: column; gap: .4rem; }
.anfrage__label { font-family: var(--sans); font-weight: 700; font-size: var(--fs-kicker); letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--cream-mid); }
.anfrage__input { font-family: var(--sans); font-size: var(--fs-meta); color: var(--off-white); background: var(--navy); border: 1px solid var(--line-cream); padding: .75rem .9rem; transition: border-color .2s var(--ease-out); }
.anfrage__input:focus-visible { outline: 2px solid var(--off-white); outline-offset: 2px; border-color: var(--gold); }
.anfrage__input[aria-invalid="true"] { border-color: var(--error); border-width: 2px; }
textarea.anfrage__input { resize: vertical; min-height: 100px; }
.anfrage__err { font-family: var(--sans); font-size: var(--fs-fine); color: color-mix(in srgb, var(--error) 62%, var(--off-white)); }
.anfrage__err[hidden] { display: none; }
.anfrage__submit { align-self: stretch; margin-top: .5rem; }
.anfrage__sent { visibility: hidden; opacity: 0; transform: translateY(6px); font-family: var(--sans); color: var(--gold); margin: .3rem 0 0; transition: opacity var(--d-state) var(--ease-out), transform var(--d-state) var(--ease-out), visibility 0s linear var(--d-state); }
.anfrage__form.is-sent .anfrage__sent { visibility: visible; opacity: 1; transform: none; transition: opacity var(--d-state) var(--ease-out), transform var(--d-state) var(--ease-out); }
.anfrage__form.is-sent .anfrage__submit { opacity: .5; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .anfrage__sent { transition: none; transform: none; } }
.anfrage__contact { font-style: normal; }
.anfrage__contact .kicker { color: var(--gold); }
.anfrage__kname { font-family: var(--serif); font-weight: 500; font-size: var(--fs-h4); letter-spacing: var(--ls-heading); color: var(--off-white); margin: .7rem 0 .9rem; }
.anfrage__adr, .anfrage__lines { font-family: var(--sans); font-size: var(--fs-meta); line-height: 1.75; color: var(--cream); margin: 0 0 1.1rem; }
.anfrage__hint { color: var(--cream-faint); font-size: var(--fs-fine); }
.anfrage__fax { color: var(--cream-mid); }
.anfrage__contact a { color: var(--cream); text-decoration: none; border-bottom: 1px solid var(--gold-rule); }
@media (hover: hover) { .anfrage__contact a:hover { color: var(--off-white); border-bottom-color: var(--gold); } }
@media (max-width: 820px) { .anfrage__grid { grid-template-columns: 1fr; } .vinothek__grid { grid-template-columns: 1fr; } }

/* ---- Kontaktseite: Anfahrt (Karte + Adresse/Öffnungszeiten, hell) ---- */
.kontakt__grid { max-width: 78rem; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem,4vw,3.5rem); align-items: stretch; }
.kontakt__map { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem; min-height: clamp(250px,32vw,360px); background: linear-gradient(150deg, var(--navy) 0%, var(--navy-deep) 100%); border: 1px solid var(--gold-hair); }
.kontakt__pin { width: clamp(34px,4vw,44px); height: auto; color: var(--gold); stroke: currentColor; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.kontakt__map-note { font-family: var(--sans); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-kicker); font-size: var(--fs-kicker); color: var(--gold); margin: 0; }
.kontakt__map-sub { font-family: var(--sans); font-size: var(--fs-fine); color: var(--cream-mid); margin: 0; }
.kontakt__info { display: flex; flex-direction: column; }
.kontakt__label { color: var(--navy); margin: 0 0 .7rem; }
.kontakt__label--sep { margin-top: clamp(1.8rem,3vw,2.4rem); }
.kontakt__addr { font-style: normal; font-family: var(--sans); font-size: var(--fs-body); line-height: 1.7; color: var(--ink-soft); margin: 0; }
.kontakt__hint { display: inline-block; font-size: var(--fs-fine); color: var(--ink-soft); }
.kontakt__route { margin: 1.1rem 0 0; }
.kontakt__hours { list-style: none; margin: .2rem 0 0; padding: 0; max-width: 24rem; }
.kontakt__hours li { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--line-navy); font-family: var(--sans); font-size: var(--fs-meta); color: var(--ink-soft); }
.kontakt__hours li:last-child { border-bottom: 0; }
.kontakt__hours span:first-child { color: var(--navy); }
@media (max-width: 820px) { .kontakt__grid { grid-template-columns: 1fr; } }

/* ============================================================
   Optischer Gewichtsausgleich Serif auf HELL (ganz am Ende → gewinnt per Quellreihenfolge)
   Cormorant (High-Contrast-Serif) wirkt dunkel-auf-hell dünner als hell-auf-dunkel.
   Kleine/mittlere Serif-Headlines auf Hell → 600 (roman). Dunkel + große Display-Leads bleiben 500.
   Kursiv NICHT (Cormorant-Italic ist nur bis 500 geladen → sonst Faux-Bold).
   ============================================================ */
.credo__name, .event__title, .weine__teaser-text,
.team__name, .wine-cats li, .winecard__lage, .reg--light .reg__name { font-weight: 600; }