/* ============================================================
   Page-specific styles
   ============================================================ */

/* ============ UTILITY-PATTERNS ============ */
/* Preis-Zeile mit Titel links, Wert rechts (Erlebnisse, Magazin) */
.row-priceline {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--md);
  padding: var(--md) 0;
  border-top: 1px solid var(--hairline);
  align-items: baseline;
}
.row-priceline:last-of-type { border-bottom: 1px solid var(--hairline); }
.row-priceline__title {
  font-family: var(--serif); font-style: italic;
  font-size: var(--body-edit); margin: 0;
}
.row-priceline__value {
  font-family: var(--serif); font-size: var(--body-edit);
  color: var(--ink); margin: 0; white-space: nowrap;
}
.row-priceline__sub {
  font-family: var(--sans); font-size: var(--micro);
  letter-spacing: 0.04em; color: var(--ink-muted);
  margin: 0; grid-column: 1 / -1;
}

/* Klickbare Variante: ganze Row wird zu Anfrage-CTA mit Hover-State.
   Behält die typografische Eleganz, wird aber zum bestimmenden Element. */
.row-priceline--link {
  text-decoration: none;
  color: inherit;
  grid-template-columns: 1fr auto auto;
  position: relative;
  transition: background var(--dur-base) var(--ease), padding var(--dur-base) var(--ease-expo);
}
.row-priceline--link:hover,
.row-priceline--link:focus-visible {
  background: rgb(19 84 19 / 0.04);
  padding-inline: var(--md);
}
.row-priceline--link:focus-visible {
  outline: 2px solid var(--wirsching-green-ui);
  outline-offset: -2px;
}
.row-priceline__action {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wirsching-green-ui);
  align-self: center;
  white-space: nowrap;
  transition: transform var(--dur-base) var(--ease-expo);
}
.row-priceline--link:hover .row-priceline__action {
  transform: translateX(4px);
}

/* Review-Blockquote (PDP) */
.review-quote {
  font-family: var(--serif); font-size: var(--body-edit);
  font-style: italic; line-height: 1.5;
  margin: 0 0 var(--lg); padding-left: var(--lg);
  border-left: 1px solid var(--hairline);
}
.review-quote:last-child { margin-bottom: 0; }
.review-quote__source {
  font-family: var(--sans); font-style: normal;
  font-size: var(--micro); color: var(--ink-muted);
  letter-spacing: 0.04em;
  display: block; margin-top: var(--sm);
}

/* Mikro-Eyebrow (für Inline-Headings) */
.eyebrow--inline {
  font-family: var(--sans); font-size: 13px;
  font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-muted);
  margin: 0 0 var(--sm);
}

/* Anfahrt-Block (Kontakt) */
.kontakt-anfahrt {
  margin-top: var(--xl);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--xl);
}
@media (max-width: 760px) { .kontakt-anfahrt { grid-template-columns: 1fr; gap: var(--lg); } }
.kontakt-anfahrt__body {
  font-family: var(--serif); font-size: var(--body);
  line-height: 1.55; margin: 0;
}
.kontakt-anfahrt__body em { font-style: italic; }

/* ============ SHOP ============ */
.shop-hero {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: end;
}
@media (max-width: 880px) { .shop-hero { grid-template-columns: 1fr; gap: var(--xl); } }
.shop-hero__text .display { margin-bottom: var(--lg); }
.shop-hero__facts {
  /* Editorial-Servicekarte: keine Rahmen-Hairlines außen, nur eine
     dezente interne Vertikal-Trennung. Der Container hält sich raus, der
     Inhalt spricht durch Spalten-Rhythmus. */
  padding: 0;
}
.shop-hero__facts dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 0;
}
.shop-hero__facts dl > div {
  display: flex; flex-direction: column;
  gap: 4px;
  padding: var(--md) 0;
}
/* Linke Spalte (Items 1, 3): pad rechts + Vertikal-Hairline.
   Rechte Spalte (Items 2, 4): pad links. Damit alle Items pro Spalte
   exakt auf derselben X-Achse beginnen. */
.shop-hero__facts dl > div:nth-child(odd) {
  padding-right: var(--md);
  border-right: 1px solid var(--hairline);
}
.shop-hero__facts dl > div:nth-child(even) {
  padding-left: var(--md);
}
@media (max-width: 540px) {
  .shop-hero__facts dl { grid-template-columns: 1fr; }
  .shop-hero__facts dl > div:nth-child(odd) { border-right: 0; }
  .shop-hero__facts dl > div + div { padding-left: 0; border-top: 1px solid var(--hairline); }
}
.shop-hero__facts dt {
  font-family: var(--sans); font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-muted); font-weight: 600;
}
.shop-hero__facts dd {
  font-family: var(--serif); font-size: var(--body-edit);
  margin: 0; line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.shop-hero__facts dd a.link-green {
  color: var(--wirsching-green-ui);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color var(--dur-base) var(--ease);
}
.shop-hero__facts dd a.link-green:hover { color: var(--wirsching-green); }

/* ============ HOME ============ */
.home-presse {
  background: var(--paper-deep);
}

/* === Marginale Sektions-Ordinalzahl ====================================
   Editorial-Print-Geste: kleine kursive Nummer am linken Rand jeder
   Hauptsektion auf der Startseite. Mit einem kurzen Hairline-Strich,
   damit sie sich verankert statt einsam zu schweben.
   Erscheint erst auf großen Viewports. */
.section[data-ordinal] {
  position: relative;
}
.section[data-ordinal]::before {
  content: "№ " attr(data-ordinal);
  position: absolute;
  top: clamp(64px, 10vw, 120px);
  left: clamp(24px, 3vw, 56px);
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--micro);
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  opacity: 0.55;
  pointer-events: none;
  display: none;
  /* kurzer Hairline-Strich darunter */
  padding-bottom: 10px;
  border-bottom: 1px solid currentColor;
  border-bottom-color: var(--hairline);
}
@media (min-width: 1180px) {
  .section[data-ordinal]::before { display: block; }
}
.section[data-ordinal].drenched::before {
  color: var(--paper-muted);
  opacity: 0.6;
  border-bottom-color: var(--hairline-paper);
}
.section[data-ordinal].bg-paper-deep::before {
  color: var(--ink-muted);
  opacity: 0.55;
  border-bottom-color: var(--hairline);
}
.section[data-ordinal].bg-paper-warm::before {
  color: var(--wirsching-green-ui);
  opacity: 0.55;
  border-bottom-color: rgb(19 84 19 / 0.18);
}

/* === Vinothek-Status: Atemzug-Dot ===================================== */
.vinothek-dot-wrap { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.vinothek-dot-wrap .dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--ink-muted);
  position: relative;
  flex: 0 0 auto;
  transition: background var(--dur-base) var(--ease);
}
.vinothek-dot-wrap.is-open .dot {
  background: var(--wirsching-gold-bright);
  box-shadow: 0 0 0 0 rgba(197, 172, 76, 0.55);
  animation: vinothek-breathe 2.4s var(--ease-expo) infinite;
}
.drenched .vinothek-dot-wrap .dot { background: var(--paper-muted); }
.drenched .vinothek-dot-wrap.is-open .dot { background: var(--wirsching-gold-bright); }
@keyframes vinothek-breathe {
  0%   { box-shadow: 0 0 0 0   rgba(197, 172, 76, 0.55); }
  60%  { box-shadow: 0 0 0 10px rgba(197, 172, 76, 0);  }
  100% { box-shadow: 0 0 0 0   rgba(197, 172, 76, 0);  }
}
@media (prefers-reduced-motion: reduce) {
  .vinothek-dot-wrap.is-open .dot { animation: none; }
}

/* === Cart-Count: kurzer Goldfunke beim Inkrement ====================== */
.icon-btn .count.is-bumped {
  animation: cart-bump 720ms var(--ease-expo);
}
@keyframes cart-bump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.55); background: var(--wirsching-gold-bright); color: var(--ink); }
  100% { transform: scale(1); }
}

/* === Cart-Fly-Clone ==================================================== */
.cart-fly-clone {
  position: fixed;
  top: 0; left: 0;
  width: 64px; height: 84px;
  pointer-events: none;
  z-index: 200;
  display: grid; place-items: center;
  background: var(--paper-overlay);
  border: 1px solid var(--hairline);
  box-shadow: 0 18px 40px -12px rgba(26, 26, 26, 0.28);
  will-change: transform, opacity;
}
.cart-fly-clone img {
  max-width: 80%; max-height: 88%;
  object-fit: contain;
}
@media (prefers-reduced-motion: reduce) {
  .cart-fly-clone { display: none; }
}

/* ============================================================
   LAGEN-ATLAS — Editorial Topo-Plate (Startseite)
   Vier Iphöfer Lagen als stilisierte Karte mit Höhenlinien
   und Editorial-Index. Hebt sich strukturell von den anderen
   Teasern ab; eigenständige Layout-Logik.
   ============================================================ */

/* ============ LAGEN-ATLAS — STARTSEITE ============
   Editorial-Tafel mit Karte mittig und Info-Karten links/rechts.
   Schwanberg im Osten, Iphofen mittig-links, vier Lagen-Polygone
   an realen Himmelsrichtungen. */
.lagen-atlas {
  background: var(--paper-warm);
  color: var(--ink);
  overflow: hidden;
}

.lagen-atlas__intro {
  max-width: 56ch;
  margin: 0 auto var(--3xl);
  text-align: center;
}
.lagen-atlas__intro .eyebrow {
  margin-bottom: var(--lg);
  color: var(--wirsching-green-ui);
}
.lagen-atlas__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--display);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0 0 var(--lg);
  text-wrap: balance;
}
.lagen-atlas__title em { font-style: italic; }
.lagen-atlas__sub {
  font-family: var(--serif);
  font-size: var(--body-edit);
  line-height: 1.55;
  margin: 0 auto;
  max-width: 58ch;
  text-wrap: pretty;
}
.lagen-atlas__sub em {
  font-style: italic;
  color: var(--wirsching-green-ui);
}

/* Tafel-Rahmen mit vier Ecken */
.lagen-atlas__tafel {
  position: relative;
  margin: 0 auto;
  max-width: 1400px;
  padding: var(--2xl) clamp(var(--lg), 3vw, var(--xl)) var(--xl);
  background: rgba(246,241,232,0.35);
  border: 1px solid rgba(26,26,26,0.18);
}
.lagen-atlas__tafel-corner {
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid rgba(26,26,26,0.32);
  pointer-events: none;
}
.lagen-atlas__tafel-corner--tl { top: -1px; left: -1px;   border-right: none; border-bottom: none; }
.lagen-atlas__tafel-corner--tr { top: -1px; right: -1px;  border-left: none;  border-bottom: none; }
.lagen-atlas__tafel-corner--bl { bottom: -1px; left: -1px;  border-right: none; border-top: none; }
.lagen-atlas__tafel-corner--br { bottom: -1px; right: -1px; border-left: none;  border-top: none; }

.lagen-atlas__tafel-eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: center;
  margin: 0 0 var(--xl);
}

/* 3-Spalten-Layout: Karten links, Map mittig, Karten rechts */
.lagen-atlas__plate {
  display: grid;
  grid-template-columns: 220px 1fr 220px;
  gap: clamp(20px, 3vw, 36px);
  align-items: stretch;
}
.lagen-atlas__cards {
  display: flex;
  flex-direction: column;
  gap: var(--xl);
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Einzelne Atlas-Card */
.lagen-atlas__card {
  background: rgba(246,241,232,0.6);
  border-left: 2px solid var(--wirsching-gold);
  padding: var(--md) var(--lg);
  transition: background var(--dur-base) var(--ease), border-left-width var(--dur-base) var(--ease);
}
.lagen-atlas__card:hover { background: var(--paper); }
.lagen-atlas__card--1l { border-left-color: var(--wirsching-green-ui); }

.lagen-atlas__num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--wirsching-gold);
  line-height: 1;
  margin: 0 0 var(--xs);
  letter-spacing: 0.02em;
}
.lagen-atlas__card--1l .lagen-atlas__num { color: var(--wirsching-green-ui); }

.lagen-atlas__name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.15;
  margin: 0 0 var(--xs);
  letter-spacing: -0.005em;
}

.lagen-atlas__card .chip {
  font-size: 11px;
  padding: 3px 8px;
  letter-spacing: 0.16em;
  margin: var(--xs) 0 var(--sm);
  display: inline-block;
}

.lagen-atlas__soil {
  display: flex;
  gap: 10px;
  align-items: center;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  line-height: 1.35;
  margin: 0;
}
.lagen-atlas__glyph {
  width: 24px;
  height: 16px;
  flex-shrink: 0;
}

/* Karte mittig */
.lagen-atlas__map {
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lagen-atlas__topo {
  width: 100%;
  height: auto;
  display: block;
}

/* Editorial-Caption unten */
.lagen-atlas__caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: var(--xl) 0 0;
  padding-top: var(--md);
  border-top: 1px solid var(--hairline);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  gap: var(--md);
  flex-wrap: wrap;
}
.lagen-atlas__caption em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink);
  font-size: 13px;
  letter-spacing: normal;
}

.lagen-atlas__footer {
  margin-top: var(--2xl);
  text-align: center;
}

/* ============ STARTSEITE: Lagen-Hero (Fullscreen-Foto-Teaser) ============ */
.lagen-hero {
  position: relative;
  isolation: isolate;
  padding-bottom: clamp(40px, 5vw, 72px);
}
.lagen-hero__photo {
  position: relative;
  margin: 0 0 clamp(28px, 3vw, 48px);
  width: 100%;
  height: clamp(560px, 78vh, 880px);
  overflow: hidden;
  color: var(--paper);
  isolation: isolate;
}
.lagen-hero__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}
.lagen-hero__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      105deg,
      oklch(0.18 0.02 145 / 0.78) 0%,
      oklch(0.18 0.02 145 / 0.56) 28%,
      oklch(0.18 0.02 145 / 0.18) 55%,
      oklch(0.18 0.02 145 / 0.05) 80%,
      oklch(0.18 0.02 145 / 0.18) 100%
    );
  pointer-events: none;
}
.lagen-hero__copy {
  position: absolute;
  left: clamp(24px, 6vw, 96px);
  right: clamp(24px, 6vw, 96px);
  bottom: clamp(48px, 8vh, 112px);
  max-width: min(640px, 50vw);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.6vh, 20px);
  color: var(--paper);
}
.lagen-hero__eyebrow { margin: 0; color: var(--wirsching-gold-bright); }
.lagen-hero__title {
  font-family: var(--serif);
  font-size: clamp(2.25rem, 4.6vw, 4rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--paper);
  text-wrap: balance;
}
.lagen-hero__sub {
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 1.05rem + 0.25vw, 1.25rem);
  line-height: 1.5;
  color: var(--paper-strong);
  margin: 0;
  max-width: 42ch;
}
.lagen-hero__sub em { font-style: italic; color: var(--wirsching-gold-bright); }

.lagen-hero__strip {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: clamp(28px, 4vw, 56px);
  flex-wrap: wrap;
  max-width: 980px;
  margin: 0 auto;
}
.lagen-hero__names {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: clamp(16px, 2vw, 28px);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.0625rem, 1.1vw, 1.25rem);
  color: var(--ink-muted);
}
.lagen-hero__names li {
  position: relative;
  padding-right: clamp(16px, 2vw, 28px);
}
.lagen-hero__names li + li::before {
  content: "·";
  position: absolute;
  left: calc(-1 * clamp(16px, 2vw, 28px) / 2);
  transform: translateX(-50%);
  color: var(--wirsching-gold-ink);
  font-style: normal;
}
.lagen-hero__names li:last-child { padding-right: 0; }
.lagen-hero__names a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.lagen-hero__names a:hover,
.lagen-hero__names a:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--wirsching-gold);
}

@media (prefers-reduced-motion: reduce) {
  .lagen-hero__names a { transition: none; }
}

@media (max-width: 760px) {
  .lagen-hero__photo { height: clamp(520px, 84vh, 720px); }
  .lagen-hero__title { font-size: clamp(2rem, 8.5vw, 3rem); }
  .lagen-hero__strip { flex-direction: column; align-items: flex-start; }
  .lagen-hero__names {
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
  }
  .lagen-hero__names li { padding-right: 0; }
  .lagen-hero__names li + li::before { display: none; }
}

/* === Responsive ============================================ */

@media (max-width: 1100px) {
  .lagen-atlas__plate {
    grid-template-columns: 180px 1fr 180px;
    gap: var(--lg);
  }
  .lagen-atlas__name { font-size: 16px; }
}

@media (max-width: 880px) {
  /* Cards kollabieren unter die Karte, Map als visueller Anker oben */
  .lagen-atlas__plate { grid-template-columns: 1fr; }
  .lagen-atlas__cards {
    flex-direction: row;
    gap: var(--md);
    flex-wrap: wrap;
  }
  .lagen-atlas__card {
    flex: 1 1 calc(50% - var(--md));
    min-width: 200px;
    background: var(--paper);
  }
  .lagen-atlas__cards--left { order: 2; }
  .lagen-atlas__map { order: 1; min-height: 380px; }
  .lagen-atlas__cards--right { order: 3; }
  .lagen-atlas__caption { font-size: 12px; }
}

@media (max-width: 520px) {
  .lagen-atlas__card { flex-basis: 100%; }
  .lagen-atlas__tafel { padding: var(--xl) var(--md) var(--md); }
  .lagen-atlas__caption {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}

.home-fairn {
  text-align: center;
}
.home-fairn__inner {
  text-align: center;
  position: relative;
}
.home-fairn__inner::before {
  content: ""; display: block;
  width: 1px; height: 40px;
  background: linear-gradient(180deg, transparent 0%, var(--wirsching-green-soft) 100%);
  margin: 0 auto var(--xl);
  opacity: 0.5;
}
.home-fairn__logo {
  display: block;
  height: 80px;
  width: auto;
  margin: 0 auto var(--lg);
}
.home-fairn__seit {
  display: block; font-family: var(--sans); font-size: 13px;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--wirsching-green-ui); font-weight: 600;
  margin-bottom: var(--lg);
}
.home-fairn__text {
  max-width: 640px; margin: 0 auto;
  font-family: var(--serif); font-size: var(--title);
  font-weight: 400; line-height: 1.55;
  text-wrap: balance;
}
.home-fairn__text em { font-style: italic; color: var(--wirsching-green-ui); }
.home-fairn__cta { margin-top: var(--xl); }

/* ============ FAMILIE / TEAM PAGE ============ */
.familie-quote {
  background: var(--paper-deep);
  text-align: center;
}
.familie-quote__big {
  font-family: var(--serif); font-weight: 400;
  font-size: var(--display-xl);
  line-height: 1.18;
  max-width: 38ch; margin: 0 auto var(--xl);
  text-wrap: balance;
}
.familie-quote__big em { font-style: italic; }
.familie-quote__sig {
  font-family: var(--serif); font-style: italic;
  font-size: var(--body); color: var(--ink-muted);
  margin-top: var(--lg);
}

.person-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(32px, 5vw, 64px);
}
@media (max-width: 760px) { .person-grid { grid-template-columns: 1fr; } }

.person {
  display: flex; flex-direction: column;
}
.person__photo {
  aspect-ratio: 5 / 6;
  overflow: hidden; margin-bottom: var(--lg);
  background: var(--paper-warm);
}
.person__photo img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 30%;
  transition: transform 600ms var(--ease);
}
.person:hover .person__photo img { transform: scale(1.02); }
.person__eyebrow {
  margin-bottom: var(--sm);
}
.person__name {
  font-family: var(--serif); font-size: var(--headline);
  font-weight: 400; margin: 0 0 var(--md); line-height: 1.1;
  letter-spacing: -0.01em;
}
.person__name em { font-style: italic; }
.person__bio {
  font-family: var(--serif); font-size: var(--body-edit);
  line-height: 1.55; max-width: 48ch;
  color: var(--ink);
}
.person__bio em { font-style: italic; }
.person--spotlight { grid-column: 1 / -1; }
.person--spotlight .person__photo { aspect-ratio: 16 / 10; max-height: 600px; }

/* ============ HISTORIE — Slider durch 500 Jahre ============ */
.historie {
  position: relative;
  background: var(--paper);
  padding-block: clamp(64px, 9vw, 120px);
  overflow: hidden;
}
.historie::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(26,26,26,0.04) 1px, transparent 0);
  background-size: 24px 24px;
  pointer-events: none; z-index: 0;
}
.historie > * { position: relative; z-index: 1; }

.historie__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--2xl);
}
.historie__header .display { margin-bottom: 0; }

/* Slider */
.historie-slider {
  position: relative;
}
.historie-slider__viewport {
  overflow: hidden;
  position: relative;
}
.historie-slider__viewport::before,
.historie-slider__viewport::after {
  content: ""; position: absolute; top: 0; bottom: 0;
  width: clamp(20px, 4vw, 48px);
  z-index: 3; pointer-events: none;
}
.historie-slider__viewport::before {
  left: 0;
  background: linear-gradient(90deg, var(--paper) 0%, transparent 100%);
}
.historie-slider__viewport::after {
  right: 0;
  background: linear-gradient(270deg, var(--paper) 0%, transparent 100%);
}

.historie-slider__track {
  display: flex;
  transform: translateX(calc(var(--slide-index, 0) * -100%));
  transition: transform var(--dur-slow) var(--ease-expo);
  will-change: transform;
}

.historie-slide {
  flex: 0 0 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  padding: var(--xl) clamp(20px, 4vw, 48px);
  min-height: clamp(440px, 56vh, 600px);
}
@media (max-width: 760px) {
  .historie-slide { grid-template-columns: 1fr; gap: var(--lg); padding: var(--lg); }
}

.historie-slide__media {
  margin: 0;
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--paper-warm);
}
.historie-slide__media img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
  filter: saturate(0.6) sepia(0.2) contrast(0.95);
  transition: filter var(--dur-slow) var(--ease-expo);
}
.historie-slide.is-active .historie-slide__media img {
  filter: saturate(1) sepia(0) contrast(1);
}

/* Stempel-Slide (1528, kein Foto) */
.historie-slide__media--stamp {
  background: var(--paper);
  display: grid; place-items: center;
  border: 1px solid var(--hairline);
  color: var(--wirsching-gold);
  aspect-ratio: 4 / 5;
}
.historie-slide__media--stamp svg {
  width: 78%; height: auto;
  transform: rotate(-3deg);
}

.historie-slide__text { position: relative; }
.historie-slide__era {
  font-family: var(--sans); font-size: 13px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--wirsching-green-ui); font-weight: 600;
  margin: 0 0 var(--md);
}
.historie-slide__title {
  font-family: var(--serif); font-weight: 400;
  font-size: var(--display-md);
  line-height: 1.05; letter-spacing: -0.015em;
  margin: 0 0 var(--lg);
  text-wrap: balance;
}
.historie-slide__title em { font-style: italic; }
.historie-slide__body {
  font-family: var(--serif); font-size: var(--body-edit);
  line-height: 1.6; max-width: 50ch;
  margin: 0;
}
.historie-slide__body em { font-style: italic; color: var(--ink); }

/* Caption innerhalb von Historie-Slide-Media (z. B. 1528 ohne Originalbild) */
.historie-slide__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--md) var(--lg);
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.65) 100%);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}
.historie-slide__caption em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 14.5px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--wirsching-gold-bright);
  margin-right: 6px;
}

/* Controls */
.historie-slider__controls {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--md);
  align-items: center;
  margin-top: var(--xl);
}
.historie-slider__btn {
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.25rem;
  cursor: pointer;
  border-radius: 999px;
  display: grid; place-items: center;
  transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.historie-slider__btn:hover {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.historie-slider__btn:disabled {
  opacity: 0.3; cursor: default;
}
.historie-slider__btn:disabled:hover {
  background: transparent; color: var(--ink); border-color: var(--hairline);
}

/* Tabs */
.historie-tabs {
  display: flex;
  gap: clamp(8px, 1.5vw, 24px);
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 var(--xs);
  scroll-snap-type: x proximity;
}
.historie-tabs::-webkit-scrollbar { display: none; }

.historie-tab {
  display: flex; flex-direction: column;
  text-align: center;
  text-decoration: none;
  background: transparent;
  color: var(--ink-muted);
  padding: var(--sm) var(--md);
  border: none;
  border-top: 1px solid var(--hairline);
  flex: 1 0 auto;
  min-width: 90px;
  scroll-snap-align: center;
  cursor: pointer;
  font-family: inherit;
  transition: color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.historie-tab:hover {
  color: var(--ink);
  border-top-color: var(--ink);
}
.historie-tab.is-active {
  color: var(--ink);
  border-top: 1px solid var(--wirsching-gold);
}
.historie-tab__year {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  font-weight: 400;
  line-height: 1;
  margin-bottom: 4px;
  color: var(--wirsching-gold);
}
.historie-tab.is-active .historie-tab__year {
  color: var(--wirsching-gold);
}
.historie-tab__label {
  font-family: var(--sans); font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 500;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .historie-slider__track { scroll-behavior: auto; }
  .historie-slide__media img { filter: saturate(1) sepia(0) contrast(1) !important; }
}

/* ============ LAGEN: VDP-Pyramide (visuelle Trapez-Pyramide) ============
   Asymmetrischer Intro-Block + flat-grid mit Connection-Labels links und
   vier Trapez-Stufen rechts. Olive-Stufung in OKLCH (dunkel-Spitze → hell-Basis).
   Hover-Choreo: Label und Stufe reagieren gegenseitig. */
.vdp-intro {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
  max-width: 1080px;
  margin: 0 auto;
}
.vdp-intro__lead { display: flex; flex-direction: column; gap: var(--md); }
.vdp-intro__lead .eyebrow { margin: 0; }
.vdp-intro__lead .display { margin: 0; }
.vdp-intro__body {
  padding-top: clamp(40px, 6vh, 72px);
  margin: 0;
  max-width: 52ch;
}
@media (max-width: 900px) {
  .vdp-intro { grid-template-columns: 1fr; gap: var(--xl); }
  .vdp-intro__body { padding-top: 0; }
}

.vdp-pyramide {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: clamp(100px, 13vw, 144px);
  max-width: 680px;
  margin: clamp(56px, 7vh, 96px) auto 0;
  align-items: stretch;
}

.vdp-tier {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Content sitzt unten — an der breitesten Stelle jeder Trapez-Stufe,
     wo Logo und Name am meisten Raum bekommen. */
  justify-content: flex-end;
  gap: 6px;
  color: var(--paper);
  text-align: center;
  padding: 8px 12px clamp(10px, 1.2vw, 18px);
  font-family: var(--sans);
  transition: filter var(--dur-base) var(--ease);
}
/* Trapezoid-Geometrie: konstanter Slope für sauberes Pyramiden-Dreieck.
   Jede Stufe gewinnt 25 % Breite. Bottom der einen = Top der nächsten. */
.vdp-tier--1 {
  background: oklch(0.33 0.04 132);
  clip-path: polygon(50% 0, 62.5% 100%, 37.5% 100%);
}
.vdp-tier--2 {
  background: oklch(0.44 0.045 132);
  clip-path: polygon(37.5% 0, 62.5% 0, 75% 100%, 25% 100%);
}
.vdp-tier--3 {
  background: oklch(0.56 0.04 132);
  clip-path: polygon(25% 0, 75% 0, 87.5% 100%, 12.5% 100%);
}
.vdp-tier--4 {
  background: oklch(0.70 0.035 132);
  clip-path: polygon(12.5% 0, 87.5% 0, 100% 100%, 0 100%);
}

/* GG- und 1G-Logos sind die Brand-Marken; jetzt deutlich größer.
   1G auf Tier 2 (mehr Raum) kann breiter sein als GG auf Tier 1 (Apex). */
.vdp-tier__icon-img {
  flex-shrink: 0;
  filter: brightness(0) invert(1);
}
/* Alle vier Logos gleich gewichtet: gleiche Höhe, Breiten ergeben sich aus
   dem natürlichen Aspektverhältnis (GG/1G fast quadratisch, Adler 25:32).
   Adler sitzt eine Spur niedriger, damit der höhere Eagle-Aspekt nicht
   optisch überragt. */
.vdp-tier__icon-img,
.vdp-tier__adler {
  flex-shrink: 0;
  width: auto;
}
.vdp-tier__icon-img { height: clamp(36px, 4.4vw, 48px); }
.vdp-tier__adler {
  color: var(--paper);
  height: clamp(30px, 3.6vw, 40px);
}
/* Hierarchie über Opacity statt Größe: GG/1G voll, Adler gedimmt
   weil generische VDP-Marke statt Stufen-spezifisches Siegel. */
.vdp-tier--3 .vdp-tier__adler { opacity: 0.72; }
.vdp-tier--4 .vdp-tier__adler { opacity: 0.58; }

.vdp-tier__name {
  font-size: clamp(12px, 0.95vw, 13.5px);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--paper);
  white-space: nowrap;
}
/* Tier 1 (Apex) ist schmal — Name kompakter, kein letter-spacing-Overload */
.vdp-tier--1 .vdp-tier__name {
  font-size: clamp(10.5px, 0.7vw, 11.5px);
  letter-spacing: 0.06em;
}
.vdp-tier--2 .vdp-tier__name {
  font-size: clamp(11.5px, 0.85vw, 13px);
  letter-spacing: 0.1em;
}
.vdp-tier__sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(12.5px, 0.95vw, 14px);
  color: var(--paper);
  opacity: 0.88;
  white-space: nowrap;
}
.vdp-tier--2 .vdp-tier__sub { font-size: clamp(12px, 0.85vw, 13px); }

/* Delight: leichter Hover-Lift auf den Stufen */
.vdp-tier { transition: filter var(--dur-base) var(--ease); }
.vdp-tier:hover { filter: brightness(1.12); }

.vdp-pyramide__note {
  text-align: center;
  margin: clamp(40px, 5vh, 64px) auto 0;
  max-width: 56ch;
  color: var(--ink-muted);
  font-family: var(--serif);
  font-size: var(--micro);
  line-height: 1.55;
}
.vdp-pyramide__note em { font-style: italic; color: var(--ink); }

@media (max-width: 760px) {
  .vdp-pyramide {
    grid-auto-rows: clamp(90px, 22vw, 124px);
    max-width: 100%;
  }
  /* Sub-Tagline auf kleinen Stufen verstecken — der schmale Apex bekommt
     nur Logo, breitere Stufen behalten ihre Tagline. */
  .vdp-tier--1 .vdp-tier__name {
    font-size: clamp(9px, 2vw, 11px);
    letter-spacing: 0.04em;
  }
  .vdp-tier--2 .vdp-tier__name {
    font-size: clamp(10px, 2.2vw, 12px);
    letter-spacing: 0.08em;
  }
  .vdp-tier--2 .vdp-tier__sub,
  .vdp-tier--3 .vdp-tier__sub,
  .vdp-tier--4 .vdp-tier__sub {
    font-size: clamp(11px, 2.4vw, 13px);
  }
}
@media (max-width: 480px) {
  /* Sehr schmal: Apex zeigt nur Logo, Name wandert raus */
  .vdp-tier--1 .vdp-tier__name { display: none; }
  .vdp-tier--2 .vdp-tier__sub { display: none; }
  .vdp-tier__adler { height: clamp(20px, 4vw, 28px); }
}

.lagen-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(32px, 5vw, 64px);
}
@media (max-width: 760px) { .lagen-overview-grid { grid-template-columns: 1fr; } }

.lage-detailcard {
  display: flex; flex-direction: column;
  cursor: pointer;
}
.lage-detailcard__photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: var(--lg);
}
.lage-detailcard__photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms var(--ease);
}
.lage-detailcard:hover .lage-detailcard__photo img { transform: scale(1.02); }
.lage-detailcard__chip { align-self: flex-start; margin-bottom: var(--md); }
.lage-detailcard__name {
  font-family: var(--serif); font-size: var(--headline);
  font-weight: 400; font-style: italic;
  margin: 0 0 var(--md); line-height: 1.1;
  letter-spacing: -0.01em;
}
.lage-detailcard__name em { font-style: normal; }
.lage-detailcard__facts {
  display: flex; gap: var(--lg); flex-wrap: wrap;
  margin-bottom: var(--md);
  font-family: var(--sans); font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-muted); font-weight: 600;
}
.lage-detailcard__bio {
  font-family: var(--serif); font-size: var(--body-edit);
  line-height: 1.55; margin-bottom: var(--lg);
}
.lage-detailcard__bio em { font-style: italic; }

/* ============ WEINE / SHOP ============ */
.wein-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 48px);
}
@media (max-width: 980px) { .wein-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .wein-grid { grid-template-columns: 1fr; } }

/* 4-Kachel-Variante für Startseiten-Teaser (alt) — bleibt für Wiederverwendung */
.wein-grid--teaser { grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 36px); }
@media (max-width: 1100px) { .wein-grid--teaser { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .wein-grid--teaser { grid-template-columns: 1fr; } }

/* ============ EMPFEHLUNG DES MONATS — VINOTHEK-SCHAUFENSTER ============
   Bühne über der VDP-Treppe. Asymmetrisches 1.15/1 Layout, Flasche steht in
   einer eigenen Lichtinsel mit radialem Spot, marginale italic-Numeral, Date-Stamp.
   Die "Empfehlung des Monats" wird zur eigenen Schaufenster-Komposition,
   nicht zur Karte mit Sticker. */
.wein-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(48px, 7vw, 112px);
  align-items: center;
  margin-block: var(--3xl) var(--3xl);
  padding: clamp(40px, 5vw, 72px) 0 0;
  position: relative;
  /* Nur eine Top-Hairline rahmt das Schaufenster. Die VDP-Treppe-Headline
     darunter trägt ihre eigene Hairline-Trennung; doppelte Linien sind weg. */
  border-top: 1px solid var(--hairline);
}
@media (max-width: 880px) {
  .wein-feature {
    grid-template-columns: 1fr;
    gap: var(--xl);
    padding-block: var(--2xl);
  }
}

/* Bühnen-Container für Flasche + Marginalia */
.wein-feature__stage {
  position: relative;
  aspect-ratio: 3 / 4;       /* portrait, dramatischer als 4/5 */
  width: 100%;
  isolation: isolate;
}
@media (max-width: 880px) {
  .wein-feature__stage { aspect-ratio: 4 / 5; }
}

.wein-feature__photo {
  position: relative;
  width: 100%; height: 100%;
  background:
    radial-gradient(
      ellipse 55% 70% at 50% 55%,
      var(--paper) 0%,
      var(--paper-warm) 55%,
      var(--paper-deep) 100%
    );
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
  padding: 6% 18%;
  /* Schaufenster-Geste: feine Hairline-Rahmen außen */
  outline: 1px solid var(--hairline);
  outline-offset: 0;
}
.wein-feature__photo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  flex: 0 1 auto;
  object-fit: contain;
  object-position: center;
  display: block;
  filter: drop-shadow(0 28px 48px rgba(26, 26, 26, 0.22));
  transition: transform var(--dur-slow) var(--ease-expo);
}
.wein-feature:hover .wein-feature__photo img {
  transform: translateY(-4px) scale(1.02);
}

/* Date-Stamp: Mono-Stempel unten-rechts an der Bühne */
.wein-feature__date {
  position: absolute;
  bottom: -22px; right: 0;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-left: var(--md);
  /* Lead-in durch kurze Hairline links */
}
.wein-feature__date::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 8px; height: 1px;
  background: var(--wirsching-gold);
  transform: translateY(-50%);
}

/* Text-Block rechts */
.wein-feature__text {
  padding-block: var(--lg);
  display: flex;
  flex-direction: column;
}

/* "Empfehlung des Monats" als Editorial-Signage mit langer Goldlinie */
.wein-feature__tag {
  font-family: var(--sans); font-size: 13.5px;
  font-weight: 700; letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--wirsching-gold-ink);
  margin: 0 0 var(--xl);
  display: inline-flex; align-items: center;
  gap: var(--md);
}
.wein-feature__tag-mark {
  display: inline-block;
  width: 32px; height: 1px;
  background: var(--wirsching-gold);
}

.wein-feature__chip {
  align-self: flex-start;
  margin-bottom: var(--lg);
}
/* DER Move: Title-Skala explodiert auf Display. Italic Akzent setzt das wein-feature
   visuell auf "Magazine Cover Story"-Niveau, deutlich über der VDP-Treppe darunter. */
.wein-feature__title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.5rem, 4.8vw, 4.5rem);
  line-height: 0.98;
  margin: 0 0 var(--xl);
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.wein-feature__title em { font-style: italic; }
.wein-feature__caption {
  font-family: var(--serif); font-size: var(--body-edit);
  line-height: 1.55; margin: 0 0 var(--lg);
  max-width: 50ch;
}
.wein-feature__caption em { font-style: italic; }
.wein-feature__pairing {
  font-family: var(--sans); font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin: 0 0 var(--xl);
}
.wein-feature__meta {
  display: flex; align-items: center; gap: var(--xl);
  border-top: 1px solid var(--hairline);
  padding-top: var(--lg);
  flex-wrap: wrap;
  margin-top: auto;
}
.wein-feature__price {
  font-family: var(--serif); font-size: var(--headline);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.wein-feature__price small {
  display: block; font-size: 13px;
  color: var(--ink-muted); letter-spacing: 0.04em;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.wein-feature__cta {
  min-height: 56px;
  padding-inline: var(--xl);
  letter-spacing: 0.14em;
}

/* Editorial-Headline über der 3-up-Treppe. Eigene typografische Aussage
   in Italic-Serif (kein Eyebrow-Label mehr), trägt die Brücke vom
   Wein-des-Monats zu den drei Stufen darunter. */
.wein-treppe__title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--display-md);
  line-height: 1.1;
  letter-spacing: -0.012em;
  text-align: center;
  margin: var(--3xl) auto var(--2xl);
  padding-top: var(--2xl);
  max-width: 28ch;
  text-wrap: balance;
  position: relative;
}
/* Goldener Punkt zentriert über dem Title als Editorial-Caesura */
.wein-treppe__title::before {
  content: "";
  position: absolute;
  top: var(--lg);
  left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 999px;
  background: var(--wirsching-gold);
}

/* Featured-Kachel: Gold-Akzent statt Sticker.
   Stärkere Hairline oben, kleiner Tag-Label vor dem Chip in Gold. */
.weinkachel--featured {
  border-top-color: var(--wirsching-gold);
  border-top-width: 2px;
  padding-top: calc(var(--lg) - 1px);
}
.weinkachel--featured .weinkachel__photo {
  background: linear-gradient(180deg, var(--paper-warm) 0%, var(--paper-deep) 100%);
}
.weinkachel__tag {
  font-family: var(--sans); font-size: 13px;
  font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wirsching-gold-ink);
  margin: 0 0 var(--sm);
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
}
.weinkachel__tag::before {
  content: ""; display: inline-block;
  width: 14px; height: 1px;
  background: currentColor;
}

.weinkachel {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--hairline);
  padding-top: var(--lg);
  transition: transform var(--dur-slow) var(--ease-expo);
}
.weinkachel:hover { transform: translateY(-3px); }
.weinkachel__photo {
  padding: 10% 22%;
  margin-bottom: var(--lg);
  transition: background var(--dur-slow) var(--ease);
}
.weinkachel__photo img {
  filter: drop-shadow(0 14px 28px rgba(0,0,0,0.16));
}

/* Variante --paket: Lifestyle/Mehrflaschen-Foto statt freigestellter Bottle-PNG.
   Foto füllt die Bühne komplett (object-fit: cover), kein paper-warm dahinter,
   kein Drop-Shadow. Wirkt wie ein redaktioneller Magazin-Schnitt. */
.weinkachel__photo--paket {
  padding: 0;
  background: var(--paper-deep);
  aspect-ratio: 4 / 5;
}
.weinkachel__photo--paket img {
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
}
.weinkachel:hover .weinkachel__photo--paket { background: var(--paper-deep); }
.weinkachel:hover .weinkachel__photo--paket img { transform: scale(1.04); }

/* Shop-Grid: Flaschen-Kacheln 400 px hoch */
#weinGrid .weinkachel__photo { aspect-ratio: auto; height: 400px; }
.weinkachel:hover .weinkachel__photo { background: var(--paper-deep); }
.weinkachel--featured:hover .weinkachel__photo {
  background: linear-gradient(180deg, var(--paper-deep) 0%, var(--paper-warm) 100%);
}
.weinkachel:hover .weinkachel__photo img { transform: translateY(-5px) scale(1.03); }
.weinkachel__chip { align-self: flex-start; margin-bottom: var(--sm); }
.weinkachel__title {
  font-family: var(--serif); font-size: var(--title-sm);
  font-weight: 400; margin: 0 0 var(--xs); line-height: 1.2;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.weinkachel__title em { font-style: italic; }
.weinkachel__caption {
  font-family: var(--serif); font-style: italic;
  color: var(--ink-muted); font-size: var(--body);
  margin: 0 0 var(--md); line-height: 1.45;
  text-wrap: pretty;
}
.weinkachel__pairing {
  font-family: var(--sans); font-size: 13px;
  letter-spacing: 0.06em; color: var(--ink-muted);
  margin: 0 0 var(--lg);
}
.weinkachel__meta {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--sm);
  border-top: 1px solid var(--hairline); padding-top: var(--md);
  margin-top: auto;
}
.weinkachel__price {
  font-family: var(--serif); font-size: var(--body-edit);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.weinkachel__price small {
  display: block; font-size: 12px; color: var(--ink-muted);
  letter-spacing: 0.04em;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.weinkachel__add {
  background: var(--ink); color: var(--paper); border: 1px solid var(--ink);
  padding: 10px 18px;
  font-family: var(--sans); font-size: 12px;
  font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  cursor: pointer; min-height: 40px;
  transition: background var(--dur-base) var(--ease),
              color var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease);
}
.weinkachel__add:hover {
  background: var(--wirsching-green-ui);
  border-color: var(--wirsching-green-ui);
  transform: translateY(-1px);
}
.weinkachel__add.added {
  background: var(--wirsching-green);
  border-color: var(--wirsching-green);
}
.weinkachel__add:focus-visible {
  outline: 2px solid var(--wirsching-green-ui);
  outline-offset: 3px;
}

/* SHOP filter bar — schlanker Block.
   Nur eine Bottom-Hairline trennt Filter von Grid darunter.
   Count sitzt NICHT mehr im flex-container (sonst wandert er beim Wrap
   nach unten und liest sich wie ein orphaned Item). Eigene Zeile, kleiner
   editorial caption-style. */
.shop-filterbar {
  padding: var(--xl) 0 var(--lg);
  border-bottom: 1px solid var(--hairline);
}
.shop-filterbar__filters {
  display: flex; gap: var(--xs); flex-wrap: wrap;
}
.shop-filter {
  background: transparent; border: 1px solid var(--hairline);
  padding: 8px 16px; cursor: pointer;
  font-family: var(--sans); font-size: 13px;
  letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 600; color: var(--ink);
  transition: all var(--dur-base) var(--ease);
  min-height: 38px;
}
.shop-filter:hover { border-color: var(--ink); }
.shop-filter:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.shop-filter.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.shop-filterbar__count {
  display: block;
  padding: var(--md) 0 var(--lg);
  font-family: var(--serif); font-style: italic;
  color: var(--ink-muted); font-size: var(--micro);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Empty-State, wenn Filter null Treffer hat */
.shop-empty {
  text-align: center;
  padding: var(--3xl) 0;
}
.shop-empty__text {
  font-family: var(--serif); font-style: italic;
  font-size: var(--body-edit); line-height: 1.5;
  color: var(--ink-muted);
  margin: 0 0 var(--lg);
  text-wrap: balance;
}

/* ============ ERLEBNISSE ============ */
.erlebnis-card {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  cursor: pointer;
  background: var(--paper-warm);
  isolation: isolate;
  text-decoration: none; color: var(--paper);
  display: block;
}
.erlebnis-card__photo {
  position: absolute; inset: 0; z-index: 0;
}
.erlebnis-card__photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms var(--ease-expo);
}
.erlebnis-card:hover .erlebnis-card__photo img { transform: scale(1.03); }
.erlebnis-card__photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(19, 84, 19, 0.85) 100%);
  z-index: 1;
}
.erlebnis-card__content {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column;
  justify-content: flex-end;
  padding: var(--xl);
  color: var(--paper);
}
.erlebnis-card__status {
  position: absolute; top: var(--lg); left: var(--lg); z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--paper-overlay); color: var(--ink);
  padding: 6px 12px;
  font-family: var(--sans); font-size: 13px;
  letter-spacing: 0.08em; font-weight: 600;
}
.erlebnis-card__status .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--wirsching-green-ui);
}
.erlebnis-card__status.closed .dot { background: var(--ink-muted); }
.erlebnis-card__meta {
  font-family: var(--sans); font-size: 13.5px;
  letter-spacing: 0.08em; opacity: 0.85; margin: 0 0 var(--xs);
}
.erlebnis-card__title {
  font-family: var(--serif); font-size: var(--headline);
  font-weight: 400; line-height: 1.15;
  margin: 0 0 var(--xs);
}
.erlebnis-card__title em { font-style: italic; }

.erlebnisse-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--lg);
}
@media (max-width: 720px) { .erlebnisse-grid { grid-template-columns: 1fr; } }

/* EVENT KALENDER */
.events__list { display: flex; flex-direction: column; }
.event-row {
  display: grid;
  grid-template-columns: 120px 1fr auto auto;
  gap: var(--xl); align-items: center;
  padding: var(--xl) 0;
  border-top: 1px solid var(--hairline);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.event-row:last-child { border-bottom: 1px solid var(--hairline); }
.event-row:hover { background: rgba(229, 217, 196, 0.4); transform: translateX(4px); }
.event-row__date { font-family: var(--serif); }
.event-row__date strong {
  display: block; font-size: var(--display-md);
  font-weight: 400; line-height: 1; margin-bottom: 4px;
}
.event-row__date span {
  font-family: var(--sans); font-size: 13px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted);
}
.event-row__title {
  font-family: var(--serif); font-size: var(--title);
  font-weight: 400; margin: 0 0 4px;
}
.event-row__title em { font-style: italic; }
.event-row__desc { font-size: var(--micro); color: var(--ink-muted); margin: 0; }
.event-row__status {
  font-family: var(--sans); font-size: 13px;
  letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 600; color: var(--wirsching-green-ui);
}
.event-row__status.low { color: var(--wirsching-red); }
.event-row__status.sold { color: var(--ink-muted); text-decoration: line-through; }
@media (max-width: 760px) {
  .event-row { grid-template-columns: 80px 1fr; gap: var(--md); padding: var(--lg) 0; }
  .event-row__status, .event-row .btn--link { grid-column: 2; }
}

/* === Events-Header: Eyebrow+Title links, "Alle Termine"-Link rechts === */
.events__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--md);
  margin-bottom: var(--2xl);
}

/* === Editorial Lead-Paragraph (Section-Intro Sub-Copy, größer als body-edit) === */
.section-intro__lead {
  font-family: var(--serif);
  font-size: var(--body-edit);
  line-height: 1.55;
  color: var(--ink);
  max-width: 38em;
  margin: var(--xl) auto 0;
  text-wrap: pretty;
}
.section-intro--narrow .section-intro__lead { margin-inline: auto; }
.section-intro__lead em { font-style: italic; }

/* === BESUCH-FLOW: Drei-Schritt-Ablauf mit Display-Numerals als Anker.
   Die Numerals sind keine Step-Marker mehr, sondern strukturelle Geste:
   clamp(96px, 13vw, 180px) italic-serif in Gold, übernehmen die visuelle
   Trennung (Hairline-Separators sind raus). Titles wachsen mit auf display-md. */
.besuch-flow {
  list-style: none;
  margin: var(--3xl) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: clamp(40px, 5vw, 96px);
}
@media (max-width: 880px) {
  .besuch-flow { grid-template-columns: 1fr; gap: var(--3xl); }
}
.besuch-step {
  position: relative;
  padding-top: var(--xl);
}
.besuch-step__num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(56px, 6.5vw, 88px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--wirsching-gold);
  margin: 0 0 var(--md);
  display: block;
}
.besuch-step__title {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: var(--display-md);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 0 var(--lg);
  color: var(--ink);
  text-wrap: balance;
}
.besuch-step__text {
  font-family: var(--serif);
  font-size: var(--body-edit);
  line-height: 1.55;
  color: var(--ink);
  max-width: 28em;
  margin: 0;
  text-wrap: pretty;
}
.besuch-step__text em { font-style: italic; color: var(--ink); }
.besuch-flow__sep { display: none; }

/* === Erlebnis-Card-Status, eingebettet (statt absolut auf Foto) === */
.erlebnis-card__status--inline {
  position: static;
  margin-bottom: var(--lg);
  background: rgb(255 255 255 / 0.5);
  align-self: flex-start;
}

/* === Öffnungszeiten-Definition-List (Vinothek + Info-Band wiederverwendbar) === */
.opening-hours {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--sm) var(--lg);
  font-family: var(--serif);
  font-size: var(--body);
  line-height: 1.55;
  margin: var(--xl) 0;
}
.opening-hours dt {
  font-style: italic;
  color: var(--ink-muted);
}
.opening-hours dd {
  margin: 0;
}
.opening-hours--tight {
  gap: var(--xs) var(--md);
  margin: 0;
}

/* === Buttons-Row (zwei nebeneinander mit Wrap) === */
.btn-row {
  display: flex;
  gap: var(--md);
  flex-wrap: wrap;
}

/* === Row-Priceline Group (Wrapper für mehrere row-priceline) === */
.row-priceline-group {
  margin: var(--xl) 0;
}

/* === Info-Band: 4-Spalten Faktenstrip — gleiches Vokabular wie
       Service-Band auf der Shop-Seite (Icon oben, Eyebrow grün, Text).
       Keine Rahmen-Hairlines: paper-deep BG + Newsletter-grün darunter
       liefern die Trennung von selbst. === */
.info-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--xl);
  padding: var(--2xl) 0;
}
@media (max-width: 880px) {
  .info-band { grid-template-columns: repeat(2, 1fr); gap: var(--xl); }
}
@media (max-width: 540px) {
  .info-band { grid-template-columns: 1fr; }
}
.info-band__col {
  display: flex;
  flex-direction: column;
  gap: var(--sm);
  font-family: var(--serif);
  font-size: var(--body);
  line-height: 1.55;
}
.info-band__icon {
  width: 32px; height: 32px;
  color: var(--wirsching-green-ui);
  margin-bottom: var(--md);
  flex-shrink: 0;
}
.info-band__col .eyebrow {
  margin: 0 0 var(--xs);
}
.info-band__col address {
  font-style: normal;
  margin: 0;
}
.info-band__col p { margin: 0 0 var(--md); }
.info-band__col p:last-child { margin-bottom: 0; }
.info-band__col .btn--link { margin-top: var(--md); }
.info-band__col .link-ink {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease);
}
.info-band__col .link-ink:hover { border-bottom-color: var(--ink-muted); }

/* === Outro-Guide: Iphofen Aufenthalts-Empfehlungen (Übernachten + Geniessen).
   Editorial-typografisch, kein Foto-Grid. Zwei Spalten mit Vertikal-Hairline
   zwischen den Kategorien, jeweils 3 Einträge als typografische Liste,
   Tagline-Pill in Gold am Ende jedes Eintrags. */
.outro-guide__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 96px);
  margin-top: var(--3xl);
  padding-top: var(--2xl);
  border-top: 1px solid var(--hairline);
}
@media (max-width: 880px) {
  .outro-guide__grid {
    grid-template-columns: 1fr;
    gap: var(--3xl);
  }
}
/* Vertikale Hairline zwischen den zwei Spalten, wie bei Hero-Facts. */
.outro-guide__col + .outro-guide__col {
  padding-left: clamp(40px, 5vw, 96px);
  border-left: 1px solid var(--hairline);
}
@media (max-width: 880px) {
  .outro-guide__col + .outro-guide__col {
    padding-left: 0;
    border-left: 0;
    padding-top: var(--2xl);
    border-top: 1px solid var(--hairline);
  }
}

.outro-guide__col-head {
  display: flex;
  align-items: center;
  gap: var(--md);
  margin-bottom: var(--2xl);
  padding-bottom: var(--md);
  border-bottom: 1px solid var(--hairline);
}
.outro-guide__col-head .eyebrow { margin: 0; }
.outro-guide__col-icon {
  width: 22px; height: 22px;
  color: var(--wirsching-green-ui);
  flex-shrink: 0;
}

.outro-guide__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--2xl);
}

.outro-guide-item {
  display: flex;
  flex-direction: column;
  gap: var(--sm);
}
.outro-guide-item__name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--title);
  line-height: 1.2;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
  display: flex;
  align-items: baseline;
  gap: var(--sm);
  flex-wrap: wrap;
}
.outro-guide-item__stars {
  font-family: var(--serif);
  font-size: 17px;
  letter-spacing: 0.08em;
  color: var(--wirsching-gold);
  flex-shrink: 0;
  white-space: nowrap;
  line-height: 1;
}
.outro-guide-item__text {
  font-family: var(--serif);
  font-size: var(--body);
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  max-width: 38ch;
  text-wrap: pretty;
}
.outro-guide-item__text em { font-style: italic; color: var(--ink); }

/* Gold-Pill am Ende: editorial Caption, kein Button. */
.outro-guide-item__tag {
  align-self: flex-start;
  margin-top: var(--sm);
  padding: 7px 14px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wirsching-gold-ink);
  border: 1px solid var(--wirsching-gold);
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1.2;
}

/* Footer-Hinweis mit kleinem Map-Pin */
.outro-guide__footer {
  margin-top: var(--3xl);
  padding-top: var(--xl);
  border-top: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sm);
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--body);
  color: var(--ink-muted);
  text-align: center;
  text-wrap: balance;
}
.outro-guide__footer p { margin: 0; max-width: 56ch; }
.outro-guide__footer-icon {
  width: 16px; height: 16px;
  color: var(--wirsching-green-ui);
  flex-shrink: 0;
}
.outro-guide__footer a {
  color: var(--wirsching-green-ui);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  font-style: normal;
  transition: color var(--dur-base) var(--ease);
}
.outro-guide__footer a:hover { color: var(--wirsching-green); }

.outro-guide__cta {
  text-align: center;
  margin-top: var(--2xl);
  display: flex;
  gap: var(--md);
  flex-wrap: wrap;
  justify-content: center;
}

/* ============ MAGAZIN ============ */
.magazin-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--xl);
}
@media (max-width: 880px) { .magazin-grid { grid-template-columns: 1fr; } }
.magazin-card { display: flex; flex-direction: column; cursor: pointer; text-decoration: none; color: var(--ink); }
.magazin-card__photo {
  aspect-ratio: 4 / 5; margin-bottom: var(--md); overflow: hidden;
}
.magazin-card__photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms var(--ease);
}
.magazin-card:hover .magazin-card__photo img { transform: scale(1.02); }
.magazin-card__rubrik { margin-bottom: var(--sm); }
.magazin-card__title {
  font-family: var(--serif); font-size: var(--title);
  font-weight: 400; line-height: 1.25; margin: 0 0 var(--sm);
}
.magazin-card__title em { font-style: italic; }
.magazin-card__lead {
  font-family: var(--serif); font-style: italic;
  color: var(--ink-muted); font-size: var(--body); margin: 0;
}
.drenched .magazin-card { color: var(--paper); }
.drenched .magazin-card__rubrik { color: var(--paper-muted); }
.drenched .magazin-card__lead { color: var(--paper-soft); }

.magazin-card--feature { grid-column: span 2; }
.magazin-card--feature .magazin-card__photo { aspect-ratio: 16 / 10; }
@media (max-width: 880px) { .magazin-card--feature { grid-column: auto; } }

/* ============ KONTAKT ============ */
.kontakt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 96px);
}
@media (max-width: 880px) { .kontakt-grid { grid-template-columns: 1fr; } }
.kontakt-info {
  display: flex; flex-direction: column; gap: var(--xl);
}
.kontakt-info h3 {
  font-family: var(--sans); font-size: 13px;
  letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600;
  color: var(--ink-muted); margin: 0 0 var(--sm);
}
.kontakt-info p {
  font-family: var(--serif); font-size: var(--body-edit);
  margin: 0; line-height: 1.5;
}
.kontakt-info a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; }

.kontakt-form {
  display: flex; flex-direction: column; gap: var(--md);
}
.kontakt-form label {
  font-family: var(--sans); font-size: 13px;
  letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
  color: var(--ink-muted);
  display: flex; flex-direction: column; gap: 6px;
}
.kontakt-form input, .kontakt-form textarea, .kontakt-form select {
  font-family: var(--serif); font-size: var(--body);
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--hairline); border-radius: 0;
  color: var(--ink);
  letter-spacing: normal; text-transform: none;
}
.kontakt-form input:focus, .kontakt-form textarea:focus, .kontakt-form select:focus {
  border-color: var(--ink); outline: none;
}
.kontakt-form textarea { resize: vertical; min-height: 120px; }
.kontakt-form__row {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--md);
}
@media (max-width: 540px) { .kontakt-form__row { grid-template-columns: 1fr; } }

.map-block {
  aspect-ratio: 16 / 11;
  background: var(--paper-warm);
  display: grid; place-items: center;
  position: relative; overflow: hidden;
}
.map-block__inner {
  text-align: center; padding: var(--xl);
  font-family: var(--serif); font-style: italic;
  color: var(--ink-muted); font-size: var(--body);
}
.map-block::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(19, 84, 19, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(19, 84, 19, 0.08) 1px, transparent 1px);
  background-size: 40px 40px;
}
.map-block__inner { position: relative; z-index: 1; }
.map-pin {
  display: inline-block; width: 12px; height: 12px;
  background: var(--wirsching-red); border-radius: 50%;
  margin-right: 8px; vertical-align: middle;
  box-shadow: 0 0 0 6px rgba(184, 0, 7, 0.15);
}

/* ============ WEIN-FINDER ============ */
.finder-overlay {
  position: fixed; inset: 0; background: rgba(26, 26, 26, 0.6);
  z-index: 90; opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease);
  display: grid; place-items: center; padding: var(--lg);
}
.finder-overlay.open { opacity: 1; pointer-events: auto; }
.finder {
  background: var(--paper);
  max-width: 640px; width: 100%; max-height: 90vh;
  overflow-y: auto;
  padding: var(--2xl) var(--xl); position: relative;
  transform: translateY(20px);
  transition: transform var(--dur-slow) var(--ease-expo);
}
.finder-overlay.open .finder { transform: translateY(0); }
.finder__close {
  position: absolute; top: var(--md); right: var(--md);
  background: none; border: none; font-size: 24px;
  cursor: pointer; width: 40px; height: 40px; color: var(--ink);
}
.finder__step h3 {
  font-family: var(--serif); font-size: var(--headline);
  font-weight: 400; line-height: 1.2; margin: 0 0 var(--md);
}
.finder__step h3 em { font-style: italic; }
.finder__step p { color: var(--ink-muted); margin: 0 0 var(--xl); font-family: var(--serif); font-style: italic; }
.finder__options { display: grid; gap: var(--md); }
.finder__option {
  background: var(--paper-deep); border: 1px solid transparent;
  padding: var(--lg); text-align: left; cursor: pointer;
  font-family: inherit; color: inherit;
  transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.finder__option:hover { background: var(--paper-warm); border-color: var(--ink); }
.finder__option strong {
  font-family: var(--serif); font-size: var(--body-edit);
  font-weight: 400; display: block; margin-bottom: 4px;
}
.finder__option strong em { font-style: italic; }
.finder__option span { font-size: var(--micro); color: var(--ink-muted); }
.finder__progress {
  display: flex; gap: 4px; margin-bottom: var(--xl);
}
.finder__progress span {
  flex: 1; height: 2px; background: var(--hairline);
}
.finder__progress span.active { background: var(--ink); }
.finder__result { text-align: center; }
.finder__result-eyebrow {
  font-family: var(--sans); font-size: 13px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-muted); font-weight: 600; margin-bottom: var(--md);
}
.finder__result-name {
  font-family: var(--serif); font-size: var(--display-md);
  font-weight: 400; margin: 0 0 var(--md);
}
.finder__result-name em { font-style: italic; }
.finder__result-photo {
  padding: 10% 22%;
  max-width: 220px;
  margin: 0 auto var(--xl);
}
.finder__result-photo img { filter: drop-shadow(0 10px 20px rgba(0,0,0,0.12)); }
.finder__result-caption {
  font-family: var(--serif); font-style: italic;
  color: var(--ink-muted); margin-bottom: var(--xl);
  max-width: 40ch; margin-inline: auto;
}


/* ============ PDP (Produktdetailseite) ============ */
.pdp-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
  padding-top: var(--xl);
}
@media (max-width: 880px) {
  .pdp-hero { grid-template-columns: 1fr; gap: var(--xl); }
}

.pdp-bottle { padding: 8% 18%; }
.pdp-bottle img { filter: drop-shadow(0 24px 36px rgba(0,0,0,0.2)); }
@media (min-width: 1100px) {
  .pdp-bottle { min-height: 600px; aspect-ratio: auto; }
}
.pdp-bottle::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 110%, rgba(0,0,0,0.18), transparent 50%);
  pointer-events: none;
}
.pdp-bottle__gallery {
  position: absolute; left: var(--lg); bottom: var(--lg); z-index: 2;
  display: flex; gap: 6px;
}
.pdp-bottle__thumb {
  width: 48px; height: 48px;
  background: var(--paper-overlay);
  border: 1px solid var(--hairline);
  cursor: pointer; padding: 4px;
}
.pdp-bottle__thumb.active { border-color: var(--ink); }
.pdp-bottle__thumb img { width: 100%; height: 100%; object-fit: contain; }

.pdp-buy {
  display: flex; flex-direction: column; gap: var(--md);
  padding-top: var(--md);
}
.pdp-buy__chip { align-self: flex-start; margin-bottom: var(--sm); }
.pdp-buy__eyebrow { margin: 0; }
.pdp-buy__title {
  font-family: var(--serif); font-weight: 400;
  font-size: var(--display-md);
  line-height: 1.1; margin: 0 0 var(--xs);
  text-wrap: balance;
}
.pdp-buy__title em { font-style: italic; }
.pdp-buy__caption {
  font-family: var(--serif); font-style: italic;
  font-size: var(--body-edit); color: var(--ink-muted);
  line-height: 1.45; margin: 0 0 var(--lg);
  max-width: 36ch;
}
.pdp-profile {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px var(--lg);
  padding: var(--lg) 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.pdp-profile__row {
  display: flex; flex-direction: column; gap: 2px;
}
.pdp-profile dt {
  font-family: var(--sans); font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-muted); margin: 0;
}
.pdp-profile dd {
  font-family: var(--serif); font-size: var(--body);
  margin: 0; line-height: 1.3;
}
.pdp-profile dd em { font-style: italic; }

.pdp-price {
  display: flex; align-items: baseline; gap: var(--md);
  padding: var(--md) 0;
}
.pdp-price__main {
  font-family: var(--serif); font-size: var(--display-md);
  font-weight: 400; line-height: 1;
}
.pdp-price__unit {
  font-family: var(--serif); font-style: italic;
  color: var(--ink-muted); font-size: var(--body);
}
.pdp-price__inkl {
  font-size: 13px; color: var(--ink-muted);
  letter-spacing: 0.02em;
}

.pdp-stock {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 13.5px;
  letter-spacing: 0.08em; font-weight: 600;
  color: var(--wirsching-green-ui);
  text-transform: uppercase;
}
.pdp-stock__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--wirsching-green-ui);
  box-shadow: 0 0 0 3px rgba(46, 90, 46, 0.18);
}
.pdp-stock--low { color: var(--wirsching-red); }
.pdp-stock--low .pdp-stock__dot { background: var(--wirsching-red); box-shadow: 0 0 0 3px rgba(184, 0, 7, 0.18); }

.pdp-qty {
  display: flex; gap: var(--md); align-items: center;
  flex-wrap: wrap;
}
.pdp-stepper {
  display: inline-flex; border: 1px solid var(--ink);
  height: 56px;
}
.pdp-stepper button {
  width: 48px; height: 100%; background: transparent;
  border: none; font-size: 18px; cursor: pointer;
  color: var(--ink); font-family: var(--sans);
  transition: background var(--dur-base) var(--ease);
}
.pdp-stepper button:hover { background: var(--ink); color: var(--paper); }
.pdp-stepper input {
  width: 64px; border: none; height: 100%;
  text-align: center; font-family: var(--serif);
  font-size: var(--body-edit); background: transparent;
  -moz-appearance: textfield;
}
.pdp-stepper input::-webkit-outer-spin-button,
.pdp-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.pdp-quick {
  display: flex; gap: var(--xs); flex-wrap: wrap;
}
.pdp-quick button {
  background: transparent; border: 1px solid var(--hairline);
  padding: 6px 12px; cursor: pointer;
  font-family: var(--sans); font-size: 13px;
  letter-spacing: 0.08em; font-weight: 600;
  color: var(--ink-muted);
  transition: all var(--dur-base) var(--ease);
}
.pdp-quick button:hover { border-color: var(--ink); color: var(--ink); }

.pdp-gift {
  display: flex; align-items: flex-start; gap: var(--sm);
  font-family: var(--serif); font-style: italic;
  font-size: var(--body); color: var(--ink);
  padding: var(--md) 0;
  border-top: 1px solid var(--hairline);
}
.pdp-gift input[type="checkbox"] {
  width: 18px; height: 18px; margin-top: 4px; flex-shrink: 0;
}
.pdp-gift summary {
  cursor: pointer; list-style: none;
  font-style: normal;
  font-family: var(--sans); font-size: 13px;
  letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-muted);
  margin-top: 8px;
}
.pdp-gift textarea {
  width: 100%; min-height: 80px;
  border: 1px solid var(--hairline); padding: 10px 12px;
  font-family: var(--serif); font-size: var(--body);
  background: var(--paper); margin-top: 8px;
  resize: vertical;
}

.pdp-add { width: 100%; }
.pdp-add[data-added="true"] { background: var(--wirsching-green); color: var(--paper); }

.pdp-shipnote {
  font-family: var(--serif); font-style: italic;
  font-size: 0.9375rem; color: var(--ink-muted);
  padding: var(--md) 0 0;
  margin: 0;
}

.pdp-listno {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 13px; color: var(--ink-muted);
  letter-spacing: 0.04em; margin-top: var(--md);
}
.pdp-listno em { font-style: italic; color: var(--ink); }

/* ============ UTILITY-KLASSEN (Inline-Style-Migration) ============ */
.section-intro {
  text-align: center;
  max-width: 880px;
  margin: 0 auto var(--3xl);
}
.section-intro--narrow { max-width: 720px; }
.section-intro > .body-edit,
.section-intro > .editorial-lead { margin-top: var(--xl); margin-inline: auto; }
.section-intro > .body-edit:last-child,
.section-intro > .editorial-lead:last-child { margin-bottom: 0; }
.section-intro--tight { max-width: 720px; margin-bottom: var(--2xl); }
.editorial-heading {
  font-family: var(--serif);
  font-size: var(--headline);
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
}
.editorial-sub {
  font-family: var(--serif);
  font-size: var(--title);
  font-weight: 400;
  line-height: 1.3;
  margin-bottom: var(--lg);
}
.cta-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--xl);
  align-items: center;
  padding: var(--2xl);
  background: var(--paper-deep);
  position: relative;
  z-index: 1;
}
.cta-split__actions {
  display: flex;
  gap: var(--md);
  flex-wrap: wrap;
  justify-self: end;
}
@media (max-width: 760px) {
  .cta-split { grid-template-columns: 1fr; }
  .cta-split__actions { justify-self: start; }
}
.link-paper { color: var(--paper); text-decoration: none; }
.link-paper:hover { text-decoration: underline; }
.link-green {
  color: var(--wirsching-green-ui);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
.link-green:hover { color: var(--wirsching-green); }
.drenched .link-green { color: var(--paper); }
.logo-invert { filter: invert(1); }
.editorial-lead {
  font-family: var(--serif);
  font-size: var(--headline);
  font-weight: 400;
  line-height: 1.4;
  max-width: 880px;
  margin: 0 auto var(--3xl);
}
.section-quote {
  font-family: var(--serif);
  font-size: var(--title);
  font-style: italic;
  font-weight: 400;
  line-height: 1.35;
  margin: 0;
}
.section-signature {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-muted);
  margin-top: var(--lg);
}
.price-line {
  font-family: var(--serif);
  margin: var(--xl) 0 var(--lg);
}
.price-line__amount {
  font-size: 1.5rem;
  font-weight: 400;
}
.price-line__per {
  color: var(--ink-muted);
  margin-left: var(--md);
}

/* PDP STORY */
.pdp-story {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
@media (max-width: 880px) { .pdp-story { grid-template-columns: 1fr; } }
.pdp-story__photo {
  aspect-ratio: 5 / 6;
  width: 100%;
  overflow: hidden;
}
.pdp-story__photo img {
  width: 100%; height: 100%; object-fit: cover;
}
.pdp-story__caption {
  font-family: var(--serif); font-style: italic;
  font-size: var(--body); color: var(--ink-muted);
  margin-top: var(--md);
}

/* PDP ACCORDION */
.pdp-accordion {
  border-top: 1px solid var(--hairline);
}
.pdp-accordion details {
  border-bottom: 1px solid var(--hairline);
}
.pdp-accordion summary {
  cursor: pointer; list-style: none;
  padding: var(--lg) 0;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--serif); font-size: var(--body-edit);
  font-weight: 400;
}
.pdp-accordion summary em { font-style: italic; }
.pdp-accordion summary::-webkit-details-marker { display: none; }
.pdp-accordion summary::after {
  content: "+"; font-family: var(--sans); font-weight: 400;
  font-size: 24px; line-height: 1; color: var(--ink-muted);
  transition: transform var(--dur-base) var(--ease);
}
.pdp-accordion details[open] summary::after { content: "−"; }
.pdp-accordion__body {
  padding: 0 0 var(--lg);
}
.pdp-accordion__body p {
  font-family: var(--serif); font-size: var(--body);
  line-height: 1.55; margin: 0 0 var(--md); max-width: 65ch;
}
.pdp-accordion__body em { font-style: italic; }
.pdp-keydata {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--md) var(--xl);
  margin: var(--md) 0;
}
.pdp-keydata dt {
  font-family: var(--sans); font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-muted);
  margin: 0;
}
.pdp-keydata dd {
  font-family: var(--serif); font-size: var(--body);
  margin: 0;
}

/* PDP STICKY MOBILE BAR */
.pdp-sticky {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--paper);
  border-top: 1px solid var(--hairline);
  padding: var(--md) var(--gutter);
  display: none;
  align-items: center;
  gap: var(--md);
  z-index: 80;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
}
.pdp-sticky__price {
  font-family: var(--serif); font-size: var(--body-edit);
  font-weight: 400;
}
.pdp-sticky__title {
  font-family: var(--serif); font-style: italic;
  font-size: var(--micro); color: var(--ink-muted);
}
.pdp-sticky__col { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.pdp-sticky .btn { min-height: 48px; padding: 12px 20px; }
@media (max-width: 880px) {
  .pdp-sticky { display: flex; }
  body.pdp-page { padding-bottom: 80px; }
}


/* ============ FINDER ENTRY CARDS (Weine-Seite) ============ */
.finder-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 32px);
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 880px) { .finder-cards { grid-template-columns: 1fr; max-width: 480px; } }

.finder-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--hairline);
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
  text-decoration: none;
  text-align: left;
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.finder-card:hover {
  transform: translateY(-2px);
  border-color: var(--ink);
}
.finder-card__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  margin: 0;
}
.finder-card__photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms var(--ease);
}
.finder-card:hover .finder-card__photo img { transform: scale(1.02); }
.finder-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--xs);
  padding: var(--lg) var(--lg) var(--xl);
  flex: 1;
}
.finder-card__num {
  font-family: var(--serif);
  font-style: italic;
  color: var(--wirsching-green-ui);
  font-size: var(--micro);
  letter-spacing: 0.04em;
  margin-bottom: var(--xs);
}
.finder-card__title {
  font-family: var(--serif);
  font-size: var(--title);
  font-weight: 400;
  line-height: 1.2;
  display: block;
  margin: 0;
}
.finder-card__title em { font-style: italic; }
.finder-card__sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--body);
  color: var(--ink-muted);
  line-height: 1.4;
  margin-top: var(--xs);
  display: block;
}
.finder-card::after {
  content: "→";
  position: absolute;
  right: var(--lg);
  bottom: var(--lg);
  font-family: var(--sans);
  font-size: 18px;
  color: var(--ink-muted);
  transition: transform var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.finder-card:hover::after {
  transform: translateX(4px);
  color: var(--wirsching-green-ui);
}


/* ============ REB-BAR (Lagen: Rebsorten-Verteilung) ============ */
.reb-bar {
  max-width: 1100px;
  margin: 0 auto;
}
.reb-bar__row {
  display: flex;
  height: clamp(120px, 14vw, 180px);
  border: 1px solid var(--hairline);
  overflow: hidden;
}
.reb-seg {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: var(--lg);
  color: var(--paper);
  overflow: hidden;
  transition: filter var(--dur-base) var(--ease);
}
.reb-seg:hover { filter: brightness(1.08); }
.reb-seg + .reb-seg { border-left: 1px solid var(--hairline-paper); }
.reb-seg--silvaner  { background: var(--wirsching-green); }
.reb-seg--burgunder { background: var(--wirsching-green-soft); }
.reb-seg--riesling  { background: var(--wirsching-gold); }
.reb-seg--rot       { background: #5a1418; }

.reb-seg__pct {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--display-xl);
  line-height: 1;
  color: var(--paper);
  white-space: nowrap;
}
.reb-seg__pct small {
  font-size: 0.5em;
  margin-left: 4px;
  letter-spacing: 0.02em;
}
.reb-seg--riesling .reb-seg__pct { color: var(--ink); }

.reb-bar__labels {
  display: flex;
  margin-top: var(--md);
  gap: 0;
}
.reb-label {
  display: flex;
  flex-direction: column;
  padding: var(--md) var(--md) 0 0;
  min-width: 0;
}
.reb-label + .reb-label { padding-left: var(--md); }
.reb-label__name {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--xs);
}
.reb-label__caption {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--micro);
  color: var(--ink-muted);
  line-height: 1.45;
}

@media (max-width: 760px) {
  .reb-bar__row {
    flex-direction: column;
    height: auto;
  }
  .reb-seg {
    flex: 0 0 auto !important;
    min-height: 60px;
    padding: var(--md) var(--lg);
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
  }
  .reb-seg + .reb-seg { border-left: none; border-top: 1px solid var(--hairline-paper); }
  .reb-seg__pct { font-size: clamp(1.5rem, 6vw, 2.25rem); }
  .reb-bar__labels {
    flex-direction: column;
    gap: var(--md);
    margin-top: var(--lg);
  }
  .reb-label + .reb-label { padding-left: 0; padding-top: var(--md); border-top: 1px solid var(--hairline); }
  .reb-label { flex: 1 !important; }
}


/* ============ SERVICE BAND (Shop) ============
   Keine Rahmen-Hairlines: Probierpaket darüber ist paper-warm, Service-Band
   ist paper, Newsletter darunter ist drenched-green. Die zwei Farbsprünge
   liefern die Trennung von selbst. */
.service-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--xl);
  padding: var(--2xl) 0;
}
.service-col {
  display: flex;
  flex-direction: column;
  gap: var(--sm);
}
.service-col__icon {
  width: 32px; height: 32px;
  color: var(--wirsching-green-ui);
  margin-bottom: var(--md);
  flex-shrink: 0;
}
.service-col__text {
  font-family: var(--serif);
  font-size: var(--body-edit);
  margin: 0;
  line-height: 1.4;
}
.service-col__text em { font-style: italic; }
@media (max-width: 880px) {
  .service-band { grid-template-columns: 1fr 1fr; gap: var(--lg) var(--xl); }
}
@media (max-width: 540px) {
  .service-band { grid-template-columns: 1fr; }
}

/* ===========================================================
   INSTAGRAM-STRIPE  (Strukturgramm-Pflicht, Stand 2026-05-19)
   ----------------------------------------------------------- */
.instagram-stripe {
  background: var(--paper);
  padding: clamp(48px, 6vw, 96px) 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.instagram-stripe__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--xl);
  margin-bottom: var(--xl);
  padding-bottom: var(--lg);
  border-bottom: 1px solid var(--hairline);
  flex-wrap: wrap;
}
.instagram-stripe__handle {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--headline);
  line-height: 1.1;
  margin: var(--xs) 0 0;
  letter-spacing: -0.012em;
}
.instagram-stripe__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(8px, 1vw, 16px);
}
.instagram-stripe__tile {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--paper-deep);
  position: relative;
}
.instagram-stripe__tile::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(26,26,26,0);
  transition: background var(--dur-slow) var(--ease);
  pointer-events: none;
}
.instagram-stripe__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-expo);
}
.instagram-stripe__tile:hover img { transform: scale(1.04); }
.instagram-stripe__tile:hover::after { background: rgba(26,26,26,0.08); }
.instagram-stripe__tile:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 3px;
}
@media (max-width: 900px) {
  .instagram-stripe__grid { grid-template-columns: repeat(3, 1fr); }
  .instagram-stripe__tile:nth-child(n+4) { display: none; }
}
@media (max-width: 540px) {
  .instagram-stripe__grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
}

/* Footer · Mitgliedschaften & Zertifizierungen
   Cert-Row sitzt im footer__band (full width). Logos auf gleicher Höhe,
   Wine-in-Moderation (Pillenform) bekommt eigene Variante. */
.footer__certs-row {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
  flex-wrap: wrap;
  row-gap: var(--md);
}
.footer__cert {
  display: block;
  height: 34px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.78;
  flex-shrink: 0;
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.footer__cert:hover {
  opacity: 1;
  transform: translateY(-1px);
}
/* Wine-in-Moderation ist eine horizontale Pille, sieht bei 34px winzig aus.
   Optisches Ausgleichen: etwas kleinere Höhe, eigenes Hairline-Containment. */
.footer__cert--wide {
  height: 26px;
  padding: 4px 10px;
  border: 1px solid var(--hairline-paper);
  box-sizing: content-box;
  opacity: 0.72;
}

/* ===========================================================
   VDP-KLASSIFIKATIONS-MARKEN (GG, 1L)
   ----------------------------------------------------------- */
.chip__mark {
  display: inline-block;
  height: 1.2em;
  width: auto;
  vertical-align: -0.2em;
  margin-right: 0.4em;
  /* SVG ist anthrazit (#1D1D1B) — auf goldenem/olivem Chip auf currentColor mappen */
  filter: brightness(0);
}
/* Chip-Mark: text spricht für sich, Icon wird in Outline-Chips ausgeblendet */
.chip .chip__mark { display: none; }
/* VDP-Tier-Regeln aus der alten flachen Stack-Pyramide (jetzt visualisiert,
   siehe Lagen-Section weiter oben) — alte Selektoren archiviert. */

/* ===========================================================
   INTERAKTIVE LAGENKARTE  (Lagen.html, schematisch)
   ----------------------------------------------------------- */
.lagen-map {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
  margin-top: var(--xl);
}
.lagen-map__svg {
  display: block;
  width: 100%;
  height: auto;
  background: linear-gradient(180deg, #FAF5E9 0%, #F1E9D4 100%);
  border: 1px solid var(--hairline);
  user-select: none;
}

/* Lagen-Polygone */
.lage-poly { cursor: pointer; outline: none; }
.lage-poly path {
  transition: fill-opacity .35s ease, stroke-width .35s ease;
}
.lage-poly__badge { transition: transform .35s ease; transform-origin: center; transform-box: fill-box; }
.lage-poly text { pointer-events: none; }

.lage-poly:hover path,
.lage-poly:focus-visible path,
.lage-poly.is-active path {
  fill-opacity: 0.55;
  stroke-width: 3;
}
.lage-poly:hover .lage-poly__badge,
.lage-poly:focus-visible .lage-poly__badge,
.lage-poly.is-active .lage-poly__badge {
  transform: scale(1.18);
}
.lage-poly:focus-visible path {
  stroke-dasharray: 6 4;
}

/* Info-Box rechts */
.lagen-map__info {
  background: var(--paper);
  border: 1px solid var(--hairline);
  padding: clamp(20px, 2.5vw, 36px);
  position: sticky;
  top: 100px;
  min-height: 320px;
}
.lagen-map__info-hint {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-muted);
  text-align: center;
  margin: var(--2xl) 0;
  font-size: 1rem;
}
.lagen-map__info .chip {
  margin-bottom: var(--lg);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.lagen-map__info h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: var(--headline);
  line-height: 1.15;
  margin: 0 0 var(--lg);
  letter-spacing: -0.01em;
}
.lagen-map__info dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 18px;
  margin: 0 0 var(--lg);
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.45;
}
.lagen-map__info dl > div { display: contents; }
.lagen-map__info dt {
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--ink-muted);
  padding-top: 2px;
}
.lagen-map__info dd { margin: 0; }
.lagen-map__info dd em { font-style: italic; color: var(--ink); }
.lagen-map__info p {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
  margin: 0 0 var(--lg);
  color: var(--ink);
}

@media (max-width: 900px) {
  .lagen-map { grid-template-columns: 1fr; }
  .lagen-map__info { position: static; min-height: 0; }
}

/* ============ LAGEN §2 Franken & Trias (Magazine-Spread) ============
   Linke Spalte führt mit Eyebrow + Display, rechte Spalte trägt 3 Body-Absätze
   mit dem Trias-Argument und dem Bocksbeutel-Link. */
.franken-spread {
  position: relative;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
  padding-top: clamp(28px, 4vh, 56px);
}
.franken-spread::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 1px;
  background: var(--wirsching-gold);
}
.franken-spread__lead {
  display: flex; flex-direction: column; gap: var(--lg);
  position: sticky;
  top: calc(var(--header-h, 88px) + 24px);
}
.franken-spread__lead .eyebrow { margin: 0; }
.franken-spread__lead .display { margin: 0; }
.franken-spread__body {
  display: flex;
  flex-direction: column;
  gap: var(--lg);
}
.franken-spread__body .body-edit {
  font-size: var(--body-edit);
  line-height: 1.6;
  margin: 0;
  max-width: 58ch;
  color: var(--ink);
}
.franken-spread__body .body-edit em { font-style: italic; }
.franken-spread__link {
  margin-top: var(--xs);
  display: inline-flex;
}
@media (max-width: 900px) {
  .franken-spread {
    grid-template-columns: 1fr;
    gap: var(--xl);
  }
  .franken-spread__lead { position: static; }
}

/* ============ LAGEN §6 Reb-Glossar (Stil-Porträts) ============
   4-spaltiges Mini-Glossar unter der Reb-Bar. Editorial-typografisch,
   nicht als Card-Grid. */
.reb-glossar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(28px, 3vw, 48px);
  margin-top: clamp(60px, 8vh, 120px);
  padding-top: clamp(40px, 5vh, 64px);
  border-top: 1px solid var(--hairline);
}
@media (max-width: 880px) { .reb-glossar { grid-template-columns: repeat(2, 1fr); gap: clamp(32px, 4vw, 48px); } }
@media (max-width: 540px) { .reb-glossar { grid-template-columns: 1fr; } }
.reb-glossar__item {
  display: flex; flex-direction: column;
  gap: var(--sm);
}
.reb-glossar__name {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--title-sm);
  font-weight: 400;
  margin: 0;
  color: var(--ink);
}
.reb-glossar__caption {
  font-family: var(--serif);
  font-size: var(--body-edit);
  line-height: 1.55;
  color: var(--ink-muted);
  margin: 0;
  text-wrap: pretty;
}
.reb-glossar__caption em { font-style: italic; color: var(--ink); }

/* ============ WEINE-SEITE: §2 Einstieg (Magazine-Opener) ============
   Asymmetrische 2-Spalter: Eyebrow + Title links (7fr), Body rechts (5fr).
   Gold-Hairline als Kapitel-Marker oben. Body-Spalte bekommt Baseline-Padding,
   damit der Body-Text optisch zur Title-Höhe ansetzt, nicht zur Eyebrow. */
.einstieg {
  position: relative;
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
  padding-top: clamp(28px, 4vh, 56px);
}
.einstieg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 1px;
  background: var(--wirsching-gold);
}
.einstieg__lead { display: flex; flex-direction: column; gap: var(--lg); }
.einstieg__lead .eyebrow { margin: 0; }
.einstieg__lead .display { margin: 0; }
.einstieg__body { padding-top: clamp(60px, 8vh, 110px); }
.einstieg__body .body-edit {
  font-size: var(--body-edit);
  line-height: 1.6;
  margin: 0;
  max-width: 50ch;
  color: var(--ink);
}
.einstieg__body .body-edit em { font-style: italic; }
@media (max-width: 900px) {
  .einstieg {
    grid-template-columns: 1fr;
    gap: var(--xl);
  }
  .einstieg__body { padding-top: 0; }
}

/* ============ WEINE-SEITE: Silvaner-Stats (Fokusmodul) ============ */
.silvaner-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--lg);
  margin: var(--xl) 0;
  padding-top: var(--xl);
  border-top: 1px solid var(--hairline);
}
.silvaner-stats__num {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 400;
  display: block;
  line-height: 1;
  margin-bottom: var(--xs);
}
.silvaner-stats__label {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ============ WEINE-SEITE: Weine nach Anlass ============
   Editorial 4er-Grid mit italic-serif Numeralen als Anker.
   Hairline oben statt Card-Border. Quiet, hierarchisch. */
.anlass-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 48px);
  margin-top: clamp(40px, 6vh, 80px);
}
@media (max-width: 980px) { .anlass-grid { grid-template-columns: repeat(2, 1fr); gap: clamp(28px, 3.5vw, 40px); } }
@media (max-width: 540px) { .anlass-grid { grid-template-columns: 1fr; } }

.anlass-card {
  border-top: 1px solid var(--hairline);
  padding-top: var(--lg);
  display: flex;
  flex-direction: column;
  gap: var(--md);
  /* Karte ist Link: Default-Underline weg, eigene Hover-Logik */
  color: inherit;
  text-decoration: none;
  transition: border-color var(--dur-base) var(--ease);
}
.anlass-card:hover {
  border-top-color: var(--wirsching-gold);
}
.anlass-card__icon {
  width: clamp(36px, 3.4vw, 44px);
  height: clamp(36px, 3.4vw, 44px);
  color: var(--wirsching-green-ui);
  margin-bottom: var(--xs);
  flex-shrink: 0;
  transition: transform var(--dur-base) var(--ease);
}
.anlass-card:hover .anlass-card__icon {
  transform: translateY(-2px);
}
.anlass-card__title {
  font-family: var(--serif);
  font-size: var(--title-sm);
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
  text-wrap: balance;
}
.anlass-card__sub {
  font-family: var(--serif);
  font-size: var(--body-edit);
  line-height: 1.5;
  color: var(--ink-muted);
  margin: 0 0 var(--md);
  text-wrap: pretty;
}
.anlass-card__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wirsching-green-ui);
  transition: gap var(--dur-base) var(--ease);
}
.anlass-card__cta::after {
  content: "→";
  display: inline-block;
  transition: transform var(--dur-base) var(--ease);
}
.anlass-card:hover .anlass-card__cta { gap: 12px; }

/* ============ WEINE-SEITE: Empfehlungen-Footer ============ */
.empfehlungen__footer {
  text-align: center;
  margin-top: clamp(40px, 6vh, 80px);
}

/* ============ CTA-Photo-Section: Foto als Section-Hintergrund ============
   Der paper-deep Karton (cta-split) bleibt unverändert. Section drumrum bekommt
   ein Foto mit Scrim, sodass die Box wie auf einer Foto-Bühne sitzt. */
.cta-photo-section {
  position: relative;
  isolation: isolate;
  background: var(--wirsching-green);
}
.cta-photo-section__bg {
  position: absolute; inset: 0; z-index: 0;
  margin: 0;
  overflow: hidden;
}
.cta-photo-section__bg img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 55%;
}
.cta-photo-section__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(8, 10, 8, 0.66) 0%,
    rgba(8, 10, 8, 0.78) 100%);
}
.cta-photo-section .cta-split__text {
  display: flex;
  flex-direction: column;
  gap: var(--md);
}
.cta-photo-section .cta-split__sub {
  font-family: var(--serif);
  font-size: var(--body-edit);
  line-height: 1.5;
  color: var(--ink-muted);
  margin: 0;
  max-width: 50ch;
}
.cta-photo-section .editorial-heading {
  font-size: var(--display-md);
  line-height: 1.1;
  letter-spacing: -0.012em;
  max-width: 22ch;
}

/* ============ VINOLIN STICKER (Sticky KI-Weinberater) ============
   Magenta bleibt als Brand-Akzent erhalten (Icon + Wortmarke), aber das
   Pillen-BG ist paper, damit der Sticker nicht gegen den Wirsching-Stil
   schreit. Subtile Magenta-Border als Brand-Hinweis. */
.vinolin-sticker {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px 11px 12px;
  background: var(--paper);
  color: #B81860;
  border: 1px solid rgba(216, 27, 115, 0.28);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.10),
    0 2px 6px rgba(0, 0, 0, 0.06);
  transition: transform var(--dur-base) var(--ease-expo),
              border-color var(--dur-base) var(--ease-expo),
              box-shadow var(--dur-base) var(--ease-expo);
}
.vinolin-sticker:hover {
  transform: translateY(-2px);
  border-color: rgba(216, 27, 115, 0.6);
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.12),
    0 4px 10px rgba(216, 27, 115, 0.10);
}
.vinolin-sticker:focus-visible {
  outline: 2px solid #D81B73;
  outline-offset: 4px;
}
.vinolin-sticker__icon {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: #D81B73;
}
.vinolin-sticker__icon svg { width: 100%; height: 100%; }
.vinolin-sticker__label { color: #1A1A1A; }
.vinolin-sticker__label strong { color: #D81B73; font-weight: 700; }
@media (max-width: 540px) {
  .vinolin-sticker { bottom: 17px; right: 17px; padding: 12px 17px 12px 12px; font-size: 13.5px; }
  .vinolin-sticker__icon { width: 22px; height: 22px; }
}

/* ============ WEINGUT §1 Wurzeln (Text + 6er Facts-Grid) ============ */
.wurzeln__lead {
  display: flex; flex-direction: column; gap: var(--md);
  max-width: 760px;
  margin: 0 auto clamp(56px, 8vw, 112px);
  text-align: center;
  align-items: center;
}
.wurzeln__lead .eyebrow { margin: 0; }
.wurzeln__lead .display { margin: 0; }
.wurzeln__lead .body-edit { margin: 0; max-width: 58ch; }
.wurzeln-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.wurzeln-fact {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--md);
  padding: clamp(28px, 3vw, 44px) clamp(16px, 2vw, 28px);
  min-width: 0;
  position: relative;
}
.wurzeln-fact + .wurzeln-fact::before {
  content: "";
  position: absolute;
  left: 0; top: 16%; bottom: 16%;
  width: 1px;
  background: var(--hairline);
}
.wurzeln-fact__num {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums tabular-nums;
}
.wurzeln-fact__num small {
  font-size: 0.45em;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
  margin-left: 0.2em;
  font-variant-numeric: normal;
}
.wurzeln-fact__num em { font-style: italic; }
.wurzeln-fact__num--text {
  font-size: clamp(1.25rem, 1.9vw, 1.625rem);
  font-style: italic;
  line-height: 1.15;
  letter-spacing: 0;
}
.wurzeln-fact__label {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  line-height: 1.45;
}
@media (max-width: 900px) {
  .wurzeln-facts { grid-template-columns: repeat(3, 1fr); }
  .wurzeln-fact:nth-child(3n+1)::before { display: none; }
  .wurzeln-fact:nth-child(n+4) {
    border-top: 1px solid var(--hairline);
  }
}
@media (max-width: 560px) {
  .wurzeln-facts { grid-template-columns: repeat(2, 1fr); }
  .wurzeln-fact::before { display: none; }
  .wurzeln-fact:nth-child(odd) {
    border-right: 1px solid var(--hairline);
  }
  .wurzeln-fact:nth-child(n+3) {
    border-top: 1px solid var(--hairline);
  }
}

/* ============ WEINGUT §2 Unsere Werte — Fullscreen Stage ============ */
.werte-stage {
  position: relative;
  height: clamp(640px, 92vh, 940px);
  width: 100%;
  overflow: hidden;
  color: var(--paper);
  isolation: isolate;
}
.werte-track {
  position: absolute;
  inset: 0;
}
.werte-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 720ms var(--ease);
}
.werte-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
.werte-slide__photo {
  margin: 0;
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.werte-slide__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 9000ms linear;
  will-change: transform;
}
.werte-slide.is-active .werte-slide__photo img {
  transform: scale(1.12);
}
.werte-slide__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to top,
      oklch(0.18 0.02 145 / 0.78) 0%,
      oklch(0.18 0.02 145 / 0.55) 32%,
      oklch(0.18 0.02 145 / 0.18) 62%,
      oklch(0.18 0.02 145 / 0.42) 100%
    );
  pointer-events: none;
}
.werte-slide__text {
  position: absolute;
  left: clamp(24px, 6vw, 96px);
  right: clamp(24px, 6vw, 96px);
  bottom: clamp(96px, 14vh, 180px);
  max-width: 36ch;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.6vh, 20px);
  color: var(--paper);
  transform: translateY(24px);
  opacity: 0;
  transition:
    opacity 760ms var(--ease) 120ms,
    transform 760ms var(--ease) 120ms;
}
.werte-slide.is-active .werte-slide__text {
  opacity: 1;
  transform: translateY(0);
}
.werte-slide__icon {
  width: clamp(36px, 3.4vw, 52px);
  height: clamp(36px, 3.4vw, 52px);
  color: var(--wirsching-gold-bright);
  margin: 0;
}
.werte-slide__eyebrow {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wirsching-gold-bright);
  margin: 0;
}
.werte-slide__title {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--paper);
  text-wrap: balance;
}
.werte-slide__title em {
  font-style: italic;
  color: var(--wirsching-gold-bright);
}
.werte-slide__body {
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 1.05rem + 0.25vw, 1.25rem);
  line-height: 1.5;
  color: var(--paper-strong);
  margin: 0;
  max-width: 42ch;
}

/* Werte-Intro: zentriert auf Paper, leitet die Stage ein */
.werte-intro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--md);
}
.werte-intro .display { margin: 0; }
.werte-intro__sub {
  margin: 0;
  color: var(--ink-muted);
  max-width: 48ch;
}

/* Tab-Navigation unten — Nummern + Labels statt anonyme Dots */
.werte-stage__nav {
  position: absolute;
  left: clamp(24px, 6vw, 96px);
  right: clamp(24px, 6vw, 96px);
  bottom: clamp(28px, 4vh, 48px);
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(8px, 1.4vw, 20px);
  padding-top: clamp(14px, 1.6vh, 22px);
  border-top: 1px solid rgb(246 241 232 / 22%);
}
.werte-tab {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 6px 0 0;
  cursor: pointer;
  text-align: left;
  color: var(--paper-muted);
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  transition: color var(--dur-base) var(--ease);
  font: inherit;
}
.werte-tab::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--wirsching-gold-bright);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-slow) var(--ease-expo);
}
.werte-tab.is-active::before,
.werte-tab[aria-selected="true"]::before { transform: scaleX(1); }
.werte-tab.is-active,
.werte-tab[aria-selected="true"] { color: var(--paper); }
.werte-tab:hover { color: var(--paper-soft); }
.werte-tab:focus-visible {
  outline: 1px solid var(--wirsching-gold-bright);
  outline-offset: 4px;
  color: var(--paper);
}
.werte-tab__num {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--wirsching-gold-bright);
}
.werte-tab__label {
  font-family: var(--serif);
  font-size: clamp(0.9375rem, 0.9rem + 0.3vw, 1.125rem);
  font-style: italic;
  line-height: 1.2;
}

/* Auto-advance Progress-Linie unter aktivem Tab */
.werte-tab.is-active .werte-tab__progress {
  display: block;
}
.werte-tab__progress {
  display: none;
  position: absolute;
  top: -1px; left: 0;
  height: 1px;
  background: var(--paper);
  transform-origin: left center;
}

@media (max-width: 760px) {
  .werte-stage { height: clamp(560px, 86vh, 760px); }
  .werte-slide__text {
    bottom: clamp(112px, 18vh, 160px);
    max-width: none;
  }
  .werte-slide__title { font-size: clamp(2.25rem, 9.5vw, 3.5rem); }
  .werte-stage__nav { grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .werte-tab__label { display: none; }
  .werte-tab__num { font-size: 14.5px; }
}

/* Reduced Motion: Ken-Burns aus, Slide-Translate aus, Opacity-Fade beibehalten */
@media (prefers-reduced-motion: reduce) {
  .werte-slide__photo img,
  .werte-slide.is-active .werte-slide__photo img {
    transition: none;
    transform: none;
  }
  .werte-slide__text,
  .werte-slide.is-active .werte-slide__text {
    transition: opacity 200ms linear;
    transform: none;
  }
  .werte-tab::before { transition: none; }
}

/* ============ WEINGUT §3 Was uns prägt (Photo + 5 Bullets) ============ */
.praegt {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.praegt__photo {
  margin: 0;
  width: 100%;
  aspect-ratio: 5 / 6;
  max-height: 72vh;
  overflow: hidden;
  position: sticky;
  top: 96px;
  min-width: 0;
  background: oklch(0.18 0.02 145);
}
.praegt__list { min-width: 0; }
.praegt__photo img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 38%;
}
.praegt__caption {
  position: absolute;
  left: clamp(16px, 2vw, 28px);
  right: clamp(16px, 2vw, 28px);
  bottom: clamp(16px, 2vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--paper);
  text-shadow: 0 1px 12px oklch(0.18 0.02 145 / 0.7);
  pointer-events: none;
}
.praegt__caption-line {
  font-family: var(--serif);
  font-size: clamp(1rem, 1.1vw, 1.125rem);
  font-style: italic;
  line-height: 1.2;
}
.praegt__caption-line em {
  font-style: normal;
  color: var(--wirsching-gold-bright);
  margin: 0 0.1em;
}
.praegt__caption-meta {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper-muted);
}
.praegt__list { display: flex; flex-direction: column; gap: var(--lg); min-width: 0; }
.praegt__list .display {
  color: var(--ink);
  margin: 0;
  hyphens: auto;
}
.praegt__list .eyebrow { color: var(--ink-muted); }
.praegt__intro {
  font-family: var(--serif);
  font-size: var(--body-edit);
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  max-width: 50ch;
}
.praegt__intro em { color: var(--ink); font-style: italic; }
.praegt__bullets {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.praegt__bullet {
  padding: clamp(20px, 2.4vw, 32px) 0;
  border-top: 1px solid var(--hairline);
}
.praegt__bullet:last-child { border-bottom: 1px solid var(--hairline); }
.praegt__bullet dt {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--title-sm);
  font-weight: 400;
  color: var(--ink);
  margin-bottom: var(--xs);
}
.praegt__bullet dd {
  font-family: var(--serif);
  font-size: var(--body-edit);
  line-height: 1.5;
  color: var(--ink-muted);
  margin: 0;
}
@media (max-width: 900px) {
  .praegt { grid-template-columns: 1fr; gap: var(--xl); }
  .praegt__photo {
    position: static;
    aspect-ratio: 4 / 3;
    max-height: none;
  }
}

/* ============ WEINGUT §4 Team-Spread (Text + 6 Portraits) ============ */
.team-spread {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.team-spread__lead {
  display: flex; flex-direction: column; gap: var(--md);
  min-width: 0;
}
.team-spread__lead .display {
  margin: 0;
  hyphens: auto;
}
.team-spread__lead .body-edit { margin: 0; max-width: 48ch; }
.team-spread__cta { margin-top: var(--md); align-self: flex-start; }
.team-portraits {
  list-style: none;
  margin: 0;
  padding: clamp(24px, 3vw, 40px) 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3vw, 44px) clamp(16px, 2vw, 28px);
  min-width: 0;
  border-top: 1px solid var(--hairline);
}
.team-portrait {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  text-align: center;
}
.team-portrait__photo {
  margin: 0 0 var(--sm);
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--paper-warm);
}
.team-portrait__photo img {
  width: 100%; height: 100%; object-fit: cover;
  /* Gesicht in obere Bildhälfte ziehen, damit Köpfe nicht abgeschnitten werden */
  object-position: 50% 22%;
  transition: transform 600ms var(--ease-expo);
}
.team-portrait:hover .team-portrait__photo img { transform: scale(1.04); }
.team-portrait__name {
  font-family: var(--serif);
  font-size: var(--body-edit);
  font-weight: 400;
  color: var(--ink);
  text-wrap: balance;
}
.team-portrait__role {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
@media (max-width: 960px) {
  .team-spread { grid-template-columns: 1fr; gap: var(--2xl); }
}
@media (max-width: 760px) {
  .team-portraits { grid-template-columns: repeat(2, 1fr); }
}