/* =============================================================================
   INDEX — Seitenspezifische Styles
   Alle Insight-Reisen-Komponenten für die Homepage.
   Setzt css/tokens/client.css (Bridge-Aliases) voraus.
   ============================================================================= */

/* === LAYOUT HELPERS === */
:root {
  --display:  var(--font-family-title);
  --body:     var(--font-family-body);
  --gutter:   clamp(1.25rem, 3.5vw, 3rem);
  --max:      var(--container-xlarge);
  --r:        var(--border-radius-large);
  --ease:     cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --nav-h:    var(--ir-nav-h);
}

.shell {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  padding: clamp(4rem, 8vw, 7rem) 0;
  position: relative;
}

/* Farbthema für eine ganze Seite (Feld «Darstellung», gesetzt am <main>).
   `.section` bringt selbst keinen Hintergrund mit — ohne diese Fläche schiene
   die Papierfarbe des <body> zwischen den Blöcken durch, die ihre eigene
   malen. Die Textfarbe steht mit, weil <body> sie direkt deklariert und ein
   geerbter Wert dagegen nicht ankommt. */
.page--theme { background: var(--theme-bg-page); }
/* Die Textfarbe muss an jeder Themen-Ebene neu deklariert werden: <body>
   deklariert `color` direkt, ein geerbter Wert kommt dagegen nicht an — und ein
   Block mit eigenem Thema erbt sonst die Farbe der Seite (helle Schrift auf
   Cream), weil er nur die Variable neu setzt, nicht die Farbe selbst. */
.page--theme,
.page--theme [data-theme] { color: var(--theme-text-body); }
.section--facts { padding: clamp(1rem, 2vw, 1.5rem) 0 clamp(3rem, 5vw, 4.5rem); }
.section--facts .stats { margin-top: 0; }

/* === TYPOGRAPHY HELPERS === */
.eyebrow {
  font-size: var(--font-fontSize-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--color-brand-secondary-500);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; }
.eyebrow--ink    { color: var(--theme-eyebrow); }
.eyebrow--light  { color: var(--color-brand-secondary-500); }
.eyebrow--noline::before { display: none; }

/* Sterne-Klassifizierung (ir_sterne_markup() in functions.php). Steht hier in
   der geteilten Datei, weil sie in den Resort-Sections und auf der
   Resort-Detailseite gebraucht wird. */
.ir-sterne { display: inline-flex; gap: .15rem; color: var(--color-brand-secondary-500); }
.ir-sterne svg { width: 1rem; height: 1rem; }
/* Haelt das letzte Wort einer Ueberschrift mit den Sternen zusammen. */
.ir-nowrap { white-space: nowrap; }


/* =============================================================================
   PROMO BAR
   ============================================================================= */
.promo {
  background: var(--color-brand-primary-800);
  color: var(--color-white);
  padding: .65rem var(--gutter);
  font-size: var(--font-fontSize-xs);
  text-align: center;
  letter-spacing: .06em;
  position: relative;
  z-index: 1;
}
.promo a { color: var(--color-brand-secondary-500); margin-left: .4rem; border-bottom: 1px solid var(--color-brand-secondary-600); }
.promo a:hover { color: var(--color-white); border-color: var(--color-white); }
.promo__dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-brand-secondary-500);
  margin-right: .55rem;
  vertical-align: middle;
  animation: pulse 2s ease infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.5); opacity: .6; }
}


/* =============================================================================
   NAV
   ============================================================================= */
.nav-wrap {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: .85rem var(--gutter);
  transition: transform .32s ease;
}
.nav-wrap.is-hidden {
  transform: translateY(-100%);
}
.nav {
  max-width: calc(var(--max) - 2rem);
  margin: 0 auto;
  display: flex; align-items: center; gap: .75rem;
  padding: .5rem .6rem .5rem 1.35rem;
  background: var(--ir-nav-glass-bg);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-radius: var(--border-radius-round);
  border: 1px solid color-mix(in srgb, var(--color-white) 13%, transparent);
  color: var(--color-white);
  transition: background .35s var(--ease), border-color .35s;
}
.nav.scrolled { background: var(--ir-nav-scrolled-bg); border-color: color-mix(in srgb, var(--color-white) 8%, transparent); }
.nav__logo    { display: flex; align-items: center; flex-shrink: 0; margin-right: .5rem;     margin-bottom: -5px; }
.nav__logo img { height: 3rem; width: auto; margin-bottom: -5px; }
.nav__list {
  display: flex; align-items: center; flex: 1; justify-content: center;
  list-style: none; padding: 0; margin: 0; gap: 0;
}
.nav__item {
  position: relative;
  padding: .65rem 1rem;
  white-space: nowrap;
  font-size: var(--font-fontSize-xs); letter-spacing: .17em; text-transform: uppercase;
  font-weight: var(--font-weight-medium); color: color-mix(in srgb, var(--color-white) 90%, transparent); transition: color .2s;
}
.nav__item:hover { color: var(--color-white); }
.nav__list li + li .nav__item::before,
.nav__list li + li .nav__item--trigger::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 1px; height: 13px; background: color-mix(in srgb, var(--color-white) 20%, transparent);
  transform: translateY(-50%);
}
/* ---- Such-Icon in der Hauptnavigation ---- */
.nav__search { position: relative; }
.nav__search-trigger {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex-shrink: 0;
  color: color-mix(in srgb, var(--color-white) 75%, transparent);
  border-radius: 50%;
  transition: color .2s, background .2s;
}
.nav__search-trigger:hover { color: var(--color-white); background: color-mix(in srgb, var(--color-white) 10%, transparent); }
.nav__search-trigger.is-open { color: var(--color-white); background: color-mix(in srgb, var(--color-white) 12%, transparent); }
.nav__search-trigger svg { width: 20px; height: 20px; flex-shrink: 0; }
@media (max-width: 980px) { .nav__search { display: none; } }

.nav__cta {
  background: var(--theme-btn-primary-bg, var(--color-brand-secondary-500)); color: var(--theme-btn-primary-text, var(--ink));
  padding: .8rem 1.35rem; border-radius: var(--border-radius-round);
  font-size: var(--font-fontSize-xs); font-weight: var(--font-weight-semibold); letter-spacing: .17em; text-transform: uppercase;
  transition: transform .25s var(--ease), background .25s; white-space: nowrap; flex-shrink: 0;
}
.nav__cta:hover { background: var(--theme-btn-primary-bg-hover, var(--ir-saffron-light)); transform: translateY(-1px); }

/* ---- Favoriten-Herz und Telefon in der Hauptnavigation ----
   Das Telefon bleibt auf allen Breiten sichtbar — auf dem Handy ist «direkt
   anrufen» der kürzeste Weg zur Beratung. */
.nav__fav,
.nav__tel {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; flex-shrink: 0;
  color: color-mix(in srgb, var(--color-white) 75%, transparent);
  border-radius: 50%;
  transition: color .2s, background .2s;
}
.nav__fav:hover,
.nav__tel:hover { color: var(--color-white); background: color-mix(in srgb, var(--color-white) 10%, transparent); }
.nav__fav svg,
.nav__tel svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.nav__fav.has-items { color: var(--color-white); }
.nav__fav-badge {
  position: absolute; top: 4px; right: 4px;
  min-width: 16px; height: 16px; padding: 0 var(--padding-xxsmall);
  background: var(--color-brand-secondary-500); color: var(--ink);
  border-radius: var(--border-radius-round);
  font-size: var(--font-fontSize-xs); font-weight: var(--font-weight-bold); line-height: 16px;
  text-align: center;
  pointer-events: none;
  transition: transform .2s;
}
@media (max-width: 980px) { .nav__fav { display: none; } }

.nav__burger {
  display: none; width: 42px; height: 42px; border-radius: 50%; color:var(--color-white);
  border: 1px solid color-mix(in srgb, var(--color-white) 25%, transparent); align-items: center; justify-content: center;
  margin-left: auto; transition: background .25s;
}
.nav__burger:hover { background: color-mix(in srgb, var(--color-white) 10%, transparent); }
/* ---- Kompaktstufen ----------------------------------------------------------
   Die Desktop-Nav wird stufenweise enger, statt den Text umbrechen zu lassen
   oder den CTA aus der Pille zu schieben. Reicht auch das nicht mehr,
   übernimmt der Burger (IR_NAV_BURGER, siehe unten) — derselbe Wert steht in
   nav-mega.css.

   Gemessen mit Playwright (2026-10-05, 6 Menüeinträge, Suche + Merkliste +
   Telefon): ab welcher Fensterbreite jede Stufe gerade noch passt —
     voll 1387px · Stufe 1 1306px · Stufe 2 1253px · Stufe 3 1176px.
   Jede Grenze liegt rund 20px darüber; die Reserve fängt breiter rendernde
   Schriften ab (Firefox, Windows). Vorher lagen die Grenzen genau auf dem
   Bedarf oder darunter, und der CTA ragte schon ohne Telefon bei 1121–1250px bis zu 12px heraus.
   Ändert sich ein Menüeintrag, neu messen.
   --------------------------------------------------------------------------- */
@media (max-width: 1420px) {
  .nav { gap: .5rem; padding-left: 1rem; }
  .nav__logo img { height: 2.8rem; }
  .nav__item, .nav__item--trigger { padding-inline: .8rem; }
}
@media (max-width: 1325px) {
  .nav__logo img { height: 2.6rem; }
  .nav__item, .nav__item--trigger { padding-inline: .6rem; }
}
@media (max-width: 1272px) {
  .nav { gap: .35rem; padding-left: .85rem; }
  .nav__logo img { height: 2.4rem; }
  .nav__item, .nav__item--trigger { padding-inline: .4rem; }
  .nav__cta { padding: .8rem 1.1rem; }
}

/* ---- IR_NAV_BURGER = 1195px: ab hier mobile Navigation ----
   Die engste Stufe passt ab 1176px (siehe Kompaktstufen), 1195px lässt rund
   20px Reserve. Der Wert hängt an den Menüeinträgen (aktuell 6) — ändert sich
   einer, neu messen und beide Stellen nachziehen: hier und nav-mega.css.
   Suche und Merkliste bleiben bis 980px sichtbar und stehen dazwischen neben
   dem Burger — das mobile Menü hat keine Suche, sie wäre sonst in diesem Band
   gar nicht erreichbar. Das Telefon bleibt auf allen Breiten stehen. */
@media (max-width: 1195px) {
  .nav-wrap { padding: .65rem var(--gutter); }
  .nav__list, .nav__cta { display: none; }
  .nav__burger { display: flex; margin-left: 0; }
  .nav__logo { margin-right: auto; }
}


/* =============================================================================
   MOBILE MENU
   ============================================================================= */
/* Overlay */
.mob-menu {
  position: fixed; inset: 0; z-index: 150;
  background: var(--color-brand-primary-600); color: var(--color-white);
  transform: translateX(100%); transition: transform .42s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.mob-menu.is-open { transform: translateX(0); }

/* Header: Zurück + Schliessen */
.mob-menu__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem var(--gutter);
  border-bottom: 1px solid color-mix(in srgb, var(--color-white) 8%, transparent);
  flex-shrink: 0; min-height: 62px;
}
.mob-menu__back {
  display: inline-flex; align-items: center; gap: .4rem;
  background: none; border: none; color: color-mix(in srgb, var(--color-white) 70%, transparent);
  font-size: var(--font-fontSize-xs); font-weight: var(--font-weight-medium); letter-spacing: .06em;
  cursor: pointer; padding: .35rem .6rem; border-radius: 0.375rem;
  transition: color .15s, background .15s;
}
.mob-menu__back:hover { color: var(--color-white); background: color-mix(in srgb, var(--color-white) 6%, transparent); }
.mob-menu__close {
  margin-left: auto;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--color-white) 25%, transparent); display: grid; place-items: center;
  background: none; color: var(--color-white); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.mob-menu__close:hover { background: color-mix(in srgb, var(--color-white) 6%, transparent); border-color: color-mix(in srgb, var(--color-white) 45%, transparent); }

/* Panel-Container — klemmt Panel-Slides */
.mob__panels {
  flex: 1; position: relative; overflow: hidden;
}
.mob__panel {
  position: absolute; inset: 0;
  overflow-y: auto; padding: 1rem var(--gutter) 1.5rem;
  transition: transform .38s cubic-bezier(.4,0,.2,1), opacity .38s ease;
}

/* Haupt-Panel */
.mob__panel--main { transform: translateX(0); }
.mob__panel--main.is-hidden {
  transform: translateX(-40%);
  opacity: 0;
  pointer-events: none;
}

/* Sub-Panel */
.mob__panel--sub { transform: translateX(100%); }
.mob__panel--sub.is-active { transform: translateX(0); }

/* Haupt-Links */
.mob__link {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: .95rem 0;
  font-family: var(--display); font-size: var(--font-fontSize-3xl);
  font-variation-settings: "opsz" 96; font-weight: 300;
  border-bottom: 1px solid color-mix(in srgb, var(--color-white) 8%, transparent);
  color: var(--color-white); text-decoration: none;
  background: none; border-top: none; border-left: none; border-right: none;
  cursor: pointer; text-align: left;
  transition: color .2s;
}
.mob__link:hover, .mob__link.is-active { color: var(--color-brand-secondary-500); }
.mob__link svg {
  width: 18px; height: 18px; stroke: currentColor; fill: none;
  stroke-width: 2; flex-shrink: 0; opacity: .5;
}

/* Regionen im Sub-Panel */
.mob__sub-region {
  width: 100%;
  padding: 1.35rem 0 .5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--color-white) 8%, transparent);
}
.mob__sub-region:last-child { border-bottom: none; padding-bottom: 0; }
.mob__sub-region-title {
  display: flex; align-items: center; gap: .55rem;
  width: 100%;
  font-family: var(--display); font-size: var(--font-fontSize-xl);
  font-variation-settings: "opsz" 48; font-weight: var(--font-weight-regular);
  color: var(--color-white); text-decoration: none; margin-bottom: .6rem;
  transition: color .15s;
}
.mob__sub-region-title:hover { color: var(--color-brand-secondary-500); }
.mob__sub-badge { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; }

/* Länder: klassische Textliste */
.mob__sub-countries {
  display: flex; flex-direction: column;
  width: 100%;
}
.mob__sub-country {
  display: block; width: 100%;
  font-family: var(--body); font-size: var(--font-fontSize-sm); font-weight: var(--font-weight-regular);
  color: color-mix(in srgb, var(--color-white) 55%, transparent); text-decoration: none;
  padding: .5rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-white) 5%, transparent);
  transition: color .15s;
}
.mob__sub-country:last-child { border-bottom: none; }
.mob__sub-country:hover { color: color-mix(in srgb, var(--color-white) 90%, transparent); }

/* Dropdown-Sub-Panel */
.mob__dd-header {
  padding: 1rem var(--gutter) .75rem;
  border-bottom: 1px solid color-mix(in srgb, var(--color-white) 8%, transparent);
}
.mob__dd-title {
  font-size: var(--font-fontSize-xs); letter-spacing: .18em; text-transform: uppercase;
  font-weight: var(--font-weight-semibold); color: color-mix(in srgb, var(--color-white) 40%, transparent);
}
.mob__dd-item {
  display: flex; align-items: center; gap: .5rem;
  padding: .9rem var(--gutter);
  border-bottom: 1px solid color-mix(in srgb, var(--color-white) 5%, transparent);
  text-decoration: none; color: color-mix(in srgb, var(--color-white) 75%, transparent);
  transition: color .15s;
}
.mob__dd-item:last-child { border-bottom: none; }
/* Dritte Ebene: eingerückt, mit Strich als Zugehörigkeitszeichen.
   Der Einzug rechnet auf var(--gutter) auf — das Basis-Padding der Einträge ist
   selbst der Gutter (20px…48px je Fensterbreite). Ein absoluter Wert wäre auf
   breiten Fenstern identisch mit dem Basis-Padding und damit unsichtbar. */
.mob__dd-item--sub { padding-left: calc(var(--gutter) + 1.75rem); position: relative; }
.mob__dd-item--sub::before {
  content: "";
  position: absolute;
  left: calc(var(--gutter) + .25rem); top: 50%;
  width: 1rem; height: 1px;
  background: color-mix(in srgb, var(--color-white) 28%, transparent);
}
.mob__dd-item--sub .mob__dd-label { font-size: var(--font-fontSize-sm); }
.mob__dd-item:hover { color: var(--color-brand-secondary-500); }
.mob__dd-label { flex: 1; font-size: var(--font-fontSize-base); font-weight: var(--font-weight-medium); }
.mob__dd-desc { font-size: var(--font-fontSize-xs); color: color-mix(in srgb, var(--color-white) 40%, transparent); }

/* Footer: CTA, Telefon, Meta */
.mob-menu__footer {
  padding: 1.5rem var(--gutter) 2rem;
  border-top: 1px solid color-mix(in srgb, var(--color-white) 8%, transparent);
  flex-shrink: 0;
}
.mob-menu__cta {
  display: block; text-align: center;
  background: var(--theme-btn-primary-bg, var(--color-brand-secondary-500)); color: var(--theme-btn-primary-text, var(--ink));
  padding: .95rem 1.5rem; border-radius: var(--border-radius-round);
  font-size: var(--font-fontSize-xs); font-weight: var(--font-weight-semibold); letter-spacing: .15em; text-transform: uppercase;
}
.mob-menu__phone {
  display: flex; align-items: center; gap: .75rem; margin-top: 1rem;
  padding: .85rem 1.5rem; border: 1px solid color-mix(in srgb, var(--color-white) 18%, transparent); border-radius: var(--border-radius-round);
  font-size: var(--font-fontSize-sm); font-weight: var(--font-weight-medium); color: var(--color-white);
}
.mob-menu__phone svg { width: 17px; height: 17px; color: var(--color-brand-secondary-500); }
.mob-menu__meta {
  margin-top: 1.5rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem;
  font-size: var(--font-fontSize-xs); color: color-mix(in srgb, var(--color-white) 60%, transparent); line-height: 1.55;
}
.mob-menu__meta strong {
  display: block; color: var(--color-white);
  font-size: var(--font-fontSize-xs); letter-spacing: .22em; text-transform: uppercase;
  font-weight: var(--font-weight-medium); margin-bottom: .35rem;
}
.mob-menu__socials { display: flex; gap: .65rem; margin-top: 1.25rem; }
.mob-menu__socials a {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--color-white) 18%, transparent); display: grid; place-items: center;
  color: var(--color-white); transition: background .2s, border-color .2s;
}
.mob-menu__socials a:hover { background: color-mix(in srgb, var(--color-white) 6%, transparent); border-color: var(--color-brand-secondary-500); }
.mob-menu__socials svg { width: 15px; height: 15px; }


/* =============================================================================
   HERO RAIL — horizontale Regionen-Achse
   ============================================================================= */
.hero__rail {
  position: absolute;
  top: calc(var(--nav-h) + 2.8rem);
  left: var(--gutter); right: var(--gutter);
  height: 2px; z-index: 5;
  display: flex; align-items: center;
  pointer-events: none;
}
.hero__rail-line {
  position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  overflow: hidden;
  background: color-mix(in srgb, var(--color-white) 35%, transparent);
  /* Beide Enden laufen aus. Als Maske statt als Verlauf im `background`,
     damit der Fortschrittsbalken mitgefadet wird — er liegt als Kind in
     dieser Linie. Feste rem-Strecke statt Prozent: der Ausklang bleibt bei
     jeder Rail-Breite gleich lang und endet vor dem ersten Punkt (6 %). */
  mask-image: linear-gradient(to right,
    transparent 0, #000 5rem, #000 calc(100% - 5rem), transparent 100%);
  -webkit-mask-image: linear-gradient(to right,
    transparent 0, #000 5rem, #000 calc(100% - 5rem), transparent 100%);
  transform: translateY(-50%);
}
/* Fortschritt im Takt des Regionswechsels — die Dauer setzt das JS aus
   REGION_INTERVALL, damit Balken und Wechsel nicht auseinanderlaufen. */
.hero__rail-progress {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: linear-gradient(to right,
    color-mix(in srgb, var(--color-brand-secondary-500) 55%, transparent) 0%,
    var(--color-brand-secondary-500) 100%);
  box-shadow: 0 0 .5rem color-mix(in srgb, var(--color-brand-secondary-500) 55%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .hero__rail-progress { display: none; }
}

.hero__rail-dot {
  position: absolute; top: 0; width: 9px; height: 9px; border-radius: 50%;
  background: color-mix(in srgb, var(--color-white) 75%, transparent); transform: translate(-50%, -50%);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-white) 7%, transparent);
  border: 0; padding: 0; cursor: pointer; pointer-events: auto;
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.hero__rail-dot::before { content: ""; position: absolute; inset: -14px; border-radius: 50%; }
/* Die Position kommt als inline-style aus front-page.php — gleichmässig
   verteilt nach der tatsächlichen Anzahl Regionen. Die früheren festen
   Prozentwerte galten für fünf Punkte. */
.hero__rail-dot:hover { background: var(--color-white); box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-white) 16%, transparent); }
.hero__rail-dot:focus-visible { outline: 2px solid var(--color-brand-secondary-500); outline-offset: 5px; }
.hero__rail-dot--active,
.hero__rail-dot--active:hover {
  background: var(--color-brand-secondary-500);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-brand-secondary-500) 20%, transparent), 0 0 20px color-mix(in srgb, var(--color-brand-secondary-500) 55%, transparent);
}
.hero__rail-lbl {
  position: absolute; top: calc(100% + .75rem); left: 50%; transform: translateX(-50%);
  font-size: var(--font-fontSize-xs); letter-spacing: .24em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-white) 40%, transparent); white-space: nowrap;
  transition: color .3s; pointer-events: none;
  font-family: var(--body);
}
.hero__rail-dot:hover .hero__rail-lbl { color: color-mix(in srgb, var(--color-white) 80%, transparent); }
.hero__rail-lbl--active,
.hero__rail-dot:hover .hero__rail-lbl--active { color: var(--color-white); }
@media (max-width: 640px) { .hero__rail { display: none; } }


/* =============================================================================
   HERO
   ============================================================================= */
.hero {
  position: relative;
  min-height: min(920px, 96vh);
  color: var(--color-white); overflow: hidden;
  background: var(--color-brand-primary-600); isolation: isolate;
  display: flex; flex-direction: column;
}
.hero__bg {
  position: absolute; inset: 0; z-index: 0;
  opacity: 0; transition: opacity 1.4s var(--ease);
  background-size: cover; background-position: center;
}
.hero__bg.is-active { opacity: 1; }
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--color-brand-primary-700) 45%, transparent) 0%, color-mix(in srgb, var(--color-brand-primary-700) 10%, transparent) 35%, color-mix(in srgb, var(--color-brand-primary-700) 75%, transparent) 100%),
    linear-gradient(115deg, color-mix(in srgb, var(--color-brand-primary-700) 82%, transparent) 0%, color-mix(in srgb, var(--color-brand-primary-600) 32%, transparent) 50%, color-mix(in srgb, var(--color-brand-primary-700) 0%, transparent) 100%);
}
.hero__sky {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(110% 75% at 18% 0%, color-mix(in srgb, var(--color-brand-primary-500) 75%, transparent) 0%, color-mix(in srgb, var(--color-brand-primary-600) 0%, transparent) 60%),
    linear-gradient(180deg, var(--color-brand-primary-500) 0%, var(--color-brand-primary-600) 100%);
}

/* Stage: Content links, Cards rechts — vertikale Mitte */
.hero__stage {
  position: relative; z-index: 2; flex: 1;
  display: grid;
  /* Die Kartenspalte steht auf `auto` und bekommt damit ihre Inhaltsbreite —
     drei Kacheln bleiben so nebeneinander sichtbar, der Text nimmt den Rest.
     Das Mindestmass von 22rem auf der Textspalte ist der Grund für die
     Konstruktion: mit dem früheren `minmax(0, 32rem) 1fr` schob die
     Kartenspalte den Text ab vier Kacheln auf null Breite (Titel und Teaser
     brachen auf ein Zeichen pro Zeile um, gemessen bei 1440px), und mit
     `minmax(0, 32rem) minmax(0, 1fr)` behielt der Text zwar seine 32rem,
     liess aber nur noch zwei Kacheln übrig. */
  grid-template-columns: minmax(22rem, 1fr) auto;
  gap: clamp(2rem, 4vw, 5rem);
  align-items: center;
  padding: calc(var(--nav-h) + 6rem) var(--gutter) 5.5rem;
  /* Gleiche Achse wie die Filterbox: deren Kasten ist
     calc(var(--max) - 4rem) breit und zentriert. Mit box-sizing: border-box
     steckt das Padding in der max-width, also 2 × Gutter aufaddieren —
     dann liegt die Headline exakt auf der linken Filterkante. */
  width: 100%;
  max-width: calc(var(--max) - 4rem + 2 * var(--gutter));
  margin-inline: auto;
}

/* Content-Block */
.hero__content {
  position: relative;
  transition: opacity .28s ease, transform .28s ease;
}
.hero__content.is-fading { opacity: 0; transform: translateY(8px); }
.hero__meta      { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.25rem; font-size: var(--font-fontSize-xs); letter-spacing: .24em; text-transform: uppercase; color: color-mix(in srgb, var(--color-white) 70%, transparent); }
.hero__meta-dot  { width: 6px; height: 6px; border-radius: 50%; background: var(--color-brand-secondary-500); flex-shrink: 0; }
.hero__title     { margin: 0 0 1.25rem; color: var(--color-white); font-family: var(--display); font-weight: var(--font-weight-regular); font-size: clamp(var(--font-fontSize-5xl), 7.2vw, var(--font-fontSize-8xl)); line-height: 1.0; letter-spacing: -.018em; font-variation-settings: "opsz" 144; }
.hero__text      { font-size: var(--font-fontSize-base); line-height: 1.68; color: color-mix(in srgb, var(--color-white) 85%, transparent); max-width: 44ch; margin-bottom: 2.25rem; }
.hero__ctas      { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.hero__cta {
  display: inline-flex; align-items: center; gap: .85rem;
  background: color-mix(in srgb, var(--color-white) 12%, transparent); color: var(--color-white);
  padding: .85rem 1.5rem; border-radius: var(--border-radius-round);
  font-size: var(--font-fontSize-xs); font-weight: var(--font-weight-semibold); letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid color-mix(in srgb, var(--color-white) 28%, transparent);
  backdrop-filter: blur(8px);
  transition: transform .25s var(--ease), background .25s, border-color .25s;
}
.hero__cta:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--color-white) 22%, transparent); border-color: color-mix(in srgb, var(--color-white) 45%, transparent); }
.hero__cta svg   { width: 13px; height: 13px; transition: transform .25s var(--ease); }
.hero__cta:hover svg { transform: translateX(4px); }
/* Cards-Sektion: overflow hidden, Cards-Track fährt per transform */
.hero__cards-outer {
  position: relative;
  /* `overflow: clip` statt `hidden`: nur so lässt sich eine Achse beschneiden,
     ohne die andere zu einem Scrollbereich zu machen (bei hidden/auto wird
     `visible` auf der Gegenachse zu `auto`). Sonst kappt der Kasten die
     angehobene und vergrösserte aktive Karte oben. */
  overflow-x: clip;
  overflow-y: visible;
  /* Beschnitten wird die PADDING-Box: der Innenabstand ist damit Malfläche für
     Schatten und Ecken der äusseren Karten. Der negative Margin hebt ihn im
     Layout wieder auf, damit die Karte an derselben Stelle beginnt — die
     Kartenkante bleibt so auf der Achse der Filterbox.
     `overflow-clip-margin` allein reicht nicht — Safari ignoriert es.
     Der Wert steht als Variable, weil die Controls dieselbe Kante brauchen.

     Der Wert ist gemessen, nicht geschätzt: der Schatten der aktiven Karte
     reicht am Hover rund 90px über ihre Kante hinaus. `blur/2 + spread` ergibt
     nur 17px und unterschätzt das grob — Chromium legt eine Gauss-Kurve mit
     langem Ausläufer. Bei 2.25rem brach der Verlauf an der Clip-Kante mit
     11/255 hart ab (im Browser als Bildvergleich geclippt/ungeclippt gemessen);
     6rem drückt die Stufe unter die Sichtbarkeitsschwelle.
     Voraussetzung ist `.hero__card.is-off`: eine Karte legt pro Schritt nur
     einen Slot zurück und kommt damit `gap` (20px) vor der Inhaltskante zur
     Ruhe — bei so viel Malfläche bliebe sie sonst als Streifen stehen. */
  --hero-clip-pad: 6rem;
  padding: var(--hero-clip-pad) var(--hero-clip-pad) 6.25rem;
  margin: calc(-1 * var(--hero-clip-pad)) calc(-1 * var(--hero-clip-pad)) 0;
  overflow-clip-margin: var(--hero-clip-pad);
}

.hero__cards {
  display: flex;
  /* zentriert, damit die vergrösserte aktive Karte oben und unten gleich viel
     Platz nimmt und die Reihe optisch auf einer Mittelachse bleibt */
  align-items: center;
  gap: clamp(.75rem, 1.5vw, 1.25rem);
  padding: 0;
  transition: transform .6s var(--ease-out, ease);
  will-change: transform;
}

.hero__cards.is-fading { opacity: 0; }
/* Die frühere Foto-Kachel (feste Höhe, Verlauf über die ganze Karte,
   overflow: hidden) ist entfallen: sie schnitt den Body der .trip-Karte ab und
   legte einen Petrol-Verlauf darüber. Beide Kartentypen bringen ihr Aussehen
   jetzt selbst mit — .trip aus reisefinder.css, .dest-card aus dieser Datei.
   Die Klassen .hero__card-coord/-name/-badge werden nicht mehr gerendert. */

/* Controls unter den Cards — Glasmorphism-Buttons wie Figma.
   `right` nimmt die Malfläche mit, sonst stünden die Buttons um genau diesen
   Innenabstand rechts über der Kartenkante (und damit über der Filterbox). */
.hero__ctrl {
  position: absolute; bottom: .75rem; right: var(--hero-clip-pad, 1.5rem);
  display: flex; gap: .55rem; align-items: center; z-index: 5;
}
.hero__arrow {
  width: 2.875rem; height: 2.875rem; border-radius: 50%;
  background: color-mix(in srgb, var(--color-white) 12%, transparent); border: 1px solid color-mix(in srgb, var(--color-white) 25%, transparent);
  color: var(--color-white); display: grid; place-items: center;
  transition: background .22s, transform .22s; backdrop-filter: blur(8px);
}
.hero__arrow:hover { background: color-mix(in srgb, var(--color-white) 22%, transparent); transform: translateY(-2px); }
.hero__prog  {
  font-size: var(--font-fontSize-xs); letter-spacing: .22em; color: color-mix(in srgb, var(--color-white) 68%, transparent);
  margin: 0 .45rem; font-variant-numeric: tabular-nums; white-space: nowrap;
}

.hero__scroll-cue {
  position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
  z-index: 3;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .9rem;
  border-radius: var(--border-radius-round);
  /* Der Hinweis stand als heller Text direkt auf dem Foto und war je nach
     Bild unlesbar — jetzt auf einem abgedunkelten Träger. */
  background: color-mix(in srgb, var(--color-brand-primary-900, #052B2D) 55%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid color-mix(in srgb, var(--color-white) 18%, transparent);
  font-size: var(--font-fontSize-xs); letter-spacing: .24em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-white) 92%, transparent);
}
.hero__scroll-cue::after {
  content: ""; width: 1px; height: 1rem;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-white) 75%, transparent), transparent);
  animation: scrollPulse 2.4s ease infinite;
}
@keyframes scrollPulse {
  0%, 100% { opacity: .3; transform: scaleY(.6); }
  50%       { opacity: 1; transform: scaleY(1); }
}

/* Responsive */
@media (max-width: 1100px) {
  /* Der Text behält ein Mindestmass, die Karten nehmen den Rest bis zu ihrer
     Inhaltsbreite. Mit dem früheren `minmax(0, 440px) 1fr` setzte Chromium die
     Textspalte auf 0: die `1fr`-Spalte erbt als Mindestmass die Breite aller
     Karten (der Kasten clippt nur, ist also kein Scrollbereich) — gemessen bei
     900px eine 0px breite Textspalte, 5040px hoch. */
  .hero__stage { grid-template-columns: minmax(18rem, 1fr) minmax(0, auto); gap: 2.5rem; }
}
@media (max-width: 820px) {
  .hero__stage {
    grid-template-columns: 1fr;
    /* Unten: die Filterbox ragt um --finder-overlap in den Hero. Ohne den
       Zuschlag blieben zwischen Pfeilen und Box 4px (gemessen bei 390px). */
    padding: calc(var(--nav-h) + 5rem) var(--gutter) calc(var(--finder-overlap) + 2rem);
    align-items: start;
  }
  /* Einspaltig steht der linksbündige Satz allein neben viel leerem Raum —
     Headline, Fliesstext und Button daher zentriert. */
  .hero__content { text-align: center; }
  .hero__text    { margin-inline: auto; }
  .hero__ctas    { justify-content: center; }

  /* Gescrollt wird der Track selbst, nicht der äussere Kasten. Die Controls
     liegen als Geschwister IM äusseren Kasten: war der der Scrollbereich,
     wanderten sie beim Wischen mit nach links aus dem Bild. */
  .hero__cards-outer {
    overflow: visible; padding: 0;
    /* Volle Fensterbreite bleibt am äusseren Kasten — er scrollt nicht, die
       Controls bleiben also stehen. `min-width: 0` ist Pflicht: als Grid-Item
       gilt `min-width: auto`, und ohne den Scrollbereich (der die
       Mindestbreite vorher auf 0 setzte) sprengte der Track die Spalte auf
       seine Max-Content-Breite — gemessen 804px in einer 335px-Spalte. */
    min-width: 0;
    width: calc(100% + 2 * var(--gutter));
    /* `margin-top: 0` explizit: der Desktop-Wert −var(--hero-clip-pad) hebt
       dort nur die Malfläche auf. Hier gibt es keine, und der Rand zog die
       Karten 6rem über den Button «Jetzt entdecken» — gemessen bei 390px lag
       die erste Karte 58px über der Button-Unterkante. */
    margin: 0 calc(-1 * var(--gutter));
  }
  .hero__cards {
    transform: none !important;
    /* `overflow-y: hidden` explizit: bei `visible` auf der Gegenachse macht die
       Spezifikation daraus `auto` und es entsteht ein vertikaler Scrollbereich. */
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Der Innenabstand setzt die erste Karte auf die Inhaltskante und lässt
       die letzte bis an den Rand laufen. `scroll-padding` muss mit: die
       Snap-Position richtet sich sonst am Scrollport aus und ignoriert das
       Padding — die erste Karte klebte gemessen an der Fensterkante. */
    padding: .5rem var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
  .hero__cards::-webkit-scrollbar { display: none; }
  /* Keine feste Höhe: die Reise-Karte wächst mit ihrem Body, die
     Destinations-Karte hält ihr Seitenverhältnis. */
  .hero__card       { flex: 0 0 70vw; max-width: 16.25rem; height: auto; scroll-snap-align: start; }
  /* Seitenverhältnis kommt aus .hero-tile — hier nur die Breite */
  .hero__card.is-featured { transform: none; }
  .hero__ctrl  { position: static; margin: 1.25rem 0 0; justify-content: center; }
  .hero__scroll-cue { display: none; }
}


/* =============================================================================
   FINDER
   ============================================================================= */
/* Die Filterbox ragt in den Hero hinein. Der Streifen links und rechts der Box
   trug bisher die Body-Farbe (paper) und hob sich damit sichtbar von der
   folgenden Section (warm-white) ab. Deshalb malt die Zeile ihren Grund selbst:
   oberhalb der Hero-Kante transparent (sonst läge ein heller Kasten über dem
   Hero-Bild), darunter in der Farbe der folgenden Section — nahtlos.
   `--finder-overlap` steuert Überlappung und Farbkante gemeinsam. Sie steht
   auf :root, weil der Hero sie für seinen unteren Abstand mitrechnet. */
:root { --finder-overlap: 4.25rem; }
.finder-section {
  position: relative;
  margin-top: calc(-1 * var(--finder-overlap));
  z-index: 20;
  padding: 0 var(--gutter);
  background: linear-gradient(to bottom,
    transparent 0, transparent var(--finder-overlap),
    var(--theme-bg-subtle) var(--finder-overlap));
}
.finder {
  max-width: calc(var(--max) - 4rem); margin: 0 auto;
  background: var(--paper); border-radius: var(--r); padding: 1.4rem;
  /* neutraler Schatten — der frühere petrolfarbene färbte den Grund ein */
  box-shadow:
    0 1.75rem 4rem -1.75rem color-mix(in srgb, var(--color-black) 20%, transparent),
    0 .625rem 1.75rem -.875rem color-mix(in srgb, var(--color-black) 9%, transparent);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: .5rem; align-items: end;
  border: 1px solid var(--hair);
}
.finder__field {
  position: relative;
  padding: .5rem .5rem;
  display: flex; flex-direction: column; justify-content: center; min-height: 3.875rem;
}
.finder__lbl { font-size: var(--font-fontSize-xs); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: .35rem; font-weight: var(--font-weight-medium); }

/* Die Selects erben jetzt das .select-Atom des Design Systems (Rahmen,
   Fokusring, Pfeil) — vorher waren sie randlos und dadurch nicht als
   Bedienelement erkennbar. Hier nur die Anpassungen für die Filterleiste. */
.finder__sel {
  font-size: var(--font-fontSize-sm);
  font-weight: var(--font-weight-medium);
  padding: .5rem 2rem .5rem .75rem;
}
.finder__btn {
  background: var(--color-brand-primary-500); color: var(--color-white);
  padding: 0 1.75rem; border-radius: 0.625rem;
  font-size: var(--font-fontSize-xs); font-weight: var(--font-weight-semibold); letter-spacing: .12em; text-transform: uppercase;
  display: flex; align-items: center; gap: .65rem;
  transition: background .22s, transform .22s; min-height: 62px; white-space: nowrap; cursor: pointer;
}
/* Keine Treffer: der Button darf nicht ins Leere führen */
.finder__btn:disabled { opacity: .45; cursor: not-allowed; }
.finder__btn:disabled:hover { transform: none; background: var(--color-brand-primary-500); }

.finder__btn:hover { background: var(--color-brand-primary-600); transform: translateY(-1px); }
.finder__btn svg  { width: 15px; height: 15px; }
.finder__foot     { margin-top: .9rem; text-align: center; font-size: var(--font-fontSize-xs); color: var(--ink-soft); }
.finder__foot strong { color: var(--color-brand-primary-500); font-size: var(--font-fontSize-sm); font-weight: var(--font-weight-semibold); margin: 0 .22rem; }
.finder__pulse    { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--color-brand-secondary-500); margin-right: .5rem; vertical-align: middle; animation: pulse 2s ease infinite; }
@media (max-width: 980px) {
  :root { --finder-overlap: 2.75rem; }
  .finder { grid-template-columns: 1fr 1fr; padding: 1rem; }
  .finder__field { border-right: 0; border-bottom: 1px solid var(--hair); padding: .65rem; }
  .finder__field:nth-child(odd) { border-right: 1px solid var(--hair); }
  .finder__field:nth-last-of-type(1), .finder__field:nth-last-of-type(2) { border-bottom: 0; }
  .finder__btn { grid-column: 1 / -1; justify-content: center; padding: .95rem; margin-top: .4rem; }
}
@media (max-width: 560px) {
  :root { --finder-overlap: 1.75rem; }
  .finder { grid-template-columns: 1fr; }
  .finder__field { border-right: 0 !important; border-bottom: 1px solid var(--hair) !important; }
  .finder__field:last-of-type { border-bottom: 0 !important; }
}


/* =============================================================================
   GREETINGS MARQUEE
   ============================================================================= */
/* Die Section trägt Grund und Rahmen, nicht das Band: nur so liegt ein
   optionaler Kopf (Eyebrow + Text) auf derselben Fläche. */
.marquee {
  position: relative;
  background: var(--color-brand-tertiary-200);
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.marquee[data-theme] { background: var(--theme-bg-page); }

/* Als erster Block der Seite: Platz für die fixierte Nav (das PHP setzt die
   Klasse nur dann). Ohne das läge das schmale Band vollständig darunter. */
.marquee--erster { margin-top: calc(var(--nav-h) + 1.5rem); }

.marquee__head {
  display: flex; flex-direction: column; align-items: center; gap: .9rem;
  text-align: center;
  padding: clamp(3rem, 5vw, 4.5rem) 0 clamp(1.5rem, 2.5vw, 2.25rem);
}
/* Farbe direkt an der Klasse: reset.css setzt für Überschriften eine eigene
   und schlägt damit jeden geerbten Wert. */
.marquee__title {
  max-width: 40ch;
  margin: 0;
  font-family: var(--display);
  font-weight: var(--font-weight-regular);
  font-size: clamp(var(--font-fontSize-xl), 2.6vw, var(--font-fontSize-3xl));
  line-height: 1.25;
  color: var(--theme-text-heading);
  font-variation-settings: "opsz" 72;
}

.greetings {
  padding: 1.4rem 0; overflow: hidden; position: relative;
}
/* Mit Kopf darüber braucht das Band unten mehr Luft, sonst sitzt die Reihe auf
   der Sectionkante. Als Klasse aus dem PHP statt `:has()` — eindeutig. */
.marquee--mit-kopf .greetings { padding-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.greetings::before, .greetings::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 5rem; z-index: 2; pointer-events: none;
}
.greetings::before { left: 0; background: linear-gradient(to right, var(--color-brand-tertiary-200), transparent); }
.greetings::after  { right: 0; background: linear-gradient(to left, var(--color-brand-tertiary-200), transparent); }
.marquee[data-theme] .greetings::before { background: linear-gradient(to right, var(--theme-bg-page), transparent); }
.marquee[data-theme] .greetings::after  { background: linear-gradient(to left, var(--theme-bg-page), transparent); }
/* Der Abstand zwischen den Begriffen steht am Item, NICHT als `gap` am Track:
   die Animation schiebt um -50 % der Trackbreite, und bei n Begriffen hat der
   Track nur 2n−1 Lücken. Eine halbe Lücke fehlte damit pro Runde — gemessen
   18 px Sprung. Als margin trägt jeder Begriff seine Lücke selbst, beide
   Hälften sind exakt gleich breit und die Schlaufe läuft nahtlos. */
.greetings__track  { display: flex; white-space: nowrap; animation: marquee 48s linear infinite; width: max-content; }
/* Getrennt wird allein über den Abstand — der frühere Trennpunkt (::after) ist
   entfernt. Der Wert deckt beide früheren Lücken ab (Punkt lag mittig drin). */
.greetings__item   { display: inline-flex; align-items: center; margin-inline-end: clamp(2.75rem, 4vw, 4.5rem); font-family: var(--display); font-style: italic; font-size: clamp(var(--font-fontSize-2xl), 2.4vw, var(--font-fontSize-3xl)); color: var(--color-brand-primary-600); font-weight: 300; font-variation-settings: "opsz" 96; }

/* Bild-Element (z.B. Partner-Logo): feste Höhe, Beschriftung darunter.
   Die Höhe folgt der Zeilenhöhe der Begriffe, damit gemischte Bänder ruhig
   laufen. */
.greetings__bild { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.greetings__item--bild img {
  display: block;
  height: clamp(2.25rem, 3.2vw, 3rem);
  width: auto; max-width: 11rem;
  object-fit: contain;
}
.greetings__bild-lbl {
  font-family: var(--body); font-style: normal;
  font-size: var(--font-fontSize-xs); font-weight: var(--font-weight-medium);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
.greetings[data-theme] .greetings__bild-lbl,
.marquee[data-theme] .greetings__bild-lbl { color: color-mix(in srgb, var(--theme-text-body) 75%, transparent); }

/* ── Marquee als Page-Builder-Block «14» ───────────────────────────────────
   Tempo und Farbthema kommen aus ACF; die Randverläufe müssen dem
   Hintergrund folgen, sonst stehen sie als Streifen im Bild. */
.greetings--langsam .greetings__track { animation-duration: 78s; }
.greetings--normal  .greetings__track { animation-duration: 48s; }
.greetings--schnell .greetings__track { animation-duration: 28s; }

.marquee[data-theme] .greetings__item { color: var(--theme-text-heading); }

@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .greetings__track { animation: none; } }


/* =============================================================================
   SECTION UTILITIES — section__title / section__head / section__more
   Gemeinsame Styles für alle Flexible-Content-Blöcke.
   Kontext-Overrides für Blöcke auf dunklem Hintergrund (section--bg-brand).
   ============================================================================= */

/* Einheitlicher Abschnitt-Titel — Fraunces, weight 400 (wie im Entwurf) */
.section__title {
  font-family: var(--display);
  font-weight: var(--font-weight-regular);
  font-size: clamp(var(--font-fontSize-3xl), 4.2vw, var(--font-fontSize-6xl));
  line-height: 1.05;
  letter-spacing: -.01em;
  margin: .8rem 0 0;
  color: var(--color-brand-primary-600);
  font-variation-settings: "opsz" 96;
}

/* Header-Zeile: Titel links, "Alle X"-Link rechts (wie dest-head / values__head) */
.section__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: end;
  margin-bottom: 3.25rem;
}

/* "Alle X →"-Link — petrol mit Saffron-Underline */
.section__more {
  display: inline-flex;
  align-items: center;
  align-self: flex-end;
  font-size: var(--font-fontSize-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-brand-primary-500);
  border-bottom: 1.5px solid var(--color-brand-secondary-500);
  padding-bottom: .38rem;
  white-space: nowrap;
  transition: color .22s, border-color .22s;
}
.section__more:hover { color: var(--color-brand-primary-600); }

/* Dunkle Abschnitte (z.B. Journal: section--bg-brand) */
.section--bg-brand .section__title { color: var(--color-white); }
.section--bg-brand .section__more  { color: var(--color-white); border-bottom-color: var(--color-brand-secondary-500); }
.section--bg-brand .section__more:hover { color: color-mix(in srgb, var(--color-white) 75%, transparent); }

@media (max-width: 768px) {
  .section__head { grid-template-columns: 1fr; gap: 1.2rem; margin-bottom: 2rem; }
}


/* =============================================================================
   ABOUT
   ============================================================================= */
.about { background: var(--warm-white); position: relative; overflow: hidden; }
.about__sticker { font-family: var(--display); font-style: italic; font-size: clamp(var(--font-fontSize-8xl), 13vw, var(--font-fontSize-10xl)); color: var(--color-brand-tertiary-300); position: absolute; right: -.5rem; top: 1rem; font-weight: 300; line-height: 1; letter-spacing: -.03em; pointer-events: none; z-index: 0; font-variation-settings: "opsz" 144; user-select: none; }
.about__grid  { display: grid; grid-template-columns: 1.1fr 1fr; gap: 5rem; align-items: start; position: relative; z-index: 1; }
.about__media-main { width: 100%; aspect-ratio: 4/5; border-radius: var(--r); background: var(--color-brand-primary-500); background-size: cover; background-position: center; position: relative; overflow: hidden; }
.about__caption { position: absolute; top: 1.4rem; left: 1.4rem; display: flex; gap: .65rem; align-items: center; color: var(--color-white); font-size: var(--font-fontSize-xs); letter-spacing: .22em; text-transform: uppercase; z-index: 2; }
.about__caption::before { content: ""; width: 28px; height: 1px; background: var(--color-white); }
.about__media-mini { position: absolute; bottom: -2.25rem; right: -2.25rem; width: 48%; aspect-ratio: 1; border-radius: var(--r); background-size: cover; background-position: center; border: 7px solid var(--warm-white); box-shadow: 0 18px 38px -18px color-mix(in srgb, var(--color-black) 28%, transparent); }
.about__copy  { position: relative; z-index: 1; padding-top: 1.25rem; }
.about__title { font-family: var(--display); font-weight: var(--font-weight-regular); font-size: clamp(var(--font-fontSize-3xl), 4.3vw, var(--font-fontSize-6xl)); line-height: 1.05; letter-spacing: -.01em; font-variation-settings: "opsz" 96; margin: .85rem 0 1.4rem; color: var(--color-brand-primary-600); }
.about__text  { font-size: var(--font-fontSize-base); line-height: 1.7; color: var(--ink-soft); margin: 0 0 .9rem; max-width: 48ch; }
.about__quote { margin: 1.75rem 0 .9rem; padding-left: 1.4rem; border-left: 2px solid var(--color-brand-secondary-500); font-family: var(--display); font-style: italic; font-size: var(--font-fontSize-xl); line-height: 1.4; color: var(--color-brand-primary-500); max-width: 36ch; font-variation-settings: "opsz" 48; }
.about__sig-name { font-family: var(--display); font-size: var(--font-fontSize-lg); font-style: italic; color: var(--color-brand-primary-600); margin-top: 1.75rem; }
.about__sig-role { font-size: var(--font-fontSize-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-top: .18rem; }
.about__link { display: inline-flex; align-items: center; gap: .45rem; margin-top: 2.25rem; font-size: var(--font-fontSize-xs); font-weight: var(--font-weight-semibold); letter-spacing: .14em; text-transform: uppercase; color: var(--color-brand-primary-500); border-bottom: 1.5px solid var(--color-brand-secondary-500); padding-bottom: .35rem; transition: color .22s, border-color .22s; }
.about__link:hover { color: var(--color-brand-secondary-600); border-color: var(--color-brand-primary-500); }

.stats         { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--hair); margin-top: 5.5rem; }
.stat          { padding: 2.25rem 1.4rem 0; border-right: 1px solid var(--hair); }
.stat:last-child { border-right: 0; }
.stat__num     { font-family: var(--display); font-size: clamp(var(--font-fontSize-4xl), 3.8vw, var(--font-fontSize-5xl)); font-weight: var(--font-weight-regular); line-height: 1; color: var(--color-brand-primary-600); font-variant-numeric: tabular-nums; letter-spacing: -.02em; font-variation-settings: "opsz" 96; }
.stat__num sup { font-size: .44em; color: var(--color-brand-secondary-500); margin-left: .12rem; top: -.9em; font-family: var(--body); font-weight: var(--font-weight-medium); }
.stat__label   { margin-top: .7rem; font-size: var(--font-fontSize-xs); color: var(--ink-soft); line-height: 1.4; max-width: 18ch; }
@media (max-width: 880px) {
  .about__grid { grid-template-columns: 1fr; gap: 4rem; }
  .about__media-mini { right: 0; width: 50%; bottom: -2rem; }
  .stats { grid-template-columns: repeat(2, 1fr); margin-top: 4rem; }
  .stat  { padding: 1.85rem 1rem 0; border-bottom: 1px solid var(--hair); }
  .stat:nth-child(even) { border-right: 0; }
}


/* =============================================================================
   TOP DESTINATIONEN
   ============================================================================= */
.destinations { background: var(--color-brand-tertiary-200); }
.dest-head  { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: end; margin-bottom: 3.25rem; }
.dest-title { font-family: var(--display); font-weight: var(--font-weight-regular); font-size: clamp(var(--font-fontSize-3xl), 4.2vw, var(--font-fontSize-6xl)); line-height: 1.05; letter-spacing: -.01em; margin: .8rem 0 0; color: var(--color-brand-primary-600); font-variation-settings: "opsz" 96; max-width: 14ch; }
.dest-intro { color: var(--ink-soft); font-size: var(--font-fontSize-base); line-height: 1.6; max-width: 42ch; }
.dest-intro a { color: var(--color-brand-primary-500); border-bottom: 1px solid var(--color-brand-secondary-500); font-weight: var(--font-weight-medium); }
.dest-grid  { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.dest-card  { position: relative; aspect-ratio: 3/4; border-radius: var(--r); overflow: hidden; background: var(--color-brand-primary-600); background-size: cover; background-position: center; cursor: pointer; isolation: isolate; transition: transform .38s var(--ease); }
.dest-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--color-brand-primary-700) 0%, transparent) 38%, color-mix(in srgb, var(--color-brand-primary-700) 88%, transparent) 100%); transition: background .38s; }
.dest-card:hover  { transform: translateY(-6px); }
.dest-card:hover::after { background: linear-gradient(180deg, color-mix(in srgb, var(--color-brand-primary-700) 8%, transparent) 18%, color-mix(in srgb, var(--color-brand-primary-700) 94%, transparent) 100%); }
.dest-card__inner  { position: absolute; inset: 0; z-index: 1; padding: 1.2rem; color: var(--color-white); display: flex; flex-direction: column; justify-content: flex-end; }
.dest-card__region { position: absolute; top: 1rem; left: 1rem; font-size: var(--font-fontSize-xs); letter-spacing: .22em; text-transform: uppercase; color: color-mix(in srgb, var(--color-white) 88%, transparent); padding: .28rem .52rem; background: color-mix(in srgb, var(--color-black) 22%, transparent); border-radius: var(--border-radius-tiny); backdrop-filter: blur(8px); }
/* Farbe MUSS hier direkt stehen: css/base/reset.css setzt `h1…h6 { color:
   var(--theme-text-heading) }` — eine direkte Deklaration am Element schlägt
   den geerbten Wert von .dest-card__inner, unabhängig von der Spezifität.
   Der Titel stand deshalb petrol auf dunklem Bild und war unlesbar. */
.dest-card__name   { font-family: var(--display); font-size: var(--font-fontSize-xl); margin: 0 0 .2rem; font-variation-settings: "opsz" 48; color: var(--color-white); font-weight: var(--font-weight-regular); }
.dest-card__count  { font-size: var(--font-fontSize-xs); letter-spacing: .18em; text-transform: uppercase; color: color-mix(in srgb, var(--color-white) 78%, transparent); display: inline-flex; align-items: center; gap: .45rem; }
.dest-card__count::after { content: "→"; transition: transform .22s; }
.dest-card:hover .dest-card__count::after { transform: translateX(4px); }
.dest-all   { margin-top: 2.75rem; text-align: center; }
.dest-all a { display: inline-flex; align-items: center; gap: .55rem; padding: .95rem 1.95rem; border: 1px solid var(--color-brand-primary-500); border-radius: var(--border-radius-round); font-size: var(--font-fontSize-xs); font-weight: var(--font-weight-semibold); letter-spacing: .15em; text-transform: uppercase; color: var(--color-brand-primary-500); transition: background .22s, color .22s; }
.dest-all a:hover { background: var(--color-brand-primary-500); color: var(--color-white); }
@media (max-width: 980px) { .dest-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) {
  .dest-head { grid-template-columns: 1fr; gap: 1.2rem; margin-bottom: 2rem; }
  .dest-grid { grid-template-columns: repeat(2, 1fr); gap: .85rem; }
}


/* =============================================================================
   REISEARTEN
   ============================================================================= */
.styles { background: var(--warm-white); }
.styles__head  { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 2.75rem; gap: 2rem; flex-wrap: wrap; }
.styles__title { font-family: var(--display); font-weight: var(--font-weight-regular); font-size: clamp(var(--font-fontSize-3xl), 4.2vw, var(--font-fontSize-6xl)); line-height: 1.05; letter-spacing: -.01em; margin: .8rem 0 0; color: var(--color-brand-primary-600); font-variation-settings: "opsz" 96; max-width: 18ch; }
.styles__tabs  { display: flex; gap: .45rem; flex-wrap: wrap; }
.styles__tab   { padding: .55rem 1rem; border: 1px solid var(--hair); border-radius: var(--border-radius-round); font-size: var(--font-fontSize-xs); letter-spacing: .1em; text-transform: uppercase; font-weight: var(--font-weight-medium); color: var(--ink-soft); transition: background .22s, color .22s, border-color .22s; }
.styles__tab:hover { background: var(--color-brand-tertiary-200); border-color: var(--color-brand-primary-500); }
.styles__tab.is-active { background: var(--color-brand-primary-600); color: var(--color-white); border-color: var(--color-brand-primary-600); }
.styles__grid  { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(290px, auto); gap: 1.2rem; }

.sc { position: relative; border-radius: var(--r); overflow: hidden; background: var(--color-brand-primary-600); background-size: cover; background-position: center; color: var(--color-white); display: flex; flex-direction: column; justify-content: flex-end; padding: 1.4rem; cursor: pointer; transition: transform .38s var(--ease), box-shadow .38s; isolation: isolate; }
.sc::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--color-brand-primary-700) 0%, transparent) 32%, color-mix(in srgb, var(--color-brand-primary-700) 88%, transparent) 100%); z-index: 0; transition: background .38s; }
.sc:hover  { transform: translateY(-4px); box-shadow: 0 22px 48px -22px color-mix(in srgb, var(--color-brand-primary-600) 48%, transparent); }
.sc:hover::after { background: linear-gradient(180deg, color-mix(in srgb, var(--color-brand-primary-700) 8%, transparent) 18%, color-mix(in srgb, var(--color-brand-primary-700) 94%, transparent) 100%); }
.sc > *    { position: relative; z-index: 1; }
.sc__tag   { position: absolute; top: 1.4rem; left: 1.4rem; z-index: 2; font-size: var(--font-fontSize-xs); letter-spacing: .22em; text-transform: uppercase; padding: .32rem .65rem; background: color-mix(in srgb, var(--color-white) 14%, transparent); backdrop-filter: blur(8px); border-radius: var(--border-radius-tiny); border: 1px solid color-mix(in srgb, var(--color-white) 24%, transparent); }
.sc .sc__tag { position: absolute; }
.sc__link  { display: flex; flex-direction: column; justify-content: flex-end; flex: 1; color: inherit; text-decoration: none; }
.sc__title { font-family: var(--display); font-size: clamp(var(--font-fontSize-xl), 1.9vw, var(--font-fontSize-2xl)); margin: 0 0 .22rem; font-variation-settings: "opsz" 48; line-height: 1.15; }
.sc__meta  { font-size: var(--font-fontSize-xs); letter-spacing: .06em; color: color-mix(in srgb, var(--color-white) 85%, transparent); display: flex; gap: .75rem; align-items: center; }
.sc__meta::before { content: ""; width: 16px; height: 1px; background: var(--color-brand-secondary-500); }
.sc--lg    { grid-column: span 6; min-height: 420px; }
.sc--md    { grid-column: span 6; min-height: 340px; }
.sc--sm    { grid-column: span 4; min-height: 320px; }
.sc--xl    { grid-column: span 8; grid-row: span 2; }
.sc--wide  { grid-column: span 8; }
.sc--full  { grid-column: span 12; }
@media (max-width: 980px) {
  .styles__grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .sc, .sc--lg, .sc--md, .sc--sm, .sc--xl, .sc--wide, .sc--full { grid-column: span 1; min-height: 275px; grid-row: span 1; }
}
@media (max-width: 560px) {
  .styles__grid { grid-template-columns: 1fr; }
  .styles__head { flex-direction: column; align-items: flex-start; }
}


/* =============================================================================
   SPECIALS
   ============================================================================= */
.specials { background: var(--color-brand-tertiary-200); }
.specials__head  { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 2.75rem; gap: 2rem; flex-wrap: wrap; }
.specials__title { font-family: var(--display); font-weight: var(--font-weight-regular); font-size: clamp(var(--font-fontSize-3xl), 4.2vw, var(--font-fontSize-6xl)); line-height: 1.05; letter-spacing: -.01em; margin: .8rem 0 0; color: var(--color-brand-primary-600); font-variation-settings: "opsz" 96; }
.specials__all   { font-size: var(--font-fontSize-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--color-brand-primary-500); border-bottom: 1.5px solid var(--color-brand-secondary-500); padding-bottom: .38rem; font-weight: var(--font-weight-semibold); }
.specials__grid  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }

.spc { background: var(--paper); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--hair-soft); transition: transform .38s var(--ease), box-shadow .38s; cursor: pointer; }
.spc:hover  { transform: translateY(-4px); box-shadow: 0 18px 38px -22px color-mix(in srgb, var(--color-brand-primary-600) 38%, transparent); }
.spc__media { aspect-ratio: 5/4; background: var(--color-brand-primary-500); background-size: cover; background-position: center; position: relative; }
.spc__tag   { position: absolute; top: .95rem; left: .95rem; font-size: var(--font-fontSize-xs); letter-spacing: .22em; text-transform: uppercase; background: var(--color-brand-secondary-500); color: var(--ink); padding: .35rem .7rem; border-radius: var(--border-radius-tiny); font-weight: var(--font-weight-semibold); }
.spc__body  { padding: 1.65rem 1.4rem 1.85rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.spc__region { font-size: var(--font-fontSize-xs); letter-spacing: .22em; text-transform: uppercase; color: var(--color-brand-primary-500); font-weight: var(--font-weight-medium); }
.spc__title { font-family: var(--display); font-size: var(--font-fontSize-xl); color: var(--color-brand-primary-600); margin: 0; line-height: 1.2; font-variation-settings: "opsz" 48; }
.spc__excerpt { font-size: var(--font-fontSize-sm); line-height: 1.5; color: var(--ink-soft); margin: .2rem 0 0; }
.spc__foot  { margin-top: auto; padding-top: .95rem; display: flex; justify-content: space-between; align-items: center; font-size: var(--font-fontSize-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.spc__foot span:last-child { color: var(--color-brand-primary-500); font-weight: var(--font-weight-semibold); }
@media (max-width: 980px) { .specials__grid { grid-template-columns: 1fr 1fr; } .specials__grid > .spc:last-child { grid-column: span 2; } }
@media (max-width: 620px) { .specials__grid { grid-template-columns: 1fr; } .specials__grid > .spc:last-child { grid-column: span 1; } .specials__head { flex-direction: column; align-items: flex-start; } }


/* =============================================================================
   VALUES
   ============================================================================= */
.values { background: var(--theme-bg-page); }
.values__head  { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: end; margin-bottom: 3.75rem; }
.values__title { font-family: var(--display); font-weight: var(--font-weight-regular); font-size: clamp(var(--font-fontSize-3xl), 4.2vw, var(--font-fontSize-6xl)); line-height: 1.05; letter-spacing: -.01em; margin: .8rem 0 0; color: var(--theme-text-heading); font-variation-settings: "opsz" 96; max-width: 14ch; }
.values__intro { color: var(--theme-text-body); font-size: var(--font-fontSize-base); line-height: 1.6; max-width: 42ch; }
.values__grid  { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--theme-border-default); }
.values__grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.values__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.values__grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

.val        { padding: 2.85rem 1.65rem 2rem; border-right: 1px solid var(--theme-border-default); }
.values .val { transition: background .4s var(--ease, cubic-bezier(.4,0,.2,1)), opacity .88s var(--ease), transform .88s var(--ease); }
.val:last-child { border-right: 0; }
.val:hover  { background: var(--theme-bg-surface); }
.val__num   { font-size: var(--font-fontSize-xs); letter-spacing: .22em; color: var(--color-brand-secondary-600); font-weight: var(--font-weight-medium); margin-bottom: 1.4rem; display: flex; align-items: center; gap: .55rem; }
.val__num::after { content: ""; flex: 1; height: 1px; background: var(--theme-border-default); }
.val__icon  { width: 42px; height: 42px; margin-bottom: 1.4rem; color: var(--color-brand-primary-500); }
.val__icon svg { width: 100%; height: 100%; }
.val__title { font-family: var(--display); font-size: var(--font-fontSize-2xl); color: var(--theme-text-heading); margin: 0 0 .75rem; font-variation-settings: "opsz" 48; }
.val__text  { font-size: var(--font-fontSize-sm); line-height: 1.6; color: var(--theme-text-body); margin: 0; }
.val__btn   { margin-top: 1.5rem; }
@media (max-width: 880px) {
  .values__head { grid-template-columns: 1fr; gap: 1.2rem; margin-bottom: 3rem; }
  .values__grid,
  .values__grid--cols-3,
  .values__grid--cols-4 { grid-template-columns: 1fr 1fr; }
  .val { border-bottom: 1px solid var(--theme-border-default); padding: 1.9rem .95rem; }
  .val:nth-child(even) { border-right: 0; }
}
/* Ganz schmal einspaltig: zwei Spalten lassen für Titel und Text zu wenig
   Breite, der Fliesstext bricht dort nach zwei bis drei Wörtern um. */
@media (max-width: 620px) {
  .values__grid,
  .values__grid--cols-2,
  .values__grid--cols-3,
  .values__grid--cols-4 { grid-template-columns: 1fr; }
  .val { border-right: 0; padding: 1.75rem 0; }
  .val:last-child { border-bottom: 0; }
}


/* =============================================================================
   SUSTAINABILITY
   ============================================================================= */
.sustain        { background: var(--color-brand-primary-700); color: var(--color-white); position: relative; overflow: hidden; }
.sustain__inner { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; min-height: 540px; }
.sustain__media { background: var(--color-brand-primary-500); background-size: cover; background-position: center; position: relative; }
.sustain__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, color-mix(in srgb, var(--color-brand-primary-700) 28%, transparent) 0%, transparent 60%); }
.sustain__copy  { padding: 5rem clamp(2rem, 5vw, 4.5rem); display: flex; flex-direction: column; justify-content: center; }
.sustain__title { font-family: var(--display); font-weight: var(--font-weight-regular); font-size: clamp(var(--font-fontSize-3xl), 2.8vw, var(--font-fontSize-4xl)); margin: .9rem 0 1.2rem; color: var(--color-white); line-height: 1.15; font-variation-settings: "opsz" 96; max-width: 18ch; }
.sustain__text  { font-size: var(--font-fontSize-base); line-height: 1.65; color: color-mix(in srgb, var(--color-white) 82%, transparent); margin: 0 0 .9rem; max-width: 44ch; }
.sustain__cta   { margin-top: 1.65rem; align-self: flex-start; display: inline-flex; align-items: center; gap: .55rem; font-size: var(--font-fontSize-xs); font-weight: var(--font-weight-semibold); letter-spacing: .15em; text-transform: uppercase; color: var(--color-white); padding: .9rem 1.55rem; border: 1px solid color-mix(in srgb, var(--color-white) 30%, transparent); border-radius: var(--border-radius-round); transition: background .22s, border-color .22s, color .22s; }
.sustain__cta:hover { background: var(--color-brand-secondary-500); color: var(--ink); border-color: var(--color-brand-secondary-500); }
.sustain__partners { margin-top: 2.25rem; display: flex; gap: 1.75rem; align-items: center; font-size: var(--font-fontSize-xs); letter-spacing: .18em; text-transform: uppercase; color: color-mix(in srgb, var(--color-white) 48%, transparent); flex-wrap: wrap; }
.sustain__partners strong { color: var(--color-brand-secondary-500); margin-right: .4rem; font-weight: var(--font-weight-medium); }
@media (max-width: 880px) { .sustain__inner { grid-template-columns: 1fr; } .sustain__media { min-height: 300px; } .sustain__copy { padding: 3.25rem var(--gutter); } }


/* =============================================================================
   JOURNAL
   ============================================================================= */
.journal { background: var(--color-brand-primary-600); color: var(--color-white); position: relative; overflow: hidden; }
.journal::before { content: ""; position: absolute; top: -28%; right: -14%; width: 58%; height: 58%; background: radial-gradient(circle, color-mix(in srgb, var(--color-brand-secondary-500) 11%, transparent) 0%, transparent 70%); pointer-events: none; }
.journal__head  { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 3.25rem; gap: 2rem; flex-wrap: wrap; }
.journal__title { font-family: var(--display); font-weight: var(--font-weight-regular); font-size: clamp(var(--font-fontSize-3xl), 4.2vw, var(--font-fontSize-6xl)); line-height: 1.05; letter-spacing: -.01em; margin: .8rem 0 0; color: var(--color-white); font-variation-settings: "opsz" 96; max-width: 14ch; }
.journal__all   { font-size: var(--font-fontSize-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--color-white); border-bottom: 1px solid var(--color-brand-secondary-500); padding-bottom: .38rem; font-weight: var(--font-weight-medium); }
.journal__grid  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.85rem; }

.post           { display: flex; flex-direction: column; cursor: pointer; }
.post__media    { aspect-ratio: 4/3; border-radius: var(--r); overflow: hidden; background: var(--color-brand-primary-500); background-size: cover; background-position: center; margin-bottom: 1.2rem; position: relative; }
.post__media::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--color-brand-primary-700) 0%, transparent); transition: background .3s; }
.post:hover .post__media::after { background: color-mix(in srgb, var(--color-brand-primary-700) 22%, transparent); }
.post__cat      { position: absolute; top: .95rem; left: .95rem; font-size: var(--font-fontSize-xs); letter-spacing: .22em; text-transform: uppercase; color: var(--color-white); background: color-mix(in srgb, var(--color-black) 32%, transparent); backdrop-filter: blur(8px); padding: .32rem .65rem; border-radius: var(--border-radius-tiny); z-index: 2; }
.post__date     { font-size: var(--font-fontSize-xs); letter-spacing: .18em; text-transform: uppercase; color: color-mix(in srgb, var(--color-white) 52%, transparent); margin-bottom: .45rem; }
.post__title    { font-family: var(--display); font-size: var(--font-fontSize-xl); margin: 0 0 .55rem; color: var(--color-white); font-variation-settings: "opsz" 48; line-height: 1.22; }
.post__excerpt  { font-size: var(--font-fontSize-sm); line-height: 1.52; color: color-mix(in srgb, var(--color-white) 72%, transparent); margin: 0; }
.post__author   { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid color-mix(in srgb, var(--color-white) 10%, transparent); font-size: var(--font-fontSize-xs); letter-spacing: .18em; text-transform: uppercase; color: color-mix(in srgb, var(--color-white) 48%, transparent); }
@media (max-width: 880px) { .journal__grid { grid-template-columns: 1fr; gap: 2.25rem; } .journal__head { flex-direction: column; align-items: flex-start; } }


/* =============================================================================
   AWARDS
   ============================================================================= */
.awards { background: var(--warm-white); padding: 3.75rem 0; border-top: 1px solid var(--hair-soft); border-bottom: 1px solid var(--hair-soft); }
.awards__head  { text-align: center; margin-bottom: 2.75rem; }
.awards__title { font-family: var(--display); font-weight: var(--font-weight-regular); font-size: clamp(var(--font-fontSize-xl), 2.1vw, var(--font-fontSize-3xl)); color: var(--color-brand-primary-600); margin: .5rem auto 0; font-variation-settings: "opsz" 48; max-width: 38ch; }
.awards__grid  { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.75rem; align-items: center; }
.award         { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .7rem; color: var(--ink-soft); transition: color .22s; }
.award:hover   { color: var(--color-brand-primary-500); }
.award__icon   { width: 44px; height: 44px; display: grid; place-items: center; color: var(--color-brand-primary-600); }
.award__icon svg { width: 100%; height: 100%; }
.award__lbl    { font-size: var(--font-fontSize-xs); letter-spacing: .16em; text-transform: uppercase; font-weight: var(--font-weight-medium); line-height: 1.35; }
@media (max-width: 880px) { .awards__grid { grid-template-columns: repeat(3, 1fr); gap: 1.75rem 1rem; } }


/* =============================================================================
   CTA BAND
   ============================================================================= */
.cta-band { background: var(--color-brand-tertiary-200); padding: clamp(3rem, 5.5vw, 5rem) 0; }
.cta-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--hair); border-radius: var(--r); overflow: hidden; background: var(--paper); }
.cta-col  { padding: 3.25rem 2.75rem; display: flex; flex-direction: column; justify-content: center; gap: 1.2rem; }
.cta-col--dark { background: var(--color-brand-primary-600); color: var(--color-white); }
.cta-col--dark .eyebrow { color: var(--color-brand-secondary-500); }
.cta-col + .cta-col { border-left: 1px solid var(--hair); }
.cta-col__title { font-family: var(--display); font-weight: var(--font-weight-regular); font-size: clamp(var(--font-fontSize-2xl), 2.3vw, var(--font-fontSize-3xl)); margin: 0; line-height: 1.15; font-variation-settings: "opsz" 48; max-width: 18ch; color: var(--color-brand-primary-600); }
.cta-col--dark .cta-col__title { color: var(--color-white); }
.cta-col__text { font-size: var(--font-fontSize-base); line-height: 1.6; margin: 0; max-width: 42ch; color: var(--ink-soft); }
.cta-col--dark .cta-col__text { color: color-mix(in srgb, var(--color-white) 75%, transparent); }
.cta-form      { display: flex; gap: .45rem; margin-top: .5rem; }
.cta-form input { flex: 1; padding: .9rem 1.05rem; border: 1px solid var(--hair); border-radius: var(--border-radius-round); background: var(--color-white); font-family: var(--body); font-size: var(--font-fontSize-sm); outline: none; transition: border-color .2s; }
.cta-form input:focus { border-color: var(--color-brand-primary-500); }
.cta-col--dark .cta-form input { background: color-mix(in srgb, var(--color-white) 8%, transparent); border-color: color-mix(in srgb, var(--color-white) 18%, transparent); color: var(--color-white); }
.cta-col--dark .cta-form input::placeholder { color: color-mix(in srgb, var(--color-white) 48%, transparent); }
.cta-form button { padding: .9rem 1.5rem; background: var(--theme-btn-primary-bg, var(--color-brand-secondary-500)); color: var(--theme-btn-primary-text, var(--ink)); border-radius: var(--border-radius-round); font-size: var(--font-fontSize-xs); letter-spacing: .14em; text-transform: uppercase; font-weight: var(--font-weight-semibold); cursor: pointer; transition: background .22s; border: 0; font-family: var(--body); }
.cta-form button:hover { background: var(--theme-btn-primary-bg-hover, var(--ir-saffron-light)); }
.cta-link { display: inline-flex; align-items: center; gap: .45rem; font-size: var(--font-fontSize-xs); font-weight: var(--font-weight-semibold); letter-spacing: .14em; text-transform: uppercase; color: var(--color-white); margin-top: .5rem; border-bottom: 1px solid var(--color-brand-secondary-500); padding-bottom: .38rem; align-self: flex-start; }
@media (max-width: 880px) {
  .cta-grid { grid-template-columns: 1fr; }
  .cta-col  { padding: 2.25rem 1.65rem; }
  .cta-col + .cta-col { border-left: 0; border-top: 1px solid color-mix(in srgb, var(--color-white) 8%, transparent); }
  .cta-form { flex-direction: column; }
}


/* =============================================================================
   PRE-FOOTER — Regionen-Übersicht
   ============================================================================= */
/* Farbiger Grund (data-theme="petrol" am Element, in der Regionsfarbe der
   Seite) mit heller Typografie — vorher cream, das trägt jetzt das CTA-Band. */
.pre-footer {
  background: var(--theme-bg-page);
  color: var(--theme-text-body);
  padding: 3rem 0 3.5rem;
  border-top: 1px solid var(--theme-border-default);
}
.pre-footer__heading {
  text-align: center; margin-bottom: 2rem;
  font-size: var(--font-fontSize-xs); letter-spacing: .22em; text-transform: uppercase;
  font-weight: var(--font-weight-semibold); color: var(--muted);
}
/* Die Badges laufen über die ganze Browserbreite, nicht über die Shell —
   deshalb steht hier kein .shell, sondern nur der Randabstand. */
.pre-footer__inner { padding-inline: var(--gutter); }
.pre-footer__regions {
  list-style: none; padding: 0; margin: 0;
  /* Eine Reihe über die ganze Breite: `grid-auto-flow: column` mit
     `grid-auto-columns: 1fr` legt genau so viele gleich breite Spalten an, wie
     Einträge da sind — bei 6 Regionen wie bei 9 Einträgen. Ein `auto-fit`-Raster
     liess dagegen eine Restzeile übrig (bei 1180 px standen zwei Einträge
     allein links), und Flex-Wrap mit `space-between` zog diese Restzeile
     auseinander. */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 1.75rem 1rem;
  justify-items: center;
}
@media (max-width: 900px) {
  /* Zu eng für eine Reihe — die Spalten würden schmaler als das Badge. */
  .pre-footer__regions {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
    gap: 1.75rem 1.5rem;
  }
}
.pre-footer__link {
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  text-decoration: none; color: var(--theme-text-body);
  font-size: var(--font-fontSize-sm); font-weight: var(--font-weight-medium); text-align: center;
  line-height: 1.35; width: 100%; max-width: 10rem;
  transition: color .2s;
}
/* Saffron statt petrol-600: auf dunklem Grund wäre petrol unlesbar —
   dieselbe Regel wie bei Eyebrow und Accordion in dunklen Themen. */
.pre-footer__link:hover { color: var(--color-brand-secondary-500); }
.pre-footer__badge {
  width: 68px; height: 68px; object-fit: contain; display: block;
  transition: transform .22s var(--ease), filter .22s;
}
.pre-footer__link:hover .pre-footer__badge {
  transform: translateY(-3px);
  filter: drop-shadow(0 6px 16px color-mix(in srgb, var(--color-black) 22%, transparent));
}
.pre-footer__name { display: block; }
@media (max-width: 640px) {
  /* Nicht fest zweispaltig: bei 9 Einträgen bliebe einer allein in der
     letzten Reihe. Mit auto-fit passen sich die Spalten der Anzahl an
     (360 px → 3 Spalten, 320 px → 2). */
  .pre-footer__regions { grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr)); gap: 1.5rem 1rem; }
  .pre-footer__badge { width: 3.375rem; height: 3.375rem; }
  .pre-footer__link { font-size: var(--font-fontSize-xs); }
}


/* =============================================================================
   FOOTER
   ============================================================================= */
.footer        { background: var(--color-brand-primary-800); color: color-mix(in srgb, var(--color-white) 70%, transparent); padding: 4.75rem 0 2rem; }
.footer__grid  { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; gap: 2.75rem; padding-bottom: 3.75rem; border-bottom: 1px solid color-mix(in srgb, var(--color-white) 8%, transparent); }
.footer__logo  { margin-bottom: 1.4rem; }
.footer__logo svg { height: 26px; width: auto; }
.footer__about { font-size: var(--font-fontSize-sm); line-height: 1.65; max-width: 32ch; margin-bottom: 1.4rem; }
.footer__contact { font-style:normal; font-size: var(--font-fontSize-sm); line-height: 1.7; color: color-mix(in srgb, var(--color-white) 55%, transparent); }
.footer__contact a { color: color-mix(in srgb, var(--color-white) 78%, transparent); transition: color .2s; }
.footer__contact a:hover { color: var(--color-brand-secondary-500); }
.footer__col-h { color: var(--color-white); font-family: var(--font-family-title); line-height: var(--line-height-h4); font-size: var(--font-fontSize-xs); letter-spacing: .22em; text-transform: uppercase; font-weight: var(--font-weight-medium); margin: 0 0 1.2rem; }
.footer__list  { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .65rem; }
.footer__list a { font-size: var(--font-fontSize-sm); color: color-mix(in srgb, var(--color-white) 62%, transparent); transition: color .2s; }
.footer__list a:hover { color: var(--color-brand-secondary-500); }
.footer__socials { display: flex; gap: .6rem; margin-top: 1.4rem; }
.footer__socials a { width: 37px; height: 37px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--color-white) 17%, transparent); display: grid; place-items: center; color: color-mix(in srgb, var(--color-white) 68%, transparent); transition: background .2s, color .2s, border-color .2s; }
.footer__socials a:hover { background: var(--color-brand-secondary-500); color: var(--ink); border-color: var(--color-brand-secondary-500); }
.footer__socials svg { width: 14px; height: 14px; }
.footer__bottom { margin-top: 1.9rem; display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; font-size: var(--font-fontSize-xs); color: color-mix(in srgb, var(--color-white) 55%, transparent); /* 42 % mass 3,9:1 (A11Y-04) */ }
.footer__legal  { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.footer__legal a:hover { color: var(--color-white); }
@media (max-width: 880px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 540px) { .footer__grid { grid-template-columns: 1fr; gap: 2.25rem; } }


/* =============================================================================
   REVEAL — Scroll-Animationen
   ============================================================================= */
.reveal          { opacity: 0; transform: translateY(18px); transition: opacity .88s var(--ease), transform .88s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal--d1 { transition-delay: .14s; }
.reveal--d2 { transition-delay: .28s; }
.reveal--d3 { transition-delay: .42s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal--d1, .reveal--d2, .reveal--d3 {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0s;
  }
}


/* =============================================================================
   RG-INFO — Info Split Section (global, auch via Page Builder nutzbar)
   ============================================================================= */
.rg-info { background: var(--theme-bg-page); }

.rg-info__head { margin-bottom: 2.5rem; }

.rg-info__title {
  font-family: var(--display);
  font-weight: var(--font-weight-regular);
  font-size: clamp(var(--font-fontSize-3xl), 3.2vw, var(--font-fontSize-4xl));
  color: var(--theme-text-heading);
  line-height: 1.15;
  margin: .5rem 0 0;
  font-variation-settings: "opsz" 72;
}

.rg-info__layout--with-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;
}

.rg-info__layout--img-links .rg-info__media { order: -1; }

.rg-info__media {
  position: relative;
  padding-bottom: 2.25rem;
  padding-left: 2.25rem;
}
.rg-info__media-main {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--r);
  background: var(--color-brand-primary-600);
  background-size: cover;
  background-position: center;
  position: relative;
}
.rg-info__media-mini {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 48%;
  aspect-ratio: 1;
  border-radius: var(--r);
  background-size: cover;
  background-position: center;
  border: 7px solid var(--theme-bg-page);
  box-shadow: 0 18px 38px -18px color-mix(in srgb, var(--color-black) 28%, transparent);
}

.rg-info__wysiwyg {
  max-width: 780px;
  font-size: var(--font-fontSize-base);
  line-height: 1.8;
  color: var(--theme-text-body);
}
.rg-info__wysiwyg p { margin: 0 0 1rem; }
.rg-info__wysiwyg p:last-child { margin-bottom: 0; }
/* Listen wie im Reiter-Inhalt: css/base/reset.css nimmt ul und ol die
   Voreinstellung des Browsers, ohne Ersatz stehen sie als eingerueckter
   Fliesstext ohne Punkte da. */
.rg-info__wysiwyg ul,
.rg-info__wysiwyg ol { padding-left: 1.35em; margin: 0 0 1rem; }
.rg-info__wysiwyg ul { list-style: disc; }
.rg-info__wysiwyg ol { list-style: decimal; }
.rg-info__wysiwyg li { margin-bottom: .35em; }
.rg-info__wysiwyg li::marker { color: var(--color-brand-primary-500); }
.rg-info__wysiwyg strong,
.rg-info__wysiwyg b { color: var(--theme-text-heading); font-weight: var(--font-weight-semibold); }
.rg-info__wysiwyg h2,
.rg-info__wysiwyg h3 {
  font-family: var(--display);
  font-weight: var(--font-weight-regular);
  color: var(--theme-text-heading);
  margin: 1.75rem 0 .75rem;
  font-variation-settings: "opsz" 48;
}
.rg-info__wysiwyg h2 { font-size: clamp(var(--font-fontSize-xl), 2.2vw, var(--font-fontSize-3xl)); }
.rg-info__wysiwyg h3 { font-size: clamp(var(--font-fontSize-lg), 1.8vw, var(--font-fontSize-xl)); }

@media (max-width: 768px) {
  .rg-info__layout--with-media { grid-template-columns: 1fr; }
  .rg-info__layout--img-links .rg-info__media { order: 0; }
}


/* =============================================================================
   RG-MEDIA-SPLIT — Section 08: Zweispaltig Text + Bild/Karte (global, Page Builder)
   ============================================================================= */
.rg-media-split { background: var(--theme-bg-page); }

.rg-media-split__head { margin-bottom: 1.5rem; }

.rg-media-split__title {
  font-family: var(--display);
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.01em; /* gleich für h1 und h2, siehe ir_titel_tag() */
  font-size: clamp(var(--font-fontSize-3xl), 3.2vw, var(--font-fontSize-4xl));
  color: var(--theme-text-heading);
  line-height: 1.15;
  margin: .5rem 0 0;
  font-variation-settings: "opsz" 72;
}

.rg-media-split__layout--with-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: stretch;
}
.rg-media-split__layout--media-links .rg-media-split__media { order: -1; }

.rg-media-split__content { align-self: center; }

.rg-media-split__media {
  position: relative;
  min-height: 360px;
  border-radius: var(--r);
  overflow: hidden;
}
.rg-media-split__image,
.rg-media-split__map,
.rg-media-split__embed,
.rg-media-split__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.rg-media-split__image {
  background: var(--color-brand-primary-600);
  background-size: cover;
  background-position: center;
}
.rg-media-split__video {
  display: block;
  background: #000;
  object-fit: cover;
}

/* Festes Seitenverhaeltnis statt Strecken auf die Texthoehe.
   Das Strecken im Grid wuerde die Hoehe vorgeben und aspect-ratio aushebeln —
   deshalb hier align-self statt stretch. */
.rg-media-split__media--ratio {
  min-height: 0;
  height: auto;
  align-self: center;
}
.rg-media-split__media--16-9 { aspect-ratio: 16 / 9; }
.rg-media-split__media--21-9 { aspect-ratio: 21 / 9; }
.rg-media-split__media--3-2  { aspect-ratio: 3 / 2; }
.rg-media-split__media--4-3  { aspect-ratio: 4 / 3; }
.rg-media-split__media--1-1  { aspect-ratio: 1 / 1; }
.rg-media-split__media--4-5  { aspect-ratio: 4 / 5; }
.rg-media-split__media--9-16 { aspect-ratio: 9 / 16; }

/* Bei gewaehltem Verhaeltnis nicht beschneiden: ein 16:9-Video in einem
   1:1-Rahmen soll vollstaendig sichtbar bleiben, nicht angeschnitten werden. */
.rg-media-split__media--ratio .rg-media-split__video { object-fit: contain; }

.rg-media-split__wysiwyg {
  font-size: var(--font-fontSize-base);
  line-height: 1.8;
  color: var(--theme-text-body);
}
.rg-media-split__wysiwyg p { margin: 0 0 1rem; }
.rg-media-split__wysiwyg p:last-child { margin-bottom: 0; }
/* Ohne `:not(.btn)` griffe diese Regel als einzige auf einen Knopf im
   Fliesstext — die Fassung weiter unten in dieser Datei hat den Vorbehalt und
   schiede damit aus, diese hier nicht. Ein `.btn` wäre also ausgerechnet hier
   unterstrichen. */
.rg-media-split__wysiwyg a:not(.btn, .wp-block-button__link) {
  color: var(--theme-text-heading);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rg-media-split__wysiwyg strong,
.rg-media-split__wysiwyg b { color: var(--theme-text-heading); font-weight: var(--font-weight-semibold); }

/* Aktionen unter dem Text — bis zu zwei, umbrechend auf schmalen Fenstern */
.rg-media-split__cta { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: .75rem; }

@media (max-width: 768px) {
  .rg-media-split__layout--with-media { grid-template-columns: 1fr; }
  .rg-media-split__layout--media-links .rg-media-split__media { order: 0; }
  .rg-media-split__media { min-height: 280px; }
  /* Das Verhaeltnis gilt auch einspaltig — die Mindesthoehe wuerde es brechen. */
  .rg-media-split__media--ratio { min-height: 0; }
}


/* =============================================================================
   IR-MEDIUM — grosses Medium (Bild oder Video) mit waehlbarem Seitenverhaeltnis
   Zusatzklasse an den Rahmen von «01 — Info Split» (.rg-info__media-main/-mini)
   und «Über uns» (.about__media-main/-mini). Die Blockklasse behaelt Radius, Farbe und
   Lage, hier kommen nur Verhaeltnis und Video-Fuellung dazu.
   Zwei Klassen im Selektor, damit das Verhaeltnis das feste 4:5 bzw. 1:1 der
   Blockklassen schlaegt, ohne von der Reihenfolge im Stylesheet abzuhaengen.
   ============================================================================= */
/* Kein `position` hier: das kleine Medium ist absolut gesetzt, die Rahmen
   bringen ihre Positionierung selbst mit. Eine Angabe an dieser Stelle stuende
   spaeter im Stylesheet und schlüge die der Blockklasse. */
.ir-medium { overflow: hidden; }

.ir-medium.ir-medium--4-5  { aspect-ratio: 4 / 5; }
.ir-medium.ir-medium--1-1  { aspect-ratio: 1 / 1; }
.ir-medium.ir-medium--4-3  { aspect-ratio: 4 / 3; }
.ir-medium.ir-medium--3-2  { aspect-ratio: 3 / 2; }
.ir-medium.ir-medium--16-9 { aspect-ratio: 16 / 9; }
.ir-medium.ir-medium--21-9 { aspect-ratio: 21 / 9; }
.ir-medium.ir-medium--9-16 { aspect-ratio: 9 / 16; }

.ir-medium--video { background: var(--color-black); }

.ir-medium__embed,
.ir-medium__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* Mit Steuerleiste soll das Video vollstaendig sichtbar sein — ein 16:9-Film
   im 4:5-Rahmen wird nicht angeschnitten. Der stumme Loop dagegen ersetzt ein
   Bild und fuellt den Rahmen wie eines. */
.ir-medium__video { object-fit: contain; }
.ir-medium__video--fuellen { object-fit: cover; }
/* Vor dem ersten Abspielen steht das Vorschaubild da — object-fit gilt auch
   fuers Poster, und es soll den Rahmen ohne schwarze Raender fuellen. Die
   Klasse --leiste setzt medium-video.js beim ersten Abspielen; ab dann wieder
   contain. Ohne JS bleibt es bei contain: dort laeuft der Film direkt aus
   der nativen Leiste, ohne Moment zum Umschalten. */
.ir-medium--js:not(.ir-medium--leiste) .ir-medium__video { object-fit: cover; }

/* Die Bildunterschrift liegt über dem Medium — Klicks gehen zum Player. */
.ir-medium .about__caption { pointer-events: none; }

/* Runder Play-/Pause-Knopf auf Video-Dateien (js/modules/medium-video.js).
   Flaeche wie .rg-discover__grid .post__cat: abgedunkeltes Glas mit Blur.
   Die Groesse folgt dem Rahmen (Prozent der Rahmenbreite), damit derselbe
   Knopf im grossen Medium wie im kleinen Overlay passt.
   Zentriert ueber translate statt inset + margin: auto — bei inset: 0 wuerde
   die Hoehe gestreckt und aspect-ratio ignoriert. Der Hover-Zoom laeuft ueber
   `scale`, damit er das translate nicht ueberschreibt. */
.ir-medium__play {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: 2;
  width: clamp(3rem, 20%, 4.5rem);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--color-white);
  background: color-mix(in srgb, var(--color-black) 32%, transparent);
  backdrop-filter: blur(.5rem);
  -webkit-backdrop-filter: blur(.5rem);
  cursor: pointer;
  transition: opacity .25s var(--ease), scale .25s var(--ease), background-color .25s var(--ease);
}
.ir-medium__play[hidden] { display: none; }
.ir-medium__play:hover { background: color-mix(in srgb, var(--color-black) 48%, transparent); scale: 1.06; }
.ir-medium__play:focus-visible { outline: 2px solid var(--color-white); outline-offset: .25rem; }

.ir-medium__icon { width: 42%; height: 42%; fill: currentColor; }
.ir-medium__icon--pause { display: none; }

/* Laeuft das Video: Knopf verborgen, beim Ueberfahren mit Pause-Icon */
.ir-medium--spielt .ir-medium__icon--play  { display: none; }
.ir-medium--spielt .ir-medium__icon--pause { display: block; }
.ir-medium--spielt .ir-medium__play { opacity: 0; }
.ir-medium--spielt:hover .ir-medium__play,
.ir-medium--spielt .ir-medium__play:focus-visible { opacity: 1; }

/* Ohne Hover (Touch): Beim stummen Loop bleibt der Pause-Knopf stehen — er ist
   dort der einzige Weg, die Bewegung anzuhalten. Mit nativer Leiste hat die
   ihren eigenen Pause-Knopf, der runde wuerde nur das Bild verdecken. */
@media (hover: none) {
  .ir-medium--spielt:not(.ir-medium--leiste) .ir-medium__play { opacity: 1; }
  .ir-medium--spielt.ir-medium--leiste .ir-medium__play { opacity: 0; pointer-events: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ir-medium__play { transition: none; }
  .ir-medium__play:hover { scale: none; }
}


/* =============================================================================
   BLOCK 15 — GLOBUS (Text + 3D-Globus, Globus bis an die Fensterkante)
   ============================================================================= */
.s15-globus { background: var(--theme-bg-page); overflow: hidden; }

/* Kein .shell um die Section: die Globus-Spalte soll die Fensterkante erreichen.
   Die Textspalte bekommt dafür genau das Padding, das der Inhaltscontainer
   hätte — so steht sie auf derselben Achse wie alle anderen Sections.
   `max()` deckt beide Fälle ab: schmales Fenster (nur Gutter) und breites
   Fenster (halbe Restbreite + Gutter). */
.s15-globus__layout { padding-inline: var(--gutter); }

@media (min-width: 900px) {
  .s15-globus__layout--mit-globus {
    display: grid;
    grid-template-columns: minmax(0, 27rem) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4.5rem);
    align-items: center;
    padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))) 0;
  }
  /* Spiegelbild: Globus links, Text rechts */
  .s15-globus__layout--mit-globus.s15-globus__layout--globus-links {
    grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
    padding-inline: 0 max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
  }
  .s15-globus__layout--globus-links .s15-globus__stage { order: -1; }
}

.s15-globus__title {
  font-family: var(--display);
  font-weight: var(--font-weight-regular);
  font-size: clamp(var(--font-fontSize-3xl), 3.2vw, var(--font-fontSize-4xl));
  color: var(--theme-text-heading);
  line-height: 1.15;
  margin: .5rem 0 0;
  font-variation-settings: "opsz" 72;
}

.s15-globus__wysiwyg {
  margin-top: 1.5rem;
  font-size: var(--font-fontSize-base);
  line-height: 1.8;
  color: var(--theme-text-body);
}
.s15-globus__wysiwyg p { margin: 0 0 1rem; }
.s15-globus__wysiwyg p:last-child { margin-bottom: 0; }
.s15-globus__wysiwyg strong { color: var(--theme-text-heading); font-weight: var(--font-weight-semibold); }
.s15-globus__cta { margin-top: 2rem; }

/* Die Bühne für den Globus. Zwei Eingriffe ins Plugin-CSS sind nötig:
   – die Höhe steht dort als inline-style in px (schlägt jede Stylesheet-Regel,
     deshalb `!important`), hier gekappt auf 80 % der Fensterhöhe;
   – der Plugin-Container malt `#060e14`, was auf jedem Theme als dunkler Kasten
     stehen würde. Der Canvas selbst ist transparent (alpha: true). */
.s15-globus__stage { position: relative; }
.s15-globus__stage .ir-globe-container {
  height: min(var(--globus-h, 620px), 80vh) !important;
  background: transparent;
}

/* Bis an die Kante: der Globus darf über das Grid hinauslaufen, damit die Kugel
   gross wirkt und rechts angeschnitten wird. */
@media (min-width: 900px) {
  .s15-globus__layout--mit-globus .s15-globus__stage { margin-right: calc(-1 * var(--gutter)); }
  .s15-globus__layout--globus-links .s15-globus__stage { margin: 0 0 0 calc(-1 * var(--gutter)); }
}

@media (max-width: 899px) {
  .s15-globus__stage {
    /* volle Fensterbreite, auch wenn die Section Padding hat */
    width: calc(100% + 2 * var(--gutter));
    margin-inline: calc(-1 * var(--gutter));
    margin-top: 2.5rem;
  }
  .s15-globus__stage .ir-globe-container { height: min(var(--globus-h, 620px), 70vh) !important; }
}


/* =============================================================================
   RG-FORM — Section 09: Formular (CF7 o. ä. via Shortcode, global, Page Builder)
   ============================================================================= */
.rg-form { background: var(--theme-bg-page); }

/* 52rem ist die Innenbreite des Anfrage-Modals (.anf-modal__dialog, min(56rem,
   94vw) abzüglich Polster). Die Formulare sollen dort wie hier gleich breit
   laufen — vorher 720px, was eine vierspaltige Adresszeile zu eng setzte.
   «Schmal & linksbündig» ist dieselbe Breite ohne die Zentrierung: für Seiten,
   deren übrige Blöcke am linken Seitenraster hängen (s12_text, s01_info_split)
   — ein zentriertes Formular bräche dort die Achse. */
.rg-form__inner--schmal       { max-width: 52rem; margin-inline: auto; }
.rg-form__inner--schmal-links { max-width: 52rem; }
.rg-form__inner--voll         { max-width: none; }

.rg-form__head { margin-bottom: 2rem; }
.rg-form__inner--schmal .rg-form__head { text-align: center; }

.rg-form__title {
  font-family: var(--display);
  font-weight: var(--font-weight-regular);
  font-size: clamp(var(--font-fontSize-3xl), 3.2vw, var(--font-fontSize-4xl));
  color: var(--theme-text-heading);
  line-height: 1.15;
  margin: .5rem 0 0;
  font-variation-settings: "opsz" 72;
}
.rg-form__intro {
  margin-top: 1rem;
  font-size: var(--font-fontSize-base);
  line-height: 1.8;
  color: var(--theme-text-body);
}
.rg-form__hint {
  padding: 1rem 1.25rem;
  border: 1px dashed color-mix(in srgb, var(--theme-text-body) 40%, transparent);
  border-radius: var(--radius-md);
  color: var(--theme-text-body);
  font-size: var(--font-fontSize-sm);
}
.rg-form__hint code {
  font-size: .9em;
  background: color-mix(in srgb, var(--theme-text-body) 12%, transparent);
  padding: .1em .4em;
  border-radius: .3em;
}

/* Das Styling der eingebetteten Formulare steht in css/components/cf7.css.
   Es lag früher hier und zielte über Element-Selektoren (.rg-form__embed input
   [type="text"] …) auf die CF7-Ausgabe. Die schlugen die Atoms des Design
   Systems (.input, .label, .btn) über die höhere Spezifität — seit die
   Formulare diese Klassen selbst tragen, mussten die Regeln weichen. */


/* =============================================================================
   RG-DESTINATIONS + RG-DEST-CARD — global (Section 02, Region-Seite)
   ============================================================================= */

.rg-destinations { background: var(--theme-bg-page); }

.rg-destinations__head { margin-bottom: 2.5rem; }

.rg-destinations__title {
  font-family: var(--display);
  font-size: clamp(var(--font-fontSize-2xl), 3vw, var(--font-fontSize-4xl));
  font-weight: var(--font-weight-regular);
  color: var(--theme-text-heading);
  line-height: 1.1;
  letter-spacing: -.01em;
  margin: .5rem 0 .75rem;
  font-variation-settings: "opsz" 72;
}

.rg-destinations__sub {
  font-size: var(--font-fontSize-sm);
  color: var(--theme-text-muted);
  margin: 0;
}

.rg-destinations__paragraph {
  max-width: 62ch;
  margin-top: .75rem;
  font-size: clamp(var(--font-fontSize-sm), 1vw, var(--font-fontSize-base));
  line-height: 1.7;
  color: var(--theme-text-body);
}
.rg-destinations__paragraph p { margin: 0 0 .75em; }
.rg-destinations__paragraph p:last-child { margin-bottom: 0; }

/* Grid — Default 4 Spalten, Modifier für 2 und 3 */
.rg-destinations__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.rg-destinations__grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.rg-destinations__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.rg-destinations__grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ── Destination Card ─────────────────────────────────────────────────────── */

.rg-dest-card {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: 1rem;
  overflow: hidden;
  text-decoration: none;
  background: var(--color-brand-primary-600);
  isolation: isolate;
}

.rg-dest-card__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform .55s var(--ease, ease);
}
.rg-dest-card:hover .rg-dest-card__bg { transform: scale(1.06); }

.rg-dest-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-black) 0%, transparent) 30%, color-mix(in srgb, var(--color-black) 65%, transparent) 100%);
  transition: opacity .3s;
}
.rg-dest-card:hover::after { opacity: .85; }

.rg-dest-card__count {
  position: absolute;
  top: .9rem;
  left: .9rem;
  z-index: 2;
  font-size: var(--font-fontSize-xs);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-white);
  background: color-mix(in srgb, var(--color-black) 30%, transparent);
  backdrop-filter: blur(8px);
  padding: .32rem .6rem;
  border-radius: var(--border-radius-tiny);
  white-space: nowrap;
}

.rg-dest-card__foot {
  position: absolute;
  bottom: 1.35rem;
  left: 1.5rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .55rem;
}

.rg-dest-card__badge {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  object-fit: contain;
  filter: drop-shadow(0 1px 4px color-mix(in srgb, var(--color-black) 40%, transparent));
}

.rg-dest-card__name {
  font-family: var(--display);
  font-size: clamp(var(--font-fontSize-lg), 1.8vw, var(--font-fontSize-2xl));
  font-weight: var(--font-weight-regular);
  color: var(--color-white);
  margin: 0;
  line-height: 1.1;
  font-variation-settings: "opsz" 48;
  text-shadow: 0 1px 8px color-mix(in srgb, var(--color-black) 30%, transparent);
  transition: transform .3s var(--ease, ease);
}
.rg-dest-card:hover .rg-dest-card__name { transform: translateY(-3px); }

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .rg-destinations__grid,
  .rg-destinations__grid--cols-4 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
  .rg-destinations__grid,
  .rg-destinations__grid--cols-3,
  .rg-destinations__grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .rg-destinations__grid--cols-2,
  .rg-destinations__grid--cols-3,
  .rg-destinations__grid--cols-4 { grid-template-columns: 1fr; }
}


/* =============================================================================
   BILDERGALERIE — Impressionen + Lightbox (shared component, used on page + reise)
   ============================================================================= */
.rd-impressions { background: var(--theme-bg-page); padding-block: var(--padding-section-large); }
.rd-impressions__head { display: flex; flex-direction: column; gap: .3rem; margin-bottom: 2rem; }
.rd-impressions__title {
  font-family: var(--display); font-weight: var(--font-weight-regular);
  font-size: clamp(var(--font-fontSize-3xl), 3.6vw, var(--font-fontSize-5xl)); line-height: 1.08;
  letter-spacing: -.01em; color: var(--theme-text-heading); font-variation-settings: "opsz" 96; margin: .5rem 0 .3rem;
}
.rd-impressions__count { font-size: var(--font-fontSize-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--theme-text-muted); }
.rd-impressions__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(160px, 18vw, 240px); gap: 6px; grid-auto-flow: dense;
}
.rd-imp__item { position: relative; overflow: hidden; border-radius: var(--border-radius-small); background: var(--color-brand-primary-700); cursor: pointer; outline: none; }
.rd-imp__item:focus-visible { outline: 2px solid var(--color-brand-secondary-500); outline-offset: 2px; }
.rd-imp__item--wide    { grid-column: span 2; }
.rd-imp__item--tall    { grid-row: span 2; }
.rd-imp__item--feature { grid-column: span 2; grid-row: span 2; }
.rd-imp__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .55s ease; }
.rd-imp__item:hover .rd-imp__img { transform: scale(1.05); }
.rd-imp__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--color-brand-primary-800) 22%, transparent); pointer-events: none; transition: background .25s; }
.rd-imp__item--video:hover .rd-imp__play { background: color-mix(in srgb, var(--color-brand-primary-800) 8%, transparent); }
.rd-imp__play-btn { width: 54px; height: 54px; border-radius: 50%; background: color-mix(in srgb, var(--color-white) 14%, transparent); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; transition: background .25s, transform .25s; }
.rd-imp__item--video:hover .rd-imp__play-btn { background: var(--color-brand-secondary-500); transform: scale(1.1); }
.rd-imp__play-btn svg { width: 20px; height: 20px; fill: var(--color-white); margin-left: 3px; }
.rd-imp__overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 2.5rem .85rem .75rem; background: linear-gradient(to top, color-mix(in srgb, var(--color-brand-primary-800) 75%, transparent) 0%, transparent 100%); color: color-mix(in srgb, var(--color-white) 82%, transparent); font-size: var(--font-fontSize-xs); letter-spacing: .14em; text-transform: uppercase; opacity: 0; transform: translateY(3px); transition: opacity .3s, transform .3s; pointer-events: none; }
.rd-imp__item:hover .rd-imp__overlay { opacity: 1; transform: translateY(0); }
.rd-imp__item[data-extra] { display: none; }
.rd-impressions.all-shown .rd-imp__item[data-extra] { display: block; }
.rd-impressions__more { display: flex; justify-content: center; margin-top: 1.5rem; }
.rd-impressions__more-btn {
  display: inline-flex; align-items: center; gap: .65rem; padding: .9rem 2rem;
  border: 1px solid color-mix(in srgb, var(--theme-text-heading) 18%, transparent);
  border-radius: var(--border-radius-round);
  background: color-mix(in srgb, var(--theme-text-heading) 6%, transparent);
  color: var(--theme-text-body);
  font-family: var(--body); font-size: var(--font-fontSize-xs); font-weight: var(--font-weight-medium); letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
  transition: background .22s, border-color .22s, color .22s;
}
.rd-impressions__more-btn:hover {
  background: color-mix(in srgb, var(--theme-text-heading) 12%, transparent);
  border-color: color-mix(in srgb, var(--theme-text-heading) 35%, transparent);
  color: var(--theme-text-heading);
}
.rd-impressions__more-btn svg { width: 16px; height: 16px; transition: transform .3s; }
.rd-impressions.all-shown .rd-impressions__more-btn svg { transform: rotate(180deg); }

/* ── Lightbox ── */
.rd-lb { display: none; position: fixed; inset: 0; z-index: 9000; background: color-mix(in srgb, var(--color-brand-primary-900) 96%, transparent); align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .28s; }
.rd-lb.is-active { display: flex; }
.rd-lb.is-open   { opacity: 1; pointer-events: auto; }
.rd-lb__inner { max-width: min(90vw, 1280px); max-height: 88vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .875rem; }
.rd-lb__media { max-width: 100%; max-height: calc(88vh - 3.5rem); border-radius: var(--border-radius-small); object-fit: contain; display: none; box-shadow: 0 40px 100px -20px color-mix(in srgb, var(--color-black) 60%, transparent); }
.rd-lb__media.is-visible { display: block; }
.rd-lb__close, .rd-lb__arrow { position: fixed; width: 46px; height: 46px; border-radius: 50%; background: color-mix(in srgb, var(--color-white) 8%, transparent); backdrop-filter: blur(10px); border: 1px solid color-mix(in srgb, var(--color-white) 12%, transparent); color: var(--color-white); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .22s; }
.rd-lb__close:hover, .rd-lb__arrow:hover { background: color-mix(in srgb, var(--color-white) 20%, transparent); }
.rd-lb__close { top: 1.25rem; right: 1.25rem; }
.rd-lb__close svg { width: 18px; height: 18px; }
.rd-lb__arrow { top: 50%; transform: translateY(-50%); }
.rd-lb__arrow--prev { left: 1.25rem; }
.rd-lb__arrow--next { right: 1.25rem; }
.rd-lb__arrow svg { width: 20px; height: 20px; }
/* Bildunterschrift sitzt im .rd-lb__inner direkt unter dem Bild (Spalten-Flex), nicht am Fensterrand */
.rd-lb__caption { max-width: min(100%, 72ch); font-size: var(--font-fontSize-sm); line-height: 1.5; letter-spacing: .01em; text-transform: unset; text-align: center; color: color-mix(in srgb, var(--color-white) 70%, transparent); text-wrap: pretty; }
.rd-lb__caption:empty { display: none; }
.rd-lb__vid-notice { display: none; flex-direction: column; align-items: center; gap: 1rem; color: color-mix(in srgb, var(--color-white) 70%, transparent); text-align: center; }
.rd-lb__vid-notice.is-visible { display: flex; }
.rd-lb__vid-notice strong { font-family: var(--display); font-size: clamp(var(--font-fontSize-lg), 2vw, var(--font-fontSize-2xl)); font-weight: var(--font-weight-regular); color: var(--color-white); }
.rd-lb__vid-notice p { font-size: var(--font-fontSize-sm); color: color-mix(in srgb, var(--color-white) 45%, transparent); max-width: 28ch; line-height: 1.55; }

@media (max-width: 860px) {
  .rd-impressions__grid { grid-template-columns: repeat(2, 1fr); }
  .rd-imp__item--feature { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 480px) {
  .rd-impressions__grid { grid-template-columns: 1fr; }
  .rd-imp__item--wide,
  .rd-imp__item--feature { grid-column: span 1; }
}


/* =============================================================================
   S05 — HERO BANNER (Flexible Section)
   Einzel-Bild · Crossfade-Slider · Video
   ============================================================================= */

.s05-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-brand-primary-800);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  /* Backdrop-Root fuer den Unschaerfe-Verlauf unten */
  isolation: isolate;
}

/*
 * Unschaerfe-Verlauf, gleiches Prinzip wie .rd-hero (reise-detail.css).
 * z-index 1 = Unschaerfe, 2 = Farbverlauf, 3 = Inhalt — ausdruecklich, weil ein
 * Pseudo-Element sonst der DOM-Reihenfolge folgt und unter Slider und Video
 * laege. So erfasst der Blur beides.
 *
 * Der Inhalt steht hier ZENTRIERT, nicht unten: die Rampe deckt deshalb die
 * Mitte mit ab und laeuft erst im oberen Fuenftel aus.
 */
.s05-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  -webkit-backdrop-filter: blur(.75rem);
  backdrop-filter: blur(.75rem);
  -webkit-mask-image: linear-gradient(to top,
    rgba(0, 0, 0, 1)    0%,
    rgba(0, 0, 0, .08) 40%,
    transparent        90%);
  mask-image: linear-gradient(to top,
    rgba(0, 0, 0, 1)    0%,
    rgba(0, 0, 0, .08) 40%,
    transparent        90%);
}

/* ── Höhen-Modifier ── */
.s05-hero--mittel   { min-height: clamp(340px, 55vh, 560px); }
.s05-hero--gross    { min-height: clamp(480px, 70vh, 760px); }
.s05-hero--vollbild { min-height: 100svh; }

/* ── Gradient-Overlay ──
   Neutrale Schwarzlage traegt die Lesbarkeit, die Markenfarbe bleibt Toenung.
   Der alte Verlauf war bei 35% am HELLSTEN (10%) — genau auf Hoehe der
   zentrierten Headline. Die neue Kurve sackt in der Mitte nicht mehr ab. */
.s05-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    /* Markenfarbe zuoberst — sie traegt die Farbkodierung (auf Seiten mit
       Regionsschema ueberschreibt PHP --color-brand-primary-700). */
    linear-gradient(180deg,
      color-mix(in srgb, var(--ir-region-primary-dark, var(--color-brand-primary-700)) 10%, transparent)  0%,
      color-mix(in srgb, var(--ir-region-primary-dark, var(--color-brand-primary-700)) 20%, transparent) 45%,
      color-mix(in srgb, var(--ir-region-primary-dark, var(--color-brand-primary-700)) 50%, transparent) 100%),
    /* neutrale Lage darunter — Kontrast */
    linear-gradient(180deg,
      rgba(0, 0, 0, .3) 75%,
      rgba(0, 0, 0, .55) 100%);
  pointer-events: none;
}

/* ── Slider — übereinander gestapelte Bilder ── */
.s05-hero__slides {
  position: absolute;
  inset: 0;
}
.s05-hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.4s ease;
  will-change: opacity;
}
.s05-hero__slide.is-active { opacity: 1; }

/* ── Video ── */
.s05-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* ── Content ── */
.s05-hero__inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  padding-top: clamp(3rem, 6vw, 5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  width: 100%;
}

.s05-hero__badge {
  width: 100px;
  height: 100px;
  object-fit: contain;
  filter: drop-shadow(0 4px 16px color-mix(in srgb, var(--color-black) 35%, transparent));
}

.s05-hero__title {
  font-family: var(--display);
  font-size: clamp(var(--font-fontSize-4xl), 6vw, var(--font-fontSize-7xl));
  font-weight: var(--font-weight-regular);
  line-height: 1.0;
  letter-spacing: -.025em;
  color: var(--color-white);
  margin: 0;
  max-width: 18ch;
  font-variation-settings: "opsz" 144;
}

.s05-hero__sub {
  font-family: var(--display);
  font-size: clamp(var(--font-fontSize-base), 1.8vw, var(--font-fontSize-2xl));
  font-weight: 300;
  color: color-mix(in srgb, var(--color-white) 82%, transparent);
  margin: 0;
  max-width: 50ch;
  font-variation-settings: "opsz" 48;
}

@media (max-width: 600px) {
  .s05-hero__badge { width: 72px; height: 72px; }
}


/* =============================================================================
   SECTION 06 — BENTO GRID
   ============================================================================= */
.bento { background: var(--theme-bg-page); }
.bento__head  { margin-bottom: 2.75rem; }
.bento__title {
  font-family: var(--display);
  font-weight: var(--font-weight-regular);
  font-size: clamp(var(--font-fontSize-3xl), 4.2vw, var(--font-fontSize-6xl));
  line-height: 1.05;
  letter-spacing: -.01em;
  margin: .8rem 0 0;
  color: var(--theme-text-heading);
  font-variation-settings: "opsz" 96;
  max-width: 18ch;
}

.bento__grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(290px, auto); gap: 1.2rem; }

.bento-card {
  --reveal-delay: 0s;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--r);
  padding: 1.4rem;
  background: var(--color-brand-primary-600) center/cover no-repeat;
  color: var(--color-white);
  cursor: pointer;
  /* Reveal und Hover laufen auf derselben Karte. Der Reveal benutzt deshalb
     die eigenständige `translate`-Eigenschaft statt `transform` — sonst
     müssten sich beide eine Dauer teilen und der Hover-Lift würde so träge
     wie das Einblenden. Die Staffelung (--reveal-delay) hängt nur an den
     Reveal-Eigenschaften, damit ein Hover nicht verzögert anspringt. */
  transition:
    opacity    .88s var(--ease) var(--reveal-delay),
    translate  .88s var(--ease) var(--reveal-delay),
    transform  .38s var(--ease),
    box-shadow .38s var(--ease);
}
/* Überschreibt `.reveal`, das mit `transform: translateY(18px)` arbeitet —
   diese Karte hebt ihr `transform` für den Hover auf. */
.bento-card.reveal            { transform: none; translate: 0 1.125rem; }
.bento-card.reveal.is-visible { translate: 0 0; }

/* Zwei Verlaufsebenen statt einer: ein Farbverlauf ist nicht interpolierbar,
   `transition: background` springt deshalb hart um. Die Hover-Ebene liegt als
   eigenes Pseudoelement darüber und wird eingeblendet — Opazität lässt sich
   animieren. `::after` steht in der Baumreihenfolge nach `::before` und deckt
   es bei gleichem z-index ab. */
.bento-card::before,
.bento-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.bento-card::before {
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-brand-primary-700) 0%, transparent) 32%, color-mix(in srgb, var(--color-brand-primary-700) 88%, transparent) 100%);
}
.bento-card::after {
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-brand-primary-700) 8%, transparent) 18%, color-mix(in srgb, var(--color-brand-primary-700) 94%, transparent) 100%);
  opacity: 0;
  transition: opacity .38s var(--ease);
}
.bento-card:hover,
.bento-card:focus-within { transform: translateY(-.25rem); box-shadow: 0 22px 48px -22px color-mix(in srgb, var(--color-brand-primary-600) 48%, transparent); }
.bento-card:hover::after,
.bento-card:focus-within::after { opacity: 1; }
.bento-card > * { position: relative; z-index: 1; }

/* Karten nacheinander einblenden. Die Staffelung steht hier statt als
   `reveal--dN`-Klasse im Template: der Block hat beliebig viele Kacheln, und
   die Klassen waren auf der Karte ohnehin wirkungslos — die
   `transition`-Kurzschreibweise oben setzt `transition-delay` zurück
   (im Browser gemessen: 0s trotz `reveal--d1`).
   Ab der neunten Karte bleibt es bei .56s: eine weiter wachsende Wartezeit
   sähe nach Ladefehler aus, nicht nach Absicht. */
.bento__grid > .bento-card:nth-child(2) { --reveal-delay: .08s; }
.bento__grid > .bento-card:nth-child(3) { --reveal-delay: .16s; }
.bento__grid > .bento-card:nth-child(4) { --reveal-delay: .24s; }
.bento__grid > .bento-card:nth-child(5) { --reveal-delay: .32s; }
.bento__grid > .bento-card:nth-child(6) { --reveal-delay: .40s; }
.bento__grid > .bento-card:nth-child(7) { --reveal-delay: .48s; }
.bento__grid > .bento-card:nth-child(n+8) { --reveal-delay: .56s; }

/* Der globale Reduced-Motion-Block weiter oben greift hier nicht: die Regeln
   dieses Abschnitts sind spezifischer und stehen später. Deshalb noch einmal
   eigens abschalten — sonst blieben die Karten unsichtbar verschoben. */
@media (prefers-reduced-motion: reduce) {
  .bento-card,
  .bento-card.reveal,
  .bento-card.reveal.is-visible {
    --reveal-delay: 0s;
    opacity: 1;
    translate: none;
    transform: none;
    transition: none;
  }
  .bento-card::after { transition: none; }
}

.bento-card__tag {
  position: absolute;
  top: 1.4rem;
  left: 1.4rem;
  z-index: 2;
  padding: .32rem .65rem;
  font-size: var(--font-fontSize-xs);
  letter-spacing: .22em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--color-black) 32%, transparent);
  backdrop-filter: blur(8px);
  border-radius: var(--border-radius-tiny);
}
.bento-card__link  { display: flex; flex-direction: column; justify-content: flex-end; flex: 1; color: inherit; text-decoration: none; }
.bento-card__title { color: var(--color-white); margin: 0 0 .22rem; font-family: var(--display); font-size: clamp(var(--font-fontSize-xl), 1.9vw, var(--font-fontSize-2xl)); font-variation-settings: "opsz" 48; line-height: 1.15; }
.bento-card__meta  { display: flex; align-items: center; gap: .75rem; font-size: var(--font-fontSize-xs); letter-spacing: .06em; color: color-mix(in srgb, var(--color-white) 85%, transparent); line-height: 1.4; }
/* .bento-card__meta::before { content: ""; width: 16px; height: 1px; background: var(--color-brand-secondary-500); }*/

.bento-card--lg   { grid-column: span 6; min-height: 420px; }
.bento-card--md   { grid-column: span 6; min-height: 340px; }
.bento-card--sm   { grid-column: span 4; min-height: 320px; }
.bento-card--xl   { grid-column: span 8; grid-row: span 2; }
.bento-card--wide { grid-column: span 8; }
.bento-card--full { grid-column: span 12; }

@media (max-width: 980px) {
  .bento__grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .bento-card, .bento-card--lg, .bento-card--md, .bento-card--sm, .bento-card--xl, .bento-card--wide, .bento-card--full {
    grid-column: span 1;
    grid-row: span 1;
    min-height: 275px;
  }
}
@media (max-width: 560px) {
  .bento__grid { grid-template-columns: 1fr; }
}


/* =============================================================================
   SECTION 07 — ENTDECKEN (Reisen/Beiträge, Grid + optionales AJAX-Nachladen)
   ============================================================================= */
.rg-discover { background: var(--theme-bg-page); }
.rg-discover__head { margin-bottom: 2.5rem; }
.rg-discover__title {
  font-family: var(--display);
  font-weight: var(--font-weight-regular);
  font-size: clamp(var(--font-fontSize-3xl), 4.2vw, var(--font-fontSize-6xl));
  line-height: 1.05;
  letter-spacing: -.01em;
  margin: .8rem 0 0;
  color: var(--theme-text-heading);
  font-variation-settings: "opsz" 96;
  max-width: 20ch;
}
.rg-discover__copy { color: var(--theme-text-body); font-size: var(--font-fontSize-base); line-height: 1.6; max-width: 60ch; margin: 1rem 0 0; }

.rg-discover__grid { display: grid; gap: 1.5rem; }
.rg-discover__grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.rg-discover__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.rg-discover__grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

.rg-discover__more { display: flex; justify-content: center; margin-top: 2.5rem; }
.rg-discover__more-btn svg { transition: transform .2s; }
.rg-discover__more-btn:hover svg { transform: translateY(2px); }

/* Reisen-Karte — theme-reaktives Gegenstück zu .trip-card (reise-detail.css),
   hier neu aufgebaut weil index.css auf jeder Page-Builder-Seite laden muss,
   unabhängig davon ob reise-detail.css für die Seite überhaupt enqueued ist. */
.rg-discover-card {
  position: relative;
  background: var(--color-white);
  border: 1px solid var(--theme-border-default);
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .38s var(--ease), box-shadow .38s;
}
.rg-discover-card:hover { transform: translateY(-5px); box-shadow: 0 20px 42px -22px color-mix(in srgb, var(--color-brand-primary-600) 35%, transparent); }
.rg-discover-card__img-link { display: block; }
.rg-discover-card__img {
  aspect-ratio: 5/4;
  background: var(--color-brand-primary-500) center/cover no-repeat;
  position: relative;
  transition: transform .55s var(--ease);
}
.rg-discover-card:hover .rg-discover-card__img { transform: scale(1.04); }
.rg-discover-card__days {
  position: absolute; bottom: .9rem; right: .9rem;
  font-size: 0.625rem; letter-spacing: .16em; text-transform: uppercase; font-weight: var(--font-weight-semibold);
  color: var(--color-black); background: var(--color-brand-secondary-500);
  padding: .3rem .6rem; border-radius: var(--border-radius-tiny);
}
.rg-discover-card__body { padding: 1.3rem 1.25rem 1.4rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.rg-discover-card__title {
  position: relative;
  font-family: var(--display); font-size: var(--font-fontSize-lg); font-weight: var(--font-weight-regular);
  color: var(--theme-text-heading); margin: 0; line-height: 1.2;
  font-variation-settings: "opsz" 48;
}
.rg-discover-card__title a { color: inherit; text-decoration: none; transition: color .28s var(--ease); }
.rg-discover-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
/* Der Titel folgt dem Hover der ganzen Karte, nicht nur dem des Links — die
   Karte ist über das ::after des Links als Ganzes anklickbar, der Zeiger steht
   beim Überfahren also meist nicht auf dem Text. */
.rg-discover-card:hover .rg-discover-card__title a,
.rg-discover-card:focus-within .rg-discover-card__title a { color: var(--theme-accent-ink); }
.rg-discover-card__excerpt {
  font-size: var(--font-fontSize-sm); line-height: 1.6; color: var(--theme-text-body); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rg-discover-card__foot {
  margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--theme-border-default);
  display: flex; justify-content: space-between; align-items: end; gap: 1rem;
}
.rg-discover-card__price { font-size: var(--font-fontSize-xs); color: var(--theme-text-muted); line-height: 1.3; }
.rg-discover-card__price strong { display: block; font-size: var(--font-fontSize-base); color: var(--theme-text-heading); font-weight: var(--font-weight-semibold); }
.rg-discover-card__art { font-size: 0.625rem; letter-spacing: .14em; text-transform: uppercase; line-height: 1.2; color: var(--theme-text-muted); text-align: right; }

/* Beiträge-Karte — gleiche Optik wie .journal-grid/.related-posts__grid .post
   in blog.css, hier dupliziert statt importiert: blog.css lädt nur auf
   Blog-Templates, .rg-discover kann aber auf jeder Page-Builder-Seite liegen. */
.rg-discover__grid .post { display: flex; flex-direction: column; cursor: pointer; }
.rg-discover__grid .post__img {
  aspect-ratio: 4/3; border-radius: var(--r); overflow: hidden;
  background: var(--color-brand-primary-600) center/cover no-repeat;
  margin-bottom: 1.2rem; position: relative; transition: transform .38s var(--ease);
}
.rg-discover__grid .post:hover .post__img { transform: scale(1.03); }
.rg-discover__grid .post__cat {
  position: absolute; top: 1rem; left: 1rem;
  font-size: var(--font-fontSize-xs); letter-spacing: .18em; text-transform: uppercase;
  color: var(--color-white); background: color-mix(in srgb, var(--color-black) 32%, transparent);
  backdrop-filter: blur(8px); padding: .32rem .65rem; border-radius: var(--border-radius-tiny);
}
.rg-discover__grid .post__title {
  font-family: var(--display); font-size: var(--font-fontSize-xl); font-weight: var(--font-weight-regular);
  color: var(--theme-text-heading); margin: 0 0 .5rem; line-height: 1.25;
  font-variation-settings: "opsz" 48;
}
.rg-discover__grid .post__title a { color: inherit; text-decoration: none; transition: color .28s var(--ease); }
/* Saffron statt Petrol: im Petrol-Theme lag Petrol-500 auf Petrol-700 — der
   Titel wurde beim Überfahren dunkelgrün und damit schlechter lesbar als
   vorher. `--theme-accent-ink` ist der Akzent in der Stufe, die auf dem
   jeweiligen Sektionsgrund als Schrift trägt (siehe tokens/client.css). */
.rg-discover__grid .post:hover .post__title a,
.rg-discover__grid .post:focus-within .post__title a,
.rg-discover__grid .post__title a:hover { color: var(--theme-accent-ink); }
.rg-discover__grid .post__excerpt {
  font-size: var(--font-fontSize-sm); line-height: 1.55; color: var(--theme-text-body);
  margin: 0 0 .75rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rg-discover__grid .post__meta-row { display: flex; align-items: center; gap: .55rem; margin-top: auto; }
.rg-discover__grid .post__date { font-size: var(--font-fontSize-xs); letter-spacing: .08em; color: var(--theme-text-muted); }

@media (max-width: 980px) {
  .rg-discover__grid--cols-3,
  .rg-discover__grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .rg-discover__grid { grid-template-columns: 1fr !important; }
}


/* =============================================================================
   BILDER-SLIDER-BLOCK (Gutenberg) — .rd-slider ist dieselbe Komponente
   wie auf den Ayurveda-/Reise-Detailseiten (reise-detail.css), hier dupliziert
   weil dieser Block in jedem Beitrags-Content landen kann und index.css die
   einzige Stylesheet ist, die dafür sitewide garantiert lädt. JS: js/app.js
   (generischer .rd-slider-Init).
   ============================================================================= */
.rd-slider-block {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--r);
  overflow: hidden;
  margin: 1.5rem 0;
}
/* Bildunterschrift unten links IM Bild — dort ist Platz, die Punkte sitzen
   mittig und der Zähler rechts. Gleiche Grundlinie wie der Zähler (.75rem).
   Die Breite ist gekappt, damit langer Text nicht in die Punkte läuft; er
   wächst nach oben, weil die Box an `bottom` hängt. */
/* Zwei Klassen, nicht eine: der Block steht im Blog-Fliesstext, und
   `.article-body p` (0,1,1) schlägt eine Ein-Klassen-Regel (0,1,0) — gemessen
   kam so 18px/32px Zeilenhöhe an statt 13px/1.35, und «Hazrati-Imam-Komplex»
   brach auf zwei Zeilen. */
.rd-slider-block .rd-slider-block__caption {
  position: absolute; left: 14px; bottom: .7rem; z-index: 4;
  margin: 0; max-width: min(52%, 32rem);
  font-size: 0.8125rem; line-height: 1.35;
  color: rgba(255, 255, 255, .93);
  text-shadow: 0 1px 3px rgba(5, 43, 45, .65);
}
.rd-slider-block .rd-slider-block__caption:empty { display: none; }

/* Ohne Bedienleiste (ein einzelnes Bild) fehlt deren Verlauf — dann malt der
   Slider selbst einen, sonst stünde weisser Text auf hellem Foto. */
.rd-slider-block--ohne-bar .rd-slider::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 6rem; z-index: 3;
  background: linear-gradient(to top, rgba(5, 43, 45, .55) 0%, transparent 100%);
  pointer-events: none;
}

/* Die Slides öffnen die Lightbox — der Zeiger sagt es an */
.rd-slider-block .rd-slider__slide { cursor: zoom-in; }
.rd-slider-block .rd-slider__slide:focus-visible {
  outline: 3px solid var(--color-brand-secondary-500);
  outline-offset: -3px;
}

.rd-slider { position: relative; width: 100%; height: 100%; overflow: hidden; }
.rd-slider__track {
  display: flex;
  height: 100%;
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
.rd-slider__slide { flex: 0 0 100%; min-width: 0; position: relative; display: flex; align-items: stretch; }
.rd-slider__media { width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-slider__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .3);
  color: var(--color-white);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.rd-slider__btn:hover { background: rgba(255, 255, 255, .35); transform: translateY(calc(-50% - 2px)); }
.rd-slider__btn svg { width: 14px; height: 14px; }
.rd-slider__btn--prev { left: 12px; }
.rd-slider__btn--next { right: 12px; }
.rd-slider__bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1.5rem 1rem .75rem;
  background: linear-gradient(to top, color-mix(in srgb, var(--color-brand-primary-800) 60%, transparent) 0%, transparent 100%);
}
.rd-slider__dots { display: flex; align-items: center; gap: 5px; }
.rd-slider__dot {
  width: 6px; height: 6px;
  border-radius: var(--border-radius-tiny);
  background: rgba(255, 255, 255, .5);
  cursor: pointer;
  border: none;
  padding: 0;
  transition: width .25s ease, background .25s ease;
}
.rd-slider__dot.is-active { width: 16px; background: var(--color-white); }
/* Trefferfläche 24 × 24 px um den 6-px-Punkt, ohne die Optik zu ändern (A11Y-06) */
.rd-slider__dot { position: relative; }
.rd-slider__dot::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: 1.5rem; height: 1.5rem; transform: translate(-50%, -50%); }
.rd-slider__counter {
  font-size: var(--font-fontSize-xs);
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .75);
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight-medium);
  position: absolute;
  right: 14px;
  bottom: .75rem;
}


/* =============================================================================
   AKKORDEON — cmod-accordion (geteilte Komponente)
   Genutzt von der Reiseinfo-FAQ (single-reise/-kleingruppe/-ayurveda/-destination)
   und vom Page-Builder-Block «11 — Accordion» (s11_accordion).
   JS: js/app.js
   ============================================================================= */
.cmod-accordion__list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  border-top: 1px solid var(--hair-soft, rgba(0,0,0,.1));
}

.cmod-accordion__item {
  border-bottom: 1px solid var(--hair-soft, rgba(0,0,0,.1));
}

.cmod-accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 1.25rem;
  font-weight: var(--font-weight-regular);
  color: var(--color-brand-primary-600);
  transition: color .2s;
  font-family: var(--font-family-title);
}
.cmod-accordion__trigger:hover { color: var(--color-brand-primary-500); }

.cmod-accordion__trigger-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  color: var(--color-brand-primary-500);
  transition: transform .3s;
}
.cmod-accordion__item.is-open .cmod-accordion__trigger-icon { transform: rotate(45deg); }

.cmod-accordion__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height .35s var(--ease-out, ease);
}
/* Fallback ohne JS bzw. bis das Script die exakte Höhe gesetzt hat.
   js/app.js schreibt beim Öffnen scrollHeight und danach «none» — damit wird
   auch langer Inhalt nicht bei einer festen Kappung abgeschnitten. */
.cmod-accordion__item.is-open .cmod-accordion__panel { max-height: 200vh; }

.cmod-accordion__panel-inner {
  padding: 0 0 1.5rem;
  font-size: .93rem;
  line-height: 1.75;
  color: var(--ink-soft, #555);
}

/* Abstaende im Reiter-Inhalt. Der Text kommt aus dem Editor und bringt eigene
   Absaetze und Listen mit; css/base/reset.css nimmt beiden die Voreinstellung
   des Browsers. Ohne diese Regeln stand alles ohne Luft untereinander — bei
   den langen Stellenausschreibungen auf /jobs/ eine einzige Textwand.
   `:last-child` bleibt bei 0, damit unten kein doppelter Abstand zum Rahmen
   des Reiters entsteht. */
.cmod-accordion__panel-inner > :first-child { margin-top: 0; }
.cmod-accordion__panel-inner > :last-child  { margin-bottom: 0; }

.cmod-accordion__panel-inner p,
.cmod-accordion__panel-inner ul,
.cmod-accordion__panel-inner ol,
.cmod-accordion__panel-inner table,
.cmod-accordion__panel-inner blockquote { margin: 0 0 1em; }

.cmod-accordion__panel-inner ul,
.cmod-accordion__panel-inner ol { padding-left: 1.35em; }
.cmod-accordion__panel-inner ul { list-style: disc; }
/* Nummern brauchen mehr Platz: «10.» stand bei 1.35em zur Hälfte ausserhalb (ayurveda-informationen) */
.cmod-accordion__panel-inner ol { list-style: decimal; padding-left: 2.25em; }
.cmod-accordion__panel-inner li { margin-bottom: .35em; }
.cmod-accordion__panel-inner li::marker { color: var(--color-brand-primary-500); }
.cmod-accordion__panel-inner ol > li::marker { font-variant-numeric: normal; }

/* Zwischentitel brauchen oben mehr Luft als unten — sie gehoeren zum Absatz,
   der ihnen folgt, nicht zu dem darueber. */
.cmod-accordion__panel-inner h3,
.cmod-accordion__panel-inner h4,
.cmod-accordion__panel-inner h5 {
  margin: 1.6em 0 .5em;
  font-size: 1em;
  font-weight: var(--font-weight-semibold);
  color: var(--theme-text-heading, inherit);
}

.cmod-accordion__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.25rem;
}

/* Dunkle Sections: Titel und Icon müssen mitwechseln — die Trigger-Farbe ist
   ein Brand-Token, das data-theme nicht remappt. */
[data-theme="petrol"] .cmod-accordion__trigger,
[data-theme="dark"]   .cmod-accordion__trigger { color: var(--theme-text-heading); }
[data-theme="petrol"] .cmod-accordion__trigger:hover,
[data-theme="dark"]   .cmod-accordion__trigger:hover,
[data-theme="petrol"] .cmod-accordion__trigger-icon,
[data-theme="dark"]   .cmod-accordion__trigger-icon { color: var(--color-brand-secondary-500); }


/* =============================================================================
   SECTION 11 — ACCORDION (Page Builder)
   Nutzt das cmod-accordion oben; hier nur Kopf und Layout der Section.
   ============================================================================= */
/* Wie bei den anderen Sections malt die Section ihren Hintergrund selbst —
   data-theme remappt nur die Tokens. Default = paper, also unsichtbar. */
.s11-acc { background: var(--theme-bg-page); }

.s11-acc__layout { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.s11-acc__layout--zweispaltig { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); }
.s11-acc__layout--gestapelt   { grid-template-columns: minmax(0, 1fr); max-width: 52rem; }

.s11-acc__head { max-width: 46ch; }
.s11-acc__layout--zweispaltig .s11-acc__head { position: sticky; top: calc(var(--nav-h, 5rem) + 1.5rem); }

.s11-acc__title {
  font-family: var(--display);
  font-weight: var(--font-weight-regular);
  font-size: clamp(var(--font-fontSize-2xl), 3.4vw, var(--font-fontSize-4xl));
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--color-brand-primary-600);
  margin: .75rem 0 0;
  font-variation-settings: "opsz" 96;
}
[data-theme="petrol"] .s11-acc__title,
[data-theme="dark"]   .s11-acc__title { color: var(--theme-text-heading); }

.s11-acc__intro {
  font-size: var(--font-fontSize-md);
  color: var(--ink-soft);
  line-height: 1.65;
  margin-top: .875rem;
}
.s11-acc__intro p:last-child { margin-bottom: 0; }

/* Ohne Kopfbereich beginnt die Liste ohne den oberen Abstand des FAQ-Kontexts */
.s11-acc__body .cmod-accordion__list { margin-top: 0; }

@media (max-width: 980px) {
  .s11-acc__layout--zweispaltig { grid-template-columns: minmax(0, 1fr); }
  .s11-acc__layout--zweispaltig .s11-acc__head { position: static; }
}

/* =============================================================================
   MERKEN-BUTTON — .fav-btn (global, auf allen Reise-Karten und in der Ankerleiste)
   JS: js/favoriten.js
   ============================================================================= */
.fav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
  transition: color .2s var(--ease, ease), background-color .2s, transform .2s, border-color .2s;
}

.fav-btn__icon { width: 1.15rem; height: 1.15rem; flex-shrink: 0; transition: fill .2s, transform .25s var(--ease-out, ease); }

/* Icon-Variante: rundes Herz oben rechts auf der Karte */
.fav-btn--icon {
  position: absolute;
  top: .625rem;
  right: .625rem;
  z-index: 2;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-white) 88%, transparent);
  backdrop-filter: blur(6px);
  color: var(--color-brand-primary-600);
  box-shadow: 0 .125rem .5rem -0.125rem color-mix(in srgb, var(--color-black) 25%, transparent);
}

.fav-btn--icon:hover { background: var(--color-white); transform: scale(1.06); }
.fav-btn--icon.is-active { color: var(--color-brand-secondary-600); }
.fav-btn--icon.is-active .fav-btn__icon { fill: currentColor; }

/* Label-Variante in der Ankerleiste — erbt .btn, hier nur der Aktiv-Zustand */
.fav-btn--label.is-active {
  border-color: var(--color-brand-secondary-500);
  color: var(--paper);
}
.fav-btn--label.is-active .fav-btn__icon { fill: currentColor; }

/* Herz braucht einen Positionierungskontext auf der Karte */
.trip, .trip-card, .res-trip-card, .fav-card { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .fav-btn, .fav-btn__icon { transition: none; }
  .fav-btn--icon:hover { transform: none; }
}

/* Merkliste im mobilen Menü — Secondary-Button unter dem primären CTA.
   Grundform kommt aus .btn.btn--ghost (css/atoms/btn.css), hier nur Breite,
   Abstand und die Schriftfassung des Nachbar-CTAs. */
.mob-menu__fav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .6rem;
  width: 100%;
  margin-top: .75rem;
  padding: .95rem 1.5rem;
  font-size: var(--font-fontSize-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--color-white);
}
.mob-menu__fav svg { width: 1.15rem; height: 1.15rem; }
.mob-menu__fav.has-items svg { fill: var(--color-brand-secondary-500); color: var(--color-brand-secondary-500); }
.mob-menu__fav-badge {
  min-width: 1.25rem;
  padding: 0 .3rem;
  border-radius: .625rem;
  background: var(--color-brand-secondary-500);
  color: var(--color-white);
  font-size: var(--font-fontSize-xs);
  font-weight: var(--font-weight-semibold);
  text-align: center;
}

/* Merkliste-Hinweis im Anfrageformular */
.anf-merkliste {
  padding: .875rem 1rem;
  border-radius: var(--border-radius-medium);
  background: color-mix(in srgb, var(--color-brand-secondary-500) 10%, transparent);
  border-left: 3px solid var(--color-brand-secondary-500);
}
.anf-merkliste[hidden] { display: none; }
.anf-merkliste__lbl {
  display: block;
  font-size: var(--font-fontSize-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: var(--font-weight-medium);
  color: var(--color-brand-secondary-600);
}
.anf-merkliste__txt { margin: .25rem 0 0; font-size: var(--font-fontSize-sm); color: var(--ink); line-height: 1.5; }


/* =============================================================================
   LANGTEXT — .article-body / .rich-text (geteilte Komponente)
   Genutzt von der Blog-Einzelansicht (single.php) und vom Page-Builder-Block
   «12 — Textabschnitt» (s12_text). Die Zeilenlänge begrenzt der jeweilige
   Container, nicht diese Regeln.
   ============================================================================= */
.article-body,
.rich-text { min-width: 0; }

.article-body h2,
.rich-text h2 {
  font-family: var(--display);
  font-weight: var(--font-weight-bold);
  font-size: clamp(var(--font-fontSize-xl), 2.8vw, var(--font-fontSize-2xl));
  color: var(--theme-text-heading);
  margin: 2.5rem 0 1rem;
  line-height: 1.15;
  letter-spacing: -.01em;
  font-variation-settings: "opsz" 72;
}

.article-body h3,
.rich-text h3 {
  font-family: var(--display);
  font-weight: var(--font-weight-bold);
  font-size: clamp(var(--font-fontSize-lg), 2vw, var(--font-fontSize-xl));
  color: var(--theme-text-heading);
  margin: 2rem 0 .75rem;
  line-height: 1.2;
  font-variation-settings: "opsz" 48;
}

/* h4 gibt es im Blog nicht, Rechtstexte gliedern aber tiefer */
.article-body h4,
.rich-text h4 {
  font-size: var(--font-fontSize-md);
  font-weight: var(--font-weight-semibold);
  color: var(--theme-text-heading);
  margin: 1.75rem 0 .5rem;
  line-height: 1.3;
}

.article-body p,
.rich-text p { font-size: var(--font-fontSize-lg); line-height: 1.8; color: var(--theme-text-body); margin: 0 0 1.5rem; }

/* Der Reset setzt global list-style: none — im Langtext gehören die
   Aufzählungszeichen zurück, sonst verliert eine Liste ihre Struktur. */
.article-body ul, .article-body ol,
.rich-text ul, .rich-text ol { padding-left: 1.5rem; margin: 0 0 1.5rem; }

.article-body ul,
.rich-text ul { list-style: disc; }

.article-body ol,
.rich-text ol { list-style: decimal; }

/* Verschachtelte Ebenen — bei AGB und Datenschutz üblich */
.article-body ul ul, .rich-text ul ul { list-style: circle; }
.article-body ul ul ul, .rich-text ul ul ul { list-style: square; }
.article-body ol ol, .rich-text ol ol { list-style: lower-alpha; }
.article-body ol ol ol, .rich-text ol ol ol { list-style: lower-roman; }

.article-body li > ul, .article-body li > ol,
.rich-text li > ul, .rich-text li > ol { margin: .4rem 0 .6rem; }

.article-body li::marker,
.rich-text li::marker { color: var(--color-brand-primary-500); }

.article-body li,
.rich-text li { font-size: var(--font-fontSize-base); line-height: 1.75; color: var(--theme-text-body); margin-bottom: .4rem; }

/* Fliesstext-Links: Farbe allein genuegt nicht — sie ist als einziges Merkmal
   fuer Farbfehlsichtige und bei schwachem Kontrast nicht verlaesslich, und
   css/base/reset.css nimmt `a` die Unterstreichung global weg. Die frueheren
   `text-decoration-thickness` und `-offset` an .rich-text liefen deshalb ins
   Leere: ohne `text-decoration` gab es nichts, dessen Staerke zu setzen waere.

   Die Liste nennt die Fliesstext-Behaelter ausdruecklich. Eine Regel auf alle
   `a` zurueckzudrehen, wuerde auch Karten, Knoepfe und Navigationen treffen —
   dort ist der Link die ganze Flaeche und eine Unterstreichung falsch.

   `:not(.btn)` ist aus demselben Grund noetig: in den Reiseinfo-Reitern und in
   den Akkordeons stehen Knoepfe **innerhalb** des Fliesstextes. Ohne die
   Ausnahme war «Zum Visum Pakistan» auf der gefuellten Flaeche unterstrichen.
   Die Ausnahme steht im Selektor und nicht als spaetere Gegenregel, weil
   `a.btn` dieselbe Spezifitaet haette wie `.rich-text a` — dann entschiede die
   Reihenfolge im Stylesheet, und die haelt beim naechsten Umbau niemand ein.

   Ueber dieser Liste stand frueher ein blosses `.article-body a` — ohne den
   Vorbehalt und damit genau die Regel, die der Rest hier vermeidet. Sie
   unterstrich den Knopf «Zurueck zur Uebersicht» unter jedem Blogbeitrag.
   Weggefallen; `.article-body a:not(.btn)` in der Liste deckt denselben Fall
   ab. Beim Ergaenzen eines Behaelters also nie die Ausnahme vergessen.

   Die Gutenberg-Knoepfe (`.wp-block-button__link`) tragen kein `.btn` und
   fielen deshalb durch: (0,2,1) schlug `.wp-block-button > .wp-block-button__link`
   (0,2,0) aus atoms/btn.css — Saffron-Flaeche mit Petrol-Schrift, unterstrichen
   (gemessen in «Winter in Japan»). Sie stehen deshalb mit in der Ausnahme. */
.rich-text a:not(.btn, .wp-block-button__link),
.article-body a:not(.btn, .wp-block-button__link),
.rg-info__wysiwyg a:not(.btn, .wp-block-button__link),
.rg-media-split__wysiwyg a:not(.btn, .wp-block-button__link),
.rd-reiseinfo__wysiwyg a:not(.btn, .wp-block-button__link),
.s11-acc__intro a:not(.btn, .wp-block-button__link),
.cmod-accordion__panel a:not(.btn, .wp-block-button__link) {
  color: var(--color-brand-primary-500);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .1875rem;
  /* Unterlaengen nicht durchstreichen */
  text-decoration-skip-ink: auto;
  transition: color .15s;
}

.rich-text a:not(.btn, .wp-block-button__link):hover,
.article-body a:not(.btn, .wp-block-button__link):hover,
.rg-info__wysiwyg a:not(.btn, .wp-block-button__link):hover,
.rg-media-split__wysiwyg a:not(.btn, .wp-block-button__link):hover,
.rd-reiseinfo__wysiwyg a:not(.btn, .wp-block-button__link):hover,
.s11-acc__intro a:not(.btn, .wp-block-button__link):hover,
.cmod-accordion__panel a:not(.btn, .wp-block-button__link):hover {
  color: var(--color-brand-primary-700);
  text-decoration-thickness: 2px;
}

.article-body strong,
.rich-text strong { color: var(--theme-text-heading); font-weight: var(--font-weight-semibold); }

.article-body img,
.rich-text img { width: 100%; border-radius: var(--r); margin: 1.5rem 0; display: block; }

.article-body figcaption,
.rich-text figcaption { font-size: var(--font-fontSize-sm); color: var(--theme-text-muted); letter-spacing: .02em; margin-top: -.75rem; margin-bottom: 1.5rem; text-align: center; }

.article-body hr,
.rich-text hr { border: none; border-top: 1px solid var(--theme-border-default); margin: 2.5rem 0; }

.article-body blockquote,
.rich-text blockquote {
  border-left: 2px solid var(--color-brand-primary-500);
  padding: 1.25rem 0 1.25rem 1.75rem;
  margin: 2rem 0;
}

.article-body blockquote p,
.rich-text blockquote p {
  font-family: var(--display);
  font-size: clamp(var(--font-fontSize-lg), 2vw, var(--font-fontSize-2xl));
  color: var(--theme-text-heading);
  font-weight: var(--font-weight-regular);
  line-height: 1.45;
  margin: 0;
  font-variation-settings: "opsz" 48;
}

.article-body blockquote cite,
.rich-text blockquote cite { display: block; font-size: var(--font-fontSize-xs); color: var(--theme-text-muted); letter-spacing: .12em; text-transform: uppercase; margin-top: .75rem; font-style: normal; }

/* Tabellen kommen in AGB und Datenschutz häufig vor, im Blog gab es sie nicht */
.article-body table,
.rich-text table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.5rem;
  font-size: var(--font-fontSize-sm);
  display: block;
  overflow-x: auto;
}

.article-body th, .article-body td,
.rich-text th, .rich-text td {
  border-bottom: 1px solid var(--theme-border-default);
  padding: .625rem .75rem;
  text-align: left;
  vertical-align: top;
}

.article-body th,
.rich-text th { font-weight: var(--font-weight-semibold); color: var(--theme-text-heading); }

.article-body > :first-child,
.rich-text > :first-child { margin-top: 0; }

.article-body > :last-child,
.rich-text > :last-child { margin-bottom: 0; }


/* =============================================================================
   SECTION 12 — TEXTABSCHNITT (Page Builder)
   Langtext mit begrenzter Zeilenlänge — für Datenschutz, AGB, Impressum.
   ============================================================================= */
.s12-text { background: var(--theme-bg-page); }

/* Zeilenlänge in ch: das Mass folgt der Schrift, nicht der Fensterbreite.
   62ch ≈ 70 Zeichen inkl. Leerraum — der Lesbarkeits-Korridor für Fliesstext. */
.s12-text__inner { max-width: 62ch; }
.s12-text__inner--mittel { max-width: 72ch; }
.s12-text__inner--breit  { max-width: 82ch; }
.s12-text__inner--zentriert { margin-inline: auto; }

.s12-text__head { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }

.s12-text__title {
  font-family: var(--display);
  font-weight: var(--font-weight-regular);
  font-size: clamp(var(--font-fontSize-2xl), 3.6vw, var(--font-fontSize-4xl));
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--color-brand-primary-600);
  margin: .7rem 0 0;
  font-variation-settings: "opsz" 96;
}
[data-theme="petrol"] .s12-text__title,
[data-theme="dark"]   .s12-text__title { color: var(--theme-text-heading); }

.s12-text__stand {
  font-size: var(--font-fontSize-sm);
  color: var(--muted);
  margin: .75rem 0 0;
}


/* =============================================================================
   KUNDENSTIMMEN — Section 13 + Section auf den Reise-Detailseiten
   PHP: template-parts/kundenstimmen.php · sections/s13_kundenstimmen.php
   ============================================================================= */
.ks-section { background: var(--theme-bg-page); }

.ks-section__head { max-width: 52ch; margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }

.ks-section__title {
  font-family: var(--display);
  font-weight: var(--font-weight-regular);
  font-size: clamp(var(--font-fontSize-2xl), 3.6vw, var(--font-fontSize-4xl));
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--color-brand-primary-600);
  margin: .7rem 0 0;
  font-variation-settings: "opsz" 96;
}
[data-theme="petrol"] .ks-section__title,
[data-theme="dark"]   .ks-section__title { color: var(--theme-text-heading); }

.ks-section__intro { font-size: var(--font-fontSize-md); color: var(--ink-soft); line-height: 1.6; margin-top: .875rem; }
.ks-section__intro p:last-child { margin-bottom: 0; }

/* ── Liste ─────────────────────────────────────────────────────────────────── */
.ks-liste--grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  align-items: start;
}

.ks-liste--einzeln { max-width: 62ch; }

/* ── Slider ────────────────────────────────────────────────────────────────
   Scroll-Snap statt Transform: Wischen, Trackpad und Tastatur funktionieren
   damit von selbst, ohne JS für die Bewegung. Das JS steuert nur die Pfeile. */
.ks-slider { position: relative; }

.ks-slider__track {
  /* overflow-y MUSS explizit gesetzt werden: laut CSS-Spezifikation wird
     `visible` auf der einen Achse zu `auto`, sobald die andere nicht `visible`
     ist. Ohne diese Zeile entsteht ein vertikaler Scrollbereich — die Karten
     liessen sich im Slider ein paar Pixel verschieben und wurden oben
     abgeschnitten. */
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* Platz für Fokusring und Schatten, den overflow: hidden sonst kappt */
  padding: .5rem;
  margin: -.5rem;
}
.ks-slider__track::-webkit-scrollbar { display: none; }
.ks-slider__track:focus-visible { outline: 2px solid var(--color-brand-primary-500); outline-offset: .25rem; }

.ks-liste--slider {
  display: flex;
  gap: clamp(1rem, 2vw, 1.5rem);
  /* flex-start statt stretch: sonst zieht eine aufgeklappte Karte alle
     anderen auf ihre Höhe mit. Im gekürzten Zustand sind die Karten durch
     die begrenzte Zitathöhe ohnehin fast gleich hoch. */
  align-items: flex-start;
}

/* Karten behalten eine lesbare Mindestbreite; der angeschnittene Rest zeigt,
   dass es weitergeht. */
.ks-liste--slider .ks-card {
  /* Breiter als im Grid: lange Zitate brauchen Zeilenraum, sonst wird die
     Karte zur schmalen Textsäule. Bei 1200px Shell passen ~2,5 Karten. */
  flex: 0 0 clamp(19rem, 34%, 27rem);
  scroll-snap-align: start;
}

.ks-slider__nav {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  margin-top: 1.25rem;
}

.ks-slider__btn {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--hair);
  background: none;
  color: var(--color-brand-primary-600);
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s, opacity .2s;
}
.ks-slider__btn svg { width: 1.125rem; height: 1.125rem; }
.ks-slider__btn:hover:not(:disabled) {
  background: var(--color-brand-primary-600);
  border-color: var(--color-brand-primary-600);
  color: var(--color-white);
}
.ks-slider__btn:disabled { opacity: .35; cursor: default; }

[data-theme="petrol"] .ks-slider__btn,
[data-theme="dark"]   .ks-slider__btn { border-color: color-mix(in srgb, var(--color-white) 30%, transparent); color: var(--theme-text-heading); }
[data-theme="petrol"] .ks-slider__btn:hover:not(:disabled),
[data-theme="dark"]   .ks-slider__btn:hover:not(:disabled) {
  background: var(--color-brand-secondary-500);
  border-color: var(--color-brand-secondary-500);
  color: var(--color-white);
}

@media (max-width: 780px) {
  /* Eine Karte pro Ansicht, die nächste blitzt an — signalisiert das Wischen */
  .ks-liste--slider .ks-card { flex: 0 0 min(86%, 22rem); }
}

@media (prefers-reduced-motion: reduce) {
  .ks-slider__track { scroll-behavior: auto; }
}

/* ── Karte ─────────────────────────────────────────────────────────────────── */
.ks-card {
  /* --ks-bg wird vom Verlauf über dem gekürzten Zitat gebraucht und muss
     deshalb als Variable verfügbar sein, nicht nur als background. */
  --ks-bg: var(--paper, #fff);
  /* Zitatlinie in der Regionsfarbe — --ir-region-primary setzt
     insight_inject_region_colors() pro Reise auf :root */
  --ks-akzent: var(--ir-region-primary, var(--color-brand-primary-500));
  --ks-zitat-pad: 0rem;

  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: clamp(1.375rem, 3vw, 1.875rem);
  background: var(--ks-bg);
  border: 1px solid var(--hair-soft);
  border-radius: var(--r);
}

[data-theme="petrol"] .ks-card,
[data-theme="dark"]   .ks-card {
  --ks-bg: color-mix(in srgb, var(--color-white) 7%, var(--theme-bg-page));
  /* Eine dunkle Regionsfarbe verschwindet auf dunklem Grund */
  --ks-akzent: var(--color-brand-secondary-500);
  border-color: color-mix(in srgb, var(--color-white) 14%, transparent);
}

.ks-card__sterne { display: flex; gap: .15rem; color: var(--color-brand-secondary-500); }
.ks-card__sterne svg { width: 1rem; height: 1rem; }

.ks-card__zitat {
  margin: 0;
  padding-left: var(--ks-zitat-pad, 1.25rem);
  border-left: 0px;
  font-family: var(--body);
  font-size: 1rem;
  font-style: italic;
  /* Die Zeilenhöhe steht als Variable, weil die Kappung darauf rechnet —
     zwei getrennte Werte liefen beim nächsten Feinschliff auseinander. */
  --ks-lh: 1.5;
  line-height: var(--ks-lh);
  color: var(--color-brand-primary-600);
  font-variation-settings: "opsz" 48;
  position: relative;
}
[data-theme="petrol"] .ks-card__zitat,
[data-theme="dark"]   .ks-card__zitat { color: var(--theme-text-heading); }

/* Anführungszeichen setzt die Gestaltung, nicht die Redaktion */
/* `wpautop` packt das Zitat in <p>, und die globale Regel `p { font-size }`
   aus base/typography.css ist eine **direkte Deklaration am Element** — sie
   schlägt jeden vom Blockquote geerbten Wert (dieselbe Falle wie bei
   .dest-card__name, siehe LEARNINGS.md). Die Zitat-Typografie erreichte den
   Text deshalb nie: gesetzt 20px/1.5, gerendert 16px/1.6. Ohne diese Zeile
   rechnet auch die Kappung unten falsch — sie misst in `em` des Blockquote,
   die Zeilen stehen aber in der Grösse des Absatzes. */
.ks-card__zitat p { font-size: inherit; line-height: inherit; }
.ks-card__zitat p { margin: 0 0 .75rem; }
.ks-card__zitat p:last-child { margin-bottom: 0; }
.ks-card__zitat p:first-child::before { content: "\201E"; }
.ks-card__zitat p:last-child::after   { content: "\201C"; }

.ks-liste--einzeln .ks-card__zitat {
  font-size: 1rem;
  --ks-lh: 1.4;
}
/* Grössere Schrift, höhere Zeilen — der Verlauf zieht mit. Der Wert steht an
   der Liste, nicht am Zitat: gebraucht wird er im ::after des Wrappers, und
   Custom Properties vererben nach unten, nicht zum Elternteil hinauf. */
.ks-liste--einzeln { --ks-fade: 2.8rem; }

/* Lange Zitate in Karten kürzen: die längste Stimme würde sonst die Höhe aller
   Karten bestimmen. Der vollständige Text bleibt im Markup und ist einen Klick
   entfernt — nichts wird serverseitig abgeschnitten. */
.ks-card__zitat-wrap { position: relative; }

/* Gekürzt über max-height, nicht über -webkit-line-clamp: line-clamp schaltet
   `display` um und ist damit nicht animierbar. Gerechnet wird aus der
   Zeilenzahl und der eigenen Zeilenhöhe (3 × 1.5em), damit eine geänderte
   Zeilenhöhe die Kappung nicht verschiebt; js/app.js setzt beim Aufklappen die
   konkrete Höhe und danach `none`, damit auch nachträgliche Reflows nichts
   abschneiden. Gilt für alle drei Darstellungen — auch das einzelne grosse
   Zitat lief sonst über sieben Zeilen. */
.ks-card__zitat {
  --ks-zeilen: 3;
  max-height: calc(var(--ks-zeilen) * var(--ks-lh) * 1em);
  overflow: hidden;
  transition: max-height .45s var(--ease-out, ease);
}

@media (prefers-reduced-motion: reduce) {
  .ks-card__zitat { transition: none; }
}

/* Der Verlauf zeigt, dass der Text weitergeht — er liegt in der Kartenfarbe
   über den letzten Zeilen. Nur sichtbar, solange gekürzt ist und es wirklich
   etwas zu holen gibt (Klasse setzt js/app.js). */
.ks-card__zitat-wrap.hat-mehr:not(.is-offen)::after {
  content: "";
  position: absolute;
  /* Links um die Zitatlinie eingerückt: sie soll durchlaufen und nicht
     zusammen mit dem Text ausfaden */
  inset: auto 0 0 calc(var(--ks-zitat-pad, 1.25rem) + 2px);
  /* Knapp eine Zeile — bei drei sichtbaren Zeilen läge der frühere Wert von
     4.5rem über zwei davon. Auch die Kurve ist flacher: der Verlauf deckt
     erst im letzten Viertel wirklich ab, sonst wäre die dritte Zeile grau
     statt lesbar und von drei Zeilen blieben zwei. */
  height: var(--ks-fade, 1.9rem);
  pointer-events: none;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--ks-bg) 0%, transparent) 0%,
    color-mix(in srgb, var(--ks-bg) 25%, transparent) 55%,
    color-mix(in srgb, var(--ks-bg) 85%, transparent) 85%,
    var(--ks-bg) 100%);
}

/* Auslöser: kleiner Chevron unten rechts über dem Verlauf. Zusätzlich ist die
   gekürzte Zitatfläche selbst klickbar (js/app.js) — der Verlauf allein wäre
   als Bedienung nicht eindeutig. */
.ks-card__mehr {
  position: absolute;
  right: -0.25rem;
  bottom: -0.5rem;
  z-index: 1;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background: color-mix(in srgb, var(--ks-akzent) 12%, var(--ks-bg));
  color: var(--ks-akzent);
  transition: background-color .2s, color .2s, transform .25s var(--ease-out, ease);
}
.ks-card__mehr[hidden] { display: none; }
.ks-card__mehr svg { width: 1rem; height: 1rem; }
.ks-card__mehr:hover { background: var(--ks-akzent); color: var(--color-white); }

.ks-card__zitat-wrap.is-offen .ks-card__mehr { transform: rotate(180deg); }

/* Gekürztes Zitat ist als Ganzes anklickbar */
.ks-card__zitat-wrap.hat-mehr:not(.is-offen) .ks-card__zitat { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .ks-card__mehr { transition: background-color .2s, color .2s; }
}

.ks-card__person {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: auto;
  padding-top: .875rem;
  border-top: 1px solid var(--hair-soft);
}

.ks-card__foto,
.ks-card__initialen {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}

.ks-card__initialen {
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--color-brand-primary-500) 12%, transparent);
  color: var(--color-brand-primary-600);
  font-size: var(--font-fontSize-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: .04em;
}
[data-theme="petrol"] .ks-card__initialen,
[data-theme="dark"]   .ks-card__initialen {
  background: color-mix(in srgb, var(--color-white) 12%, transparent);
  color: var(--theme-text-heading);
}

.ks-card__meta { display: flex; flex-direction: column; min-width: 0; }

.ks-card__name { font-size: var(--font-fontSize-sm); font-weight: var(--font-weight-medium); color: var(--ink); }

.ks-card__kontext {
  font-size: var(--font-fontSize-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 600px) {
  .ks-liste--grid { grid-template-columns: 1fr; }
}


/* =============================================================================
   HERO-KARTEN — nutzen die echten Kartendesigns
   Reise → .trip (css/pages/reisefinder.css), Destination → .dest-card (oben).
   Hier nur Grösse und Verhalten im Karussell.
   ============================================================================= */
/* `width` zusätzlich zu `flex-basis`: die Kartenspalte des Hero steht auf
   `auto`, ihre Breite kommt also aus dem Inhalt. Chromium rechnet dafür mit
   dem `flex-basis`, Firefox mit der Inhaltsbreite der Karte — und die ist 0,
   weil der Kachelinhalt absolut positioniert ist. Firefox gab der Spalte
   deshalb nur die beiden Lücken (gemessen 40px statt 952px bei 1440px), die
   erste Karte ragte rechts aus dem Bild, die übrigen waren ausgeblendet. */
.hero__card {
  flex: 0 0 clamp(15rem, 22vw, 19rem);
  width: clamp(15rem, 22vw, 19rem);
  position: relative;
}

/* Die aktive Karte tritt hervor — vergrössert aus ihrer Mitte (50/50), damit
   sie oben und unten gleich weit über die Reihe hinauswächst und alle Karten
   auf einer Mittelachse stehen. Alle Karten bleiben voll sichtbar. */
.hero__card.is-featured {
  transform: scale(1.06);
  transform-origin: 50% 50%;
  z-index: 2;
  box-shadow: 0 2rem 4rem -1.25rem color-mix(in srgb, var(--color-black) 60%, transparent);
}

/* Hover mit eigenen Regeln: `.trip:hover` und `.dest-card:hover` verlieren gegen
   `.hero__card.is-featured` (0,2,0 gegen 0,1,1) — auf der aktiven Karte passierte
   deshalb nichts. Die Transition steht hier mit, damit sie nicht von der
   später geladenen reisefinder.css überschrieben wird. */
.hero__card,
.hero__card.is-featured {
  transition: transform .42s var(--ease-out, ease), box-shadow .42s var(--ease-out, ease),
              opacity .42s var(--ease-out, ease);
}

/* Karten ausserhalb des Sichtfensters blenden aus, statt an der Clip-Kante
   abzureissen. Nötig, weil die Malfläche für die Schatten breiter ist als der
   Weg, den eine Karte pro Schritt zurücklegt: sonst stünde links ein Streifen
   der ausgefahrenen und — ab vier Karten — rechts einer der noch nicht
   erreichten Karte. Welche Karten das sind, rechnet front-page.php aus. */
.hero__card.is-off { opacity: 0; pointer-events: none; }

.hero__card:hover {
  transform: translateY(-0.75rem);
  z-index: 3;
}

.hero__card.is-featured:hover {
  transform: scale(1.09);
  box-shadow: 0 2.5rem 4.5rem -1.25rem color-mix(in srgb, var(--color-black) 65%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .hero__card, .hero__card.is-featured { transition: none; }
  .hero__card:hover, .hero__card.is-featured:hover { transform: none; }
  .hero__card.is-featured { transform: none; }
}

/* =============================================================================
   HERO-KACHEL — ein Design für Destinationen und Reisen
   Grundlage ist die Destinations-Karte: Foto, Verlauf, Eyebrow oben, Titel
   unten. Die Reise-Kachel ergänzt nur die Dauer als Badge und eine Zeile mit
   Preis und Reiseart.
   ============================================================================= */
.hero-tile {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--r);
  overflow: hidden;
  isolation: isolate;
  background: var(--color-brand-primary-700) center / cover no-repeat;
  box-shadow: 0 1.25rem 2.5rem -1rem color-mix(in srgb, var(--color-black) 45%, transparent);
}

/* Verlauf, damit die Beschriftung auf jedem Bild lesbar bleibt */
.hero-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--color-brand-primary-900, #052B2D) 10%, transparent) 25%,
    color-mix(in srgb, var(--color-brand-primary-900, #052B2D) 88%, transparent) 100%);
}

.hero-tile__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.125rem;
  text-decoration: none;
}

.hero-tile__body { display: flex; flex-direction: column; gap: .3rem; }

/* Farbe direkt an der Klasse: css/base/reset.css setzt für Überschriften eine
   eigene und schlägt damit jeden geerbten Wert. Zwei Zeilen Maximum — die
   Titel der Reisen sind deutlich länger als Ländernamen. */
.hero-tile__name {
  font-family: var(--display);
  font-weight: var(--font-weight-regular);
  font-size: clamp(1.25rem, 1.8vw, 1.6rem);
  line-height: 1.15;
  color: var(--color-white);
  font-variation-settings: "opsz" 48;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Reise- und Beitragstitel sind länger als Ländernamen — eine Stufe kleiner,
   damit zwei Zeilen reichen. */
.hero-tile--reise .hero-tile__name,
.hero-tile--beitrag .hero-tile__name { font-size: clamp(1.1rem, 1.5vw, 1.35rem); }

.hero-tile__meta {
  display: flex;
  align-items: center;
  gap: .45rem;
  line-height: 1.4;
  font-size: var(--font-fontSize-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-white) 82%, transparent);
}

.hero-tile__sep { opacity: .55; }

@media (max-width: 980px) {
  .hero__card { flex: 0 0 min(70vw, 17rem); width: min(70vw, 17rem); }
}