/* ==========================================================================
   umzug-mit-pflegegrad24.de — Stylesheet
   Token-Architektur uebernommen von fairumzug.de, Palette und Groessen neu.

   Sektionen:
   1. Tokens · 2. Reset/Base · 3. Layout · 4. Komponenten · 5. Chrome
   6. Seitensektionen · 7. Ratgeber/Prose · 8. Utilities · 9. Media Queries
   10. Reduced Motion · 11. Korrekturen
   ========================================================================== */

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
  --color-bg: #ffffff;
  /* Sehr leicht gruenlich getoentes Grau statt neutralem Grau: haelt die
     ruhigen Abschnitte im Markenklang, ohne farbig zu wirken. */
  --color-surface: #f3f8f4;
  --color-ink: #16181a;
  /* 0.78 statt der ueblichen 0.68 Deckkraft: ergibt ~8.6:1 auf Weiss und
     damit AAA statt nur AA. Die Zielgruppe (Pflegebeduerftige, Angehoerige
     60+) liest haeufig mit reduzierter Sehschaerfe. */
  --color-ink-muted: rgba(22, 24, 26, 0.78);

  /* ---- Kleeblattgruen ----
     Eine Farbfamilie, drei Aufgaben. Wichtig ist die Trennung zwischen der
     hellen Markenfarbe und den dunkleren Abstufungen: --color-accent traegt
     weisse Schrift NICHT ausreichend (3.5:1), deshalb bekommen Flaechen mit
     weisser Schrift --color-accent-500 (5.2:1) und Gruen ALS TEXT auf hellem
     Grund --color-accent-700 (7.6:1, AAA). */
  --color-accent: #2fa84f;       /* Marke: Logo, Ränder, Fortschritt, Icons auf dunkel */
  --color-accent-100: #e9f7ed;   /* sehr helle Fläche für Icon-Kacheln und Hinweise */
  --color-accent-200: #b6e3c3;   /* Ränder auf hellen Flächen */
  --color-accent-500: #1a7d3e;   /* interaktiv: Buttons mit weisser Schrift */
  --color-accent-600: #146530;   /* Hover */
  --color-accent-700: #14602f;   /* Grün als Text auf Weiss */

  /* Der Handlungsaufruf traegt dieselbe Markenfarbe. Eine zweite Signalfarbe
     wuerde die Seite bunter machen, ohne die Klickrate zu verbessern: ein
     kraeftiger gruener Button auf hellem Grund ist bereits das mit Abstand
     auffaelligste Element der Seite. */
  --color-cta: var(--color-accent-500);
  --color-cta-600: var(--color-accent-600);
  --color-cta-700: var(--color-accent-700);
  --color-cta-100: var(--color-accent-100);

  /* Einzige Ausnahme von der Ein-Farben-Regel: Bewertungssterne. Gruene
     Sterne liest niemand als Bewertung. */
  --color-star: #c8891a;

  --color-divider: rgba(22, 24, 26, 0.12);
  --color-warning-bg: #fdf4e3;
  --color-warning-border: #e0a63a;
  --color-warning-ink: #6d4405;
  --color-info-bg: #edf6f0;
  --color-info-border: #b6e3c3;
  --color-info-ink: #14602f;

  /* Dunkles Waldgruen fuer die wenigen dunklen Flaechen (Topbar, Abschluss-
     Banner). Bewusst nicht mehr fuer Hero und Formular: ein hoher dunkler
     Block direkt am Seitenanfang wirkt schwer und drueckt die Seite. */
  --color-ink-900: #103a22;
  --color-ink-800: #17512f;
  --on-dark: rgba(255, 255, 255, 0.95);
  --on-dark-muted: rgba(255, 255, 255, 0.80);
  --on-dark-divider: rgba(255, 255, 255, 0.20);

  /* Systemschriften: kein Google-Fonts-Request (kein Render-Blocking, keine
     US-Datenuebermittlung, kein Consent-Thema). */
  --font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 20px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 980px;

  /* Gruen getoente statt neutraler Schatten - passt zur Palette und wirkt
     weicher als ein grauer Schlagschatten. */
  --shadow-sm: 0 1px 3px rgba(16, 58, 34, 0.08);
  --shadow-md: 0 8px 24px rgba(16, 58, 34, 0.09);
  --shadow-lg: 0 18px 44px rgba(16, 58, 34, 0.12);

  --max-width: 1180px;
  --max-width-prose: 74ch;
  --nav-height: 68px;
  /* 48px statt der ueblichen 44px: groessere Ziele fuer Nutzer mit
     eingeschraenkter Feinmotorik. */
  --touch-target: 48px;

  --transition-fast: 0.2s ease;
  --transition-standard: 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   2. Reset / Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  /* Deutsche Komposita ("Wohnumfeldverbesserung") sprengen sonst schmale
     Karten auf dem Handy. */
  overflow-wrap: break-word;
  font-family: var(--font-body);
  /* 17px statt 16px — zielgruppengerecht, ohne dass das Layout kippt. */
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-3);
  /* Silbentrennung an korrekten Stellen — die Seiten deklarieren lang="de",
     also greifen die deutschen Trennregeln. */
  hyphens: auto;
  -webkit-hyphens: auto;
}
h1 { font-size: clamp(32px, 7.2vw, 54px); }
h2 { font-size: clamp(25px, 5.2vw, 38px); }
h3 { font-size: clamp(20px, 3.4vw, 24px); }
h4 { font-size: 19px; }
h5 { font-size: 16px; }
h6 {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-700);
  font-weight: 700;
  font-family: var(--font-body);
}
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent-700); text-decoration: none; }
strong, b { font-weight: 700; }
img, svg { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }
table { border-collapse: collapse; width: 100%; }

@media (hover: hover) and (pointer: fine) {
  a:hover { color: color-mix(in srgb, var(--color-accent-700) 80%, black); text-decoration: underline; }
}

:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;
}
::selection { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Skip-Link: fuer Tastatur- und Screenreader-Nutzer, die sonst bei jedem
   Seitenwechsel durch die komplette Navigation tabben muessen. */
.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -100px;
  z-index: 100;
  background: var(--color-ink-900);
  color: #fff;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: top var(--transition-fast);
}
.skip-link:focus { top: var(--space-3); color: #fff; }

.icon { display: inline-block; flex-shrink: 0; vertical-align: middle; }

[id] { scroll-margin-top: calc(var(--nav-height) + var(--space-4)); }

/* ==========================================================================
   3. Layout
   ========================================================================== */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: max(var(--space-4), env(safe-area-inset-left));
  padding-right: max(var(--space-4), env(safe-area-inset-right));
}
.container-prose { max-width: calc(var(--max-width-prose) + 2 * var(--space-4)); }
.section { padding: var(--space-6) 0; }
.section-tight { padding: var(--space-5) 0; }
.section-surface { background: var(--color-surface); }

.grid { display: grid; gap: var(--space-4); }
.grid-2, .grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
/* Grid-Items sind per Default min-width:auto und damit mindestens so breit
   wie ihr laengstes unteilbares Wort — bei deutschen Komposita sprengt das
   die Spur und schiebt die ganze Zeile ueber den Viewport. */
.grid > * { min-width: 0; }

.lede { color: var(--color-ink-muted); max-width: 58ch; font-size: 19px; }
.text-center { text-align: center; }
.section-head { margin-bottom: var(--space-5); }
.section-head .lede { margin-left: auto; margin-right: auto; }

/* Scroll-Reveal als Progressive Enhancement: Inhalte sind ohne JS, bei
   prefers-reduced-motion und fuer Crawler sofort sichtbar. Animiert wird
   erst, wenn main.js html.js-reveal setzt. */
.reveal { opacity: 1; transform: none; }
html.js-reveal .reveal > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
html.js-reveal .reveal.is-visible > * { opacity: 1; transform: none; }
html.js-reveal .reveal.is-visible > *:nth-child(1) { transition-delay: 0.02s; }
html.js-reveal .reveal.is-visible > *:nth-child(2) { transition-delay: 0.09s; }
html.js-reveal .reveal.is-visible > *:nth-child(3) { transition-delay: 0.16s; }
html.js-reveal .reveal.is-visible > *:nth-child(4) { transition-delay: 0.23s; }
html.js-reveal .reveal.is-visible > *:nth-child(5) { transition-delay: 0.3s; }
html.js-reveal .reveal.is-visible > *:nth-child(n+6) { transition-delay: 0.36s; }

/* ==========================================================================
   4. Komponenten
   ========================================================================== */

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.2;
  min-height: var(--touch-target);
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  touch-action: manipulation;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:active:not(:disabled) { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { text-decoration: none; }
}

/* Der Handlungsaufruf traegt Kleeblattgruen mit weisser Schrift (5.2:1).
   Bewusst --color-cta (= accent-500) und nicht die helle Markenfarbe:
   Weiss auf #2fa84f erreicht nur 3.5:1 und faellt damit durch. */
.btn-cta {
  background: var(--color-cta);
  color: #fff;
  box-shadow: 0 10px 24px -10px rgba(26, 125, 62, 0.7);
}
@media (hover: hover) and (pointer: fine) {
  .btn-cta:hover:not(:disabled) { background: var(--color-cta-600); transform: translateY(-1px); color: #fff; }
}
.btn-cta:active:not(:disabled) { background: var(--color-cta-600); }

.btn-primary {
  background: var(--color-accent);
  color: #fff;
  box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--color-accent) 55%, transparent);
}
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover:not(:disabled) { background: var(--color-accent-600); transform: translateY(-1px); color: #fff; }
}
.btn-primary:active:not(:disabled) { background: var(--color-accent-600); }

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-ink);
  border-color: var(--color-divider);
}
@media (hover: hover) and (pointer: fine) {
  .btn-secondary:hover { background: color-mix(in srgb, var(--color-ink) 6%, var(--color-surface)); color: var(--color-ink); }
}

/* Sekundaerer Knopf. Steht seit dem hellen Hero auf weissem Grund, deshalb
   gruene Kontur statt heller Kontur auf dunkel. Die dunkle Variante fuer das
   Abschluss-Banner steht in Abschnitt 6. */
.btn-outline-hero {
  background: transparent;
  color: var(--color-accent-700);
  border-color: var(--color-accent-200);
  border-width: 1.5px;
}
@media (hover: hover) and (pointer: fine) {
  .btn-outline-hero:hover { background: var(--color-accent-100); color: var(--color-accent-700); border-color: var(--color-accent); }
}
.btn-whatsapp { background: #128c4a; color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .btn-whatsapp:hover { background: #0f753d; color: #fff; }
}
.btn-block { width: 100%; }
.btn-sm { padding: 0 var(--space-4); font-size: 15px; }
.btn-lg { font-size: 19px; padding: var(--space-4) var(--space-6); min-height: 56px; }
@media (hover: hover) and (pointer: fine) {
  .btn .icon-arrow { transition: transform var(--transition-fast); }
  .btn:hover .icon-arrow { transform: translateX(3px); }
}

/* --- Karten --- */
.card {
  background: #fff;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-standard), box-shadow var(--transition-standard);
}
.card h3, .card h4 { margin-bottom: var(--space-2); }
.card p:last-child { margin-bottom: 0; }
.card-icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-3);
  background: var(--color-accent-100);
  color: var(--color-accent-700);
}
.card-icon-cta { background: var(--color-cta-100); color: var(--color-cta-700); }
.card-icon-navy { background: var(--color-info-bg); color: var(--color-ink-800); }
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }
@media (hover: hover) and (pointer: fine) {
  .card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
}

/* --- Tags --- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  padding: 7px 15px;
  border-radius: var(--radius-pill);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-700); font-weight: 600; }
.tag-cta { background: var(--color-cta-100); color: var(--color-cta-700); font-weight: 700; border: 1px solid color-mix(in srgb, var(--color-cta) 35%, transparent); }
.tag-neutral { background: var(--color-surface); color: var(--color-ink-muted); }

/* --- Hinweisboxen --- */
.callout {
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin: var(--space-4) 0;
  border: 1px solid;
  font-size: 16px;
}
.callout p:last-child { margin-bottom: 0; }
.callout-info { background: var(--color-info-bg); border-color: var(--color-info-border); color: var(--color-info-ink); }
.callout-warn { background: var(--color-warning-bg); border-color: var(--color-warning-border); color: var(--color-warning-ink); }
.callout-title { display: flex; align-items: center; gap: var(--space-2); font-weight: 700; margin-bottom: var(--space-2); }
.callout .icon { flex: none; }

/* --- Formulare --- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .field > span, .field-legend {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-ink-muted);
}
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; }
.input {
  width: 100%;
  min-height: var(--touch-target);
  padding: 11px 14px;
  font: inherit;
  /* Nie unter 16px: iOS Safari zoomt sonst beim Fokussieren automatisch. */
  font-size: 17px;
  color: var(--color-ink);
  background: #fff;
  border: 1.5px solid var(--color-divider);
  border-radius: var(--radius-sm);
  touch-action: manipulation;
}
.input:focus-visible { border-color: var(--color-accent); }
@media (hover: hover) and (pointer: fine) {
  .input:hover { border-color: color-mix(in srgb, var(--color-ink) 32%, transparent); }
}
.field-full { grid-column: 1 / -1; }
.field-hint { font-size: 14px; color: var(--color-ink-muted); font-weight: 400; }
.field-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin: var(--space-4) 0; }

.choice-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--touch-target);
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-divider);
  border-radius: var(--radius-md);
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
@media (hover: hover) and (pointer: fine) {
  .choice-card:hover { border-color: color-mix(in srgb, var(--color-accent) 50%, var(--color-divider)); }
}
.choice-card input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.choice-card .dot {
  width: 22px; height: 22px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
.choice-card .box { border-radius: 6px; }
.choice-card input:checked ~ .dot {
  border-color: var(--color-accent);
  background: var(--color-accent);
  box-shadow: inset 0 0 0 4px #fff;
}
.choice-card:has(input:checked) { border-color: var(--color-accent); background: var(--color-accent-100); }
.choice-card input:focus-visible ~ .dot { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.choice-card .label-text { font-weight: 600; }
.choice-card .label-sub { display: block; font-weight: 400; font-size: 14px; color: var(--color-ink-muted); }
.choice-group { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-4) 0; }

.seg-toggle {
  display: inline-flex;
  border: 1.5px solid var(--color-divider);
  border-radius: var(--radius-pill);
  overflow: hidden;
  width: fit-content;
}
.seg-toggle label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target);
  min-width: 76px;
  padding: 0 var(--space-4);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.seg-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.seg-toggle label:has(input:checked) { background: var(--color-accent-500); color: #fff; }
.seg-toggle label:has(input:focus-visible) { outline: 3px solid var(--color-accent); outline-offset: -3px; }
.seg-toggle-wide { display: flex; width: 100%; }
.seg-toggle-wide label { flex: 1; min-width: 0; padding: 0 var(--space-2); }

/* Einwilligung nach Art. 9 DSGVO — bewusst als eigene, gut sichtbare
   Komponente statt als winzige Checkbox: der Pflegegrad ist ein
   Gesundheitsdatum, die Einwilligung muss ausdruecklich und informiert
   erfolgen. Nie vorangekreuzt. */
.consent-field {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1.5px solid var(--color-divider);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px;
  line-height: 1.5;
}
.consent-field input {
  width: 24px; height: 24px;
  flex: none;
  margin: 2px 0 0;
  accent-color: var(--color-accent);
  cursor: pointer;
}
.consent-field:has(input:checked) { border-color: var(--color-accent); }

/* Honeypot: fuer Menschen unsichtbar, per aria-hidden und tabindex minus 1
   auch fuer Screenreader. Bewusst NICHT off-canvas positioniert — das kann
   die scrollbare Flaeche verbreitern und horizontales Scrollen erzeugen. */
.honeypot-field {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.honeypot-field input { width: 1px; }

.form-error {
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  color: var(--color-warning-ink);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  font-size: 15px;
  margin-top: var(--space-3);
}
.form-error[hidden] { display: none; }

/* ==========================================================================
   5. Chrome: Topbar, Navigation, Footer, Consent, WhatsApp
   ========================================================================== */
.topbar { background: var(--color-ink-900); }
.topbar-inner {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  padding: 9px max(var(--space-4), env(safe-area-inset-left)) 9px max(var(--space-4), env(safe-area-inset-right));
  font-size: 15px;
}
.topbar-inner a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 26px;
  color: var(--on-dark-muted);
  font-weight: 600;
}
@media (hover: hover) and (pointer: fine) {
  .topbar-inner a:hover { color: var(--on-dark); text-decoration: none; }
}
.topbar-phone { color: var(--on-dark) !important; }

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: var(--nav-height);
  display: flex;
  align-items: center;
  padding: var(--space-3) 0;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav { background: rgba(255, 255, 255, 0.98); }
}
.nav.is-scrolled { border-color: var(--color-divider); box-shadow: var(--shadow-sm); }
.nav .container { display: flex; align-items: center; gap: var(--space-4); width: 100%; }
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 17px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin-right: auto;
}
@media (hover: hover) and (pointer: fine) {
  .nav-brand:hover { text-decoration: none; color: var(--color-ink); }
}
.brand-mark { width: 38px; height: 38px; flex: none; }
.brand-text { display: flex; flex-direction: column; }
.brand-text .brand-sub {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent-700);
}
.nav-links { display: none; gap: var(--space-4); }
.nav-links a { color: var(--color-ink); font-size: 16px; font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover { color: var(--color-accent-700); }
}
.nav-actions { display: flex; align-items: center; gap: var(--space-2); }
.nav-actions .btn-cta { font-size: 14px; padding: 0 var(--space-3); }
.nav-phone { display: none; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: var(--touch-target);
  height: var(--touch-target);
  padding: 0 var(--space-2);
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  touch-action: manipulation;
  color: var(--color-ink);
  font-size: 13px;
  font-weight: 700;
}
/* Beschriftetes Menue-Icon statt reinem Hamburger: fuer aeltere Nutzer ist
   das Symbol allein oft nicht selbsterklaerend. */
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.mobile-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border-bottom: 1px solid var(--color-divider);
  box-shadow: var(--shadow-md);
  padding: var(--space-4) max(var(--space-4), env(safe-area-inset-left)) calc(var(--space-5) + env(safe-area-inset-bottom));
  max-height: calc(100vh - var(--nav-height));
  overflow-y: auto;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu-links { display: flex; flex-direction: column; }
.mobile-menu-links a {
  display: flex;
  align-items: center;
  min-height: var(--touch-target);
  color: var(--color-ink);
  font-size: 18px;
  font-weight: 600;
  border-bottom: 1px solid var(--color-divider);
}
.mobile-menu-links a:last-child { border-bottom: none; }
.mobile-menu .btn { width: 100%; margin-top: var(--space-4); }

/* --- Breadcrumb --- */
.breadcrumb { padding: var(--space-4) 0 0; font-size: 14px; }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.breadcrumb li { display: inline-flex; align-items: center; gap: 6px; color: var(--color-ink-muted); }
.breadcrumb li + li::before { content: "/"; color: var(--color-divider); }
.breadcrumb a { color: var(--color-ink-muted); }
@media (hover: hover) and (pointer: fine) {
  .breadcrumb a:hover { color: var(--color-accent-700); }
}
.breadcrumb [aria-current="page"] { color: var(--color-ink); font-weight: 600; }

/* --- Footer --- */
footer { padding: var(--space-7) 0 var(--space-5); border-top: 1px solid var(--color-divider); }
.footer-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; margin-bottom: var(--space-6); }
.footer-grid h5 { margin-bottom: var(--space-3); }
.footer-grid p { font-size: 15px; color: var(--color-ink-muted); }
.footer-links { display: flex; flex-direction: column; gap: var(--space-1); font-size: 15px; }
.footer-links a { display: inline-flex; align-items: center; min-height: 38px; color: var(--color-ink-muted); }
@media (hover: hover) and (pointer: fine) {
  .footer-links a:hover { color: var(--color-accent-700); }
}
.footer-cta { text-align: center; margin-bottom: var(--space-6); }
.footer-bottom { font-size: 14px; color: var(--color-ink-muted); }
.footer-disclaimer { font-size: 13px; color: var(--color-ink-muted); margin-top: var(--space-3); max-width: 80ch; }
.hr { height: 1px; background: var(--color-divider); border: 0; margin: 0 0 var(--space-5); }

/* --- WhatsApp-Button --- */
.whatsapp-fab {
  position: fixed;
  right: max(var(--space-4), env(safe-area-inset-right));
  bottom: max(var(--space-4), env(safe-area-inset-bottom));
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #128c4a;
  color: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
  z-index: 60;
  touch-action: manipulation;
  transition: transform var(--transition-fast);
}
.whatsapp-fab:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .whatsapp-fab:hover { transform: scale(1.08); color: #fff; }
}

/* --- Consent-Banner ---
   Eigenes, schlankes Banner statt CMP-Abo. Erscheint nur, wenn noch keine
   Entscheidung gespeichert ist. Ablehnen ist genauso leicht erreichbar wie
   Zustimmen (gleiche Ebene, gleiche Groesse) — alles andere waere nach
   DSGVO/TTDSG keine freiwillige Einwilligung. */
.consent-banner {
  position: fixed;
  left: max(var(--space-3), env(safe-area-inset-left));
  right: max(var(--space-3), env(safe-area-inset-right));
  bottom: max(var(--space-3), env(safe-area-inset-bottom));
  z-index: 90;
  background: #fff;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4);
  max-width: 560px;
  margin: 0 auto;
  font-size: 15px;
}
.consent-banner[hidden] { display: none; }
.consent-banner h4 { margin-bottom: var(--space-2); }
.consent-banner p { color: var(--color-ink-muted); font-size: 15px; }
.consent-actions { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }
.consent-actions .btn { width: 100%; }

/* ==========================================================================
   6. Seitensektionen
   ========================================================================== */

/* --- Hero ---
   Heller Aufbau nach dem Vorbild seriöser Finanz- und Gesundheitsanbieter:
   fast weisser Grund mit einem sehr weichen gruenen Schein, dunkle Schrift,
   viel Weissraum. Der frühere navyblaue Vollflaechen-Hero war auf dem Handy
   ueber 1.200 px hoch und wirkte als geschlossener dunkler Block - hier
   traegt stattdessen die weisse Formularkarte das visuelle Gewicht. */
.hero {
  position: relative;
  padding: var(--space-6) 0 var(--space-7);
  background: linear-gradient(180deg, #f2f9f4 0%, #ffffff 72%);
  color: var(--color-ink);
  overflow: hidden;
}
/* Zwei sehr blasse Schleier statt einer Farbflaeche: geben dem Kopfbereich
   Tiefe, ohne dass irgendwo Text auf farbigem Grund steht. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(760px circle at 88% -12%, rgba(47, 168, 79, 0.20), transparent 60%),
    radial-gradient(520px circle at 2% 8%, rgba(47, 168, 79, 0.10), transparent 62%);
}
.hero > .container { position: relative; z-index: 1; }
.hero-grid { display: grid; gap: var(--space-6); align-items: start; }
.hero-secondary-title { font-size: clamp(24px, 4.4vw, 32px); margin-bottom: 0; }
.hero h6 { color: var(--color-accent-700); }
.hero h1 { color: var(--color-ink); margin-bottom: var(--space-4); }
.hero-accent { color: var(--color-accent-700); }
.hero-lede { font-size: 19px; color: var(--color-ink-muted); max-width: 48ch; }

/* Vertrauensmerkmale als schlanke weisse Chips - auf hellem Grund lesbarer
   als die frueheren halbtransparenten Pillen auf dunkel. */
.hero-trust-badges { display: flex; gap: var(--space-2); flex-wrap: wrap; margin: var(--space-4) 0; }
.trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-pill);
  padding: 9px 15px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-ink);
  box-shadow: var(--shadow-sm);
}
.trust-pill .icon { color: var(--color-accent-500); flex: none; }

.hero-checklist { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-5) 0; }
.hero-checklist li { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--color-ink-muted); font-size: 17px; }
.hero-checklist .icon { color: var(--color-accent-500); flex: none; margin-top: 3px; }
.hero-checklist strong { color: var(--color-ink); font-weight: 700; }

.hero-ctas { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.hero-ctas .btn { flex: 1 1 auto; }
.hero-legal { color: var(--color-ink-muted); font-size: 13px; margin-top: var(--space-4); max-width: 52ch; }

/* --- Foto-Hero ---
   Einziger dunkler Block der Startseite, dafuer bewusst flach gehalten: auf
   dem Handy ein Fotostreifen plus Text, auf dem Desktop Text links auf
   Dunkelgruen und das Foto rechts, ueber einen Verlauf verbunden. Text steht
   nie direkt auf dem Bild, der Kontrast haengt also nicht vom Ausschnitt ab. */
.hero-photo {
  position: relative;
  background: var(--color-ink-900);
  color: var(--on-dark);
}
.hero-photo-media { position: relative; }
.hero-photo-img {
  display: block;
  width: 100%;
  height: clamp(200px, 52vw, 400px);
  object-fit: cover;
  /* Das Paar sitzt rechts im Bild; der unscharfe Vordergrund links darf
     auf schmalen Displays abgeschnitten werden. */
  object-position: 72% 28%;
}
/* Unterkante des Fotos weich in den dunklen Textbereich auslaufen lassen. */
.hero-photo-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16, 58, 34, 0) 55%, var(--color-ink-900) 100%);
}
.hero-photo-inner { position: relative; z-index: 1; padding-top: var(--space-4); padding-bottom: var(--space-6); }
.hero-photo h1 { color: #fff; margin-bottom: var(--space-4); }
/* accent-200 statt Markengruen: Gruen auf Dunkelgruen faellt sonst durch AA
   (siehe .cta-banner h6). */
.hero-photo h6 { color: var(--color-accent-200); }
.hero-photo .hero-accent { color: #8fdca6; }
.hero-photo .hero-lede { color: var(--on-dark-muted); margin-bottom: var(--space-5); }
.hero-photo .hero-trust-badges { margin-bottom: 0; }
/* Volles btn-lg-Polster bricht "Anspruch kostenlos pruefen" auf 375px um. */
.hero-photo .hero-ctas .btn-lg { padding-left: var(--space-4); padding-right: var(--space-4); }
/* Knoepfe wie im Abschluss-Banner: auf Dunkel ist Weiss auffaelliger als
   Gruen auf Gruen. */
.hero-photo .btn-cta { background: #fff; color: var(--color-accent-700); box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.5); }
.hero-photo .btn-outline-hero { border-color: rgba(255, 255, 255, 0.45); color: var(--on-dark); }
@media (hover: hover) and (pointer: fine) {
  .hero-photo .btn-cta:hover:not(:disabled) { background: var(--color-accent-100); color: var(--color-accent-700); }
  .hero-photo .btn-outline-hero:hover { background: rgba(255, 255, 255, 0.12); color: var(--on-dark); border-color: rgba(255, 255, 255, 0.7); }
}

/* --- Foto neben Text (Anspruch, Einsatzgebiet) ---
   Drei Rasterflaechen: Einleitung, Foto, Inhalt. Auf dem Handy untereinander
   mit dem Foto in der Mitte, damit es die Einleitung nicht nach unten
   schiebt; ab 1024px steht das Foto als eigene Spalte daneben. */
.media-split {
  display: grid;
  grid-template-areas: "head" "photo" "body";
  column-gap: var(--space-7);
}
.media-split-head { grid-area: head; }
.media-split-head .lede { margin-left: 0; }
.media-split-body { grid-area: body; margin-top: var(--space-5); }
.media-photo {
  grid-area: photo;
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.media-photo img { width: 100%; height: 100%; object-fit: cover; }
/* Hochformat auf dem Handy quer beschneiden - volle Hoehe waeren ueber
   500px nur Foto. Gesicht und Rollstuhl bleiben im Ausschnitt. */
.media-photo-portrait { aspect-ratio: 4 / 3; }
.media-photo-portrait img { object-position: 50% 42%; }
.media-photo-landscape { aspect-ratio: 3 / 2; }
.media-photo-landscape img { object-position: 50% 30%; }
.media-badge {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  color: var(--color-ink);
  border-radius: var(--radius-pill);
  padding: 9px 15px;
  font-size: 15px;
  font-weight: 700;
  box-shadow: var(--shadow-md);
}
.media-badge .icon { color: var(--color-accent-500); flex: none; }

/* Bedingungen als Liste: Symbol links, Text rechts. */
.condition-list { display: flex; flex-direction: column; gap: var(--space-3); }
.condition {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-4);
  padding: var(--space-4);
}
.condition .card-icon { grid-row: 1 / span 2; margin-bottom: 0; }
.condition h3 { font-size: 20px; margin-bottom: var(--space-1); }
.condition p { margin: 0; color: var(--color-ink-muted); }

/* --- Statistik-Kacheln ---
   Auf hellem Grund weisse Karten statt Glaskacheln. */
.stats-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); margin-top: var(--space-7); }
.stat-tile {
  padding: var(--space-4) var(--space-3);
  border-radius: var(--radius-md);
  text-align: center;
  background: #fff;
  border: 1px solid var(--color-divider);
  box-shadow: var(--shadow-sm);
}
.stat-value {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 27px;
  color: var(--color-accent-700);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.stat-label { font-size: 14px; color: var(--color-ink-muted); }
.stats-note { color: var(--color-ink-muted); font-size: 12px; margin-top: var(--space-3); text-align: center; }

/* --- Anspruchs-Check (Formularkarte im Hero) ---
   Weisse Karte mit kraeftiger gruener Oberkante. Auf dem hellen Hero ist sie
   damit das einzige Element mit deutlichem Schatten und zieht den Blick
   zuverlaessig auf sich - die Aufgabe, die vorher der dunkle Block hatte. */
.check-card {
  background: #fff;
  color: var(--color-ink);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-divider);
  border-top: 4px solid var(--color-accent);
  box-shadow: var(--shadow-lg);
}
.check-card h4 { margin-bottom: var(--space-3); }
.check-card select.input option { color: var(--color-ink); background: #fff; }
.check-card .consent-field a { color: var(--color-accent-700); text-decoration: underline; }

.check-progress { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); }
.check-progress .seg { flex: 1; height: 5px; border-radius: 3px; background: var(--color-divider); transition: background var(--transition-fast); }
.check-progress .seg.is-filled { background: var(--color-accent); }
.check-step[hidden] { display: none; }
.step-count { font-size: 13px; color: var(--color-ink-muted); font-weight: 600; margin-bottom: var(--space-2); }
.step-actions { display: flex; gap: var(--space-2); margin-top: var(--space-5); }
.step-actions .btn-cta { flex: 1; }

/* Anspruchs-Ampel - Live-Ersteinschaetzung waehrend des Ausfuellens.
   Bewusst unverbindlich formuliert: entscheiden darf allein die Pflegekasse,
   eine Zusage duerfen wir hier nicht suggerieren. */
.ampel {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  font-size: 15px;
  border: 1px solid;
}
.ampel[hidden] { display: none; }
.ampel .icon { flex: none; margin-top: 2px; }
.ampel strong { display: block; }
.ampel span { font-size: 14px; }
.ampel-gruen { background: var(--color-accent-100); border-color: var(--color-accent-200); color: var(--color-accent-700); }
.ampel-gruen .icon { color: var(--color-accent-500); }
.ampel-gruen span { color: var(--color-ink-muted); }
.ampel-gelb { background: var(--color-warning-bg); border-color: var(--color-warning-border); color: var(--color-warning-ink); }
.ampel-gelb .icon { color: var(--color-warning-ink); }
.ampel-gelb span { color: var(--color-warning-ink); opacity: 0.85; }

.check-success { text-align: center; padding: var(--space-5) 0; }
.check-success .checkmark { color: var(--color-accent-500); margin: 0 auto var(--space-3); }

/* --- Schnellkontakt --- */
.quick-contact { display: flex; flex-direction: column; gap: var(--space-5); max-width: 580px; margin: 0 auto; }
.quick-contact-success {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-accent-700);
  font-weight: 700;
}
.quick-contact-success[hidden] { display: none; }
.quick-contact-success .icon { flex: none; }

/* Grosse Telefonleiste - in dieser Zielgruppe der meistgenutzte Kontaktweg. */
.call-bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--color-accent-500);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  box-shadow: 0 12px 26px -10px rgba(26, 125, 62, 0.6);
  transition: transform var(--transition-fast), background var(--transition-fast);
}
@media (hover: hover) and (pointer: fine) {
  .call-bar:hover { transform: translateY(-1px); background: var(--color-accent-600); color: #fff; text-decoration: none; }
}
.call-bar:active { transform: scale(0.98); }
.call-bar-icon {
  width: 48px; height: 48px;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: flex; align-items: center; justify-content: center;
}
.call-bar-text { display: flex; flex-direction: column; min-width: 0; }
.call-bar-label { font-size: 14px; font-weight: 600; opacity: 0.85; }
.call-bar-number { font-family: var(--font-heading); font-weight: 800; font-size: clamp(20px, 5vw, 26px); letter-spacing: -0.01em; }

/* --- Ablaufschritte --- */
.process-step .step-num {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--color-accent-100);
  color: var(--color-accent-700);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 19px;
  margin-bottom: var(--space-3);
}

/* --- Pflegekassen-Kacheln ---
   Bewusst Textkacheln statt Kassenlogos: fremde Wort- und Bildmarken ohne
   Lizenz zu Werbezwecken einzubinden ist markenrechtlich angreifbar. */
.kassen-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
.kassen-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: var(--space-3);
  text-align: center;
  background: #fff;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 15px;
  color: var(--color-ink-muted);
}

/* --- Rechenbeispiel --- */
.calc-grid { display: grid; gap: var(--space-4); }
.calc-card { border-top: 4px solid var(--color-accent-200); }
.calc-card.is-highlight { border-top-color: var(--color-accent); }
.calc-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-divider);
  font-size: 16px;
}
.calc-row:last-of-type { border-bottom: 0; }
.calc-row dt { color: var(--color-ink-muted); }
.calc-row dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-total { border-top: 2px solid var(--color-ink); border-bottom: 0; padding-top: var(--space-3); margin-top: var(--space-2); }
.calc-total dt { color: var(--color-ink); font-weight: 700; }
.calc-total dd { font-size: 24px; color: var(--color-accent-700); font-family: var(--font-heading); }
.calc-note { font-size: 14px; color: var(--color-ink-muted); margin-top: var(--space-3); }

/* --- Kundenstimmen --- */
.testimonial .stars { display: inline-flex; gap: 2px; color: var(--color-star); margin-bottom: var(--space-2); }
.testimonial blockquote { margin: 0 0 var(--space-3); font-style: italic; font-size: 17px; }
.testimonial-meta { display: flex; align-items: center; gap: var(--space-2); font-size: 14px; color: var(--color-ink-muted); }
.testimonial-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--color-accent-500);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  flex: none;
}

/* --- FAQ --- */
.faq-list { max-width: 860px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--color-divider); }
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--touch-target);
  background: none;
  border: none;
  text-align: left;
  padding: var(--space-4) 0;
  cursor: pointer;
  touch-action: manipulation;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  color: var(--color-ink);
}
.faq-question .icon { color: var(--color-accent-700); flex: none; transition: transform var(--transition-standard); }
.faq-question[aria-expanded="true"] .icon { transform: rotate(180deg); }
/* grid-template-rows 0fr auf 1fr animiert sauber auf die auto-Hoehe, was mit
   height oder max-height ohne festen Zielwert nicht moeglich ist. */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  color: var(--color-ink-muted);
  transition: grid-template-rows 0.3s ease, opacity 0.25s ease;
}
.faq-answer > div { overflow: hidden; padding-bottom: var(--space-4); }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-question[aria-expanded="true"] + .faq-answer { grid-template-rows: 1fr; opacity: 1; }

/* --- CTA-Banner ---
   Die einzige dunkle Flaeche der Seite. Bewusst ganz am Ende: dort setzt sie
   einen Schlusspunkt, statt wie der frühere dunkle Hero die ganze Seite zu
   beschweren. Dunkles Waldgruen statt Navy, damit sie zur Marke gehoert. */
.cta-banner {
  background: linear-gradient(150deg, var(--color-ink-900) 0%, var(--color-ink-800) 100%);
  color: var(--on-dark);
}
.cta-banner h2 { color: var(--on-dark); }
/* Nicht die kraeftige Markenfarbe: Gruen auf Dunkelgruen erreicht nur
   4.14:1 und faellt bei 13px durch AA. accent-200 kommt auf 8.9:1. */
.cta-banner h6 { color: var(--color-accent-200); }
.cta-banner-grid { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-5); }
.cta-banner p { color: var(--on-dark-muted); max-width: 46ch; margin-bottom: 0; }
.cta-banner-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
/* Auf dunklem Grund kehrt sich der Hauptknopf um: weiss mit gruener Schrift
   ist dort deutlich auffaelliger als Gruen auf Gruen. */
.cta-banner .btn-cta { background: #fff; color: var(--color-accent-700); box-shadow: none; }
.cta-banner .btn-outline-hero { border-color: var(--on-dark-divider); color: var(--on-dark); }
@media (hover: hover) and (pointer: fine) {
  .cta-banner .btn-cta:hover { background: var(--color-accent-100); color: var(--color-accent-700); }
  .cta-banner .btn-outline-hero:hover { background: rgba(255, 255, 255, 0.12); color: var(--on-dark); }
}

/* --- Download-Karte (Antragspaket) --- */
.download-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  border: 2px dashed var(--color-accent-200);
  background: var(--color-accent-100);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.download-card h3 { margin-bottom: var(--space-2); }
.download-card ul { display: flex; flex-direction: column; gap: var(--space-2); }
.download-card li { display: flex; align-items: flex-start; gap: var(--space-2); font-size: 16px; }
.download-card li .icon { color: var(--color-accent-700); flex: none; margin-top: 4px; }

/* --- Seitenkopf Unterseiten --- */
.page-header { padding: var(--space-5) 0 var(--space-4); }
.page-header .lede { margin-top: var(--space-3); }
.page-meta { font-size: 14px; color: var(--color-ink-muted); margin-top: var(--space-3); }
/* ==========================================================================
   7. Ratgeber / Prose
   ========================================================================== */
.prose { max-width: var(--max-width-prose); }
.prose h2 { margin-top: var(--space-7); font-size: clamp(23px, 4.4vw, 32px); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--space-5); }
.prose p, .prose li { color: var(--color-ink-muted); }
.prose ul, .prose ol { margin: 0 0 var(--space-4); padding-left: 1.5em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: var(--space-2); }
.prose li::marker { color: var(--color-accent-700); }
.prose a { text-decoration: underline; text-underline-offset: 2px; }
.prose strong { color: var(--color-ink); }
.prose blockquote {
  margin: var(--space-4) 0;
  padding-left: var(--space-4);
  border-left: 3px solid var(--color-accent-200);
  font-style: italic;
}

/* Tabellen scrollen in ihrem eigenen Container statt die Seite zu sprengen. */
.table-scroll { overflow-x: auto; margin: var(--space-4) 0; -webkit-overflow-scrolling: touch; }
.data-table { min-width: 460px; font-size: 16px; }
.data-table th, .data-table td { padding: var(--space-3); text-align: left; border-bottom: 1px solid var(--color-divider); vertical-align: top; }
.data-table th { font-weight: 700; color: var(--color-ink); background: var(--color-surface); }
.data-table td { color: var(--color-ink-muted); }
.data-table tr:last-child td { border-bottom: 0; }

/* Inhaltsverzeichnis fuer die laengeren Ratgeberseiten. */
.toc {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-6);
}
.toc h2 { font-size: 16px; margin: 0 0 var(--space-3); text-transform: uppercase; letter-spacing: 0.06em; }
.toc ol { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.toc a { display: inline-flex; align-items: center; min-height: 36px; font-size: 16px; }

/* Musterantrag-Textblock zum Kopieren. */
.copyblock {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin: var(--space-4) 0;
  font-size: 15px;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  color: var(--color-ink);
}
.copyblock-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.copy-status { font-size: 14px; font-weight: 700; color: var(--color-accent-700); }
.copy-status[hidden] { display: none; }

/* Verwandte Seiten am Fuss jeder Ratgeberseite — haelt die interne
   Verlinkung dicht und fuehrt den Nutzer zum naechsten Schritt. */
.related { display: grid; gap: var(--space-3); margin-top: var(--space-7); }
.related-card {
  display: block;
  padding: var(--space-4);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  color: var(--color-ink);
  transition: border-color var(--transition-fast), transform var(--transition-standard);
}
.related-card strong { display: block; margin-bottom: 4px; }
.related-card span { font-size: 15px; color: var(--color-ink-muted); }
@media (hover: hover) and (pointer: fine) {
  .related-card:hover { border-color: var(--color-accent); transform: translateY(-2px); color: var(--color-ink); text-decoration: none; }
}

/* Rechtlicher Fusshinweis auf allen Ratgeberseiten (YMYL-Thema). */
.legal-note {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
  font-size: 13px;
  color: var(--color-ink-muted);
}

/* Rechtsseiten (Impressum, Datenschutz) */
.legal-content h1 { font-size: clamp(26px, 6vw, 40px); }
.legal-content h2 { margin-top: var(--space-6); font-size: clamp(20px, 4.2vw, 28px); }
.legal-content h3 { margin-top: var(--space-4); font-size: 18px; }
.legal-content p, .legal-content li { color: var(--color-ink-muted); }
.legal-content ul { list-style: disc; padding-left: 1.4em; margin-bottom: var(--space-3); }
.legal-content li { margin-bottom: var(--space-1); }

/* ==========================================================================
   8. Utilities
   ========================================================================== */
.hide-mobile { display: none; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.text-accent { color: var(--color-accent-700); }
.text-cta { color: var(--color-cta-700); }
.nowrap { white-space: nowrap; }

/* ==========================================================================
   9. Media Queries (mobile first, zwei Stufen)
   ========================================================================== */
@media (min-width: 641px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .field-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; }
  .stats-row { grid-template-columns: repeat(4, 1fr); }
  .kassen-grid { grid-template-columns: repeat(3, 1fr); }
  .calc-grid { grid-template-columns: repeat(2, 1fr); }
  .related { grid-template-columns: repeat(2, 1fr); }
  .hero-ctas .btn { flex: 0 1 auto; }
  .nav-actions .btn-cta { font-size: 15px; padding: 0 var(--space-4); }
  .consent-actions { flex-direction: row; }
  .consent-actions .btn { width: auto; flex: 1; }
  .quick-contact { max-width: 680px; }
}

@media (min-width: 1024px) {
  .hide-mobile { display: initial; }
  .nav-links { display: flex; }
  .nav-phone { display: inline-flex; }
  .nav-toggle { display: none; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .kassen-grid { grid-template-columns: repeat(5, 1fr); }
  .related { grid-template-columns: repeat(3, 1fr); }
  /* Foto-Hero: Foto nimmt die rechten zwei Drittel ein, Text steht links
     auf Dunkelgruen. Der Verlauf deckt den unscharfen Vordergrund ab und
     laeuft aus, bevor er die Gesichter erreicht. */
  .hero-photo { display: flex; align-items: center; min-height: clamp(580px, 72vh, 720px); }
  .hero-photo-media { position: absolute; top: 0; right: 0; bottom: 0; left: 34%; }
  .hero-photo-img { height: 100%; object-position: 68% 30%; }
  /* left:-2px verdeckt die Subpixel-Kante, an der das Foto beginnt. */
  .hero-photo-media::after {
    left: -2px;
    background: linear-gradient(90deg, var(--color-ink-900) 0%, var(--color-ink-900) 2%, rgba(16, 58, 34, 0.82) 16%, rgba(16, 58, 34, 0) 40%);
  }
  /* Unten Platz lassen, damit die Formularkarte in das Foto hineinragt. */
  .hero-photo-inner { width: 100%; padding-top: var(--space-7); padding-bottom: calc(var(--space-7) + 100px); }
  .hero-photo .hero-content { max-width: 600px; }
  .hero-photo h1 { font-size: clamp(38px, 3.4vw, 48px); }
  /* Schmaleres Polster, damit beide Knoepfe in eine Zeile passen. */
  .hero-photo .hero-ctas .btn-lg { padding-left: var(--space-5); padding-right: var(--space-5); }

  .media-split {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "photo head" "photo body";
    align-items: start;
  }
  .media-split-reverse {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "head photo" "body photo";
    align-items: center;
  }
  .media-split-reverse .media-split-body { align-self: start; }
  /* Hochformat fuellt die volle Hoehe der Textspalte. Das Bild liegt
     absolut, damit seine eigene Hoehe die Zeilen nicht aufblaeht. */
  .media-photo-portrait { aspect-ratio: auto; align-self: stretch; min-height: 560px; }
  .media-photo-portrait img { position: absolute; inset: 0; object-position: 50% 55%; }
  .media-photo-landscape { aspect-ratio: 4 / 3; }
  .media-split-head { margin-bottom: 0; }

  /* Formularkarte etwas breiter als die Textspalte: sie traegt die
     Conversion und soll optisch das Gewicht bekommen. Der Detailblock
     steht im Markup HINTER dem Formular (fuers Handy), wird hier aber
     wieder in die linke Spalte gesetzt. */
  .hero-grid {
    grid-template-columns: 1fr 1.05fr;
    column-gap: var(--space-7);
    row-gap: 0;
  }
  .hero-secondary { grid-column: 1; grid-row: 1; }
  .check-card     { grid-column: 2; grid-row: 1; align-self: start; margin-top: -150px; }
  /* Sonst schneidet overflow:hidden die hochgezogene Karte ab. */
  .hero-photo + .hero { overflow: visible; }
  .section { padding: var(--space-7) 0; }
  .prose { font-size: 18px; }
}

/* ==========================================================================
   10. Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
  .btn:hover:not(:disabled),
  .btn:active:not(:disabled),
  .card-hover:hover,
  .call-bar:hover,
  .related-card:hover,
  .whatsapp-fab:hover {
    transform: none;
  }
}

/* Drucken: Navigation, Formulare und schwebende Elemente raus — Nutzer
   drucken in dieser Zielgruppe tatsaechlich Seiten aus, um sie der
   Pflegekasse oder Angehoerigen vorzulegen. */
@media print {
  .topbar, .nav, .whatsapp-fab, .consent-banner, .check-card,
  .quick-contact, .cta-banner, .footer-cta, .hero::before,
  .hero-photo-media, .hero-photo .hero-ctas { display: none !important; }
  body { font-size: 12pt; color: #000; }
  .hero, .hero-photo { background: none !important; color: #000; padding: 0; min-height: 0; }
  .hero h1, .hero-photo h1, .hero-photo h6, .hero-photo .hero-accent, .hero-lede, .hero-checklist li { color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  .section { padding: 12pt 0; }
}

/* ==========================================================================
   11. Korrekturen aus dem Mobiltest
   ========================================================================== */

/* Auf schmalen Displays sprengte die Kopfzeile den Viewport (383px statt
   375px): Markenname + CTA + Menue-Button passen nicht nebeneinander.
   Statt den CTA zu opfern schrumpft die Wortmarke stufenweise — der Button
   "Anspruch pruefen" ist der wichtigste Einstieg und bleibt sichtbar. */
@media (max-width: 640px) {
  .brand-text .brand-sub { display: none; }
  .nav-brand { font-size: 15px; gap: 8px; }
  .brand-mark { width: 34px; height: 34px; }
  .nav .container { gap: var(--space-2); }
}
@media (max-width: 479px) {
  /* Ganz schmal bleibt nur die Bildmarke; der Linkname steht als
     aria-label am Anker, geht also fuer Screenreader nicht verloren. */
  .brand-text { display: none; }
}

/* Fusszeilen-Links lagen bei 38px unter dem 48px-Ziel dieser Seite. */
.footer-links a { min-height: var(--touch-target); }
.topbar-inner a { min-height: 40px; }
.nav-brand { min-height: 44px; }

/* Hilfe-Karte am Ende der Ablaufreihe. Frueher dunkelblau gefuellt; mit der
   gruenen Palette waere der gruene Knopf darin nicht mehr zu erkennen
   gewesen, deshalb jetzt hell mit gruener Kontur. */
.help-card {
  background: var(--color-accent-100);
  border-color: var(--color-accent-200);
  box-shadow: none;
}
.help-card p { color: var(--color-ink-muted); }

/* Auf dem Handy folgt der Detailblock direkt auf das Formular; das
   Raster bringt bereits Abstand mit, deshalb hier kein zusaetzlicher. */
.hero-secondary > :first-child { margin-top: 0; }

/* Auf schmalen Displays stapelten sich die drei Vertrauens-Chips
   untereinander und kosteten rund 150px vor dem Formular. Etwas kompakter
   passen zwei nebeneinander, ohne dass die Schrift zu klein wird. */
@media (max-width: 480px) {
  .trust-pill { font-size: 13px; padding: 7px 12px; gap: 5px; }
  .hero-trust-badges { gap: 6px; }
}