/* ==================================================================
   lp-page.css — R40 Design-Authority: Root-Landingpage-Familie v2
   (Option B Minimalport OHNE 301s; Mandat R40, Vorarbeit
   UEBERGABE-ROOT-LPS validiert).

   6 Pauschalreise-LPs (mallorca/antalya/dubai/hurghada/kreta/
   teneriffa-pauschalreise.html) auf die Familien-Shell (R38-Kanon
   wie deals/stadt/ratgeber): data-theme + FOUC, Glas-Kopfzeile mit
   Theme-Toggle, Skip-Link, v2-Footer. Regie „Tagespreis-Tafel führt,
   Guide folgt": EIN Datensatz-Board (rp-dataset-Rezept, Regel 6)
   mit Bake-Werten aus dem bisherigen lp-today-Streifen (Wahrheit
   1:1), Chart in der Tafel, Mono-Trust-Zeile statt Icon-Chips,
   Guide-Content wortgleich, Gradient-CTAs zu Papier-Karten
   abgesenkt (Regel 8: EIN akzentierter CTA pro Blickfeld).

   Kanon: NUR var()-Referenzen auf tokens.css (Budget <=12/10/4 mit
   design-system-v2.css + check24-embed.css im Bundle). Keine Farb-,
   font-size- oder Schatten-Literale. Radien nur 6/8/full
   (Verfassung Regel 4). Link-Ziele + PID 299075 unangetastet.
   ================================================================== */

/* --- Tints (v2-Rezepte wie --rp-*: color-mix auf Tokens) --- */
:root {
  --lp-line: color-mix(in srgb, var(--primary) 26%, var(--border));
  --lp-ghost: color-mix(in srgb, var(--primary) 4%, 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); }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 3px;
}
main { display: block; }

/* --- Shell: Skip-Link / Header / Nav (Familien-Handschrift) --- */
.skip-link {
  position: absolute; top: -100px; left: 0;
  min-height: 44px;
  background: var(--primary); color: var(--text-on-primary);
  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; }
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
}
.site-header__inner {
  max-width: var(--container-wide); margin-inline: auto;
  padding: var(--sp-3) 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: 700; letter-spacing: -0.02em;
  color: var(--text); text-decoration: none;
  white-space: nowrap; min-width: 0;
}
.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);
}
.logo__mark svg { width: 20px; height: 20px; }
.nav { display: flex; align-items: center; gap: var(--sp-4); }
.nav ul { display: flex; align-items: center; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; }
.nav ul a:not(.nav__cta) {
  color: var(--text-muted); font-size: var(--fs-sm); font-weight: 500;
  min-height: 44px; display: inline-flex; align-items: center;
  padding: var(--sp-2) var(--sp-3);
  text-decoration: none;
}
.nav ul 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;
  white-space: nowrap;
}
.nav__cta:hover { background: var(--accent-dark); text-decoration: none; }
.nav__cta svg { flex: 0 0 18px; width: 18px; height: 18px; }
.nav__toggle {
  display: none; width: 44px; height: 44px;
  background: none; border: 1px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.nav__toggle span { display: block; width: 20px; height: 2px; background: var(--text); }
html[data-theme] body .site-header .ds2-theme-toggle { flex: 0 0 44px; }

/* --- Shell: Footer (tokengetrieben, flippt mit dem Theme) --- */
.site-footer {
  background: var(--bg-soft); color: var(--text-muted);
  border-top: 1px solid var(--border);
  margin-top: var(--sp-9);
  padding: var(--sp-7) 0 var(--sp-5);
}
.footer-grid {
  width: min(var(--container-wide), calc(100% - 48px));
  margin-inline: auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--sp-6);
}
.footer-brand {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl);
  color: var(--text); margin: 0 0 var(--sp-2); display: block;
}
.footer-disclaimer { font-size: var(--fs-sm); color: var(--text-muted); max-width: 44ch; margin: 0 0 var(--sp-3); }
.footer__ad {
  font-size: var(--fs-xs); line-height: 1.6; color: var(--text-muted);
  max-width: 560px; margin: 0 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.footer__ad strong { color: var(--text); font-weight: 600; }
.footer__ad a { color: inherit; text-decoration: underline; }
.footer-col__heading {
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 1px;
  text-transform: uppercase; color: var(--text); margin: 0 0 var(--sp-2); font-weight: 500;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: var(--sp-1); }
.footer-grid a {
  color: var(--text-muted); text-decoration: none; font-size: var(--fs-sm);
  display: inline-flex; align-items: center; min-height: 32px;
  transition: color var(--dur-fast) var(--ease);
}
.footer-grid a:hover { color: var(--primary); }
.footer-bottom {
  width: min(var(--container-wide), calc(100% - 48px));
  margin: var(--sp-5) auto 0; padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs); color: var(--text-muted);
  display: flex; justify-content: space-between; gap: var(--sp-3) var(--sp-5); flex-wrap: wrap;
}
.footer-bottom a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom a:hover { color: var(--primary); }

/* --- Seiten-Layout --- */
.lp-wrap {
  max-width: 1140px; margin: 0 auto;
  padding: var(--sp-7) var(--sp-4) var(--sp-8);
}
/* R41 Kopf-Grid nach stadt-hero__grid-Kanon (Gewinner-Muster R36):
   Stimme links (Eyebrow+H1+Lead, Regel 1), portraites Ziel-Fenster
   rechts — EIN ehrbarer Fotomoment je Ziel (Regel 5). */
.lp-head {
  margin: 0 0 var(--sp-9);
  display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--sp-8); align-items: center;
}
.lp-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);
  margin: 0 0 var(--sp-3);
}
.lp-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-display-section);
  font-weight: 600; line-height: 1.05; letter-spacing: -.015em;
  margin: 0 0 var(--sp-4); color: var(--text); text-wrap: balance;
}
.lp-lead {
  color: var(--text-muted); font-size: var(--fs-md);
  max-width: 640px; line-height: 1.55; margin: 0 0 var(--sp-4);
}
.lp-head__meta {
  margin: var(--sp-4) 0 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5);
}
.lp-head__meta p { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }
.lp-note {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--text-muted); margin: var(--sp-2) 0 0;
}

/* --- Fenster-Fotomoment (Regel 5: echtes Ziel, portraites
       Familien-Fenster ~0.775; wahrheitsgemäße Zielgrößen-Attribute im
       Markup; eager + fetchpriority für LCP; srcset 480w/600w, Budget
       ≤90/160 KB). R44b: echtes Flugzeugfenster statt radius-md-
       Rechteck — Form/Rahmen/Scheibe kanonisch aus .ds2-window
       (design-system-v2.css), hier bleibt nur die Spalte. --- */
.lp-window { margin: 0; min-width: 0; }
.lp-window .ds2-window { width: 100%; }
.lp-window img {
  display: block; width: 100%; height: auto;
}
.lp-window figcaption {
  padding: var(--sp-2) var(--sp-1) 0;
  font-size: var(--fs-sm); color: var(--text-muted);
}

/* --- Tagespreis-Tafel (Regel 6: Datensatz-Board, rp-dataset-Rezept).
       Bake-Werte 1:1 aus dem lp-today-Streifen; market-pulse.js füllt
       die data-mp-Zellen live nach (fail-soft „—“). --- */
.lp-dataset { margin: 0 0 var(--sp-9); }
.lp-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);
}
.lp-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: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.lp-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);
}
.lp-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;
}
.lp-dataset__stand {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--text-muted); margin: var(--sp-2) 0 0;
}
.lp-dataset__rows { margin: var(--sp-5) 0 0; }
.lp-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);
}
.lp-dataset__row dt { font-size: var(--fs-sm); color: var(--text-muted); }
.lp-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;
}
.lp-dataset__row dd.lp-dataset__trend { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-sm); }
.lp-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);
}
.lp-dataset__verdict b { color: var(--text); font-weight: 600; }
.lp-dataset__src {
  margin: var(--sp-4) 0 0;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--text-muted);
}
.lp-dataset__src a { color: var(--primary); }
.lp-dataset__chart { min-width: 0; align-self: center; }
.lp-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 aus der Familien-Kaskade, Regel 8: Trend ist Status) */
.lp-dataset__chart .region-chart { max-width: none; margin: 0; }
.lp-dataset__chart .region-chart__head { margin-bottom: var(--sp-2); }
.lp-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;
}
.lp-dataset__chart .region-chart__trend {
  padding: 0; border-radius: 0; background: transparent;
  font-family: var(--font-mono); font-size: var(--fs-xs);
}
.lp-dataset__chart .region-chart__trend--down { background: transparent; color: var(--success); }
.lp-dataset__chart .region-chart__trend--up { background: transparent; color: var(--warning); }
.lp-dataset__chart .region-chart__trend--flat { background: transparent; color: var(--text-muted); }
.lp-dataset__chart .region-chart__svg-wrap { background: transparent; border-radius: 0; padding: var(--sp-2) 0 0; }
.lp-dataset__chart .region-chart__line { stroke: var(--primary); }
.lp-dataset__chart .region-chart__area { fill: color-mix(in srgb, var(--primary) 8%, transparent); }
.lp-dataset__chart .region-chart__dot { fill: var(--bg-elevated); stroke: var(--primary); }
.lp-dataset__chart .region-chart__dot--min { stroke: var(--success); }
.lp-dataset__chart .region-chart__dot--max { stroke: var(--warning); }
.lp-dataset__chart .region-chart__meta { color: var(--text-muted); }
.lp-dataset__chart .region-chart__fallback { color: var(--text-muted); padding: var(--sp-4) 0; }

/* --- Preiswecker-Hinweis (price-alert.js rendert .pa; Integration
       in die Familie ohne JS-Kontraktbruch: Kanon-Radii/-Flächen.
       AA-Fix: das Widget injiziert color:#fff auf var(--primary) —
       im Dark-Theme (Gold-Primär) unzureichend; Token-Überschreibung
       statt JS-Eingriff) --- */
.lp-wrap .pa {
  max-width: none; margin: var(--sp-5) 0 0;
  border-radius: var(--radius-md);
  border-color: var(--border);
  background: var(--bg-elevated);
}
.lp-wrap .pa__title { color: var(--text-muted); }
.lp-wrap .pa__btn {
  background: var(--primary);
  color: var(--text-on-primary);
  border-radius: var(--radius-sm);
}
.lp-wrap .pa__btn:hover { background: var(--primary-light); }

/* --- Guide-Content: H2-Sektionen wortgleich, Rhythmus durch
       Abstände + Papier-Karten (Regel 7) --- */
.lp-section { margin: 0 0 var(--sp-8); }
.lp-section > h2 {
  font-family: var(--font-display); font-size: var(--fs-2xl);
  font-weight: 600; line-height: 1.2; letter-spacing: -.01em;
  color: var(--text); margin: var(--sp-7) 0 var(--sp-3); text-wrap: balance;
}
.lp-section > h2:first-child { margin-top: 0; }
.lp-section h3 { font-size: var(--fs-lg); line-height: 1.35; color: var(--text); margin: var(--sp-5) 0 var(--sp-2); }
.lp-section p { margin: 0 0 var(--sp-3); color: var(--text-body); }
.lp-section strong { color: var(--text); font-weight: 600; }
.lp-section ul, .lp-section ol { margin: 0 0 var(--sp-4); padding-left: var(--sp-5); color: var(--text-body); }
.lp-section li { margin-bottom: var(--sp-2); }
.lp-section a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }

/* Papier-Karte (ersetzt die Gradient-CTA-Boxen; EIN Text-Link statt
   zweitem akzentiertem Button — Regel 8) */
.lp-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
  margin: var(--sp-4) 0;
}
.lp-card__label {
  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-2);
}
.lp-card__heading { font-size: var(--fs-xl); font-weight: 600; color: var(--text); margin: 0 0 var(--sp-2); }
.lp-card p { margin: 0 0 var(--sp-3); color: var(--text-muted); font-size: var(--fs-sm); }
.lp-card__link {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--primary); font-weight: 600;
  text-decoration: underline; text-underline-offset: 5px;
}
.lp-card__link:hover { color: var(--text); }

/* EIN akzentierter Haupt-CTA im Kopf (ds2-btn aus design-system-v2) */
.lp-head__cta {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 44px; margin: var(--sp-3) 0 0;
  background: var(--primary); color: var(--text-on-primary);
  font-weight: 600; font-size: var(--fs-base);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-sm); text-decoration: none;
  transition: background var(--dur-fast) var(--ease);
}
.lp-head__cta:hover { background: var(--primary-light); }
.lp-head__cta svg { flex: 0 0 20px; width: 20px; height: 20px; }

/* --- FAQ (details/summary bleibt: maschinenlesbar, ruhig) --- */
.lp-faq { margin: 0 0 var(--sp-8); }
.lp-faq > h2 {
  font-family: var(--font-display); font-size: var(--fs-2xl);
  font-weight: 600; line-height: 1.2; letter-spacing: -.01em;
  color: var(--text); margin: 0 0 var(--sp-3); text-wrap: balance;
}
.lp-faq details {
  border-bottom: 1px solid var(--border);
}
.lp-faq details:first-of-type { border-top: 1px solid var(--border); }
.lp-faq summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  min-height: 44px; padding: var(--sp-3) 0;
  font-size: var(--fs-base); font-weight: 600; color: var(--text);
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after {
  content: "+";
  font-family: var(--font-mono); font-size: var(--fs-lg); font-weight: 500;
  color: var(--text-muted); flex-shrink: 0;
}
.lp-faq details[open] summary::after { content: "−"; }
.lp-faq details p { margin: 0; padding: 0 0 var(--sp-4); color: var(--text-body); max-width: 70ch; }

/* --- Reisewetter (weather-combo.min.js injiziert .weather-combo__*;
       leises Familien-Re-Styling statt v1-site.min.css-Import).
       AA-Fix: das Widget setzt v1-Temperatur-Farb-Literale INLINE auf
       den Messwerten (für helle Flächen kalibriert — im Dark-Theme
       unzureichender Kontrast). Die Zahl trägt die Information, die
       Farbe war Deko → Familien-Textfarbe (beide Themes AA). --- */
.lp-weather { margin: 0 0 var(--sp-8); }
.lp-weather > h2 {
  font-family: var(--font-display); font-size: var(--fs-2xl);
  font-weight: 600; line-height: 1.2; letter-spacing: -.01em;
  color: var(--text); margin: 0 0 var(--sp-3); text-wrap: balance;
}
.weather-combo .weather-combo__metric-value { color: var(--text) !important; }
.weather-combo {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-6) var(--sp-5);
  margin: 0;
  scroll-margin-top: 90px;
}
.weather-combo__title {
  font-family: var(--font-display); font-size: var(--fs-xl);
  font-weight: 600; color: var(--text); margin: 0; line-height: 1.2;
}
.weather-combo__subtitle { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; line-height: 1.5; }
.weather-combo__header { display: flex; flex-direction: column; gap: var(--sp-1); margin-bottom: var(--sp-5); }
.weather-combo__months {
  display: flex; gap: var(--sp-1); overflow-x: auto;
  padding: var(--sp-1) 0 var(--sp-3); margin: 0 0 var(--sp-3);
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.weather-combo__month {
  flex: 0 0 auto; min-width: 48px; min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  background: var(--bg-soft); color: var(--text-body);
  font-family: inherit; font-size: var(--fs-sm); font-weight: 600;
  border-radius: var(--radius-sm); cursor: pointer;
  position: relative; white-space: nowrap;
}
.weather-combo__month.is-active { background: var(--text); color: var(--text-on-dark); border-color: var(--text); }
.weather-combo__month--best::after {
  content: ""; position: absolute; top: var(--sp-1); right: var(--sp-1);
  width: 6px; height: 6px; border-radius: var(--radius-full);
  background: var(--accent);
}
.weather-combo__detail {
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: var(--sp-5) var(--sp-4);
  border: 1px solid var(--border);
}
.weather-combo__month-name {
  font-family: var(--font-display); font-size: var(--fs-xl);
  font-weight: 600; color: var(--text); line-height: 1;
}
.weather-combo__best-badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  background: var(--accent); color: var(--text-on-accent);
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: .03em; text-transform: uppercase;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-full);
  line-height: 1.5;
}
/* R41-Reviewer-Fund (P1): Bei klassischer Scrollbar (clientWidth 375,
   Linux-Chromium des Review-Containers) trieb der Min-Inhalt der
   Metrik-Karten die 1fr-Spur auf ~305px -> 13px Dokument-Overflow.
   Heilung: Spuren minmax(0,1fr), Items/Body min-width:0 (Text bricht
   normal). Das JS setzt die Klasse .weather-combo ZUSAETZLICH auf den
   inneren #wc-Container -> doppelter Rahmen/Padding seit R40; das
   innere Duplikat wird neutralisiert. */
.weather-combo .weather-combo {
  padding: 0; border: 0; background: transparent; border-radius: 0;
  margin: 0; scroll-margin-top: 0;
}
.weather-combo__metrics { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
@media (min-width: 560px) { .weather-combo__metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.weather-combo__metric { min-width: 0; }
.weather-combo__metric {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  min-height: 76px; min-width: 0;
}
.weather-combo__metric-body { min-width: 0; }
.weather-combo__metric-icon {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius-full);
  background: var(--bg-soft);
}
.weather-combo__metric-label {
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500;
  text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted);
}
.weather-combo__metric-value {
  font-family: var(--font-display); font-size: var(--fs-xl);
  font-weight: 600; color: var(--text); line-height: 1.1;
}
/* R41: overflow-wrap fuer lange Fachwoerter (Tagesmitteltemperatur),
   sonst Mini-Content > Spur unter 360px (Reviewer-P1-Nachbehebung). */
.weather-combo__metric-desc { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.3; overflow-wrap: anywhere; }
.weather-combo__metric--price-low .weather-combo__metric-icon { color: var(--success); }
.weather-combo__metric--price-mid .weather-combo__metric-icon { color: var(--warning); }
.weather-combo__metric--price-high .weather-combo__metric-icon { color: var(--danger, var(--accent-dark)); }
.weather-combo__legend, .weather-combo__legend-item, .weather-combo__legend-source,
.weather-combo__metric-label, .weather-combo__metric-unit, .weather-combo small, .weather-combo abbr {
  font-size: var(--fs-xs);
}
.weather-combo__legend { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin: var(--sp-4) 0 0; color: var(--text-muted); }
.weather-combo__legend-item--low::before { background: var(--success); }
.weather-combo__legend-item--mid::before { background: var(--warning); }
.weather-combo__legend-item--high::before { background: var(--danger, var(--accent-dark)); }
.weather-combo__error { color: var(--text-muted); font-size: var(--fs-sm); padding: var(--sp-4) 0; margin: 0; text-align: center; }

/* --- Finaler Band: Text-Link statt zweitem akzentiertem Button
       (Regel 8: der Kopf-CTA ist der akzentierte Blickfang) --- */
.lp-cta-final {
  margin: 0 0 var(--sp-8); padding: var(--sp-6);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.lp-cta-final h2 {
  font-family: var(--font-display); font-size: var(--fs-xl);
  font-weight: 600; color: var(--text); margin: 0 0 var(--sp-2);
}
.lp-cta-final p { margin: 0 0 var(--sp-3); color: var(--text-muted); }
.lp-cta-final a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--primary); font-weight: 600;
  text-decoration: underline; text-underline-offset: 5px;
}

/* --- CHECK24-Live-Suche (Widget-Optik: check24-embed.css) --- */
.lp-embed { margin: 0 0 var(--sp-5); }
.lp-embed__frame { max-width: 680px; margin: 0 auto; }

/* --- 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; }

/* --- Mobil (Familien-Breakpoints 780/520) --- */
@media (max-width: 780px) {
  .nav__toggle { display: flex; }
  html.js-enabled .nav ul {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: color-mix(in srgb, var(--bg) 96%, transparent);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--border);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--sp-3) var(--sp-4);
  }
  html.js-enabled .nav ul.open { display: flex; }
  html:not(.js-enabled) .nav ul { display: flex; flex-wrap: wrap; position: static; }
  html:not(.js-enabled) .nav__toggle { display: none; }
  html:not(.js-enabled) .site-header__inner { flex-wrap: wrap; }
  .nav ul a { display: block; padding: var(--sp-2) var(--sp-1); }
  .nav ul li:last-child a { align-self: flex-start; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
  .lp-wrap { padding: var(--sp-5) var(--sp-4) var(--sp-6); }
  .lp-dataset__board { grid-template-columns: 1fr; gap: var(--sp-5); padding: var(--sp-5) var(--sp-4) var(--sp-4); }
  .lp-head { grid-template-columns: 1fr; gap: var(--sp-5); margin-bottom: var(--sp-6); }
  .lp-window { max-width: 300px; }
  .lp-section, .lp-faq, .lp-weather { margin-bottom: var(--sp-6); }
}
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 380px) {
  .site-header__inner { padding-inline: var(--sp-2); gap: var(--sp-2); }
  .logo { min-width: 0; overflow: hidden; }
  .logo > span:last-child { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .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; } }