/* ═══════════════════════════════════════════════════════════
   DEALS — Familien-Stylesheet v2 (Slice 31, P1b; DESIGN-V2-Port
   2026-09-11): Index + 6 Detailseiten. Dunkles Primaer-Theme,
   Light erste Klasse (SOUL v2) — Port-Script setzt data-theme +
   FOUC-Skript. Detailseiten behalten ihre tokenreinen Inline-
   Komponenten (deal-faq/-inclusions/-price-badge/-similar,
   Gallery); deren v1-Koral-Literale ersetzt der Port
   durch var(--accent)/color-mix. Kein site.min.css/community.css/
   deal-conversion-boost.css mehr im Bundle. Alle Werte ausschliesslich
   aus tokens.css (Var-Referenzen + color-mix-Rezepte) — keine
   Farb-, Font-Size- oder Schatten-Literale.
   Budget: <=12 Farben, <=10 font-sizes, <=4 box-shadows.
   ═══════════════════════════════════════════════════════════ */

/* ─── Reset (minimal) ─── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text); margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-5); }

/* ─── Header ─── */
.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); }
.nav a:not(.btn) { color: var(--text-muted); font-size: var(--fs-sm); }
.nav a:not(.btn):hover { color: var(--primary); text-decoration: none; }
.nav__cta {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-4);
  background: var(--primary);
  color: var(--text-on-primary) !important;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm); font-weight: 600;
}
.nav__cta:hover { background: var(--primary-dark); text-decoration: none; }
.nav__toggle { display: none; }

/* ─── Hero ─── */
.hero {
  padding: var(--sp-8) 0 var(--sp-7);
  background: var(--bg);
}
.hero__inner { max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-5); }
.eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: var(--sp-4);
}
.hero__title {
  font-size: var(--fs-3xl);
  line-height: 1.15;
  letter-spacing: -0.01em;
  max-width: 20ch;
}
.hero__lead {
  margin-top: var(--sp-4);
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 60ch;
}

/* R38: v1-Trust-Pills subtrahiert (seit Slice 64 ungenutzt; Mono-Trust-
   Zeile .dl-trustline ist die Familien-Handschrift R34–R38). */

/* ─── Sektionen (R38: Karten-Wand subtrahiert — die Deal-Tafel im Hero
       führt; Rezepte siehe R38-Block unten) ─── */
.section { padding: var(--sp-7) 0; }
.section__title {
  font-size: var(--fs-2xl);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-6);
}

/* ─── 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;
}
.btn--primary { background: var(--accent); color: var(--text-on-accent); }
.btn--primary:hover { background: var(--accent-dark); text-decoration: none; }
.btn--secondary { background: transparent; color: var(--primary); border: 1.5px solid var(--primary); }
.btn--secondary:hover { background: var(--bg-soft); 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: 20px; height: 20px; }

/* R38: section--tight + Schritt-Theater (steps-grid/step-card/step__num/
   step-title/step-desc) subtrahiert — „Wie funktioniert es?"-Bänder sind
   von allen Familien-Seiten entfernt (R36/R37-Handschrift). */

/* ─── Hinweis-Absatz unter Sektionsköpfen (ehem. step-desc-Nutzung) ─── */
.dl-note { font-size: var(--fs-sm); color: var(--text-muted); }

/* ─── CTA-Sektion ─── */
.cta-section {
  padding: var(--sp-8) 0;
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.cta-section__content { text-align: center; max-width: 48ch; margin-inline: auto; padding-inline: var(--sp-5); }
.cta-section__content h2 { font-size: var(--fs-2xl); line-height: 1.25; margin-bottom: var(--sp-4); }
.cta-section__content p { color: var(--text-muted); margin-bottom: var(--sp-6); }
.cta-section .btn--primary { margin-inline: auto; }

/* ─── Footer ─── */
.site-footer { background: var(--bg-dark); color: var(--text-on-dark); padding: var(--sp-7) 0 var(--sp-5); }
.site-footer a { color: var(--text-on-dark-muted); }
.site-footer a:hover { color: var(--text-on-dark); text-decoration: underline; }
.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); margin-bottom: var(--sp-4);
}
.footer-disclaimer {
  font-size: var(--fs-sm); color: var(--text-on-dark-muted);
  margin: var(--sp-3) 0 var(--sp-4);
}
.footer__ad {
  padding: var(--sp-3) var(--sp-4);
  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-col__heading { font-size: var(--fs-sm); font-weight: 600; color: var(--text-on-dark); margin-bottom: var(--sp-3); }
.footer-grid ul { display: grid; gap: var(--sp-2); }
.footer-grid ul a { font-size: var(--fs-sm); }
/* Touch-&-Typo-Floor 14.09.: Footer-Navigation 44px Hit-Flaeche */
.footer-grid ul a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.footer-bottom {
  max-width: var(--container); margin-inline: auto;
  padding: var(--sp-4) var(--sp-5) 0;
  border-top: 1px solid var(--border-dark);
  margin-top: var(--sp-6);
  font-size: var(--fs-sm); color: var(--text-on-dark-muted);
}

/* ─── Reveal (progressive enhancement, kein Pflicht-JS) ─── */
.reveal { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 1; }
}

/* ─── Breakpoints ─── */
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .site-header__inner { flex-wrap: wrap; }
  .nav ul { flex-wrap: wrap; justify-content: flex-start; }
  .hero { padding: var(--sp-8) 0 var(--sp-6); }
  .section { padding: var(--sp-6) 0; }
  .cta-section { padding: var(--sp-6) 0; }
  .site-footer { padding: var(--sp-6) 0 var(--sp-4); }
}

/* R38: Slice-53-Karten-Preis-Slot + Slice-64-Icon-Trust subtrahiert —
   Preise leben jetzt rechts gepinnt in der Deal-Tafel (Regel 6), Trust
   ist EINE Mono-Zeile (.dl-trustline im R38-Block, R34–R37-Handschrift). */

/* ═══════════════════════════════════════════════════════════
   DESIGN-V2-PORT /deals/ — Detailseiten-Ergaenzungen (2026-09-11)
   Methode 1:1 css/region-page.css: Tints als color-mix-Rezepte,
   Papier-Widgets fuer JS-Hosts mit Light-Kanon-Badges (price-
   chart.js/price-alert.js rechnen in festen Hell-Werten; das
   Pinning auf var(--paper)/--ink ist themeunabhaengig stabil).
   ═══════════════════════════════════════════════════════════ */
:root {
  --dl-ghost: color-mix(in srgb, var(--primary) 4%, transparent);
  --dl-tint: color-mix(in srgb, var(--primary) 7%, transparent);
  --dl-line: color-mix(in srgb, var(--primary) 26%, var(--border));
  --dl-focus: color-mix(in srgb, var(--primary) 45%, transparent);
}

/* --- Artikel-Typografie (Detailseiten-Fließtext; Basis-Reset
   oben nimmt Listen die Bullets — hier zurueckgeben) --- */
.article { color: var(--text-body); line-height: 1.7; }
.article h2 { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -.015em; margin: var(--sp-6) 0 var(--sp-3); }
.article h3 { font-size: var(--fs-lg); font-weight: 600; margin: var(--sp-5) 0 var(--sp-2); }
.article h4 { font-size: var(--fs-md); font-weight: 600; margin: var(--sp-4) 0 var(--sp-2); }
.article strong { color: var(--text); font-weight: 600; }
.article ul { list-style: disc; padding-left: var(--sp-5); margin: 0 0 var(--sp-3); }
.article ol { list-style: decimal; padding-left: var(--sp-5); margin: 0 0 var(--sp-3); }
.article li { margin-bottom: var(--sp-2); }
.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;
}
.text-muted { color: var(--text-muted); }
.overflow-x-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --- Breadcrumbs (Detail; R38: Icon-Trust-Band darüber subtrahiert —
       EINE Mono-Trust-Zeile .dl-trustline ersetzt beide Bänder) --- */
.deal-breadcrumbs { padding: var(--sp-3) var(--sp-5); font-size: var(--fs-sm); }
.deal-breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; }
.deal-breadcrumbs a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--primary); text-decoration: none;
}
.deal-breadcrumbs a:hover { text-decoration: underline; }
.deal-breadcrumbs li + li::before { content: "›"; margin-right: var(--sp-2); color: var(--text-muted); }

/* --- Hero (Detail: Foto-Buehne, Inline-Overlay bleibt Markup).
       Hintergrund-Pinning var(--bg-dark) ist in BEIDEN Themes die ehrliche
       Buehnenfarbe (Foto + Overlay liegen darueber) und gibt axe eine
       reale Vordergrund-/Hintergrundpaarung statt transparenter Kette. --- */
.hero { position: relative; background: var(--bg-dark); }
/* Dunkle Buehne (beide Themes): Hero-Inhalte in der On-Dark-Palette.
   --gold/--text-on-dark(-muted) sind themeunabhaengige Kanonwerte
   (SOUL v2: Gold bleibt auf dunklen Flaechen erlaubt, auch im Light). */
html[data-theme] .hero .eyebrow { color: var(--gold); }
html[data-theme] .hero .hero__lead { color: var(--text-on-dark-muted); }
.hero__inner { position: relative; }
.hero__content { position: relative; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }

/* --- Papier-Widgets: Preis-Chart + Preis-Alarm + Reisewecker (Light-Kanon-
       Pinning wie region-page.css [data-region-chart]); R63-Adoption brachte
       reisewecker.js auf die Deal-Heroes, deren Grund bewusst dunkel bleibt
       (--bg-dark) — petrol .rw__title faellt dort in Light durch AA (axe-Fund
       r41 Voll-Scan 19.09.). Gleiche Pinning-Loesung wie die Nachbarn. --- */
[data-price-chart], [data-price-alert], [data-reisewecker] {
  --primary: #0d5c63;
  --accent: #0d5c63;
  --text-on-primary: #ffffff;
  --text-on-accent: #ffffff;
  --success: #047857;
  --success-light: #d1fae5;
  --warning: #8a4b00;
  --warning-light: #fef3c7;
  --text-muted: #5c6157;
  display: block;
  margin: var(--sp-4) 0;
  padding: var(--sp-4);
  background: var(--paper);
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: var(--radius-lg);
}

/* --- Deal-Community (R59: deal-community.js — Voting + Kommentare).
       Papier-Widget-Kanon wie [data-price-alert]: Token-Pinning im Light-
       Kanon, damit das Widget auf der dunklen Seite nicht abhebt. Der
       statische HTML-Teil bleibt der Phase-2B1A1-Hinweis (noscript). --- */
[data-deal-community] {
  --primary: #0d5c63;
  --accent: #0d5c63;
  --success: #047857;
  --success-light: #d1fae5;
  --warning: #8a4b00;
  --warning-light: #fef3c7;
  --text-muted: #5c6157;
}
.dc {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: var(--radius-lg);
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.dc-title {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink);
  margin: 0;
}
.dc-dealvote { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.dc-dealvote__label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.dc-dealvote__hint { font-size: var(--fs-xs); color: var(--text-muted); flex: 1 1 100%; margin: 0; }
.dc-vote-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: 44px;
  padding: var(--sp-2) var(--sp-4);
  border: 1.5px solid var(--primary);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--primary);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
}
.dc-vote-btn:hover { background: var(--bg-soft); }
.dc-vote-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.dc-vote-btn:disabled { opacity: .6; cursor: wait; }
.dc-vote-btn.is-active { background: var(--primary); color: var(--text-on-primary); border-color: var(--primary); }
.dc-count { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-sm); }
.dc-comments { display: flex; flex-direction: column; gap: var(--sp-3); }
.dc-empty { font-size: var(--fs-base); color: var(--text-muted); margin: 0; font-style: italic; }
.dc-loading { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }
.dc-comment {
  border-left: 2px solid color-mix(in srgb, var(--ink) 15%, transparent);
  padding-left: var(--sp-3);
  margin: 0;
}
.dc-comment__head { display: flex; align-items: baseline; gap: var(--sp-2); margin: 0 0 var(--sp-1); }
.dc-comment__author { font-weight: 700; font-size: var(--fs-sm); color: var(--ink); }
.dc-comment__time { font-size: var(--fs-xs); color: var(--text-muted); }
.dc-comment__body { margin: 0 0 var(--sp-2); font-size: var(--fs-base); line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.dc-comment__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0; }
.dc-vote-btn--c-up, .dc-vote-btn--c-down { min-height: 36px; padding: var(--sp-1) var(--sp-3); font-size: var(--fs-xs); }
.dc-report {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-decoration: underline dotted;
}
.dc-report:hover { color: var(--primary); }
.dc-replies { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-3); }
.dc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dc-form { display: flex; flex-direction: column; gap: var(--sp-2); border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); padding-top: var(--sp-3); }
.dc-form__row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.dc-form__row--footer { justify-content: space-between; align-items: center; }
.dc-form__name, .dc-form__text {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
}
.dc-form__name:focus-visible, .dc-form__text:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.dc-form__name { max-width: 320px; }
.dc-form__counter { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); }
.dc-form__submit.btn--secondary { color: var(--primary); border-color: var(--primary); background: transparent; }
.dc-form__submit.btn--secondary:hover { background: var(--bg-soft); }
.dc-status { margin: 0; font-size: var(--fs-sm); line-height: 1.5; }
.dc-status--ok { color: var(--success); }
.dc-status--err { color: var(--warning); }
.dc-privacy { margin: 0; font-size: var(--fs-xs); color: var(--text-muted); }
.dc-privacy a { color: inherit; }
@media (max-width: 520px) {
  .dc-form__name { max-width: none; }
  .dc-form__row--footer { flex-direction: column; align-items: stretch; }
  .dc-form__submit { width: 100%; }
}

/* --- Galerie (R38: Inline-Booster-Block der Seiten in die Familie geholt,
       tokenisiert — keine Schatten-/Farb-/Font-Literale mehr im Markup) --- */
.deal-gallery { max-width: 760px; margin: var(--sp-6) auto; padding: 0 var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.deal-gallery .gallery-main {
  border: none; background: none; padding: 0; cursor: pointer;
  border-radius: var(--radius-lg); overflow: hidden;
}
.deal-gallery .gallery-main img { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover; }
.deal-gallery .gallery-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
.deal-gallery .gallery-thumb {
  border: 2px solid var(--border); background: none; padding: 0; cursor: pointer;
  border-radius: var(--radius-sm); overflow: hidden; min-height: 44px;
}
.deal-gallery .gallery-thumb img { width: 100%; height: 54px; object-fit: cover; display: block; }
.deal-gallery .gallery-thumb.active { border-color: var(--primary); }

/* --- Sektions-Kopf (Editorial) --- */
.section-head { margin: var(--sp-6) 0 var(--sp-3); }
.section-tag {
  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-2);
}
.section-head h2 { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -.015em; margin: 0 0 var(--sp-2); }
.section-head p { font-size: var(--fs-md); color: var(--text-muted); margin: 0; }

/* --- Karten: Prose / Glass / Includes --- */
.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;
  color: var(--text-body); line-height: 1.7;
}
.prose-card p:last-child { margin-bottom: 0; }
.glass-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
}
.glass-card h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-md); }
.glass-card p { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }
.card-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: var(--sp-4);
}
.card-icon { color: var(--primary); margin-bottom: var(--sp-2); }
.card-icon svg { width: 24px; height: 24px; }
.includes-card h3 { font-size: var(--fs-md); }
.includes-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.includes-list li {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  font-size: var(--fs-sm); color: var(--text-body);
}
.includes-list svg { flex-shrink: 0; width: 18px; height: 18px; color: var(--primary); margin-top: 3px; }
.includes-list strong { color: var(--text); font-weight: 600; }

/* --- Ehrliche Bewertung (Pluspunkte/Warnungen; ersetzt die v1-Inline-
       Pastell-Literale durch Status-Token beider Themes) --- */
.honest-assessment { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin: var(--sp-5) 0; }
.honest-assessment > div { padding: var(--sp-4); border-radius: var(--radius-md); }
.honest-assessment > div:first-child { background: var(--success-light); }
.honest-assessment > div:last-child { background: var(--warning-light); }
.honest-assessment h4 { margin: 0 0 var(--sp-2); font-size: var(--fs-md); color: var(--text); }
.honest-assessment ul { list-style: disc; padding-left: var(--sp-5); margin: 0; font-size: var(--fs-sm); color: var(--text-body); }
.honest-assessment li { margin-bottom: var(--sp-1); }
@media (max-width: 640px) {
  .honest-assessment { grid-template-columns: 1fr; }
  /* R48: Footer-Links als 44px-Tastleiter (vorher 18px) — SOUL-Tap-Minimum */
  .footer-grid ul { gap: 4px; }
  .footer-grid ul a {
    display: flex; align-items: center; min-height: 44px;
  }
}

/* --- Preis-Basis als Datensatz-Board (R38: ersetzt die Inline-Methodik-
       Box; Rezept rp-dataset R34 — Zeilen, Label mono links, Wert rechts,
       Quelle+Stand am Datensatz; Regel 6) --- */
.dl-dataset {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
  margin: var(--sp-5) 0;
}
.dl-dataset h3 { margin: 0 0 var(--sp-3); font-size: var(--fs-lg); font-weight: 600; }
.dl-dataset dl { margin: 0; }
.dl-dataset dl > div {
  display: grid; grid-template-columns: minmax(96px, auto) 1fr;
  gap: var(--sp-4); padding: var(--sp-2) 0;
  border-top: 1px solid var(--border);
}
.dl-dataset dl > div:first-child { border-top: none; padding-top: 0; }
.dl-dataset dt {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: .04em; color: var(--text-muted);
  padding-top: 2px;
}
.dl-dataset dd { margin: 0; font-size: var(--fs-sm); color: var(--text-body); }
.dl-dataset dd strong { color: var(--text); font-weight: 600; }

/* --- Preis-Vergleich + Detail-Tabellen (Token-Haarlinien) --- */
.price-comparison { margin: var(--sp-5) 0; }
.price-comparison h3 { font-size: var(--fs-lg); margin: 0 0 var(--sp-3); }
.price-comparison table, .detail-table {
  width: 100%; border-collapse: collapse; font-size: var(--fs-sm);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
}
.price-comparison th, .detail-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);
}
.price-comparison td, .detail-table td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); }
.price-comparison tr:last-child td, .detail-table tr:last-child td { border-bottom: none; }
.detail-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* R38: Zahl-Spalten rechts gebuendigt, aktueller Deal als Zeilen-Tint
   (Inline-Styles der Seiten → Klassen; Werte unangetastet) */
.price-comparison .num { text-align: right; font-variant-numeric: tabular-nums; }
.price-comparison th.num { font-variant-numeric: normal; }
.price-comparison tr.is-current td { background: var(--dl-tint); }
.price-comparison__src {
  margin: var(--sp-2) 0 0; font-family: var(--font-mono);
  font-size: var(--fs-xs); letter-spacing: .02em; color: var(--text-muted);
}

/* --- Aehnliche Deals (R38: Datensatz-Zeilen statt Karten-Grid — Verfassung
       Regel 6; Rezept der Familien-Zeilenhandschrift R36/R37) --- */
.deal-similar { max-width: 1200px; margin: var(--sp-7) auto 0; padding: 0 var(--sp-5); }
.deal-similar__title { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -.015em; margin: 0 0 var(--sp-4); }
.deal-similar__list { list-style: none; margin: 0; padding: 0; }
.deal-similar__row {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4);
  min-height: 44px; padding: var(--sp-3) 0;
  border-top: 1px solid var(--border);
  color: var(--text); text-decoration: none;
}
.deal-similar__list li:last-child .deal-similar__row { border-bottom: 1px solid var(--border); }
.deal-similar__row:hover .deal-similar__name { color: var(--primary); text-decoration: underline; }
.deal-similar__row:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.deal-similar__name { font-weight: 600; font-size: var(--fs-base); }
.deal-similar__meta { flex: 1 1 100%; order: 3; font-size: var(--fs-sm); color: var(--text-muted); }
.deal-similar__price {
  margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-sm);
  color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums;
}

/* --- Community-Hinweis (derzeit deaktivierter Slot; R38: als leise
       Mono-Statuszeile inszeniert statt H2-Sektion — der Status ist
       Information, kein Inhalt) --- */
.community-section { max-width: 800px; margin: 0 auto; padding: var(--sp-4) var(--sp-5); }

/* --- Pills --- */
.pill {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .03em;
  background: var(--bg-soft); color: var(--text-muted);
}
.pill-good { background: var(--success-light); color: var(--success); }
.pill-bad { background: var(--warning-light); color: var(--warning); }

/* --- Share-Buttons (social-share.js) --- */
.share-buttons { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); 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; }

/* --- Reveal (Detail: gleiche Mechanik wie Familien) --- */
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
}

/* --- Reduced Motion (komplett) --- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .deal-similar__row, .dl-relatedrow, .share-btn { transition: none; }
}

/* ═══════════════════════════════════════════════════════════
   DESIGN-V2-FAMILIEN-OVERRIDES (Rezepte 1:1 css/region-page.css:
   Glasleiste, Syne-Logo, blur, v2-Focus-Kanon, Ellipsis-Guard)
   ═══════════════════════════════════════════════════════════ */
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] .hero__title { 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; }
}


/* ─── Deal-Lightbox (js/deal-gallery.js erzeugt .deal-lightbox dynamisch).
      Port der Regeln aus deal-conversion-boost.css, die beim v2-Familienport
      aus dem Bundle fiel — QA-Fund 10.09.2026: Ohne diese Regeln öffnete die
      Lightbox ungestylt am Seitenende und ließ sich visuell nicht schließen
      (Escape entfernte nur die Klasse ohne display-Wirkung). Scrims und
      Buttons laufen über --ink/--paper, damit beide Themes identisch AA
      bleiben; Touch-Targets >= 44px; Transition nur ohne reduced-motion. ─── */
.deal-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--ink) 95%, transparent);
  backdrop-filter: blur(8px);
}
.deal-lightbox.open { display: flex; }
.deal-lightbox__img {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.deal-lightbox__close,
.deal-lightbox__nav {
  position: absolute;
  background: color-mix(in srgb, var(--paper) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--paper) 20%, transparent);
  color: var(--paper);
  min-width: 44px;
  min-height: 44px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: var(--fs-lg);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.deal-lightbox__close { top: var(--sp-4); right: var(--sp-4); }
.deal-lightbox__nav { top: 50%; transform: translateY(-50%); }
.deal-lightbox__nav--prev { left: var(--sp-4); }
.deal-lightbox__nav--next { right: var(--sp-4); }
.deal-lightbox__close:hover,
.deal-lightbox__nav:hover {
  background: color-mix(in srgb, var(--paper) 20%, transparent);
}
.deal-lightbox__close:focus-visible,
.deal-lightbox__nav:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.deal-lightbox__counter {
  position: absolute;
  bottom: var(--sp-5);
  left: 50%;
  transform: translateX(-50%);
  color: color-mix(in srgb, var(--paper) 70%, transparent);
  font-size: var(--fs-sm);
  background: color-mix(in srgb, var(--ink) 40%, transparent);
  padding: 4px 14px;
  border-radius: var(--radius-full);
}
@media (prefers-reduced-motion: no-preference) {
  .deal-lightbox__close,
  .deal-lightbox__nav { transition: background .15s ease; }
}

/* ═══════════════════════════════════════════════════════════
   R38 DESIGN-AUTHORITY — deals-Familie „Die Deal-Tafel fuehrt"
   (2026-09-12). Rezepte 1:1 aus ratgeber-page.css (rg-hero/rg-h1/
   rg-window/rg-table/rg-trustline, R37) bzw. stadt-page.css (R36).
   Token-rein: keine Farb-, Font-Size- oder Schatten-Literale —
   Budget fonts=10 / shadows=4 unangetastet. Wahrheit: Preise sind
   ausschliesslich die beobachteten Richtwerte (Stand 08/2026).
   ═══════════════════════════════════════════════════════════ */

/* --- Index: Display-Kopf „Stille mit Groesse" + EIN Fenster-Fotomoment
       (R36/R37-Lehre: Fenster neben dem Kopf, verifiziertes Bestandsfoto
       mit Orts-Caption — Wahrheitsregel) --- */
.dl-hero {
  padding: var(--sp-6) 0 var(--sp-9);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.dl-hero__grid {
  display: grid;
  /* R43 „Der Traum führt": großes Fenster (480px) statt 340px — das native
     600er-Porträt bleibt scharf, das Statement führt (Regel 1/5). */
  grid-template-columns: minmax(0, 1fr) 480px;
  gap: var(--sp-8);
  align-items: center;
}
.dl-window { margin: 0; min-width: 0; }
/* R44b: echtes Flugzeugfenster statt radius-lg-Rechteck — Form/Rahmen/
   Scheibe kanonisch aus .ds2-window (design-system-v2.css), hier bleibt
   nur die 340px-Spalte (R38-Lehre bleibt: Portrait-Praesenz neben dem
   Display-Kopf, ca. 438px hoch). */
.dl-window .ds2-window { width: 100%; }
.dl-window img { display: block; width: 100%; height: auto; }
.dl-window figcaption {
  margin-top: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .02em;
  color: var(--text-muted);
}
.dl-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);
}
.dl-h1 {
  font-size: var(--fs-display-hero);
  line-height: 1.02; margin: var(--sp-4) 0 var(--sp-5);
  max-width: 18ch;
  hyphens: auto;
  overflow-wrap: break-word;
}
.dl-h1__sub {
  display: block;
  font-size: var(--fs-display-section); font-weight: 500;
  letter-spacing: -.01em;
}
.dl-sub { max-width: 560px; margin-top: var(--sp-4); font-size: var(--fs-md); color: var(--text-muted); line-height: 1.65; }

/* Mono-Trust-Zeile (R34–R37-Handschrift): Signale als Text, keine Icons */
.dl-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"] .dl-trustline { color: color-mix(in srgb, var(--text-muted) 62%, var(--text)); }
html[data-theme] .hero .dl-trustline { color: var(--text-on-dark-muted); }

/* --- Index: Deal-Tafel (Regel 6: Zeilen, rechts gepinnter Richtwert,
       Quelle+Stand EINMAL in der Caption) --- */
.dl-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);
}
.dl-table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.dl-table caption.dl-table__src {
  text-align: left; font-family: var(--font-mono);
  font-size: var(--fs-xs); letter-spacing: .02em; color: var(--text-muted);
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border);
  background: var(--dl-ghost);
}
.dl-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(--dl-ghost);
}
.dl-table td { padding: var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--border); vertical-align: top; }
.dl-table tbody tr:last-child td { border-bottom: none; }
/* Touch-&-Typo-Floor 14.09.: Deal-Titel in th scope=row sind lesende
   Navigation — mindestens 14px, der Spaltenkopf-Stil gilt nur fuer thead. */
.dl-table tbody th { font-size: var(--fs-sm); }
.dl-table tbody th a { font-size: var(--fs-sm); }
.dl-row__main { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-2) 0; }
.dl-row__link {
  color: var(--text); font-weight: 600; text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px;
}
.dl-row__link:hover { color: var(--primary); text-decoration: underline; }
.dl-row__link:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.dl-row__meta {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: .04em; color: var(--text-muted);
}
.dl-thead__wert { text-align: right; }
.dl-row__wert { text-align: right; white-space: nowrap; }
.dl-price {
  display: block; font-family: var(--font-mono);
  font-size: var(--fs-md); color: var(--text);
  font-variant-numeric: tabular-nums;
}
.dl-price__per { font-size: var(--fs-xs); color: var(--text-muted); }
.dl-row__live {
  display: inline-flex; align-items: center; min-height: 44px;
  /* Touch-&-Typo-Floor 14.09.: Partner-CTA ist lesender Interaktionstext */
  font-size: var(--fs-sm); color: var(--primary);
  text-decoration: underline; text-underline-offset: 3px;
}
.dl-row__live:hover { color: var(--primary-light, var(--primary)); }

/* --- Detail: Foto-Hero auf Token-Basis (v1-Overlay-Literal raus) --- */
.dl-hero--detail { padding: var(--sp-9) 0; min-height: 60vh; display: flex; align-items: center; }
.dl-hero__bg { position: absolute; inset: 0; z-index: -1; }
.dl-hero__img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.dl-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--ink) 85%, transparent),
    color-mix(in srgb, var(--ink) 60%, transparent));
}
.dl-hero__content { max-width: 680px; }
html[data-theme] .dl-hero--detail .hero__title { color: var(--text-on-dark); }
/* Leitwert als Mono-Zeile (Regel 8: der Akzent bleibt beim CTA-Button;
   Zahlen tragen Einheit und Bezug in der Quellzeile darunter) */
.dl-leadprice {
  margin: var(--sp-5) 0 var(--sp-2);
  font-family: var(--font-mono); font-size: var(--fs-2xl); font-weight: 500;
  color: var(--text-on-dark); letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.dl-leadprice span { font-size: var(--fs-sm); color: var(--text-on-dark-muted); letter-spacing: 0; }
.dl-src {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: .02em; color: var(--text-on-dark-muted);
}

/* --- Detail: „Passend dazu" als Haarlinien-Zeilen (R36/R37-Handschrift;
       ersetzt das step-card-Grid, slice55-Vertrag migriert) --- */
.related-content { padding-block: var(--sp-7); }
.dl-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;
}
.dl-relatedrow:last-of-type { border-bottom: 1px solid var(--border); }
.dl-relatedrow strong { font-size: var(--fs-base); font-weight: 600; }
.dl-relatedrow span { font-size: var(--fs-sm); color: var(--text-muted); }
.dl-relatedrow:hover strong { color: var(--primary); text-decoration: underline; }
.dl-relatedrow:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

/* --- Detail: FAQ tokenisiert (ehem. Inline-Block deal-premium-css) --- */
.deal-faq { max-width: 100%; margin: var(--sp-6) 0; }
.deal-faq__title { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -.015em; margin: 0 0 var(--sp-4); }
.deal-faq__item { border-bottom: 1px solid var(--border); }
.deal-faq__item:first-child { border-top: 1px solid var(--border); }
.deal-faq__summary {
  cursor: pointer; font-weight: 600; font-size: var(--fs-base);
  padding: var(--sp-4) var(--sp-2); list-style: none; min-height: 44px;
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3);
  color: var(--text);
}
.deal-faq__summary::-webkit-details-marker { display: none; }
.deal-faq__summary::after {
  content: '+'; font-size: var(--fs-xl); font-weight: 300;
  color: var(--primary); flex: 0 0 24px; text-align: center;
}
html[data-theme] .deal-faq__summary::after { transition: transform var(--dur) var(--ease); }
.deal-faq__item[open] .deal-faq__summary::after { transform: rotate(45deg); }
.deal-faq__answer { padding: 0 var(--sp-2) var(--sp-4); font-size: var(--fs-sm); line-height: 1.65; color: var(--text-body); }

/* --- Detail: Rest-Inszenierung --- */
.section--soft { background: var(--bg-soft); }
.dl-narrowhost { max-width: 800px; margin-inline: auto; }
.dl-statusline {
  margin: 0; font-family: var(--font-mono);
  font-size: var(--fs-xs); letter-spacing: .02em; color: var(--text-muted);
}
.dl-statusline strong { color: var(--text-body); font-weight: 600; }
[data-theme="light"] .dl-statusline { color: color-mix(in srgb, var(--text-muted) 62%, var(--text)); }

/* --- R38 Breakpoints (Regel 9: mobil als Record-Rows neu erzählt) --- */
@media (max-width: 780px) {
  .dl-hero { padding: var(--sp-5) 0 var(--sp-6); }
  .dl-hero__grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .dl-window { max-width: none; }
  .dl-h1 { max-width: none; }
  /* R38 Pass 3 (R37-Pass-3-Lehre „mobil H1 -> Foto"): Der Kopf zerfaellt
     in Grid-Kinder; das Fenster folgt DIREKT der H1 — Screen 1 ist die
     eine Idee „Reise-Deals + Fensterblick", Sub/Trust erzählt Screen 2. */
  .dl-head { display: contents; }
  .dl-head .dl-eyebrow { order: 1; }
  .dl-head .dl-h1 { order: 2; margin: 0 0 var(--sp-4); }
  /* R43: Display-Sub mobil auf H2-Niveau — der Kopf bleibt ein Screen,
     das Fensterfoto rückt in den ersten Viewport (Regel 9). */
  .dl-head .dl-h1 .dl-h1__sub { font-size: var(--fs-xl); letter-spacing: 0; }
  .dl-window { order: 3; }
  .dl-head .dl-sub { order: 4; margin-top: 0; }
  .dl-head .dl-trustline { order: 5; }
  .dl-table, .dl-table tbody { display: block; }
  .dl-table thead { display: none; }
  .dl-table tbody tr { display: block; border-bottom: 1px solid var(--border); }
  .dl-table tbody tr:last-child { border-bottom: none; }
  .dl-table tbody th[scope="row"], .dl-table tbody td { display: block; text-align: left; border-bottom: none; padding: var(--sp-1) var(--sp-4); }
  .dl-row__main { padding: var(--sp-2) 0 0; }
  .dl-row__wert { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-4); padding-bottom: var(--sp-2); }
  .dl-price { font-size: var(--fs-lg); }
  .dl-row__live { margin-left: auto; }
  .dl-hero--detail { min-height: 0; padding: var(--sp-7) 0; }
  .dl-leadprice { font-size: var(--fs-xl); }
  .dl-dataset dl > div { grid-template-columns: 1fr; gap: var(--sp-1); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme] .deal-faq__summary::after { transition: 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; } }