/* FinNuria corporate stylesheet, release 2026-10-06, revision g.
   Self-hosted fonts, no external dependencies. Filename is versioned because
   /assets is served with a long immutable cache: change the filename on every edit.
   Revision b: audience navigation (Privatkunden / Geschäftskunden), modest type scale,
   distinct section backgrounds from the existing palette.
   Revision c: company pages (Über uns, Karriere), legal pages in the shared shell,
   project note without the separation label.
   Revision d: Erstinformation in the legal shell, legal head without local tabs on
   Impressum/Erstinformation, GKV check (/krankenkasse/) and its thank-you page.
   Revision e: equal audience buttons, compact footer (address, projects with notes),
   no local legal tabs and no projects section on any page, Erstinformation with
   sections and print action.
   Revision f: wider grids on large screens (prose stays bounded), process diagrams
   for the "So gehen wir vor" steps, payment-flow diagrams (inline SVG with text
   equivalent), the explanatory video on /honorarvermittlung/, short answer lists,
   compact footer (less padding, row gaps and separator whitespace, smaller wordmark,
   28px link rows on wide screens; mobile link targets stay 32px).
   Revision g: calmer, airier composition on every redesigned page. Light page heads
   (blue-white instead of navy) with floating white cards, softer corners and soft
   shadows, no dark top rules on lists, FAQ and fact panels as rounded cards, a readable
   timeline, a compact navy contact band with a link to /kontakt/ instead of repeated
   forms. Logo, colours and the moderate type scale are unchanged. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-latin-var-v20.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url("../fonts/montserrat-latin-var-v31.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Brand colours carried over unchanged from the live site (Tailwind config finnuria.*) */
  --navy: #0f172a;
  --blue: #2563eb;
  --blue-hover: #1d4ed8;
  --light: #f8fafc;
  /* Tints already used on the live site (Tailwind blue-50, blue-100, slate-100) */
  --tint-blue: #eff6ff;
  --tint-blue-line: #dbeafe;
  --tint-slate: #f1f5f9;
  /* Supporting neutrals (slate scale already used on the live site) */
  --white: #ffffff;
  --text: #334155;
  --muted: #475569;
  --rule: #cbd5e1;
  --on-navy: #e2e8f0;
  --on-navy-muted: #a9b6c8;
  --navy-rule: rgba(226, 232, 240, 0.22);
  --error: #b91c1c;
  --success: #166534;

  --font-head: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;

  /* Modest, coherent type scale: 30-46px page titles, 24-32px section titles */
  --fs-hero: clamp(1.875rem, 1.5rem + 1.6vw, 2.875rem);
  --fs-title: clamp(1.75rem, 1.45rem + 1.25vw, 2.5rem);
  --fs-section: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  --fs-h3: clamp(1.125rem, 1.07rem + 0.25vw, 1.3125rem);

  --wrap: 76rem;
  --measure: 40em;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section: clamp(3rem, 2.2rem + 3.5vw, 5.5rem);
  --radius: 10px;
  --radius-lg: 18px;
  --rule-soft: #e2e8f0;
  /* Soft elevation from the navy brand colour; no blur filters, no glass effects. */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 32px rgba(15, 23, 42, 0.07);
  --header-h: 4.5rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--white);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--navy);
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p, ul, ol, dl, table, figure { margin: 0; }

/* Long German compounds (e.g. Berufsunfähigkeitsversicherung) must not widen grid
   tracks beyond the viewport on 320px screens. Automatic hyphenation only where the
   measure is narrow; wider screens wrap whole words. */
h1, h2, h3, h4, p, li, dt, dd, th, td, summary, label { overflow-wrap: break-word; hyphens: manual; }
@media (max-width: 29.99rem) {
  h2, h3, h4, p, li, dt, dd, th, td, summary, label { hyphens: auto; }
}
.hero__grid > *, .audiences > *, .topic > *, .split > *, .pay > *, .page-hero__grid > *,
.chapter__grid > *, .contact__grid > *, .form-row > *, .footer-grid > * { min-width: 0; }
p { text-wrap: pretty; }

a {
  color: var(--blue);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover { color: var(--blue-hover); text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.skip-link {
  position: absolute;
  left: 1rem;
  top: -10rem;
  z-index: 100;
  background: var(--navy);
  color: var(--white);
  padding: 0.75rem 1rem;
  font-weight: 600;
}
.skip-link:focus { top: 1rem; color: var(--white); }

/* ---------- Wordmark: Montserrat bold, Fin navy, Nuria blue (unchanged) ---------- */
.wordmark {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  line-height: 1;
  color: var(--navy);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.wordmark span { color: var(--blue); }
.wordmark:hover { color: var(--navy); opacity: 0.85; }

/* ---------- Header and first-level navigation ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--rule);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--header-h);
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  min-width: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--navy);
  font: 600 0.9375rem/1 var(--font-body);
  cursor: pointer;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 1.125rem;
  height: 2px;
  background: currentColor;
  position: relative;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { top: 0; transform: rotate(-45deg); }

.site-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.25rem 0.85rem;
  color: var(--navy);
  font-weight: 600;
  font-size: 0.9875rem;
  text-decoration: none;
  border-radius: var(--radius);
}
.site-nav a:hover { color: var(--blue); background: var(--tint-blue); }
/* "page" = this page, "true" = this audience area */
.site-nav a[aria-current] {
  color: var(--blue);
  background: var(--tint-blue);
  box-shadow: inset 0 -2px 0 var(--blue);
}
.site-nav .site-nav__secondary a { font-weight: 500; color: var(--text); }
.site-nav .site-nav__secondary a:hover { color: var(--blue); }
.site-nav .site-nav__cta a {
  background: var(--blue);
  color: var(--white);
  padding-inline: 1.1rem;
  margin-left: 0.5rem;
}
.site-nav .site-nav__cta a:hover { background: var(--blue-hover); color: var(--white); }

@media (max-width: 47.99rem) {
  .js .nav-toggle { display: inline-flex; }
  .site-header__bar { flex-wrap: wrap; }
  .site-nav { width: 100%; padding-bottom: 1rem; }
  .js .site-nav { display: none; }
  .js .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav li { border-top: 1px solid var(--rule); }
  .site-nav a { display: flex; padding: 0.6rem 0.75rem; font-size: 1.0625rem; }
  .site-nav .site-nav__cta { border-top: 0; padding-top: 1rem; }
  .site-nav .site-nav__cta a { margin: 0; justify-content: center; padding: 0.75rem 1rem; }
}

/* ---------- Audience sub-navigation ---------- */
.subnav {
  background: var(--tint-slate);
  border-bottom: 1px solid var(--rule);
}
.subnav .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.25rem; }
.subnav__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted);
}
.subnav ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.25rem;
}
.subnav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.25rem 0.6rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--navy);
  text-decoration: none;
}
.subnav a:hover { color: var(--blue); text-decoration: underline; }
.subnav a[aria-current="page"] {
  color: var(--blue);
  font-weight: 600;
  box-shadow: inset 0 -3px 0 var(--blue);
}

/* ---------- Buttons and inline actions ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.8rem 1.5rem;
  border: 2px solid var(--blue);
  border-radius: var(--radius);
  background: var(--blue);
  color: var(--white);
  font: 600 1rem/1.2 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.25);
}
.btn:hover { background: var(--blue-hover); border-color: var(--blue-hover); color: var(--white); text-decoration: none; }
.btn[disabled] { opacity: 0.7; cursor: progress; }
.btn--ghost { background: transparent; border-color: var(--white); color: var(--white); }
.btn--ghost:hover { background: var(--white); border-color: var(--white); color: var(--navy); }

.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
}

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }

/* ---------- Shared type helpers ---------- */
.lede {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.6;
  color: var(--text);
  max-width: 38em;
}

.section-title {
  font-size: var(--fs-section);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.eyebrow,
.mode {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--blue);
  margin-bottom: 0.6rem;
}

.prose { max-width: 40em; }
.prose > * + * { margin-top: 1.1em; }
.prose h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
  margin-top: 2em;
}
.prose h3:first-child { margin-top: 0; }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: 0.4em; }
.prose strong { color: var(--navy); font-weight: 600; }

/* ---------- Section surfaces ---------- */
.surface-white { background: var(--white); }
.surface-tint { background: var(--tint-blue); }
.surface-slate { background: var(--tint-slate); }
/* Page heads (revision g): pale brand blue (blue-100), navy text, white floating cards.
   One step deeper than the white, tint and slate sections, so every neighbour stays
   distinct. Links and labels use the darker blue for AA contrast on it. */
.surface-hero { background: var(--tint-blue-line); }
.surface-hero a:not(.btn), .surface-hero .mode, .surface-hero .eyebrow { color: var(--blue-hover); }
.surface-hero .breadcrumb a { color: var(--text); }
.surface-hero .toc a { color: var(--navy); }
.surface-hero .toc a:hover { color: var(--blue-hover); }

.band,
.surface-navy {
  background: var(--navy);
  color: var(--on-navy);
}
.band h1, .band h2, .band h3,
.surface-navy h1, .surface-navy h2, .surface-navy h3 { color: var(--white); }
.band .mode, .band .eyebrow,
.surface-navy .mode, .surface-navy .eyebrow { color: var(--on-navy-muted); }
.band .lede, .surface-navy .lede { color: var(--on-navy); }
.band a:not(.btn), .surface-navy a:not(.btn) { color: var(--white); }
.band :focus-visible, .surface-navy :focus-visible { outline-color: var(--white); }

/* ---------- Home: hero ---------- */
.hero { padding-block: clamp(2.75rem, 2rem + 4vw, 5rem); }

.hero__grid { display: grid; gap: 2.25rem; }
@media (min-width: 60rem) {
  .hero__grid { grid-template-columns: 7fr 5fr; gap: 4rem; align-items: end; }
}

.hero__title {
  font-size: var(--fs-hero);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 18em;
}
.hero .lede { margin-top: 1.25rem; }
.hero__id { margin-top: 1.5rem; font-size: 0.9375rem; color: var(--on-navy-muted); }

/* Two equal audience entries: same size, same weight, side by side from 40rem */
.paths { list-style: none; padding: 0; display: grid; gap: 0.75rem; }
@media (min-width: 40rem) and (max-width: 59.99rem) { .paths { grid-template-columns: 1fr 1fr; } }
.paths a {
  display: grid;
  gap: 0.2rem;
  min-height: 44px;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--tint-blue-line);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow);
  text-decoration: none;
}
.paths a:hover { border-color: var(--blue); }
.paths__name { font-family: var(--font-head); font-weight: 700; font-size: 1.1875rem; color: var(--navy); }
.paths__name::after { content: " \2192"; color: var(--blue); }
.paths__text { font-size: 0.9375rem; color: var(--text); }

/* ---------- Home: the two audiences ---------- */
.section { padding-block: var(--section); }

.section-head { display: grid; gap: 1rem; margin-bottom: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem); max-width: 46rem; }

.audiences { display: grid; gap: 1.5rem; }
@media (min-width: 56rem) { .audiences { grid-template-columns: 1fr 1fr; gap: 2rem; } }

.audience {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.audience--private { background: var(--tint-blue); }
.audience--business { background: var(--tint-slate); }
.audience__head {
  padding: 1.75rem 1.75rem 0.75rem;
  border-bottom: 1px solid var(--rule-soft);
}
.audience__head h3 { color: var(--navy); font-size: var(--fs-h3); font-weight: 700; }
.audience__head h3 a { color: inherit; text-decoration: none; }
.audience__head h3 a:hover { text-decoration: underline; }
.audience__head p { margin-top: 0.35rem; font-size: 0.9875rem; color: var(--muted); }
.audience__body { padding: 0.25rem 1.75rem 1.75rem; display: flex; flex-direction: column; flex: 1; }
.audience__list { list-style: none; padding: 0; flex: 1; }
.audience__list li { padding-block: 0.9rem; border-bottom: 1px solid var(--rule-soft); }
.audience__list li:last-child { border-bottom: 0; }
.audience__list a { font-weight: 600; display: inline-flex; min-height: 44px; align-items: center; }
.audience__list p { font-size: 0.9875rem; color: var(--text); }
/* Both buttons share one width (revision e). On phones slightly tighter so both labels
   fit one line from 360px; below that the longer label wraps, so both get the height
   of two lines and the two bars stay identical. */
.audience__body .btn { margin-top: 1.25rem; align-self: flex-start; width: min(100%, 19rem); text-align: center; }
@media (max-width: 29.99rem) { .audience__body .btn { padding-inline: 0.875rem; font-size: 0.9375rem; } }
@media (max-width: 22.49rem) { .audience__body .btn { min-height: 4.125rem; } }

/* ---------- Topic index (Geschäftskunden overview) ---------- */
.topic-index { list-style: none; padding: 0; display: grid; gap: 1rem; }

.topic {
  position: relative;
  display: grid;
  gap: 0.5rem 2rem;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  background: var(--tint-slate);
  border-radius: var(--radius-lg);
}

.topic__abbr {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2.125rem);
  line-height: 1.1;
  color: var(--blue);
}

.topic__name { font-size: var(--fs-h3); font-weight: 700; }
.topic__name a { color: inherit; text-decoration: none; }
.topic__name a::after { content: ""; position: absolute; inset: 0; }
.topic__name a:focus-visible { outline: none; }
.topic:has(a:focus-visible) { outline: 3px solid var(--blue); outline-offset: 4px; }
.topic:hover { background: var(--tint-blue); box-shadow: var(--shadow); }
.topic:hover .topic__more { text-decoration-thickness: 2px; }

.topic__text { margin-top: 0.5rem; max-width: 34em; }

.topic__question { color: var(--muted); font-size: 0.9875rem; }
.topic__question strong { display: block; color: var(--navy); font-weight: 600; margin-bottom: 0.25rem; }

.topic__more {
  display: block;
  width: fit-content;
  margin-top: 0.75rem;
  color: var(--blue);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

@media (min-width: 60rem) {
  .topic { grid-template-columns: 2fr 6fr 4fr; align-items: start; }
}

/* ---------- Split layout and steps ---------- */
.split { display: grid; gap: 2rem; }
@media (min-width: 60rem) {
  .split { grid-template-columns: 5fr 7fr; gap: 4rem; }
}
.split .lede { margin-top: 1.25rem; }

.steps { list-style: none; padding: 0; counter-reset: step; }
.steps > li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: 0 1rem;
  padding-block: 1.2rem;
  border-top: 1px solid var(--rule-soft);
}
.steps > li:last-child { border-bottom: 1px solid var(--rule-soft); }
.steps > li::before {
  content: counter(step);
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
}
.steps h3 { font-size: 1.125rem; font-weight: 700; }
.steps p { margin-top: 0.3rem; }
.band .steps > li, .surface-navy .steps > li { border-color: var(--navy-rule); }
.band .steps > li::before, .surface-navy .steps > li::before { background: var(--blue); }

/* ---------- Remuneration ---------- */
.pay { display: grid; gap: 1.25rem; margin-top: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem); }
@media (min-width: 48rem) { .pay { grid-template-columns: 1fr 1fr; gap: 2rem; } }

.pay__item { background: var(--white); border-radius: var(--radius-lg); padding: 1.75rem; box-shadow: var(--shadow-sm); }
.surface-white .pay__item { background: var(--tint-slate); }
.pay__item h3 { font-size: var(--fs-h3); font-weight: 700; }
.pay__item .pay__who { font-weight: 600; color: var(--blue); margin-top: 0.35rem; }
.pay__item p + p { margin-top: 0.75rem; }

.note {
  margin-top: 1.75rem;
  font-size: 0.9375rem;
  color: var(--muted);
  max-width: 46em;
}

/* Status statement: a tinted panel, no accent rail */
.statement {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
}
.surface-white .statement { background: var(--tint-blue); }
.statement > * + * { margin-top: 0.6rem; }
.statement h3 { font-size: 1.125rem; font-weight: 700; }

/* ---------- Service pages ---------- */
.page-hero { padding-block: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem) clamp(3rem, 2.25rem + 3vw, 5rem); }

.breadcrumb ol {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.5rem;
  font-size: 0.9375rem;
  color: var(--muted);
}
.breadcrumb li + li::before { content: "/"; margin-right: 0.5rem; color: var(--muted); }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); }
.breadcrumb [aria-current] { display: inline-flex; align-items: center; min-height: 44px; color: var(--navy); }

.page-hero__grid { display: grid; gap: 2rem; margin-top: 1rem; }

.page-title {
  font-size: var(--fs-title);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  hyphens: manual;
}
.page-title small {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--muted);
  line-height: 1.35;
}
.page-hero .lede { margin-top: 1.25rem; }
.page-hero .actions { margin-top: 1.75rem; }

.toc { align-self: start; background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 1.25rem 1.5rem 0.75rem; }
.toc h2 { font-family: var(--font-body); font-size: 0.9375rem; font-weight: 600; color: var(--muted); }
.toc ul { list-style: none; padding: 0; margin-top: 0.25rem; }
.toc li + li { border-top: 1px solid var(--rule-soft); }
.toc a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
}
.toc a:hover { color: var(--blue); text-decoration: underline; }

@media (min-width: 60rem) {
  .page-hero__grid { grid-template-columns: 8fr 3.5fr; gap: 4rem; }
}

.chapter { padding-block: var(--section); }

.chapter__grid { display: grid; gap: 1.75rem; }
@media (min-width: 60rem) {
  .chapter__grid { grid-template-columns: 4fr 8fr; gap: 4rem; }
  .chapter__head { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; }
}
.chapter__head p { margin-top: 0.85rem; color: var(--muted); max-width: 26em; }

/* Glossary-style definition list */
.terms { border-top: 1px solid var(--rule-soft); }
.terms > div { padding-block: 0.9rem; border-bottom: 1px solid var(--rule-soft); }
.terms dt { font-family: var(--font-head); font-weight: 700; color: var(--navy); font-size: 1.0625rem; }
.terms dd { margin: 0.3rem 0 0; }
@media (min-width: 48rem) {
  .terms > div { display: grid; grid-template-columns: 13rem 1fr; gap: 1.5rem; }
  .terms dd { margin: 0; }
}

/* Decision ledger */
.ledger { width: 100%; border-collapse: collapse; }
.ledger caption { text-align: left; color: var(--muted); font-size: 0.9375rem; padding-bottom: 1rem; caption-side: top; }
.ledger thead th {
  text-align: left;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--muted);
  padding: 0 0 0.75rem;
  border-bottom: 1px solid var(--rule);
}
.ledger tbody th,
.ledger td { text-align: left; vertical-align: top; padding: 1.1rem 0; border-bottom: 1px solid var(--rule-soft); }
.ledger tbody th {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--navy);
  padding-right: 2rem;
  width: 38%;
}
@media (max-width: 47.99rem) {
  .ledger thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ledger tbody, .ledger tr, .ledger tbody th, .ledger td { display: block; width: auto; }
  .ledger tr { border-bottom: 1px solid var(--rule-soft); padding-block: 1rem; }
  .ledger tr:first-child { border-top: 1px solid var(--rule); }
  .ledger tbody th, .ledger td { border: 0; padding: 0; }
  .ledger td { margin-top: 0.4rem; }
}

/* Limits: tinted panel instead of a decorative left rail */
.limits {
  margin-top: clamp(2rem, 1.6rem + 1.5vw, 3rem);
  background: var(--tint-slate);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.75rem;
}
.surface-slate .limits { background: var(--white); }
.limits h3 { font-size: 1.125rem; font-weight: 700; }
.limits ul { margin-top: 0.6rem; padding-left: 1.2em; }
.limits li + li { margin-top: 0.4rem; }

/* FAQ in native disclosure widgets */
.faq { display: grid; gap: 0.75rem; }
.faq details { background: var(--tint-slate); border-radius: var(--radius-lg); padding-inline: 1.25rem; }
.surface-slate .faq details, .surface-tint .faq details { background: var(--white); box-shadow: var(--shadow-sm); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  min-height: 44px;
  padding-block: 1rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--navy);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--blue);
}
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { color: var(--blue); }
.faq details > div { padding-bottom: 1.25rem; max-width: 42em; }
.faq details > div > * + * { margin-top: 0.75rem; }

/* ---------- Contact (navy band with a white form panel) ---------- */
.contact { padding-block: clamp(2.75rem, 2rem + 3vw, 4.5rem); }
.contact__grid { display: grid; gap: 2rem; }
@media (min-width: 60rem) { .contact__grid { grid-template-columns: 5fr 7fr; gap: 4rem; } }
/* Compact contact band (all pages except /kontakt/): text and link left, facts right. */
.contact__grid:not(:has(> form)) { align-items: center; }

.contact__aside > * + * { margin-top: 1.25rem; }
.contact__facts { font-style: normal; border-top: 1px solid var(--navy-rule); padding-top: 1rem; line-height: 1.6; }
.contact__facts strong { color: var(--white); font-weight: 600; }
.contact__alt { font-size: 0.9375rem; color: var(--on-navy); }
.contact-form .contact__alt { color: var(--muted); }

.contact-form {
  display: grid;
  gap: 1.25rem;
  background: var(--white);
  color: var(--text);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
}
.surface-navy .contact-form a { color: var(--blue); }
.surface-navy .contact-form :focus-visible { outline-color: var(--blue); }
.form-row { display: grid; gap: 1.25rem; }
@media (min-width: 40rem) { .form-row { grid-template-columns: 1fr 1fr; } }

.field label,
.field .label {
  display: block;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.4rem;
  font-size: 0.9875rem;
}
.field .optional { font-weight: 400; color: var(--muted); }
.field .hint { display: block; font-size: 0.875rem; color: var(--muted); margin-top: 0.35rem; }

.field input:not([type]),
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.85rem;
  border: 1px solid #64748b;
  border-radius: var(--radius);
  background: var(--white);
  color: var(--navy);
  font: 400 1rem/1.4 var(--font-body);
}
.field textarea { min-height: 8.5rem; resize: vertical; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230f172a' stroke-width='2'/%3E%3C/svg%3E");
  background-position: right 0.9rem center;
  background-size: 0.75rem 0.5rem;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.field [aria-invalid="true"] { border-color: var(--error); border-width: 2px; }

.field-error {
  margin-top: 0.4rem;
  color: var(--error);
  font-size: 0.9375rem;
  font-weight: 600;
}
.field-error[hidden] { display: none; }

.check {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 0.75rem;
  align-items: start;
}
.check input {
  width: 1.375rem;
  height: 1.375rem;
  margin: 0.15rem 0 0;
  accent-color: var(--blue);
}
.check label { font-weight: 400; color: var(--text); margin: 0; }
.check .field-error { grid-column: 2; }

.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status { font-weight: 600; min-height: 1.5em; }
.form-status:empty { display: none; }
.form-status.is-success { color: var(--success); background: var(--tint-slate); padding: 0.75rem 1rem; border-radius: var(--radius); }
.form-status.is-error { color: var(--error); background: var(--tint-slate); padding: 0.75rem 1rem; border-radius: var(--radius); }

/* ---------- Company history (Über uns) ---------- */
.timeline { list-style: none; padding: 0; display: grid; gap: 1rem; max-width: 40rem; }
.timeline > li {
  position: relative;
  padding: 1.25rem 1.5rem 1.35rem 3.25rem;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.timeline > li::before {
  content: "";
  position: absolute;
  left: 1.375rem;
  top: 1.625rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 4px var(--tint-blue-line);
}
.timeline > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(1.75rem - 1px);
  top: 2.75rem;
  bottom: -1rem;
  width: 2px;
  background: var(--tint-blue-line);
}
.timeline time {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--blue-hover);
}
.timeline h3 { font-size: 1.125rem; font-weight: 700; margin-top: 0.2rem; }
.timeline p { margin-top: 0.3rem; max-width: 40em; }
.terms .text-link { min-height: 44px; }
.terms ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.5rem; }

/* ---------- Legal pages: shared shell around the unchanged legal text ---------- */
.legal-head { padding-block: 0.5rem 0.75rem; }

/* The legal text keeps its original markup byte for byte; it is styled by structure. */
.legal-main { padding-block: clamp(2rem, 1.6rem + 2vw, 3.5rem) var(--section); }
.legal-main > article { width: 100%; max-width: 48rem; margin-inline: auto; padding-inline: var(--gutter); color: var(--text); }
.legal-main > article > p:first-child { font-weight: 600; font-size: 0.9375rem; color: var(--blue); margin-bottom: 0.6rem; }
.legal-main h1 {
  font-size: var(--fs-title);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}
/* Long single-word titles (Datenschutzerklärung) on narrow screens: hyphenate per
   lang="de" instead of breaking mid-word without a hyphen. Legal text stays unchanged. */
@media (max-width: 29.99rem) {
  .legal-main h1 { -webkit-hyphens: auto; hyphens: auto; }
}
.legal-main h1 + p { margin-top: -0.75rem; margin-bottom: 1.5rem; font-size: 0.9375rem; color: var(--muted); }
.legal-main section { padding-block: 1.25rem; border-top: 1px solid var(--rule); }
.legal-main section:last-child { border-bottom: 1px solid var(--rule); }
.legal-main h2 { font-size: 1.125rem; font-weight: 700; margin-bottom: 0.5rem; }
.legal-main section p + p { margin-top: 0.75rem; }
.legal-main strong { color: var(--navy); font-weight: 600; }
.legal-main a { overflow-wrap: anywhere; }
.legal-main ul { padding-left: 1.25rem; }
.legal-main li + li { margin-top: 0.35rem; }
/* Erstinformation: title with print action, short intro line before the sections. */
.legal-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-bottom: 1rem;
}
.legal-title h1 { margin-bottom: 0; }
.legal-intro { margin-bottom: 1.5rem; color: var(--muted); }
/* Postal code and town stay on one line; the street moves above them if needed. */
.legal-main .legal-city { white-space: nowrap; }
.print-action {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.4rem 1rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--tint-slate);
  color: var(--navy);
  font: 600 0.9375rem/1.2 var(--font-body);
  cursor: pointer;
}
.print-action:hover { background: var(--tint-blue); border-color: var(--tint-blue-line); }
.print-action[hidden] { display: none; }

/* ---------- GKV check (/krankenkasse/): Configure surface, the form comes first ---------- */
.page-hero--compact { padding-block: clamp(1rem, 0.8rem + 1vw, 1.75rem) clamp(1.75rem, 1.5rem + 1.5vw, 2.75rem); }
.page-hero--compact .mode { margin-top: 0.75rem; }
.page-hero--compact .lede { max-width: 40em; }

.gkv__grid { display: grid; gap: 2rem; }
@media (min-width: 60rem) {
  .gkv__grid { grid-template-columns: 7fr 4fr; gap: 3.5rem; align-items: start; }
}
.gkv__panel {
  background: var(--white);
  border: 1px solid var(--tint-blue-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
}
.gkv__panel > p { margin-top: 0.5rem; }
.gkv__panel .contact__alt { color: var(--muted); }
.gkv-form { display: grid; gap: 1.25rem; margin-top: 1.5rem; }
.gkv-form .btn { width: 100%; }
@media (min-width: 40rem) { .gkv-form .btn { width: auto; } }
.gkv-form .btn[disabled] { cursor: not-allowed; }
.gkv-form[aria-busy="true"] .btn[disabled] { cursor: progress; }
.gkv-form .note { margin-top: 0; }

.gkv__facts { list-style: none; padding: 0; border-top: 1px solid var(--rule-soft); }
.gkv__facts li { padding-block: 1rem; border-bottom: 1px solid var(--rule-soft); }
.gkv__facts strong { display: block; font-family: var(--font-head); font-weight: 700; color: var(--navy); }
.gkv__aside h2 { font-size: var(--fs-h3); font-weight: 700; margin-bottom: 0.75rem; }

/* ---------- Redirect notice (compatibility route) ---------- */
.moved { padding-block: var(--section); }
.moved .lede { margin-top: 1rem; }
.moved .actions { margin-top: 1.5rem; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--tint-slate);
  border-top: 1px solid var(--rule);
  padding-block: clamp(1.5rem, 1.25rem + 0.75vw, 2rem) 1rem;
  font-size: 0.9375rem;
}
.footer-grid { display: grid; gap: 1rem; }
@media (min-width: 48rem) { .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem 2rem; } }
@media (min-width: 68rem) { .footer-grid { grid-template-columns: minmax(13.5rem, 1.2fr) 1fr 1.35fr 0.8fr 1.3fr; gap: 1.75rem; } }

.site-footer h2 {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0;
}
/* Footer wordmark one step below the header's, still a 32px target. */
.site-footer .wordmark { font-size: 1.25rem; min-height: 2rem; }
.site-footer ul { list-style: none; padding: 0; }
/* Compact link rows: 32px targets (above the 24px of WCAG 2.5.8), no 44px gaps. */
.site-footer li a {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  color: var(--text);
  text-decoration: none;
}
.site-footer li a:hover { color: var(--blue); text-decoration: underline; }
/* Wide screens: denser 28px rows (still above WCAG 2.5.8's 24px), mobile keeps 32px. */
@media (min-width: 68rem) { .site-footer li a { min-height: 1.75rem; } }
.site-footer address { font-style: normal; margin-top: 0.25rem; font-size: 0.875rem; line-height: 1.55; }
/* Postal code and town never split across lines. */
.site-footer .footer-city { white-space: nowrap; }
.footer-projects li + li { margin-top: 0; }
.site-footer .footer-project-note { display: block; font-size: 0.875rem; color: var(--muted); line-height: 1.4; margin-top: -0.2rem; }
.footer-legal {
  margin-top: 1.25rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.4;
}

/* ---------- Revision f: wider layout on large screens ---------- */
/* Section backgrounds already run full-bleed; from 100rem (1600px) the content grid
   widens to 90rem. Running text keeps its bounded measure (.prose, .lede, FAQ). */
@media (min-width: 100rem) {
  :root { --wrap: 90rem; }
  .hero__grid { gap: 6rem; }
  .chapter__grid { grid-template-columns: 4fr 9fr; gap: 5rem; }
  .split, .contact__grid { gap: 6rem; }
}
.chapter .prose, .chapter .faq { max-width: var(--measure); }

/* Stacked chapter: heading above, full-width content (process diagrams, video). */
.chapter__grid.chapter__grid--stack { grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 1.2rem + 1.2vw, 2.5rem); }
.chapter__grid--stack .chapter__head { position: static; max-width: 46rem; }

/* ---------- Process diagram (ordered steps; the list itself is the text) ---------- */
.steps--process > li { padding-block: 1.1rem; }
.steps--process h3 { -webkit-hyphens: auto; hyphens: auto; }
@media (min-width: 48rem) {
  .steps--process {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
  .steps--process > li,
  .steps--process > li:last-child {
    position: relative;
    display: block;
    padding: 1.25rem 1.25rem 1.4rem;
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: var(--shadow-sm);
  }
  .surface-white .steps--process > li { background: var(--tint-slate); box-shadow: none; }
  .steps--process > li::before { margin-bottom: 0.9rem; }
  .steps--process h3 { font-size: 1.0625rem; }
  .steps--process p { font-size: 0.9875rem; }
}
/* One row from 75rem: a connector runs from each step node to the next card. */
@media (min-width: 75rem) {
  .steps--process { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; gap: 1.25rem; }
  .steps--process > li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(1.25rem + 1.125rem - 1px);
    left: calc(1.25rem + 2.25rem + 0.5rem);
    right: calc(-1.25rem + 0.5rem);
    height: 2px;
    background: var(--blue);
  }
  .surface-navy .steps--process > li:not(:last-child)::after { background: var(--on-navy-muted); }
  /* Five or six steps: two rows of three; connectors only within a row. */
  .steps--process:has(> li:nth-child(5)) { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps--process:has(> li:nth-child(5)) > li:nth-child(3n)::after { content: none; }
}

/* ---------- Payment flow (inline SVG, text equivalent in the card) ---------- */
.flows { display: grid; gap: 1.25rem; margin-bottom: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem); }
@media (min-width: 48rem) { .flows { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
.flow {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-radius: var(--radius-lg);
  background: var(--tint-slate);
}
.flow--fee { background: var(--tint-blue); }
.flow h3 { font-size: var(--fs-h3); font-weight: 700; }
.flow__who { font-weight: 600; color: var(--blue-hover); }
.flow svg { width: 100%; height: auto; margin-block: 0.5rem; }
.flow p { font-size: 0.9875rem; max-width: 34em; }
.flow-svg__box { fill: var(--white); stroke: var(--navy); stroke-width: 1.5; }
.flow-svg__box--us { fill: var(--navy); }
.flow-svg__label { fill: var(--navy); font: 600 15px var(--font-body); }
.flow-svg__box--us + .flow-svg__label { fill: var(--white); }
.flow-svg__line { stroke: var(--blue); stroke-width: 2; fill: none; }
.flow-svg__head { fill: var(--blue); }
.flow-svg__note { fill: var(--blue-hover); font: 600 14px var(--font-body); }

/* ---------- Explanatory video (/honorarvermittlung/) ---------- */
.surface-navy .chapter__head p { color: var(--on-navy); }
.video { display: grid; gap: 1rem; }
@media (min-width: 64rem) {
  .video { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 2.5rem; align-items: start; }
}
.video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--navy);
  border: 1px solid var(--navy-rule);
  border-radius: var(--radius-lg);
}
.video figcaption { font-size: 0.9375rem; color: var(--on-navy); max-width: 34em; }
.video figcaption > * + * { margin-top: 0.75rem; }
.video figcaption strong { color: var(--white); font-weight: 600; }
.video__facts { list-style: none; padding: 0; border-top: 1px solid var(--navy-rule); }
.video__facts li { padding-block: 0.5rem; border-bottom: 1px solid var(--navy-rule); }

/* ---------- Short answers (home): definition list, bounded measure ---------- */
.answers { display: grid; gap: 1rem; }
@media (min-width: 56rem) { .answers { grid-template-columns: 1fr 1fr; gap: 1.25rem 2rem; } }
.answers > div { background: var(--white); border-radius: var(--radius-lg); padding: 1.5rem 1.75rem; box-shadow: var(--shadow-sm); }
.answers dt { font-family: var(--font-head); font-weight: 700; color: var(--navy); font-size: 1.0625rem; line-height: 1.3; }
.answers dd { margin: 0.4rem 0 0; max-width: 36em; }

/* ---------- Revision g: editorial work cards and fact panel (Über uns) ---------- */
.work { display: grid; gap: 1rem; }
@media (min-width: 64rem) { .work { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
.work__item {
  background: var(--tint-slate);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1.25rem + 0.75vw, 2rem);
  max-width: 40em;
}
.work__item h3 { font-size: var(--fs-h3); font-weight: 700; }
.work__item p { margin-top: 0.6rem; }

.facts {
  display: grid;
  gap: 0;
  background: var(--tint-slate);
  border-radius: var(--radius-lg);
  padding: 0.5rem clamp(1.25rem, 1rem + 1vw, 1.75rem);
  max-width: 44rem;
}
.facts > div { padding-block: 0.85rem; border-bottom: 1px solid var(--rule-soft); }
.facts > div:last-child { border-bottom: 0; }
.facts dt { font-size: 0.875rem; font-weight: 600; color: var(--muted); }
.facts dd { margin: 0.15rem 0 0; color: var(--navy); font-weight: 500; }
.facts ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
@media (min-width: 40rem) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
  .facts > div:nth-last-child(2) { border-bottom: 0; }
  .facts > div:last-child { grid-column: 1 / -1; border-top: 1px solid var(--rule-soft); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .site-header, .subnav, .nav-toggle, .contact-form, .skip-link, .legal-head, .site-footer, .print-action { display: none !important; }
  .band, .surface-navy { background: none; color: #000; }
  .band h1, .band h2, .band h3, .surface-navy h1, .surface-navy h2, .surface-navy h3 { color: #000; }
}

/* ---------- Revision h: illustrative examples and the simplified cost model ----------
   Appended only; every rule above is byte-identical to revision g. Examples are
   hypothetical cards (situation, questions, what we review) in the existing card
   language; the model on /honorarvermittlung/ is a table with a bar diagram (inline
   SVG, aria-hidden; the table is the text equivalent) and native disclosures. */
.cases { display: grid; gap: 1rem; }
@media (min-width: 48rem) { .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } }
@media (min-width: 64rem) { .cases--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cases--one { grid-template-columns: minmax(0, 1fr); }
.case {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  box-shadow: var(--shadow-sm);
}
.surface-white .case { background: var(--tint-slate); box-shadow: none; }
.case__label {
  align-self: flex-start;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--blue-hover);
  background: var(--tint-blue);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
}
.surface-tint .case__label, .surface-white .case__label { background: var(--tint-blue-line); }
.case h3 { font-size: var(--fs-h3); font-weight: 700; margin-top: 0; }
.case h4 { font-size: 0.9375rem; font-weight: 700; margin-top: 0.25rem; }
.case p, .case li { font-size: 0.9875rem; max-width: 36em; }
.case ul { padding-left: 1.2em; }
.case li + li { margin-top: 0.3rem; }
.case .text-link { margin-top: auto; padding-top: 0.25rem; }
.cases-flow { max-width: 30rem; margin-bottom: clamp(1rem, 0.8rem + 1vw, 1.5rem); }
.cases-flow svg { width: 100%; height: auto; }
/* One example inside a chapter (specialist pages): spaced like the panels around it. */
.case--example { margin-top: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem); max-width: 46rem; }
.prose > .case--example { margin-top: 2em; }
.cases-note { margin-top: 1.25rem; font-size: 0.9375rem; color: var(--muted); max-width: 46em; }

.model { display: grid; gap: 1.25rem; max-width: 46rem; }
.model > p { max-width: var(--measure); }
.model__label {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  font-weight: 600;
  color: var(--navy);
}
.model-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.model-table caption { text-align: left; color: var(--muted); padding-bottom: 0.75rem; caption-side: top; }
.model-table th, .model-table td { padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--tint-blue-line); vertical-align: top; }
.model-table th:first-child { padding-left: 0; }
.model-table td:last-child, .model-table thead th:last-child { padding-right: 0; }
.model-table thead th { font-family: var(--font-head); font-weight: 700; color: var(--navy); text-align: right; border-bottom: 1px solid var(--rule); }
.model-table thead th:first-child { text-align: left; }
.model-table tbody th { text-align: left; font-weight: 500; color: var(--text); }
.model-table td { text-align: right; white-space: nowrap; color: var(--navy); }
.model-table .model-table__sum th, .model-table .model-table__sum td { font-weight: 700; color: var(--navy); border-bottom-color: var(--rule); }
.model-bars { background: var(--white); border-radius: var(--radius-lg); padding: 1rem 1.25rem; }
.model-bars svg { width: 100%; height: auto; }
.model-svg__bar { fill: var(--navy); }
.model-svg__bar--side { fill: var(--blue); }
.model-svg__paid { stroke: var(--muted); stroke-width: 2; stroke-dasharray: 4 4; }
.model-svg__label { fill: var(--navy); font: 600 15px var(--font-body); }
.model-svg__note { fill: var(--muted); font: 500 13px var(--font-body); }
.model__result { font-weight: 600; color: var(--navy); }
.model__formula { background: var(--white); border-radius: var(--radius); padding: 0.75rem 1rem; font-size: 0.9375rem; }
.model__formula strong { color: var(--navy); }
.model__more { background: var(--white); border-radius: var(--radius-lg); padding-inline: 1.25rem; box-shadow: var(--shadow-sm); }
.model__more summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 44px;
  padding-block: 0.75rem;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
}
.model__more summary::-webkit-details-marker { display: none; }
.model__more summary::after { content: "+"; font-size: 1.375rem; line-height: 1; color: var(--blue); }
.model__more[open] summary::after { content: "\2212"; }
.model__more summary:hover { color: var(--blue); }
.model__more > div { padding-bottom: 1.25rem; font-size: 0.9375rem; }
.model__more > div > * + * { margin-top: 0.75rem; }
.model__more dl > div { display: grid; gap: 0 1rem; padding-block: 0.45rem; border-bottom: 1px solid var(--rule-soft); }
.model__more dt { font-weight: 600; color: var(--navy); }
.model__more dd { margin: 0; }
.model__more ul { padding-left: 1.2em; }
@media (min-width: 40rem) { .model__more dl > div { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
/* Narrow screens: each table row becomes a label line with the two values below it
   (A and B named before each value); the diagram's labels grow to stay readable. */
@media (max-width: 29.99rem) {
  .model-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .model-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-bottom: 1px solid var(--tint-blue-line); padding-block: 0.5rem; }
  .model-table tbody th { grid-column: 1 / -1; padding: 0 0 0.15rem; border: 0; hyphens: manual; }
  .model-table tbody td { text-align: left; padding: 0; border: 0; }
  .model-table tbody td:nth-of-type(1)::before { content: "A: "; color: var(--muted); font-weight: 500; }
  .model-table tbody td:nth-of-type(2)::before { content: "B: "; color: var(--muted); font-weight: 500; }
  .model-table .model-table__sum { border-bottom-color: var(--rule); }
  .model-bars { padding: 0.75rem 0.85rem; }
  .model-svg__label { font-size: 22px; }
  .model-svg__note { font-size: 19px; }
  .cases-flow .flow-svg__label { font-size: 19px; }
}

/* ---------- Revision h: model examples 1 and 2, results side by side ---------- */
.model__case { font-size: var(--fs-h3); font-weight: 700; margin-top: 0.5rem; }
.model-case { display: grid; gap: 1.25rem; margin-top: 1rem; padding-top: clamp(1.25rem, 1rem + 1vw, 1.75rem); border-top: 1px solid var(--tint-blue-line); }
.model-case > p { max-width: var(--measure); }
.model-sum { display: grid; gap: 0.75rem; margin: 0; }
@media (min-width: 40rem) { .model-sum { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.model-sum > div { background: var(--white); border-radius: var(--radius-lg); padding: 1rem 1.25rem; box-shadow: var(--shadow-sm); }
.model-sum dt { font-size: 0.9375rem; color: var(--muted); }
.model-sum dd { margin: 0.25rem 0 0; font: 700 clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem)/1.2 var(--font-head); color: var(--navy); font-variant-numeric: tabular-nums; }
.model-sum .model-sum__diff { background: var(--tint-blue-line); }
.model-sum .model-sum__diff dt { color: var(--navy); font-weight: 600; }
.model-sum .model-sum__diff dd { color: var(--blue-hover); }

/* ---------- Revision h: repeated contact band as one full-width block (owner, 7 October 2026) ----------
   No second column: company facts live in the footer. Copy keeps a readable measure. */
.contact__grid.contact__grid--single { grid-template-columns: minmax(0, 1fr); }
.contact__grid--single > .contact__aside > p:not(.actions) { max-width: 46em; }
.contact__grid--single .actions { margin-top: 1.75rem; }

/* ---------- Revision h: situation entries (home, Geschäftskunden) ---------- */
@media (min-width: 64rem) { .cases--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Revision h: preview-only service package draft (/entwurf-servicepakete/) ---------- */
.draft-label {
  display: inline-block;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
}
.matrix-wrap { display: grid; gap: 1.25rem; }
.matrix-legend { display: grid; gap: 0.5rem 1.5rem; font-size: 0.9375rem; }
@media (min-width: 48rem) { .matrix-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.matrix-legend > div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 0.75rem; }
.matrix-legend dt { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--navy); }
.matrix-legend dd { margin: 0; color: var(--muted); }
.matrix { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.matrix caption { text-align: left; color: var(--muted); padding-bottom: 0.75rem; caption-side: top; }
.matrix thead th { font-family: var(--font-head); font-weight: 700; color: var(--navy); text-align: left; padding: 0.75rem 0.75rem; border-bottom: 1px solid var(--rule); vertical-align: bottom; }
.matrix tbody th { text-align: left; font-weight: 600; color: var(--navy); padding: 0.85rem 0.75rem 0.85rem 0; vertical-align: top; }
.matrix td { padding: 0.85rem 0.75rem; vertical-align: top; color: var(--text); }
.matrix tbody tr { border-bottom: 1px solid var(--rule-soft); }
.matrix thead th:first-child { padding-left: 0; width: 34%; }
.matrix__nr { display: inline-block; min-width: 1.6em; color: var(--muted); font-weight: 500; }
.matrix__status { font-weight: 600; color: var(--navy); }
.matrix__detail { display: block; margin-top: 0.15rem; font-size: 0.875rem; color: var(--muted); }
.matrix__gate { display: inline-block; margin-left: 0.35rem; font-size: 0.8125rem; font-weight: 600; }
.mark {
  display: inline-grid;
  place-items: center;
  width: 1.1rem;
  height: 1.1rem;
  margin-right: 0.45rem;
  vertical-align: -0.15rem;
  border-radius: 50%;
  border: 2px solid var(--muted);
}
.mark--included { background: var(--blue); border-color: var(--blue); }
.mark--included::after { content: ""; width: 0.3rem; height: 0.55rem; margin-top: -0.12rem; border: solid var(--white); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.mark--excluded::after { content: ""; width: 0.5rem; height: 2px; background: var(--muted); }
.mark--additional, .mark--addon { border-color: var(--blue-hover); }
.mark--additional::after, .mark--addon::after { content: "+"; font: 700 0.8rem/1 var(--font-body); color: var(--blue-hover); }
.mark--limited { border-color: var(--blue-hover); background: var(--tint-blue-line); }
.gates { list-style: none; padding: 0; display: grid; gap: 0.75rem; max-width: 46rem; }
.gates > li { background: var(--white); border-radius: var(--radius-lg); padding: 1.1rem 1.25rem; box-shadow: var(--shadow-sm); scroll-margin-top: calc(var(--header-h) + 1rem); }
.gates h3 { font-size: 1.0625rem; font-weight: 700; }
.gates ul { margin-top: 0.4rem; padding-left: 1.2em; font-size: 0.9375rem; }
.gates li li + li { margin-top: 0.3rem; }
.gates strong { color: var(--navy); font-weight: 600; }
/* Narrow screens: service name on its own line, the three levels below it, each named. */
@media (max-width: 47.99rem) {
  .matrix thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .matrix tbody tr { display: grid; grid-template-columns: minmax(0, 1fr); padding-block: 0.75rem; }
  .matrix tbody th { padding: 0 0 0.35rem; }
  .matrix td { display: grid; grid-template-columns: minmax(0, 7.5rem) auto minmax(0, 1fr); align-items: start; padding: 0.2rem 0; }
  .matrix td::before { content: attr(data-label); color: var(--muted); font-size: 0.875rem; }
  .matrix td .matrix__detail { grid-column: 3; margin-top: 0; }
  .matrix td .matrix__status { grid-column: 3; grid-row: 1; }
  .matrix td .mark { grid-column: 2; grid-row: 1; }
  .matrix td .matrix__detail { grid-row: 2; }
}