/* =============================================================================
   REISE-DETAIL — Seitenspezifische Styles
   Hero, Facts-Sidebar, Tagesprogramm (Tabs + Listenansicht), Preise, Leistungen.
   ============================================================================= */
/* index.css kommt als «insight-shared» auf jeder Seite — kein @import mehr,
   der lud die Datei ein zweites Mal ohne Version (SEO-Audit 2026-10-08, SEO-34). */


/* =============================================================================
   DETAIL HERO
   ============================================================================= */
.rd-hero {
  position: relative; min-height: min(680px, 82vh);
  display: flex; align-items: flex-end;
  color: #fff; background: var(--color-brand-primary-600);
  background-size: cover; background-position: center;
  isolation: isolate; overflow: hidden;
}
/*
 * Hero-Abdeckung in zwei Lagen, beide über Bild UND Video:
 *   z-index 1 = Unschärfe-Verlauf, z-index 2 = Farb-/Dunkelverlauf.
 * Die z-Werte stehen ausdrücklich da, weil ein Pseudo-Element sonst der
 * DOM-Reihenfolge folgt — ::before läge dann unter .rd-hero__video und würde
 * ein Video gar nicht erfassen.
 */

/* Unschärfe-Verlauf: nur im unteren Bereich, wo Titel, Subline und Fakten stehen.
   Die Maske läuft über mehrere Stützstellen weich aus — eine harte lineare Rampe
   zeichnet an der Oberkante sonst eine sichtbare Kante. */
.rd-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  -webkit-backdrop-filter: blur(1rem);
  backdrop-filter: blur(1rem);
  -webkit-mask-image: linear-gradient(to top,
    rgba(0, 0, 0, 1)   0%,
    rgba(0, 0, 0, 1)   18%,
    rgba(0, 0, 0, .45) 34%,
    transparent        52%);
  mask-image: linear-gradient(to top,
    rgba(0, 0, 0, 1)   0%,
    rgba(0, 0, 0, 1)   18%,
    rgba(0, 0, 0, .45) 34%,
    transparent        52%);
}

/*
 * Farbverlauf — ein einziger linearer Verlauf von unten nach oben, deckungs-
 * gleich mit der Unschärfe-Maske darunter. Die obere Bildhälfte bleibt frei,
 * unten sorgt eine leichte Abdunklung für Lesbarkeit: eine neutrale Schwarzlage
 * für den Kontrast, darüber ein Hauch der Regionsfarbe
 * (--ir-region-primary-dark, gesetzt in
 * functions.php::insight_inject_region_colors(), Fallback Petrol Deep #0E4A4D)
 * für die Farbkodierung. Der frühere diagonale Verlauf von links oben ist weg.
 */
.rd-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  background:
    /* Regionsfarbe ZUOBERST — sie trägt die Farbkodierung und muss deshalb
       über der neutralen Lage liegen, sonst schluckt das Schwarz den Ton. */
    linear-gradient(180deg,
      transparent 40%,
      color-mix(in srgb, var(--ir-region-primary-dark) 14%, transparent) 72%,
      color-mix(in srgb, var(--ir-region-primary-dark) 34%, transparent) 100%),
    /* neutrale Lage darunter — sie trägt den Kontrast */
    linear-gradient(180deg,
      transparent 40%,
      rgba(0, 0, 0, .18) 72%,
      rgba(0, 0, 0, .42) 100%);
}
.rd-hero__video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  pointer-events: none;
}
.rd-hero__inner { position: relative; z-index: 3; width: 100%; padding: calc(var(--nav-h) + 4rem) 0 3rem; }
.rd-hero__crumb {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  font-size: 0.6875rem; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255, 255, 255, .6); margin-bottom: 1.5rem;
}
.rd-hero__crumb a { color: rgba(255, 255, 255, .85); transition: color .2s; }
.rd-hero__crumb a:hover { color: var(--color-brand-secondary-500); }
.rd-hero__eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: 0.6875rem; letter-spacing: .15em; text-transform: uppercase;
  background: var(--theme-accent);
  border-radius: 0.5em; padding: 0 0.5rem;
  color: var(--theme-text-body); font-weight: var(--font-weight-bold); margin-bottom: 1rem;
}
/* Der untere Abstand stand vorher an .rd-hero__sub — seit die Subheadline aus
   dem Hero raus ist (die Intro-Section trägt sie), hält ihn die H1. */
.rd-hero__title {
  font-family: var(--display); font-weight: var(--font-weight-regular);
  font-size: clamp(2.4rem, 6vw, 5rem); line-height: 1.02;
  letter-spacing: -.015em; font-variation-settings: "opsz" 144;
  color: #fff; max-width: 25ch;
}
.rd-hero__facts { display: flex; flex-wrap: wrap; gap: .55rem; }
.rd-fact {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .55rem .95rem; border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--border-radius-round); backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, .07);
  font-size: var(--font-fontSize-xs); font-weight: var(--font-weight-medium); letter-spacing: .08em;
}
.rd-fact svg { width: 14px; height: 14px; color: var(--color-brand-secondary-500); flex-shrink: 0; }


/* =============================================================================
   ANKER-LEISTE
   ============================================================================= */
.rd-anchors {
  position: sticky;
  top: var(--anchors-top, 72px); /* JS setzt --anchors-top: navH → 0 wenn Nav versteckt */
  z-index: 50;
  background: var(--theme-bg-page);
  border-bottom: 1px solid var(--hair-soft);
}
/* Fläche von der Oberkante der Leiste bis zum Fensterrand. Ist die Hauptnav
   eingeblendet, klebt die Leiste --anchors-top tiefer; die Nav-Pille ist
   niedriger und rund, und durch den Spalt blitzte beim Hochscrollen der
   Inhalt. Die Fläche liegt unter der Nav (z-index 50 < 100), die Pille bleibt
   also sichtbar. Nur bei `.is-stuck` (js/app.js) — im Ruhezustand läge sie
   sonst über dem unteren Rand des Hero. Bei versteckter Nav ist
   --anchors-top 0, die Fläche damit 0 hoch. */
.rd-anchors::before {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 100%;
  height: var(--anchors-top, 0px);
  background: var(--theme-bg-page);
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
}
.rd-anchors.is-stuck::before { opacity: 1; }
.rd-anchors__row {
  display: flex; align-items: center; gap: .25rem;
  overflow-x: auto; scrollbar-width: none;
}
.rd-anchors__row::-webkit-scrollbar { display: none; }
.rd-anchors__link {
  padding: 1.15rem 1rem; white-space: nowrap;
  font-size: 0.71875rem; letter-spacing: .16em; text-transform: uppercase; font-weight: var(--font-weight-medium);
  color: var(--ink-soft); border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.rd-anchors__link:hover { color: var(--color-brand-primary-500); }
.rd-anchors__link.is-active { color: var(--color-brand-primary-600); border-color: var(--color-brand-secondary-500); }
.rd-anchors__actions {
  display: flex; align-items: center; gap: .5rem;
  margin-left: auto; flex-shrink: 0;
}
/* Scroll-Pfeile: Verlauf über dem abgeschnittenen Rand, darin ein runder
   Knopf. Erscheinen nur, wenn die Leiste in diese Richtung weitergeht
   (js/modules/anchors-scroll.js setzt .can-scroll-prev/-next). */
.rd-anchors__arrow {
  position: absolute; top: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 3.5rem;
  border: none; background: none; cursor: pointer;
  color: var(--color-brand-primary-600);
  opacity: 0; pointer-events: none;
  transition: opacity .2s;
}
.rd-anchors__arrow--prev { left: 0; justify-content: flex-start; padding-left: .5rem;
  background: linear-gradient(to right, var(--theme-bg-page) 60%, transparent); }
.rd-anchors__arrow--next { right: 0; justify-content: flex-end; padding-right: .5rem;
  background: linear-gradient(to left,  var(--theme-bg-page) 60%, transparent); }
.rd-anchors__arrow svg {
  width: 2rem; height: 2rem; padding: .4375rem; flex-shrink: 0;
  border: 1px solid var(--hair); border-radius: 50%;
  background: var(--theme-bg-page); box-shadow: var(--shadow-sm);
  transition: border-color .2s, color .2s;
}
.rd-anchors__arrow:hover svg { border-color: var(--color-brand-primary-500); color: var(--color-brand-primary-500); }
.rd-anchors.can-scroll-prev .rd-anchors__arrow--prev { opacity: 1; pointer-events: auto; }
.rd-anchors.can-scroll-next .rd-anchors__arrow--next { opacity: 1; pointer-events: auto; }

@media (max-width: 720px) {
  .rd-anchors__link { padding: .9rem .75rem; font-size: 0.65625rem; }
  .rd-anchors__actions { gap: .4rem; }
}

/* =============================================================================
   ÜBERBLICK — Intro + Facts-Sidebar
   ============================================================================= */
.rd-intro { background: var(--theme-bg-page); }
.rd-intro__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 360px;
  gap: clamp(2.5rem, 5vw, 5rem); align-items: start;
}
.rd-intro__title {
  font-family: var(--display); font-weight: var(--font-weight-regular);
  font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.08;
  letter-spacing: -.01em; color: var(--color-brand-primary-600);
  font-variation-settings: "opsz" 96; margin: .85rem 0 1.4rem; max-width: 22ch;
}
/* Sterne als hochgestellter Zusatz am Titel: em statt der 1rem aus der
   Grundregel in index.css, damit sie mit der Ueberschrift wachsen, und auf
   Versalhoehe angehoben statt auf der Grundlinie. So lesen sie sich als
   Klassifizierung und nicht als angefangene zweite Textzeile.
   Zusammen mit .ir-nowrap um das letzte Wort (ir_titel_mit_sternen() in
   functions.php) stehen sie nie allein in einer Zeile. */
.rd-intro__title .ir-sterne {
  margin-left: .22em;
  gap: .06em;
  vertical-align: .1em;
}
.rd-intro__title .ir-sterne svg { width: .34em; height: .34em; }

.rd-intro__text { font-size: clamp(.97rem, 1.08vw, 1.05rem); line-height: 1.72; color: var(--ink-soft); margin: 0 0 1rem; max-width: 58ch; }
/* Absätze aus dem WYSIWYG-Feld «Beschreibung» — der Reset nimmt ihnen sonst jeden Abstand */
.rd-intro__text > * + * { margin-top: var(--spacer-small); }

.rd-highlights { margin: 2.5rem 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: .85rem 1.75rem; }
.rd-highlights li {
  display: flex; gap: .75rem; align-items: flex-start;
  font-size: .93rem; line-height: 1.5; color: var(--ink-soft);
}
.rd-highlights svg { width: 17px; height: 17px; color: var(--color-brand-secondary-600); flex-shrink: 0; margin-top: .12rem; }

/* Facts Card — sticky Buchungsbox */
.rd-card {
  position: sticky; top: calc(var(--nav-h) + 1.25rem);
  background: var(--paper); border: 1px solid var(--hair);
  border-radius: var(--r);
  /* overflow: visible — Badge überragt die Oberkante */
  box-shadow: 0 24px 55px -30px rgba(14, 74, 77, .35);
}

/* Badge — rundes Abzeichen, überragt die Karte oben rechts */
.rd-card__badge {
  position: absolute; top: -22px; right: 18px;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--ir-region-primary-dark, var(--color-brand-primary-600));
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .22);
  z-index: 1;
}
.rd-card__badge img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Preis-Header */
.rd-card__head {
  background: var(--color-brand-primary-600); color: #fff; padding: 1.5rem 1.6rem;
  border-radius: calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0;
}
.rd-card__price-lbl { font-size: 0.65625rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.rd-card__price {
  font-family: var(--display); font-size: 2.1rem; font-weight: var(--font-weight-semibold);
  margin: .25rem 0 0; font-variation-settings: "opsz" 96;
}
.rd-card__price-note {
  margin: .4rem 0 0; font-size: 0.6875rem; color: rgba(255, 255, 255, .5); line-height: 1.4;
}

/* Body: Zeilen, CTA, Experte */
.rd-card__body { padding: 1.5rem 1.6rem 1.7rem; }
.rd-card__rows { display: flex; flex-direction: column; }
.rd-card__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .65rem 0; border-bottom: 1px solid var(--hair-soft);
  font-size: .88rem; color: var(--ink);
}
.rd-card__row:last-child { border-bottom: none; }
.rd-card__row dt { color: var(--muted); font-size: 0.6875rem; letter-spacing: .14em; text-transform: uppercase; flex-shrink: 0; }
.rd-card__row dd { margin: 0; font-weight: var(--font-weight-medium); text-align: right; }
.rd-card__cta {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%; margin-top: 1.4rem;
  background: var(--theme-btn-primary-bg, var(--color-brand-secondary-500)); color: var(--theme-btn-primary-text, var(--ink));
  padding: 1rem 1.5rem; border-radius: var(--border-radius-round);
  font-size: 0.78125rem; font-weight: var(--font-weight-semibold); letter-spacing: .14em; text-transform: uppercase;
  transition: background .22s, transform .22s;
}
.rd-card__cta:hover { background: var(--theme-btn-primary-bg-hover, var(--ir-saffron-light)); transform: translateY(-1px); }

/* Reiseexperte */
.rd-card__expert {
  display: flex; align-items: center; gap: .875rem;
  margin-top: 1.1rem; padding-top: 1.1rem;
  border-top: 1px solid var(--hair-soft);
}
.rd-card__expert-photo {
  width: 4.5rem; height: 4.5rem; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  background: var(--color-brand-tertiary-200);
}
.rd-card__expert-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-card__expert-info { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.rd-card__expert-name { font-size: .875rem; line-height: 1.3; font-weight: var(--font-weight-semibold); color: var(--ink); }
.rd-card__expert-contact {
  font-size: .85rem; line-height: 1.3; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .18s;
}
.rd-card__expert-contact:hover { color: var(--color-brand-primary-500); }


/* =============================================================================
   REISEPROGRAMM — Tages-Slider
   ============================================================================= */
.rd-prog { background: var(--theme-bg-page); overflow: hidden; }
.rd-prog__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 2rem; flex-wrap: wrap; margin-bottom: 2.25rem;
}
.rd-prog__title {
  font-family: var(--display); font-weight: var(--font-weight-regular);
  font-size: clamp(1.9rem, 4vw, 3.3rem); line-height: 1.05;
  letter-spacing: -.01em; margin: .8rem 0 0; color: var(--color-brand-primary-600);
  font-variation-settings: "opsz" 96;
}
.rd-prog__sub {
  font-size: var(--font-size-text-copy); color: var(--ink-soft); margin: .6rem 0 0;
  max-width: 48ch; line-height: 1.5;
}
.rd-view { display: flex; border: 1px solid var(--hair); border-radius: var(--border-radius-round); overflow: hidden; background: var(--paper); }
.rd-view__btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1.1rem; font-family: var(--body);
  font-size: 0.6875rem; letter-spacing: .12em; text-transform: uppercase; font-weight: var(--font-weight-medium);
  color: var(--ink-soft); background: none; border: 0; cursor: pointer;
  transition: background .22s, color .22s;
}
.rd-view__btn svg { width: 13px; height: 13px; }
.rd-view__btn.is-active { background: var(--color-brand-primary-600); color: #fff; }

/* Tab-Strip */

/* Fortschrittslinie */
.rd-progressbar { height: 2px; background: var(--hair); border-radius: 0.125rem; margin: .25rem 0 2rem; overflow: hidden; }
.rd-progressbar__fill { height: 100%; width: 0; background: var(--color-brand-secondary-500); border-radius: 0.125rem; transition: width .45s var(--ease); }

/* Tag-Panels (server-rendered, JS togglet .is-active) */

/* Panel — Text | Media (Text immer links, Media nur wenn vorhanden) */
.rd-stage {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 4rem); align-items: start;
}
.rd-stage--has-media {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}

/* Media-Slider */
.rd-stage__coord {
  position: absolute; left: 1.1rem; top: 1.1rem; z-index: 2;
  font-size: 0.59375rem; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255, 255, 255, .9); padding: .3rem .55rem;
  border: 1px solid rgba(255, 255, 255, .4); border-radius: var(--border-radius-tiny); backdrop-filter: blur(6px);
}
.rd-stage__body { position: relative; padding: 1rem 0; }
.rd-stage__ghost {
  position: absolute; top: -2.2rem; right: 0;
  font-family: var(--display); font-weight: 300;
  font-size: clamp(5rem, 9vw, 8rem); line-height: 1;
  color: var(--color-brand-tertiary-300); z-index: 0; pointer-events: none; user-select: none;
  font-variation-settings: "opsz" 144;
}
.rd-stage__day {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: 0.6875rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--color-brand-secondary-600); font-weight: var(--font-weight-semibold); margin-bottom: .9rem;
}
.rd-stage__day::before { content: ""; width: 22px; height: 1px; background: currentColor; }
.rd-stage__ort {
  position: relative; z-index: 1;
  font-family: var(--display); font-weight: var(--font-weight-regular);
  font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.1;
  color: var(--color-brand-primary-600); margin: 0 0 1.1rem;
  font-variation-settings: "opsz" 96;
}
.rd-stage__text {
  position: relative; z-index: 1;
  font-size: clamp(.95rem, 1.05vw, 1.02rem); line-height: 1.7;
  color: var(--ink-soft); margin: 0; max-width: 50ch;
}
.rd-stage__ctrl { display: flex; align-items: center; gap: .6rem; margin-top: 2rem; position: relative; z-index: 1; }
.rd-arrow {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--hair); color: var(--color-brand-primary-600);
  display: grid; place-items: center; cursor: pointer;
  transition: background .22s, border-color .22s, transform .22s;
}
.rd-arrow:hover { background: var(--color-brand-primary-600); border-color: var(--color-brand-primary-600); color: #fff; transform: translateY(-2px); }
.rd-arrow:disabled { opacity: .35; pointer-events: none; }
.rd-arrow svg { width: 15px; height: 15px; }
.rd-stage__prog { font-size: 0.6875rem; letter-spacing: .22em; color: var(--muted); margin: 0 .5rem; font-variant-numeric: tabular-nums; text-transform: uppercase; }

/* Listenansicht — vertikale Timeline (Rail-Motiv) */
.rd-list { position: relative; max-width: 820px; padding-left: 2.4rem; }
.rd-list::before {
  content: ""; position: absolute; left: 8px; top: 12px; bottom: 12px; width: 1px;
  background: linear-gradient(to bottom, transparent 0%, var(--hair) 4%, var(--hair) 96%, transparent 100%);
}
.rd-list__item { position: relative; padding: 0 0 2.4rem; }
.rd-list__item:last-child { padding-bottom: 0; }
.rd-list__item.is-hidden { display: none; }
.rd-list__more { margin-top: 2rem; }
.rd-list__item::before {
  content: ""; position: absolute; left: calc(-2.4rem + 4px); top: 8px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--color-brand-secondary-500); box-shadow: 0 0 0 4px rgba(232, 146, 74, .16);
}
.rd-list__day { font-size: 0.65625rem; letter-spacing: .22em; text-transform: uppercase; color: var(--color-brand-secondary-600); font-weight: var(--font-weight-semibold); margin-bottom: .3rem; }
.rd-list__ort { font-family: var(--display); font-size: 1.35rem; color: var(--color-brand-primary-600); margin: 0 0 .5rem; font-variation-settings: "opsz" 48; font-weight: var(--font-weight-regular); }
.rd-list__text { font-size: .92rem; line-height: 1.65; color: var(--ink-soft); margin: 0; max-width: 60ch; }


/* =============================================================================
   PREISE
   ============================================================================= */
.rd-prices { background: var(--theme-bg-page); }
.rd-prices__head { margin-bottom: 2.5rem; max-width: 80ch; }
.rd-prices__title {
  font-family: var(--display); font-weight: var(--font-weight-regular);
  font-size: clamp(1.9rem, 4vw, 3.3rem); line-height: 1.05; letter-spacing: -.01em;
  margin: .8rem 0 1rem; color: var(--color-brand-primary-600); font-variation-settings: "opsz" 96;
}
.rd-prices__sub { font-size: .95rem; color: var(--ink-soft); line-height: 1.6; margin: 0; }
.rd-prices__grid { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 1.2rem; align-items: stretch; }

.price-card {
  position: relative; background: var(--paper); border: 1px solid var(--hair);
  border-radius: var(--r); padding: 1.85rem 1.6rem;
  display: flex; flex-direction: column; gap: .35rem;
  transition: transform .32s var(--ease), box-shadow .32s;
}
.price-card:hover { transform: translateY(-4px); box-shadow: 0 18px 42px -24px rgba(14, 74, 77, .35); }
.price-card--featured { background: var(--color-brand-primary-600); border-color: var(--color-brand-primary-600); color: #fff; }
.price-card__badge {
  position: absolute; top: -11px; left: 1.5rem;
  background: var(--color-brand-secondary-500); color: var(--ink);
  font-size: 0.59375rem; letter-spacing: .2em; text-transform: uppercase; font-weight: var(--font-weight-semibold);
  padding: .3rem .65rem; border-radius: var(--border-radius-tiny);
}
.price-card__cat { font-size: 0.6875rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-weight: var(--font-weight-medium); }
.price-card--featured .price-card__cat { color: rgba(255, 255, 255, .6); }
.price-card__amount {
  font-family: var(--display); font-weight: var(--font-weight-semibold);
  font-size: clamp(1.6rem, 2.2vw, 2rem); color: var(--color-brand-primary-600);
  font-variation-settings: "opsz" 96; margin: .3rem 0 0;
}
.price-card--featured .price-card__amount { color: #fff; }
/* "ab" bleibt Fliesstext-Schrift und tritt hinter die Zahl zurück */
.price-card__from { font-family: var(--body); font-size: 0.875rem; font-weight: var(--font-weight-medium); letter-spacing: .01em; }
.price-card__per { font-size: 0.75rem; line-height: 1.3; color: var(--muted); margin-bottom: 1.1rem; }
.price-card--featured .price-card__per { color: rgba(255, 255, 255, .55); }
/* Saison / Zusatzangabe: Freitext der Reise, direkt unter dem Paketnamen.
   Nicht in Kapitälchen wie der Name — das ist eine Angabe, keine Kategorie. */
.price-card__zusatz {
  display: block;
  margin: .15rem 0 .5rem;
  font-size: .8rem; line-height: 1.35;
  color: var(--muted);
}
.price-card--featured .price-card__zusatz { color: rgba(255, 255, 255, .62); }

.price-card__list { list-style: none; margin: 0; padding: 1.1rem 0 0; border-top: 1px solid var(--hair-soft); display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.price-card--featured .price-card__list { border-color: rgba(255, 255, 255, .14); }
.price-card__list li { display: flex; gap: .6rem; font-size: .85rem; line-height: 1.45; color: var(--ink-soft); }
.price-card--featured .price-card__list li { color: rgba(255, 255, 255, .8); }
.price-card__list svg { width: 14px; height: 14px; color: var(--color-brand-secondary-600); flex-shrink: 0; margin-top: .18rem; }
.price-card--featured .price-card__list svg { color: var(--color-brand-secondary-500); }
.price-card__cta { margin-top: 1.5rem; align-self: stretch; }
.price-card--featured .price-card__cta.btn--secondary {
  border-color: rgba(255, 255, 255, .4); color: #fff;
}
.price-card--featured .price-card__cta.btn--secondary:hover:not(:disabled) {
  background: rgba(255, 255, 255, .15); border-color: #fff;
  transform: translateY(-2px);
}
.rd-prices__note {
  margin-top: 1.75rem; display: flex; align-items: center; gap: .75rem;
  font-size: 0.8125rem; color: var(--ink-soft);
}
/* Sparofant statt Info-Icon — Farbe folgt der Region der Reise (--ir-region-primary
   wird via insight_inject_region_colors() auf :root gesetzt) */
.rd-prices__note-icon {
  width: 3.5rem; height: auto; aspect-ratio: 64 / 74.17; flex-shrink: 0;
  color: var(--ir-region-primary, var(--color-brand-primary-500));
}


/* =============================================================================
   REISEDATEN — Feste Termine (single-kleingruppe.php)
   ============================================================================= */
.rd-termine__list { border-top: 1px solid var(--hair); }
.rd-termine__row {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.75rem 0; border-bottom: 1px solid var(--hair); flex-wrap: wrap;
}
.rd-termine__info { display: flex; flex-direction: column; gap: .3rem; }
.rd-termine__range {
  font-family: var(--display); font-weight: var(--font-weight-regular);
  font-size: 1.35rem; color: var(--color-brand-primary-600); margin: 0;
  font-variation-settings: "opsz" 48;
}
.rd-termine__price { font-size: .95rem; color: var(--ink-soft); margin: 0; }
.rd-termine__price strong { color: var(--ink); font-weight: var(--font-weight-semibold); }
.rd-termine__personen { font-size: .85rem; color: var(--muted); margin: .15rem 0 0; }
.rd-termine__cta { flex-shrink: 0; }


/* =============================================================================
   LEISTUNGEN
   ============================================================================= */
.rd-services { background: var(--theme-bg-page); }
.rd-services__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-top: 2.5rem; }
.rd-svc { background: var(--paper); border: 1px solid var(--hair-soft); border-radius: var(--r); padding: 2rem 1.85rem; }
.rd-svc__title {
  display: flex; align-items: center; gap: .65rem;
  font-family: var(--display); font-size: 1.3rem; font-weight: var(--font-weight-regular);
  color: var(--color-brand-primary-600); margin: 0 0 1.4rem; font-variation-settings: "opsz" 48;
}
.rd-svc__title svg { width: 20px; height: 20px; color: var(--color-brand-secondary-600); }
.rd-svc--minus .rd-svc__title svg { color: var(--muted); }
.rd-svc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.rd-svc__list li { display: flex; gap: .7rem; font-size: .91rem; line-height: 1.55; color: var(--ink-soft); }
.rd-svc__list svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: .2rem; color: var(--color-brand-primary-500); }
.rd-svc--minus .rd-svc__list svg { color: var(--muted); }


/* =============================================================================
   REISEZEIT
   ============================================================================= */
.rd-season { background: var(--theme-bg-page); }
.rd-season__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.rd-season__title {
  font-family: var(--display); font-weight: var(--font-weight-regular);
  font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.08; letter-spacing: -.01em;
  margin: .85rem 0 1.2rem; color: var(--color-brand-primary-600); font-variation-settings: "opsz" 96;
}
.rd-season__text { font-size: .97rem; line-height: 1.7; color: var(--ink-soft); margin: 0 0 1rem; max-width: 48ch; }
.rd-season__months { display: grid; grid-template-columns: repeat(12, 1fr); gap: .3rem; }
.rd-month {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  font-size: 0.625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.rd-month__bar { width: 100%; height: 56px; border-radius: 0.375rem; background: var(--hair-soft); position: relative; overflow: hidden; }
.rd-month--best .rd-month__bar  { background: var(--color-brand-secondary-500); }
.rd-month--mid .rd-month__bar   { background: var(--color-brand-secondary-300); }
.rd-month--rain .rd-month__bar  { background: var(--color-brand-primary-200); }
.rd-month--best { color: var(--ink-soft); font-weight: var(--font-weight-semibold); }
.rd-season__legend { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 1.4rem; font-size: var(--font-fontSize-xs); color: var(--ink-soft); }
.rd-season__legend span { display: inline-flex; align-items: center; gap: .5rem; }
.rd-season__legend i { width: 12px; height: 12px; border-radius: 0.1875rem; display: inline-block; }


/* =============================================================================
   CTA BAND
   ============================================================================= */
/* Farben kommen aus dem Theme-Attribut: das Band steht auf «cream», der
   Pre-Footer darunter auf «petrol» — vorher war es umgekehrt. Deshalb hier
   keine festen Weiss-Werte mehr. */
.rd-cta { background: var(--theme-bg-page); color: var(--theme-text-body); text-align: center; }
.rd-cta__quote {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(1.4rem, 2.6vw, 2.1rem); line-height: 1.35;
  max-width: 32ch; margin: 0 auto 1.5rem; color: var(--theme-text-heading);
  font-variation-settings: "opsz" 96;
}
.rd-cta__sig { font-size: 0.6875rem; letter-spacing: .22em; text-transform: uppercase; color: var(--theme-text-muted); margin-bottom: 2.25rem; }
.rd-cta__row { display: flex; justify-content: center; gap: .75rem; flex-wrap: wrap; }
.rd-cta__btn {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--theme-btn-primary-bg, var(--color-brand-secondary-500)); color: var(--theme-btn-primary-text, var(--ink));
  padding: 1rem 1.75rem; border-radius: var(--border-radius-round);
  font-size: 0.78125rem; font-weight: var(--font-weight-semibold); letter-spacing: .14em; text-transform: uppercase;
  transition: background .22s, transform .22s;
}
.rd-cta__btn:hover { background: var(--theme-btn-primary-bg-hover, var(--ir-saffron-light)); transform: translateY(-2px); }
.rd-cta__ghost {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: 1rem 1.75rem; border-radius: var(--border-radius-round);
  border: 1px solid var(--theme-btn-secondary-border, var(--color-brand-primary-600));
  font-size: 0.78125rem; font-weight: var(--font-weight-medium); letter-spacing: .14em; text-transform: uppercase;
  color: var(--theme-btn-secondary-text, var(--color-brand-primary-600));
  transition: border-color .22s, background .22s;
}
.rd-cta__ghost:hover {
  border-color: var(--color-brand-secondary-500);
  background: var(--theme-btn-secondary-bg-hover, color-mix(in srgb, var(--color-brand-primary-600) 8%, transparent));
}


/* =============================================================================
   MOBILE BUCHUNGSLEISTE
   ============================================================================= */
.rd-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: none; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .8rem var(--gutter);
  background: var(--paper); border-top: 1px solid var(--hair);
  box-shadow: 0 -10px 30px -18px rgba(14, 74, 77, .35);
}
.rd-bar__price { font-size: 0.6875rem; color: var(--muted); line-height: 1.3; }
.rd-bar__price strong { display: block; font-size: 1.05rem; color: var(--color-brand-primary-600); font-weight: var(--font-weight-semibold); }
.rd-bar__cta {
  background: var(--theme-btn-primary-bg, var(--color-brand-secondary-500)); color: var(--theme-btn-primary-text, var(--ink));
  padding: .85rem 1.5rem; border-radius: var(--border-radius-round); white-space: nowrap;
  font-size: var(--font-fontSize-xs); font-weight: var(--font-weight-semibold); letter-spacing: .12em; text-transform: uppercase;
}


/* Impressionen + Lightbox → css/pages/index.css (shared component) */


/* =============================================================================
   RESPONSIVE
   ============================================================================= */
@media (max-width: 1100px) {
  .rd-prices__grid { grid-template-columns: repeat(min(var(--cols, 4), 2), 1fr); }
  .rd-impressions__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 980px) {
  .rd-intro__grid { grid-template-columns: 1fr; }
  .rd-card { position: static; }
  .rd-stage--has-media { grid-template-columns: 1fr; gap: 1.75rem; }
  .rd-stage__ghost { top: -1rem; font-size: 5rem; }
  .rd-season__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .rd-impressions__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(140px, 22vw, 200px); }
}
@media (max-width: 720px) {
  .rd-highlights { grid-template-columns: 1fr; }
  .rd-services__grid { grid-template-columns: 1fr; }
  .rd-prices__grid { grid-template-columns: 1fr; }
  .rd-termine__row { flex-direction: column; align-items: flex-start; }
  .rd-termine__cta { width: 100%; }
  .rd-month__bar { height: 40px; }
  .rd-bar { display: flex; }
  body { padding-bottom: 72px; }
  /* Borlabs-Cookie-Knopf sitzt unten links (brlbs-bottom-0) und verdeckte
     den «ab CHF …»-Preis der Leiste — über die Leiste heben. Spezifität
     (0,2,1) schlägt .brlbs-cmpnt-container .brlbs-bottom-0 (0,2,0). */
  body:has(.rd-bar) .brlbs-cmpnt-widget { bottom: 5rem; }
  .rd-list { padding-left: 2rem; }
  .rd-impressions__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(120px, 28vw, 170px); gap: 4px; }
  .rd-imp__item--feature { grid-column: span 2; grid-row: span 2; }
  .rd-imp__item--wide    { grid-column: span 2; }
  .rd-imp__item--tall    { grid-row: span 2; }
  .rd-lb__arrow--prev { left: .5rem; }
  .rd-lb__arrow--next { right: .5rem; }
  /* Mehr Luft für eine mehrzeilig umbrechende Bildunterschrift unter dem Bild */
  .rd-lb__media { max-height: calc(88vh - 5.5rem); }
}


/* =============================================================================
   REGION-HUB — Geteilte Komponenten für Makroregionen-Übersichtsseiten
   (Asien, Himalaya, Indien, …) — gelten für alle Seiten, die reise-detail.css importieren.
   ============================================================================= */

.rg-intro { background: var(--theme-bg-page); }
.rg-intro__grid {
  display: grid;
  grid-template-columns: 1fr minmax(0, 360px);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.rg-intro__lead {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.55;
  color: var(--color-brand-primary-600);
  margin: .9rem 0 1.25rem;
  font-weight: 450;
}
.rg-intro__text {
  font-size: .96rem;
  line-height: 1.72;
  color: var(--ink-soft);
  margin: 0 0 .9rem;
}

.rg-stats {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--hair);
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--hair);
  position: sticky;
  top: calc(var(--nav-h) + 1.5rem);
}
.rg-stat { padding: 1.4rem 1.65rem; background: var(--paper); }
.rg-stat__num {
  font-family: var(--display);
  font-size: clamp(1.9rem, 3vw, 2.8rem);
  font-weight: var(--font-weight-regular);
  color: var(--color-brand-primary-500);
  line-height: 1;
  font-variation-settings: "opsz" 96;
  margin-bottom: .3rem;
}
.rg-stat__label { font-size: .82rem; color: var(--ink-soft); line-height: 1.3; }

.rg-dest { background: var(--theme-bg-page); }
.rg-dest__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-top: 2.75rem; }

/* Destination-Card — Bildkind-Variante (region pages) */
.dest-card {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--color-brand-primary-600);
  cursor: pointer;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  transition: transform .38s var(--ease);
}
.dest-card__img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform .5s var(--ease);
}
.dest-card:hover { transform: translateY(-5px); }
.dest-card:hover .dest-card__img { transform: scale(1.05); }
.dest-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,58,61,0) 38%, rgba(8,58,61,.88) 100%);
  transition: background .38s; z-index: 1;
}
.dest-card:hover::after {
  background: linear-gradient(180deg, rgba(8,58,61,.06) 18%, rgba(8,58,61,.94) 100%);
}
.dest-card__arrow {
  position: absolute; top: 1rem; right: 1rem; z-index: 3;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.12); backdrop-filter: blur(8px);
  border-radius: 50%; color: #fff;
  transition: background .22s, color .22s;
}
.dest-card__arrow svg { width: 15px; height: 15px; }
.dest-card:hover .dest-card__arrow { background: var(--color-brand-secondary-500); color: var(--ink); }
.dest-card__body {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
  padding: 1.25rem; color: #fff;
}
.dest-card__tag {
  font-size: 0.625rem; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.72); display: block; margin-bottom: .2rem;
}
.dest-card__name {
  font-family: var(--display); font-size: 1.35rem; font-weight: var(--font-weight-regular);
  line-height: 1.1; margin: 0; font-variation-settings: "opsz" 48;
}

.rg-trips { background: var(--theme-bg-page); }
.rg-trips__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem; margin-top: 2.75rem;
}

.trip {
  background: var(--paper); border-radius: var(--r); overflow: hidden;
  display: flex; flex-direction: column;
  border: 1px solid var(--hair-soft); position: relative;
  transition: transform .35s var(--ease), box-shadow .35s;
}
.trip:hover { transform: translateY(-4px); box-shadow: 0 18px 38px -22px rgba(14,74,77,.32); }
.trip__media { aspect-ratio: 16/9; background-size: cover; background-position: center; position: relative; }
.trip__region {
  position: absolute; top: .85rem; left: .85rem;
  font-size: 0.625rem; letter-spacing: .22em; text-transform: uppercase;
  background: var(--color-brand-secondary-500); color: var(--ink); font-weight: var(--font-weight-semibold);
  padding: .28rem .55rem; border-radius: var(--border-radius-tiny);
}
.trip__days {
  position: absolute; top: .85rem; right: .85rem;
  font-size: 0.625rem; letter-spacing: .14em; text-transform: uppercase;
  background: rgba(0,0,0,.45); backdrop-filter: blur(6px);
  color: #fff; padding: .28rem .55rem; border-radius: var(--border-radius-tiny);
}
.trip__body { padding: 1.4rem 1.35rem 1.65rem; display: flex; flex-direction: column; flex: 1; }
.trip__land { font-size: 0.6875rem; letter-spacing: .2em; text-transform: uppercase; color: var(--color-brand-primary-500); font-weight: var(--font-weight-medium); margin-bottom: .5rem; }
.trip__title {
  font-family: var(--display); font-size: 1.15rem; font-weight: var(--font-weight-regular);
  color: var(--color-brand-primary-600); line-height: 1.2; margin: 0 0 .6rem;
  font-variation-settings: "opsz" 48;
}
.trip__title a { color: inherit; text-decoration: none; }
.trip__title a::after { content: ""; position: absolute; inset: 0; }
.trip__excerpt { font-size: .88rem; line-height: 1.6; color: var(--ink-soft); margin: 0 0 1.1rem; flex: 1; }
.trip__foot {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding-top: .85rem; border-top: 1px solid var(--hair-soft); margin-top: auto; gap: .75rem;
}
.trip__price { font-size: 0.65625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); line-height: 1.35; }
.trip__price strong {
  display: block; font-family: var(--display); font-size: 1.25rem; font-weight: var(--font-weight-regular);
  color: var(--color-brand-primary-600); letter-spacing: 0; text-transform: none;
  font-variation-settings: "opsz" 48;
}
.trip__art {
  font-size: 0.625rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--color-brand-primary-500); font-weight: var(--font-weight-medium);
  background: rgba(30,110,114,.1); padding: .3rem .6rem; border-radius: var(--border-radius-tiny); white-space: nowrap;
}

.rg-more { margin-top: 2.75rem; text-align: center; }
.rg-more__link {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: var(--font-fontSize-xs); letter-spacing: .18em; text-transform: uppercase; font-weight: var(--font-weight-semibold);
  color: var(--color-brand-primary-500); border-bottom: 1.5px solid var(--color-brand-secondary-500); padding-bottom: .38rem;
  transition: color .2s;
}
.rg-more__link:hover { color: var(--color-brand-secondary-500); }
.rg-more__link svg { transition: transform .2s; }
.rg-more__link:hover svg { transform: translateX(4px); }

.rg-types { background: var(--theme-bg-page); }
.rg-types__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-top: 2.75rem; }

.rg-type {
  padding: 2rem 1.65rem; border: 1px solid var(--hair); border-radius: var(--r);
  transition: background .25s, box-shadow .25s;
}
.rg-type:hover { background: var(--color-brand-tertiary-200); box-shadow: 0 8px 24px -12px rgba(14,74,77,.15); }
.rg-type__icon { width: 40px; height: 40px; margin-bottom: 1.25rem; color: var(--color-brand-primary-500); }
.rg-type__icon svg { width: 100%; height: 100%; }
.rg-type__title {
  font-family: var(--display); font-size: 1.2rem; font-weight: var(--font-weight-regular);
  color: var(--color-brand-primary-600); margin: 0 0 .7rem; font-variation-settings: "opsz" 48;
}
.rg-type__text { font-size: .88rem; line-height: 1.65; color: var(--ink-soft); margin: 0 0 1.1rem; }
.rg-type__cta {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: 0.6875rem; font-weight: var(--font-weight-semibold); letter-spacing: .12em; text-transform: uppercase; color: var(--color-brand-primary-500);
}
.rg-type__cta svg { transition: transform .2s; }
.rg-type:hover .rg-type__cta svg { transform: translateX(3px); }

@media (max-width: 1080px) {
  .rg-trips__grid { grid-template-columns: 1fr 1fr; }
  .rg-types__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 780px) {
  .rg-intro__grid { grid-template-columns: 1fr; }
  .rg-stats       { display: grid; grid-template-columns: 1fr 1fr; }
  .rg-trips__grid { grid-template-columns: 1fr; }
  .rg-types__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .rg-dest__grid  { grid-template-columns: 1fr 1fr !important; }
  .rg-stats       { grid-template-columns: 1fr; }
  .rg-types__grid { grid-template-columns: 1fr; }
}


/* =============================================================================
   REISEINFORMATIONEN
   ============================================================================= */
.rd-reiseinfo { background: var(--theme-bg-page); }

.rd-reiseinfo__head { margin-bottom: 3rem; }
.rd-reiseinfo__title {
  font-family: var(--display); font-weight: var(--font-weight-regular);
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  color: var(--color-brand-primary-600); line-height: 1.15; margin: .5rem 0 0;
  font-variation-settings: "opsz" 72;
}

.rd-reiseinfo__layout {
  display: grid;
  grid-template-columns:  2fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

/* Expert Card */
.ri-expert-card {
  background: var(--paper);
  border: 1px solid var(--hair-soft);
  border-radius: 1.25rem;
  overflow: hidden;
}

.ri-expert-card__photo {
  position: relative;
  aspect-ratio: 3/2;
  background: var(--color-brand-primary-600);
  overflow: hidden;
}
.ri-expert-card__photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: center center;
  display: block;
}
.ri-expert-card__badge {
  position: absolute; top: 1rem; left: 1rem;
  background: rgba(0, 0, 0, .48);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 0.625rem; letter-spacing: .2em; text-transform: uppercase; font-weight: var(--font-weight-semibold);
  padding: .38rem .75rem; border-radius: var(--border-radius-tiny);
}

.ri-expert-card__body { padding: 1.75rem 1.6rem 2rem; }

/* Name + runder Link-Button in einer Zeile. Der Abstand nach unten sass vorher
   am Namen — jetzt an der Zeile, sonst zoege der Button ihn schief. */
.ri-expert-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.5rem;
}

.ri-expert-card__name {
  font-family: var(--display); font-weight: var(--font-weight-regular);
  font-size: 1.65rem; color: var(--color-brand-primary-600); margin: 0;
  line-height: 1.1; font-variation-settings: "opsz" 48;
}

/* Runder Pfeil-Button zur Detailseite der Person.
   flex-shrink: 0, damit ihn ein langer Name nicht zusammendrueckt. */
.ri-expert-card__link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid var(--hair);
  color: var(--color-brand-primary-600);
  background: transparent;
  transition: background-color .22s, border-color .22s, color .22s, transform .22s;
}
.ri-expert-card__link svg {
  width: 1.125rem;
  height: 1.125rem;
  transition: transform .22s;
}
.ri-expert-card__link:hover,
.ri-expert-card__link:focus-visible {
  background: var(--color-brand-primary-600);
  border-color: var(--color-brand-primary-600);
  color: #fff;
}

.ri-expert-card__link:focus-visible {
  outline: 2px solid var(--theme-border-focus, var(--color-brand-secondary-500));
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .ri-expert-card__link,
  .ri-expert-card__link svg { transition: none; }
  .ri-expert-card__link:hover svg,
  .ri-expert-card__link:focus-visible svg { transform: none; }
}

.ri-expert-card__row {
  display: flex; justify-content: space-between; align-items: center;
  padding: .9rem 0; border-top: 1px solid var(--hair);
  gap: 1rem;
}
.ri-expert-card__label {
  font-size: 0.65625rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); font-weight: var(--font-weight-medium); flex-shrink: 0;
}
.ri-expert-card__val {
  font-size: .92rem; font-weight: var(--font-weight-medium); color: var(--ink);
  text-decoration: none; text-align: right;
  transition: color .2s;
}
.ri-expert-card__val:hover { color: var(--color-brand-primary-500); }

/* Expert CTA: volle Breite über btn-System */
.ri-expert-card__cta { width: 100%; margin-top: 1.75rem; justify-content: center; }

/* Reiseinformationen Wysiwyg */
.rd-reiseinfo__content { padding-top: .5rem; }
.rd-reiseinfo__wysiwyg {
  font-size: .97rem; line-height: 1.8; color: var(--ink-soft);
}
.rd-reiseinfo__wysiwyg p { margin: 0 0 1rem; }
.rd-reiseinfo__wysiwyg strong, .rd-reiseinfo__wysiwyg b { color: var(--color-brand-primary-600); font-weight: var(--font-weight-semibold); }
.rd-reiseinfo__wysiwyg a { color: var(--color-brand-primary-500); text-underline-offset: 3px; }
.rd-reiseinfo__wysiwyg a:hover { color: var(--color-brand-primary-600); }
.rd-reiseinfo__wysiwyg ul { padding-left: 1.2rem; margin: 0 0 1rem; }
.rd-reiseinfo__wysiwyg ul li { margin-bottom: .45rem; }
.rd-reiseinfo__wysiwyg h3, .rd-reiseinfo__wysiwyg h4 {
  font-family: var(--display); font-weight: var(--font-weight-regular);
  color: var(--color-brand-primary-600); margin: 1.75rem 0 .6rem;
  font-variation-settings: "opsz" 48;
}

.rd-reiseinfo__actions {
  display: flex; flex-wrap: wrap; gap: .75rem;
  margin-top: 2rem;
}

/* =============================================================================
   BLOG
   ============================================================================= */
.rd-blog { background: var(--theme-bg-page); }

.rd-blog__head { margin-bottom: 2.75rem; }
.rd-blog__title {
  font-family: var(--display); font-weight: var(--font-weight-regular);
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  color: var(--color-brand-primary-600); line-height: 1.15; margin: .5rem 0 0;
  font-variation-settings: "opsz" 72;
}

.rd-blog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}

.rd-blog-card {
  position: relative;
  background: var(--warm-white);
  border: 1px solid var(--hair-soft);
  border-radius: var(--r);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .35s var(--ease), box-shadow .35s;
}
.rd-blog-card:hover { transform: translateY(-4px); box-shadow: 0 18px 38px -18px rgba(14,74,77,.3); }

.rd-blog-card__img-link { display: block; }
.rd-blog-card__img {
  aspect-ratio: 16/9;
  background: var(--color-brand-primary-500) center / cover no-repeat;
  transition: transform .5s var(--ease);
}
.rd-blog-card:hover .rd-blog-card__img { transform: scale(1.04); }

.rd-blog-card__body {
  padding: 1.35rem 1.35rem 1.5rem;
  display: flex; flex-direction: column; gap: .45rem; flex: 1;
}
.rd-blog-card__title {
  font-family: var(--display); font-size: 1.1rem; font-weight: var(--font-weight-regular);
  color: var(--color-brand-primary-600); line-height: 1.25; margin: 0;
  font-variation-settings: "opsz" 48;
}
.rd-blog-card__title a { color: inherit; text-decoration: none; }
.rd-blog-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.rd-blog-card__excerpt { font-size: .87rem; line-height: 1.65; color: var(--ink-soft); margin: 0; flex: 1; }
.rd-blog-card__date {
  display: block; margin-top: auto; padding-top: .9rem;
  font-size: .78rem; letter-spacing: .06em; color: var(--muted);
  border-top: 1px solid var(--hair-soft);
}

/* =============================================================================
   ÄHNLICHE REISEN
   ============================================================================= */
.rd-related { background: var(--theme-bg-page); }

.rd-related__head { margin-bottom: 2.75rem; }
.rd-related__title {
  font-family: var(--display); font-weight: var(--font-weight-regular);
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  color: var(--color-brand-primary-600); line-height: 1.15; margin: .5rem 0 0;
  font-variation-settings: "opsz" 72;
}

.rd-related__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

/* trip-card (shared with destination/region pages) */
.trip-card {
  position: relative; background: var(--paper);
  border: 1px solid var(--hair-soft); border-radius: var(--r);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .38s var(--ease), box-shadow .38s;
}
.trip-card:hover { transform: translateY(-5px); box-shadow: 0 20px 42px -22px rgba(14,74,77,.4); }
.trip-card__img-link { display: block; }
.trip-card__img {
  aspect-ratio: 5/4; background: var(--color-brand-primary-500) center / cover no-repeat;
  position: relative; transition: transform .55s var(--ease);
}
.trip-card:hover .trip-card__img { transform: scale(1.04); }
.trip-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(--ink); background: var(--color-brand-secondary-500); padding: .3rem .6rem; border-radius: var(--border-radius-tiny);
}
.trip-card__body {
  padding: 1.3rem 1.25rem 1.4rem;
  display: flex; flex-direction: column; gap: .45rem; flex: 1;
}
.trip-card__title {
  font-family: var(--display); font-size: 1.1rem; font-weight: var(--font-weight-regular);
  color: var(--color-brand-primary-600); margin: 0; line-height: 1.2;
  font-variation-settings: "opsz" 48;
}
.trip-card__title a { color: inherit; text-decoration: none; }
.trip-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.trip-card__excerpt {
  font-size: .87rem; line-height: 1.6; color: var(--ink-soft); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.trip-card__foot {
  margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--hair-soft);
  display: flex; justify-content: space-between; align-items: end; gap: 1rem;
}
.trip-card__price { font-size: .75rem; color: var(--muted); line-height: 1.3; }
.trip-card__price strong { display: block; font-size: .97rem; color: var(--color-brand-primary-600); font-weight: var(--font-weight-semibold); }
.trip-card__art {
  font-size: 0.625rem; letter-spacing: .14em; text-transform: uppercase; line-height: 1.2; color: var(--muted); text-align: right;
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */
@media (max-width: 1100px) {
  .rd-reiseinfo__layout { grid-template-columns: 300px 1fr; }
  .rd-related__grid     { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  .rd-reiseinfo__layout { grid-template-columns: 1fr; max-width: 480px; }
  .rd-blog__grid        { grid-template-columns: 1fr 1fr; }
  .rd-related__grid     { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .rd-blog__grid    { grid-template-columns: 1fr; }
  .rd-related__grid { grid-template-columns: 1fr; }
}


/* Das Akkordeon selbst (cmod-accordion) liegt in css/pages/index.css —
   es wird auch vom Page-Builder-Block «11 — Accordion» genutzt. */
.rd-reiseinfo__faq { padding-top: .25rem; }

/* Zwischentitel pro Land — nur bei Reisen über mehrere Länder */
.rd-reiseinfo__land {
  font-family: var(--display); font-weight: var(--font-weight-regular);
  font-size: 1.25rem; line-height: 1.3;
  color: var(--color-brand-primary-600);
  margin: 0 0 .75rem;
  font-variation-settings: "opsz" 36;
}
.rd-reiseinfo__land:not(:first-child) { margin-top: 2.5rem; }