/* ═══════════════════════════════════════════════════════════
   LAROCHE · GRAND TOUR — v5 „Ligne de Loire · Web“
   Designregeln (Briefing): Weiß & Weißraum als Basis,
   Dunkelblau #17365D Hauptfarbe, Weinviolett #5C2A5D präziser Akzent,
   Hellblau #E8F1F7 Infoflächen. Serifen für Titel, Sans für
   Fließtext. Fleur-de-Lis punktuell. Aufhellung statt Unschärfe.
   Website-Regeln (Veritas-Briefing): Grand Tour front and center,
   werttragende Headlines, Vormerkung statt Kaufdruck,
   Proof sichtbar, Sticky-CTA mobil.
   v5: Cinematic Hero (Ken Burns) + Scroll-Reveals + Hover-Motion.
   Mobile-first 375px, Breakpoints 720px / 1080px.
   ═══════════════════════════════════════════════════════════ */

:root {
  --navy: #17365D;
  --navy-deep: #0F2543;
  --red: #5C2A5D;
  --red-deep: #3D1A42;
  --red-soft: #B98AC0;
  --sky: #E8F1F7;
  --ink: #232A31;
  --muted: #6E7781;
  --paper: #FFFFFF;
  --ivory: #FAF8F3;
  --hairline: rgba(23, 54, 93, .16);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;
  --header-h: 68px;
  --shadow: 0 18px 50px rgba(23, 54, 93, .10);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  /* Jost Light wirkt am Bildschirm blass, die Striche sind duenner als
     ein Pixel. Fliesstext laeuft deshalb auf 400; Navigation, Eingabe-
     felder und Ueberschriften setzen ihr Gewicht ohnehin selbst. */
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--navy); color: var(--paper); }
img { display: block; max-width: 100%; height: auto; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 400;
  font-size: .74rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.05rem 2.3rem;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: background .3s, color .3s, border-color .3s, transform .3s;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--navy); color: var(--paper); }
.btn--primary:hover { background: var(--navy-deep); }
.btn--outline { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn--outline:hover { background: var(--navy); color: var(--paper); }
.btn--light { background: var(--paper); color: var(--navy); }
.btn--light:hover { background: var(--sky); }
.btn--ghost { border-color: rgba(255, 255, 255, .65); color: var(--paper); background: transparent; }
.btn--ghost:hover { background: var(--paper); color: var(--navy); }
.btn--block { display: block; width: 100%; }

/* ── Fleur-de-Lis ────────────────────────────────────────── */
.fleur { width: 20px; height: 27px; color: var(--navy); }

/* ── Scroll-Reveal (Bewegung beim Scrollen) ──────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2, .65, .25, 1);
}
.reveal--in { opacity: 1; transform: none; }

/* ── Age Gate ────────────────────────────────────────────── */
.agegate {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(15, 37, 67, .55);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
}
.agegate[hidden] { display: none; }
.agegate__card {
  position: relative;
  background: var(--paper);
  max-width: 430px; width: 100%;
  padding: 3.2rem 2.2rem 2.6rem;
  text-align: center;
  box-shadow: var(--shadow);
  animation: card-in .6s cubic-bezier(.2, .65, .25, 1) both;
}
@keyframes card-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.agegate__card::before {
  content: ""; position: absolute; inset: 10px;
  border: 1px solid var(--hairline);
  pointer-events: none;
}
.agegate__card .fleur { width: 26px; height: 35px; margin-bottom: .5rem; }
.agegate__brand {
  font-family: var(--serif);
  font-size: 1.45rem; letter-spacing: .5em; text-indent: .5em;
  color: var(--navy); margin-bottom: 1.4rem;
}
.agegate__title {
  font-family: var(--serif); font-weight: 500; font-size: 1.4rem;
  color: var(--ink); margin-bottom: .7rem;
}
.agegate__title em { font-style: italic; color: var(--red); }
.agegate__text { font-size: .88rem; margin-bottom: 1.8rem; color: var(--muted); }
.agegate__no {
  display: inline-block; margin-top: 1.1rem;
  font-size: .76rem; letter-spacing: .1em; color: var(--muted);
  text-decoration: none; border-bottom: 1px solid rgba(110, 119, 129, .4);
}

/* ── Header ──────────────────────────────────────────────── */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.1rem;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(12px);
  transition: box-shadow .3s;
}
.header--scrolled { box-shadow: 0 1px 0 var(--hairline); }

.header__logo {
  display: flex; align-items: center; gap: .6rem;
  text-decoration: none;
  position: absolute; left: 50%; transform: translateX(-50%);
}
.header__wordmark {
  font-family: var(--serif); font-size: 1.15rem;
  letter-spacing: .42em; text-indent: .1em;
  color: var(--navy);
}

.header__burger {
  width: 44px; height: 44px;
  background: none; border: 0; cursor: pointer;
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  padding: 10px;
}
.header__burger span {
  display: block; height: 1px; width: 24px; background: var(--navy);
  transition: transform .3s, opacity .3s;
}
.header__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.header__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.header__nav {
  position: fixed; inset: var(--header-h) 0 auto 0;
  background: var(--paper);
  display: flex; flex-direction: column;
  padding: 1rem 1.6rem 1.6rem;
  border-bottom: 1px solid var(--hairline);
  /* -110% der Panelhoehe reichte nicht: das Panel sitzt bei top:var(--header-h),
     der Rest ragte als weisse Flaeche in die Kopfzeile und schnitt das Logo an. */
  transform: translateY(calc(-100% - var(--header-h)));
  transition: transform .35s ease;
  z-index: 49;
}
.header__nav.open { transform: translateY(0); box-shadow: var(--shadow); }
.header__nav a {
  font-size: .78rem; font-weight: 300; letter-spacing: .28em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(23, 54, 93, .08);
}
.header__nav a:last-child { border-bottom: 0; }
.header__nav a:hover { color: var(--red); }

/* Grand Tour in der Navigation dezent hervorgehoben */
.header__nav a.nav__signal { color: var(--red); font-weight: 400; }
.header__nav a.nav__signal:hover { color: var(--red-deep); }

/* Desktop-CTA rechts im Header (mobil verborgen, dort Sticky-CTA) */
.header__cta { display: none; }

/* ── Hero — Cinematic, Ken-Burns-Bewegung ────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: calc(var(--header-h) + 3rem) 1.25rem 5.5rem;
  background: var(--navy-deep);
  color: var(--paper);
  overflow: hidden;
}
/* Bewegtes Vollbild-Motiv (langsamer Zoom = Ken Burns) */
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: url("../assets/cta-sonnenuntergang.jpg") center 60% / cover no-repeat;
  animation: kenburns 28s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes kenburns {
  from { transform: scale(1.03) translateY(0); }
  to   { transform: scale(1.15) translateY(-2.5%); }
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15, 37, 67, .66) 0%, rgba(15, 37, 67, .42) 42%, rgba(15, 37, 67, .8) 100%);
  pointer-events: none;
}
.hero__inner {
  position: relative; z-index: 1; max-width: 780px;
  animation: hero-in 1.1s cubic-bezier(.2, .65, .25, 1) .15s both;
}
@keyframes hero-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

.hero__kicker {
  font-size: .7rem; letter-spacing: .4em; text-transform: uppercase;
  color: rgba(255, 255, 255, .85); margin-bottom: 1.4rem;
}
.hero__kicker::before, .hero__kicker::after { content: "—"; color: var(--red-soft); margin: 0 .7rem; }

.hero__title {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2.2rem, 8vw, 3.9rem);
  line-height: 1.1;
  color: var(--paper);
  text-shadow: 0 2px 34px rgba(15, 37, 67, .5);
  margin-bottom: 1.2rem;
}
.hero__title em { font-style: italic; font-weight: 400; color: #F0ABA8; }

.hero__sub {
  max-width: 560px; margin: 0 auto 2.4rem;
  font-size: 1rem; color: rgba(255, 255, 255, .88);
}

.hero__ctas { display: flex; flex-direction: column; gap: .8rem; margin-bottom: 1.2rem; }
.hero__microcopy {
  font-size: .76rem; letter-spacing: .04em; color: rgba(255, 255, 255, .68);
}
.hero__microcopy a { color: var(--paper); }

.hero__scroll {
  position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%);
  color: var(--paper); text-decoration: none; font-size: 1.1rem;
  animation: bob 2.4s ease-in-out infinite;
  z-index: 1;
}
@keyframes bob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 7px); } }

/* ── Sections allgemein ──────────────────────────────────── */
.section { padding: 5rem 1.4rem; max-width: 1180px; margin: 0 auto; }
.section--tinted { background: var(--sky); max-width: none; }
.section--tinted > * { max-width: 1180px; margin-left: auto; margin-right: auto; }
.section--ivory { background: var(--ivory); max-width: none; }
.section--ivory > * { max-width: 1180px; margin-left: auto; margin-right: auto; }
.section--dark { background: var(--navy-deep); color: var(--paper); max-width: none; }
.section--dark > * { max-width: 1180px; margin-left: auto; margin-right: auto; }

.section__kicker {
  font-size: .68rem; font-weight: 400; letter-spacing: .34em; text-transform: uppercase;
  color: var(--navy); text-align: center; margin-bottom: .9rem;
}
.section__kicker::before, .section__kicker::after {
  content: "—"; color: var(--red); margin: 0 .6rem;
}
.section--dark .section__kicker { color: rgba(255,255,255,.75); }
.section__title {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2rem, 7vw, 3.1rem);
  text-align: center; color: var(--navy);
  line-height: 1.15; margin-bottom: 1.2rem;
}
.section--dark .section__title { color: var(--paper); }
.section__title em { font-style: italic; font-weight: 400; color: var(--red); }
.section--dark .section__title em { color: var(--red-soft); }
.section__sub {
  max-width: 620px; margin: 0 auto 3rem;
  text-align: center; font-size: 1.05rem; color: var(--muted);
}
.section--dark .section__sub { color: rgba(255, 255, 255, .72); }
.section__note {
  max-width: 640px; margin: 2.4rem auto 0;
  text-align: center; font-size: .78rem; color: var(--muted);
  letter-spacing: .03em;
}

/* Gerahmte Sektionsbilder (Passepartout) */
.section__photos { display: grid; gap: 2.2rem; max-width: 980px; margin: 0 auto 3.2rem; }
.section__photo { text-align: center; margin: 0; }
.section__photo img {
  background: var(--paper);
  padding: 10px;
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow);
  transition: transform .6s cubic-bezier(.2, .65, .25, 1), box-shadow .4s;
}
.section__photo:hover img {
  transform: scale(1.02);
  box-shadow: 0 26px 60px rgba(23, 54, 93, .16);
}
.section__photo figcaption {
  font-family: var(--serif); font-style: italic;
  font-size: .98rem; color: var(--muted); margin-top: .9rem;
}

/* ── Features (Was ist die Grand Tour) ───────────────────── */
.features { display: grid; gap: 2rem; max-width: 980px; margin: 0 auto; }
.feature { text-align: center; padding: 0 .8rem; }
.feature h3 {
  font-family: var(--serif); font-weight: 500; font-size: 1.35rem;
  color: var(--navy); margin-bottom: .4rem;
}
.feature h3::after {
  content: ""; display: block; width: 28px; height: 1px;
  background: var(--red); margin: .6rem auto 0;
  transition: width .4s ease;
}
.feature:hover h3::after { width: 48px; }
.feature p { font-size: .95rem; color: var(--muted); }

/* ── Reise-Karten (Entscheidungshilfe) ───────────────────── */
.cards { display: grid; gap: 1.4rem; }
.card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--hairline);
  padding: 2.2rem 1.6rem;
  display: flex; flex-direction: column;
  transition: box-shadow .3s, transform .3s;
}
.card:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
.card--featured {
  background: var(--navy); color: var(--paper);
  border-color: var(--navy);
  box-shadow: var(--shadow);
}
.card__badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--red); color: var(--paper);
  font-size: .58rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  padding: .35rem .9rem; white-space: nowrap;
}
/* Produktbild in der hervorgehobenen Reisekarte */
.card__media { margin: -2.2rem -1.6rem 1.6rem; }
.card--featured .card__badge { top: -1.4rem; }
.card__text { font-size: .9rem; line-height: 1.5; opacity: .72; margin-bottom: 1.2rem; text-align: center; }
/* ── Summenkarte: die komplette Grand Tour enthaelt die drei Reisen ── */
.card__spruch {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: .95rem; line-height: 1.35; color: var(--red);
  margin: -.15rem 0 .55rem;
}
.card__formel {
  font-size: .84rem; line-height: 1.5; color: var(--navy);
  font-weight: 500; margin-bottom: .5rem;
}
.card__einmal { font-size: .84rem; line-height: 1.55; color: var(--muted); margin-bottom: 1.2rem; }

/* Zweitknopf unter dem Bestellknopf, etwas zurueckgenommen */
.card__zweit { margin-top: .6rem; padding-top: .85rem; padding-bottom: .85rem; font-size: .68rem; }
.card__zweit-sub {
  display: block; margin-top: .35rem;
  font-size: .64rem; letter-spacing: .04em; text-transform: none;
  font-weight: 300; opacity: .72;
}
.card__versand { display: block; margin-top: .4rem; font-size: .68rem; letter-spacing: .06em; opacity: .62; }
.card__media img { display: block; width: 100%; height: auto; }

.card__meta {
  font-size: .64rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .7rem; text-align: center;
}
.card--featured .card__meta { color: rgba(255, 255, 255, .6); }
.card__title {
  font-family: var(--serif); font-weight: 500; font-size: 1.55rem;
  color: var(--navy); margin-bottom: 1.1rem; text-align: center;
}
.card--featured .card__title { color: var(--paper); }
.card__list { list-style: none; margin-bottom: 1.6rem; flex: 1; }
.card__list li {
  padding: .5rem 0; font-size: .88rem; text-align: center;
  border-bottom: 1px solid rgba(23, 54, 93, .08);
}
.card--featured .card__list li { border-color: rgba(255, 255, 255, .14); }
.card__list li:last-child { border-bottom: 0; }

/* Status und Zusatzhinweis in den Reise-Karten */
.card__status {
  font-size: .64rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted); text-align: center; margin-bottom: .7rem;
}
.card--featured .card__status { color: rgba(255, 255, 255, .7); }
.card__hint {
  font-size: .82rem; line-height: 1.5; color: var(--muted);
  text-align: center; margin-bottom: .5rem;
}
.card__link {
  display: block; text-align: center; margin-bottom: .9rem;
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--navy); text-decoration: none;
  border-bottom: 1px solid transparent; width: fit-content; margin-inline: auto;
}
.card__link:hover { border-bottom-color: var(--navy); }

/* ── Steps ───────────────────────────────────────────────── */
.steps { list-style: none; display: grid; gap: 2.6rem; max-width: 920px; margin: 0 auto; }
.step { text-align: center; padding: 0 1rem; }
.step__num {
  font-family: var(--serif); font-style: italic; font-size: 1.5rem; font-weight: 400;
  color: var(--red); display: inline-block; margin-bottom: .5rem;
  width: 54px; height: 54px; line-height: 52px;
  border: 1px solid rgba(92, 42, 93, .45); border-radius: 50%;
  background: var(--paper);
  transition: transform .4s cubic-bezier(.2, .65, .25, 1);
}
.step:hover .step__num { transform: scale(1.08); }
.step h3 { font-family: var(--serif); font-weight: 500; font-size: 1.4rem; color: var(--navy); margin: .7rem 0 .4rem; }
.step p { font-size: .95rem; color: var(--muted); max-width: 300px; margin: 0 auto; }

/* ── Rubriken-Tiles ──────────────────────────────────────── */
.tiles { display: grid; gap: 1rem; max-width: 1000px; margin: 0 auto; }
.tile {
  position: relative;
  display: block;
  background: var(--paper);
  border: 1px solid var(--hairline);
  padding: 1.6rem 3.4rem 1.6rem 1.6rem;
  text-decoration: none;
  transition: box-shadow .3s, border-color .3s, transform .3s;
}
.tile:hover { box-shadow: var(--shadow); border-color: rgba(23, 54, 93, .35); transform: translateY(-2px); }
.tile h3 {
  font-family: var(--serif); font-weight: 500; font-size: 1.4rem;
  color: var(--navy); margin-bottom: .2rem;
}
.tile p { font-size: .92rem; color: var(--muted); }
.tile__arrow {
  position: absolute; right: 1.4rem; top: 50%; transform: translateY(-50%);
  color: var(--red); font-size: 1.1rem;
  transition: transform .25s;
}
.tile:hover .tile__arrow { transform: translateY(-50%) translateX(5px); }

/* ── Vertrauen: Wall of Love + Trust-Row ─────────────────── */
.voices { display: grid; gap: 1.4rem; max-width: 1000px; margin: 0 auto 3.4rem; }
.voice {
  border: 1px solid rgba(255, 255, 255, .2);
  padding: 1.8rem 1.6rem;
  transition: border-color .3s, transform .3s;
}
.voice:hover { border-color: rgba(185, 138, 192, .55); transform: translateY(-3px); }
.voice p {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 1.15rem; line-height: 1.5; color: var(--paper);
  margin-bottom: .9rem;
}
.voice footer {
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
.trust {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .18);
  max-width: 1000px; margin: 0 auto;
}
.trust__item { background: var(--navy-deep); padding: 1.5rem 1.2rem; text-align: center; }
.trust__item h3 {
  font-family: var(--serif); font-weight: 500; font-size: 1.25rem;
  color: var(--red-soft); margin-bottom: .3rem;
}
.trust__item p { font-size: .78rem; color: rgba(255, 255, 255, .65); }

/* ── Vormerk-Formular ────────────────────────────────────── */
.nlform {
  display: flex; flex-direction: column; gap: .8rem;
  max-width: 480px; margin: 0 auto;
}
.nlform input {
  font-family: var(--sans); font-weight: 300; font-size: .95rem;
  padding: 1.05rem 1.2rem;
  border: 1px solid var(--hairline);
  border-radius: 0;
  background: var(--paper); color: var(--ink);
  transition: outline-color .2s;
}
.nlform input:focus { outline: 1px solid var(--navy); outline-offset: 1px; }

/* ── Footer ──────────────────────────────────────────────── */
.footer {
  background: var(--navy-deep); color: rgba(255, 255, 255, .62);
  text-align: center; padding: 4rem 1.5rem calc(4rem + 64px);
}
.footer .fleur { color: var(--paper); width: 24px; height: 32px; }
.footer__wordmark {
  font-family: var(--serif); font-size: 1.35rem; letter-spacing: .46em; text-indent: .46em;
  color: var(--paper); margin: .8rem 0 .3rem;
}
.footer__tag { font-size: .66rem; letter-spacing: .32em; text-transform: uppercase; margin-bottom: 2.2rem; color: rgba(255,255,255,.45); }
.footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem; margin-bottom: 2rem; }
.footer__nav a { color: rgba(255, 255, 255, .62); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
.footer__nav a:hover { color: var(--paper); }
.footer__legal { font-size: .7rem; color: rgba(255, 255, 255, .38); max-width: 480px; margin: 0 auto; }

/* ── Sheet (Vormerk-Popup, mobil: Bottom-Sheet) ──────────── */
.sheet { position: fixed; inset: 0; z-index: 90; }
.sheet[hidden] { display: none; }
.sheet__backdrop { position: absolute; inset: 0; background: rgba(15, 37, 67, .5); backdrop-filter: blur(4px); }
.sheet__panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--paper);
  padding: 2.4rem 1.6rem 2.4rem;
  border-top: 2px solid var(--red);
  text-align: center;
  animation: sheet-up .45s ease;
}
@keyframes sheet-up { from { transform: translateY(40%); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet__script { font-family: var(--serif); font-style: italic; font-size: 1.9rem; color: var(--red); }
.sheet__panel h2 { font-family: var(--serif); font-weight: 500; font-size: 1.5rem; color: var(--navy); margin: .3rem 0 .6rem; line-height: 1.25; }
.sheet__panel p { font-size: .9rem; color: var(--muted); margin-bottom: 1.4rem; }
.sheet__close {
  position: absolute; top: .5rem; right: .8rem;
  background: none; border: 0; font-size: 1.5rem; color: var(--muted); cursor: pointer;
  width: 44px; height: 44px;
}
.sheet__dismiss {
  background: none; border: 0; cursor: pointer;
  margin-top: 1.1rem; font-family: var(--sans); font-size: .74rem; letter-spacing: .08em;
  color: var(--muted); text-decoration: underline;
}

/* ── Sticky Mobile CTA ───────────────────────────────────── */
.stickybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--hairline);
}
.stickybar[hidden] { display: none; }
.stickybar__cta {
  display: block; width: 100%;
  background: var(--navy); color: var(--paper);
  font-size: .8rem; letter-spacing: .22em; text-transform: uppercase;
  text-align: center; text-decoration: none;
  padding: 1rem 1.3rem;
  transition: background .3s;
}
.stickybar__cta:hover { background: var(--navy-deep); }

/* ═══ Breakpoint ≥ 720px ═══════════════════════════════════ */
@media (min-width: 720px) {
  .hero__ctas { flex-direction: row; justify-content: center; }
  .section__photos { grid-template-columns: 1fr 1fr; align-items: start; }
  /* Umgekehrte Pyramide: das dritte Bild mittig, so breit wie die anderen.
     Einspaltig gilt das nicht, sonst waere es dort halb so gross. */
  .section__photos--pyramide > :nth-child(3) {
    grid-column: 1 / -1;
    justify-self: center;
    max-width: calc(50% - 1.1rem);
  }
  .features { grid-template-columns: repeat(2, 1fr); gap: 2.6rem 1.6rem; }
  .cards { grid-template-columns: repeat(2, 1fr); align-items: stretch; }
  .steps { grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
  .step__img { width: min(220px, 62vw); max-width: none; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .voices { grid-template-columns: repeat(3, 1fr); }
  .trust { grid-template-columns: repeat(4, 1fr); }
  .nlform { flex-direction: row; }
  .nlform input { flex: 1; }
  .sheet__panel {
    left: 50%; right: auto; bottom: 50%;
    transform: translate(-50%, 50%);
    width: min(500px, 92vw);
    animation: sheet-fade .4s ease;
  }
  @keyframes sheet-fade { from { opacity: 0; } to { opacity: 1; } }
  .footer { padding-bottom: 4rem; }
}

/* Zwischen 720 und 1280px kippt das Verhaeltnis zugunsten des Textes:
   bei 5fr faellt die Headline in der halben Spur auf Briefmarkengroesse.
   Ab 1280px ist genug Platz fuer das urspruengliche 5fr/6fr. */
@media (min-width: 720px) and (max-width: 1279px) {
  .hero1__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}

/* ═══ Breakpoint ≥ 1280px (Kopfzeile waagrecht) ════════════
   Die Leiste war auf acht Eintraege gerechnet. Mit „Gewinnspiel"
   sind es neun, und zwischen 1080 und 1280px stossen Logo, Nav,
   Warenkorb und Knopf ohne Luft aneinander — der Knopf bricht
   zweizeilig um. Bis 1280px bleibt deshalb der Hamburger, der
   Zustand ist ohnehin gebaut. Enger setzen half nicht: neun
   Eintraege plus Knopf brauchen den Platz schlicht. */
@media (min-width: 1280px) {
  .header { padding: 0 2rem; }
  .header__burger { display: none; }
  .header__logo { position: static; transform: none; }
  /* v17: 8 Einträge + Logo + Warenkorb + CTA — Abstände kompakt,
     damit die Nav bis 1080px einzeilig bleibt */
  .header__nav {
    position: static; flex-direction: row; gap: 1.4rem;
    transform: none; padding: 0; border: 0; background: none;
  }
  .header__nav a { padding: 0; border: 0; font-size: .68rem; letter-spacing: .2em; white-space: nowrap; }
  .header__nav a.nav__signal {
    background: rgba(92, 42, 93, .09);
    padding: .45rem .7rem;
    transition: background .3s, color .3s;
  }
  .header__nav a.nav__signal:hover { background: rgba(92, 42, 93, .16); }
  .header__cta {
    display: inline-block;
    font-size: .66rem; letter-spacing: .2em; text-transform: uppercase;
    color: var(--paper); background: var(--navy);
    text-decoration: none; padding: .7rem 1.15rem;
    transition: background .3s;
  }
  .header__cta:hover { background: var(--navy-deep); }
}

/* ═══ Breakpoint ≥ 1080px (Desktop-Raster) ═════════════════ */
@media (min-width: 1080px) {
  .section { padding-top: 7.5rem; padding-bottom: 7.5rem; }

  .cards--four > .card { grid-column: span 2; }
  .cards--four > .card--summe {
    grid-column: 2 / 6;
    display: grid; grid-template-columns: 1fr auto;
    align-items: center; gap: 2.6rem;
    text-align: left;
  }
  .card--summe .card__meta,
  .card--summe .card__title { text-align: left; }
  .card--summe .card__title { margin-bottom: .6rem; }
  /* Ohne Trennzeichen: beim Umbruch stuenden sie sonst am Zeilenanfang. */
  .card--summe .card__list--reihe {
    display: flex; flex-wrap: wrap; gap: .35rem 1.9rem; margin: 0; flex: none;
  }
  .card--summe .card__list--reihe li {
    border: 0; padding: 0; font-size: .82rem; color: var(--muted);
  }
  .card--summe .card__summe-cta { text-align: center; min-width: 200px; }
  .card--summe .card__status { margin-bottom: .7rem; }
  .cards { grid-template-columns: repeat(4, 1fr); }
  /* Drei Reisen nebeneinander, die Summe als Streifen darunter.
     Sechs Spalten: jede Reise nimmt zwei, der Streifen laeuft von der
     Mitte der ersten bis zur Mitte der dritten Karte. */
  .cards--four { grid-template-columns: repeat(6, 1fr); }
  .card--featured { transform: translateY(-10px); }
  .card--featured:hover { transform: translateY(-14px); }
  .features { grid-template-columns: repeat(4, 1fr); }
  .tiles { grid-template-columns: repeat(3, 1fr); }
}

/* ── Header-Aktionen (Warenkorb + CTA) ───────────────────── */
.header__actions { display: flex; align-items: center; gap: .4rem; }
.header__cart {
  position: relative; width: 44px; height: 44px;
  background: none; border: 0; cursor: pointer; color: var(--navy);
  display: flex; align-items: center; justify-content: center;
}
.header__cart svg { width: 22px; height: 22px; }
.header__cart-count {
  position: absolute; top: 4px; right: 2px;
  background: var(--red); color: var(--paper);
  font-size: .6rem; font-weight: 600;
  width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: transform .25s;
}
.header__cart-count.pop { transform: scale(1.35); }

/* ── Produkte (Shop-Segment) ─────────────────────────────── */
.products { display: grid; gap: 1.8rem; }
.product {
  background: var(--paper); border: 1px solid var(--hairline);
  padding: 1.7rem 1.4rem; text-align: center;
  transition: box-shadow .3s, transform .3s;
}
.product:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.product__img {
  aspect-ratio: 3 / 4; max-width: 180px; margin: 0 auto 1.2rem;
  background: var(--ivory);
  border: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: center;
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted);
}
.product__estate { font-size: .64rem; letter-spacing: .24em; text-transform: uppercase; color: var(--navy); }
.product__name { font-family: var(--serif); font-weight: 500; font-size: 1.3rem; color: var(--ink); margin: .35rem 0 .5rem; }
.product__price { font-family: var(--serif); font-size: 1.3rem; font-weight: 500; color: var(--navy); margin-bottom: 1.1rem; }

/* ── Heuriger (dunkle Bühne mit Keller-Motiv) ────────────── */
.section--cellar {
  background:
    linear-gradient(rgba(15, 37, 67, .86), rgba(15, 37, 67, .93)),
    url("../assets/cercle-keller.jpg") center 30% / cover no-repeat;
}
.section--dark .feature h3 { color: var(--paper); }
.section--dark .feature p { color: rgba(255, 255, 255, .72); }
.section--dark .feature h3::after { background: var(--red-soft); }

/* ── Warenkorb-Drawer ────────────────────────────────────── */
.cart { position: fixed; inset: 0; z-index: 95; visibility: hidden; }
.cart.open { visibility: visible; }
.cart__backdrop {
  position: absolute; inset: 0; background: rgba(15, 37, 67, .5);
  opacity: 0; transition: opacity .3s;
}
.cart.open .cart__backdrop { opacity: 1; }
.cart__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(430px, 92vw);
  background: var(--paper);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .35s ease;
}
.cart.open .cart__panel { transform: none; }
.cart__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.3rem 1.5rem; border-bottom: 1px solid var(--hairline);
}
.cart__head h2 { font-family: var(--serif); font-weight: 500; font-size: 1.4rem; color: var(--navy); }
.cart__close { background: none; border: 0; font-size: 1.5rem; color: var(--muted); cursor: pointer; width: 44px; height: 44px; }
.cart__items { flex: 1; overflow-y: auto; list-style: none; padding: 1rem 1.5rem; }
.cart__items li {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .9rem 0; border-bottom: 1px solid rgba(23, 54, 93, .08);
  font-size: .92rem;
}
.cart__name { flex: 1; min-width: 0; }
.cart__menge {
  flex: none; display: flex; align-items: center; gap: .1rem;
  border: 1px solid var(--hairline);
}
.cart__step {
  width: 26px; height: 28px; border: 0; background: transparent;
  color: var(--navy); font-size: .95rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.cart__step:hover { background: var(--sky); }
.cart__step:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
.cart__anzahl {
  width: 34px; text-align: center; font-size: .84rem;
  font-family: var(--sans); font-variant-numeric: tabular-nums;
  color: var(--ink); background: transparent;
  border: 0; border-radius: 0; padding: .25rem 0;
  -moz-appearance: textfield;
}
.cart__anzahl::-webkit-outer-spin-button,
.cart__anzahl::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cart__anzahl:focus { outline: 2px solid var(--navy); outline-offset: -2px; background: var(--paper); }
.cart__preis { flex: none; min-width: 68px; text-align: right; }
.cart__remove {
  flex: none; width: 30px; height: 30px; line-height: 1;
  border: 1px solid var(--hairline); background: transparent;
  color: var(--muted); font-size: 1.15rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .2s, color .2s, background .2s;
}
.cart__remove:hover { border-color: var(--red); color: var(--red); background: var(--paper); }
.cart__remove:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.cart__items .cart__empty { border: 0; color: var(--muted); font-style: italic; }
.cart__foot { padding: 1.3rem 1.5rem calc(1.3rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--hairline); background: var(--ivory); }
.cart__total { display: flex; justify-content: space-between; font-size: .95rem; margin-bottom: 1.1rem; }
.cart__total strong { font-family: var(--serif); font-size: 1.4rem; font-weight: 500; color: var(--navy); }
.cart__hint { font-size: .7rem; color: var(--muted); text-align: center; margin-top: .9rem; letter-spacing: .04em; }

/* ── Ergänzende Breakpoints ──────────────────────────────── */
@media (min-width: 720px) {
  .features--three { grid-template-columns: repeat(3, 1fr); }
}
/* Drei Flaschenkarten haben zusammen eine feste Mindestbreite; bei 720px
   sprengen sie die Sektion um 18px und die Seite bekommt einen
   waagrechten Rollbalken. Ab 780px geht die Rechnung auf. */
@media (min-width: 780px) {
  .products { grid-template-columns: repeat(3, 1fr); }
}

/* ── Steps mit Bildern ───────────────────────────────────── */
.step__img {
  /* Einspaltig so breit wie die uebrigen Bilder; dreispaltig ab 720px schmaler. */
  width: 100%; max-width: 340px; aspect-ratio: 4 / 3; object-fit: cover;
  margin: 0 auto 1.2rem;
  background: var(--paper); padding: 8px;
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow);
  transition: transform .55s cubic-bezier(.2, .65, .25, 1), box-shadow .4s;
}
.step:hover .step__img { transform: translateY(-5px) scale(1.02); box-shadow: 0 26px 60px rgba(23, 54, 93, .16); }

/* ── Zitat-Bande mit Loire-Strichzeichnung (driftet sanft) ─ */
.quoteband {
  position: relative;
  padding: 6rem 1.4rem;
  text-align: center;
  background: var(--paper);
  overflow: hidden;
}
.quoteband::before {
  content: ""; position: absolute; inset: -12%;
  background: url("../assets/loire-schloss.webp") center 40% / cover no-repeat;
  opacity: .22;
  animation: drift 42s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes drift {
  from { transform: translateX(-2%) scale(1.04); }
  to   { transform: translateX(2%) scale(1.1); }
}
.quoteband__text {
  position: relative;
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(1.7rem, 6vw, 2.5rem);
  line-height: 1.25; color: var(--navy);
  max-width: 720px; margin: 0 auto;
}
.quoteband__text em { color: var(--red); }
.quoteband__by {
  position: relative; margin-top: 1.2rem;
  font-size: .68rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--muted);
}

/* ── Rubriken-Tiles mit Bild ─────────────────────────────── */
.tile--media { padding: 0; overflow: hidden; }
.tile--media .tile__img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .65, .25, 1);
}
.tile--media:hover .tile__img { transform: scale(1.06); }
.tile__body { position: relative; padding: 1.3rem 3.2rem 1.4rem 1.4rem; }
.tile--media .tile__arrow { top: auto; bottom: 1.6rem; transform: none; }
.tile--media:hover .tile__arrow { transform: translateX(5px); }

/* ── Heuriger: bewegter Keller-Hintergrund ───────────────── */
.section--cellar {
  position: relative;
  background: var(--navy-deep);
  overflow: hidden;
}
.section--cellar::before {
  content: ""; position: absolute; inset: 0;
  background: url("../assets/cercle-keller.jpg") center 30% / cover no-repeat;
  animation: kenburns 34s ease-in-out infinite alternate;
  will-change: transform;
}
.section--cellar::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(rgba(15, 37, 67, .87), rgba(15, 37, 67, .93));
}
.section--cellar > * { position: relative; z-index: 1; }

/* Reduced Motion — alle Bewegung aus */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════
   v6 · GENUSSWELT — Startseite, Heuriger, B2B
   Neue Patterns: Split-Layouts, Regions-Karten, Modale,
   Formulare, sachlicher B2B-Seitenkopf. Bestehende Regeln
   (Farben, Fonts, Passepartout, Motion) bleiben unverändert.
   ═══════════════════════════════════════════════════════════ */

/* ── Sektions-CTA (zentrierter Button-Block) ─────────────── */
.section__cta { text-align: center; margin-top: 2.6rem; }

/* ── Hero-Variante für Unterseiten (kürzer) ──────────────── */
.hero--page { min-height: 72svh; padding-bottom: 4.5rem; }
.hero--keller::before { background-image: url("../assets/cercle-keller.jpg"); background-position: center 35%; }

/* ── Split-Layout (Bild + Text) ──────────────────────────── */
.split { display: grid; gap: 2.6rem; align-items: center; }
.split__media { margin: 0; }
.split__kicker {
  font-size: .68rem; font-weight: 400; letter-spacing: .34em; text-transform: uppercase;
  color: var(--navy); margin-bottom: .9rem;
}
.split__kicker::before { content: "—"; color: var(--red); margin-right: .6rem; }
.split__title {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.9rem, 6.5vw, 2.7rem);
  color: var(--navy); line-height: 1.15; margin-bottom: 1.1rem;
}
.split__title em { font-style: italic; font-weight: 400; color: var(--red); }
.split__body p { font-size: .95rem; color: var(--muted); margin-bottom: 1.1rem; }
.split__list { list-style: none; margin: 0 0 1.8rem; }
.split__list li {
  font-size: .9rem; color: var(--ink);
  padding: .55rem 0 .55rem 1.3rem; position: relative;
  border-bottom: 1px solid rgba(23, 54, 93, .08);
}
.split__list li:last-child { border-bottom: 0; }
.split__list li::before { content: "·"; position: absolute; left: .2rem; color: var(--red); font-weight: 600; }
.split__ctas { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.split__link {
  font-size: .74rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--navy); text-decoration: none;
  border-bottom: 1px solid rgba(23, 54, 93, .35);
  padding: .4rem 0; /* Touch-Target via Block-Padding */
  transition: color .3s, border-color .3s;
}
.split__link:hover { color: var(--red); border-color: var(--red); }

/* ── Regions-Karten (Weinwelt) ───────────────────────────── */
.regions { display: grid; gap: 1.4rem; }
.region {
  background: var(--paper); border: 1px solid var(--hairline);
  overflow: hidden;
  transition: box-shadow .3s, transform .3s;
}
.region:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.region__img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .65, .25, 1);
}
.region:hover .region__img { transform: scale(1.05); }
.region__body { padding: 1.3rem 1.4rem 1.5rem; }
.region__body h3 {
  font-family: var(--serif); font-weight: 500; font-size: 1.4rem;
  color: var(--navy); margin-bottom: .3rem;
}
.region__body p { font-size: .86rem; color: var(--muted); }

/* ── Info-Fläche (Hellblau) ──────────────────────────────── */
.notice {
  max-width: 760px; margin: 2.8rem auto 0;
  background: var(--sky); border: 1px solid var(--hairline);
  padding: 1.2rem 1.5rem; text-align: center;
  font-size: .88rem; color: var(--ink);
}
.section--tinted .notice { background: var(--paper); }
.notice strong { font-weight: 500; color: var(--navy); }

/* ── Besuchen & Erleben (zwei große Karten) ──────────────── */
.visits { display: grid; gap: 1.6rem; max-width: 1000px; margin: 0 auto; }
.visit {
  background: var(--paper); border: 1px solid var(--hairline);
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .3s, transform .3s;
}
.visit:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.visit__img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .65, .25, 1);
}
.visit:hover .visit__img { transform: scale(1.04); }
.visit__body { padding: 1.6rem 1.6rem 1.8rem; display: flex; flex-direction: column; align-items: flex-start; flex: 1; }
.visit__body h3 {
  font-family: var(--serif); font-weight: 500; font-size: 1.55rem;
  color: var(--navy); margin-bottom: .5rem;
}
.visit__body p { font-size: .9rem; color: var(--muted); margin-bottom: 1.4rem; flex: 1; }

/* ── Produktkarten mit Foto (Shop-Teaser) ────────────────── */
.product__img--wide { aspect-ratio: 4 / 3; max-width: none; padding: 0; overflow: hidden; }
.product__img--wide img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .65, .25, 1); }
.product:hover .product__img--wide img { transform: scale(1.05); }
.product__text { font-size: .85rem; color: var(--muted); margin-bottom: .2rem; }

/* ── B2B-Teaser (dunkel, zwei Spalten) ───────────────────── */
.b2b-cols { display: grid; gap: 1.4rem; max-width: 960px; margin: 0 auto; }
.b2b-col {
  border: 1px solid rgba(255, 255, 255, .2);
  padding: 2rem 1.7rem;
  transition: border-color .3s, transform .3s;
}
.b2b-col:hover { border-color: rgba(185, 138, 192, .55); transform: translateY(-3px); }
.b2b-col h3 {
  font-family: var(--serif); font-weight: 500; font-size: 1.4rem;
  color: var(--paper); margin-bottom: .6rem;
}
.b2b-col p { font-size: .9rem; color: rgba(255, 255, 255, .72); margin-bottom: 1.2rem; }
.b2b-col__link {
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--red-soft); text-decoration: none;
  border-bottom: 1px solid rgba(185, 138, 192, .4);
  padding: .4rem 0;
  transition: color .3s, border-color .3s;
}
.b2b-col__link:hover { color: var(--paper); border-color: var(--paper); }

/* ── Kontakt-Aktionskarten ───────────────────────────────── */
.actions { display: grid; gap: 1rem; max-width: 1000px; margin: 0 auto; }
.action {
  position: relative; display: block; width: 100%; text-align: left;
  background: var(--paper); border: 1px solid var(--hairline);
  padding: 1.5rem;
  cursor: pointer; font-family: var(--sans);
  min-height: 44px;
  transition: box-shadow .3s, border-color .3s, transform .3s;
}
.action:hover { box-shadow: var(--shadow); border-color: rgba(23, 54, 93, .35); transform: translateY(-2px); }
.action__title {
  display: block; font-family: var(--serif); font-weight: 500;
  font-size: 1.35rem; color: var(--navy); margin-bottom: .15rem;
}
.action__text { display: block; font-size: .82rem; font-weight: 300; color: var(--muted); }

/* ── Modale (Kontakt-Aktionen, mobil: Bottom-Sheet) ──────── */
.modal { position: fixed; inset: 0; z-index: 92; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(15, 37, 67, .5); }
.modal__panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--paper);
  max-height: 88svh; overflow-y: auto;
  padding: 2.2rem 1.6rem 2.4rem;
  border-top: 2px solid var(--red);
  animation: sheet-up .45s ease;
}
.modal__kicker {
  font-size: .64rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--red); margin-bottom: .3rem;
}
.modal__panel h2 {
  font-family: var(--serif); font-weight: 500; font-size: 1.5rem;
  color: var(--navy); margin-bottom: 1.4rem; line-height: 1.25;
}
.modal__close {
  position: absolute; top: .5rem; right: .8rem;
  background: none; border: 0; font-size: 1.5rem; color: var(--muted);
  cursor: pointer; width: 44px; height: 44px;
}
.modal__note { margin-top: 1.2rem; font-size: .78rem; color: var(--muted); }
.modal__note a { color: var(--navy); }

/* ── Formulare ───────────────────────────────────────────── */
.form { display: grid; gap: 1rem; text-align: left; }
.form__grid { display: grid; gap: 1rem; }
.form__field label {
  display: block; font-size: .66rem; font-weight: 400;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--navy); margin-bottom: .4rem;
}
.form__field input, .form__field select, .form__field textarea {
  width: 100%; font-family: var(--sans); font-weight: 300; font-size: .95rem;
  padding: .9rem 1rem; min-height: 44px;
  border: 1px solid var(--hairline); border-radius: 0;
  background: var(--paper); color: var(--ink);
}
.form__field textarea { resize: vertical; }
.form__field input:focus, .form__field select:focus, .form__field textarea:focus {
  outline: 1px solid var(--navy); outline-offset: 1px;
}
/* Formular auf dunkler Bühne: helle Karte */
.form--panel {
  background: var(--paper);
  max-width: 620px; margin: 0 auto;
  padding: 2rem 1.6rem;
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow);
}
.form__success {
  font-family: var(--serif); font-size: 1.25rem; color: var(--navy);
  text-align: center; padding: 1rem 0;
}

/* ── Öffnungszeiten ──────────────────────────────────────── */
.hours {
  max-width: 640px; margin: 0 auto;
  background: var(--paper); border: 1px solid var(--hairline);
}
.hours__row {
  display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; justify-content: space-between;
  padding: 1rem 1.4rem; font-size: .9rem;
  border-bottom: 1px solid rgba(23, 54, 93, .08);
}
.hours__row:last-child { border-bottom: 0; }
.hours__row span:first-child { font-weight: 400; color: var(--navy); letter-spacing: .06em; }
.hours__row em { color: var(--muted); font-size: .82rem; }
.hours__row a { color: var(--navy); }

/* ── Highlights mit Bild (Heuriger) ──────────────────────── */
.highlights { display: grid; gap: 2.2rem; max-width: 1000px; margin: 0 auto; }
.highlight { text-align: center; padding: 0 .6rem; }
.highlight__img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  margin-bottom: 1.1rem;
  background: var(--paper); padding: 8px;
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow);
  transition: transform .55s cubic-bezier(.2, .65, .25, 1), box-shadow .4s;
}
.highlight:hover .highlight__img { transform: translateY(-5px); box-shadow: 0 26px 60px rgba(23, 54, 93, .16); }
.highlight h3 { font-family: var(--serif); font-weight: 500; font-size: 1.3rem; color: var(--navy); margin-bottom: .35rem; }
.highlight p { font-size: .88rem; color: var(--muted); max-width: 300px; margin: 0 auto; }

/* ── Sachlicher Seitenkopf (B2B) ─────────────────────────── */
.pagehead {
  padding: calc(var(--header-h) + 4rem) 1.4rem 3.6rem;
  max-width: 780px; margin: 0 auto;
}
.pagehead__kicker {
  font-size: .68rem; letter-spacing: .34em; text-transform: uppercase;
  color: var(--red); margin-bottom: 1rem;
}
.pagehead__title {
  font-family: var(--sans); font-weight: 800;
  text-transform: uppercase; letter-spacing: -.01em;
  font-size: clamp(1.7rem, 5.5vw, 2.5rem);
  line-height: 1.2; color: var(--navy); margin-bottom: 1.1rem;
}
.pagehead__title em { font-style: normal; font-weight: 800; color: var(--red); }
.pagehead__title small { font-size: 82%; font-weight: 800; }
.pagehead__sub { font-size: 1.05rem; color: var(--muted); }
.pagehead__ctas { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
.pagehead__microcopy { margin-top: .9rem; font-size: .8rem; color: var(--muted); }
.pagehead__microcopy a { color: var(--navy); }

/* Seitenkopf mit Bild — Editorial: Text links, Foto rechts darunter geschoben */
.pagehead--media { max-width: 1180px; }
.pagehead__grid { display: grid; gap: 1.9rem; }
.pagehead__media { margin: 0; }   /* einspaltig: Foto steht unter dem Text */
.pagehead__media-frame {
  position: relative;
  background: var(--paper);
  padding: 8px;
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.pagehead__media img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
/* Motive, die nicht beschnitten werden duerfen, behalten ihr Format */
.pagehead__media--voll img { aspect-ratio: 16 / 9; }
/* etwas kleiner als die Spalte, damit das Motiv Luft bekommt */
.pagehead__media--voll .pagehead__media-frame { width: 88%; margin: 0 auto; }
/* Logo statt Foto: nicht beschneiden, die Marke ganz zeigen. */
.pagehead__media--logo .pagehead__media-frame { width: 86%; margin: 0 auto; padding: 1.6rem; }
.pagehead__media--logo img { aspect-ratio: auto; object-fit: contain; }

/* Zweispaltig ab 900px. Darunter steht das Foto unter dem Text. */
@media (min-width: 900px) {
  .pagehead--media .pagehead__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: center; gap: 0;
  }
  .pagehead--media .pagehead__text { position: relative; z-index: 2; }
  .pagehead--media .pagehead__media { margin-left: -3rem; position: relative; z-index: 0; }
  .pagehead--media .pagehead__media img { aspect-ratio: 4 / 3; }
  .pagehead--media .pagehead__media--voll img { aspect-ratio: 16 / 9; }
  .pagehead--media .pagehead__media--logo img { aspect-ratio: auto; }
  .pagehead--media .pagehead__title { font-size: clamp(2.2rem, 4.2vw, 3.2rem); }
  /* wie beim Hero: nur die Zeile darf ueber das Foto, Fließtext bricht davor um */
  .pagehead--media .pagehead__sub,
  .pagehead--media .pagehead__ctas,
  .pagehead--media .pagehead__microcopy { max-width: calc(100% - 3.5rem); }
}

/* ── B2B Direktkontakt ───────────────────────────────────── */
.b2b-contact { text-align: center; margin-top: 2.6rem; }
.b2b-contact p { font-size: .92rem; color: rgba(255, 255, 255, .72); }
.b2b-contact a { color: var(--paper); border-bottom: 1px solid rgba(255, 255, 255, .35); text-decoration: none; }
.b2b-contact a:hover { color: var(--red-soft); }

/* ═══ Breakpoint ≥ 720px (Genusswelt-Ergänzungen) ══════════ */
@media (min-width: 720px) {
  .split { grid-template-columns: 1fr 1fr; gap: 3.4rem; }
  .split--reverse .split__media { order: 2; }
  .split__ctas { flex-direction: row; align-items: center; gap: 1.6rem; }
  .regions { grid-template-columns: repeat(2, 1fr); }
  .visits { grid-template-columns: 1fr 1fr; }
  .actions { grid-template-columns: repeat(2, 1fr); }
  .highlights { grid-template-columns: repeat(2, 1fr); gap: 2.4rem 1.6rem; }
  .b2b-cols { grid-template-columns: 1fr 1fr; }
  .form__grid { grid-template-columns: 1fr 1fr; }
  .form__field--full { grid-column: 1 / -1; }
  .form--panel { padding: 2.6rem 2.4rem; }
  .modal__panel {
    left: 50%; right: auto; bottom: 50%;
    transform: translate(-50%, 50%);
    width: min(520px, 92vw);
    animation: sheet-fade .4s ease;
  }
  .pagehead { padding-top: calc(var(--header-h) + 6rem); padding-bottom: 4.5rem; }
}

/* ═══ Breakpoint ≥ 1080px (Genusswelt-Ergänzungen) ═════════ */
@media (min-width: 1080px) {
  .regions { grid-template-columns: repeat(4, 1fr); }
  .highlights { grid-template-columns: repeat(4, 1fr); }
  .actions { grid-template-columns: repeat(4, 1fr); }
  .hero--page { min-height: 60svh; }
}

/* ═══════════════════════════════════════════════════════════
   v7 · SHOP-MOCK & HERO-KARUSSELL
   Flaschen-Faksimiles (reines CSS/SVG, keine echten Fotos),
   Kategorie-Filter, Hero-Karussell mit Crossfade + Ken Burns.
   ═══════════════════════════════════════════════════════════ */

/* ── Flaschen-Faksimile ──────────────────────────────────── */
/* Silhouette: Hals + Korpus, helles Etikett mit Fleur-de-Lis.
   Varianten: --red (tiefes Navy-Glas), --white (tiefes Grün),
   --rose (helles Glas, Rot-Akzent). Kein Gold. */
.bottle {
  --glass: var(--navy-deep);
  --glass-hi: rgba(255, 255, 255, .09);
  --label-accent: var(--red);
  position: relative;
  width: 96px; height: 300px;
  margin: 0 auto;
}
.bottle__neck {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 26px; height: 74px;
  background: linear-gradient(90deg, transparent 0%, var(--glass-hi) 30%, transparent 60%), var(--glass);
  border-radius: 5px 5px 0 0;
}
.bottle__neck::before { /* Kapsel */
  content: ""; position: absolute; top: -2px; left: -2px; right: -2px; height: 26px;
  background: var(--label-accent);
  border-radius: 6px 6px 2px 2px;
}
.bottle__neck::after { /* Schulter-Übergang */
  content: ""; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%);
  width: 44px; height: 16px;
  background: var(--glass);
  border-radius: 0 0 14px 14px;
}
.bottle__body {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 236px;
  background: linear-gradient(90deg, rgba(0,0,0,.28) 0%, var(--glass-hi) 32%, rgba(0,0,0,.18) 68%, rgba(0,0,0,.34) 100%), var(--glass);
  border-radius: 20px 20px 7px 7px;
}
.bottle__label {
  position: absolute; top: 62px; left: 10px; right: 10px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-top: 2px solid var(--label-accent);
  padding: .7rem .3rem .75rem;
  text-align: center;
}
.bottle__label .fleur { width: 12px; height: 16px; color: var(--navy); }
.bottle__label-name {
  display: block; font-family: var(--serif); font-weight: 500;
  font-size: .68rem; line-height: 1.25; color: var(--ink);
  margin-top: .3rem;
}
.bottle__label-year {
  display: block; font-size: .5rem; letter-spacing: .3em;
  color: var(--red); margin-top: .2rem;
}
.bottle--white { --glass: #1E3529; --glass-hi: rgba(255, 255, 255, .12); --label-accent: var(--navy); }
.bottle--white .bottle__label-year { color: var(--navy); }
.bottle--rose { --glass: #D9A7A0; --glass-hi: rgba(255, 255, 255, .3); --label-accent: var(--red-soft); }
.bottle--rose .bottle__label { background: #FDF8F6; }

/* Produktkarten mit Faksimile: helle Medienfläche, Flasche zentriert */
.product__media {
  aspect-ratio: 3 / 4; max-width: 210px; margin: 0 auto 1.2rem;
  background: var(--ivory);
  border: 1px solid var(--hairline);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 1.4rem 0 1.6rem;
  overflow: hidden;
}
.product__media .bottle { transform-origin: bottom center; transition: transform .55s cubic-bezier(.2, .65, .25, 1); }
.product:hover .product__media .bottle { transform: translateY(-5px); }
.product__media--photo { padding: 0; align-items: stretch; }
.product__media--photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .65, .25, 1); }
.product:hover .product__media--photo img { transform: scale(1.05); }

/* ── Kategorie-Filter (Shop) ─────────────────────────────── */
.filters {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem;
  margin: 0 auto 2.8rem; max-width: 720px;
}
.filter {
  font-family: var(--sans); font-weight: 400;
  font-size: .7rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--navy); background: transparent;
  border: 1px solid var(--hairline);
  padding: .8rem 1.3rem; min-height: 44px;
  cursor: pointer;
  transition: background .3s, color .3s, border-color .3s;
}
.filter:hover { border-color: var(--navy); }
.filter[aria-pressed="true"] { background: var(--navy); color: var(--paper); border-color: var(--navy); }
.product[hidden] { display: none; }

/* ── Hero-Karussell ──────────────────────────────────────── */
.hero--carousel::before { content: none; }
.hero__slides { position: absolute; inset: 0; }
.hero__slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 60%;
  opacity: 0;
  transition: opacity 1.4s ease;
  animation: kenburns 30s ease-in-out infinite alternate;
  animation-play-state: paused;
  will-change: transform, opacity;
}
.hero__slide.is-active { opacity: 1; animation-play-state: running; }
.hero__dots {
  position: absolute; right: 1.2rem; bottom: 1.5rem; z-index: 2;
  display: flex; gap: .3rem;
}
.hero__dot {
  width: 44px; height: 44px; /* Touch-Target */
  background: none; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.hero__dot::after {
  content: ""; width: 26px; height: 2px;
  background: rgba(255, 255, 255, .45);
  transition: background .3s;
}
.hero__dot.is-active::after { background: var(--red-soft); }
.hero__dot:hover::after { background: var(--paper); }
@media (max-width: 719px) {
  .hero__dots { right: 50%; transform: translateX(50%); bottom: 3.2rem; }
  /* Am Telefon weniger Luft ueber dem Seitenkopf, damit die Ueberschrift
     und der erste Knopf ohne Scrollen im Bild sind. */
  .pagehead { padding-top: calc(var(--header-h) + 1rem); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__slide { animation: none !important; transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   v8 · Echtes Logo (PNG) + Startvarianten 1 & 2
   ═══════════════════════════════════════════════════════════ */

/* ── Logo-Bilder ─────────────────────────────────────────── */
.header__logo-img { height: 38px; width: auto; display: block; }
.footer__logo { height: 52px; width: auto; display: block; margin: 0 auto .5rem; }
.agegate__logo { height: 44px; width: auto; display: block; margin: 0 auto 1.4rem; }

/* ── Startvarianten: riesige serifenlose Statement-Type ──── */
.statement {
  font-family: var(--sans);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: .96;
}
.statement .st-line { display: block; }

/* ── Start 1 · „HURU-Hommage" (weiß, Editorial) ──────────── */
.hero1 {
  position: relative;
  background: var(--paper);
  padding: calc(var(--header-h) + 2.2rem) 1.25rem 3.5rem;
  overflow: hidden;
}
.hero1__frame { /* feine Haarlinien-Rahmung wie HURU-Seitenrahmen */
  position: absolute; inset: 12px;
  border: 1px solid var(--hairline);
  pointer-events: none;
}
.hero1__grid { position: relative; display: grid; gap: 1.6rem; }
.hero1__media {
  order: -1; /* mobil: Bild oben */
  margin: 0;
}
.hero1__media-frame {
  position: relative;
  background: var(--paper);
  padding: 8px;
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.hero1__slides { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.hero1__slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 60%;
  opacity: 0;
  transition: opacity 1.4s ease;
  animation: kenburns 30s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.hero1__slide.is-active { opacity: 1; animation-play-state: running; }
.hero1__eyebrow {
  font-size: .66rem; font-weight: 400; letter-spacing: .34em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 1rem;
}
.hero1__eyebrow::before { content: "—"; color: var(--red); margin-right: .6rem; }
.hero1__title {
  color: var(--navy);
  /* min 2.6rem: „GESCHICHTEN.“ (längste Slide-Zeile) passt bei 390px */
  font-size: clamp(2.6rem, 11vw, 5.9rem);
  margin: 0 0 1.4rem;
}
.hero1__sub {
  max-width: 460px; font-size: .95rem; color: var(--muted); margin-bottom: 1.8rem;
}
.hero1__ctas { display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; }
.hero1__cta {
  display: inline-block;
  font-size: .74rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase;
  background: var(--navy); color: var(--paper);
  text-decoration: none; padding: 1.1rem 2.4rem; min-height: 44px;
  transition: background .3s, transform .3s;
}
.hero1__cta:hover { background: var(--navy-deep); transform: translateY(-2px); }
.hero1__link {
  font-size: .76rem; letter-spacing: .14em;
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--navy);
  padding: .5rem 0; min-height: 44px; display: inline-flex; align-items: center;
  transition: color .3s, border-color .3s;
}
.hero1__link:hover { color: var(--red); border-color: var(--red); }
.hero1__scroll {
  display: none; /* mobil aus, ab Desktop sichtbar */
}

@media (min-width: 720px) {
  .hero1 { padding: calc(var(--header-h) + 3.5rem) 3rem 4.5rem; }
  /* minmax(0, …): lange Wörter sprengen die Spur nicht, die Headline
     läuft bewusst über das Bild (Überlappung, Text oben) */
  .hero1__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 0; }
  .hero1__media { order: 0; margin-left: -4rem; position: relative; z-index: 0; }
  .hero1__text { position: relative; z-index: 2; }
  /* Zweispaltig muss sich die Headline nach der SPALTE richten, nicht
     nach dem Fenster — sonst laeuft sie uebers Foto. Deshalb wird die
     Textspur zum Container und die Groesse daraus gerechnet:
     Die laengste Slide-Zeile („GESCHICHTEN.") ist gemessene 7,7 mal so
     breit wie die Schriftgroesse. Von der Spaltenbreite gehen 4rem ab,
     die das Foto per negativem Rand hineinragt, plus 1rem Luft.
     Obergrenze bleibt 5.9rem, grosse Fenster sehen aus wie bisher.
     Achtung beim Aendern der Slide-Texte: eine laengere Zeile als
     „GESCHICHTEN." braucht einen groesseren Teiler. */
  .hero1__text { container-type: inline-size; }
  .hero1__title { font-size: min(5.9rem, calc((100cqw - 5rem) / 7.7)); }
  .hero1__ctas { flex-direction: row; align-items: center; gap: 1.8rem; }
  /* Beides war auf die volle Breite gerechnet und ragte in der halben
     Spur unter das Foto: die Unterzeile mit ihren 460px Hoechstbreite,
     die Knopfreihe mit ihrer festen Mindestbreite. */
  /* 4rem davon liegen unter dem Foto, das per negativem Rand in die
     Textspur hineinragt — die Unterzeile muss davor umbrechen. */
  .hero1__sub { max-width: calc(100% - 4.5rem); }
  .hero1__cta-group { max-width: calc(100% - 4.5rem); }
  .hero1__scroll {
    display: flex; align-items: center; gap: .8rem;
    position: absolute; bottom: 2rem; left: 3rem;
    font-size: .62rem; letter-spacing: .4em; text-transform: uppercase;
    color: var(--muted); text-decoration: none;
  }
  .hero1__scroll::after {
    content: ""; width: 56px; height: 1px; background: var(--navy);
    animation: scroll-line 2.4s ease-in-out infinite;
    transform-origin: left center;
  }
  @keyframes scroll-line { 0%,100% { transform: scaleX(.4); } 50% { transform: scaleX(1); } }
}

/* ── Start 2 · „Full-Bleed Statement" ────────────────────── */
.hero2 { text-align: left; align-items: flex-end; justify-content: flex-start; }
.hero2::after { /* stärkerer Verlauf unten für Lesbarkeit der Riesentype */
  background: linear-gradient(180deg, rgba(15, 37, 67, .34) 0%, rgba(15, 37, 67, .18) 40%, rgba(15, 37, 67, .85) 100%);
}
.hero2 .hero__inner {
  max-width: 1180px; width: 100%;
  margin: 0 auto; text-align: left;
}
.hero2__eyebrow {
  font-size: .66rem; letter-spacing: .4em; text-transform: uppercase;
  color: rgba(255, 255, 255, .85); margin-bottom: 1.2rem;
}
.hero2__eyebrow::before { content: "—"; color: var(--red-soft); margin-right: .7rem; }
.hero2__title {
  color: var(--paper);
  font-size: clamp(2.9rem, 11vw, 7.8rem);
  text-shadow: 0 3px 40px rgba(15, 37, 67, .55);
  margin-bottom: 1.6rem;
}
.hero2__row { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.hero2 .hero__microcopy { margin-top: 1.6rem; text-align: left; }
@media (min-width: 720px) {
  .hero2__row { flex-direction: row; align-items: center; gap: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero1__slide { animation: none !important; transition: none !important; }
  .hero1__scroll::after { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   v10 · EDITORIAL — Stil zieht sich durch die ganze Website
   Gilt für alle Seiten: Statement-Type für alle Headlines,
   nummerierte Kicker, Haarlinien-Trenner. Cormorant bleibt
   nur für Zitate (Quoteband, Testimonials).
   ═══════════════════════════════════════════════════════════ */

/* ── Sektions-Headlines: Jost 800, uppercase, groß ───────── */
.section__title,
.split__title {
  font-family: var(--sans);
  font-weight: 800;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: 1.04;
  font-size: clamp(2.1rem, 7.5vw, 3.8rem);
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}
/* Im Split steht die Headline in einer halben Spalte: ab 720px teilt sich
   das Raster, die Spalte ist dann nur noch gut 0,45 der Fensterbreite.
   Mit der Sektionsgroesse laeuft der Satz dort aus der Spalte und legt
   sich aufs Bild daneben. Deshalb eine eigene, spaltengerechte Stufe. */
.split__title {
  font-size: clamp(1.75rem, 3.6vw, 2.6rem);
}
/* em-Akzent bleibt rot, aber nicht mehr kursiv */
.section__title em,
.split__title em { font-style: normal; font-weight: 800; }

/* ── Kicker: nummerierte Editorial-Labels, Jost 600 ──────── */
.section__kicker,
.split__kicker {
  font-weight: 600;
  letter-spacing: .3em;
}
.section__kicker::before,
.section__kicker::after { content: none; }
.section__kicker { color: var(--red); }

/* ── Haarlinien-Trenner zwischen den Sektionen ───────────── */
.section { border-top: 1px solid var(--hairline); }
.section--dark { border-top-color: rgba(255, 255, 255, .16); }

/* ── Karten-Überschriften & UI: Jost statt Cormorant ─────── */
.feature h3,
.region__body h3,
.visit__body h3,
.product__name,
.product__price,
.b2b-col h3,
.action__title,
.modal__panel h2,
.cart__head h2,
.card__title,
.step h3,
.highlight h3 {
  font-family: var(--sans);
  font-weight: 700;
  font-style: normal;
}
.feature h3::after { background: var(--red); }
.product__price { font-weight: 500; }

/* Bildunterschriften: Jost (Cormorant nur für Zitate) */
.section__photo figcaption {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 300;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Formular-Erfolge & Sheet-Script auf Start-Seiten serifenlos */
.form__success { font-family: var(--sans); font-weight: 600; font-size: 1.05rem; }
.section--dark .section__kicker { color: var(--red-soft); }

/* ═══════════════════════════════════════════════════════════
   v10 · PRELOADER (nur Startvarianten, Markup nur dort)
   Fleur-de-lis fadet/skaliert ein, Fortschrittslinie,
   weiches Ausblenden. JS: 1× pro Session, harte Obergrenze.
   ═══════════════════════════════════════════════════════════ */
.loader {
  position: fixed; inset: 0; z-index: 200;
  background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .5s ease, visibility 0s .55s;
}
.loader--done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader[hidden] { display: none; }
.loader__inner { text-align: center; }
.loader__fleur {
  width: 44px; height: 59px; color: var(--navy);
  animation: loader-fleur .85s cubic-bezier(.2, .65, .25, 1) both;
  will-change: transform, opacity;
}
@keyframes loader-fleur {
  from { opacity: 0; transform: scale(.82) translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.loader__brand {
  font-family: var(--sans); font-weight: 600;
  font-size: .8rem; letter-spacing: .5em; text-indent: .5em;
  text-transform: uppercase; color: var(--navy);
  margin-top: 1.1rem;
  animation: loader-brand .8s cubic-bezier(.2, .65, .25, 1) .25s both;
}
@keyframes loader-brand {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.loader__line {
  display: block; width: 120px; height: 1px;
  background: var(--hairline);
  margin: 1.4rem auto 0;
  position: relative; overflow: hidden;
}
.loader__line::after {
  content: ""; position: absolute; inset: 0;
  background: var(--red);
  transform-origin: left center;
  animation: loader-line 1.5s cubic-bezier(.2, .65, .25, 1) .2s both;
}
@keyframes loader-line {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .loader__fleur, .loader__brand, .loader__line::after { animation: none !important; }
  .loader { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   v11 · Vollbild-Divider (Kapitel-Trenner, nur Startvarianten)
   + neues Hero-Motiv auf heuriger.html
   ═══════════════════════════════════════════════════════════ */

/* ── Divider: dunkles Vollbild + riesige Overlay-Type ────── */
.divider {
  position: relative;
  overflow: hidden;
  min-height: 55vh;
  display: flex; align-items: center;
  background: var(--navy-deep);
}
.divider__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  animation: kenburns 38s ease-in-out infinite alternate;
  will-change: transform;
}
.divider::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15, 37, 67, .55) 0%, rgba(15, 37, 67, .7) 100%);
}
.divider__inner {
  position: relative; z-index: 1;
  width: 100%; max-width: 1180px; margin: 0 auto;
  padding: 4rem 1.4rem;
}
.divider__kicker {
  font-size: .68rem; font-weight: 600; letter-spacing: .34em; text-transform: uppercase;
  color: var(--red-soft); margin-bottom: 1.2rem;
}
.divider__text {
  font-family: var(--sans); font-weight: 800;
  text-transform: uppercase; letter-spacing: -.01em; line-height: 1.04;
  color: var(--paper);
  font-size: clamp(2.1rem, 8vw, 5.4rem);
  text-shadow: 0 2px 34px rgba(15, 37, 67, .55);
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
  margin: 0;
}
@media (min-width: 1080px) {
  .divider { min-height: 78vh; }
  .divider__inner { padding: 5rem 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .divider__bg { animation: none !important; }
}

/* ── heuriger.html: Hero-Motiv Geselligkeit statt leerem Keller
   (cercle-keller.jpg bleibt auf der Reservierungs-Bühne) ──── */
.hero--keller::before { background-image: url("../assets/heuriger-anstossen.jpg"); background-position: center 45%; }

/* ═══════════════════════════════════════════════════════════
   v13 · Divider-Reveal (zeilenweiser Masken-Slide)
   Endzustand für Capture-Override:
   .divider__kicker, .divider__line > span { transform:none!important; opacity:1!important; }
   ═══════════════════════════════════════════════════════════ */
.divider__kicker {
  opacity: 0; transform: translateY(14px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .65, .25, 1);
}
/* Die Maske fuer die Einblendung braucht Luft, sonst schneidet sie
   Umlautpunkte oben und den Satzpunkt unten ab. Das negative
   Aussenmass haelt den Zeilenabstand unveraendert. */
.divider__line { display: block; overflow: hidden; padding: .16em 0; margin: -.16em 0; }
.divider__line > span {
  display: inline-block;
  transform: translateY(110%); opacity: 0;
  transition: transform .9s cubic-bezier(.2, .65, .25, 1), opacity .55s ease;
  will-change: transform, opacity;
}
.divider--in .divider__kicker { opacity: 1; transform: none; }
.divider--in .divider__line > span { transform: none; opacity: 1; }
.divider--in .divider__line:nth-child(1) > span { transition-delay: .18s; }
.divider--in .divider__line:nth-child(2) > span { transition-delay: .3s; }
.divider--in .divider__line:nth-child(3) > span { transition-delay: .42s; }
@media (prefers-reduced-motion: reduce) {
  .divider__kicker, .divider__line > span {
    transform: none !important; opacity: 1 !important; transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   v14 · ÉMILE — Chat-Widget (Dummy, kein Backend)
   z-Staffelung: Stickybar 60 < Chat 80 < Sheet 90 < Modal 92
   < Warenkorb 95 < Age-Gate 100 < Loader 200.
   ═══════════════════════════════════════════════════════════ */
.chat { position: relative; z-index: 80; }
.chat__toggle {
  position: fixed; right: 1.2rem; bottom: calc(1.2rem + env(safe-area-inset-bottom));
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--navy); border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(23, 54, 93, .14);
  transition: background .3s, transform .3s;
  z-index: 80;
}
.chat__toggle:hover { background: var(--navy-deep); transform: translateY(-2px); }
.chat__toggle .chat__fleur { width: 20px; height: 27px; color: var(--paper); }
/* Kein Ring, kein Leuchten, keine Bewegung — der Button steht einfach da. */
.chat__pulse { display: none; animation: none; }
.chat--seen .chat__pulse { display: none; }
/* Mobil: über dem Sticky-CTA, wenn dieser sichtbar ist */
@media (max-width: 719px) {
  .chat--lift .chat__toggle { bottom: calc(76px + .9rem + env(safe-area-inset-bottom)); }
}

/* ── Panel ───────────────────────────────────────────────── */
.chat__panel {
  position: fixed; z-index: 81;
  right: 1.2rem; bottom: calc(56px + 2.4rem);
  width: min(380px, calc(100vw - 2.4rem));
  height: min(520px, 70vh);
  background: var(--paper);
  border: 1px solid var(--hairline);
  box-shadow: 0 24px 60px rgba(23, 54, 93, .22);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: chat-in .35s cubic-bezier(.2, .65, .25, 1);
}
@keyframes chat-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.chat__panel[hidden] { display: none; }

.chat__head {
  display: flex; align-items: center; gap: .8rem;
  background: var(--navy); color: var(--paper);
  padding: .9rem 1.1rem;
}
.chat__avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.chat__avatar .chat__fleur { width: 15px; height: 20px; color: var(--navy); }
.chat__who { flex: 1; }
.chat__name { font-family: var(--serif); font-weight: 500; font-size: 1.2rem; line-height: 1.1; }
.chat__name { font-family: var(--sans); font-weight: 700; }
.chat__role { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .65); }
.chat__close {
  background: none; border: 0; color: var(--paper);
  font-size: 1.4rem; cursor: pointer; width: 44px; height: 44px;
  margin: -0.6rem -0.7rem -0.6rem 0;
}

.chat__log {
  flex: 1; overflow-y: auto;
  padding: 1rem 1rem .6rem;
  display: flex; flex-direction: column; gap: .6rem;
}
.chat__msg {
  max-width: 85%;
  font-size: .88rem; line-height: 1.5;
  padding: .7rem .95rem;
  border-radius: 12px;
}
.chat__msg--bot { align-self: flex-start; background: var(--sky); color: var(--ink); border-bottom-left-radius: 3px; }
.chat__msg--user { align-self: flex-end; background: var(--navy); color: var(--paper); border-bottom-right-radius: 3px; }
.chat__msg a { color: inherit; text-decoration: underline; }
.chat__msg--bot a { color: var(--red); }

/* Tipp-Indikator */
.chat__typing { display: inline-flex; gap: 5px; padding: .8rem .95rem; align-self: flex-start; background: var(--sky); border-radius: 12px; border-bottom-left-radius: 3px; }
.chat__typing span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--navy);
  animation: chat-dot 1s ease-in-out infinite;
}
.chat__typing span:nth-child(2) { animation-delay: .15s; }
.chat__typing span:nth-child(3) { animation-delay: .3s; }
@keyframes chat-dot { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

.chat__chips {
  display: flex; flex-wrap: wrap; gap: .45rem;
  padding: .6rem 1rem;
  border-top: 1px solid rgba(23, 54, 93, .08);
}
.chip {
  font-family: var(--sans); font-weight: 400; font-size: .74rem;
  letter-spacing: .04em;
  color: var(--navy); background: var(--paper);
  border: 1px solid var(--hairline); border-radius: 999px;
  padding: .55rem .9rem; min-height: 44px;
  cursor: pointer;
  transition: border-color .3s, background .3s, color .3s;
}
.chip:hover { border-color: var(--red); color: var(--red); }

.chat__form {
  display: flex; gap: .5rem;
  padding: .7rem 1rem 0.4rem;
}
.chat__form input {
  flex: 1; font-family: var(--sans); font-weight: 300; font-size: .92rem;
  padding: .75rem .95rem; min-height: 44px;
  border: 1px solid var(--hairline); border-radius: 999px;
}
.chat__form input:focus { outline: 1px solid var(--navy); outline-offset: 1px; }
.chat__send {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: var(--red); color: var(--paper);
  border: 0; cursor: pointer; font-size: 1.05rem;
  transition: background .3s, transform .3s;
}
.chat__send:hover { background: var(--red-deep); transform: translateY(-1px); }
.chat__demo {
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); text-align: center;
  padding: .3rem 1rem .7rem;
}

/* ── Mobil: Bottom-Sheet ─────────────────────────────────── */
@media (max-width: 719px) {
  .chat__panel {
    right: 0; left: 0; bottom: 0;
    width: auto; height: auto; max-height: 85vh;
    border-radius: 16px 16px 0 0;
    border-bottom: 0;
  }
  .chat__panel::before { /* Drag-Henkel-Optik */
    content: ""; display: block;
    width: 44px; height: 4px; border-radius: 2px;
    background: rgba(23, 54, 93, .2);
    margin: .6rem auto 0;
    flex: none;
  }
  .chat__log { min-height: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  .chat__pulse { animation: none !important; display: none; }
  .chat__toggle { transition: none !important; animation: none !important; }
  .chat__toggle:hover { transform: none; }
  .chat__panel { animation: none !important; }
  .chat__typing span { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   v15 · Original-Fleur (Loader + Chat-Avatar) +
   Hero-Textrotation (Text crossfadet synchron zum Slide)
   ═══════════════════════════════════════════════════════════ */

/* Original-Fleur als Bild (Loader) — SVG-Maße überschreiben */
img.loader__fleur { width: auto; height: 56px; }
.chat__avatar .chat__fleur-img { height: 20px; width: auto; }

/* ── Text-Rotation: gestapelte Blöcke, Crossfade ─────────── */
/* minmax(0, 1fr): sonst richtet sich die Spur nach dem laengsten
   gestapelten Block, und Unterzeile wie Knopfreihe stehen breiter als
   die Textspalte — sie schieben sich dann unter das Hero-Foto. */
.hero1__texts, .hero2__texts { display: grid; grid-template-columns: minmax(0, 1fr); }
.hero1__slide-text, .hero2__text {
  grid-area: 1 / 1; /* übereinander gestapelt, Höhe = längster Block */
  min-width: 0;     /* sonst zieht der laengste Block die Spur auf */
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2, .65, .25, 1);
  pointer-events: none;
}
.hero1__slide-text.is-active, .hero2__text.is-active {
  opacity: 1; transform: none; pointer-events: auto;
}
.hero2__sub {
  font-size: .95rem; color: rgba(255, 255, 255, .85);
  max-width: 560px; margin-bottom: 1.6rem;
}
@media (prefers-reduced-motion: reduce) {
  .hero1__slide-text, .hero2__text { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   v16 · CTA-Rotation synchron zum Hero-Slide
   Drei vorgerenderte CTA-Gruppen gestapelt; inaktive sind
   visibility:hidden (nicht tabbar, nicht klickbar).
   ═══════════════════════════════════════════════════════════ */
.hero1__ctas, .hero2__row { display: grid; grid-template-columns: minmax(0, 1fr); }
.hero1__cta-group, .hero2__cta-group {
  grid-area: 1 / 1;
  min-width: 0;
  display: flex; flex-direction: column; gap: .4rem; align-items: flex-start;
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2, .65, .25, 1), visibility 0s .5s;
  visibility: hidden;
  pointer-events: none;
}
.hero1__cta-group.is-active, .hero2__cta-group.is-active {
  opacity: 1; transform: none;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .5s ease, transform .5s cubic-bezier(.2, .65, .25, 1);
}
.hero2__cta-group { gap: 1rem; }
@media (min-width: 720px) {
  .hero1__cta-group { flex-direction: row; align-items: center; gap: 1.8rem; flex-wrap: wrap; }
  .hero2__cta-group { flex-direction: row; align-items: center; gap: 1.6rem; }
}
/* volle Breite mobil für die gruppierten Buttons (hero2) */
@media (max-width: 719px) {
  .hero2__cta-group { align-items: stretch; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero1__cta-group, .hero2__cta-group { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   v18 · Émile als Pill-Button + Scroll-Popup-Strecke
   ═══════════════════════════════════════════════════════════ */

/* ── Pill-Button (statt rundem Button) ───────────────────── */
.chat__toggle {
  width: auto; height: 56px; border-radius: 999px;
  padding: 8px 1.3rem 8px 8px;
  gap: .65rem;
}
.chat__toggle-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.chat__toggle-avatar img { height: 22px; width: auto; }
.chat__label {
  font-size: .72rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--paper); white-space: nowrap;
}
.chat__pulse { inset: -5px; border-radius: 999px; }
@media (max-width: 719px) {
  .chat__toggle { padding-right: 1.1rem; }
  .chat__label-full { display: none; } /* mobil: nur „Émile" */
}

/* ── Scroll-Popups (alle Seiten außer grand-tour.html) ───── */
/* Geometrie wie Modale: mobil Bottom-Sheet, Desktop Karte.
   z-Staffelung: Chat 80 < Popup 88 < Modal 92 < Cart 95 … */
.popup { position: fixed; inset: 0; z-index: 88; }
.popup[hidden] { display: none; }
.popup__backdrop { position: absolute; inset: 0; background: rgba(15, 37, 67, .5); }
.popup__panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--paper);
  max-height: 88svh; overflow-y: auto;
  border-top: 2px solid var(--red);
  animation: sheet-up .45s ease;
  display: flex; flex-direction: column;
}
.popup__close {
  position: absolute; top: .4rem; right: .6rem; z-index: 1;
  background: none; border: 0; font-size: 1.5rem; color: var(--muted);
  cursor: pointer; width: 44px; height: 44px;
}
.popup__media { display: none; margin: 0; } /* mobil kompakt ohne Bild */
.popup__body { padding: 2.2rem 1.6rem 2rem; text-align: center; }
.popup__kicker {
  font-size: .66rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase;
  color: var(--red); margin-bottom: .6rem;
}
.popup__title {
  font-family: var(--serif); font-weight: 500; font-size: 1.6rem;
  color: var(--navy); line-height: 1.2; margin-bottom: .7rem;
}
.popup__title {
  font-family: var(--sans); font-weight: 800; text-transform: uppercase;
  letter-spacing: -.01em; font-size: 1.5rem;
}
.popup__text { font-size: .9rem; color: var(--muted); margin-bottom: 1.5rem; }
.popup__dismiss {
  background: none; border: 0; cursor: pointer;
  margin-top: 1rem; font-family: var(--sans); font-size: .74rem;
  letter-spacing: .08em; color: var(--muted); text-decoration: underline;
  min-height: 44px; padding: .5rem 1rem;
}
.popup .nlform { max-width: 380px; }
.popup__code {
  display: inline-block;
  font-family: var(--sans); font-weight: 600; letter-spacing: .3em; text-indent: .3em;
  color: var(--paper); background: var(--red);
  padding: .5rem 1.1rem; margin: .4rem 0;
  font-size: 1.1rem;
}
@media (min-width: 720px) {
  .popup__panel {
    left: 50%; right: auto; bottom: 50%;
    transform: translate(-50%, 50%);
    width: min(620px, 92vw);
    animation: sheet-fade .4s ease;
    border-top: 0; border: 1px solid var(--hairline);
    box-shadow: 0 24px 60px rgba(23, 54, 93, .22);
  }
  .popup__panel--media { flex-direction: row; }
  .popup__media {
    display: block; flex: 0 0 42%;
  }
  .popup__media img {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  .popup__body { flex: 1; padding: 2.6rem 2.2rem; text-align: left; }
  .popup__body .nlform { margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .popup__panel { animation: none !important; }
}


/* Teilnahmebedingungen: zweispaltig ab Tablet */
.conditions { max-width: 900px; margin-inline: auto; text-align: left; }
.conditions li { text-align: left; }
@media (min-width: 720px) {
  .conditions { columns: 2; column-gap: 2.6rem; }
  .conditions li { break-inside: avoid; }
}


/* Bildreihe mit nur einem Bild: mittig statt halbleer */
.section__photos--single {
  grid-template-columns: min(620px, 100%);
  justify-content: center;
}
/* Nach den Reisekarten Luft lassen, damit das Logo nicht andockt */
.cards + .section__photos--single { margin-top: clamp(3rem, 6vw, 5rem); }
/* Auf der Startseite etwas zurückhaltender */
body[data-page="start-1"] .section__photos--single {
  grid-template-columns: min(440px, 100%);
}


/* ── Reiseauswahl im Vormerk-Fenster ──────────────────────── */
.choice { border: 0; padding: 0; margin: 0 0 1.4rem; }
.choice__legend {
  padding: 0; margin-bottom: .7rem;
  font-family: var(--sans); font-size: .64rem; font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase; color: var(--navy);
}
.choice__item {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .8rem .9rem; margin-bottom: .5rem;
  border: 1px solid var(--hairline);
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.choice__item:hover { border-color: var(--navy); background: var(--ivory); }
.choice__item:has(input:checked) { border-color: var(--navy); background: var(--sky); }
.choice__item input { flex: none; width: 18px; height: 18px; margin-top: .15rem; accent-color: var(--navy); }
.choice__item input:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.choice__text { display: block; font-size: .9rem; line-height: 1.4; }
.choice__text strong { display: block; font-weight: 500; color: var(--navy); }
.choice__text small { display: block; margin-top: .1rem; font-size: .74rem; color: var(--muted); }
.choice__text em { font-style: normal; color: var(--red); }
.choice__item:has(input[data-reise="bienvenue"]) .choice__text em { color: var(--navy); font-weight: 500; }
.choice__item--plain { margin: 1.1rem 0 1.4rem; border-style: dashed; }
/* Einwilligung: Hauptzeile in Navy, sonst geht sie neben den
   Reisekaesten unter. Der Hinweis darunter bleibt gedaempft. */
.choice__item--plain .choice__text { color: var(--navy); font-weight: 400; }

/* Vormerk-Formular: schmaler und mittig statt ueber die volle
   Sektionsbreite, dazu mehr Luft zwischen den Auswahlfeldern. */
.sib-form { max-width: 620px; margin: 0 auto; }
.sib-form .choice__item { padding: 1.05rem 1.15rem; margin-bottom: .9rem; }
/* Rundbrief-Haken sitzt unter den Reisen, leicht abgesetzt */
.choice__item--rundbrief { margin: 0 0 1.4rem; border-style: dashed; }

/* ── Rundbrief-Block am Seitenende ───────────────────────── */
.rundbrief { max-width: 620px; margin: 0 auto; }
.rundbrief__row { display: grid; gap: .6rem; }
.rundbrief__label {
  font-family: var(--sans); font-size: .64rem; font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase; color: var(--navy);
}
.rundbrief input[type="email"] {
  width: 100%;
  font-family: var(--sans); font-weight: 300; font-size: .95rem;
  padding: .9rem 1rem; min-height: 44px;
  border: 1px solid var(--hairline); border-radius: 0;
  background: var(--paper); color: var(--ink);
}
.rundbrief input[type="email"]:focus { outline: 1px solid var(--navy); outline-offset: 1px; }
.rundbrief__opt { margin: 1.1rem 0 0; }

.rundbrief .btn { margin-top: 1.1rem; }


/* Drei Regionen-Zeichnungen statt eines Produktfotos */
.product__media--regionen {
  /* Kein festes Seitenverhaeltnis: der Kasten waechst mit den drei
     Zeichnungen mit, sonst schneidet overflow:hidden sie oben und
     unten ab. */
  aspect-ratio: auto; height: auto; overflow: visible;
  display: grid; grid-template-columns: 1fr;
  align-content: center; justify-items: center;
  gap: 1.5rem; padding: 1.8rem 1.4rem;
  background: var(--paper);
  border: 1px solid var(--hairline);
}
.product__media--regionen img {
  width: auto; max-width: 88%; height: auto; max-height: 132px; object-fit: contain;
}
.product__soon {
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted); margin: .4rem 0 .9rem;
}


/* Soziale Netzwerke in der Fusszeile */
.footer__social {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6rem;
  margin: 1.4rem 0 .2rem;
}
.footer__social a {
  font-size: .66rem; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255, 255, 255, .78); text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: .15rem;
  transition: color .3s, border-color .3s;
}
.footer__social a:hover { color: var(--paper); border-bottom-color: rgba(255, 255, 255, .5); }


/* ── Film & Kanaele ───────────────────────────────────────── */
.film { margin: 0 auto 2.6rem; max-width: 900px; }
.film__start {
  display: block; width: 100%; padding: 0; border: 1px solid var(--hairline);
  background: var(--navy-deep); position: relative; cursor: pointer;
  box-shadow: var(--shadow);
}
.film__bild { display: block; width: 100%; height: auto; opacity: .88; transition: opacity .3s; }
.film__start:hover .film__bild { opacity: 1; }
.film__knopf {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 74px; height: 74px; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; padding-left: .18em;
  transition: transform .3s, background .3s;
}
.film__start:hover .film__knopf { transform: translate(-50%, -50%) scale(1.06); background: var(--paper); }
.film__start:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.film__hinweis { margin-top: .7rem; font-size: .74rem; color: var(--muted); text-align: center; }
.film iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

.kanaele { display: grid; gap: 1rem; max-width: 900px; margin: 0 auto; }
.kanal {
  display: block; padding: 1.2rem 1.4rem; text-align: left;
  background: var(--paper); border: 1px solid var(--hairline);
  text-decoration: none; transition: border-color .3s, transform .3s;
}
.kanal:hover { border-color: var(--navy); transform: translateY(-2px); }
.kanal__name {
  display: block; font-size: .68rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--navy); margin-bottom: .3rem;
}
.kanal__text { display: block; font-size: .88rem; color: var(--muted); }
@media (min-width: 720px) { .kanaele { grid-template-columns: repeat(3, 1fr); } }


/* Anschrift im Kontaktbereich */
.section__adresse { text-align: center; margin-top: 2rem; }
.section__adresse a {
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--navy); text-decoration: none;
  border-bottom: 1px solid var(--hairline); padding-bottom: .25rem;
  transition: border-color .3s;
}
.section__adresse a:hover { border-bottom-color: var(--navy); }


/* Markenzeichen statt Produktfoto: gleiche Hoehe wie der Regionen-Kasten,
   damit die beiden Paketkarten auf einer Linie stehen. */
.product__media--marke {
  aspect-ratio: auto; height: auto; min-height: 448px; overflow: visible;
  display: flex; align-items: center; justify-content: center;
  padding: 1.4rem; background: var(--paper);
}
.product__media--marke img { width: 100%; height: auto; object-fit: contain; }
@media (max-width: 719px) {
  .product__media--marke { min-height: 0; }
  .product__media--regionen img { max-height: 100px; }
}


/* Galerie der Gewinnspiel-Beitraege */
.momente { display: grid; gap: 1rem; max-width: 980px; margin: 0 auto; }
.momente figure { margin: 0; }
.momente img {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1;
  object-fit: cover; border: 1px solid var(--hairline);
}
.momente figcaption {
  margin-top: .5rem; font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); text-align: center;
}
@media (min-width: 560px) { .momente { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .momente { grid-template-columns: repeat(3, 1fr); } }


/* ── Rechtstexte (Impressum, Datenschutz) ─────────────────── */
.rechtstext { max-width: 720px; margin: 0 auto; text-align: left; }
.rechtstext p { margin: 0 0 1rem; font-size: .95rem; line-height: 1.7; color: var(--ink); }
.rechtstext a { color: var(--navy); }
.rechtstext h3 {
  font-family: var(--sans); font-size: .68rem; font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase; color: var(--navy);
  margin: 2.2rem 0 .8rem;
}
.rechtstext h3:first-child { margin-top: 0; }
.daten { display: grid; gap: 0; margin: 0; }
.daten dt {
  font-family: var(--sans); font-size: .64rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
  padding-top: 1rem;
}
.daten dd {
  margin: .2rem 0 0; padding-bottom: 1rem;
  border-bottom: 1px solid var(--hairline);
  font-size: .98rem; color: var(--ink);
}
@media (min-width: 620px) {
  /* stretch statt baseline: sonst sind Beschriftung und Wert
     unterschiedlich hoch und die Trennlinie bekommt einen Versatz. */
  .daten { grid-template-columns: 200px 1fr; align-items: stretch; }
  .daten dt { padding-top: 1.05rem; border-bottom: 1px solid var(--hairline); padding-bottom: 1rem; }
  .daten dd { margin: 0; padding-top: 1rem; }
}


/* Mit dem zehnten Eintrag ("Stimmen") wird die Kopfzeile knapp: zwischen
   1280 und 1440px ruecken die Punkte enger zusammen, damit sie sicher in
   einer Zeile bleiben. Darueber gilt wieder der normale Abstand.
   Zehn Eintraege — geprueft bei 1280, 1360 und 1440px. */
@media (min-width: 1280px) and (max-width: 1439px) {
  .header__nav { gap: 1rem; }
  .header__nav a { letter-spacing: .16em; font-size: .66rem; }
  .header__cta { padding: .7rem .9rem; letter-spacing: .16em; }
}


/* Gutschein-Verweis in der Reisekarte */
.card__gutschein {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: .08em;
  transition: opacity .2s;
}
.card__gutschein:hover { opacity: .7; }


/* Aus dem QR-Code uebernommene Gutscheinnummer */
.form__festwert {
  background: var(--sky) !important; font-family: var(--sans);
  letter-spacing: .12em; font-weight: 500; color: var(--navy) !important;
}


/* ── Fließtext in einer Sektion: erzählende Absätze ───────
   Für Abschnitte, die eine Geschichte erzählen statt nur zu
   labeln. Schmale Spalte, mittig, kräftiger als die Subline. */
.section__flow {
  max-width: 640px;
  margin: 0 auto 2.8rem;
}
.section__flow p {
  font-size: .95rem;
  line-height: 1.7;
  color: var(--ink);
  text-align: center;
  margin-bottom: 1.1rem;
}
.section__flow p:last-child { margin-bottom: 0; }