/* =============================================================================
   TABS + BILD-SLIDER — geteilte Komponente
   =============================================================================
   Herausgelöst aus reise-detail.css (.rd-days/.rd-day-tab/.rd-panel/.rd-slider,
   .rd-stage__media/-caption) und ayurveda-detail.css (.ri-resort*), damit
   dasselbe Design an drei Orten gilt, ohne es zu kopieren:

     · Reiseprogramm (Tagesreiter)          single-reise.php, single-kleingruppe.php
     · Resort-Sections «Das Resort»/«Lage»  template-parts/resort-tabs.php, resort-lage.php
     · Page-Builder-Block «16 — Tabs»       template-parts/sections/s16_tabs.php

   Eingebunden über functions.php als `insight-comp-tabs`; reise-detail.css und
   ayurveda-detail.css hängen als Abhängigkeit daran. Bewusst eine eigene Datei
   statt eines Mitladens von reise-detail.css auf Seiten mit dem Block: diese
   Datei stylt auch .dest-card, das der Block «02 — Destination Cards» nutzt.
   ============================================================================= */

.rd-days {
  display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .85rem;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}

.rd-days::-webkit-scrollbar { display: none; }

.rd-day-tab {
  flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .12rem;
  padding: .65rem 1rem .6rem; min-width: 108px;
  background: var(--paper); border: 1px solid var(--hair); border-radius: 0.625rem;
  cursor: pointer; font-family: var(--body); text-align: left;
  transition: background .22s, border-color .22s, transform .22s;
}

.rd-day-tab:hover { border-color: var(--color-brand-primary-500); transform: translateY(-2px); }

.rd-day-tab__num { font-size: 0.625rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-weight: var(--font-weight-medium); }

.rd-day-tab__ort { font-size: var(--font-fontSize-xs); font-weight: var(--font-weight-semibold); color: var(--ink-soft); white-space: nowrap; }

.rd-day-tab.is-active { background: var(--color-brand-primary-600); border-color: var(--color-brand-primary-600); }

.rd-day-tab.is-active .rd-day-tab__num { color: var(--color-brand-secondary-500); }

.rd-day-tab.is-active .rd-day-tab__ort { color: #fff; }

.rd-panel { display: none; }

.rd-panel.is-active { display: block; }

.rd-stage__media {
  aspect-ratio: 4/3; border-radius: var(--r); overflow: hidden;
  box-shadow: 0 24px 60px -28px rgba(61, 61, 61, 0.5); position: relative;
}



.rd-stage__media-col { display: flex; flex-direction: column; }

.rd-stage__caption {
  font-size: .82rem; color: var(--muted);
  margin-top: .5rem; min-height: 1.3em; line-height: 1.4;
}

/* =============================================================================
   RESORT-TABS — flache Tab-Nav + Bild-Slider
   ============================================================================= */
.ri-resort { background: var(--color-brand-tertiary-200); }
.ri-resort__head { margin-bottom: 2.25rem; }
.ri-resort__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: .8rem 0 0; color: var(--color-brand-primary-600);
  font-variation-settings: "opsz" 96;
}
.ri-resort .rd-days {
  gap: 0; padding-bottom: 0; flex-wrap: wrap;
  border-bottom: 1px solid var(--hair); margin-bottom: 2.5rem;
}
.ri-resort .rd-day-tab {
  background: none; border: none; border-radius: 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: .8rem 1.4rem; min-width: unset;
  font-size: .88rem; font-weight: var(--font-weight-medium); color: var(--muted);
  transition: color .22s, border-color .22s;
}
.ri-resort .rd-day-tab:hover    { border-bottom-color: var(--color-brand-primary-500); color: var(--color-brand-primary-500); transform: none; }
.ri-resort .rd-day-tab.is-active { background: none; border-bottom-color: var(--color-brand-primary-600); color: var(--color-brand-primary-600); font-weight: var(--font-weight-semibold); }
.ri-resort .rd-day-tab__num     { display: none; }
.ri-resort__panel { display: none; }
.ri-resort__panel.is-active { display: block; animation: ayPanelIn .38s var(--ease) both; }
.ri-resort__stage { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: start; }
.ri-resort__stage--split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.ri-resort__media-col { display: flex; flex-direction: column; }
.ri-resort__media-col .rd-stage__media {
  aspect-ratio: 4/3; border-radius: var(--r); overflow: hidden;
  background: var(--color-brand-primary-700); box-shadow: 0 24px 60px -28px rgba(14,74,77,.3);
  position: relative;
}
.ri-resort__media-col .rd-stage__media .rd-slider { position: absolute; inset: 0; height: auto; }
.ri-resort__media-col .rd-stage__caption { font-size: .82rem; color: var(--muted); margin-top: .5rem; line-height: 1.4; }
/* Karte statt Bild-Slider: ein Eintrag der Resort-Infos kann eine
   Google-Maps-Adresse tragen (Feld si_karte) — sie füllt dieselbe Fläche. */
.ri-resort__map { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.ri-resort__body { display: flex; flex-direction: column; justify-content: center; padding-top: .5rem; }
.ri-resort__tab-title {
  font-family: var(--display); font-weight: var(--font-weight-regular);
  font-size: clamp(1.5rem, 2.6vw, 2.2rem); color: var(--color-brand-primary-600);
  margin: 0 0 1.25rem; font-variation-settings: "opsz" 96; line-height: 1.1;
}
/* ── Wysiwyg-Flächen dieses Templates ────────────────────────────────────────
   Tab-Text (Resort und Lage) und Paket-Beschreibung sind beides Felder mit
   vollem Werkzeugsatz: Überschriften, beide Listenarten, Zitat, Trennlinie und
   Tabelle brauchen deshalb je eine Regel — sonst greift nur der Reset. Beide
   teilen dieselben Regeln, nur die Grundschrift unterscheidet sie. */
.ri-resort__text { font-size: .97rem; line-height: 1.75; color: var(--ink-soft); }
.ay-paket__desc  { font-size: .95rem; line-height: 1.7;  color: var(--ink-soft); }

.ri-resort__text > :first-child,
.ay-paket__desc  > :first-child { margin-top: 0; }
.ri-resort__text > :last-child,
.ay-paket__desc  > :last-child  { margin-bottom: 0; }
.ri-resort__text p,
.ay-paket__desc  p { margin: 0 0 .9rem; }
.ri-resort__text strong,
.ay-paket__desc  strong { color: var(--ink); font-weight: var(--font-weight-semibold); }
/* `:not(.btn)` wie bei den übrigen Fliesstext-Behältern (css/pages/index.css):
   beide Container kommen aus `wp_kses_post()`, die Redaktion kann dort also
   einen Knopf setzen — und auf dessen gefüllter Fläche ist eine
   Unterstreichung falsch. */
.ri-resort__text a:not(.btn, .wp-block-button__link),
.ay-paket__desc  a:not(.btn, .wp-block-button__link) { color: var(--color-brand-primary-600); text-decoration: underline; }

.ri-resort__text h3, .ay-paket__desc h3,
.ri-resort__text h4, .ay-paket__desc h4,
.ri-resort__text h5, .ay-paket__desc h5 {
  font-family: var(--display); font-weight: var(--font-weight-regular);
  color: var(--color-brand-primary-600); line-height: 1.25;
  margin: 1.5rem 0 .5rem; font-variation-settings: "opsz" 60;
}
.ri-resort__text h3, .ay-paket__desc h3 { font-size: 1.35rem; }
.ri-resort__text h4, .ay-paket__desc h4 { font-size: 1.15rem; }
.ri-resort__text h5, .ay-paket__desc h5 {
  font-family: var(--body); font-size: .78rem; letter-spacing: .12em;
  text-transform: uppercase; font-weight: var(--font-weight-semibold); color: var(--muted);
}

/* Aufzählungen: einfache Liste mit Marker in der Akzentfarbe.
   Bewusst **kein** Flex am <li>: die Punkte tragen hier oft ein
   «<strong>Bahn:</strong> Fliesstext», und als Flex-Container würde das Label
   ein eigenes Flex-Item — Label und Text zerfielen in zwei Spalten, der Text
   liefe auf halber Breite um. Der Marker kommt deshalb aus list-style, nicht
   aus einem ::before. */
.ri-resort__text ul, .ay-paket__desc ul,
.ri-resort__text ol, .ay-paket__desc ol {
  margin: .5rem 0 .9rem; padding-inline-start: 1.15rem;
}
.ri-resort__text ul,
.ay-paket__desc ul { list-style: square; }
.ri-resort__text ol,
.ay-paket__desc ol { list-style: decimal; }
.ri-resort__text li,
.ay-paket__desc li { margin: 0 0 .35rem; }
.ri-resort__text li:last-child,
.ay-paket__desc li:last-child { margin-bottom: 0; }
.ri-resort__text li::marker,
.ay-paket__desc li::marker { color: var(--color-brand-primary-600); }
.ri-resort__text ul ul, .ay-paket__desc ul ul,
.ri-resort__text ol ol, .ay-paket__desc ol ol { margin: .35rem 0 0; }

.ri-resort__text blockquote,
.ay-paket__desc blockquote {
  margin: 1rem 0; padding: .2rem 0 .2rem 1rem;
  border-left: 2px solid var(--color-brand-primary-600);
  font-style: italic; color: var(--ink);
}
.ri-resort__text hr,
.ay-paket__desc hr {
  border: 0; border-top: 1px solid var(--hair); margin: 1.25rem 0;
}
.ri-resort__text table,
.ay-paket__desc table {
  width: 100%; border-collapse: collapse; margin: .6rem 0 .9rem; font-size: .9rem;
}
.ri-resort__text th, .ay-paket__desc th,
.ri-resort__text td, .ay-paket__desc td {
  text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--hair);
}
.ri-resort__text th,
.ay-paket__desc th { color: var(--ink); font-weight: var(--font-weight-semibold); }
@media (max-width: 860px) {
  .ri-resort__stage--split { grid-template-columns: 1fr; }
  .ri-resort__media-col .rd-stage__media { aspect-ratio: 16/10; }
}

/* ── Block «16 — Tabs» ────────────────────────────────────────────────────────
   Dieselben Regeln wie die Resort-Section, nur der Grund folgt dem Farbthema
   des Blocks statt fest Cream zu sein. Mit der Voreinstellung «cream» ist das
   Ergebnis Pixel für Pixel die Ayurveda-Section (#F5EFE2 in beiden Fällen).
   Die Textfarben müssen je Themen-Ebene neu gesetzt werden — ein Theme setzt
   nur die Variablen, nicht `color` (siehe Eintrag 2026-08-26 zu .page--theme). */
.ri-resort--block { background: var(--theme-bg-page); }
.ri-resort--block .ri-resort__title    { color: var(--theme-text-heading); }
.ri-resort--block .ri-resort__tab-title { color: var(--theme-text-heading); }
.ri-resort--block .ri-resort__text     { color: var(--theme-text-body); }

/* Auf dunklem Grund braucht die Reiter-Leiste helle Schrift und Saffron als
   aktive Farbe — Petrol wäre dort unlesbar (dieselbe Regel wie beim Accordion). */
.ri-resort--block[data-theme="petrol"] .rd-day-tab,
.ri-resort--block[data-theme="dark"]   .rd-day-tab {
  color: var(--theme-text-body);
}
.ri-resort--block[data-theme="petrol"] .rd-day-tab:hover,
.ri-resort--block[data-theme="dark"]   .rd-day-tab:hover,
.ri-resort--block[data-theme="petrol"] .rd-day-tab.is-active,
.ri-resort--block[data-theme="dark"]   .rd-day-tab.is-active {
  color: var(--color-brand-secondary-500);
  border-bottom-color: var(--color-brand-secondary-500);
}