/* ============================================================================
   HostKlar — Designsystem
   Modernes, seriöses deutsches Fintech/Compliance-Look-and-feel.
   Hell, vertrauenswürdig, klar. Nur System-Fonts, keine externen CDNs.
   Klassen-Kontrakt siehe docs/DESIGN.md.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. Design-Tokens (CSS-Variablen)
   --------------------------------------------------------------------------- */
:root {
  /* Farb-Palette — „Tannengrün & warme Creme" (Gründer-Wahl 2026-07-06):
     Immobilien/Vertrauen/Wachstum statt Standard-Tech-Blau. Warm, seriös,
     minimalistisch. Alle Text-Kombinationen WCAG-AA. */
  --c-brand:        #1f5c46;   /* Primär: gedämpftes Tannengrün */
  --c-brand-600:    #184a38;
  --c-brand-700:    #123a2c;
  --c-brand-050:    #e9f1ec;   /* sehr helles Salbei für Flächen/Hover */
  --c-accent:       #c07a43;   /* warmes Terrakotta für Deko-Akzente */

  /* Neutrale — warm getönt (Creme statt kaltweiß) */
  --c-ink:          #1b2a24;   /* Haupt-Text: warmes Dunkelgrün-Anthrazit */
  --c-ink-soft:     #46554d;   /* Sekundär-Text */
  --c-muted:        #566459;   /* Hilfstext / Provenienz (AA ~5:1 auf Creme) */
  --c-line:         #e4e7e1;   /* Rahmen/Trenner */
  --c-line-strong:  #c7d0c7;
  --c-bg:           #f6f3ec;   /* Seiten-Hintergrund: warme Creme */
  --c-surface:      #ffffff;   /* Karten/Panels */
  --c-surface-alt:  #f0ece2;   /* leicht abgesetzte warme Fläche */

  /* Status / Ampel — an die warme Palette angepasst */
  --c-good:         #166b40;   /* Erfolg-Grün, dunkler als Brand → unterscheidbar */
  --c-good-bg:      #e6f4ec;
  --c-good-line:    #b6e0c6;
  --c-warn:         #8a5a12;   /* Bernstein, AA auf --c-warn-bg */
  --c-warn-bg:      #fbf1de;
  --c-warn-line:    #eed5a6;
  --c-bad:          #b3261e;
  --c-bad-bg:       #fbeceb;
  --c-bad-line:     #f0c2be;
  --c-info:         #1f5c46;   /* Info-Callouts in Markengrün statt Blau */
  --c-info-bg:      #e9f1ec;
  --c-info-line:    #c3d9cd;

  /* Typografie-Skala */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  --fs-xs:   0.8125rem;   /* 13px — Untergrenze für Kleintext (Zielgruppe 45–70) */
  --fs-sm:   0.9375rem;   /* 15px — nichts Handlungsrelevantes darunter */
  --fs-base: 1.0625rem;   /* 17px — Fließtext, Tabellen, Formulare */
  --fs-md:   1.125rem;
  --fs-lg:   1.375rem;
  --fs-xl:   1.75rem;
  --fs-2xl:  2.25rem;
  --fs-3xl:  3rem;

  --lh-tight: 1.2;
  --lh-base:  1.6;

  /* Radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* Schatten (subtil, seriös) */
  --sh-xs: 0 1px 2px rgba(27, 42, 36, 0.06);
  --sh-sm: 0 1px 3px rgba(27, 42, 36, 0.08), 0 1px 2px rgba(27, 42, 36, 0.05);
  --sh-md: 0 4px 12px rgba(27, 42, 36, 0.08), 0 2px 4px rgba(27, 42, 36, 0.05);
  --sh-lg: 0 12px 32px rgba(27, 42, 36, 0.12);

  /* Layout */
  --container-max: 1120px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
}

/* ---------------------------------------------------------------------------
   2. Reset / Basis
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--space-3);
  line-height: var(--lh-tight);
  color: var(--c-ink);
  font-weight: 700;
  letter-spacing: -0.01em;
}
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }

p { margin: 0 0 var(--space-4); }

a { color: var(--c-brand); text-decoration: none; }
a:hover { color: var(--c-brand-700); text-decoration: underline; }

img, svg { max-width: 100%; }

small { font-size: var(--fs-sm); }

code, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}
pre {
  background: var(--c-surface-alt);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: var(--space-4);
  overflow-x: auto;
}

hr { border: 0; border-top: 1px solid var(--c-line); margin: var(--space-6) 0; }

/* ---------------------------------------------------------------------------
   3. Layout — Container, Header, Nav, Footer
   --------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--c-line);
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: 64px;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
  flex-wrap: wrap;
}
/* Logo / Brand ist üblicherweise das erste Kind der Nav */
.nav > a:first-child,
.nav .nav__brand {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--c-ink);
  margin-right: auto;
}
.nav > a:first-child:hover { text-decoration: none; }
.nav img, .nav svg { height: 30px; width: auto; display: block; }

.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;   /* Klickziel-Minimum */
  padding: var(--space-2) var(--space-3);
  border-radius: var(--r-sm);
  color: var(--c-ink-soft);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav__link:hover {
  background: var(--c-brand-050);
  color: var(--c-brand-700);
  text-decoration: none;
}
.nav__link.is-active,
.nav__link[aria-current="page"] {
  color: var(--c-brand);
  background: var(--c-brand-050);
  box-shadow: inset 0 -3px 0 var(--c-brand);   /* "Wo bin ich?" auf einen Blick */
  font-weight: 700;
}

.footer {
  margin-top: var(--space-10);
  padding: var(--space-8) 0;
  background: var(--c-ink);
  color: #cdd5cc;
  font-size: var(--fs-sm);
}
.footer a { color: #e6efe6; }
.footer a:hover { color: #ffffff; }
.footer h4 { color: #ffffff; font-size: var(--fs-base); margin-bottom: var(--space-2); }
.footer .container { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  color: #9aa89c;
  font-size: var(--fs-xs);
}

/* ---------------------------------------------------------------------------
   4. Hero
   --------------------------------------------------------------------------- */
.hero {
  padding: var(--space-10) 0 var(--space-8);
  background:
    radial-gradient(1200px 400px at 15% -10%, var(--c-brand-050), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, var(--c-bg) 100%);
  border-bottom: 1px solid var(--c-line);
}
.hero .container { max-width: 860px; }
.hero__title {
  font-size: var(--fs-3xl);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-4);
  color: var(--c-ink);
}
.hero__title em {
  font-style: normal;
  color: var(--c-brand);
}
.hero__sub {
  font-size: var(--fs-lg);
  font-weight: 400;
  color: var(--c-ink-soft);
  line-height: 1.5;
  margin-bottom: var(--space-6);
  max-width: 60ch;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ---------------------------------------------------------------------------
   4b. Hero-Kennzahlen-Band (Gründer-Beschluss 2026-07-06): drei grosse, freie
       Zahlen OHNE Boxen (nur dezente Trennlinien), Mitte hervorgehoben,
       darunter klein der Sternchen-Disclaimer. Der Hero traegt dazu eine
       zweilagige Haeuser-Silhouette als Inline-SVG (kein externes Bild).
   --------------------------------------------------------------------------- */
.kennzahlen {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: var(--space-4);
  align-items: center;
  margin: var(--space-7, 40px) 0 var(--space-3);
}
.kennzahl {
  padding: var(--space-2) var(--space-4);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2);
}
.kennzahl + .kennzahl { border-left: 1px solid var(--c-line-strong); }
.kennzahl__num {
  font-size: var(--fs-2xl);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--c-ink);
}
.kennzahl__label {
  font-size: var(--fs-sm);
  color: var(--c-ink-soft);
  line-height: 1.4;
}
.kennzahl--haupt .kennzahl__num {
  font-size: clamp(2.25rem, 4vw, 3rem);
  color: var(--c-brand);
}
.kennzahlen__hinweis {
  font-size: var(--fs-sm);
  color: var(--c-muted);
  line-height: 1.5;
  max-width: 78ch;
  margin-bottom: var(--space-5);
}
.hero--kennzahlen {
  background-color: #ffffff;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='160' viewBox='0 0 1200 160'%3E%3Cg fill='%23e4efe7'%3E%3Crect x='0' y='72' width='70' height='88'/%3E%3Crect x='90' y='48' width='55' height='112'/%3E%3Crect x='170' y='84' width='90' height='76'/%3E%3Crect x='300' y='60' width='60' height='100'/%3E%3Crect x='390' y='88' width='80' height='72'/%3E%3Crect x='510' y='44' width='65' height='116'/%3E%3Crect x='610' y='76' width='85' height='84'/%3E%3Crect x='740' y='56' width='60' height='104'/%3E%3Crect x='830' y='86' width='90' height='74'/%3E%3Crect x='960' y='64' width='60' height='96'/%3E%3Crect x='1050' y='80' width='110' height='80'/%3E%3C/g%3E%3Cg fill='%23cadcce'%3E%3Cpolygon points='30,160 30,112 75,90 120,112 120,160'/%3E%3Cpolygon points='150,160 150,120 190,101 230,120 230,160'/%3E%3Cpolygon points='265,160 265,108 315,84 365,108 365,160'/%3E%3Cpolygon points='420,160 420,122 458,103 496,122 496,160'/%3E%3Cpolygon points='540,160 540,114 585,91 630,114 630,160'/%3E%3Cpolygon points='680,160 680,120 720,101 760,120 760,160'/%3E%3Cpolygon points='800,160 800,110 850,86 900,110 900,160'/%3E%3Cpolygon points='950,160 950,118 990,99 1030,118 1030,160'/%3E%3Cpolygon points='1080,160 1080,112 1125,90 1170,112 1170,160'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(1200px 400px at 15% -10%, var(--c-brand-050), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, var(--c-bg) 100%);
  background-repeat: repeat-x, no-repeat, no-repeat;
  background-position: bottom center, top left, top left;
  background-size: auto 160px, auto, auto;
  padding-bottom: 150px;
}
@media (max-width: 700px) {
  .kennzahlen { grid-template-columns: 1fr; gap: var(--space-4); }
  .kennzahl--haupt { order: -1; }
  .kennzahl + .kennzahl { border-left: 0; }
  .hero--kennzahlen { padding-bottom: 110px; background-size: auto 110px, auto, auto; }
}

/* ---------------------------------------------------------------------------
   5. Buttons
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;   /* Klickziel-Minimum (Zielgruppe 45–70) */
  padding: 0.65rem 1.25rem;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease,
              box-shadow 0.15s ease, transform 0.05s ease;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible {
  outline: 3px solid var(--c-brand-050);
  outline-offset: 1px;
}

.btn--primary {
  background: var(--c-brand);
  color: #ffffff;
  box-shadow: var(--sh-sm);
}
.btn--primary:hover { background: var(--c-brand-600); color: #fff; }
.btn--primary:active { background: var(--c-brand-700); }

.btn--ghost {
  background: var(--c-surface);
  color: var(--c-brand);
  border-color: var(--c-line-strong);
}
.btn--ghost:hover {
  background: var(--c-brand-050);
  border-color: var(--c-brand);
  color: var(--c-brand-700);
}

.btn--sm { min-height: 44px; padding: 0.5rem 1rem; font-size: var(--fs-sm); }
/* Großer Haupt-CTA (Gründer-Beschluss 2026-07-06: ein zentraler „Jetzt starten") */
.btn--xl {
  min-height: 60px;
  padding: 1rem 2.4rem;
  font-size: var(--fs-md);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
}
.hero__actions--single { margin-top: var(--space-6); }
/* Pre-Signup-Funnel „Jetzt starten" (/los) — ein Frage-Screen pro Schritt. */
.quiz-wrap { max-width: 640px; }
.quiz-frage { font-size: var(--fs-2xl); line-height: 1.15; margin-bottom: var(--space-3); }
.quiz-progress {
  height: 8px; background: var(--c-line); border-radius: var(--r-pill);
  overflow: hidden; margin: var(--space-2) 0 var(--space-5);
}
.quiz-progress > span {
  display: block; height: 100%; background: var(--c-brand);
  border-radius: var(--r-pill); transition: width 0.25s ease;
}
.quiz-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3); margin-top: var(--space-4);
}
.quiz-tile {
  text-align: left; padding: var(--space-4) var(--space-5); min-height: 68px;
  font-family: inherit; font-size: var(--fs-base); font-weight: 600;
  color: var(--c-ink); background: var(--c-surface);
  border: 1.5px solid var(--c-line-strong); border-radius: var(--r-md);
  cursor: pointer; transition: border-color 0.12s ease, background 0.12s ease,
              box-shadow 0.12s ease;
}
.quiz-tile:hover { border-color: var(--c-brand); background: var(--c-brand-050); box-shadow: var(--sh-sm); }
.quiz-tile:focus-visible { outline: 3px solid var(--c-brand-050); outline-offset: 1px; }
.quiz-input {
  width: 100%; box-sizing: border-box; font-family: inherit;
  font-size: var(--fs-md); padding: 0.85rem 1rem; margin-top: var(--space-4);
  border: 1.5px solid var(--c-line-strong); border-radius: var(--r-md);
}
.quiz-input:focus { outline: 3px solid var(--c-brand-050); border-color: var(--c-brand); }
.quiz-back { color: var(--c-muted); text-decoration: underline; font-size: var(--fs-sm); }
@media (max-width: 560px) {
  .hero__actions--single .btn--xl { width: 100%; }
}
.btn--block { display: flex; width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.55; cursor: not-allowed; transform: none;
}

/* ---------------------------------------------------------------------------
   6. Karten & Grid
   --------------------------------------------------------------------------- */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--space-5);
  box-shadow: var(--sh-sm);
}
.card + .card { margin-top: var(--space-4); }
.card__title {
  font-size: var(--fs-md);
  font-weight: 700;
  margin-bottom: var(--space-3);
  color: var(--c-ink);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.card__title + p { color: var(--c-ink-soft); }

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

/* Vertikaler Rhythmus für Abschnitte */
.section { padding: var(--space-8) 0; }
.section--alt { background: var(--c-surface-alt); }

/* ---------------------------------------------------------------------------
   7. Stat-Kacheln & KPI
   --------------------------------------------------------------------------- */
.stat {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--space-5);
  box-shadow: var(--sh-xs);
  text-align: left;
}
.stat__num {
  display: block;
  font-size: var(--fs-2xl);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-brand);
  font-variant-numeric: tabular-nums;
}
.stat__label {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--c-muted);
  font-weight: 500;
}

/* KPI — kompaktere inline-Kennzahl, z.B. im Rechner-Ergebnis */
.kpi {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3) var(--space-4);
  background: var(--c-brand-050);
  border: 1px solid var(--c-info-line);
  border-radius: var(--r-md);
  min-width: 120px;
}
.kpi > strong {
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--c-brand-700);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.kpi > span {
  font-size: var(--fs-xs);
  color: var(--c-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ---------------------------------------------------------------------------
   8. Tabellen
   --------------------------------------------------------------------------- */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-base);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.table th, .table td {
  padding: 0.65rem 0.85rem;
  text-align: left;
  border-bottom: 1px solid var(--c-line);
  vertical-align: top;
}
.table thead th {
  background: var(--c-surface-alt);
  color: var(--c-ink-soft);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}
.table tbody tr:last-child td { border-bottom: 0; }
/* Zebra als Zeilenanker für alternde Augen (Hover-Regel bleibt dominant) */
.table tbody tr:nth-child(even) { background: var(--c-surface-alt); }
.table tbody tr:hover { background: var(--c-brand-050); }
.table td.num, .table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Auf schmalen Screens horizontal scrollbar statt Umbruch */
.table-wrap { width: 100%; overflow-x: auto; }

/* ---------------------------------------------------------------------------
   9. Badges
   --------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.2em 0.65em;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.4;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-line-strong);
  background: var(--c-surface-alt);
  color: var(--c-ink-soft);
  white-space: nowrap;
}
.badge--good { background: var(--c-good-bg); color: var(--c-good); border-color: var(--c-good-line); }
.badge--warn { background: var(--c-warn-bg); color: var(--c-warn); border-color: var(--c-warn-line); }
.badge--bad  { background: var(--c-bad-bg);  color: var(--c-bad);  border-color: var(--c-bad-line); }

/* ---------------------------------------------------------------------------
   10. Ampel (Gewerblichkeit / Risiko)
   --------------------------------------------------------------------------- */
.ampel {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.4em 0.9em;
  font-size: var(--fs-sm);
  font-weight: 700;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
}
/* farbiger Punkt vor dem Text */
.ampel::before {
  content: "";
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
  flex: none;
}
.ampel--gruen { background: var(--c-good-bg); color: var(--c-good); border-color: var(--c-good-line); }
.ampel--gelb  { background: var(--c-warn-bg); color: var(--c-warn); border-color: var(--c-warn-line); }
.ampel--rot   { background: var(--c-bad-bg);  color: var(--c-bad);  border-color: var(--c-bad-line); }

/* ---------------------------------------------------------------------------
   11. Callout / Hinweis-Box
   --------------------------------------------------------------------------- */
.callout {
  position: relative;
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
  border: 1px solid var(--c-line);
  border-left: 4px solid var(--c-line-strong);
  border-radius: var(--r-md);
  background: var(--c-surface-alt);
  color: var(--c-ink-soft);
  font-size: var(--fs-base);
  line-height: 1.55;
}
.callout > :last-child { margin-bottom: 0; }
.callout strong, .callout b { color: var(--c-ink); }
.callout__title {
  display: block;
  font-weight: 700;
  color: var(--c-ink);
  margin-bottom: var(--space-1);
}
.callout--info {
  background: var(--c-info-bg);
  border-color: var(--c-info-line);
  border-left-color: var(--c-info);
  color: var(--c-brand-700);
}
.callout--info .callout__title { color: var(--c-brand-700); }
.callout--warn {
  background: var(--c-warn-bg);
  border-color: var(--c-warn-line);
  border-left-color: var(--c-warn);
  color: #7a5307;
}
.callout--warn .callout__title { color: var(--c-warn); }

/* ---------------------------------------------------------------------------
   12. Formulare
   --------------------------------------------------------------------------- */
.form-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.form-row label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-ink);
}
.form-row .hint { font-size: var(--fs-xs); color: var(--c-muted); font-weight: 400; }

input, select, textarea {
  font-family: inherit;
  font-size: var(--fs-base);
  color: var(--c-ink);
  background: var(--c-surface);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-md);
  padding: 0.6rem 0.75rem;
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px var(--c-brand-050);
}
input::placeholder, textarea::placeholder { color: var(--c-muted); }
input[type="checkbox"], input[type="radio"] {
  width: auto;
  accent-color: var(--c-brand);
  margin-right: var(--space-2);
}
select {
  appearance: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2.25rem;
}
/* Checkbox-Zeile (Selbstauskunft-Formular) */
.form-row--check {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-2);
}
.form-row--check label { font-weight: 400; color: var(--c-ink-soft); cursor: pointer; }
fieldset {
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--space-5);
  margin: 0 0 var(--space-5);
}
legend { font-weight: 700; padding-inline: var(--space-2); }

/* ---------------------------------------------------------------------------
   13. Pricing / Preis-Karten
   --------------------------------------------------------------------------- */
.pricing {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: stretch;
}
.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--space-6);
  box-shadow: var(--sh-sm);
}
.price-card h3 { font-size: var(--fs-md); }
.price-card .price {
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--c-ink);
  letter-spacing: -0.02em;
  margin: var(--space-2) 0 var(--space-1);
}
.price-card .price small {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-muted);
}
.price-card ul {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 var(--space-6);
  flex: 1;
}
.price-card li {
  position: relative;
  padding: var(--space-2) 0 var(--space-2) 1.6em;
  font-size: var(--fs-sm);
  color: var(--c-ink-soft);
  border-bottom: 1px solid var(--c-line);
}
.price-card li:last-child { border-bottom: 0; }
.price-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 0.65em;
  height: 0.35em;
  border-left: 2px solid var(--c-accent);
  border-bottom: 2px solid var(--c-accent);
  transform: rotate(-45deg);
}
.price-card--featured {
  border-color: var(--c-brand);
  box-shadow: var(--sh-md);
  border-width: 2px;
}
.price-card--featured::after {
  content: "Empfohlen";
  position: absolute;
  top: -0.85rem;
  right: var(--space-5);
  background: var(--c-brand);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.25rem 0.75rem;
  border-radius: var(--r-pill);
  box-shadow: var(--sh-sm);
}

/* ---------------------------------------------------------------------------
   14. Provenienz-Kleintext
   --------------------------------------------------------------------------- */
.prov {
  display: block;
  font-size: var(--fs-xs);
  color: var(--c-muted);
  line-height: 1.45;
  margin-top: var(--space-2);
}
.prov::before { content: "Quelle: "; font-weight: 600; color: var(--c-ink-soft); }
.prov--inline { display: inline; margin-top: 0; }
.prov--inline::before { content: ""; }

/* ---------------------------------------------------------------------------
   15. Utilities
   --------------------------------------------------------------------------- */
.muted { color: var(--c-muted); }
.text-sm { font-size: var(--fs-sm); }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-0 { margin-bottom: 0; }
.stack > * + * { margin-top: var(--space-4); }
.row { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-brand);
  margin-bottom: var(--space-2);
}
.disclaimer {
  font-size: var(--fs-sm);
  color: var(--c-ink-soft);
  line-height: 1.5;
  max-width: 75ch;
  border-top: 1px dashed var(--c-line-strong);
  padding-top: var(--space-3);
  margin-top: var(--space-4);
}

/* ---------------------------------------------------------------------------
   16. Responsive — Mobile-first Breakpoints
   --------------------------------------------------------------------------- */
@media (min-width: 640px) {
  .pricing { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .hero__title { font-size: var(--fs-3xl); }
}
@media (min-width: 960px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .pricing { grid-template-columns: repeat(3, 1fr); }
}

/* Unterhalb 768px: mehrspaltige Grids einspaltig (Mobile-first Default greift) */
@media (max-width: 767px) {
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
  .hero { padding-top: var(--space-8); }
  .hero__title { font-size: var(--fs-2xl); }
  .hero__sub { font-size: var(--fs-md); }
  .nav { gap: var(--space-2); }
  .nav__link { padding: var(--space-1) var(--space-2); }
  .footer .container { flex-direction: column; gap: var(--space-5); }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}

/* Onboarding-Journey */
.onb-row{display:block;text-decoration:none;color:inherit;transition:border-color .12s,box-shadow .12s}
.onb-row:hover{border-color:var(--c-brand,#1f5c46);box-shadow:var(--sh-sm,0 2px 8px rgba(0,0,0,.06))}
.onb-choices{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.onb-radio{display:flex;align-items:center;gap:8px;font-weight:400;cursor:pointer}
.onb-radio input{width:auto;margin:0}

/* Flow-Stepper (Willkommen -> Objekt -> Prozess) */
.stepper{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.stepper .step{font-size:13px;font-weight:600;color:var(--c-muted,#667);background:var(--c-surface-alt);
  border-radius:20px;padding:5px 12px;white-space:nowrap}
.stepper .step--current{background:var(--c-brand,#1f5c46);color:#fff}
.stepper .step--done{background:var(--c-good-bg);color:var(--c-good)}
.stepper .step--done::before{content:"\2713 ";font-weight:700}

/* ===========================================================================
   17. Verfeinerungen — A11y, Mobile-Nav, Print, Empty-States
   (rein additiv; keine bestehende Regel entfernt oder umbenannt)
   =========================================================================== */

/* ---------------------------------------------------------------------------
   17.1 A11y — deutliche, konsistente Fokusringe (:focus-visible)
   Ergänzt die vorhandenen :focus/:focus-visible-Regeln, ersetzt sie nicht.
   --------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
.nav__link:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--c-brand);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
/* Formularfelder: sichtbarer Ring auch bei eigenem box-shadow-Fokus */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline-offset: 1px;
  box-shadow: 0 0 0 3px var(--c-brand-050);
}
/* Nav-Link-Fokus deutlich vom Hover-Hintergrund abheben */
.nav__link:focus-visible {
  background: var(--c-brand-050);
  color: var(--c-brand-700);
}
/* :focus niemals ersatzlos entfernen — Fallback für Browser ohne :focus-visible */
a:focus,
.btn:focus,
.nav__link:focus { outline-offset: 2px; }

/* Screenreader-only Utility (falls Backbone Skip-Links o.ä. rendert) */
.sr-only,
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------------
   17.2 Mobile-Nav — sauberer Umbruch/horizontales Scrollen <=640px
   --------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .nav {
    flex-wrap: nowrap;
    gap: var(--space-1);
    min-height: 56px;
    /* Links-Cluster horizontal scrollbar, Brand behält festen Platz */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;              /* Firefox: Leiste ausblenden */
    -ms-overflow-style: none;
  }
  .nav::-webkit-scrollbar { display: none; }  /* WebKit: Leiste ausblenden */

  /* Brand nicht schrumpfen/scrollen lassen */
  .nav > a:first-child,
  .nav .nav__brand {
    flex: none;
    margin-right: var(--space-2);
  }
  .nav img, .nav svg { height: 26px; }

  /* Links kompakter, kein Umbruch im horizontalen Scroll-Streifen */
  .nav__link {
    flex: none;
    padding: var(--space-1) var(--space-2);
    font-size: var(--fs-sm);
    white-space: nowrap;
  }
  .nav .btn,
  .nav .btn--sm {
    flex: none;
    padding: 0.35rem 0.7rem;
    font-size: var(--fs-xs);
    white-space: nowrap;
  }
}

/* Sehr schmale Geräte (<=380px): Brand-Text zurücknehmen, Logo bleibt */
@media (max-width: 380px) {
  .nav > a:first-child,
  .nav .nav__brand { font-size: var(--fs-sm); }
}

/* Nichts läuft aus dem Viewport */
html, body { overflow-x: hidden; }

/* ---------------------------------------------------------------------------
   17.3 Empty-States & vertikaler Rhythmus, Feinschliff
   --------------------------------------------------------------------------- */
/* Freundlichere leere Zustände: zentrierter, luftiger .muted-Block */
.card > .muted:only-child,
.table-wrap > .muted:only-child,
.stack > .muted:only-child {
  display: block;
  text-align: center;
  padding: var(--space-6) var(--space-4);
  line-height: 1.5;
}

/* Konsistente Abstände zwischen aufeinanderfolgenden Sektionen/Karten */
.section + .section { padding-top: 0; }
.stat + .stat { margin-top: 0; }
.callout + .callout { margin-top: var(--space-4); }
.disclaimer:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

/* Stat-Zahlen brechen nicht unschön um */
.stat__num { overflow-wrap: anywhere; }

/* Badge/Ampel/Stepper sauber umbrechend in engen Zeilen */
.row .badge,
.row .ampel { margin-bottom: var(--space-1); }
.badge, .ampel { max-width: 100%; }
.stepper { row-gap: var(--space-2); }

/* KPI-Cluster in einer .row auf Mobile volle Breite nutzbar */
@media (max-width: 640px) {
  .kpi { min-width: 0; flex: 1 1 140px; }
}

/* ---------------------------------------------------------------------------
   17.4 Tabellen — Lesbarkeit auf Mobile
   .table-wrap ist bereits scrollbar; hier nur Feinschliff + Scroll-Hinweis
   --------------------------------------------------------------------------- */
.table-wrap {
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-lg);
}
@media (max-width: 640px) {
  .table { font-size: var(--fs-sm); }
  .table th, .table td { padding: 0.5rem 0.6rem; }
  /* dezenter Rand signalisiert horizontal scrollbaren Inhalt */
  .table-wrap { box-shadow: inset -8px 0 8px -8px rgba(27,42,36,.15); }
}

/* ---------------------------------------------------------------------------
   17.5 Responsives Grid — sicher einspaltig unter ~700px
   (ergänzt den bestehenden 767px-Block; harte Absicherung für 640–700px)
   --------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .grid--2,
  .grid--3 { grid-template-columns: 1fr; }
  .pricing { grid-template-columns: 1fr; }
  .hero__actions .btn { flex: 1 1 auto; }
}

/* ---------------------------------------------------------------------------
   17.6 prefers-reduced-motion — Transitions/Animationen aus
   (ergänzt den bestehenden Block; deckt zusätzlich Animationen ab)
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .btn:active { transform: none; }
}

/* ---------------------------------------------------------------------------
   17.7 Druck — nur Inhalt, Nav/Footer/Buttons aus, randlose Karten
   --------------------------------------------------------------------------- */
@media print {
  :root { --c-bg: #ffffff; }
  html, body {
    background: #ffffff !important;
    color: #000000;
    overflow-x: visible;
  }

  /* Interaktive/dekorative Chrome-Elemente ausblenden */
  .site-header,
  .footer,
  .btn,
  .hero__actions,
  .stepper,
  .onb-choices { display: none !important; }

  /* Sticky-Header darf keinen Platz reservieren */
  .site-header { position: static !important; }

  /* Nur Inhalt sichtbar, volle Breite */
  main,
  .container {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Karten randlos und umbruchfreundlich */
  .card,
  .stat,
  .price-card,
  .callout,
  .table {
    box-shadow: none !important;
    border: 1px solid #cccccc !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .card, .stat, .price-card {
    padding: var(--space-3) !important;
    margin-bottom: var(--space-3) !important;
  }

  /* Grids für Druck kompakt zweispaltig, Tabellen voll sichtbar */
  .table-wrap { overflow: visible !important; box-shadow: none !important; }
  .table { font-size: 11px; }

  /* Überschriften nicht allein am Seitenende */
  h1, h2, h3, h4 { break-after: avoid; page-break-after: avoid; }

  /* Farbige Status-Marker in Graustufen lesbar halten */
  .badge, .ampel { border: 1px solid #999999 !important; }

  a[href]::after { content: ""; }  /* keine URL-Suffixe im Druck */
}

/* R20: Mehr-Menü (CSS-only Dropdown, löst Nav-Overflow) */
.nav__more{position:relative}
.nav__more summary{cursor:pointer;list-style:none;user-select:none}
.nav__more summary::-webkit-details-marker{display:none}
.nav__more-panel{position:absolute;right:0;top:calc(100% + 6px);background:#fff;
  border:1px solid var(--c-line-strong);border-radius:var(--r-md);box-shadow:0 10px 28px rgba(15,40,70,.14);
  padding:8px;display:flex;flex-direction:column;min-width:190px;z-index:60}
.nav__more-panel .nav__link{padding:8px 12px;border-radius:8px;white-space:nowrap}
.nav__more-panel .nav__link:hover{background:var(--c-surface-alt)}
@media (max-width:700px){.nav__more-panel{position:fixed;left:12px;right:12px;top:auto}}

/* Amts-Strecke übersichtlicher (Gründer-Feedback Bild 5) */
.amtsversand__schritt{position:relative;padding:14px 0 14px 20px;margin-left:6px;
  border-left:2px solid var(--c-line)}
.amtsversand__schritt:last-of-type{border-left-color:transparent}
.amtsversand__schritt-titel{margin:0 0 8px;font-size:1rem;color:var(--c-brand-700)}
.amtsversand__schritt::before{content:"";position:absolute;left:-9px;top:16px;width:14px;
  height:14px;border-radius:50%;background:var(--c-brand);box-shadow:0 0 0 3px #fff}
.amtsversand__hinweis{font-size:.9rem;color:var(--c-ink-soft);margin:8px 0 0}
.amtsversand__video{margin:8px 0 14px}
.amtsversand textarea,.amtsversand input[readonly]{background:#f6f8fb;border:1px solid var(--c-line-strong);
  border-radius:var(--r-md);padding:8px 10px;font-family:ui-monospace,Menlo,monospace;font-size:12.5px;
  width:100%;box-sizing:border-box}
.amtsversand .btn{margin:2px 0}
.amtsversand__copy label{display:block;margin-top:8px;font-size:.85rem;color:var(--c-ink-soft)}

/* ===========================================================================
   18. Zielgruppen-Kalibrierung 45–70 (Design-Chairman-Plan, 2026-07-05)
   Rein additiv — keine bestehende Klasse entfernt oder umbenannt.
   =========================================================================== */

/* --- 18.1 Standortanzeige in der Nav (.nav__org war bisher undefiniert) --- */
.nav__org {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--c-muted);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  padding: 0.25em 0.75em;
  white-space: nowrap;
}

/* --- 18.2 Buttons: mobil umbruchfähig statt abgeschnitten (Hero-CTA) ---
   Nav-Buttons bleiben nowrap: die .nav .btn-Regel in §17.2 deckt nur ≤640px,
   deshalb hier die Absicherung für das komplette ≤700px-Fenster. */
@media (max-width: 700px) {
  .btn {
    white-space: normal;
    line-height: 1.3;
  }
  .nav .btn,
  .nav .btn--sm {
    white-space: nowrap;
  }
}

/* --- 18.3 Mobile-Nav-Paket: Ballast raus, Dropdown entclippen, Scroll-Hinweis --- */
@media (max-width: 700px) {
  .nav__org { display: none; }
  /* backdrop-filter macht position:fixed-Kinder zum Containing-Block-Opfer —
     mobil deshalb ohne Filter, dafür fast deckend */
  .site-header {
    backdrop-filter: none;
    background: rgba(255, 255, 255, 0.97);
  }
  .nav__more-panel { top: 64px; }
  /* sichtbare Affordance: rechts geht es im Scroll-Streifen weiter */
  .nav { box-shadow: inset -16px 0 12px -12px rgba(27, 42, 36, 0.14); }
}

/* --- 18.4 Footer-Links vom Mobile-Nav-Shrink ausnehmen (44px-Ziele) --- */
@media (max-width: 640px) {
  .footer .nav__link {
    font-size: var(--fs-sm);
    padding: 10px 8px;
    min-height: 44px;
  }
}

/* --- 18.5 Checkboxen/Radios für 60+-Finger (überschreibt width:auto in §12) --- */
input[type="checkbox"],
input[type="radio"] {
  width: 22px;
  height: 22px;
  flex: none;
}
.form-row--check { align-items: center; }

/* --- 18.6 Ungewrappte Tabellen mobil retten (Startklar-Score, EÜR, USt) ---
   Notnagel bis zum HTML-Fix (.table-wrap, Struktur-Plan 4). */
@media (max-width: 700px) {
  .card > .table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: inset -8px 0 8px -8px rgba(27, 42, 36, 0.15);
  }
}

/* --- 18.7 Content-Links ohne Farbsehen erkennbar (WCAG 1.4.1) ---
   .onb-row ist ein Karten-Link (display:block) und bleibt ausgenommen. */
main a:not(.btn):not(.nav__link):not(.onb-row) {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- 18.8 Report-Seite: bisher undefinierte Klassen gestalten --- */
.report__kopf {
  color: var(--c-ink-soft);
  font-size: var(--fs-sm);
}
.report__hinweise { padding-left: 1.2em; }
.report__hinweise li { margin-bottom: var(--space-2); }
.report__mail {
  background: var(--c-surface-alt);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-md);
  padding: var(--space-3);
}

/* --- 18.9 iOS-Zoom-Bremse in den Angst-Flows (Behördenbrief, Monats-Mail) ---
   iOS zoomt bei Feldern < 16px hinein; !important gegen Inline-Styles. */
@media (max-width: 700px) {
  .amtsversand textarea,
  .amtsversand input[readonly] { font-size: 16px; }
  .report__mail { font-size: 16px !important; }
}

/* --- 18.10 Reise-Liste scanbar (progressive Enhancement via :has()) ---
   "Hier weitermachen"-Station springt ins Auge, Erledigtes tritt zurück;
   degradiert in Alt-Browsern folgenlos. */
.card li:has(> .badge--warn) {
  list-style: none;
  background: var(--c-brand-050);
  border: 1px solid var(--c-info-line);
  border-radius: var(--r-md);
  padding: var(--space-3) var(--space-4);
  margin-block: var(--space-2);
}
.card li:has(> .badge--good) { color: var(--c-muted); }
/* Ghost-Button-Ketten (objekt.html): definierte Abstände statt Leerzeichen */
.card > .btn { margin: var(--space-1) var(--space-2) var(--space-1) 0; }

/* --- 18.11 Pflichtfeld-Stern (Gründer-Feedback A3): Konvention
   <span class="req">*</span> im Label von Pflichtfeldern + Hinweis-Zeile */
.req { color: var(--c-bad, #b3261e); font-weight: 700; }

/* --- 18.12 Reise kompakt + Rechen-Aufklapper (Gründer-Feedback C2/C3) ---
   Aktive Station als einzige grosse Karte, kommende Stationen ausgegraut,
   "Wie wir rechnen"-Details dezent. Additiv, keine Bestandsklassen geändert. */
.card li.reise-aktiv {
  list-style: none;
  background: var(--c-brand-050);
  border: 1px solid var(--c-brand);
  border-radius: var(--r-lg);
  padding: var(--space-4) var(--space-5);
  margin-block: var(--space-3);
}
.card li.reise-aktiv p { margin: var(--space-2) 0; }
.reise-kommend a { color: var(--c-muted); }
details.annahmen { margin-top: var(--space-3); }
details.annahmen > summary { cursor: pointer; font-weight: 600; color: var(--c-ink-soft); }

/* --- 18.13 Kategorie-Zwischenüberschrift im Dokumenten-Center (Minimalismus 2026-07-06)
   Additiv, keine Bestandsklassen geändert, keine :root-Tokens angefasst. */
.section-subhead {
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-ink-soft);
}

/* --- 18.14 Startklar-Fehlliste (A2, Lodgify-Muster "Missing Requirements")
   Kompakte Deep-Link-Card auf Reise- und Objektseite. Additiv, keine
   Bestandsklassen geändert, keine :root-Tokens angefasst. */
.fehlliste ul { list-style: none; margin: 0; padding-left: 0; }
.fehlliste li { margin-block: var(--space-1); }