/* ==================================================================
   ratgeber-page.css — DESIGN-V2-FAMILIENPORT /ratgeber/ (2026-09-11)
   Methode 1:1 css/region-page.css (/reisen/-Referenz): v2-Doppel-
   theme (SOUL v2), Dunkel primaer. Port-Script setzt data-theme +
   FOUC-Skript; die Familie verlaesst den html:not([data-theme])-
   Light-Kompatblock der tokens.css automatisch. Klassenvertrag
   unveraendert (Markup bleibt; Shell-Erweiterung Theme-Toggle).
   Kanon: NUR var()-Referenzen plus color-mix-Rezepte — keine
   Farb-, font-size- oder Schatten-Literale. Die v1-Inline-Styles
   der Artikel (Light-Literale in callout/info-box/author-bio)
   entfernt der Port — Themes bleiben so bruchfrei.
   Budget: <=12 Farben, <=10 font-sizes, <=4 box-shadows.
   Ersetzt site.min.css im /ratgeber/-Bundle (22 Seiten). Die
   Tool-Seiten (reiseziel-finder, preis-index, budget-rechner)
   behalten ihre tokenreinen Inline-/Asset-Styles.
   ================================================================== */

/* --- RG-Tints: v2-Rezepte (color-mix auf Tokens) --- */
:root {
  --rg-ghost: color-mix(in srgb, var(--primary) 4%, transparent);
  --rg-tint: color-mix(in srgb, var(--primary) 7%, transparent);
  --rg-line: color-mix(in srgb, var(--primary) 26%, var(--border));
  --rg-focus: color-mix(in srgb, var(--primary) 45%, transparent);
  --rg-hero-shade: color-mix(in srgb, var(--ink) 55%, 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; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text); margin: 0 0 var(--sp-3); line-height: 1.2; }
p { margin: 0 0 var(--sp-3); }
ul, ol { margin: 0 0 var(--sp-3); padding-left: var(--sp-5); }
li { margin-bottom: var(--sp-2); }
button { font: inherit; }

/* --- 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; }
.visually-hidden {
  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; /* R48b: Logo-Trefferflaeche wie Region (Touch-&-Typo-Floor) */
}
.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; 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 --- */
.site-footer {
  background: var(--bg-dark); color: var(--text-on-dark);
  padding: var(--sp-8) 0 var(--sp-5);
  margin-top: var(--sp-9);
}
.footer-grid {
  max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-5);
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--sp-6);
}
.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-disclaimer {
  font-size: var(--fs-sm); line-height: 1.55;
  color: var(--text-on-dark-muted); margin: var(--sp-3) 0 var(--sp-4); 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 { /* R48b: 44er-Tap wie deals (Master-Präzedenz Touch-&-Typo-Floor) */
  display: inline-flex; align-items: center; min-height: 44px;
  color: inherit; text-decoration: underline;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.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-grid a { color: var(--text-on-dark-muted); text-decoration: underline; text-underline-offset: 3px; }
.footer-grid a:hover { color: var(--text-on-dark); }
.footer-bottom {
  max-width: var(--container); margin: var(--sp-6) auto 0; padding: var(--sp-4) var(--sp-5) 0;
  border-top: 1px solid var(--border-dark);
  font-size: var(--fs-xs); color: var(--text-on-dark-muted);
}
/* R48b: Impressum/Datenschutz der Footer-Schlusszeile als 44px-Tastleiter
   (vorher 17px) — dieselbe Regel wie footer-grid, SOUL-Tap-Minimum. */
.footer-bottom a {
  display: inline-flex; align-items: center; min-height: 44px;
}

/* --- Layout-Basics --- */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-5); }
.container-narrow { max-width: 760px; margin-inline: auto; padding-inline: var(--sp-5); }
.section { padding: var(--sp-7) 0; }
.section__title { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -.015em; margin: 0 0 var(--sp-2); }
.section__subtitle { font-size: var(--fs-md); color: var(--text-muted); margin: 0 0 var(--sp-5); }
.lead { font-size: var(--fs-md); line-height: 1.6; color: var(--text-muted); }
.eyebrow {
  display: inline-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-bottom: var(--sp-3);
}
.text-center { text-align: center; }
.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); color: var(--text-muted);
  padding: var(--sp-2) var(--sp-5);
}
.breadcrumb a { /* R48b: 44er-Tap-Minimum (vorher 23px hoch) */
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--primary); text-decoration: none;
}
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { color: var(--text-muted); }

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

/* --- Page-Hero (Artikel-Eroeffnung, Editorial) --- */
.page-hero {
  padding: var(--sp-8) 0 var(--sp-6);
  background:
    radial-gradient(110% 80% at 12% 0%, var(--rg-ghost), transparent 55%),
    var(--bg);
  border-bottom: 1px solid var(--border);
}
.page-hero__inner { max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-5); }
.page-hero h1 {
  font-size: var(--fs-3xl); font-weight: 600; line-height: 1.1;
  letter-spacing: -.02em; margin: 0 0 var(--sp-3);
  max-width: 24ch;
}
.page-hero .lead { max-width: 64ch; }
.article-meta {
  font-size: var(--fs-sm); color: var(--text-muted);
  margin: 0 0 var(--sp-4);
}
.article-meta a { /* R48b: Autor-Link 44er-Tap (lesende Navigation) */
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--primary); text-decoration: underline; text-underline-offset: 3px;
}

/* --- Artikel-Editorial --- */
.article, .content-article {
  font-size: var(--fs-base);
  color: var(--text-body);
  line-height: 1.7;
}
.article h2, .content-article h2 {
  font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -.015em;
  margin: var(--sp-6) 0 var(--sp-3);
}
.article h3, .content-article h3 { font-size: var(--fs-lg); font-weight: 600; margin: var(--sp-5) 0 var(--sp-2); }
.article p, .content-article p { margin: 0 0 var(--sp-3); }
.article strong, .content-article strong { color: var(--text); font-weight: 600; }
.article ul li, .article ol li { margin-bottom: var(--sp-2); }
.article small { color: var(--text-muted); font-size: var(--fs-xs); } /* R48b: 10px-Literal auf Token (12px Minimum) */

/* --- Callout / Info-Box / Warning (ersetzen v1-Inline-Literale) --- */
.callout, .info-box {
  padding: var(--sp-4) var(--sp-5);
  margin: var(--sp-5) 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  border-left: 3px solid var(--primary);
  background: var(--rg-tint);
  color: var(--text-body);
}
.callout h2, .callout h3, .info-box h2, .info-box h3 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-md); font-weight: 600;
}
.callout p, .info-box p { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); }
.callout p:last-child, .info-box p:last-child { margin-bottom: 0; }
.callout.warning, .warning {
  border-left-color: var(--warning);
  background: var(--warning-light);
  color: var(--text-body);
}
.callout.warning h2, .callout.warning h3 { color: var(--text); }

/* --- Preis-Tabelle (Rezept rp-table, region-page.css); mobil als
       scrollbarer Block (Markup hat keinen Wrapper — display:block +
       overflow-x ist das kanonische Responsive-Table-Muster ohne
       Markup-Eingriff) --- */
.price-table {
  display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
  width: 100%; border-collapse: collapse;
  font-size: var(--fs-sm);
  margin: var(--sp-4) 0 var(--sp-5);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
}
.price-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-3);
  border-bottom: 2px solid var(--border);
  white-space: nowrap; background: var(--rg-ghost);
}
.price-table td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); }
.price-table tr:last-child td { border-bottom: none; }
.price-table .num { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); white-space: nowrap; }
.price-table:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.pi-tablewrap, .rf-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --- Prose-Card (Editorial-Panel) --- */
.prose-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
  margin: var(--sp-4) 0;
  font-size: var(--fs-base); line-height: 1.7; color: var(--text-body);
}
.prose-card p:last-child { margin-bottom: 0; }

/* --- Author-Bio (ersetzt v1-Inline-Style) --- */
.author-bio {
  background: var(--rg-ghost);
  border: 1px solid var(--rg-line);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
  margin-top: var(--sp-6);
}
.author-bio h3 { font-size: var(--fs-md); margin: 0 0 var(--sp-2); }
.author-bio p { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }

/* --- Ad-Aside (Werbe-Hinweis) --- */
.ad-aside {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  margin: var(--sp-6) 0 var(--sp-4);
  font-size: var(--fs-sm); color: var(--text-muted);
}
.ad-aside p { margin: 0 0 var(--sp-2); }
.ad-aside p:last-child { margin-bottom: 0; }
.ad-aside strong { color: var(--text); }

/* --- Related Content --- */
.related-content {
  max-width: 760px; margin-inline: auto; padding-inline: var(--sp-5);
  padding-top: var(--sp-6); padding-bottom: var(--sp-6);
  border-top: 1px solid var(--border);
}
.related-content__title {
  font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.015em;
  margin: 0 0 var(--sp-4);
}
.related-content__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: var(--sp-3); }
.related-card {
  display: flex; align-items: center;
  min-height: 56px;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  color: var(--text); font-weight: 600; font-size: var(--fs-sm);
  text-decoration: none;
}
.related-card:hover { border-color: var(--rg-focus); color: var(--primary); text-decoration: none; }
.related-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

/* --- Share-Buttons --- */
.share-buttons {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2);
  max-width: 760px; margin-inline: auto; padding-inline: var(--sp-5);
  padding-block: var(--sp-4);
}
.share-buttons__label { font-size: var(--fs-sm); color: var(--text-muted); margin-right: var(--sp-2); }
.share-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--text-muted);
  cursor: pointer; text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.share-btn:hover { border-color: var(--primary); color: var(--primary); }
.share-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.share-btn svg { width: 18px; height: 18px; }

/* --- R37 ratgeber-Familie: Display-Kopf, Fenster, Artikel-Tafel,
       Mono-Trust (Rezepte 1:1 css/stadt-page.css stadt-hero/stadt-head/
       stadt-window/stadt-table/stadt-trustline; Mandat R34–R37:
       Daten/Inhalte führen, Stille mit Größe, Mono-Trust statt
       Icon-Chips). Token-rein: keine Farb-, font-size- oder
       Schatten-Literale (Budget fonts=10 bleibt unangetastet). --- */
.rg-hero {
  padding: var(--sp-6) 0 var(--sp-9);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.rg-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--sp-8);
  align-items: center;
}
.rg-window { margin: 0; min-width: 0; }
.rg-window picture {
  display: block;
  border: 1px solid var(--rg-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-elevated);
}
.rg-window img { display: block; width: 100%; height: auto; }
.rg-window figcaption {
  margin-top: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .02em;
  color: var(--text-muted);
}
.rg-head .rg-eyebrow {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-muted);
}
.rg-head .rg-h1 {
  font-size: var(--fs-display-hero);
  line-height: 1.02; margin: var(--sp-4) 0 var(--sp-5);
  max-width: 18ch;
}
.rg-head .rg-h1__sub {
  display: block;
  font-size: var(--fs-display-section); font-weight: 500;
  letter-spacing: -.01em;
}
.rg-head .rg-sub { max-width: 560px; margin-top: var(--sp-4); }

/* Mono-Trust-Zeile (Artikel-Kopf + Index-Kopf, Rezept stadt-trustline):
   leise, mono, ohne Icons — die Signale sind Text, kein Dekor. */
.rg-trustline {
  margin: var(--sp-3) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .02em;
  color: var(--text-muted);
}
[data-theme="light"] .rg-trustline { color: color-mix(in srgb, var(--text-muted) 62%, var(--text)); }

/* Artikel-Tafel (Index): alle Ratgeber als Zeilen-Datensatz (Verfassung
   Regel 6; Rezept stadt-table 1:1) — rechteckige Zeilen, rechts gepinnter
   Fokus in Mono, Quelle am Tafelkopf, Gruppen-Köpfe als Rhythmus. */
.rg-table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  margin-top: var(--sp-6); background: var(--bg-elevated);
}
.rg-table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.rg-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(--rg-ghost);
}
.rg-table td { padding: var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--border); }
.rg-table tr:last-child td { border-bottom: none; }
.rg-row th { font-weight: 400; }
.rg-row th[scope="row"] {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  color: var(--text);
  background: transparent;
}
.rg-row 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;
}
.rg-row a:hover { color: var(--primary); text-decoration: underline; }
.rg-row a:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.rg-thead__fokus, .rg-row__fokus { text-align: right; white-space: nowrap; }
.rg-fokus {
  font-family: var(--font-body); font-size: var(--fs-sm);
  letter-spacing: 0; color: var(--text-muted);
  text-transform: none;
}
.rg-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);
}
.rg-group th {
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted);
  padding: var(--sp-3) var(--sp-4) var(--sp-1);
  border-bottom: 1px solid var(--border-light);
  background: none;
}
.rg-group:first-of-type th { padding-top: var(--sp-2); }

/* Verwandte Deals (slice56 „Passend dazu", R37-reskinned): Haarlinien-
   Zeilen statt step-card-Grid — Titel + Beschreibung als Substanz,
   Rezept aus der Familien-Zeilenhandschrift. */
.rg-relatedrow {
  display: flex; flex-direction: column; gap: var(--sp-1);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--border);
  color: var(--text); text-decoration: none;
  min-height: 44px;
}
.rg-relatedrow:last-of-type { border-bottom: 1px solid var(--border); }
.rg-relatedrow strong { font-size: var(--fs-base); font-weight: 600; }
.rg-relatedrow span { font-size: var(--fs-sm); color: var(--text-muted); }
.rg-relatedrow:hover strong { color: var(--primary); text-decoration: underline; }
.rg-relatedrow:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

/* Fenster-Fotomoment auf Ziel-Artikeln (R36-Lehre, R37 Pass 2: das
   Fenster FUEHRT im Hero — Blind-Richter-Feedback „Foto zu klein/
   zu spät"): Kopf links, Fenster rechts mit ehrlichem Leitwert aus
   dem Artikel selbst (Wahrheitsregel: redaktioneller Richtwert mit
   Stand, keine Tagespreise). */
/* Pass 3 (Blind-Richter: „großes Foto schlägt kleines Fenster"): Die
   Fenster-Spalte nutzt die native Foto-Breite fast vollständig. */
.rg-artikelhero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 560px;
  gap: var(--sp-8);
  align-items: center;
}
.rg-window--artikel { margin: 0; min-width: 0; max-width: 560px; }
.rg-window--artikel img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--rg-line);
  border-radius: var(--radius-lg);
}
.rg-window--artikel figcaption {
  margin-top: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .02em;
  color: var(--text-muted);
}
.rg-window__value {
  margin: var(--sp-3) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  letter-spacing: .01em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.rg-window__value strong { font-weight: 600; }
.rg-window__value span {
  display: block; margin-top: var(--sp-1);
  font-size: var(--fs-xs); letter-spacing: .02em;
  color: var(--text-muted);
}

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border: 0; border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: var(--fs-base); font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.btn--primary { background: var(--accent); color: var(--text-on-accent); }
.btn--primary:hover { background: var(--accent-dark); text-decoration: none; transform: translateY(-1px); }
.btn--secondary { background: transparent; color: var(--primary); border: 1.5px solid var(--control-border); }
.btn--secondary:hover { border-color: var(--primary); text-decoration: none; }
.btn--sm { padding: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); }
.btn--lg { padding: var(--sp-4) var(--sp-6); font-size: var(--fs-md); }
.btn--block { width: 100%; }
.btn svg { width: 18px; height: 18px; }
.btn:focus-visible, .nav__cta:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

/* --- Schritte (R37: entfernt — Schritt-Theater ist auf der Familie
       weggefallen; das CTA-Band ist eine ruhige Aussage) --- */

/* --- FAQ (Artikel mit faq-Klassen) --- */
.faq { border-top: 1px solid var(--border); }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__question {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  min-height: 56px;
  background: none; border: none; cursor: pointer;
  padding: var(--sp-3) 0;
  font-size: var(--fs-base); font-weight: 600; color: var(--text);
  text-align: left;
}
.faq__question:hover { color: var(--primary); }
.faq__question:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.faq__icon {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--primary);
  transition: transform var(--dur) var(--ease);
}
.faq__icon svg { width: 18px; height: 18px; }
.faq__question[aria-expanded="true"] .faq__icon { transform: rotate(45deg); }
.faq__answer { display: none; padding: 0 0 var(--sp-4); }
.faq__question[aria-expanded="true"] ~ .faq__answer,
.faq__item.open .faq__answer { display: block; }
.faq__answer-inner {
  font-size: var(--fs-sm); line-height: 1.65; color: var(--text-body);
  padding-right: var(--sp-6);
}

/* --- CTA-Sektion --- */
.cta-section {
  position: relative;
  padding: var(--sp-8) 0;
  background:
    radial-gradient(90% 120% at 50% 0%, var(--rg-ghost), transparent 60%),
    var(--bg-soft);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.cta-section__bg { position: absolute; inset: 0; pointer-events: none; }
.cta-section__content {
  position: relative;
  text-align: center; max-width: 48ch; margin-inline: auto; padding-inline: var(--sp-5);
}
.cta-section__content h2 { font-size: var(--fs-2xl); letter-spacing: -.015em; margin-bottom: var(--sp-3); }
.cta-section__content p { color: var(--text-muted); margin-bottom: var(--sp-5); }

/* --- Trust (R37: Icon-Chips entfernt — .rg-trustline oben ist der
       Familien-Kanon; dieses Bundle laden nur /ratgeber/-Seiten) --- */

/* --- Tool-Hosts (reiseziel-finder/preis-index/budget-rechner behalten
       eigene Styles; nur Host-Rhythmus und Paper-Pinning fuer Widgets
       mit Light-Kanon-Badges, Rezept region-page.css) --- */
.pi-live, .rf-status, .bc-output { border-radius: var(--radius-md); }
.rf-price { font-variant-numeric: tabular-nums; }

/* --- 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); }
  .rg-hero { padding: var(--sp-5) 0 var(--sp-6); }
  .rg-hero__grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  /* Pass 2: mobil ist das Fenster ein voller emotionaler Moment — nicht
     auf 300px geklemmt (Blind-Richter: „kein emotionaler Anker"). */
  .rg-window { max-width: none; }
  .rg-head .rg-h1 { max-width: none; }
  .rg-artikelhero__grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .rg-window--artikel { max-width: none; }
  /* Pass 3 (Blind-Richter: „Foto nach dem Textblock"): mobil erzählt der
     Kopf nacheinander — H1, dann der Foto-Moment mit Leitwert, dann die
     einordnenden Zeilen. display:contents + order, ohne Markup-Doppeln. */
  .rg-artikelhero__grid { display: flex; flex-direction: column; }
  .rg-artikelhead { display: contents; }
  .rg-artikelhead > h1 { order: 1; }
  .rg-window--artikel { order: 2; }
  .rg-artikelhead > .lead { order: 3; margin-top: 0; }
  .rg-artikelhead > .article-meta { order: 4; }
  .rg-artikelhead > .rg-trustline { order: 5; }
  .page-hero { padding: var(--sp-6) 0 var(--sp-5); }
  .section { padding: var(--sp-6) 0; }
  .price-table { font-size: var(--fs-xs); }
}
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
  /* R48: Footer-Links als 44px-Tastleiter (vorher 21px) — SOUL-Tap-Minimum */
  .footer-grid ul { gap: 4px; }
  .footer-grid ul a { display: flex; align-items: center; min-height: 44px; }
  /* Artikel-Tafel als Record-Row (Verfassung Regel 9): Titel-Zeile mit
     Haarlinien-Raster; die Fokus-Nebenspalte entfällt mobil (der Titel
     ist der Wert, der Fokus ist Metadaten-Schmuck). */
  .rg-thead__fokus, .rg-row__fokus { display: none; }
  .rg-table td, .rg-table th { padding: var(--sp-2) var(--sp-3); }
  .rg-group:first-of-type th { padding-top: var(--sp-2); }
}

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

/* ══════════════════════════════════════════════════════════════════
   DESIGN-V2-FAMILIEN-OVERRIDES (Rezepte 1:1 css/region-page.css)
   ══════════════════════════════════════════════════════════════════ */
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;
}
@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);
  }
}
html[data-theme] body .site-header a:focus-visible,
html[data-theme] body .site-header button:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
html[data-theme] .page-hero h1 { letter-spacing: -0.02em; }
html[data-theme] .eyebrow { letter-spacing: .08em; font-family: var(--font-mono); font-weight: 500; }
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); }
}
@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; } }