/* Thun-Hohenstein Nachfolge, Marke „Königsblau“ (Oktober 2026)
   Warmes Kalkpapier, dunkles Umbra für Text und dunkle Flächen, Königsblau aus Michals Unterschrift
   für alles Klickbare und den Federstrich im Logo. Kein Gold, keine Verläufe.
   Spectral für Überschriften, Source Sans 3 für alles andere (selbst gehostet).
   Herleitung und Regeln: docs/website-designsystem.md */

:root {
  --blue: #2B3E94;             /* Königsblau: Links, Knöpfe, Fokus. Auf Kalk 8,4:1 */
  --blue-dark: #1F2E70;        /* Darüberfahren */
  --blue-light: #A9B8E8;       /* Links auf Umbra, 6,7:1 */
  --umber: #392E27;            /* dunkle Flächen: Abschlusskasten, „Offen gesagt“ */
  --umber-deep: #2A221D;       /* Fußzeile */
  --paper: #F4F1EA;            /* Kalk: Haupt-Hintergrund */
  --linen: #E8E2D6;            /* Leinen: zweiter Hintergrund */
  --white: #FFFEFB;            /* Eingabefelder, Schrift auf Königsblau */
  --ink: #2A241F;              /* Text und Überschriften, auf Kalk 13,6:1 */
  --muted: #5E554C;            /* Nebentext, auf Leinen 5,7:1 */
  --line: #D6CEC0;             /* Trennlinien auf Kalk */
  --line-linen: #CBC2B2;       /* Trennlinien auf Leinen */
  --rule: #B9AE9C;             /* kräftigere Linie über Stichworten */
  --input-border: #8C8578;
  --error: #A3391D;
  --on-dark: #F4F1EA;
  --on-dark-soft: #D8CEC1;     /* ruhigere Schrift auf Umbra */

  --font-serif: Spectral, Georgia, "Times New Roman", serif;
  --font-sans: "Source Sans 3", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  --wrap: 1120px;
  --text: 34em;                /* Zeilenlänge Fließtext, rund 70 Zeichen */
  --gutter: 40px;
  --sec-y: 80px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 20px; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 19px/1.6 var(--font-sans);
}
img { display: block; max-width: 100%; height: auto; }
/* Bilder lassen sich nicht anklicken, ziehen oder per Rechtsklick und langem Tippen öffnen oder speichern.
   Bilder in Links (Logo) geben den Klick an den Link weiter. Ein Bildschirmfoto verhindert das nicht. */
img, svg image { pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
/* Porträts leicht gedämpft und überall gleich, damit die rote Wand nicht gegen Umbra und Königsblau arbeitet */
img[src^="team/"] { filter: saturate(.8) contrast(1.02); }
p { margin: 0 0 16px; text-wrap: pretty; hyphens: auto; }
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--blue-dark); text-decoration-thickness: 2px; }
::selection { background: var(--blue); color: var(--white); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
strong { font-weight: 600; }
figure { margin: 0; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 12px; top: 12px; z-index: 10; padding: 10px 14px; background: var(--blue); color: var(--white); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: min(var(--wrap), calc(100% - var(--gutter))); margin: 0 auto; }

h1, h2, h3 {
  margin: 0 0 18px;
  font-family: var(--font-serif);
  font-weight: 300;
  color: var(--ink);
  text-wrap: balance;
  hyphens: manual;
  overflow-wrap: break-word;
}
h1 { font-size: clamp(36px, 4.4vw, 54px); line-height: 1.1; }
h2 { font-size: clamp(30px, 3vw, 38px); line-height: 1.18; }
h3 { font-size: 26px; line-height: 1.25; font-weight: 400; }
/* Ein einzelnes Wort kursiv, etwa in der Startseiten-Überschrift */
h1 em, h2 em { font-style: italic; font-weight: 400; }
.lead { font-size: 21px; color: var(--muted); }
.small { font-size: 17px; color: var(--muted); }

/* ---------- Knöpfe ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 26px;
  border: 2px solid var(--blue);
  border-radius: 4px;
  background: var(--blue);
  color: var(--white);
  font: 600 18px/1.2 var(--font-sans);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: var(--blue-dark); border-color: var(--blue-dark); color: var(--white); text-decoration: none; }
.btn-outline { background: transparent; color: var(--blue); }
.btn-outline:hover { background: var(--blue); color: var(--white); }
.btn-small { min-height: 44px; padding: 9px 18px; font-size: 16px; }

/* ---------- Kopf: Logo, vier Textlinks, ein zurückhaltender Knopf ----------
   Keine Linie darunter: Jede Seite beginnt mit einer Fläche in Leinen. */
.hd { background: var(--paper); }
.hd-in { display: flex; align-items: center; gap: 4px 40px; padding: 16px 0; }
.hd-logo { display: block; margin-right: auto; }
.hd-logo img { width: auto; height: 58px; }
.hd-nav ul { display: flex; flex-wrap: wrap; gap: 0 30px; margin: 0; padding: 0; list-style: none; }
.hd-nav a {
  position: relative; display: inline-block; padding: 10px 0;
  font-size: 17px; color: var(--ink); text-decoration: none;
}
.hd-nav a:hover { color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
/* Aktive Seite: halbfett in Königsblau, darunter der Federstrich aus dem Logo */
.hd-nav a[aria-current="page"] { color: var(--blue); font-weight: 600; text-decoration: none; }
.hd-nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; bottom: 3px; width: 22px; height: 4px;
  background: var(--blue); clip-path: polygon(24% 0, 100% 0, 76% 100%, 0 100%);
}
.hd-cta { background: transparent; color: var(--blue); }
.hd-cta:hover { background: var(--blue); color: var(--white); }

/* ---------- Seitenkopf in Leinen ---------- */
.page-head { background: var(--linen); padding: 68px 0 60px; }
.page-head h1 { max-width: 820px; }
.page-head .lead { max-width: var(--text); margin: 0; }
.page-head .lead + .lead { margin-top: 16px; }
.lead strong { color: var(--ink); }
.page-head-map .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 32px 64px; align-items: center; }

/* ---------- Abschnitte: Kalk, Leinen, Umbra im Wechsel ---------- */
.sec > .wrap { padding: var(--sec-y) 0; }
.sec-sand { background: var(--linen); }
.sec-dark { background: var(--umber); color: var(--on-dark); }
.sec-dark h2, .sec-dark h3 { color: var(--on-dark); }
.sec-dark a { color: var(--on-dark); }
.sec-dark .small, .sec-dark .signed { color: var(--on-dark-soft); }
.sec-dark :focus-visible { outline-color: var(--on-dark); }
/* Zwei Kalk-Abschnitte hintereinander bekommen eine Trennlinie */
.sec:not(.sec-sand):not(.sec-dark) + .sec:not(.sec-sand):not(.sec-dark) > .wrap { border-top: 1px solid var(--line); }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 28px 56px; align-items: start; }
.split > h2 { margin: 0; }
.split-even { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* oben bündig: Bild und Überschrift beginnen auf einer Höhe */
.more-top { margin-top: 26px; }
.split > div > :last-child { margin-bottom: 0; }
.text { max-width: var(--text); }
.text > :last-child { margin-bottom: 0; }
.more { margin: 26px 0 0; font-weight: 600; }

/* ---------- Startseite: Einstieg mit Brief ---------- */
.hero { background: var(--linen); }
/* Am Computer: Text und der Weg zu den Fragen links, mittig neben dem Brief.
   Am Handy steht der Weg zu den Fragen direkt unter dem Briefbild. */
.hero-in {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr;
  grid-template-areas: ". bild" "text bild" "link bild" ". bild"; column-gap: 72px; padding: 64px 0;
}
.hero-text { grid-area: text; }
.hero-mark { grid-area: bild; align-self: center; }
.hero-letter { grid-area: link; max-width: 30em; margin: 28px 0 0; font-weight: 600; }
.hero h1 { margin-bottom: 24px; font-size: clamp(38px, 4.8vw, 56px); line-height: 1.08; }
.hero .lead { margin-bottom: 32px; max-width: 34em; }
.hero .hero-note { max-width: 30em; margin: 14px 0 0; }

/* Brief und Umschlag liegen direkt auf dem Leinen, wie auf einem Schreibtisch */
.hero-mark { margin: 0; }
.hero-mark figcaption { max-width: 440px; margin: 4px 0 0 2%; font-size: 17px; line-height: 1.45; color: var(--muted); }
.brief { display: block; width: 100%; max-width: 540px; height: auto; overflow: visible; }
.bb-paper { fill: url(#bb-papier); }
.bb-env { fill: url(#bb-umschlag); stroke: rgba(58, 46, 28, .08); stroke-width: .8; }
.bb-stempel { stroke: #3F4652; fill: #3F4652; opacity: .6; }

/* ---------- Das Wichtigste: Liste mit dem Federstrich vor jedem Stichwort ---------- */
.keyfacts { display: grid; gap: 30px; max-width: 34em; margin: 0; }
.keyfacts > div { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 18px; align-items: baseline; }
.keyfacts > div::before {
  content: ""; grid-row: 1; align-self: center; width: 28px; height: 5px;
  background: var(--blue); clip-path: polygon(24% 0, 100% 0, 76% 100%, 0 100%);
}
.keyfacts dt { grid-column: 2; margin: 0 0 4px; font: 400 27px/1.25 var(--font-serif); color: var(--ink); }
.keyfacts dd { grid-column: 2; margin: 0; }
.keyfacts + .more { margin-left: 46px; }

/* ---------- Tabelle: Begriff links, Erklärung rechts (Vergütung) ---------- */
.facts { margin: 0; }
.facts > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 2px 24px; padding: 12px 0; border-top: 1px solid var(--line); }
.facts dt { font-weight: 600; color: var(--muted); }
.facts dd { margin: 0; }
.sec-sand .facts > div { border-color: var(--line-linen); }

/* ---------- Listen mit Trennlinien ---------- */
.rows { margin: 0; padding: 0; list-style: none; }
.rows li { padding: 13px 0; border-top: 1px solid var(--line); }
.rows li:first-child { border-top: 0; padding-top: 0; }
.rows li:last-child { padding-bottom: 0; }
.sec-sand .rows li { border-color: var(--line-linen); }
.rows + .small { margin: 18px 0 0; }

/* ---------- Zitat mit Unterschrift ---------- */
.quote { margin: 0; font: 400 clamp(25px, 2.5vw, 30px)/1.4 var(--font-serif); }
.quote p { margin: 0; hyphens: manual; }
.quote { hyphens: manual; }
p.quote + p { margin-top: 24px; }
.signature { width: 160px; margin: 22px 0 2px -4px; }
.sec-dark .signature { filter: brightness(0) invert(1); }
.signed { margin: 0; font-size: 17px; color: var(--muted); }

/* ---------- Hervorgehobener Absatz unter dem Zitat (Über uns: Bewertung und Vertrag) ---------- */
.merksatz { margin-top: 40px; padding: 2px 0 4px 26px; border-left: 4px solid var(--blue); }
.sec-dark .merksatz { border-left-color: var(--blue-light); }
.merksatz h3 { margin: 0 0 10px; }
.merksatz p { margin: 0; font-size: 21px; line-height: 1.55; }

/* ---------- Schrift in den Zeichnungen von Brief und Umschlag ---------- */
svg text { font-family: var(--font-sans); }
svg .bb-serif { font-family: var(--font-serif); }

/* ---------- Für Käufer: Kurzprofil als schlichter Dokumentauszug im Seitenkopf ---------- */
.page-head-profil .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 32px 64px; align-items: center; }
.kurzprofil { margin: 0; padding: 22px 26px 10px; background: var(--white); border: 1px solid var(--line-linen); }
.kp-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px;
  padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.kp-titel { margin: 0; font: 400 26px/1.2 var(--font-serif); }
.kp-hinweis { margin: 0; font-size: 16px; color: var(--muted); }
.kp-daten { margin: 0; }
.kp-daten > div { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 0 16px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 17px; line-height: 1.4; }
.kp-daten > div:first-child { border-top: 0; }
.kp-daten dt { color: var(--muted); }
.kp-daten dd { margin: 0; }

/* ---------- Für Käufer: Leistungen breit, die Abgrenzung schmal daneben ---------- */
.leistungen { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px 64px; align-items: start; }
.leistungen h2 { margin-bottom: 22px; }
.abgrenzung { padding-left: 40px; border-left: 1px solid var(--line-linen); }
.abgrenzung .rows + .small { margin-top: 20px; }

/* ---------- Für Käufer: der Ablauf in vier Schritten ---------- */
.schritte { margin: 0 0 28px; padding: 0; list-style: none; counter-reset: schritt; }
.schritte li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px; padding: 20px 0; border-top: 1px solid var(--line); counter-increment: schritt; }
.schritte li:first-child { padding-top: 0; border-top: 0; }
.schritte li::before { content: counter(schritt); grid-row: span 2; font: 300 38px/1 var(--font-serif); color: var(--blue); }
.schritte h3 { grid-column: 2; margin: 2px 0 6px; font-size: 23px; }
.schritte p { grid-column: 2; margin: 0; }

/* ---------- Über uns: was wir vor dem ersten Brief lesen ---------- */
.quellen-titel { margin: 0 0 22px; font: 600 17px/1.4 var(--font-sans); color: var(--muted); }
.quellen .keyfacts + .small { margin: 24px 0 0 46px; }

/* ---------- Umschlag allein (Diskretion), gleiche Zeichnung wie auf der Startseite ---------- */
.envelope { display: block; width: 100%; max-width: 480px; height: auto; overflow: visible; }

/* ---------- Eine ruhige Spalte: Überschrift über dem Inhalt (Fragen zum Brief, „Wer uns bezahlt“) ---------- */
.fragen > *, .spalte > * { max-width: 820px; }
.fragen > h2, .spalte > h2 { margin: 0 0 28px; }
.spalte .text { font-size: 21px; line-height: 1.55; }

/* ---------- Fragen zum Brief: Fragen in Spectral, ein schlichtes Plus ---------- */
.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.sec-sand .faq details { border-color: var(--line-linen); }
.faq summary {
  position: relative; display: block; padding: 20px 56px 20px 0; cursor: pointer; list-style: none;
  font: 400 23px/1.3 var(--font-serif); color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--blue); }
/* Plus aus zwei dünnen Strichen; geöffnet bleibt nur der waagrechte als Minus */
.faq summary::before, .faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 18px; height: 2px; margin-top: -1px; background: var(--blue);
}
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { display: none; }
.faq details p { margin: -6px 56px 24px 0; max-width: 62ch; }
.faq + .small { margin: 22px 0 0; }

/* ---------- Bayern-Karte ---------- */
.map img { width: 100%; max-width: 260px; }
.map figcaption { margin-top: 12px; font-size: 16px; line-height: 1.45; color: var(--ink); }
.map-split { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 28px 48px; align-items: start; }
/* Der Text neben der Karte etwas größer, wie bei „Wer uns bezahlt“ */
.map-split .text { font-size: 21px; line-height: 1.55; }
/* Käuferseite: Deutschlandkarte mit Legende; die Farbfelder entsprechen den Flächen in deutschland.svg */
.map-de img { max-width: 220px; }
.legende { margin: 0; padding: 0; list-style: none; }
.legende li { position: relative; padding-left: 26px; }
.legende li + li { margin-top: 6px; }
.legende li::before { content: ""; position: absolute; left: 0; top: .28em; width: 14px; height: 14px; background: var(--blue); }
.legende .legende-andere::before { background: #DED6C7; box-shadow: inset 0 0 0 1px #7A6F62; }

/* ---------- Personen: zwei Spalten, Foto über dem Text ---------- */
.people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 72px; margin: 0; padding: 0; list-style: none; }
.person img { width: 100%; max-width: 240px; aspect-ratio: 4 / 5; object-fit: cover; margin-bottom: 24px; }
.person h2 { margin: 0 0 4px; font-size: 30px; }
.person .role { margin: 0 0 16px; font-size: 18px; font-weight: 600; color: var(--muted); }

/* ---------- Wir beide (Startseite): Fotos links, Zitat mit Unterschrift rechts ---------- */
.offen .quote { max-width: 24em; }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 300px; margin: 6px 0 0; padding: 0; list-style: none; }
.duo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.duo p { margin: 8px 0 0; font-size: 17px; line-height: 1.35; color: var(--muted); }
.duo strong { display: block; font-size: 18px; color: var(--ink); }

/* ---------- Zwei Listen nebeneinander ---------- */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 64px; }
.pair h2 { padding-top: 18px; border-top: 2px solid var(--rule); font-size: 30px; }

/* ---------- Abschluss: offen wie ein Briefschluss, Text links, Knopf rechts ----------
   Nach einem Kalk-Abschnitt trennt eine feine Linie, nach Leinen die Farbe. Dunkel ist nur die Fußzeile. */
.end > .wrap { padding: var(--sec-y) 0; }
.sec:not(.sec-sand):not(.sec-dark) + .end > .wrap { border-top: 1px solid var(--line); }
.end-box { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 64px; align-items: center; }
.end-box h2 { margin: 0 0 10px; }
.end-box p { margin: 0; max-width: 620px; }
.end-box .small { margin-top: 12px; }
.end-box .small + .small { margin-top: 4px; }
.end-kontakt { display: grid; justify-items: start; gap: 14px; }
.end-kontakt .small { margin: 0; }

/* ---------- Kontaktseite: E-Mail-Adresse im Seitenkopf ---------- */
.kopf-mail { margin: 20px 0 0; color: var(--muted); }

/* ---------- Kontaktseite: Umschalter „Für Inhaber“ / „Für Käufer“ im Seitenkopf ----------
   Was nur für eine Seite gilt, trägt .fuer-inhaber oder .fuer-kaeufer; sichtbar ist immer nur eins davon.
   Ohne JavaScript schaltet :has() um, form.js setzt zusätzlich data-anliegen (für ältere Browser).
   Jede Regel steht einzeln, weil ein Browser ohne :has() sonst die ganze Regel verwirft. */
.fuer-kaeufer { display: none; }
main:has(#anliegenKaeufer:checked) .fuer-kaeufer { display: block; }
main:has(#anliegenKaeufer:checked) .fuer-inhaber { display: none; }
main[data-anliegen="kaeufer"] .fuer-kaeufer { display: block; }
main[data-anliegen="kaeufer"] .fuer-inhaber { display: none; }

/* ---------- Vergütung ---------- */
.verguetung-kopf h2 { margin-bottom: 14px; }
.verguetung-kopf p { max-width: var(--text); margin: 0; }
.fees { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 56px; margin: 32px 0 40px; }
/* Zwei weiße Karten auf Leinen, oben ein Balken in Königsblau; Überschrift und die Zusagen ebenfalls in Blau */
.fees > div { padding: 24px 28px 12px; background: var(--white); border: 1px solid var(--line-linen); border-top: 5px solid var(--blue); }
.fees h3 { margin: 0 0 12px; color: var(--blue); }
.fees .facts > div { grid-template-columns: 140px minmax(0, 1fr); border-color: var(--line); }
.fees .facts strong { color: var(--blue); }

/* ---------- Termin: Formular und Seitenspalte ---------- */
.request { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 40px 64px; align-items: start; }
.contact-form, .form-confirm { display: grid; gap: 22px; }
.form-confirm { padding: 32px 34px; background: var(--linen); }
.form-confirm h2 { margin: 0; }
.form-confirm p { margin: 0; }
.form-intro { margin: 0; }
.field label, .field legend { display: block; margin-bottom: 7px; font-size: 17px; font-weight: 600; }
.optional, .pflicht { font-weight: 400; color: var(--muted); }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.field-hint { margin: 7px 0 0; font-size: 16px; color: var(--muted); }
.field-error { margin: 8px 0 0; font-size: 16px; font-weight: 600; color: var(--error); }
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  display: block; width: 100%; min-height: 52px; padding: 11px 14px;
  border: 1px solid var(--input-border); border-radius: 4px; background: var(--white);
  color: var(--ink); font: 19px var(--font-sans);
}
select {
  appearance: none; padding-right: 44px;
  background-image: linear-gradient(45deg, transparent 50%, var(--blue) 50%), linear-gradient(-45deg, transparent 50%, var(--blue) 50%);
  background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%; background-size: 6px 6px; background-repeat: no-repeat;
}
textarea { min-height: 130px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
[aria-invalid="true"] { border-color: var(--error); }
.consent { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; }
.consent label { margin: 0; font-size: 17px; font-weight: 400; cursor: pointer; }
.consent input { width: 26px; height: 26px; margin: 1px 0 0; accent-color: var(--blue); cursor: pointer; }
/* Auswahl kaufen oder verkaufen: jede Zeile ist als Ganzes anklickbar */
.choice { min-width: 0; margin: 0; padding: 0; border: 0; }
.choice .choice-option {
  display: flex; align-items: center; gap: 14px; margin: 0 0 8px; padding: 12px 16px; min-height: 52px;
  border: 1px solid var(--input-border); border-radius: 4px; background: var(--white); font-size: 18px; font-weight: 400; cursor: pointer;
}
.choice-option:last-of-type { margin-bottom: 0; }
.choice[aria-invalid="true"] .choice-option { border-color: var(--error); }
.choice-option input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--blue); cursor: pointer; }
.choice-option:hover { border-color: var(--blue); }
.choice-option:has(input:checked) { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.choice-option:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 1px; }
.choice-option input:focus-visible { outline: none; }
/* Der Umschalter im Seitenkopf: dieselben Kästen, zwei nebeneinander, mit fetter erster Zeile */
.wahl { max-width: 900px; margin: 6px 0 30px; }
.wahl legend { margin-bottom: 8px; padding: 0; font-size: 17px; font-weight: 600; }
.wahl-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wahl .choice-option { margin: 0; padding: 14px 18px; line-height: 1.35; font-size: 17px; color: var(--muted); }
.wahl .choice-option strong { display: block; font-size: 20px; color: var(--ink); }
.wahl .choice-option:has(input:checked) strong { color: var(--blue); }
.more-fields { border: 1px solid var(--line); border-radius: 4px; }
.more-fields summary { position: relative; padding: 14px 52px 14px 18px; cursor: pointer; list-style: none; font-weight: 600; color: var(--blue); }
.more-fields summary::-webkit-details-marker { display: none; }
.more-fields summary::before, .more-fields summary::after {
  content: ""; position: absolute; right: 18px; top: 50%; width: 16px; height: 2px; margin-top: -1px; background: var(--blue);
}
.more-fields summary::after { transform: rotate(90deg); }
.more-fields[open] summary::after { display: none; }
.more-fields summary span { font-weight: 400; color: var(--muted); }
.more-fields[open] summary { border-bottom: 1px solid var(--line); }
.more-fields-body { display: grid; gap: 22px; padding: 18px; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.form-status { margin: 0; font-size: 16px; color: var(--muted); }
.side { display: grid; gap: 40px; }
.side h2 { margin-bottom: 14px; font-size: 28px; }
.side p { margin: 0; }
.side .small { margin-top: 20px; }
.people-small { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.people-small li { display: flex; align-items: center; gap: 18px; }
.people-small img { width: 96px; height: 120px; object-fit: cover; }
.people-small strong { display: block; font-size: 18px; }
.people-small span { font-size: 16px; color: var(--muted); }

/* ---------- Rechtstexte ---------- */
.legal { max-width: var(--text); }
.legal h2 { margin: 48px 0 14px; font-size: 28px; }
.legal > h2:first-child { margin-top: 0; }
.legal h3 { margin: 26px 0 8px; font: 600 19px/1.4 var(--font-sans); color: var(--ink); }
.legal p, .legal ul, .legal address { margin: 0 0 14px; }
.legal ul { padding-left: 22px; }
.legal li { margin-bottom: 6px; }
.legal address { font-style: normal; }
.legal, .ft, .map figcaption { overflow-wrap: anywhere; }
.toc { max-width: var(--text); margin: 0 0 48px; padding: 22px 26px; background: var(--linen); }
.toc h2 { margin: 0 0 8px; font: 600 17px var(--font-sans); color: var(--ink); }
.toc ol { margin: 0; padding-left: 22px; columns: 2; column-gap: 36px; }
.toc li { margin-bottom: 4px; break-inside: avoid; }
.highlight { margin: 32px 0; padding: 22px 24px; border-left: 4px solid var(--blue); background: var(--linen); }
.highlight h2 { margin-top: 0; }
.highlight p:last-child { margin-bottom: 0; }

/* ---------- Fußzeile: Marke mit Unterzeile, Seiten, Kontakt; darunter die Leiste mit © und den Rechtstexten ----------
   Links ohne Dauer-Unterstreichung, weil sie in Listen unter Überschriften stehen; beim Darüberfahren
   und mit der Tastatur werden sie deutlich markiert. */
.ft { background: var(--umber-deep); color: var(--on-dark-soft); padding: 60px 0 0; font-size: 16px; }
.ft-in { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 36px 48px; padding-bottom: 52px; }
.ft p { margin: 0; }
.ft ul { margin: 0; padding: 0; list-style: none; }
.ft-logo { display: block; width: 100%; max-width: 230px; height: auto; }
/* Unterzeile als Teil der Marke: gleiche linke Kante und Breite wie das Logo, ruhig in zwei Zeilen */
.ft .ft-unterzeile { max-width: 230px; margin-top: 12px; font-size: 17px; line-height: 1.4; color: var(--on-dark-soft); }
.ft .ft-head { margin-bottom: 10px; font: 400 20px/1.3 var(--font-serif); color: var(--on-dark); }
.ft-links a {
  display: inline-block; padding: 11px 0; color: var(--on-dark); font-size: 17px; text-decoration: none;
  border-bottom: 1px solid rgba(244, 241, 234, .28); line-height: 1.3;
}
.ft-links a:hover { color: #FFFFFF; border-bottom-color: var(--blue-light); }
.ft-links a[aria-current="page"] { border-bottom-color: var(--blue-light); }
.ft :focus-visible { outline: 3px solid var(--blue-light); outline-offset: 3px; }
.ft-leiste { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 32px;
  padding: 10px 0 16px; border-top: 1px solid rgba(244, 241, 234, .16); }
.ft-leiste .ft-links { display: flex; flex-wrap: wrap; gap: 0 28px; }
.ft-leiste .ft-links a { padding: 12px 0; font-size: 16px; }

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 900px) {
  :root { --sec-y: 60px; }
  .hd-in { flex-wrap: wrap; }
  .hd-logo { flex-basis: 100%; }
  .hd-cta { display: none; }
  .hero-in, .split, .split-even, .request, .field-row, .page-head-map .wrap, .page-head-profil .wrap, .pair, .leistungen, .fees, .ft-in { grid-template-columns: minmax(0, 1fr); }
  .hero-in { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "text" "bild" "link"; row-gap: 40px; padding: 56px 0 48px; }
  .hero-letter { margin: -16px 0 0 2%; }
  .brief { max-width: 500px; }
  .page-head-map .map img { max-width: 200px; }
  .kurzprofil { max-width: 440px; }
  .abgrenzung { padding: 28px 0 0; border-left: 0; border-top: 1px solid var(--line-linen); }
  .toc ol { columns: 1; }
}
@media (max-width: 600px) {
  :root { --gutter: 32px; --sec-y: 48px; }
  .faq summary { padding-right: 40px; font-size: 21px; }
  .faq summary::before, .faq summary::after { right: 4px; }
  .faq details p { margin-right: 0; }
  body { font-size: 18px; }
  .hd-in { padding: 12px 0 0; }
  .hd-logo img { height: 44px; }
  .hd-nav { flex-basis: 100%; }
  .hd-nav ul { flex-wrap: nowrap; justify-content: space-between; gap: 0 12px; }
  h1 { font-size: 34px; }
  h2 { font-size: 28px; }
  .lead { font-size: 19px; }
  .page-head { padding: 44px 0 40px; }
  .hero-in { padding: 40px 0 48px; }
  .hero .lead { margin-bottom: 28px; }
  .hero h1 { font-size: 34px; }
  .keyfacts { gap: 26px; }
  .keyfacts > div { grid-template-columns: 22px minmax(0, 1fr); column-gap: 14px; }
  .keyfacts > div::before { width: 22px; height: 4px; }
  .keyfacts dt { font-size: 24px; }
  .keyfacts + .more { margin-left: 36px; }
  .facts > div { grid-template-columns: minmax(0, 1fr); }
  .people { grid-template-columns: minmax(0, 1fr); }
  .wahl-paar { grid-template-columns: minmax(0, 1fr); }
  .map-split { grid-template-columns: minmax(0, 1fr); }
  .map-split .text { font-size: 19px; }
  .quote { font-size: 24px; }
  .end-box { grid-template-columns: minmax(0, 1fr); }
  .end-kontakt { justify-items: stretch; }
  .kp-daten > div { grid-template-columns: 104px minmax(0, 1fr); }
  .fees .facts > div { grid-template-columns: minmax(0, 1fr); }
  .form-confirm { padding: 26px 22px; }
  .btn { width: 100%; }
  .form-actions .btn { width: auto; }
}

@media (max-width: 360px) {
  .hd-nav a { font-size: 16px; }
}

@media (forced-colors: active) {
  .hd-nav a[aria-current="page"]::after, .faq summary::before, .faq summary::after, .keyfacts > div::before,
  .more-fields summary::before, .more-fields summary::after { forced-color-adjust: none; background: CanvasText; }
}

@media print {
  .hd-nav, .hd-cta, .skip-link, .btn, .form-actions, .end { display: none !important; }
  body { font-size: 12pt; }
  .page-head, .hero, .toc, .highlight, .sec-sand, .sec-dark { background: none; color: #000; }
  .sec-dark h2, .sec-dark a, .sec-dark .small { color: #000; }
  .sec-dark .signature { filter: none; }
  .ft { background: none; color: #000; }
  .ft a, a { color: #000; }
}