/* ===========================================================
   PureVita Travel — Design System
   Quiet Luxury · Hell/Creme/Gold · Editorial
   Fonts: Newsreader (Serif Headlines) + Instrument Sans (Body)
   =========================================================== */

/* ── Lokale Fonts ───────────────────────────────── */
/* Newsreader + Instrument Sans, selbst gehostet (kein Google-Fonts-Request mehr,
   keine IP-Uebertragung an Google). Quelle: offizielle Google-Fonts-CDN-Dateien
   (fonts.gstatic.com), Lizenz: SIL Open Font License 1.1 fuer beide Familien.
   Volltext: src/assets/fonts/newsreader/OFL.txt und src/assets/fonts/instrument-sans/OFL.txt.
   Nur die tatsaechlich genutzten Schnitte: Newsreader 300-600 normal + 400 italic,
   Instrument Sans 400-600 normal. Latin/Latin-Ext (kein Vietnamesisch/Kyrillisch etc.,
   fuer DE/EN-Inhalte nicht benoetigt). */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/assets/fonts/newsreader/newsreader-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/assets/fonts/newsreader/newsreader-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/newsreader/newsreader-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/newsreader/newsreader-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/instrument-sans/instrument-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/instrument-sans/instrument-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Variables ──────────────────────────────────── */
:root {
  --header-height: 84px; /* Fix 1.3: gemessen am Live-Header (82px), fuer scroll-padding-top */
  /* Surfaces */
  --paper:      #f4efe4;
  --surface:    #fffaf0;
  --white:      #ffffff;

  /* Text */
  --ink:        #19221d;
  --muted:      #5f675e;
  --light:      #94908a;

  /* Accents */
  --gold:       #b78b45;
  --gold-deep:  #9c7536;
  --gold-text:  #775a2d; /* WCAG-AA-fester Goldton fuer Fliesstext (4,5:1 auf --paper) */
  --gold-light: rgba(183, 139, 69, 0.10);
  --gold-on-dark: #e8c988; /* Fix: helle Gold-Variante fuer Text auf dunklen/Video-Hintergruenden (Hero-Eyebrow). Gemessen 7.17:1 auf --green, 6.6-9.5:1 auf verstaerktem Hero-Scrim. */

  /* Hero / Dark blocks */
  --green:      #243f33;
  --green-2:    #1a2c24;
  --green-3:    #0f1c16;

  /* Borders */
  --line:       #e2d8c5;
  --line-light: #ede6d8;

  /* Typography */
  --serif:      'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:       'Instrument Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Layout */
  --max-w:      1180px;
  --pad:        clamp(1.25rem, 5vw, 2rem);
  --section-py: clamp(5.5rem, 13vh, 9rem);

  /* Motion */
  --ease:       cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Reset ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-height); } /* Fix 1.3: Anker-Sprung (z.B. #inquiry) rutschte unter den Sticky-Header */
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--gold); color: var(--white); }

/* ── Typography ─────────────────────────────────── */
h1, h2, h3, h4, .serif {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.01em;
}
/* Fix: Feste Untergrenze 2.6rem/41.6px lief bei sehr langen, wortumbruchfreien Ueberschriften
   (z.B. "Datenschutzerklaerung", "Reisebedingungen") auf schmalen Breiten (320-390px) aus dem
   verfuegbaren .wrap-Innenraum (~280px) heraus - Text wurde beschnitten dargestellt, da
   overflow standardmaessig sichtbar bleibt. Untergrenze auf 1.85rem/29.6px gesenkt (gemessen:
   passt mit Sicherheitsabstand, gemessene H1-Breite 280px bei 320px Viewport). Ab ca. 480px
   greift ohnehin schon die vw-Formel und liegt oberhalb beider Werte - Tablet/Desktop (768px+)
   dadurch unveraendert.
   Fix: hyphens:auto zerlegte Marketing-Ueberschriften unnoetig mitten im Wort (z.B.
   "Private China-Rei-sen", "Si-chuan") auf allen Breiten, obwohl kein Overflow vorlag - die
   automatische Trennung war fuer diese Ueberschriften nie noetig. "Datenschutzerklaerung" und
   "Reisebedingungen" passen bei 320px bereits ohne jede Trennung (siehe Kommentar oben), daher
   global hyphens:none statt einer selektorbeschraenkten Ausnahme. */
h1 {
  font-size: clamp(1.85rem, 6.4vw, 4.4rem);
  hyphens: none;
}
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.7rem); }

/* Fix: Die Rechtstexte (Datenschutz/AGB) enthalten die ausgeschriebene URL
   "https://www.purevita.group/datenschutz/" als reinen Fließtext ohne Umbruchstelle. Bei 320px
   lief sie ~5px ueber den verfuegbaren Platz hinaus (overflow bleibt standardmaessig sichtbar).
   Dieser sichtbare Overflow liess bei Chrome zusaetzlich window.innerWidth wachsen, wodurch jedes
   position:fixed;inset:0-Element (u.a. .mobile-nav) auf denselben, faelschlich groesseren Wert
   aufgerundet wurde - das eigentliche Mobilnav-CSS war korrekt, die URL im Text war die Ursache.
   overflow-wrap:break-word bricht ausschliesslich dort um, wo ein Wort/Token sonst nicht passen
   wuerde (kein pauschales "anywhere", keine Aenderung an normal umbrechendem Text). Nur auf die
   Rechtstext-Container beschraenkt, nicht global. */
.legal-content p { overflow-wrap: break-word; }

.eyebrow {
  font-family: var(--sans);
  /* Fix: 0.72rem wirkte neben H2 zu klein (z.B. "ABLAUF") - moderat auf 0.8rem angehoben,
     bleibt bei allen Breakpoints klar unter den H2-Groessen (>=1.8rem). */
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 1rem;
  display: block;
}
.section-head {
  max-width: 42rem;
  margin-bottom: 1rem;
}
.section-head .eyebrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}
.section-head .eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--gold);
  opacity: 0.7;
}
.section-head h1,
.section-head h2 {
  margin: 0 0 0.9rem;
}
.text-muted { color: var(--muted); }
.text-gold { color: var(--gold-text); }
.serif-i { font-family: var(--serif); font-style: italic; font-weight: 300; }

/* ── Layout ─────────────────────────────────────── */
.wrap {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.section {
  padding-block: var(--section-py);
}
.section--band {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.section--dark {
  background: var(--green);
  color: #f1ead9;
}
.section--dark h1,
.section--dark h2,
.section--dark h3 { color: var(--white); }
/* Fix: var(--gold) auf --green ergab nur ~3.7:1 (AA-Fail bei 0.8rem/bold). var(--gold-on-dark)
   ist bereits fuer --green kalibriert (7.17:1, s. Variablen-Kommentar) - konsistent mit
   Hero-Eyebrow und Kontakt-Eyebrow, die dieselbe helle Gold-Variante nutzen. */
.section--dark .eyebrow { color: var(--gold-on-dark); }
.section--dark .text-muted { color: #cfd9d2; }

/* ── Header ─────────────────────────────────────── */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(244, 239, 228, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.header__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 1rem var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.brand {
  font-family: var(--serif);
  font-size: 1.4rem;
  letter-spacing: 0.5px;
  text-decoration: none;
  color: var(--ink);
}
.brand b { color: var(--gold); font-weight: 400; }
.brand--logo { display: flex; align-items: center; gap: 0.65rem; height: 100%; }
.brand__icon {
  height: 38px;
  width: auto;
  display: block;
}
.brand__wordmark {
  font-family: var(--sans);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--ink);
  line-height: 1;
}
.brand__wordmark-sep { color: var(--gold); margin: 0 0.04em; }
@media (max-width: 640px) {
  .brand__icon { height: 30px; }
  .brand__wordmark { font-size: 1.02rem; letter-spacing: 0.13em; }
}
.nav-links {
  display: none;
  align-items: center;
  gap: 1.8rem;
}
.nav-links a {
  font-size: 0.85rem;
  color: var(--ink);
  opacity: 0.8;
  transition: opacity 0.2s, color 0.2s;
}
.nav-links a:hover { opacity: 1; color: var(--gold-text); } /* Fix: --gold nur 2,70:1 auf --paper (AA-Fail); --gold-text ist der bestehende AA-feste Goldton (5,58:1) fuer genau diesen Fall (Text auf Creme) */
.nav-phone {
  font-weight: 600;
  font-size: 0.85rem;
}
.burger {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink);
  font-size: 1.5rem;
  min-width: 44px; /* Fix: war 30x41px, unter dem 44x44px Touch-Target-Minimum */
  min-height: 44px;
}

/* Mobile nav overlay */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}
.mobile-nav.open { opacity: 1; pointer-events: auto; }
.mobile-nav a {
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--ink);
}
.mobile-nav .close-btn {
  position: absolute;
  top: 1.2rem;
  right: var(--pad);
  background: none;
  border: 0;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--ink);
  min-width: 44px; /* Fix: war 31x34px, unter dem 44x44px Touch-Target-Minimum */
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Buttons ────────────────────────────────────── */
.btn {
  display: inline-block;
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 1em 2.2em;
  border-radius: 3px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease);
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.btn--gold {
  background: var(--gold);
  color: var(--ink); /* Fix: weiss auf gold war nur 3.09:1 (WCAG-Fail). ink auf gold = 5.27:1. */
  box-shadow: 0 1px 2px rgba(20,40,32,0.08);
}
.btn--gold:hover {
  /* Fix: kein background-Wechsel mehr auf hover - ink auf gold-deep waere nur 3.89:1. Lift-Effekt bleibt ueber transform/shadow erhalten. */
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -10px rgba(156, 117, 54, 0.55);
}
.btn--ghost {
  background: transparent;
  border: 1.5px solid var(--gold);
  color: var(--gold);
}
.btn--ghost:hover {
  background: var(--gold);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -12px rgba(20, 40, 32, 0.35);
}
.btn--dark {
  background: var(--green);
  color: var(--white);
  box-shadow: 0 1px 2px rgba(20,40,32,0.08);
}
.btn--dark:hover {
  background: var(--green-2);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -10px rgba(15, 28, 22, 0.5);
}

.link-gold {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--gold-text);
  transition: color 0.2s;
}
.link-gold:hover { color: var(--gold-deep); }
.link-gold::after { content: ' →'; }
.link-gold--back::after { content: none; }

/* ── Hero ───────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  background: linear-gradient(155deg, #2d4a3b 0%, var(--green) 45%, var(--green-2) 100%);
  overflow: hidden;
}
.hero__mist {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.5;
  background:
    radial-gradient(120% 70% at 75% 15%, rgba(183,139,69,0.35), transparent 55%),
    radial-gradient(90% 60% at 15% 85%, rgba(20,40,32,0.7), transparent 70%);
}
/* Verdunkelung links für Textlesbarkeit über dem Hero-Bild */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Fix: staerker abgedunkelt - reale Videoframe-Probe ergab an hellen Stellen (Himmel/Wolken) rgb(229,235,242);
     bei den alten Werten (0.55 am 38%-Stop) fiel der Eyebrow-Kontrast auf 2.8:1. Neue Werte: 6.6-9.5:1. */
  background: linear-gradient(100deg,
    rgba(15,28,22,0.92) 0%,
    rgba(15,28,22,0.80) 45%,
    rgba(15,28,22,0.45) 70%,
    rgba(15,28,22,0.05) 92%);
}
/* Soft transition to paper */
.hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 40%;
  background: linear-gradient(to bottom,
    rgba(244,239,228,0) 0%,
    rgba(244,239,228,0.35) 50%,
    rgba(244,239,228,0.85) 80%,
    var(--paper) 100%);
  pointer-events: none;
}
/* Standbild-Fallback: wird durch Video überlagert wenn es lädt */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center 35%;
  opacity: 0.55;
}
.hero__video {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  opacity: 1;
}
.hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 0 var(--pad);
  width: 100%;
}
.hero h1 {
  color: var(--white);
  font-size: clamp(2.6rem, 7.5vw, 4.8rem);
  max-width: 15ch;
  margin: 0 0 1.2rem;
  text-shadow: 0 2px 40px rgba(0,0,0,0.35);
}
.hero h1 em {
  color: var(--gold);
  font-style: italic;
  font-weight: 300;
}
.hero__sub {
  color: #f1ead9;
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  max-width: 36ch;
  margin: 0 0 2rem;
  line-height: 1.6;
}
.hero__cta {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}
/* Fix: --gold-text ist fuer helle Hintergruende kalibriert (Code-Kommentar), im dunklen Video-Hero aber nur 1.79:1. */
.hero .eyebrow { color: var(--gold-on-dark); }

/* ── Trust Band ─────────────────────────────────── */
.trust-band {
  padding: 0 0 clamp(3rem, 8vh, 5rem);
  position: relative;
  z-index: 5;
}
.trust-band__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 30px 60px -24px rgba(15, 28, 22, 0.35);
  padding: clamp(1.8rem, 4vw, 2.6rem) clamp(1.4rem, 4vw, 2.4rem);
  margin-top: clamp(-5.5rem, -9vh, -3.5rem);
}
/* Fix: negativer margin-top oben zieht die Trust-Band-Karte ueber den Hero-Rand -
   gewollter Ueberlapp-Effekt, skaliert aber nur nach vh, nicht nach der tatsaechlich
   verfuegbaren Resthoehe unter Headline/Subline/CTA im Hero. Bei niedrigen Desktop-
   Fensterhoehen (bestaetigt bei ~600-650px) ueberlappte die Karte dadurch den Hero-CTA-
   Button. Eng begrenzt auf Desktop-Breiten (Mobil hat eigene Regel oben/unten) und
   niedrige Hoehen - bei genau 700px Hoehe gilt wieder die unveraenderte Basisregel. */
@media (min-width: 1024px) and (max-height: 699px) {
  .trust-band__grid { margin-top: 0; }
}
.trust-band__item strong {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  color: var(--green);
  margin-bottom: 0.3rem;
}
.trust-band__item span {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Tour Cards ─────────────────────────────────── */
.tours-grid {
  display: grid;
  gap: 1.5rem;
}
.tour-card {
  position: relative; /* Fix 1.2: Basis fuer den Stretched-Link (::after) auf Mobil */
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.tour-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(36,63,51,0.1);
}
/* Premium-Hierarchie: signature = breite Hauptkarten, compact = kleinere Zweitreihe */
.tour-card--signature { grid-column: span 1; }
.tour-card--signature .tour-card__img { aspect-ratio: 16 / 11; }
.tour-card--signature h3 { font-size: 1.25rem; }
.tour-card--compact { opacity: 0.96; }
.tour-card--compact .tour-card__img { aspect-ratio: 16 / 9; }
.tour-card--compact h3 { font-size: 1.05rem; }
.tour-card--compact .tour-card__sub { font-size: 0.92rem; -webkit-line-clamp: 2; }
.tour-card--compact .tour-card__body { padding: 1.1rem 1.3rem; }
.tour-card__img {
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  background-color: var(--green);
  position: relative;
  filter: saturate(0.9) contrast(1.04) brightness(0.99);
}
/* Bilderstrecke bei Hover: zwei uebereinanderliegende Ebenen, weiche Ueberblendung */
.tour-card__img-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.tour-card__img-layer.is-visible { opacity: 1; }
/* Marken-Grading: einheitliche Bildwelt über alle 13 Cover */
.tour-card__img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(36,63,51,0.06), rgba(36,63,51,0.14));
  pointer-events: none;
}
.tour-card__body {
  padding: 1.5rem;
}
.tour-card__badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-text); /* Fix: var(--gold) war nur 2.97:1, gold-text (AA-fest kalibriert) = 6.14:1. Border bleibt --gold (dekorativ). */
  border: 1px solid var(--gold);
  border-radius: 30px;
  padding: 0.35em 0.9em;
  margin-bottom: 0.8rem;
}
.tour-card h3 {
  margin: 0 0 0.4rem;
}
.tour-card__sub {
  color: var(--ink);
  opacity: 0.8;
  font-size: 0.92rem;
  line-height: 1.5; /* Fix 3.2: an .tour-card__meta angeglichen, wirkte vorher deutlich lockerer */
  margin: 0 0 0.6rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* Fix 2.3: Umbruch an Zeilengrenze statt hartem Zeichenschnitt mitten im Wort */
  overflow: hidden;
}
.tour-card__title-link {
  color: inherit;
  text-decoration: none;
}
.tour-card__meta {
  color: var(--muted);
  font-size: 0.8rem;
  letter-spacing: 0.3px;
  line-height: 1.4; /* Fix 3.2 */
  margin: 0 0 1rem;
}
.tour-card__price {
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--green);
}
.tour-card__price small {
  font-weight: 400;
  color: var(--muted);
  font-size: 0.85rem;
}
.tour-card__voucher-note {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 400;
  margin-top: 0.2rem;
}
.tour-card__link {
  display: inline-block;
  margin-top: 0.8rem;
}

/* ── Feature Grid (Why / Trust) ─────────────────── */
.feature-grid {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}
.feature {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.5rem;
}
.feature__title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.4rem;
  color: var(--ink); /* Fix: erbte vorher rgba(241,234,217,1) von .section--dark, auf der hellen .feature-Karte aber nur 1.05:1. Jetzt 14.22:1. */
}
.feature__text {
  color: var(--muted);
  font-size: 0.9rem;
}

/* ── Process Steps ──────────────────────────────── */
.steps {
  display: grid;
  gap: 0.8rem;
  margin-top: 1.5rem;
  counter-reset: step;
}
.step {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.25rem 1.5rem 1.25rem 4rem;
  position: relative;
}
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 1.2rem;
  top: 1.1rem;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--gold);
  color: var(--white);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.8rem;
  line-height: 1.8rem;
  text-align: center;
}
.step__title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.2rem;
}
.step__text {
  color: var(--muted);
  font-size: 0.88rem;
}

/* ── Inquiry Section ────────────────────────────── */
.inquiry-box {
  background: var(--green);
  color: #f1ead9;
  border-radius: 20px;
  padding: clamp(2.5rem, 6vw, 3.5rem);
}
.inquiry-box h2 { color: var(--white); }
.inquiry-box .text-muted { color: #d8cdb5; }

/* Form styles */
.form-grid { display: grid; gap: 1rem; margin-top: 1.5rem; }
.form-group {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.form-group label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(241,234,217,0.6);
  margin-bottom: 0.4rem;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  color: #f1ead9;
  font-family: var(--sans);
  font-size: 0.95rem;
  padding: 0.75em 1em;
  transition: border-color 0.2s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--gold);
}
.form-group select option {
  background: var(--green-2);
  color: #f1ead9;
}
.form-group textarea {
  resize: vertical;
  min-height: 80px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-note {
  font-size: 0.75rem;
  color: rgba(241,234,217,0.65); /* Fix: 0.5 Alpha ergab nur 3.68:1 auf --green (Datenschutz-Hinweis!). 0.65 = 4.57:1. */
  margin-top: 0.8rem;
}

/* Fix: einheitlicher, sichtbarer Fokusring fuer Tastaturbedienung. Nur :focus-visible (Tastatur),
   nicht bei Maus-Klick - Formularfelder behalten zusaetzlich ihren border-color-Wechsel bei :focus.
   Kein einzelner Goldton erreicht 3:1 auf sowohl Creme (--paper) als auch Gruen (--green/-2/-3)
   gleichzeitig. Daher Doppelring aus --ink (Innenring) + --paper-Halo (Aussenring): auf hellen
   Flaechen ist der dunkle Innenring sichtbar (14,2:1 auf --paper), auf dunklen Flaechen der helle
   Aussen-Halo (>10:1 auf --green/-2/-3). Beide Farben sind bestehende Marken-Tokens, keine neue Farbe. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--paper);
  border-radius: 2px;
}

/* ── Visa Note Banner ───────────────────────────── */
.visa-note {
  margin-top: 1.5rem;
  background: var(--gold-light);
  border: 1px solid var(--gold);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  color: var(--green);
  font-weight: 600;
  font-size: 0.9rem;
}

/* ── Footer ─────────────────────────────────────── */
.footer {
  background: var(--green-2);
  color: #cabd9f;
  padding: clamp(3rem, 8vh, 5rem) 0 2rem;
}
.footer__grid {
  display: grid;
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer .brand { color: var(--white); }
.footer a { color: var(--gold); transition: opacity 0.2s; }
.footer a:hover { opacity: 0.7; }
.footer__col h3 {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.8rem;
}
.footer__col a {
  display: block;
  color: #cabd9f;
  font-size: 0.9rem;
  /* Fix: Klickflaeche lag vorher bei ca. 17px Hoehe (nur font-size, kein eigenes Padding).
     padding statt margin-bottom, damit der zusaetzliche Raum Teil der Klickflaeche wird,
     nicht nur optischer Abstand - Gesamtabstand zwischen zwei Links bleibt etwa gleich. */
  padding: 0.5rem 0;
}
.footer__bottom {
  padding-top: 1.5rem;
  font-size: 0.78rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ── Tour Detail Page ───────────────────────────── */
.tour-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  max-height: 50vh;
  overflow: hidden;
  background: var(--green);
}
.tour-hero__quickcard {
  position: absolute;
  right: clamp(1rem, 4vw, 2.5rem);
  bottom: clamp(1rem, 4vw, 2rem);
  z-index: 2;
  /* Dasselbe Dunkelgruen wie die Kontakt-/Anfragekarte (.inquiry-box), statt des
     bisherigen hellen Frosted-Glass-Looks - einheitliche Buchungskarte auf Desktop+Mobil. */
  background: var(--green);
  border: 1px solid rgba(241, 234, 217, 0.18);
  border-radius: 14px;
  padding: 1.1rem 1.3rem;
  box-shadow: 0 20px 50px -20px rgba(15, 28, 22, 0.55);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: min(90vw, 380px);
}
.tour-hero__quickcard-row {
  display: flex;
  gap: 1.1rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: #f1ead9;
  font-weight: 600;
}
/* Preis (2. Span: Dauer/Preis/Status) deutlich in hellem Gold hervorgehoben */
.tour-hero__quickcard-row span:nth-child(2) { color: var(--gold-on-dark); }
.tour-hero__quickcard-cta {
  text-align: center;
  padding: 0.75em 1.4em;
  font-size: 0.72rem;
}
@media (max-width: 640px) {
  .tour-hero__quickcard { left: 1rem; right: 1rem; bottom: 1rem; max-width: none; }
}
.tour-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tour-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(25,34,29,0.5) 0%, transparent 60%);
}
.tour-detail { padding-block: var(--section-py); }
.tour-detail__header {
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}
.tour-meta-grid {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.tour-meta-item {
  font-size: 0.85rem;
}
.tour-meta-item strong {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 0.2rem;
}

/* Route auf einen Blick — Stationen als Kette statt Fliesstext */
.route-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.4rem;
}
.route-chip {
  font-size: 0.78rem;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  white-space: nowrap;
}
.route-chip--arrow {
  color: var(--gold-text);
  font-size: 0.72rem;
  padding: 0;
  border: none;
  background: none;
}

/* Quick-CTA direkt unter der Route — ohne Scrollen sichtbar */
.tour-quick-cta {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-top: 1.6rem;
}
.tour-quick-cta .btn { white-space: nowrap; }
.tour-quick-cta__note {
  font-size: 0.82rem;
  color: var(--muted);
}
.tour-highlights {
  list-style: none;
  padding: 0;
}
.tour-highlights li {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line-light);
  font-size: 0.95rem;
}
.tour-highlights li::before {
  content: '·';
  color: var(--gold);
  font-weight: 700;
  margin-right: 0.6rem;
}

/* ── Scroll reveal ──────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.in {
  opacity: 1;
  transform: none;
}

/* ── Responsive ─────────────────────────────────── */
@media (min-width: 760px) {
  .hero h1 { font-size: clamp(3rem, 6.5vw, 4.8rem); }
  .tours-grid { grid-template-columns: repeat(3, 1fr); }
  .feature-grid { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .form-grid { grid-template-columns: 1fr 1fr; }
  /* Fix: 5 Kind-Elemente (Marke + 4 Linkspalten), Grid definierte bisher nur 4 Spuren -
     "Rechtliches" (letzte Spalte) umbrach in eine zweite Zeile unter die breite Marke. */
  .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; }
  .route { display: none; } /* Fix 2.1: Timeline nur auf Mobil, ab hier bleibt die Pillen-Reihe (.route-chips) */
}
@media (min-width: 1024px) {
  /* Fix: Desktop-Nav schaltete bisher schon ab 760px um (.nav-links:flex/.burger:none), aber Logo +
     Wortmarke + 3 Links + Sprachwechsel + Telefon + Anfragen-Button brauchen gemessen ca. 896px in
     einer Zeile (Summe der Kindbreiten bei 1440px + Gaps + Innenabstand). Zwischen 760-912px kam es
     dadurch zur Ueberlappung von Wortmarke und "Reisen" bzw. Zeilenumbruch bei "Warum PureVita".
     1024px ist der bereits bestehende Desktop-Breakpoint in dieser Datei und liegt mit ausreichend
     Sicherheitsabstand (>125px) oberhalb des gemessenen Bedarfs. */
  .nav-links { display: flex; }
  .burger { display: none; }
  .steps { grid-template-columns: repeat(4, 1fr); }

  /* Hero-Headline auf Desktop moderat verkleinert (war bis 4,8rem/76,8px gedeckelt) -
     Landschaft bleibt sichtbarer, Text wirkt ruhiger. Tablet (760-1023px) unveraendert,
     dort greift weiterhin die vw-skalierte Basisregel ohne diesen kleineren Deckel. */
  .hero h1 { font-size: clamp(2.75rem, 5.2vw, 4rem); }

  /* Desktop-Sektionsabstaende verdichtet (waren ~94px pro Kante, ~190-200px zwischen zwei
     Sektionen) - reduziert auf ruhige, aber nicht leere ~64px pro Kante. Tablet bleibt bei
     der Basisregel (clamp(5.5rem,13vh,9rem)), da hier nicht separat beauftragt. */
  :root { --section-py: 4rem; }
  /* Freigegebener Sonderfall wie auf Mobil: Trust-Karte -> "Signature Reisen" bleibt beim
     bisherigen Wert, nur die uebrigen Sektionsuebergaenge wurden verdichtet. */
  #journeys { padding-top: clamp(5.5rem, 13vh, 9rem); }
}
/* Fix: eigener Breakpoint bei 768px statt im gemeinsamen 759px-Block darunter - bei exakt
   768px (Standard-Tablet-Breite) griff sonst noch die 4-Spalten-Desktop-Variante der Basisregel
   (Zeile ~498), weil 768 > 759. Nur diese eine Regel bekommt den angehobenen Wert, der Rest
   des Mobil-Blocks bleibt bei 759px. */
@media (max-width: 768px) {
  .trust-band__grid { grid-template-columns: repeat(2, 1fr); margin-top: 1.5rem; box-shadow: 0 18px 36px -18px rgba(15, 28, 22, 0.3); }
}
@media (max-width: 759px) {
  /* Mobile-Verdichtung: --section-py steuerte auf Mobil ueber 100px Abstand pro Sektionskante
     (bis zu ~220px Leerraum zwischen zwei Sektionen) - reduziert auf ~80-96px Inhalt-zu-Inhalt
     zwischen zwei normalen aufeinanderfolgenden Sektionen (36-42px pro Kante + ~9px Eyebrow-
     Zeilenversatz). Wirkt global ueber alle Verbraucher der Variable (.section, .tour-detail). */
  :root { --section-py: clamp(2.25rem, 5vh, 2.625rem); }

  /* Fix: Karte lag vorher per negativem Margin ueber dem Hero-Video (ueberlappend) - jetzt sauberer Block darunter */
  .trust-band__item span { letter-spacing: 0.04em; } /* Fix: "NACH AKTUELLEM STAND" brach vorher in 3 Zeilen um */
  /* Rest des Abstands zu "Signature Reisen" kommt aus dem Top-Padding von #journeys darunter. */
  .trust-band { padding-bottom: 0; }
  /* Freigegebener Sonderfall: Trust-Karte -> "Signature Reisen" soll bei ~73px bleiben (separat
     bestaetigt), waehrend alle anderen Sektionsuebergaenge auf das kleinere --section-py oben
     reduziert wurden. Nur das Top-Padding dieser einen Section wird auf den alten Wert gesetzt -
     ihr eigenes Bottom-Padding (Uebergang zu "Warum PureVita") nutzt weiterhin --section-py. */
  #journeys { padding-top: clamp(3rem, 8vh, 4rem); }

  /* Hero-Text auf Mobil moderat verkuerzt: Headline blieb hochwertig (Serif, Kursiv-Akzent),
     dominiert aber nicht mehr den ganzen ersten Screen. Hero-Hoehe (min-height) bleibt unangetastet. */
  .hero h1 { font-size: clamp(2rem, 9vw, 2.5rem); margin-bottom: 0.9rem; }
  .hero__sub { font-size: 0.92rem; line-height: 1.5; margin-bottom: 1.4rem; }

  .form-row { grid-template-columns: 1fr; }
  /* Fix: .tour-content ist per Inline-Style im Template hart auf "1fr 1fr" gesetzt, ohne Mobile-Fallback -
     erzwang horizontalen Overflow auf allen 13 Tourseiten bei 360-390px. !important noetig gegen Inline-Style. */
  .tour-content { grid-template-columns: 1fr !important; gap: 2rem !important; }

  /* Fix 1.1: Buchungskarte verdeckte auf Mobil fast das gesamte Hero-Bild (Overlay fuer Desktop-Breiten
     dimensioniert). Unter 759px kein Overlay mehr - Bild und Karte im normalen Fluss untereinander. */
  .tour-hero {
    display: flex;
    flex-direction: column;
    max-height: none;
    aspect-ratio: auto;
    overflow: visible;
    background: none;
  }
  .tour-hero img { position: static; width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; display: block; }
  .tour-hero::after { display: none; }
  .tour-hero__quickcard {
    position: static;
    width: auto;
    max-width: none;
    margin: 0.875rem 1rem 0;
    /* Hintergrund/Rand kommen jetzt von der Basisregel (dunkelgruen, wie .inquiry-box) -
       hier nur noch Positionierung fuer den normalen Fluss unter dem Bild. */
    box-shadow: 0 10px 26px -16px rgba(15, 28, 22, 0.35);
  } /* Fix: war -1.5rem (negativ) - zog Karte ueber das Bild, jetzt sauberer Abstand darunter */

  /* Fix: mobile CTA-Button in der Preiskarte mass nur ~33-36px Hoehe (padding/font allein reichten
     nicht bis zum 44px-Touch-Target-Minimum). Nur auf Mobil per min-height/flex korrigiert - Text,
     Farben, Padding-Werte und die Desktop-Regel (Zeile ~864) bleiben unveraendert. */
  .tour-hero__quickcard-cta {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Fix 1.2: Stretched Link nur auf Mobil ueber die ganze Karte (inkl. Bild) - auf Desktop bleibt
     die Bildflaeche fuer den bestehenden Hover-Bilderwechsel (tour-hover.js) unangetastet. */
  .tour-card__title-link::after {
    content: "";
    position: absolute;
    inset: 0;
  }
  .tour-card__title-link:focus-visible { outline: none; }
  .tour-card__title-link:focus-visible::after {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
    border-radius: 18px;
  }

  /* Fix 2.1: Route als vertikale Timeline statt umbrechender Pillen-Reihe (brach vorher mitten in
     der Route um, letzte Station stand isoliert auf eigener Zeile). */
  .route-chips { display: none; }
  .route {
    display: block;
    list-style: none;
    margin: 1.4rem 0 0;
    padding-left: 1.25rem;
    position: relative;
  }
  .route::before {
    content: "";
    position: absolute;
    left: 0.3rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 1px;
    background: var(--line);
  }
  .route__stop {
    position: relative;
    padding: 0.4rem 0;
    font-size: 0.85rem;
    font-family: var(--sans);
    color: var(--ink);
  }
  .route__stop::before {
    content: "";
    position: absolute;
    left: -1.05rem;
    top: 0.95rem;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold);
  }

  /* Fix 2.2: Buchungskarte auf Preis+CTA reduziert (Dauer/Status stehen bereits in der Meta-Liste
     darunter) - siehe .tour-hero__quickcard-row Markup-Aenderung in tours.njk. */
  .tour-hero__quickcard-row > span:not(:nth-child(2)) { display: none; } /* Fix 2.2 korrigiert: 1. Span=Dauer, 2.=Preis, 3.=Status - Preis soll bleiben, nicht Dauer */

  /* Tour-Highlights: erste drei Punkte als hervorgehobene Key-Highlight-Karten, Rest bleibt
     kompakte Liste darunter. Reine CSS-Hervorhebung ueber nth-child - Text, Reihenfolge und
     Anzahl der <li> im Markup bleiben unveraendert. */
  .tour-highlights li:nth-child(-n+3) {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    padding: 0.85rem 1rem;
    margin-bottom: 0.6rem;
    font-weight: 600;
  }
  .tour-highlights li:nth-child(-n+3)::before { color: var(--gold-deep); }
  .tour-highlights li:nth-child(n+4) {
    padding: 0.45rem 0;
    font-size: 0.85rem;
    color: var(--muted);
    border-bottom: 1px solid var(--line-light);
  }
}

/* ── FAQ (AEO) ──────────────────────────────────── */
.faq-list {
  max-width: 46rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.faq-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 1.1rem 3rem 1.1rem 1.4rem;
  font-family: var(--serif);
  font-size: 1.08rem;
  color: var(--ink);
  position: relative;
  transition: color 0.3s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 1.4rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.4rem;
  color: var(--gold);
  transition: transform 0.3s var(--ease);
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item[open] summary { color: var(--gold-text); }
.faq-item p {
  margin: 0;
  padding: 0 1.4rem 1.2rem;
  color: var(--muted);
  line-height: 1.65;
  max-width: 60ch;
}

/* ── Stimmen / Testimonials ─────────────────────── */
.voices-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.4rem;
  margin-bottom: 2rem;
}
.voice-card {
  position: relative;
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 2.2rem 1.7rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  overflow: hidden;
}
.voice-card::before {
  content: "\201E";
  position: absolute;
  top: -0.3rem;
  left: 0.9rem;
  font-family: var(--serif);
  font-size: 5rem;
  line-height: 1;
  color: var(--gold);
  opacity: 0.18;
  pointer-events: none;
}
.voice-card blockquote {
  position: relative;
  margin: 0;
  font-family: var(--serif);
  font-size: 1.08rem;
  font-style: italic;
  line-height: 1.65;
  color: var(--ink);
}
.voice-card figcaption {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--gold-text);
}
.voice-card figcaption::before {
  content: "";
  display: inline-block;
  width: 1.4rem;
  height: 1px;
  background: var(--gold);
  opacity: 0.6;
}
/* ── Galerie-Streifen ───────────────────────────── */
.gallery-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.7rem;
}
.gallery-item {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.gallery-item__frame {
  overflow: hidden;
  border-radius: 12px;
}
/* Fix: Galeriebilder waren nur anklickbare <img>, nicht per Tastatur (Enter/Leertaste) bedienbar.
   Jetzt in ein semantisches <button> gewrappt (Nunjucks-Templates) - dieser Reset sorgt dafuer,
   dass der Button optisch identisch zum vorherigen reinen Bild bleibt, nur der Fokusring (globale
   :focus-visible-Regel) kommt neu hinzu. */
.gallery-item__btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: zoom-in;
}
.gallery-item img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  cursor: zoom-in;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.gallery-item:hover img {
  transform: scale(1.07);
}

/* ── Lightbox (Tour-Galerie Vollbild) ───────────── */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(18, 26, 22, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  padding: clamp(1rem, 5vw, 3rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}
/* Fix: ".lightbox[hidden] { display: flex; }" hob die native hidden-Semantik auf - der
   Close-Button blieb bei geschlossenem Lightbox per Tab erreichbar. Blosses Entfernen dieser
   Regel reicht nicht: Die Basisregel oben (".lightbox { display: flex; ... }") ist ebenfalls
   Autoren-CSS und schlaegt die User-Agent-Regel "[hidden] { display: none }" unabhaengig von der
   Selektor-Spezifitaet (Autoren-Herkunft gewinnt immer gegen UA-Herkunft). Diese Regel stellt das
   hidden-Verhalten explizit wieder her (hoehere Spezifitaet als die Basisregel durch den
   zusaetzlichen Attribut-Selektor). Die Oeffnen/Schliessen-Animation bleibt unveraendert: lightbox.js
   setzt hidden=false sofort beim Oeffnen (vor der Opacity-Transition) und hidden=true erst 250ms
   NACH dem Entfernen von .is-open beim Schliessen, also nachdem die Fade-out-Transition bereits
   abgelaufen ist - "display:none" greift dadurch immer erst nach der sichtbaren Animation. */
.lightbox[hidden] {
  display: none;
}
.lightbox__img {
  max-width: 92vw;
  max-height: 88vh;
  border-radius: 6px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  transform: scale(0.96);
  transition: transform 0.25s ease;
}
.lightbox.is-open .lightbox__img {
  transform: scale(1);
}
.lightbox__close {
  position: absolute;
  top: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox__close:hover {
  background: rgba(255, 255, 255, 0.2);
}
.gallery-item figcaption {
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.02em;
  padding-left: 0.15rem;
}
.gallery-strip img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
@media (max-width: 760px) {
  .gallery-strip { grid-template-columns: repeat(2, 1fr); }
}

/* ── Direkt-Kontakt über Anfrageformular ────────── */
.inquiry-direct {
  margin: 0 0 1.5rem;
  font-size: 0.92rem;
  color: #d8cdb5;
}
.inquiry-direct a {
  color: var(--gold-on-dark);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
} /* Fix: --gold nur 3,70:1 auf --green (AA-Fail); --gold-on-dark ist der bestehende AA-feste Goldton (7,17:1) fuer Text auf dunklem Hintergrund */
.inquiry-direct a:hover { text-decoration: underline; color: #d4af6a; }
.inquiry-direct span { color: rgba(216, 205, 181, 0.45); margin: 0 0.35rem; }

/* ── Preisrahmen (Highticket-Qualifier, auf dunkler Inquiry-Box) ── */
.inquiry-price-frame {
  max-width: 52ch;
  margin: 0 0 1.4rem;
  padding: 0.85rem 1.1rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #e6dcc4;
  border-left: 2px solid var(--gold);
  background: rgba(183, 139, 69, 0.12);
  border-radius: 0 10px 10px 0;
}

/* ── v20.4 Feinschliff ──────────────────────────── */
/* Trust-Band: ruhigere Zeilenumbrüche auf Mobile */
.trust-band__item span { text-wrap: balance; }
/* Footer-Wortmarke (helle Variante auf Dunkelgrün) */
.brand--footer { display: inline-block; margin-bottom: 0.4rem; }
.brand__wordmark--light { color: #f1ead9; font-size: 1.15rem; }

/* ── Creator-Reels (aktiviert sobald MP4s vorliegen) ── */
.reels-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem;
  margin-top: 1.5rem;
  max-width: 44rem;
}
.reel-item { margin: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.reel-item video {
  width: 100%;
  aspect-ratio: 9/16;
  object-fit: cover;
  border-radius: 12px;
  background: var(--green-3);
  display: block;
}
.reel-item figcaption { font-size: 0.72rem; color: var(--muted); }
@media (max-width: 759px) {
  /* Fix: bei 3 Videos in 2 Spalten stand das letzte Video allein in eigener Zeile mit leerem
     Bereich daneben. Eine Spalte = volle Breite innerhalb des Content-Containers, kein Leerraum. */
  .reels-strip { grid-template-columns: 1fr; max-width: none; }
}