/* ==========================================================================
   SCA Finance — Stylesheet
   Salih Can Ayünal · Versicherungsmakler

   Aufbau:
     01  Schriften
     02  Design-Tokens
     03  Reset & Basis
     04  Layout
     05  Typografie
     06  Buttons
     07  Header & Navigation
     08  Hero
     09  Karten & Raster
     10  Ablauf-Schritte
     11  FAQ
     12  Formulare
     13  Embed-Platzhalter (Kalender)
     14  Consent-Banner
     15  Sticky-CTA (Mobile)
     16  Footer
     17  Hilfsklassen
   ========================================================================== */


/* 01  SCHRIFTEN ============================================================
   Aktuell: System-Schriften. Kein externer Request, keine DSGVO-Problematik,
   null Ladezeit.

   TODO (optional): Eigene Schrift selbst hosten. Dafür WOFF2-Dateien nach
   assets/fonts/ legen, den Block unten aktivieren und in --font-sans
   voranstellen. NIEMALS die Google-Fonts-CDN einbinden — das LG München
   (3 O 17493/20) hat das als DSGVO-Verstoß gewertet.

   @font-face {
     font-family: "Marke";
     src: url("../fonts/marke-400.woff2") format("woff2");
     font-weight: 400;
     font-display: swap;
   }
   ========================================================================== */


/* 02  DESIGN-TOKENS ======================================================== */

:root {

  /* --- Marke: gilt in BEIDEN Modi --------------------------------------
     Aus dem Logo entnommen (#081d34, pixelgenau gemessen). Diese Werte
     drehen sich im Dunkelmodus bewusst NICHT — sonst wäre die Marke
     nachts eine andere.                                                    */

  --c-accent:       #c69749;   /* Gold — nur für CTAs */
  --c-accent-light: #dbb166;
  --c-accent-dark:  #9d7530;
  --c-on-accent:    #081d34;   /* Schrift auf goldenen Flächen */

  /* --- Hellmodus --------------------------------------------------------
     Alles ab hier wird im Dunkelmodus weiter unten überschrieben.
     Grautöne leicht blaustichig, damit sie nicht gegen das Marineblau
     arbeiten.                                                              */

  --c-heading:      #081d34;   /* Überschriften, Logo-Schriftzug */
  --c-link:         #0d2740;   /* Links, Rahmen, interaktive Elemente */
  --c-link-hover:   #1e4468;
  --c-ink:          #16202e;   /* Fließtext */
  --c-ink-soft:     #4c5a6b;   /* Sekundärtext */
  --c-ink-faint:    #7a8797;   /* Meta, Captions */
  --c-bg:           #ffffff;
  --c-surface:      #f5f7f9;   /* Abgesetzte Sektionen */
  --c-surface-2:    #e8edf2;
  --c-border:       #dce3ea;
  --c-border-soft:  #eef2f6;
  --c-panel:        #081d34;   /* Footer und dunkle Sektionen */
  --c-header-bg:    rgba(255, 255, 255, 0.92);
  --c-logo-filter:  none;      /* Logo ist dunkel — passt auf Hell */

  /* Signalfarben — nur für Plus/Minus im Eignungscheck */
  --c-positive:     #1f7a52;
  --c-negative:     #a33a2c;

  /* Gelb schraffierte Platzhalter-Markierung */
  --c-ph-a:         #fff8e6;
  --c-ph-b:         #fdf1d2;
  --c-ph-text:      #6b5418;

  /* --- Schrift ---------------------------------------------------------
     Das Logo setzt eine elegante Serifenschrift ein. Überschriften
     greifen das mit einer Systemserife auf, Fließtext und Bedienelemente
     bleiben serifenlos — das hält lange Texte gut lesbar.
     Für eine exakte Logo-Entsprechung ließe sich später Playfair Display
     selbst hosten (siehe Abschnitt 01).                                   */

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
                ui-serif, "Times New Roman", serif;

  /* Fluide Typo-Skala — skaliert stufenlos, keine Media-Queries nötig */
  --step--1: clamp(0.84rem, 0.82rem + 0.10vw, 0.90rem);
  --step-0:  clamp(1.00rem, 0.97rem + 0.16vw, 1.10rem);
  --step-1:  clamp(1.18rem, 1.12rem + 0.28vw, 1.35rem);
  --step-2:  clamp(1.40rem, 1.30rem + 0.50vw, 1.75rem);
  --step-3:  clamp(1.66rem, 1.48rem + 0.85vw, 2.25rem);
  --step-4:  clamp(1.97rem, 1.66rem + 1.45vw, 2.95rem);
  --step-5:  clamp(2.34rem, 1.85rem + 2.30vw, 3.85rem);

  /* --- Abstände ---------------------------------------------------------- */

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2rem;
  --space-xl:  3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* --- Form ------------------------------------------------------------- */

  --radius-s:  6px;
  --radius-m:  10px;
  --radius-l:  18px;
  --radius-pill: 999px;

  --shadow-s:  0 1px 2px rgba(8, 29, 52, 0.06),
               0 2px 6px rgba(8, 29, 52, 0.04);
  --shadow-m:  0 2px 6px rgba(8, 29, 52, 0.07),
               0 8px 24px rgba(8, 29, 52, 0.07);
  --shadow-l:  0 4px 12px rgba(8, 29, 52, 0.09),
               0 16px 48px rgba(8, 29, 52, 0.10);

  /* --- Layout ------------------------------------------------------------ */

  --width-content: 68rem;   /* Standard-Container */
  --width-narrow:  44rem;   /* Fließtext, optimale Lesbarkeit */
  --width-wide:    82rem;

  --header-h: 4.5rem;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}


/* 02b  DUNKELMODUS =========================================================
   Zwei fast identische Blöcke — das ist Absicht, nicht Doppelung aus
   Versehen:

     1. @media (prefers-color-scheme: dark) greift automatisch nach der
        Systemeinstellung, aber NUR solange der Besucher nicht ausdrücklich
        "hell" gewählt hat. Daher :not([data-theme="light"]).
     2. :root[data-theme="dark"] greift, wenn der Besucher am Schalter
        ausdrücklich "dunkel" gewählt hat — auch auf einem System, das
        auf hell steht.

   Eine Media Query lässt sich nicht mit einem Attribut-Selektor in einer
   Regel zusammenfassen, deshalb stehen die Werte zweimal. Beim Ändern
   also BEIDE Blöcke anpassen.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-heading:      #eaf0f7;
    --c-link:         #8fb8e6;
    --c-link-hover:   #b5d2f2;
    --c-ink:          #dbe4ee;
    --c-ink-soft:     #a2b1c3;
    --c-ink-faint:    #7b8a9c;
    --c-bg:           #0b1420;
    --c-surface:      #111d2b;
    --c-surface-2:    #1a2839;
    --c-border:       #27374b;
    --c-border-soft:  #1a2634;
    /* Heller als der Seitenhintergrund — sonst verschwindet der Footer */
    --c-panel:        #13273c;
    --c-header-bg:    rgba(11, 20, 32, 0.92);
    /* Das Logo ist dunkelblau und wäre unsichtbar: zu Weiß umkehren */
    --c-logo-filter:  brightness(0) invert(1);
    /* Häkchen, Pfeile und Kleinüberschriften brauchen mehr Helligkeit */
    --c-accent-dark:  #d2a95e;
    --c-positive:     #56c08c;
    --c-negative:     #e88a7d;
    --c-ph-a:         #2b2517;
    --c-ph-b:         #342d1b;
    --c-ph-text:      #e2cb8d;
    --shadow-s: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.25);
    --shadow-m: 0 2px 6px rgba(0, 0, 0, 0.40), 0 8px 24px rgba(0, 0, 0, 0.30);
    --shadow-l: 0 4px 12px rgba(0, 0, 0, 0.45), 0 16px 48px rgba(0, 0, 0, 0.40);
  }
}

:root[data-theme="dark"] {
  --c-heading:      #eaf0f7;
  --c-link:         #8fb8e6;
  --c-link-hover:   #b5d2f2;
  --c-ink:          #dbe4ee;
  --c-ink-soft:     #a2b1c3;
  --c-ink-faint:    #7b8a9c;
  --c-bg:           #0b1420;
  --c-surface:      #111d2b;
  --c-surface-2:    #1a2839;
  --c-border:       #27374b;
  --c-border-soft:  #1a2634;
  --c-panel:        #13273c;
  --c-header-bg:    rgba(11, 20, 32, 0.92);
  --c-logo-filter:  brightness(0) invert(1);
  --c-accent-dark:  #d2a95e;
  --c-positive:     #56c08c;
  --c-negative:     #e88a7d;
  --c-ph-a:         #2b2517;
  --c-ph-b:         #342d1b;
  --c-ph-text:      #e2cb8d;
  --shadow-s: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.25);
  --shadow-m: 0 2px 6px rgba(0, 0, 0, 0.40), 0 8px 24px rgba(0, 0, 0, 0.30);
  --shadow-l: 0 4px 12px rgba(0, 0, 0, 0.45), 0 16px 48px rgba(0, 0, 0, 0.40);
}

/* Sagt dem Browser, wie er Formularfelder und Scrollbalken einfärben soll */
:root { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}
:root[data-theme="dark"] { color-scheme: dark; }


/* 03  RESET & BASIS ======================================================== */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--space-s));
}

body {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Platz für die Sticky-CTA-Leiste auf Mobile */
  padding-bottom: env(safe-area-inset-bottom);
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select { font: inherit; color: inherit; }

/* Sichtbarer, konsistenter Fokus-Ring für Tastaturnutzung */
:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: var(--radius-s);
}

/* Bewegung reduzieren, wenn das System es verlangt */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Sprungmarke für Screenreader / Tastatur */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-s);
  z-index: 200;
  padding: var(--space-2xs) var(--space-s);
  background: var(--c-panel);
  color: #fff;
  border-radius: 0 0 var(--radius-s) var(--radius-s);
  text-decoration: none;
}
.skip-link:focus { top: 0; }


/* 04  LAYOUT =============================================================== */

.container {
  width: 100%;
  max-width: var(--width-content);
  margin-inline: auto;
  padding-inline: var(--space-m);
}
.container--narrow { max-width: var(--width-narrow); }
.container--wide   { max-width: var(--width-wide); }

.section {
  padding-block: var(--space-2xl);
}
@media (min-width: 48em) {
  .section { padding-block: var(--space-3xl); }
}

.section--surface { background: var(--c-surface); }
.section--brand {
  background: var(--c-panel);
  color: #fff;
}
.section--brand h2,
.section--brand h3 { color: #fff; }
.section--brand p  { color: rgba(255, 255, 255, 0.82); }

/* Vertikaler Rhythmus innerhalb eines Blocks */
.stack > * + * { margin-top: var(--space-s); }
.stack-m > * + * { margin-top: var(--space-m); }
.stack-l > * + * { margin-top: var(--space-l); }


/* 05  TYPOGRAFIE =========================================================== */

h1, h2, h3, h4 {
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--c-heading);
}

/* Serife für die großen Überschriften — greift die Logo-Typografie auf */
h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -0.01em;
}

h1 { font-size: var(--step-5); line-height: 1.08; }
h2 { font-size: var(--step-4); line-height: 1.12; }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { text-wrap: pretty; }

a { color: var(--c-link); text-underline-offset: 0.2em; }
a:hover { color: var(--c-link-hover); }

strong { font-weight: 650; color: var(--c-heading); }

.lead {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--c-ink-soft);
}

/* Kleine Überschrift über einer H2 — ordnet die Sektion ein */
.eyebrow {
  display: inline-block;
  font-size: var(--step--1);
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-accent-dark);
  margin-bottom: var(--space-2xs);
}
.section--brand .eyebrow { color: var(--c-accent); }

.section-head {
  max-width: var(--width-narrow);
  margin-bottom: var(--space-xl);
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
}

/* Aufzählung mit Häkchen */
.list-check {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-xs);
}
.list-check li {
  position: relative;
  padding-left: 1.85rem;
}
.list-check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 1.1rem;
  height: 0.6rem;
  border-left: 2.5px solid var(--c-accent-dark);
  border-bottom: 2.5px solid var(--c-accent-dark);
  transform: rotate(-45deg);
}

/* Variante für „das spricht dagegen" — bewusst ehrliche Gegenargumente */
.list-caveat {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-xs);
}
.list-caveat li {
  position: relative;
  padding-left: 1.85rem;
  color: var(--c-ink-soft);
}
.list-caveat li::before {
  content: "";
  position: absolute;
  left: 0.35rem;
  top: 0.62em;
  width: 0.85rem;
  height: 2.5px;
  background: var(--c-ink-faint);
}


/* 06  BUTTONS ============================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: 0.85em 1.6em;
  min-height: 3rem;           /* Touch-Ziel */
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--step-0);
  font-weight: 650;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s var(--ease),
              border-color 0.18s var(--ease),
              color 0.18s var(--ease),
              transform 0.18s var(--ease),
              box-shadow 0.18s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--c-accent);
  border-color: var(--c-accent);
  /* Bewusst NICHT --c-heading: Die Schrift sitzt auf Gold und muss in
     beiden Modi dunkel bleiben, sonst verschwindet sie im Dunkelmodus. */
  color: var(--c-on-accent);
  box-shadow: var(--shadow-s);
}
.btn--primary:hover {
  background: var(--c-accent-light);
  border-color: var(--c-accent-light);
  color: var(--c-on-accent);
  box-shadow: var(--shadow-m);
}

.btn--secondary {
  background: transparent;
  border-color: var(--c-link);
  color: var(--c-link);
}
.btn--secondary:hover {
  background: var(--c-link);
  color: var(--c-bg);
}

/* Auf dunklem Grund */
.btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
  color: #fff;
}

.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}
.btn-row--center { justify-content: center; }


/* 07  HEADER & NAVIGATION ================================================== */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-header-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-border-soft);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  min-height: var(--header-h);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-serif);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--c-heading);
  text-decoration: none;
  white-space: nowrap;
}
.logo img {
  display: block;
  height: 2.5rem;
  width: auto;
  /* Im Dunkelmodus zu Weiß umgekehrt, im Hellmodus unverändert */
  filter: var(--c-logo-filter);
}
.logo__mark { color: var(--c-accent-dark); }

/* Das Logo ist einfarbig dunkelblau. Im dunklen Footer wäre es
   unsichtbar — brightness(0) macht es komplett schwarz, invert(1)
   anschließend komplett weiß. Funktioniert bei einfarbigen Logos
   verlustfrei und spart eine zweite Bilddatei. */
.footer .logo img {
  height: 3.4rem;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

/* Desktop-Navigation */
.nav { display: none; }

@media (min-width: 62em) {
  .nav {
    display: flex;
    align-items: center;
    /* Kleiner als vorher: Die Menuepunkte haben jetzt eigene Polsterung,
       der alte Abstand von 1.5rem kam obendrauf und sprengte die Zeile. */
    gap: 0.15rem;
  }
  /* Pille statt Unterstreichung: Eine 2px-Linie unter dem Text sah wie
     ein Link aus den Nullerjahren aus. Die gefuellte Flaeche macht auch
     die Klickflaeche groesser. */
  .nav__link {
    white-space: nowrap;
    font-size: var(--step-0);
    font-weight: 550;
    color: var(--c-ink-soft);
    text-decoration: none;
    padding: 0.45rem 0.7rem;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    cursor: pointer;
    transition: color 0.15s var(--ease), background-color 0.15s var(--ease);
  }
  .nav__link:hover {
    color: var(--c-heading);
    background: var(--c-surface);
  }
  .nav__link[aria-current="page"] {
    color: var(--c-heading);
    background: var(--c-surface-2);
    font-weight: 650;
  }

  /* Kleiner Pfeil am aufklappbaren Menuepunkt — vorher war nicht
     erkennbar, dass sich dort etwas oeffnet. */
  .nav__group > .nav__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
  }
  .nav__group > .nav__link::after {
    content: "";
    width: 0.42rem;
    height: 0.42rem;
    border-right: 1.8px solid currentColor;
    border-bottom: 1.8px solid currentColor;
    transform: translateY(-0.1em) rotate(45deg);
    opacity: 0.65;
    transition: transform 0.18s var(--ease), opacity 0.18s var(--ease);
  }
  .nav__group > .nav__link[aria-expanded="true"]::after {
    transform: translateY(0.05em) rotate(-135deg);
    opacity: 1;
  }
  .nav__group > .nav__link[aria-expanded="true"] {
    color: var(--c-heading);
    background: var(--c-surface-2);
  }
}

/* Dropdown „Leistungen" */
/* Ausklappmenue "Leistungen"
   Vorher: duenner Rahmen, harte Kanten, kein Uebergang. Jetzt eine
   schwebende Karte mit weichem Schatten, Einblend-Bewegung, Zeiger zum
   ausloesenden Menuepunkt und groesszuegigeren Zeilen. */
.nav__group { position: relative; }
.nav__panel {
  position: absolute;
  top: calc(100% + 0.75rem);
  left: 50%;
  transform: translateX(-50%);
  min-width: 22rem;
  padding: 0.4rem;
  background: var(--c-bg);
  border: 0;
  border-radius: 16px;
  box-shadow: 0 0 0 1px var(--c-border),
              0 18px 40px -14px rgba(8, 29, 52, 0.28),
              0 4px 10px -4px rgba(8, 29, 52, 0.12);
  display: grid;
  gap: 2px;
  animation: panel-ein 0.16s var(--ease);
}
@keyframes panel-ein {
  from { opacity: 0; transform: translateX(-50%) translateY(-0.35rem); }
}
.nav__panel::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  background: var(--c-bg);
  border-left: 1px solid var(--c-border);
  border-top: 1px solid var(--c-border);
  transform: rotate(45deg);
  border-radius: 2px 0 0 0;
}
.nav__panel[hidden] { display: none; }
.nav__panel a {
  display: block;
  padding: 0.7rem 0.85rem;
  border-radius: 11px;
  text-decoration: none;
  color: var(--c-heading);
  font-size: var(--step-0);
  font-weight: 550;
  line-height: 1.3;
  transition: background-color 0.13s var(--ease);
}
.nav__panel a small {
  display: block;
  margin-top: 2px;
  color: var(--c-ink-faint);
  font-size: var(--step--1);
  font-weight: 400;
}
.nav__panel a:hover { background: var(--c-surface); }
.nav__panel a:hover small { color: var(--c-ink-soft); }

.nav__cta { display: none; }
@media (min-width: 62em) { .nav__cta { display: inline-flex; } }

/* Hamburger */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 0.6rem 0.9rem;
  min-height: 2.75rem;
  background: transparent;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--c-heading);
  cursor: pointer;
}
.nav-toggle__bars {
  display: grid;
  gap: 3px;
}
.nav-toggle__bars span {
  display: block;
  width: 1.1rem;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

/* Muss NACH der .nav-toggle-Basisregel stehen — Media Queries erhöhen die
   Spezifität nicht, es gewinnt sonst schlicht die spätere Regel. */
@media (min-width: 62em) {
  .nav-toggle { display: none; }
}


/* 07b  SPRACHE & DARSTELLUNG ===============================================
   Auf dem Desktop rechts in der Kopfzeile, auf Mobilgeräten unten im
   ausgeklappten Menü — die Kopfzeile ist dort sonst zu voll.
   ========================================================================== */

.header__tools {
  display: none;
  align-items: center;
  gap: var(--space-2xs);
}
@media (min-width: 62em) {
  .header__tools { display: flex; }
}

/* --- Sprachumschalter ---
   Bewusst echte Links statt eines Auswahlfeldes: Suchmaschinen folgen
   Links, einem <select> nicht. Das ist für die Mehrsprachigkeit
   entscheidend. */
.lang-switch {
  /* Segment-Schalter: Die aktive Sprache liegt als "Pille" erhaben auf
     einer eingelassenen Schiene. Dadurch ist auf einen Blick klar, dass
     die anderen beiden anklickbar sind — das war vorher nicht so. */
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--c-surface-2);
  border-radius: var(--radius-pill);
}
.lang-switch a {
  padding: 0.34rem 0.62rem;
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.045em;
  color: var(--c-ink-faint);
  text-decoration: none;
  line-height: 1;
  transition: color 0.15s var(--ease), background-color 0.15s var(--ease);
}
.lang-switch a:hover {
  color: var(--c-heading);
  background: rgba(255, 255, 255, 0.55);
}
.lang-switch a[aria-current="true"] {
  background: var(--c-bg);
  color: var(--c-heading);
  box-shadow: 0 1px 2px rgba(8, 29, 52, 0.10), 0 1px 3px rgba(8, 29, 52, 0.06);
}

/* Im Dunkelmodus wäre weißes Aufhellen zu hart */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lang-switch a:hover {
    background: rgba(255, 255, 255, 0.08);
  }
}
:root[data-theme="dark"] .lang-switch a:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* --- Hell/Dunkel-Schalter ---
   Greift die Formensprache des Sprachumschalters auf: eingelassene
   Flaeche statt Rahmen. Ein Rahmen neben einer gefuellten Pille sah
   uneinheitlich aus. */
.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--c-surface-2);
  color: var(--c-heading);
  cursor: pointer;
  transition: background-color 0.15s var(--ease), transform 0.15s var(--ease);
}
.theme-toggle:hover {
  background: var(--c-border);
  transform: translateY(-1px);
}
.theme-toggle:active { transform: none; }
.theme-toggle svg { width: 1.15rem; height: 1.15rem; }

/* Sichtbar ist immer das Symbol für den Modus, in den gewechselt WIRD.
   Hellmodus zeigt den Mond, Dunkelmodus die Sonne. */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }

/* --- Im Mobilmenü --- */
.menu__tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding-top: var(--space-s);
  margin-top: var(--space-s);
  border-top: 1px solid var(--c-border-soft);
}
.menu__tools .lang-switch a {
  font-size: var(--step-0);
  padding: 0.45rem 0.6rem;
}

/* Mobile-Menü als <dialog> — natives Fokus-Management */
.menu {
  width: min(24rem, 100%);
  max-width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0 0 0 auto;
  padding: 0;
  border: none;
  background: var(--c-bg);
}
.menu::backdrop { background: rgba(8, 29, 52, 0.55); }

.menu__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-m);
  gap: var(--space-s);
  overflow-y: auto;
}
.menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.menu__close {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  line-height: 1;
  background: transparent;
  border: 1px solid var(--c-border);
  border-radius: 50%;
  cursor: pointer;
  color: var(--c-heading);
}
.menu__list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 2px;
}
.menu__list a {
  display: block;
  padding: var(--space-xs) var(--space-2xs);
  border-radius: var(--radius-s);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--c-heading);
  text-decoration: none;
}
.menu__list a:hover { background: var(--c-surface); }
.menu__list--sub a {
  font-size: var(--step-0);
  font-weight: 500;
  color: var(--c-ink-soft);
  padding-left: var(--space-s);
}
.menu__label {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
  padding: var(--space-xs) var(--space-2xs) var(--space-3xs);
}
.menu__foot { margin-top: auto; padding-top: var(--space-m); }


/* 08  HERO ================================================================= */

.hero {
  position: relative;
  background:
    radial-gradient(ellipse 80% 60% at 15% 0%,
      rgba(198, 151, 73, 0.12), transparent 60%),
    linear-gradient(170deg, var(--c-surface) 0%, var(--c-bg) 55%);
  padding-block: var(--space-2xl) var(--space-2xl);
  overflow: hidden;
}
@media (min-width: 48em) {
  .hero { padding-block: var(--space-3xl); }
}

.hero__grid {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}
@media (min-width: 62em) {
  .hero__grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-2xl);
  }
}

.hero__title { margin-bottom: var(--space-m); }
/* Hervorhebung im Hero.
   Bewusst eine Unterstreichung statt eines Hintergrund-Balkens: Der Balken
   zerfiel bei mehrzeiligem Umbruch in zwei getrennte Blöcke. Eine
   text-decoration folgt dem Umbruch sauber. */
.hero__title em {
  font-style: normal;
  color: var(--c-link);
  text-decoration: underline;
  text-decoration-color: var(--c-accent);
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.14em;
  text-decoration-skip-ink: none;
}

.hero__lead { margin-bottom: var(--space-l); max-width: 34rem; }

.hero__trust {
  /* Bewusst feste zwei Spalten statt auto-fit: Bei vier Einträgen ergab
     auto-fit ein 3+1-Raster, bei dem der letzte allein stand. 2x2 bleibt
     in jeder Breite ausgewogen. */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-m);
  margin-top: var(--space-l);
  padding-top: var(--space-l);
  border-top: 1px solid var(--c-border);
  font-size: var(--step--1);
  line-height: 1.4;
  color: var(--c-ink-soft);
}
.hero__trust strong {
  display: block;
  margin-bottom: 0.15em;
  font-size: var(--step-1);
  color: var(--c-heading);
  line-height: 1.2;
}

.hero__media {
  position: relative;
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--shadow-l);
  background: var(--c-surface-2);
  aspect-ratio: 4 / 5;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* 08b  BILDBAND ============================================================
   Ein breites Foto als Ruhepunkt in langen Textseiten. Feste 3:2-Proportion
   per aspect-ratio plus object-fit: So steht die Höhe schon vor dem Laden
   fest und die Seite springt nicht nach (Layout-Shift).
   ========================================================================== */

.bildband {
  margin: 0;
}
.bildband img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-l);
}


/* 09  KARTEN & RASTER ====================================================== */

.grid {
  display: grid;
  gap: var(--space-m);
}
@media (min-width: 40em)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em)  { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 40em)  { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em)  { .grid--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 40em)  { .grid--4 { grid-template-columns: repeat(2, 1fr); } }

/* Fünf-Spalten-Raster für die Bereichsübersicht.
   Fünf gleich breite Karten gehen erst ab 82em auf; darunter würde der Text
   zu schmal brechen. Auf den Zwischenstufen bleibt ein Rest von zwei bzw.
   einer Karte übrig — deshalb spannt die fünfte Karte dort über zwei Spalten
   und die Reihe schließt sauber ab, statt halb leer zu enden. */
@media (min-width: 40em)  { .grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62em)  { .grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 40em) and (max-width: 87.99em) {
  .grid--5 > :nth-child(5) { grid-column: span 2; }
}
@media (min-width: 88em)  { .grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* minmax(0, 1fr) statt 1fr ist hier entscheidend: Bei schlichtem 1fr darf
   eine Spalte über ihren Anteil hinauswachsen, sobald der längste
   unumbrechbare Inhalt breiter ist. Wörter wie „Geschäftsführerversorgung"
   haben das Raster genau so auf 227–407 px auseinandergezogen.
   Die Null als Minimum erlaubt gleich breite Spalten — dafür müssen die
   Komposita umbrechen dürfen, siehe unten. */
.grid--5 .card h3 {
  hyphens: manual;
  overflow-wrap: break-word;
}

/* Bei fünf Spalten ist jede Karte schmal — weniger Polsterung und eine
   Spur kleinere Überschrift, damit für den Text noch Platz bleibt. */
@media (min-width: 88em) {
  .grid--5 .card { padding: var(--space-m); }
  .grid--5 .card h3 { font-size: var(--step-0); }
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-l);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-l);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease),
              border-color 0.2s var(--ease);
}
.card p { color: var(--c-ink-soft); }

/* Klickbare Karte — der ganze Block ist Link-Fläche */
.card--link { text-decoration: none; color: inherit; }
.card--link:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-m);
  border-color: var(--c-link-hover);
}
.card--link:hover h3 { color: var(--c-link); }

.card__icon {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-m);
  background: var(--c-surface-2);
  color: var(--c-link);
  margin-bottom: var(--space-2xs);
}
.card__icon svg { width: 1.5rem; height: 1.5rem; }

.card__more {
  margin-top: auto;
  padding-top: var(--space-xs);
  font-weight: 650;
  font-size: var(--step--1);
  color: var(--c-link);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.card--link:hover .card__more { gap: 0.7rem; }
.card__more span { transition: transform 0.2s var(--ease); }


/* 10  ABLAUF-SCHRITTE ====================================================== */

.steps {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-l);
  counter-reset: step;
}
@media (min-width: 48em) {
  /* auto-fit statt fester Spaltenzahl: verträgt drei UND vier Schritte */
  .steps {
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--space-m);
  }
}

.steps li {
  counter-increment: step;
  position: relative;
  padding-top: var(--space-m);
  border-top: 3px solid var(--c-border);
}
.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  margin-bottom: var(--space-xs);
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-on-accent);   /* Ziffer sitzt auf Gold */
  font-weight: 750;
  font-size: var(--step-0);
}
/* Zeitangabe am Schritt — nimmt dem Erstgespräch die Hürde, weil
   sofort sichtbar ist, worauf man sich einlässt. */
.steps__time {
  display: inline-block;
  margin-bottom: var(--space-2xs);
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  font-size: var(--step--1);
  font-weight: 650;
  color: var(--c-ink-soft);
}
.section--brand .steps__time {
  border-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.85);
}

.steps h3 { font-size: var(--step-1); margin-bottom: var(--space-3xs); }
.steps p { color: var(--c-ink-soft); font-size: var(--step-0); }

.section--brand .steps li { border-top-color: rgba(255, 255, 255, 0.22); }


/* 11  FAQ ================================================================== */

.faq {
  display: grid;
  gap: var(--space-2xs);
  max-width: var(--width-narrow);
}

.faq details {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-m);
  background: var(--c-bg);
  overflow: hidden;
}
.faq details[open] { border-color: var(--c-link-hover); }

.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-s);
  padding: var(--space-s) var(--space-m);
  font-weight: 650;
  font-size: var(--step-0);
  color: var(--c-heading);
  cursor: pointer;
  list-style: none;
  min-height: 3.25rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: var(--c-surface); }

.faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 0.65rem;
  height: 0.65rem;
  margin-top: 0.45em;
  border-right: 2.5px solid var(--c-accent-dark);
  border-bottom: 2.5px solid var(--c-accent-dark);
  transform: rotate(45deg);
  transition: transform 0.2s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); }

.faq__body {
  padding: 0 var(--space-m) var(--space-m);
  color: var(--c-ink-soft);
}
.faq__body > * + * { margin-top: var(--space-xs); }


/* 12  FORMULARE ============================================================ */

.form { display: grid; gap: var(--space-m); }

.field { display: grid; gap: var(--space-3xs); }

.field label {
  font-size: var(--step--1);
  font-weight: 650;
  color: var(--c-heading);
}
.field .hint {
  font-size: var(--step--1);
  color: var(--c-ink-faint);
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 0.8rem 0.9rem;
  min-height: 3rem;
  background: var(--c-bg);
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius-s);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--c-link);
  box-shadow: 0 0 0 3px rgba(13, 39, 64, 0.12);
  outline: none;
}
.field textarea { min-height: 8rem; resize: vertical; }

.field--check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2xs);
  align-items: start;
}
.field--check input { width: 1.15rem; height: 1.15rem; min-height: 0; margin-top: 0.25em; }
.field--check label { font-weight: 400; font-size: var(--step--1); line-height: 1.5; }

/* Honeypot — für Menschen unsichtbar, Bots füllen es aus */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* 13  EMBED-PLATZHALTER (Kalender) ========================================= */

.embed {
  border: 1.5px dashed var(--c-border);
  border-radius: var(--radius-l);
  background: var(--c-surface);
  padding: var(--space-xl) var(--space-m);
  text-align: center;
  min-height: 22rem;
  display: grid;
  place-content: center;
  gap: var(--space-s);
}
.embed p {
  max-width: 34rem;
  margin-inline: auto;
  color: var(--c-ink-soft);
  font-size: var(--step--1);
}
.embed--loaded {
  border: none;
  padding: 0;
  background: transparent;
  display: block;
  min-height: 0;
  text-align: left;
}


/* 14  CONSENT-BANNER ======================================================= */

.consent {
  position: fixed;
  z-index: 150;
  left: var(--space-s);
  right: var(--space-s);
  bottom: var(--space-s);
  max-width: 34rem;
  margin-inline: auto;
  padding: var(--space-m);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-l);
}
.consent[hidden] { display: none; }
.consent h2 { font-size: var(--step-0); margin-bottom: var(--space-3xs); }
.consent p {
  font-size: var(--step--1);
  line-height: 1.45;
  color: var(--c-ink-soft);
  margin-bottom: var(--space-s);
}
/* Beide Buttons gleich gewichtet — ungleiche Gestaltung macht die
   Einwilligung nach DSGVO angreifbar.
   Immer nebeneinander: gestapelt frisst der Banner auf Mobilgeräten den
   halben Bildschirm und verdeckt den eigentlichen Handlungsaufruf. */
.consent__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xs);
}
.consent__actions .btn {
  padding: 0.7em 0.5em;
  min-height: 2.75rem;
  font-size: var(--step--1);
}


/* 15  STICKY-CTA (nur Mobile) ============================================== */

.sticky-cta {
  position: fixed;
  z-index: 90;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-2xs) var(--space-s)
           calc(var(--space-2xs) + env(safe-area-inset-bottom));
  background: var(--c-header-bg);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--c-border);
  display: flex;
  gap: var(--space-2xs);
}
.sticky-cta .btn { flex: 1; min-height: 3rem; }

@media (min-width: 62em) {
  .sticky-cta { display: none; }
}
/* Damit der Footer nicht unter der Leiste verschwindet */
@media (max-width: 61.99em) {
  body { padding-bottom: 4.5rem; }
}


/* 16  FOOTER =============================================================== */

.footer {
  background: var(--c-panel);
  color: rgba(255, 255, 255, 0.75);
  padding-block: var(--space-2xl) var(--space-l);
  font-size: var(--step--1);
}
.footer a { color: rgba(255, 255, 255, 0.75); text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }

.footer__grid {
  display: grid;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}
@media (min-width: 48em) {
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

.footer h3 {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: var(--space-s);
}
.footer ul { list-style: none; padding: 0; display: grid; gap: var(--space-2xs); }

.footer .logo { color: #fff; margin-bottom: var(--space-xs); }
.footer .logo__mark { color: var(--c-accent); }

.footer__social {
  display: flex;
  gap: var(--space-2xs);
  margin-top: var(--space-s);
}
.footer__social a {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
}
.footer__social a:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.6);
}
.footer__social svg { width: 1.15rem; height: 1.15rem; }

.footer__bottom {
  padding-top: var(--space-l);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-m);
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.55);
}

/* Pflichtangabe Vermittlerstatus — muss leicht auffindbar sein */
.footer__status {
  margin-top: var(--space-s);
  padding: var(--space-s);
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-m);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.65);
}


/* 16b  RATGEBER & ARTIKEL ==================================================
   Eigener Fließtext-Modus: schmalere Spalte, großzügigere Abstände,
   Zwischenüberschriften mit Luft. Nur hier, damit die restlichen Seiten
   ihr kompakteres Raster behalten.
   ========================================================================== */

/* --- Brotkrumen --- */
.breadcrumb {
  font-size: var(--step--1);
  color: var(--c-ink-faint);
  margin-bottom: var(--space-m);
}
.breadcrumb ol {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.breadcrumb li + li::before {
  content: "›";
  margin-right: 0.35rem;
  color: var(--c-border);
}
.breadcrumb a { color: var(--c-ink-faint); text-decoration: none; }
.breadcrumb a:hover { color: var(--c-link); text-decoration: underline; }

/* --- Kopf eines Artikels --- */
.article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-m);
  margin-top: var(--space-m);
  font-size: var(--step--1);
  color: var(--c-ink-faint);
}

/* --- Inhaltsverzeichnis --- */
.toc {
  padding: var(--space-m);
  background: var(--c-surface);
  border-radius: var(--radius-m);
  border: 1px solid var(--c-border-soft);
}
.toc h2 {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
  margin-bottom: var(--space-2xs);
}
.toc ol {
  margin: 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.3rem;
  font-size: var(--step-0);
}
.toc a { color: var(--c-link); text-decoration: none; }
.toc a:hover { text-decoration: underline; }

/* --- Fließtext --- */
.prose > * + * { margin-top: var(--space-m); }
.prose h2 {
  margin-top: var(--space-2xl);
  padding-top: var(--space-s);
  border-top: 1px solid var(--c-border-soft);
  font-size: var(--step-3);
}
.prose h3 {
  margin-top: var(--space-xl);
  font-size: var(--step-1);
}
.prose ul, .prose ol { padding-left: 1.3rem; display: grid; gap: var(--space-2xs); }
.prose li::marker { color: var(--c-accent-dark); }

.prose blockquote {
  margin-inline: 0;
  padding: var(--space-m);
  border-left: 3px solid var(--c-accent);
  background: var(--c-surface);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
  color: var(--c-ink-soft);
}

/* Tabellen müssen auf Mobilgeräten scrollen dürfen, nicht die Seite sprengen */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.prose table {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  font-size: var(--step--1);
}
.prose th, .prose td {
  padding: var(--space-2xs) var(--space-xs);
  text-align: left;
  border-bottom: 1px solid var(--c-border);
  vertical-align: top;
}
.prose th {
  font-weight: 650;
  color: var(--c-heading);
  background: var(--c-surface);
}

/* Hervorgehobener Merksatz */
.keypoint {
  padding: var(--space-m);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-m);
}
.keypoint strong { color: var(--c-heading); }

/* --- Artikelliste im Ratgeber --- */
.article-list { display: grid; gap: var(--space-m); }
@media (min-width: 48em) {
  .article-list { grid-template-columns: repeat(2, 1fr); }
}
.article-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-l);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-l);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease),
              border-color 0.2s var(--ease);
}
.article-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-m);
  border-color: var(--c-link);
}
.article-card h3 { font-size: var(--step-2); }
.article-card:hover h3 { color: var(--c-link); }
.article-card p { color: var(--c-ink-soft); }
.article-card .meta {
  margin-top: auto;
  padding-top: var(--space-xs);
  font-size: var(--step--1);
  color: var(--c-ink-faint);
}


/* 16c  RECHNER =============================================================
   Rechnet vollständig im Browser. Es werden keine Eingaben übertragen —
   das ist bei Gehaltsdaten nicht nur höflich, sondern datenschutzrechtlich
   der entscheidende Punkt.
   ========================================================================== */

.calc {
  padding: var(--space-l);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-l);
}
.calc__grid {
  display: grid;
  gap: var(--space-m);
}
@media (min-width: 40em) {
  .calc__grid { grid-template-columns: repeat(2, 1fr); }
}

.calc__field label {
  display: block;
  font-size: var(--step--1);
  font-weight: 650;
  color: var(--c-heading);
  margin-bottom: var(--space-3xs);
}
.calc__field .hint {
  display: block;
  font-size: var(--step--1);
  font-weight: 400;
  color: var(--c-ink-faint);
  margin-top: var(--space-3xs);
}

.calc__row {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}
.calc__row input[type="number"] {
  width: 100%;
  padding: 0.7rem 0.8rem;
  min-height: 2.9rem;
  background: var(--c-bg);
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius-s);
  font-variant-numeric: tabular-nums;
}
.calc__row input:focus {
  border-color: var(--c-link);
  box-shadow: 0 0 0 3px rgba(13, 39, 64, 0.12);
  outline: none;
}
.calc__unit {
  flex: 0 0 auto;
  font-size: var(--step-0);
  color: var(--c-ink-faint);
}

.calc input[type="range"] {
  width: 100%;
  accent-color: var(--c-accent);
}

/* --- Ergebnis --- */
.calc__result {
  margin-top: var(--space-l);
  padding: var(--space-l);
  background: var(--c-panel);
  border-radius: var(--radius-m);
  color: #fff;
}
.calc__headline {
  font-family: var(--font-serif);
  font-size: var(--step-2);
  line-height: 1.25;
  margin-bottom: var(--space-m);
}
.calc__headline b {
  color: var(--c-accent);
  font-weight: inherit;
  font-variant-numeric: tabular-nums;
}

.calc__lines {
  display: grid;
  gap: var(--space-2xs);
  font-size: var(--step-0);
}
.calc__line {
  display: flex;
  justify-content: space-between;
  gap: var(--space-s);
  padding-bottom: var(--space-2xs);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.78);
}
.calc__line b {
  font-weight: 650;
  color: #fff;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.calc__line--total {
  border-bottom: none;
  padding-top: var(--space-2xs);
  font-size: var(--step-1);
  color: #fff;
}
.calc__line--total b { color: var(--c-accent); }

.calc__note {
  margin-top: var(--space-m);
  font-size: var(--step--1);
  color: var(--c-ink-soft);
}

/* Ohne JavaScript ist der Rechner nutzlos. Er startet deshalb versteckt
   und wird per JS eingeblendet; der Hinweistext geht den umgekehrten Weg.
   So sieht niemand tote Eingabefelder. */
.calc[hidden] { display: none; }
.calc-fallback {
  padding: var(--space-m);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-m);
  color: var(--c-ink-soft);
  font-size: var(--step--1);
}


/* 16f  DAUERHAFTE RECHTSHINWEISE ==========================================
   Bewusst NICHT die gelb schraffierte .placeholder-Optik: Diese Kästen
   bleiben dauerhaft stehen. Schraffur signalisiert "hier fehlt noch was"
   und wäre hier schlicht falsch.
   ========================================================================== */

.disclaimer {
  padding: var(--space-m);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-m);
  color: var(--c-ink-soft);
  font-size: var(--step--1);
  line-height: 1.55;
}
.disclaimer strong { color: var(--c-heading); }


/* 16e  PKV-EIGNUNGSCHECK ===================================================
   Nutzt das Raster des Rechners (.calc__grid), aber eine eigene
   Ergebnisdarstellung: Statt einer Zahl steht hier eine Einordnung mit
   Begründung. Die Farbe signalisiert die Richtung, trägt die Aussage aber
   nicht allein — der Text steht auch ohne Farbwahrnehmung.
   ========================================================================== */

.check select {
  width: 100%;
  padding: 0.7rem 0.8rem;
  min-height: 2.9rem;
  background: var(--c-bg);
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius-s);
}
.check select:focus {
  border-color: var(--c-link);
  box-shadow: 0 0 0 3px rgba(13, 39, 64, 0.12);
  outline: none;
}

.check__result {
  margin-top: var(--space-l);
  padding: var(--space-l);
  border-radius: var(--radius-m);
  border: 1px solid var(--c-border);
  border-left-width: 4px;
  background: var(--c-surface);
}
.check__result[hidden] { display: none; }
.check__result h3 {
  font-size: var(--step-2);
  margin-bottom: var(--space-2xs);
}
.check__result p { color: var(--c-ink-soft); }

.check__result--dafuer      { border-left-color: var(--c-positive, #1f7a52); }
.check__result--details     { border-left-color: var(--c-accent); }
.check__result--dagegen     { border-left-color: var(--c-ink-faint); }
.check__result--kein-zugang { border-left-color: var(--c-link); }

.check__gruende {
  margin-top: var(--space-m);
  padding-top: var(--space-m);
  border-top: 1px solid var(--c-border);
}
.check__gruende[hidden] { display: none; }
.check__gruende > p {
  font-size: var(--step--1);
  font-weight: 650;
  color: var(--c-heading);
  margin-bottom: var(--space-2xs);
}
.check__gruende ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-2xs);
  font-size: var(--step--1);
}
.check__gruende li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--c-ink-soft);
}
.check__gruende li[hidden] { display: none; }
/* Plus- und Minuszeichen statt Farbe allein */
.check__gruende li::before {
  position: absolute;
  left: 0;
  font-weight: 700;
}
.check__gruende li[data-wirkung="plus"]::before {
  content: "+";
  color: var(--c-positive, #1f7a52);
}
.check__gruende li[data-wirkung="minus"]::before {
  content: "−";
  color: var(--c-negative, #a33a2c);
}

.check[hidden] { display: none; }
.pkvcheck-fallback {
  padding: var(--space-m);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-m);
  color: var(--c-ink-soft);
  font-size: var(--step--1);
}


/* 16d  HINWEIS AUF DEN RECHTSSEITEN ========================================
   Die Rechtsseiten gibt es nur auf Deutsch, weil der deutsche Wortlaut der
   rechtlich maßgebliche ist. Ohne einen sichtbaren Rückweg landen anders-
   sprachige Besucher dort aber in einer Sackgasse — die Navigation ist
   deutsch, ein Sprachumschalter fehlt. Dieser Kasten ist der Rückweg.
   ========================================================================== */

.legal-hint {
  margin-bottom: var(--space-l);
  padding: var(--space-m);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-accent);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
  font-size: var(--step--1);
  color: var(--c-ink-soft);
}
.legal-hint p + p { margin-top: var(--space-2xs); }
.legal-hint strong { color: var(--c-heading); }


/* 17  HILFSKLASSEN ========================================================= */

.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;
}

.text-center { text-align: center; }
.mt-0  { margin-top: 0; }
.mt-m  { margin-top: var(--space-m); }
.mt-l  { margin-top: var(--space-l); }
.mb-0  { margin-bottom: 0; }

/* Platzhalter-Markierung — alles hiermit Markierte muss vor dem
   Livegang durch echte Inhalte ersetzt werden */
.placeholder {
  background: repeating-linear-gradient(
    45deg, var(--c-ph-a), var(--c-ph-a) 10px,
    var(--c-ph-b) 10px, var(--c-ph-b) 20px);
  border: 1.5px dashed var(--c-accent);
  border-radius: var(--radius-m);
  padding: var(--space-m);
  color: var(--c-ph-text);
  font-size: var(--step--1);
}
.placeholder strong { color: var(--c-ph-text); }