/* ==================================================================
   region-page.css - Slice 33 (P1d) Template-Rebuild
   DESIGN-V2-PORT (2026-09-10): Die /reisen/-Familie laeuft auf dem
   v2-Doppel-Theme (SOUL v2): Dunkel ist Primaer, Hell erste Klasse.
   Der Generator setzt data-theme + FOUC-Skript; dadurch verlaesst
   die Familie den html:not([data-theme])-Light-Kompatblock der
   tokens.css automatisch. Shell und Inhalte bleiben Klassen-kompatibel
   (design-system.min.js wartet auf nav__toggle/nav__links/js-enabled).
   Kanon: NUR var()-Referenzen auf tokens.css plus color-mix-Rezepte
   der v2-Konstanten aus css/homepage-v2.css (--kp-line/--kp-card-
   Anmutung, keine Kopie der Datei — Budget 12/10/4 bleibt gruen,
   homepage-v2.css im Bundle waere 17/14/5).
   Einzige Farbliterale: der Papier-Pinning-Block fuer die JS-Widgets
   (regionChart.js/market-pulse.js rechnen in Light-Kanonwerten;
   ihre Badges sind kontrastgetestet auf genau diesen Werten).
   Budget: <=12 Farben, <=10 font-sizes, <=4 box-shadows
   (tools/design-budget.py, Slice-30-Hard-Gate).
   Klassenvertrag: alle rp-*-Klassen des Generators + Shell
   (site-header/nav/footer/logo/skip-link/sr-only) + JS-Zustaende
   (reveal/visible/open/scrolled/js-enabled von design-system.js).
   ================================================================== */

/* --- RP-Tints: v2-Rezepte (color-mix auf Tokens, wie --kp-* in
   homepage-v2.css) — keine Farbliterale mehr, beide Themes stabil --- */
:root {
  --rp-ghost: color-mix(in srgb, var(--primary) 4%, transparent);
  --rp-tint: color-mix(in srgb, var(--primary) 7%, transparent);
  --rp-line: color-mix(in srgb, var(--primary) 26%, var(--border));
  --rp-focus: color-mix(in srgb, var(--primary) 45%, transparent);
}

/* --- Basis --- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--primary); }
main { display: block; }

/* --- Shell: Skip-Link / Header / Nav --- */
.skip-link {
  position: absolute; top: -100px; left: 0;
  min-height: 44px;
  background: var(--text); color: var(--text-on-dark);
  padding: var(--sp-2) var(--sp-4);
  z-index: 9999;
  border-radius: 0 0 var(--radius-sm) 0;
  transition: top var(--dur-fast) ease;
}
.skip-link:focus { top: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
}
.site-header__inner {
  max-width: var(--container); margin-inline: auto;
  padding: var(--sp-4) var(--sp-5);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
}
.logo {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-lg); font-weight: 600;
  color: var(--text); text-decoration: none;
  min-height: 44px; /* Touch-&-Typo-Floor 14.09. */
}
.logo:hover { text-decoration: none; }
.logo__mark {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--primary);
}
.logo__mark svg { width: 24px; height: 24px; }
.nav ul { display: flex; align-items: center; gap: var(--sp-5); list-style: none; margin: 0; padding: 0; }
.nav a:not(.nav__cta) { color: var(--text-muted); font-size: var(--fs-sm); min-height: 44px; min-width: 44px; /* Floor 14.09. */ display: inline-flex; align-items: center; text-decoration: none; }
.nav a:not(.nav__cta):hover { color: var(--primary); text-decoration: underline; }
.nav__cta {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-4);
  background: var(--accent);
  color: var(--text-on-accent) !important;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm); font-weight: 600;
  text-decoration: none;
}
.nav__cta:hover { background: var(--accent-dark); text-decoration: none; }
.nav__toggle {
  display: none; width: 44px; height: 44px;
  background: none; border: none; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav__toggle span { display: block; width: 22px; height: 2px; background: var(--text); transition: transform var(--dur-fast) ease, opacity var(--dur-fast) ease; }
.nav__toggle[aria-expanded=true] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded=true] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded=true] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Shell: Footer (tokengetrieben — flippt automatisch mit dem Theme) --- */
.footer {
  background: var(--bg-dark); color: var(--text-on-dark);
  padding: var(--sp-8) 0 var(--sp-5);
  margin-top: var(--sp-9);
}
.footer__top {
  max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-5);
}
.footer__brand {
  font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600;
  margin: 0 0 var(--sp-2); color: var(--text-on-dark);
}
.footer__desc {
  font-size: var(--fs-sm); line-height: 1.55;
  color: var(--text-on-dark-muted); margin: 0 0 var(--sp-5); max-width: 60ch;
}
.footer__ad {
  margin: 0 0 var(--sp-6); padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm); line-height: 1.5;
  color: var(--text-on-dark-muted); max-width: 560px;
}
.footer__ad strong { color: var(--text-on-dark); font-weight: 600; }
.footer__ad a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: inherit; text-decoration: underline;
}
.footer-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6); margin-bottom: var(--sp-6);
}
.footer-col { display: flex; flex-direction: column; align-items: flex-start; }
.footer-col__heading {
  font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-on-dark); margin: 0 0 var(--sp-3);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.footer-col a {
  /* Touch-&-Typo-Floor 14.09.: Footer-Navigation 44px Hit-Flaeche */
  display: inline-flex; align-items: center; min-height: 44px; min-width: 44px;
  color: var(--text-on-dark-muted); text-decoration: underline; text-underline-offset: 3px;
}
.footer-col a:hover { color: var(--text-on-dark); }
.footer-bottom {
  max-width: var(--container); margin-inline: auto; padding: var(--sp-5);
  border-top: 1px solid var(--border-dark);
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--sp-3); flex-wrap: wrap;
  font-size: var(--fs-xs); color: var(--text-on-dark-muted);
}
.footer-bottom__status { color: var(--text-on-dark-muted); }
.footer-bottom__updated { color: var(--text-on-dark-muted); }

/* --- Reveal (design-system.js; noscript-Fallback im HTML) --- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.reveal.visible { opacity: 1; transform: none; }

/* --- Regions-Seitenlayout --- */
.rp-wrap {
  max-width: 1140px; margin: 0 auto;
  padding: var(--sp-7) var(--sp-4) var(--sp-8);
}
.rp-crumbs { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--sp-3); }
.rp-crumbs a {
  display: inline-flex; align-items: center; min-height: 44px; min-width: 44px;
  color: var(--primary); text-decoration: none;
}
.rp-crumbs a:hover { text-decoration: underline; }
.rp-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 600; line-height: 1.1; letter-spacing: -.015em;
  margin: var(--sp-2) 0 var(--sp-3); color: var(--text);
}
.rp-h1__sub { display: block; font-size: var(--fs-xl); font-weight: 500; letter-spacing: 0; color: inherit; }
.rp-eyebrow {
  display: flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-muted);
}
.rp-sub { color: var(--text-body); font-size: var(--fs-md); max-width: 640px; line-height: 1.55; }
.rp-h2 {
  font-family: var(--font-display); font-size: var(--fs-xl);
  font-weight: 600; margin: var(--sp-5) 0 var(--sp-2); color: var(--text);
}
.rp-note { font-size: var(--fs-sm); color: var(--text-muted); }
/* Touch-&-Typo-Floor 14.09. (SOUL-Ausnahme Inline-Links): mind. 24x24px
   Trefferflaeche plus Padding-Abstand fuer Links im Satz. */
.rp-note a { display: inline-flex; align-items: center; min-height: 24px; min-width: 24px; padding: 3px 2px; margin: -3px 0; text-decoration: underline; text-underline-offset: 3px; }

/* --- Tabelle --- */
.rp-table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  margin-top: var(--sp-3); background: var(--bg-elevated);
}
.rp-table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); min-width: 420px; }
.rp-table th {
  text-align: left; font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-muted);
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 2px solid var(--border);
  white-space: nowrap; background: var(--rp-ghost);
}
.rp-table td { padding: var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--border); white-space: nowrap; }
.rp-table tr:last-child td { border-bottom: none; }
.rp-table a { color: var(--text); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; padding: var(--sp-2) 0; margin: calc(var(--sp-2) * -1) 0; }
.rp-table a:hover { color: var(--primary); text-decoration: underline; }
.rp-num { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.rp-price { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }

/* --- Badges --- */
.rp-badge {
  display: inline-block; font-size: var(--fs-xs); font-weight: 700;
  padding: 3px var(--sp-2); border-radius: var(--radius-full); letter-spacing: .03em;
}
.rp-badge--live { color: var(--success); background: var(--success-light); }
.rp-badge--watch { color: var(--warning); background: var(--warning-light); }

/* --- Fakten / Editorial --- */
.rp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--sp-3); margin-top: var(--sp-4); }
.rp-fact {
  border: 1px solid var(--rp-line); border-radius: var(--radius-md);
  padding: var(--sp-4); background: var(--rp-ghost);
}
.rp-fact__label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); margin-bottom: var(--sp-1); }
.rp-editorial {
  margin-top: var(--sp-6); padding: var(--sp-5);
  border-radius: var(--radius-md); background: var(--rp-tint);
  border: 1px solid var(--rp-line);
}
.rp-h3 {
  font-family: var(--font-display); font-size: var(--fs-lg);
  font-weight: 600; margin: var(--sp-4) 0 var(--sp-2); color: var(--text);
}
.rp-ed-list { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); display: grid; gap: var(--sp-2); color: var(--text-body); line-height: 1.55; }
.rp-ed-parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: var(--sp-2) var(--sp-4); margin: var(--sp-2) 0 0; }
.rp-ed-parts dt { font-weight: 700; color: var(--text); margin-top: var(--sp-2); }
.rp-ed-parts dd { margin: 0; color: var(--text-muted); line-height: 1.5; }
.rp-editorial .rp-note { margin-top: var(--sp-4); }

/* --- CTA --- */
.rp-cta {
  margin-top: var(--sp-6); padding: var(--sp-5);
  border-radius: var(--radius-md); background: var(--bg-elevated);
  border: 1px solid var(--rp-line);
}
.rp-cta__btn {
  display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3);
  background: var(--accent); color: var(--text-on-accent);
  font-weight: 700; padding: 13px 26px;
  border-radius: var(--radius-md); text-decoration: none;
  transition: transform var(--dur-fast) var(--ease);
}
.rp-cta__btn:hover { transform: translateY(-1px); }
.rp-cta__btn svg, .nav__cta svg { width: 18px; height: 18px; }

/* --- Nachbar-Regionen --- */
.rp-neighbors { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--sp-2); margin-top: var(--sp-3); }
.rp-neighbor {
  display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  text-decoration: none; background: var(--bg-elevated);
}
.rp-neighbor:hover { border-color: var(--primary); }
.rp-neighbor b { color: var(--text); font-size: var(--fs-base); }
.rp-neighbor span { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--primary); white-space: nowrap; }

/* --- R43 „Der Traum führt": Eingangs-Bühne (Region + Hub + Overview) ---
   Fernweh-Statement in Display-Größe, danach das echte Foto als große
   Bühne (Verfassung Regel 1/5: EIN Blickführer, Foto-Regie statt
   Füllmaterial), dann der einordnende Lead. Mobil erzählt der Kopf von
   selbst nacheinander: H1 → Foto → Lead (R37-Muster, natürliche
   Dokumentordnung). Skalen-Treue (Regel 3): Display nur im Hero; keine
   neuen Farb-/Größen-Literale (Budget 12/10/4 bleibt grün). */
.rp-wrap .rp-head--dream .rp-h1 {
  font-size: var(--fs-display-hero);
  line-height: 1.04;
  margin: var(--sp-4) 0 var(--sp-5);
  /* Deutsche Typografie: lange Wortkoerper („Mittelalterstadt",
     „Miniaturkontinent") trennen sich sauber statt zu ueberlaufen
     (320px-Reflow-Gate region-editorial.spec). overflow-wrap nur als
     Fallback fuer Engines ohne de-Hyphenation. */
  hyphens: auto;
  overflow-wrap: break-word;
}
.rp-wrap .rp-head--dream .rp-h1 .rp-h1__sub {
  display: block;
  margin-top: var(--sp-2);
  line-height: 1.2;
}
.rp-stage { margin: 0 0 var(--sp-6); }
.rp-stage img {
  display: block; width: 100%;
  height: clamp(320px, 56vh, 520px);
  object-fit: cover;
  border-radius: var(--radius-md);
}
.rp-stage figcaption {
  padding: var(--sp-2) var(--sp-1) 0;
  font-size: var(--fs-sm); color: var(--text-muted);
}

/* --- Laender-Tafel (Overview, R35) — Datensatz statt Karten-Wand (Verfassung Regel 6).
   Erbt die Familien-Tafel rp-table; dazu: rechts gepinnter Tagespreis,
   Quelle+Stand direkt am Tafelkopf, mobile Record-Rows ohne Neben-Spalte. --- */
.rp-table--laender { min-width: 460px; }
.rp-landhead__price { text-align: right; }
.rp-landrow__price { text-align: right; }
.rp-table__src {
  display: block; font-family: var(--font-mono); font-weight: 400;
  text-transform: none; letter-spacing: .02em; color: var(--text-muted);
  white-space: normal; margin-top: var(--sp-1);
}
.rp-landrow th { font-weight: 400; }
/* Touch-&-Typo-Floor 14.09.: Laender-Links sind lesende Navigation, keine
   Deko-Header-Zellen — mindestens 14px unabhpaengig vom Spaltenkopf-Stil. */
.rp-table--laender .rp-landrow th a { font-size: var(--fs-sm); }
.rp-table--laender .rp-landrow th { font-size: var(--fs-sm); }
.rp-landrow th a { justify-content: flex-start; gap: var(--sp-2); }
.rp-landrow__n { color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* --- R35 Overview-Kopf: „Stille mit Groesse" (R33-Methode, auf den Index-
   Hero uebertragen): Der Kopf ist der EIN dominante Blickfang (Verfassung
   Regel 1), die Laender-Tafel die Begleitung. Skalen-Treue (Regel 3): die
   v2-Display-Tokens --fs-display-hero/--fs-display-section fuehren; Luft
   vor der Tafel-Ankunft nach Regel 2 (--sp-9 Sektionsrhythmus). --- */
.rp-wrap .rp-head--overview { margin: var(--sp-6) 0 var(--sp-9); }
.rp-wrap .rp-head--overview .rp-h1 {
  font-size: var(--fs-display-hero);
  line-height: 1.02; margin: var(--sp-4) 0 var(--sp-5);
}
.rp-wrap .rp-head--overview .rp-h1__sub {
  font-size: var(--fs-display-section); font-weight: 500;
  letter-spacing: -.01em;
}
.rp-wrap .rp-head--overview .rp-sub {
  max-width: 560px; margin-top: var(--sp-4); font-size: var(--fs-lg);
}
.rp-fact { border-color: var(--border); background: var(--bg-elevated); border-radius: var(--radius-sm); }
.rp-editorial { background: transparent; padding: var(--sp-5) 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; }
.rp-cta { background: var(--bg-elevated); border-color: var(--border); border-radius: var(--radius-sm); }
.rp-stage img { border-radius: var(--radius-sm); }
.rp-table--laender .rp-landrow th a:focus-visible, .rp-cta__btn:focus-visible, .rp-neighbor:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

/* --- Filter (Overview) --- */
.rp-filter { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin: var(--sp-4) 0 var(--sp-1); align-items: center; }
.rp-filter__search { flex: 1; min-width: 220px; }
.rp-filter__search input {
  width: 100%; min-height: 44px; padding: 11px 14px;
  border: 1px solid var(--control-border); border-radius: var(--radius-sm);
  font-size: var(--fs-base); background: var(--bg-elevated); color: var(--text);
  font-family: inherit;
}
.rp-filter__search input:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
.rp-filter__sort select {
  min-height: 44px; padding: 11px var(--sp-3);
  border: 1px solid var(--control-border); border-radius: var(--radius-sm);
  font-size: var(--fs-sm); background: var(--bg-elevated); color: var(--text);
  cursor: pointer; font-family: inherit;
}
.rp-filter__count { font-size: var(--fs-sm); color: var(--text-muted); margin: 0 0 var(--sp-1); }

/* --- R34 Design-Authority: „Die Tafel fuehrt" (Region-Seiten) ---
   Marktdaten als EIN Datensatz-Board am Seitenanfang (Verfassung
   Regel 6: rechteckige Zeilen, rechts gepinnte Werte, Quelle und
   Stand direkt am Messwert). Nur Token-Referenzen — die Papier-
   Literale der alten Widget-Pinning-Loesung sind entfallen; die
   JS-Widgets fuellen denselben Datensatz nach (fail-soft). */
.rp-head { margin: 0 0 var(--sp-7); }
.rp-head .rp-h1 { margin: var(--sp-2) 0 var(--sp-3); }

.rp-dataset { margin: 0 0 var(--sp-9); }
.rp-dataset__title {
  font-family: var(--font-mono);
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-muted);
  margin: 0 0 var(--sp-3);
}
.rp-dataset__board {
  display: grid; grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
  gap: var(--sp-7);
  padding: var(--sp-6) var(--sp-6) var(--sp-5);
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
}
.rp-dataset__label {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-muted); margin: 0 0 var(--sp-2);
}
.rp-dataset__price {
  font-family: var(--font-display); font-size: var(--fs-display-section);
  font-weight: 600; line-height: 1.05; letter-spacing: -.015em;
  font-variant-numeric: tabular-nums;
  color: var(--text); margin: 0;
}
.rp-dataset__stand {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--text-muted); margin: var(--sp-2) 0 0;
}
.rp-dataset__rows { margin: var(--sp-5) 0 0; }
.rp-dataset__row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--border);
}
.rp-dataset__row dt { font-size: var(--fs-sm); color: var(--text-muted); }
.rp-dataset__row dd {
  margin: 0; font-size: var(--fs-base); font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--text);
  text-align: right; white-space: nowrap;
}
.rp-dataset__verdict {
  margin: var(--sp-4) 0 0; padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm); line-height: 1.6; color: var(--text-body);
}
.rp-dataset__verdict b { color: var(--text); font-weight: 600; }
.rp-dataset__src {
  margin: var(--sp-4) 0 0;
  font-family: var(--font-mono); font-size: var(--fs-sm);
  color: var(--text-muted);
}
.rp-dataset__src a {
  color: var(--primary);
  display: inline-flex; align-items: center; min-height: 44px;
}
.rp-dataset__chart { min-width: 0; align-self: center; }
.rp-dataset__trust, .rp-trustline {
  margin: var(--sp-3) 0 0;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: .02em; color: var(--text-muted);
}

/* Chart-Integration in die Tafel: Basis-Layout injiziert regionChart.js;
   Farben und Flaechen kommen aus der Familien-Kaskade (beide Themes AA,
   Regel 8: der Trend ist Status, keine zweite Akzentflaeche). */
.rp-dataset__chart .region-chart { max-width: none; margin: 0; }
.rp-dataset__chart .region-chart__head { margin-bottom: var(--sp-2); }
.rp-dataset__chart .region-chart__title {
  color: var(--text-muted);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: .07em;
}
.rp-dataset__chart .region-chart__trend {
  padding: 0; border-radius: 0; background: transparent;
  font-family: var(--font-mono); font-size: var(--fs-xs);
}
.rp-dataset__chart .region-chart__trend--down { background: transparent; color: var(--success); }
.rp-dataset__chart .region-chart__trend--up { background: transparent; color: var(--warning); }
.rp-dataset__chart .region-chart__trend--flat { background: transparent; color: var(--text-muted); }
.rp-dataset__chart .region-chart__svg-wrap {
  background: transparent; border-radius: 0; padding: var(--sp-2) 0 0;
}
.rp-dataset__chart .region-chart__line { stroke: var(--primary); }
.rp-dataset__chart .region-chart__area { fill: color-mix(in srgb, var(--primary) 8%, transparent); }
.rp-dataset__chart .region-chart__dot { fill: var(--bg-elevated); stroke: var(--primary); }
.rp-dataset__chart .region-chart__dot--min { stroke: var(--success); }
.rp-dataset__chart .region-chart__dot--max { stroke: var(--warning); }

/* 30-Tage-Preisverlauf als server-generiertes Inline-SVG (2026-09-18):
   viewBox 0 0 100 40, responsiv ueber width:100%. Gleiche Farblogik wie
   der JS-Sparkline-Kanon: Linie --primary, Flaeche 8% --primary, Min-Punkt
   --success, Jetzt-Punkt --primary. Nur Design-Tokens (Regel 8: der Trend
   ist Status, keine zweite Akzentflaeche). */
.rp-trend { margin: 0; min-width: 0; }
.rp-trend__svg { display: block; width: 100%; height: auto; overflow: visible; }
.rp-trend__line { fill: none; stroke: var(--primary); stroke-width: .8; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.rp-trend__area { fill: color-mix(in srgb, var(--primary) 8%, transparent); stroke: none; }
.rp-trend__dot { fill: var(--bg-elevated); stroke-width: .5; vector-effect: non-scaling-stroke; }
.rp-trend__dot--min { stroke: var(--success); }
.rp-trend__dot--now { stroke: var(--primary); }
.rp-trend__caption {
  margin: var(--sp-2) 0 0; color: var(--text-muted);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: .07em; text-transform: uppercase;
}
.rp-trend__note {
  margin: 0; color: var(--text-muted);
  font-size: var(--fs-sm); line-height: 1.5;
}
.rp-trend__note a { color: var(--text); }
.rp-dataset__chart .region-chart__meta { color: var(--text-muted); }
.rp-dataset__chart .region-chart__fallback { color: var(--text-muted); padding: var(--sp-4) 0; }

/* R43: Die Foto-Bühne ist Teil des Eingangs (rp-stage) — das alte
   Fenster-Kapitel rp-window ist entfallen (eine Handschrift pro Familie). */

/* Fakten als leise Datenzeile (statt Karten-Grid) */
.rp-factsline {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6);
  margin: var(--sp-2) 0 var(--sp-8);
}
.rp-factsline__pair { display: flex; align-items: baseline; gap: var(--sp-2); }
.rp-factsline dt { font-size: var(--fs-sm); color: var(--text-muted); }
.rp-factsline dd { margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--text); }

/* --- FAQ-Lane (Slice 113): Zeilen-Datensatz wie die Editorial-Sektion;
   native details/summary, kein JS, kein Icon — Regel 6 (Daten als
   Datensatz), Regel 4 (radius-md Zeilen-Flaeche), Skalen-Treue via
   var(--fs-*), Fokus-Kanon var(--rp-focus). --- */
.rp-faq { margin: var(--sp-8) 0 0; }
.rp-faq__item {
  border: 1px solid var(--rp-line);
  border-radius: var(--radius-md);
  background: var(--rp-ghost);
  padding: 0 var(--sp-4);
  margin-top: var(--sp-2);
}
.rp-faq__item:first-of-type { margin-top: var(--sp-3); }
.rp-faq__item summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
  min-height: 44px;
  font-weight: 600; color: var(--text);
  padding: var(--sp-3) 0;
}
.rp-faq__item summary::-webkit-details-marker { display: none; }
.rp-faq__item summary::after {
  content: '+';
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--text-muted);
  transition: transform .2s var(--ease, ease);
}
.rp-faq__item[open] summary::after { content: '\2212'; }
.rp-faq__item summary:focus-visible {
  outline: 2px solid var(--rp-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.rp-faq__item p {
  margin: 0; padding: 0 0 var(--sp-4);
  color: var(--text-body); line-height: 1.6;
  font-size: var(--fs-sm);
}
@media (prefers-reduced-motion: reduce) {
  .rp-faq__item summary::after { transition: none; }
}

/* --- Mobil --- */
@media (max-width: 768px) {
  .nav__toggle { display: flex; }
  .nav ul {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg-elevated); border-bottom: 1px solid var(--border);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--sp-3) var(--sp-5);
  }
  .nav ul.open { display: flex; }
  .nav ul a { display: block; padding: var(--sp-2) var(--sp-1); border-bottom: 1px solid var(--border-light); }
  .nav ul li:last-child a { border-bottom: none; align-self: flex-start; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
  /* R48 Tafel-Tiefe mobil (Scorecard-Schwäche): Die Marktdaten-Tafel stand
     auf 390x844 erst bei ~1827px — hinter dem kompletten Editorial. Mobil
     erzählt die Seite jetzt: Traum (Hero) → Zahlen (Tafel) → Einordnung
     (Editorial). Desktop hält die R43-Dramaturgie; DOM-Reihenfolge (SEO,
     FAQ-Bezüge 'Modul oben') bleibt unberührt — reine Präsentationsordnung. */
  .rp-wrap { display: grid; }
  .rp-crumbs { order: -4; }
  .rp-head { order: -3; }
  .rp-dataset { order: -2; }
  .rp-editorial { order: -1; }
  .rp-wrap { padding: var(--sp-5) var(--sp-4) var(--sp-6); }
  .rp-dataset__board { grid-template-columns: 1fr; gap: var(--sp-5); padding: var(--sp-5) var(--sp-4) var(--sp-4); }
  .rp-head { margin-bottom: var(--sp-5); }
  .rp-wrap .rp-head--dream .rp-h1 { margin: var(--sp-3) 0 var(--sp-4); }
  .rp-crumbs a { display: inline-block; padding-block: 6px; } /* R48: Tappfad-Komfort, Inline-Link */
  .rp-stage { margin-bottom: var(--sp-5); }
  .rp-stage img { height: clamp(230px, 42vh, 330px); }
}
@media (max-width: 520px) {
  .rp-table { font-size: var(--fs-sm); }
  .rp-table td, .rp-table th { padding: var(--sp-2) var(--sp-3); }
  /* Laender-Tafel als Record-Row (Verfassung Regel 9): Land + gepinnter
     Tagespreis bleiben; Neben-Spalte und Mindestbreite entfallen. */
  .rp-table--laender { min-width: 0; }
  .rp-landrow__n, .rp-landhead__n { display: none; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  /* R48: Footer-Links als 44px-Tastleiter (vorher 21px Zeilenhoehe) */
  .footer-col ul { gap: 4px; }
  .footer-col a {
    display: flex; align-items: center; min-height: 44px;
    text-underline-offset: 4px;
  }
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .rp-cta__btn { transition: none; }
}


/* ── Trust-Zeile (Design-Brief B.3; Slice 93) ──────────────────────
   Kanonische 3-Signal-Trust wie css/trust.css (Slices 63-66/90/91),
   hier als Teil des /reisen/-Seiten-Bundles. Nur Token-Referenzen —
   keine Farb-, font-size- oder Schatten-Literale. Kein CTA, kein
   Akzent (max-1-Akzent-Regel). Markup erzeugt der Generator
   (TRUST_HTML, 1:1 Slice 92). */
.lp-trust.kp-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  margin: var(--sp-5) 0;
  padding: 0;
  list-style: none;
}
.lp-trust.kp-trust .kp-trust__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--text-muted);
}
.lp-trust.kp-trust .kp-trust__item svg {
  flex-shrink: 0;
  color: var(--primary);
}
.lp-trust.kp-trust .kp-trust__item strong {
  color: var(--text-body);
  font-weight: 600;
}
/* Light-Polish: Trust-Signale im Light-Thema dunkler mischen (~6.6:1) */
[data-theme="light"] .lp-trust.kp-trust .kp-trust__item { color: color-mix(in srgb, var(--text-muted) 62%, var(--text)); }
@media (max-width: 640px) {
  .lp-trust.kp-trust {
    flex-direction: column;
    gap: var(--sp-2);
  }
}

/* ══════════════════════════════════════════════════════════════════
   DESIGN-V2-FAMILIEN-OVERRIDES (vor dem Shared-Shell-Block; muessen
   die Shell-spezifitaet `body .site-header` (0,1,1) uebersteigen,
   deshalb `html[data-theme]`-Praefix (0,2,1+). Rezepte 1:1 aus
   css/homepage-v2.css (.kp-Header: Glasleiste, Syne-Logo, blur) —
   wiederverwendet als Familien-CSS statt als zusaetzliches Stylesheet
   (Budget: homepage-v2.css im Bundle waere 17/14/5 statt 7/9/3).
   ══════════════════════════════════════════════════════════════════ */
html[data-theme] body .site-header {
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}
html[data-theme] body .site-header .logo {
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
}
html[data-theme] body .site-header .nav__links a:not(.nav__cta) {
  font-weight: 500;
  letter-spacing: 0;
}
html[data-theme] body .site-header .nav__cta {
  border-radius: var(--radius-md);
}
html[data-theme] body .site-header .nav__links {
  background: transparent;
  border-bottom: none;
}
/* Mobil-Menue: Glasflaeche wie Kopfzeile (Shell setzt --bg-elevated) */
@media (max-width: 780px) {
  html.js-enabled[data-theme] body .site-header .nav__links {
    background: color-mix(in srgb, var(--bg) 96%, transparent);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line);
  }
}
/* v2-Focus-Kanon: 2px Gold/Teal (SOUL v2) — Shell setzt 3px accent */
html[data-theme] body .site-header a:focus-visible,
html[data-theme] body .site-header button:focus-visible,
html[data-theme] body .guide-list a:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
/* Ueberschriften: v2-Negativ-Tracking (Shell setzt letter-spacing 0) */
html[data-theme] .rp-h1, html[data-theme] .page-hero h1, html[data-theme] .hero__title { letter-spacing: -0.02em; }
/* Monoprice-Label-Anmutung fuer Eyebrows (Shell setzt letter-spacing 0) */
html[data-theme] .rp-eyebrow, html[data-theme] .eyebrow { letter-spacing: .08em; font-family: var(--font-mono); font-weight: 500; }
/* Theme-Toggle im Familien-Header: Stil kommt aus design-system-v2.css */
html[data-theme] body .site-header .ds2-theme-toggle { flex: 0 0 44px; }
@media (max-width: 780px) {
  html[data-theme] body .site-header .site-header__inner { gap: var(--sp-2); }
}
/* Schmalste Viewports (320px-Reflow-Gate, region-editorial.spec): Der
   Review-Container rendert Syne/DM-Sans ~3px breiter als macOS — statt
   auf Font-Metriken zu wetten, bekommt die Kopfzeile Slack (engere
   Padding/Gaps) UND einen Ellipsis-Guard fuer den Logotext, damit der
   Theme-Toggle (44px-Tap-Target bleibt unangetastet) strukturell nie
   aus dem Viewport ragt. */
@media (max-width: 380px) {
  html[data-theme] body .site-header .site-header__inner { padding-inline: var(--sp-2); gap: var(--sp-2); }
  html[data-theme] body .site-header .logo { min-width: 0; overflow: hidden; }
  html[data-theme] body .site-header .logo > span:last-child { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme] body .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* TRAEVEL shared shell: generated by tools/build-shared-shell.py */
/* Shared shell source. Run tools/build-shared-shell.py after editing. */
html { scroll-padding-top: 84px; }
body > .skip-link { position: absolute; top: -100px; left: 0; z-index: 9999; min-height: 44px; padding: var(--sp-3) var(--sp-4); background: var(--primary); color: var(--text-on-primary); }
body > .skip-link:focus { top: 0; }
body .site-header, body .site-header .logo__mark { box-shadow: none; }
body .site-header { background: var(--bg-elevated); border-bottom: 1px solid var(--border); }
body .site-header .site-header__inner { min-height: 68px; padding-block: var(--sp-2); flex-wrap: nowrap; }
body .site-header .logo { gap: var(--sp-2); font-size: var(--fs-md); letter-spacing: 0; white-space: nowrap; }
body .site-header .logo__mark { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--primary); color: var(--text-on-primary); }
body .site-header .logo__mark svg { width: 20px; height: 20px; }
body .site-header .nav__links { gap: var(--sp-2); }
body .site-header .nav__links a { min-height: 44px; display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0; }
body .site-header .nav__cta { white-space: nowrap; border-radius: var(--radius-sm); }
body .site-header .nav__cta svg { flex: 0 0 18px; width: 18px; height: 18px; }
body .site-header .nav__toggle { flex: 0 0 44px; width: 44px; height: 44px; padding: var(--sp-2); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elevated); }
body .site-header .nav__toggle span { display: block; position: static; flex: 0 0 2px; width: 20px; height: 2px; margin: 0; opacity: 1; background: var(--text); }
body .site-header a:focus-visible, body .site-header button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.page-hero h1, .hero__title, .rp-h1 { font-size: var(--fs-3xl); line-height: 1.15; letter-spacing: 0; text-wrap: balance; }
.rp-crumbs a { text-decoration: underline; text-underline-offset: 3px; }
body .hero:has(.hero-content) { background: var(--bg); color: var(--text); }
body .hero:has(.hero-content) h1, body .hero:has(.hero-content) p, body .hero .hero-eyebrow { color: var(--text); text-shadow: none; }
body .hero .hero-content .price-note { opacity: 1 !important; }
.eyebrow, .rp-eyebrow, .section-title, .footer-col__heading { letter-spacing: 0; }
body .footer, body .site-footer { --text-on-dark: var(--text); --text-on-dark-muted: var(--text-muted); --border-dark: var(--border); background: var(--bg-soft); color: var(--text-muted); border-top: 1px solid var(--border); }
body .footer .footer__brand, body .site-footer .footer-brand, body .footer .footer-col__heading, body .site-footer .footer-col__heading { color: var(--text); }
body .footer a, body .site-footer a, body .footer__desc, body .footer-disclaimer, body .footer-bottom { color: var(--text-muted); }
body .footer a:hover, body .site-footer a:hover { color: var(--primary); }
body .footer__ad { background: transparent; border-color: var(--border); color: var(--text-muted); }
body .footer__ad strong { color: var(--text); }
body .footer-bottom { border-color: var(--border); }
.guide-directory { width: min(calc(100% - 48px),var(--container)); margin: 0 auto; padding-block: var(--sp-7) var(--sp-8); }
.guide-directory__intro { max-width: 65ch; margin: 0 0 var(--sp-6); color: var(--text-muted); font-size: var(--fs-md); }
.guide-directory__links { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); padding-bottom: var(--sp-5); border-bottom: 1px solid var(--border); }
.guide-directory__links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--primary); font-weight: 600; text-underline-offset: 5px; }
.guide-group { padding-top: var(--sp-7); }
.guide-group h2 { margin: 0 0 var(--sp-5); color: var(--text); font-size: var(--fs-2xl); font-family: var(--font-display); font-weight: 550; }
.guide-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: var(--sp-7); margin: 0; padding: 0; list-style: none; }
.guide-list li { min-width: 0; border-top: 1px solid var(--border); }
.guide-list a { min-height: 92px; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding-block: var(--sp-4); color: var(--text); text-decoration: none; }
.guide-list a:hover { color: var(--primary); }
.guide-list a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.guide-list h3 { margin: 0; font-family: var(--font-body); font-size: var(--fs-base); font-weight: 600; line-height: 1.5; letter-spacing: 0; }
.guide-list svg { flex: 0 0 20px; width: 20px; height: 20px; color: var(--primary); }
@media (max-width: 780px) {
  body .site-header .site-header__inner { padding-inline: var(--sp-4); }
  html.js-enabled body .site-header .nav__toggle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
  html.js-enabled body .site-header .nav__links { display: none; position: absolute; top: 100%; left: 0; right: 0; padding: var(--sp-3) var(--sp-4); background: var(--bg-elevated); border-bottom: 1px solid var(--border); flex-direction: column; align-items: stretch; }
  html.js-enabled body .site-header .nav__links.open { display: flex; }
  html:not(.js-enabled) body .site-header .nav__links { display: flex; flex-wrap: wrap; position: static; }
  html:not(.js-enabled) body .site-header .site-header__inner { flex-wrap: wrap; }
  html:not(.js-enabled) body .site-header .nav__toggle { display: none; }
  body .site-header .nav__links a { width: 100%; }
  body .site-header .nav__links .nav__cta { justify-content: center; }
  .page-hero, .hero { padding-block: var(--sp-6); }
  .guide-directory { width: calc(100% - 32px); padding-top: var(--sp-5); }
  .guide-list { grid-template-columns: 1fr; }
  .guide-list a { min-height: 80px; }
}
@media (max-width: 360px) { body .site-header .logo { font-size: var(--fs-base); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }