/* ═══════════════════════════════════════════════════════════
   TRAEVEL — docs-page.css (R32 · V1-Rest-Angleichung; R39-Erweiterung)
   Text-/Dokuseiten (methodik, studien, ueber-uns, redaktion):
   gleiche Shell-Klassen und -Anmutung wie die Familien (ratgeber/
   stadt: site-header/nav/site-footer), Artikel-Typografie nach
   Kanon. Ersetzt die Fremd-Inline-Styles (Inter/Neongrün/Blau-
   Schwarz) — NUR Token-Referenzen, beide Themes automatisch.
   R39: Impressum (Anbieterkennzeichnung als Datensatz-Board) und
   die 2 Community-Statusseiten portieren auf diese Shell; neue
   Rezepte: docs-legalboard, docs-trustline, community-status-links
   (Zeilen), footer__ad (Werbeblock für Seiten mit /out/-Links).
   ═══════════════════════════════════════════════════════════ */

html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }

/* ─── Shell: Header (identisch zur Familien-Shell) ─── */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.site-header__inner {
  width: min(var(--container-wide), calc(100% - 48px));
  margin-inline: auto; padding-block: var(--sp-3);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
}
.logo {
  display: flex; align-items: center; gap: var(--sp-2);
  color: var(--text); text-decoration: none;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg);
  letter-spacing: -0.02em;
  min-height: 44px; /* R48b: Logo-Trefferflaeche (Touch-&-Typo-Floor) */
}
.logo__mark { display: inline-grid; place-items: center; width: 26px; height: 26px; color: var(--primary); }
.logo__mark svg { width: 100%; height: 100%; }
.nav { display: flex; align-items: center; gap: var(--sp-4); }
.nav__links { list-style: none; display: flex; gap: var(--sp-5); margin: 0; padding: 0; }
.nav__links a { /* R48b: 44er-Tap (vorher 32px) */
  color: var(--text-muted); text-decoration: none; font-size: var(--fs-sm);
  display: inline-flex; align-items: center; min-height: 44px;
  transition: color var(--dur-fast) var(--ease);
}
.nav__links a:hover { color: var(--primary); }
.nav__toggle { display: none; }

/* ─── Artikel ─── */
.docs-hero { padding-block: var(--sp-8) var(--sp-5); }
.docs-hero__inner, .docs-content {
  width: min(var(--container-narrow), calc(100% - 48px));
  margin-inline: auto;
}
.docs-eyebrow {
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 1px;
  text-transform: uppercase; color: var(--text-muted); margin: 0 0 var(--sp-3);
}
h1 {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--fs-3xl); line-height: 1.1; letter-spacing: -0.02em;
  color: var(--text); margin: 0 0 var(--sp-4); text-wrap: balance;
}
.docs-lede {
  font-size: var(--fs-md); line-height: 1.6; color: var(--text-muted);
  max-width: 62ch; margin: 0 0 var(--sp-4);
}
.docs-content { padding-block: var(--sp-4) var(--sp-8); }
h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--fs-2xl); line-height: 1.2; letter-spacing: -0.01em;
  color: var(--text); margin: var(--sp-7) 0 var(--sp-3); text-wrap: balance;
}
h3 { font-size: var(--fs-lg); line-height: 1.35; color: var(--text); margin: var(--sp-5) 0 var(--sp-2); }
p { margin: 0 0 var(--sp-3); color: var(--text-body); }
strong { color: var(--text); font-weight: 600; }
ul, ol { margin: 0 0 var(--sp-4); padding-left: var(--sp-5); color: var(--text-body); }
li { margin-bottom: var(--sp-2); }
/* Textlinks im Fliesstext: Farbe PLUS Unterstreichung (axe link-in-text-block,
   AA 1.4.1) — Shell-/Footer-Links unten ohne, dort hebt die Position ab. */
a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.nav__links a, .site-footer a, .footer-bottom a, .ftr-links a, .ftr-cross a, .docs-eyebrow a { text-decoration: none; }

.card {
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: var(--sp-5); margin: var(--sp-4) 0;
}
.card h3 { margin-top: 0; }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }
.stat-row { display: flex; gap: var(--sp-6); flex-wrap: wrap; margin: var(--sp-5) 0; }
.stat .num {
  font-family: var(--font-display); font-weight: 500; font-size: var(--fs-xl);
  color: var(--primary); line-height: 1.1; display: block;
}
.stat .label { font-size: var(--fs-sm); color: var(--text-muted); }
.stat__num {
  font-family: var(--font-display); font-weight: 500; font-size: var(--fs-xl);
  color: var(--primary); line-height: 1.1; display: block;
}
.docs-section-block { margin-block: var(--sp-6); }
.docs-note {
  font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6;
  border-left: 2px solid var(--border); padding-left: var(--sp-4); margin: var(--sp-4) 0;
}

/* ─── R39 · Dokument-Rezepte (Impressum-Urkunde + Community-Status).
       Anbieterkennzeichnung als Datensatz-Board (Verfassung Regel 6):
       rechteckige Zeile, Mono-Label links, Wert rechts; kein Icon, kein
       Badge. Mono-Trust-Zeile ist die Familien-Handschrift R34–R39
       (statt Icon-Chips). Status-Liste des Community-Ruhestands als
       Haarlinien-Zeilen mit unterstrichenen Links (axe 1.4.1). ─── */
.docs-legalboard {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  padding: var(--sp-3) var(--sp-5);
  margin: 0 0 var(--sp-6);
}
.docs-legalboard__row {
  display: flex; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line);
}
.docs-legalboard__row:last-child { border-bottom: 0; }
.docs-legalboard__label {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted); padding-top: 3px; flex-shrink: 0;
}
.docs-legalboard__value {
  margin: 0; font-size: var(--fs-sm); color: var(--text-body);
  text-align: right; overflow-wrap: anywhere;
}
.docs-trustline {
  font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.7;
  color: var(--text-muted); margin: 0 0 var(--sp-5);
}
ul.community-status-links { list-style: none; margin: 0 0 var(--sp-5); padding: 0; }
.community-status-links li {
  padding: var(--sp-3) 0; margin-bottom: 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm); color: var(--text-body);
}
.community-status-links li:last-child { border-bottom: 0; }
.community-status-links a { /* R48b: 44er-Tap-Zeilen (vorher 18px) */
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--primary); text-decoration: underline; text-underline-offset: 3px;
}
.docs-table {
  width: 100%; border-collapse: collapse; margin: var(--sp-4) 0;
  font-size: var(--fs-sm);
}
.docs-table th, .docs-table td {
  text-align: left; padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.docs-table th { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); }
.docs-table td[style*="text-align:right"], .docs-table th[style*="text-align:right"] { text-align: right; }
/* R40 · Guide-LP-Rezepte (Root-LPs auf docs-Shell): Zahlen-Spalten
   rechts gepinnt (Regel 6), Trend als Status-Farbe ohne Glyphe
   (Regel 8: down=success, up=warning — Konvention region-chart),
   Foto-Fenster für Dokument-Seiten mit echtem Ziel-Foto (Regel 5).
   Nur Token-Referenzen. */
.docs-table .num, .docs-table .price-col {
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.docs-table .trend--down { color: var(--success); font-variant-numeric: tabular-nums; }
.docs-table .trend--up { color: var(--warning); font-variant-numeric: tabular-nums; }
.docs-table .trend--flat { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.docs-table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  margin: var(--sp-3) 0; background: var(--bg-elevated);
}
.docs-table-wrap .docs-table { margin: 0; }
.docs-table-wrap .docs-table th, .docs-table-wrap .docs-table td { white-space: nowrap; }
.docs-legalboard__verdict-note {
  font-size: var(--fs-sm); line-height: 1.6; color: var(--text-body);
  margin: var(--sp-3) 0 0; padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}
/* R40 · regionChart.js-Farbkaskade auf docs-Seiten: Das Widget injiziert
   Basis-Layout mit Light-Kanon-Pinning — ohne Familien-Regeln kippt der
   Kontrast im Dark-Theme (aa-Gate). Rezept 1:1 lp-page/region-page. */
.region-chart, .region-chart * { box-sizing: border-box; }
.region-chart { max-width: 100%; margin: var(--sp-4) 0; min-width: 0; }
.docs-section .region-chart__svg-wrap { max-width: 100%; }
.docs-section .region-chart__svg-wrap svg { max-width: 100%; height: auto; display: block; }
.docs-section .region-chart__title {
  color: var(--text-muted);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: .07em;
}
.docs-section .region-chart__trend {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  background: transparent; border-radius: 0; padding: 0;
}
.docs-section .region-chart__trend--down { background: transparent; color: var(--success); }
.docs-section .region-chart__trend--up { background: transparent; color: var(--warning); }
.docs-section .region-chart__trend--flat { background: transparent; color: var(--text-muted); }
.docs-section .region-chart__svg-wrap { background: transparent; padding: var(--sp-2) 0 0; }
.docs-section .region-chart__line { stroke: var(--primary); }
.docs-section .region-chart__area { fill: color-mix(in srgb, var(--primary) 8%, transparent); }
.docs-section .region-chart__dot { fill: var(--bg-elevated); stroke: var(--primary); }
.docs-section .region-chart__dot--min { stroke: var(--success); }
.docs-section .region-chart__dot--max { stroke: var(--warning); }
.docs-section .region-chart__meta { color: var(--text-muted); }
.docs-section .region-chart__fallback { color: var(--text-muted); padding: var(--sp-4) 0; }
/* R41: Das Fenster ist auf Guide-Seiten der geehrte ZWEITE Moment
   (Daten führen — stadt-detail-Präzedenz); große Momente bekommen
   Leere DAVOR (Regel 2). */
.docs-figure { margin: var(--sp-7) 0 var(--sp-5); }
.docs-figure img {
  display: block; width: 100%; height: clamp(200px, 30vw, 360px);
  object-fit: cover; border-radius: var(--radius-md);
}
.docs-figure figcaption {
  padding: var(--sp-2) var(--sp-1) 0; font-size: var(--fs-sm); color: var(--text-muted);
}

/* ─── Shell: Footer (Familien-Muster) ─── */
.site-footer {
  background: color-mix(in srgb, var(--ink) 88%, var(--bg));
  color: var(--text-on-dark-muted);
  border-top: 1px solid var(--border);
  margin-top: var(--sp-8);
  padding-block: var(--sp-7) var(--sp-5);
}
[data-theme="light"] .site-footer { background: var(--bg-dark); }
.footer-grid {
  width: min(var(--container-wide), calc(100% - 48px));
  margin-inline: auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--sp-6);
}
.footer-brand {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl);
  color: var(--text-on-dark); margin-bottom: var(--sp-2); display: block;
}
.footer-disclaimer { font-size: var(--fs-sm); color: var(--text-on-dark-muted); max-width: 44ch; margin: 0 0 var(--sp-3); }
.footer-col__heading {
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 1px;
  text-transform: uppercase; color: var(--text-on-dark-muted); 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: color-mix(in srgb, var(--text-on-dark-muted) 88%, var(--paper));
  text-decoration: none; font-size: var(--fs-sm);
  display: inline-flex; align-items: center; min-height: 44px; /* R48b: Tastleiter (vorher 32px) */
  transition: color var(--dur-fast) var(--ease);
}
.footer-grid a:hover { color: var(--gold); }
.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 color-mix(in srgb, var(--paper) 16%, transparent);
  font-size: var(--fs-xs); color: var(--text-on-dark-muted);
  display: flex; justify-content: space-between; gap: var(--sp-3) var(--sp-5); flex-wrap: wrap;
}
.footer-bottom a { /* R48b: 44px-Tastleiter (vorher 17px) */
  color: inherit; display: inline-flex; align-items: center; min-height: 44px;
}
.footer-bottom a:hover { color: var(--gold); }

/* ─── Vertragsstrukturen (slice88): ftr-cross/ftr-disclosure/ftr-links
       im selben ruhigen Gewand wie die Footer-Spalten ─── */
.ftr-cross .links { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); }
.ftr-cross .links a {
  color: color-mix(in srgb, var(--text-on-dark-muted) 88%, var(--paper));
  text-decoration: none; font-size: var(--fs-sm);
  display: inline-flex; align-items: center; min-height: 44px; /* R48b: Tastleiter (vorher 32px) */
  transition: color var(--dur-fast) var(--ease);
}
.ftr-cross .links a:hover { color: var(--gold); }
.ftr-disclosure {
  font-size: var(--fs-xs); line-height: 1.6; color: var(--text-on-dark-muted);
  max-width: 44ch;
}
.footer__ad {
  font-size: var(--fs-xs); line-height: 1.6; color: var(--text-on-dark-muted);
  max-width: 560px; margin: 0 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid color-mix(in srgb, var(--paper) 16%, transparent);
  border-radius: var(--radius-sm);
}
.footer__ad strong { color: var(--text-on-dark); font-weight: 600; }
.footer__ad a { /* R48b: 44er-Tap wie Familien (Master-Präzedenz) */
  display: inline-flex; align-items: center; min-height: 44px;
  color: inherit; text-decoration: underline;
}
.ftr-links { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.ftr-links a { color: inherit; text-decoration: none; }
.ftr-links a:hover { color: var(--gold); }

/* ─── Fokus & Bewegung ─── */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 3px;
}
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--primary); color: var(--text-on-primary);
  padding: var(--sp-3) var(--sp-5); border-radius: 0 0 var(--radius-sm) 0;
  z-index: var(--z-overlay); font-size: var(--fs-sm); text-decoration: none;
}
.skip-link:focus { left: 0; }

@media (max-width: 760px) {
  .site-header__inner, .docs-hero__inner, .docs-content,
  .footer-grid, .footer-bottom { width: calc(100% - 40px); }
  .nav__links { display: none; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}