/* ==========================================================================
   Dein Gutachter NRW — Relaunch
   Ein Stylesheet, mobile first. Keine Frameworks, keine Build-Schritte.
   ========================================================================== */

:root {
  --navy:        #0c1338;
  --navy-deep:   #080d26;
  --accent:      #4a90ff;
  --accent-ink:  #2c2cc0;
  --ivory:       #f7f8fa;
  --pale:        #eef4f8;
  --text:        #14172b;
  --text-2:      #3c4257;
  --muted:       #5c6178;
  --hairline:    #e4e7ee;
  /* Der Rahmen ist bei Eingabefeldern das einzige, was das Bedienelement
     ueberhaupt begrenzt, und muss deshalb 3:1 erreichen (WCAG 1.4.11).
     #dfe3ec lag bei 1,21:1 gegen den Feldgrund und 1,29:1 gegen die weisse
     Karte. #828a9f misst 3,25:1 / 3,45:1 und auf --pale 3,11:1. */
  --field:       #828a9f;
  --star:        #f5a623;

  --display: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --body: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;

  --pad: 20px;
  --nav-h: 64px;
}

@media (min-width: 768px)  { :root { --pad: 40px; --nav-h: 80px; } }
@media (min-width: 1200px) { :root { --pad: 72px; --nav-h: 88px; } }

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

html {
  scroll-behavior: smooth;
  /* Die Kopfzeile steht fest ueber dem Inhalt. Ohne diesen Abstand schiebt
     der Browser ein gerade fokussiertes Element beim Tabben unter die
     Leiste (WCAG 2.4.11). Unten halten Anrufleiste und Cookie-Hinweis
     Platz frei. */
  scroll-padding-top: calc(var(--nav-h) + 12px);
  scroll-padding-bottom: 96px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: #fff;
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  margin: 0;
  letter-spacing: -.022em;
  font-weight: 800;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
img { max-width: 100%; display: block; }

a { color: var(--accent-ink); text-decoration: none; }
a:hover { color: var(--accent); }
/* Fokusring in zwei Farben.
   Ein einfarbiger Ring in --accent erreicht die geforderten 3:1 nur auf
   dunklem Grund: gegen Weiss 3,12:1, gegen --ivory 2,94:1, gegen --pale
   2,82:1, gegen das Warnband 2,90:1 und gegen das WhatsApp-Gruen 1,57:1.
   Zwei ineinander liegende Ringe loesen das ohne Farbwelt-Umbau: Navy
   traegt auf hellem Grund (gegen --pale 16,2:1, gegen Gruen 9,1:1), Weiss
   auf dunklem (gegen Navy 18,0:1, gegen --accent 3,12:1). Auf jedem
   denkbaren Untergrund erfuellt mindestens einer der beiden 3:1. */
:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff;
}
/* Wo der Ring an einem overflow:hidden abgeschnitten wuerde, liegt er innen. */
.faq summary:focus-visible { outline-offset: -3px; box-shadow: none; }
.nav__drawer a:focus-visible {
  outline-color: #fff; outline-offset: -3px; box-shadow: none;
}
/* main traegt tabindex="-1", damit der Sprunglink wirklich Fokus setzt.
   Sichtbar markiert werden muss ein Textbereich deshalb nicht. */
main[tabindex="-1"]:focus, main[tabindex="-1"]:focus-visible {
  outline: none; box-shadow: none;
}

.tnum { font-variant-numeric: tabular-nums; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: #fff; color: var(--navy); padding: 12px 20px; font-weight: 700;
}
.skip-link:focus { left: 8px; top: 8px; }

/* Reflow bei 320 px (WCAG 1.4.10). Lange deutsche Komposita
   ("Datenschutzerklaerung", "Nutzungsausfall:") setzen die minimale
   Inhaltsbreite ihres Kastens und schoben ganze Seiten waagerecht ueber
   den Rand: gemessen bis 510 px Dokumentbreite bei 325 px Sichtfeld.
   overflow-wrap:anywhere bricht solche Woerter nur dann, wenn sie sonst
   nicht passen, und senkt zugleich die Mindestbreite. break-word taete
   das Zweite nicht und half deshalb nicht.
   Nur auf schmalen Bildschirmen: auf breiten wuerde anywhere zusammen mit
   text-wrap:balance auch dann trennen, wenn das Wort laengst passt
   (gemessen an "Datenschutzerklaerung" bei 1280 px: 59 px hoch ohne die
   Regel, 118 px mit ihr). Ab 701 px ist ohnehin nichts uebergelaufen. */
@media (max-width: 700px) {
  h1, h2, h3, h4, summary, dt, .crumbs span, .legal__toc a,
  .legal__sec p, .legal__sec li, .legal__sec dd,
  .places a, .spec-list li, .trips span, .contact-list__text {
    overflow-wrap: anywhere;
  }
}
.legal, .legal__body, .legal__toc, .split__copy, .page-head__inner { min-width: 0; }

/* --- Bewegung -------------------------------------------------------- */

.reveal {
  opacity: 0; transform: translateY(20px);
  transition: opacity .62s cubic-bezier(.22,.61,.36,1) var(--d, 0ms),
              transform .62s cubic-bezier(.22,.61,.36,1) var(--d, 0ms);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }

/* Der Hero laeuft beim Laden an, nicht erst beim Scrollen */
.hero__copy > *, .hero__media, .hero__stages li {
  animation: rise .7s cubic-bezier(.22,.61,.36,1) both;
}
.hero__copy > *:nth-child(1) { animation-delay: .05s; }
.hero__copy > *:nth-child(2) { animation-delay: .12s; }
.hero__copy > *:nth-child(3) { animation-delay: .19s; }
.hero__copy > *:nth-child(4) { animation-delay: .26s; }
.hero__copy > *:nth-child(5) { animation-delay: .33s; }
.hero__media { animation-delay: .16s; }
.hero__stages li:nth-child(1) { animation-delay: .34s; }
.hero__stages li:nth-child(2) { animation-delay: .40s; }
.hero__stages li:nth-child(3) { animation-delay: .46s; }
.hero__stages li:nth-child(4) { animation-delay: .52s; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

.hero__badge { animation: pop .5s cubic-bezier(.22,.61,.36,1) .55s both; }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }

/* Karten heben sich leicht an */
.card, .case, .case-row, .places a, .review {
  transition: transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s ease, border-color .28s ease, background-color .28s ease;
}
.card:hover, .case:hover, .review:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(12,19,56,.10);
  border-color: #d3d9e6;
}
.case-row:hover { transform: translateY(-3px); background: #eef1f6; }
.places a:hover { transform: translateY(-3px); border-color: rgba(74,144,255,.55); }

.case img, .collage img, .hero__media img, .media { transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.case { overflow: hidden; }
.case:hover img { transform: scale(1.035); }

/* Navigationslinks bekommen eine feine Unterlinie */
@media (min-width: 1024px) {
  .nav__menu a { position: relative; }
  .nav__menu a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1.5px;
    background: var(--accent); transform: scaleX(0); transform-origin: left;
    transition: transform .26s cubic-bezier(.22,.61,.36,1);
  }
  .nav__menu a:hover::after, .nav__menu a[aria-current="page"]::after { transform: scaleX(1); }
}

/* Pfeile wandern beim Hovern */
.btn .icon, .arrow-link .icon, .faq__more .icon { transition: transform .26s cubic-bezier(.22,.61,.36,1); }
.btn:hover .icon, .arrow-link:hover .icon, .faq__more:hover .icon { transform: translateX(4px); }
.nav__call .icon, .call-card .icon, .cta .icon { transition: none; }
.btn:hover .icon[width="19"] { transform: none; }

/* Aufklappen im FAQ */
.faq details[open] p { animation: fade .34s ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Cookie-Banner und Sprachmenue sind bereits animiert (transform/opacity) */

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero__copy > *, .hero__media, .hero__stages li, .hero__badge,
  .faq details[open] p { animation: none; }
  .card:hover, .case:hover, .review:hover, .case-row:hover, .places a:hover { transform: none; }
  .case:hover img { transform: none; }
  .nav__menu a::after { transition: none; }
  .btn:hover .icon, .arrow-link:hover .icon { transform: none; }
}

/* --- Rechtstexte ----------------------------------------------------- */

.page-head__inner--single { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 1024px) { .page-head__inner--single { grid-template-columns: 1fr; } }

.legal { display: grid; gap: 40px; }
@media (min-width: 1024px) { .legal { grid-template-columns: 260px minmax(0, 1fr); gap: 64px; align-items: start; } }

.legal__toc { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 1024px) { .legal__toc { position: sticky; top: calc(var(--nav-h) + 24px); } }
.legal__toc ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  counter-reset: toc; border-left: 1px solid var(--hairline);
}
.legal__toc li { counter-increment: toc; }
.legal__toc a {
  display: block; padding: 9px 0 9px 16px; margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: 14.5px; line-height: 1.4; color: var(--muted);
  transition: color .2s ease, border-color .2s ease;
}
.legal__toc a:hover { color: var(--navy); border-left-color: var(--accent); }

.legal__body { max-width: 760px; }
.legal__sec { padding-bottom: 8px; }
.legal__sec + .legal__sec { margin-top: 40px; padding-top: 36px; border-top: 1px solid var(--hairline); }
.legal__sec h2 { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; margin-bottom: 18px; }
.legal__sec h3 { font-size: 17px; font-weight: 700; color: var(--navy); margin: 26px 0 8px; }
.legal__sec h3:first-of-type { margin-top: 18px; }
.legal__sec p { font-size: 16px; line-height: 1.72; color: var(--text-2); margin-bottom: 14px; }
.legal__sec ul { margin: 0 0 16px; padding-left: 20px; }
.legal__sec li { font-size: 16px; line-height: 1.72; color: var(--text-2); margin-bottom: 8px; }
.legal__sec strong { color: var(--navy); }
.legal__sec a { text-decoration: underline; overflow-wrap: anywhere; }

/* --- Zusaetze aus dem Kritik-Durchlauf -------------------------------- */

/* WhatsApp-Knopf */
.btn--wa { background: #25D366; color: #0b3d20; }
.btn--wa:hover { background: #3ee07c; color: #0b3d20; }

/* Rueckrufzusage im Hero und ueber dem Absenden-Knopf */
.hero__promise {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,.86);
}
.hero__promise b { font-weight: 700; color: #fff; }
.form-promise {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 14px 16px; background: var(--pale); border-radius: 3px;
  font-size: 14.5px; line-height: 1.5; color: var(--text-2);
}
.form-promise b { color: var(--navy); }

/* Zweiter Einstieg fuer Nicht-Unfall-Anliegen */
.hero__switch {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-top: 18px; margin-top: 4px; border-top: 1px solid rgba(255,255,255,.12);
  font-size: 14.5px; color: rgba(255,255,255,.62);
}
.hero__switch a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px;
  border: 1px solid rgba(255,255,255,.24); border-radius: 999px;
  color: #fff; font-family: var(--display); font-size: 14px; font-weight: 600;
  transition: border-color .2s ease, background-color .2s ease;
}
.hero__switch a:hover { color: #fff; border-color: var(--accent); background: rgba(74,144,255,.14); }

/* Eckdaten je Leistung */
.facts {
  display: grid; gap: 0; margin: 4px 0 0; padding: 0;
  border: 1px solid var(--hairline); border-radius: 4px; background: #fff;
}
@media (min-width: 560px) { .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.facts > div { padding: 16px 18px; display: flex; flex-direction: column; gap: 5px; }
.facts > div + div { border-top: 1px solid var(--hairline); }
@media (min-width: 560px) {
  .facts > div + div { border-top: 0; border-left: 1px solid var(--hairline); }
}
.facts dt {
  font-family: var(--display); font-size: 11.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.facts dd {
  margin: 0; font-family: var(--display); font-size: 17px; font-weight: 700;
  color: var(--navy); line-height: 1.3;
}
.facts__lead { font-size: 14px; }
.checklist--tight { gap: 8px; }
.checklist--tight li { font-size: 14.5px; }
.checklist--tight li::before {
  content: ""; flex: none; width: 6px; height: 6px; margin-top: 8px;
  border-radius: 50%; background: var(--accent);
}

.split__where {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 16px; background: var(--pale); border-radius: 3px;
  font-size: 15px; line-height: 1.55; color: var(--text-2);
}

/* Formular */
.field__opt { font-weight: 400; color: var(--muted); font-family: var(--body); font-size: 12.5px; }
.field__hint {
  display: block; font-size: 13.5px; line-height: 1.5; color: var(--muted);
}
.field__hint > .icon { display: inline-block; vertical-align: -3px; margin-right: 7px; }
.field__hint a { text-decoration: underline; }
.field input[type="file"] {
  padding: 12px 16px; font-size: 14.5px; cursor: pointer;
}
.field input[type="file"]::file-selector-button {
  margin-right: 14px; padding: 8px 14px; cursor: pointer;
  background: var(--navy); color: #fff; border: 0; border-radius: 3px;
  font-family: var(--display); font-size: 13.5px; font-weight: 700;
}

/* Feste Anrufleiste auf dem Handy */
.callbar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 90;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: rgba(255,255,255,.16);
  border-top: 1px solid rgba(255,255,255,.12);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
@media (min-width: 1024px) { .callbar { display: none; } }
.callbar a {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 58px; font-family: var(--display); font-size: 16px; font-weight: 700;
}
.callbar__call { background: var(--accent); color: var(--navy); }
.callbar__wa { background: #25D366; color: #0b3d20; }
.callbar a:hover { color: inherit; }
/* Der Cookie-Hinweis darf die Leiste nicht verdecken */
@media (max-width: 1023px) { .cookie { bottom: 59px; } body { padding-bottom: 58px; } }

/* --- Warnband: die offene Entscheidung des Unfallkunden ---------------- */

.alert-band { background: #fff6e2; border-block: 1px solid #f0dfb4; }
.alert {
  display: grid; gap: 20px; padding-block: 28px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .alert { grid-template-columns: auto minmax(0, 1fr) auto; gap: 26px; align-items: center; padding-block: 34px; }
}
.alert__mark { display: flex; align-items: flex-start; }
.alert__body { display: flex; flex-direction: column; gap: 8px; }
.alert__body h2 {
  font-size: clamp(19px, 2.2vw, 25px); line-height: 1.25; color: var(--navy);
}
.alert__body p { font-size: 15.5px; line-height: 1.6; color: #4a4335; }
.alert__do { font-weight: 700; color: var(--navy) !important; }
.alert__act { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
@media (min-width: 900px) { .alert__act { align-items: center; text-align: center; } }
.alert__note { font-size: 13.5px; color: #6b6250; }

/* --- Hero: eine Hauptaktion ------------------------------------------- */

.btn-row--lead { align-items: stretch; }
.btn--lead {
  min-height: 66px; padding: 0 28px; gap: 14px; text-align: left;
  font-size: 18px;
}
.btn--lead span { display: flex; flex-direction: column; line-height: 1.15; }
.btn--lead small {
  font-family: var(--body); font-size: 12.5px; font-weight: 400;
  /* Auf --accent gemessen 3,71:1 bei 12,5 px. Deckend: 5,77:1. */
  color: var(--navy); margin-top: 3px;
}
.btn--lead small b { font-weight: 700; }

.hero__alt { margin-top: -2px; }
.hero__alt a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px;
  color: rgba(255,255,255,.72); font-size: 15px; text-decoration: underline;
  text-underline-offset: 4px;
}
.hero__alt a:hover { color: #fff; }

.hero__trust--claims li { align-items: flex-start; }
.hero__trust--claims .icon { margin-top: 3px; }
@media (min-width: 768px) {
  .hero__trust--claims { flex-direction: column; gap: 10px; }
}

/* Umschalter sitzt jetzt oben, also ohne Trennlinie */
.hero__switch { padding-top: 0; margin-top: 0; border-top: 0; }

/* --- Fall-Aufschluesselung -------------------------------------------- */

.case__split {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px; margin: 4px 0 0; padding: 14px 0 0;
  border-top: 1px solid var(--hairline);
}
.case__split > div { display: flex; flex-direction: column; gap: 2px; }
.case__split dt { font-size: 12.5px; color: var(--muted); }
.case__split dd {
  margin: 0; font-family: var(--display); font-size: 15px; font-weight: 700;
  color: var(--navy); font-variant-numeric: tabular-nums;
}

/* --- Sprungleiste auf der Leistungsseite ------------------------------ */

.jumpnav {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding-block: 16px;
}
.jumpnav a {
  display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px; color: #fff;
  font-family: var(--display); font-size: 14.5px; font-weight: 600;
  transition: border-color .2s ease, background-color .2s ease;
}
.jumpnav a:hover { color: #fff; border-color: var(--accent); background: rgba(74,144,255,.16); }

/* --- Kontaktseite: Anrufkarte mobil zuerst ---------------------------- */

@media (max-width: 1023px) {
  .split--top { display: flex; flex-direction: column; }
  .contact-side { order: -1; }
  .contact-side .contact-list { order: 2; }
}
.next-steps {
  display: flex; flex-direction: column; gap: 10px;
  margin: 0; padding: 16px 18px; list-style: none;
  background: var(--ivory); border-radius: 3px; counter-reset: ns;
}
.next-steps li {
  display: flex; align-items: flex-start; gap: 10px; counter-increment: ns;
  font-size: 14.5px; line-height: 1.5; color: var(--text-2);
}
.next-steps li::before {
  content: counter(ns); flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; margin-top: 1px; border-radius: 50%;
  background: var(--navy); color: #fff;
  font-family: var(--display); font-size: 11.5px; font-weight: 700;
}

/* Erreichbarkeit in Kopfzeile und Anrufleiste */
.nav__hours { display: none; }
@media (min-width: 1280px) {
  .nav__call { flex-direction: column; align-items: flex-start; gap: 0; height: auto; }
  .nav__call .icon { display: none; }
  .nav__call-text { line-height: 1.15; }
  .nav__hours {
    display: block; font-size: 11.5px; font-weight: 400; letter-spacing: 0;
    color: rgba(255,255,255,.55); line-height: 1.3; white-space: nowrap;
  }
}
.callbar__hours {
  grid-column: 1 / -1; padding: 7px 12px; text-align: center;
  background: var(--navy); color: rgba(255,255,255,.72); font-size: 12px;
}
@media (max-width: 1023px) { body { padding-bottom: 88px; } .cookie { bottom: 89px; } }

/* --- Scrollbalken ---------------------------------------------------- */

/* Firefox und alles, was den Standard kennt */
html { scrollbar-width: thin; scrollbar-color: #b9c1d4 var(--pale); }

/* Chromium / WebKit */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--pale); }
::-webkit-scrollbar-thumb {
  background: #b9c1d4;
  border: 3px solid var(--pale);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: var(--navy); }
::-webkit-scrollbar-thumb:active { background: var(--accent-ink); }
::-webkit-scrollbar-corner { background: var(--pale); }

/* Auf dunklem Grund — mobiles Menü, dunkle Abschnitte mit Überlauf */
.nav__drawer, .section--navy { scrollbar-color: rgba(255,255,255,.28) rgba(255,255,255,.06); }
.nav__drawer::-webkit-scrollbar-track,
.section--navy::-webkit-scrollbar-track { background: rgba(255,255,255,.06); }
.nav__drawer::-webkit-scrollbar-thumb,
.section--navy::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.28);
  border: 3px solid transparent;
  background-clip: padding-box;
}
.nav__drawer::-webkit-scrollbar-thumb:hover,
.section--navy::-webkit-scrollbar-thumb:hover { background: var(--accent); background-clip: padding-box; }

/* Textfelder erben sonst die helle Spur auf hellem Grund */
textarea { scrollbar-width: thin; scrollbar-color: #b9c1d4 transparent; }
textarea::-webkit-scrollbar-track { background: transparent; }
textarea::-webkit-scrollbar-thumb { border-color: var(--ivory); }

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

/* Ohne Obergrenze zog sich der Inhalt auf breiten Monitoren ueber die volle
   Breite. Der Hero wirkte dadurch als leere blaue Flaeche mit einem schmalen
   Bild am Rand, und die Zeilenlaengen wurden unlesbar lang. */
.wrap { padding-inline: var(--pad); max-width: 1680px; margin-inline: auto; }

.section { padding-block: 52px; }
@media (min-width: 768px)  { .section { padding-block: 72px; } }
@media (min-width: 1200px) { .section { padding-block: 96px; } }

.section--ivory { background: var(--ivory); }
.section--pale  { background: var(--pale); }
.section--navy  { background: var(--navy); color: #fff; }
.section--navy.section--first { padding-top: var(--nav-h); }
.section--navy h2, .section--navy h3 { color: #fff; }
.section--navy p { color: rgba(255,255,255,.66); }

.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--gap, 18px); }

.section-head {
  display: flex; flex-direction: column; gap: 16px;
  margin-bottom: 32px; max-width: 660px;
}
@media (min-width: 1024px) {
  .section-head { margin-bottom: 48px; }
  .section-head--split {
    flex-direction: row; align-items: flex-end; justify-content: space-between;
    gap: 60px; max-width: none;
  }
  .section-head--split h2 { max-width: 620px; }
  .section-head--split .section-head__aside { max-width: 320px; padding-bottom: 6px; }
}

h1 { font-size: clamp(36px, 6.4vw, 72px); line-height: 1.02; }
h2 { font-size: clamp(28px, 4.4vw, 44px); line-height: 1.12; }
h3 { font-size: clamp(19px, 1.8vw, 24px); line-height: 1.25; font-weight: 700; }

.lead { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.62; }

/* --- Buttons --------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 26px; border-radius: 3px; border: 1px solid transparent;
  font-family: var(--display); font-size: 16px; font-weight: 700;
  cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
@media (min-width: 768px) { .btn { min-height: 58px; padding: 0 30px; font-size: 17px; } }

.btn--accent { background: var(--accent); color: var(--navy); }
.btn--accent:hover { background: #6aa4ff; color: var(--navy); }
.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: #16204f; color: #fff; }
/* Die beiden Geister-Knoepfe haben keinen eigenen Grund. Als <button> waere
   das der graue Standardgrund des Browsers, also ausdruecklich nichts. */
.btn--ghost-light { background: none; border-color: rgba(255,255,255,.26); color: #fff; font-weight: 600; }
.btn--ghost-light:hover { border-color: rgba(255,255,255,.55); color: #fff; }
.btn--ghost-dark { background: none; border-color: var(--navy); color: var(--navy); }
.btn--ghost-dark:hover { background: var(--navy); color: #fff; }
.btn--sm { min-height: 46px; padding: 0 22px; font-size: 15px; }

.btn-row { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 560px) { .btn-row { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px; } }

.icon { flex: none; }

.arrow-link {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px;
  font-family: var(--display); font-size: 15px; font-weight: 700; color: var(--accent-ink);
}
/* Auf dunklem Grund ist --accent-ink (#2c2cc0) praktisch unlesbar. */
.section--navy .arrow-link, .page-head .arrow-link { color: var(--accent); }

/* --- Navigation ------------------------------------------------------ */

/* Leichte Leiste: über dem Hero transparent, beim Scrollen nur angedeutet. */
.site-header {
  position: fixed; inset-inline: 0; top: 0; z-index: 100;
  background: transparent;
  transition: background-color .22s ease, border-color .22s ease;
  border-bottom: 1px solid transparent;
}
/* Deckend, nicht milchig. Bei rgba(...,.82) blieben dunkle Ueberschriften aus
   den hellen Abschnitten beim Vorbeiscrollen als Schatten in der Leiste
   lesbar, was wie ein Uebereinanderliegen aussah; der Weichzeichner verwischt
   die Buchstaben nur, er entfernt sie nicht. Deckend garantiert ausserdem den
   Kontrast der Navigationslinks, egal was gerade darunter durchlaeuft. */
.site-header[data-scrolled="true"] {
  background: var(--navy);
  border-bottom-color: rgba(255,255,255,.10);
}

/* Drei Spalten: die Mitte sitzt auf der Seitenmitte, unabhängig davon,
   wie breit Logo und Aktionen sind. */
.nav {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 16px; min-height: var(--nav-h);
}
@media (min-width: 1024px) { .nav { grid-template-columns: 1fr auto 1fr; } }

/* Das Signet allein ist eine duenne blaue Kontur auf dunkelblauem Grund und
   verschwindet praktisch. Der Name steht deshalb daneben. Das Bild traegt
   dadurch keine Bedeutung mehr und ist als dekorativ ausgezeichnet; die
   Beschriftung des Links liegt ohnehin am aria-label. */
.nav__logo {
  display: flex; align-items: center; gap: 10px; justify-self: start;
  color: #fff; text-decoration: none;
}
.nav__logo img { height: 26px; width: auto; flex: none; }
@media (min-width: 768px) { .nav__logo img { height: 32px; } }

.nav__logo-name {
  display: none;
  font-family: var(--display); font-weight: 800;
  font-size: 15px; line-height: 1.05; letter-spacing: -.01em;
  text-transform: uppercase;
}
/* "Gutachter" ist das Wort, um das es geht, und bekommt die Akzentfarbe. */
.nav__logo-name > span { color: var(--accent); }
@media (min-width: 560px) { .nav__logo-name { display: block; } }
@media (min-width: 1200px) { .nav__logo-name { font-size: 17px; } }
.nav__logo:hover .nav__logo-name { color: #fff; }

.nav__actions { display: flex; align-items: center; gap: 8px; justify-self: end; }
@media (min-width: 1024px) { .nav__actions { gap: 14px; } }

.nav__call {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; background: var(--accent); border-radius: 3px;
}
.nav__call-text { display: none; }
@media (min-width: 1024px) {
  .nav__call {
    width: auto; height: 44px; padding: 0 4px; gap: 9px; background: none;
    color: #fff; font-weight: 700; font-size: 15px;
  }
  .nav__call .icon { color: var(--accent) !important; }
  .nav__call:hover .icon { color: #fff !important; }
  .nav__call-text { display: inline; }
  .nav__call:hover { color: #fff; }
}

.nav__burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 10px;
  background: none; border: 0; cursor: pointer;
}
.nav__burger span { display: block; height: 2px; background: #fff; border-radius: 2px; }
@media (min-width: 1024px) { .nav__burger { display: none; } }

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

.nav__menu { display: none; }
@media (min-width: 1024px) {
  .nav__menu {
    display: flex; align-items: center; gap: 30px;
    justify-self: center; justify-content: center;
  }
  .nav__menu a {
    display: inline-flex; align-items: center; height: 44px;
    color: rgba(255,255,255,.82); font-size: 15px; white-space: nowrap;
  }
  .nav__menu a:hover { color: #fff; }
  .nav__menu a[aria-current="page"] { color: #fff; font-weight: 700; }
}

/* Mobiles Menü — hängt an der festen Kopfzeile */
.nav__drawer {
  display: none;
  background: rgba(12, 19, 56, .97);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-top: 1px solid rgba(255,255,255,.10);
  max-height: calc(100vh - var(--nav-h)); overflow-y: auto;
}
.nav__drawer[data-open="true"] { display: block; }
@media (min-width: 1024px) { .nav__drawer { display: none !important; } }

.nav__drawer ul { list-style: none; margin: 0; padding: 8px 0 4px; }
.nav__drawer a {
  display: flex; align-items: center; min-height: 52px;
  color: rgba(255,255,255,.85); font-family: var(--display); font-size: 17px; font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav__drawer a:hover { color: #fff; }
.nav__drawer .btn { width: 100%; margin: 16px 0 20px; }
/* Ohne diese Zeile erbt der Knopf rgba(255,255,255,.85) von .nav__drawer a
   und steht damit mit 2,68:1 auf --accent. Deckendes Navy: 5,77:1. */
.nav__drawer .btn--accent { color: var(--navy); }

/* --- Sprachwahl (SVG-Flaggen, keine Emoji) --------------------------- */

.lang { position: relative; }
.lang__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 44px; padding: 0 10px;
  background: none; border: 1px solid rgba(255,255,255,.26); border-radius: 3px;
  color: #fff; font-family: var(--display); font-size: 13px; font-weight: 700;
  letter-spacing: .04em; cursor: pointer;
}
.lang__btn:hover { border-color: rgba(255,255,255,.5); }
.lang__btn svg.chev { transition: transform .18s ease; }
.lang__btn[aria-expanded="true"] svg.chev { transform: rotate(180deg); }

.flag { display: block; width: 20px; height: 14px; border-radius: 2px; flex: none; }

.lang__list {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 120;
  min-width: 176px; padding: 6px;
  background: #fff; border: 1px solid var(--hairline); border-radius: 6px;
  box-shadow: 0 18px 44px rgba(8,13,38,.28);
  list-style: none; margin: 0;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.lang[data-open="true"] .lang__list { opacity: 1; visibility: visible; transform: translateY(0); }
.lang__list button {
  display: flex; align-items: center; gap: 11px; width: 100%; min-height: 44px;
  padding: 0 12px; background: none; border: 0; border-radius: 4px; cursor: pointer;
  font-family: var(--body); font-size: 15px; color: var(--text); text-align: left;
}
.lang__list button:hover { background: var(--ivory); }
.lang__list button[aria-current="true"] { background: var(--pale); font-weight: 700; }

/* --- Hero ------------------------------------------------------------ */

.hero { background: var(--navy); padding-top: var(--nav-h); }
.hero__grid { display: grid; gap: 32px; padding-block: 36px 0; }
@media (min-width: 1024px) {
  .hero__grid {
    grid-template-columns: 1fr 0.86fr;
    gap: 56px; align-items: center; padding-block: 56px 76px;
  }
}
.hero__copy { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 768px) { .hero__copy { gap: 30px; } }
.hero__copy h1 { color: #fff; }
.hero__copy .lead { color: rgba(255,255,255,.74); max-width: 560px; font-size: clamp(16px, 1.5vw, 20px); }

.hero__trust {
  display: flex; flex-direction: column; gap: 12px;
  padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12);
  list-style: none; margin: 0;
}
@media (min-width: 768px) { .hero__trust { flex-direction: row; flex-wrap: wrap; gap: 12px 28px; } }
.hero__trust li { display: flex; align-items: center; gap: 9px; font-size: 14px; color: rgba(255,255,255,.80); }

.hero__media { position: relative; margin-inline: calc(var(--pad) * -1); }
@media (max-width: 1023px) { .hero__media img { aspect-ratio: 4 / 3; object-position: 50% 28%; } }
@media (min-width: 1024px) { .hero__media { margin-inline: 0; } }
.hero__media img {
  width: 100%; aspect-ratio: 3 / 4; height: auto; object-fit: cover; object-position: 50% 35%;
}
/* Das Bild war fest auf 460px gedeckelt. Auf breiten Bildschirmen blieb davon
   ein schmaler Streifen neben einer grossen blauen Flaeche uebrig. Jetzt waechst
   es mit und liegt quer statt hochkant: quer gewinnt es Flaeche, ohne den Hero
   in die Laenge zu ziehen. Eine fruehere Fassung liess es ueber align-items:
   stretch die volle Zeilenhoehe fuellen, das riss aber unter der kuerzeren
   Textspalte ein grosses Loch. */
@media (min-width: 1024px) {
  .hero__media { max-width: 620px; justify-self: end; }
  .hero__media img { border-radius: 4px; object-position: 50% 32%; aspect-ratio: 5 / 4; }
}
@media (min-width: 1440px) {
  .hero__media { max-width: 720px; }
  .hero__media img { aspect-ratio: 4 / 3; }
}

.hero__badge {
  position: absolute; left: var(--pad); bottom: 18px;
  background: #fff; padding: 14px 18px; border-radius: 3px;
  box-shadow: 0 12px 32px rgba(0,0,0,.28);
  display: flex; flex-direction: column; gap: 4px;
}
@media (min-width: 1024px) {
  .hero__badge { left: -36px; bottom: -36px; width: 260px; padding: 24px 26px; border-radius: 4px; }
}
.hero__badge b { font-family: var(--display); font-size: 26px; font-weight: 800; color: var(--navy); line-height: 1.05; }
@media (min-width: 1024px) { .hero__badge b { font-size: 42px; } }

.label {
  font-family: var(--display); font-size: 11.5px; font-weight: 700;
  letter-spacing: .13em; color: var(--muted); text-transform: uppercase;
}
.label--light { color: rgba(255,255,255,.50); }
.label--accent { color: var(--accent); }

/* Bis 1024 px war der Zusatz display:none und damit auch fuer Screenreader
   weg; die Kachel las sich als blosses "10 Jahre". Jetzt nur optisch weg. */
.hero__badge .hint {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
@media (min-width: 1024px) {
  .hero__badge .hint {
    position: static; width: auto; height: auto; overflow: visible;
    clip: auto; clip-path: none; white-space: normal;
    display: block; font-size: 13px; line-height: 1.5; color: var(--muted);
    padding-top: 12px; margin-top: 6px; border-top: 1px solid var(--hairline);
  }
}


/* --- Hero-Ablaufstreifen --------------------------------------------- */

.hero__stages {
  display: grid; grid-template-columns: 1fr; gap: 2px 24px;
  list-style: none; margin: 22px 0 0; padding: 20px 0 0;
  counter-reset: st; border-top: 1px solid rgba(255,255,255,.12);
}
@media (min-width: 560px) { .hero__stages { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .hero__stages {
  display: grid; grid-template-columns: 1fr; gap: 2px 24px;
  list-style: none; margin: 22px 0 0; padding: 20px 0 0;
  counter-reset: st; border-top: 1px solid rgba(255,255,255,.12);
}
@media (min-width: 560px) { .hero__stages { grid-template-columns: repeat(2, minmax(0, 1fr)); } } }
.hero__stages li {
  display: flex; align-items: center; gap: 11px; counter-increment: st;
  padding-block: 9px; font-size: 14.5px; line-height: 1.4; color: rgba(255,255,255,.80);
}
.hero__stages li::before {
  content: counter(st); flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  /* Der Kreis hellte den Grund so weit auf, dass die Ziffer in --accent
     nur noch 4,41:1 erreichte. Mit .06 sind es 4,99:1. */
  background: rgba(255,255,255,.06); color: var(--accent);
  font-family: var(--display); font-size: 12px; font-weight: 700;
}

.cta__quiet { color: var(--muted); }

.split__copy .label { margin-bottom: -6px; }
.section--navy .section-head p { max-width: 640px; }

/* --- Karten-Raster --------------------------------------------------- */

.grid { display: grid; gap: 16px; }
@media (min-width: 768px)  { .grid { gap: 24px; } }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
@media (min-width: 768px)  { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.card {
  display: flex; flex-direction: column; gap: 16px;
  background: #fff; padding: 26px 22px; border: 1px solid var(--hairline); border-radius: 4px;
}
@media (min-width: 768px) { .card { padding: 34px 30px; gap: 18px; } }
.card p { font-size: 15.5px; line-height: 1.68; color: var(--muted); }
.card__icon {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; background: var(--pale); border-radius: 3px; flex: none;
}
@media (min-width: 768px) { .card__icon { width: 52px; height: 52px; } }
.card hr { height: 1px; background: var(--hairline); border: 0; margin: 2px 0 0; }
.card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.card ul li { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; line-height: 1.5; }

/* --- Ablauf ---------------------------------------------------------- */

.steps { display: grid; gap: 22px; list-style: none; margin: 0; padding: 0; }
@media (min-width: 768px)  { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } }
@media (min-width: 1200px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.steps li {
  display: flex; flex-direction: column; gap: 12px;
  padding: 20px 16px 18px 0; border-top: 2px solid rgba(255,255,255,.18);
  transition: border-color .3s ease, background-color .3s ease, transform .3s cubic-bezier(.22,.61,.36,1);
}
.steps li .label, .steps li h3, .steps li p { transition: color .3s ease; }
.steps li:first-child { border-top-color: var(--accent); }
.steps li:first-child .label { color: var(--accent); }
.steps li:hover {
  border-top-color: var(--accent);
  background: linear-gradient(180deg, rgba(74,144,255,.10), rgba(74,144,255,0) 70%);
  transform: translateY(-3px);
}
.steps li:hover .label { color: var(--accent); }
.steps li:hover p { color: rgba(255,255,255,.86); }
.steps h3 { font-size: 20px; }
.steps p { font-size: 15px; line-height: 1.62; }

/* --- Fälle ----------------------------------------------------------- */

.case { display: flex; flex-direction: column; border: 1px solid var(--hairline); border-radius: 4px; overflow: hidden; }
.case img { width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; }
.case__body { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 24px; }
@media (min-width: 768px) { .case__body { padding: 28px 30px 30px; gap: 12px; } }
.case__body p { font-size: 15px; line-height: 1.6; color: var(--muted); }
.case__sum {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-top: 12px; margin-top: 2px; border-top: 1px solid var(--hairline);
}
.case__sum b { font-family: var(--display); font-size: clamp(24px, 2.6vw, 34px); font-weight: 800; color: var(--navy); }

.case-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--ivory); padding: 20px; border-radius: 4px;
}
@media (min-width: 768px) { .case-row { padding: 26px 30px; gap: 24px; } }
.case-row h3 { font-size: 17px; }
@media (min-width: 768px) { .case-row h3 { font-size: 19px; } }
.case-row p { font-size: 14px; line-height: 1.5; color: var(--muted); }
.case-row b {
  font-family: var(--display); font-size: clamp(18px, 2vw, 26px); font-weight: 800;
  color: var(--navy); white-space: nowrap;
}

.media { width: 100%; height: auto; object-fit: cover; border-radius: 4px; display: block; }
.media--portrait  { aspect-ratio: 3 / 4; }
.media--landscape { aspect-ratio: 3 / 2; }
@media (min-width: 1024px) { .split .media--portrait { max-width: 480px; } }

/* --- Zwei-Spalter ---------------------------------------------------- */

.split { display: grid; gap: 32px; }
@media (min-width: 1024px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px; align-items: center; }
  .split > .media { justify-self: end; }
  .split--media-first > .media { justify-self: start; }
  .split--top { align-items: start; }
  .split--media-first > *:first-child { order: -1; }
}
.split__copy { display: flex; flex-direction: column; gap: 20px; }
.split__copy p { font-size: 16.5px; line-height: 1.68; color: var(--text-2); }
@media (min-width: 768px) { .split__copy p { font-size: 17px; } }

/* --- FAQ ------------------------------------------------------------- */

.faq { background: #fff; border-radius: 4px; overflow: hidden; }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq details:last-of-type { border-bottom: 0; }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 60px; padding: 16px 22px; cursor: pointer; list-style: none;
  font-family: var(--display); font-size: 16px; font-weight: 700; color: var(--navy);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 12px; height: 12px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s ease;
}
.faq details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.faq details p { padding: 0 22px 20px; font-size: 15px; line-height: 1.62; color: var(--muted); }
/* Die Linkfarbe unterscheidet sich vom umgebenden Text nur um 1,54:1. Ohne
   Unterstreichung waere die Farbe das einzige Merkmal (WCAG 1.4.1). */
.faq details p a, .facts__note a { text-decoration: underline; }
.faq__more {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; padding: 0 22px; background: var(--ivory);
  font-family: var(--display); font-size: 15px; font-weight: 700;
}


/* --- Bildcollage Über uns -------------------------------------------- */

.collage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 768px)  { .collage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 1024px) { .collage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
.collage img { width: 100%; aspect-ratio: 3 / 4; height: auto; object-fit: cover; border-radius: 4px; }

/* Ankersprünge unter der klebenden Kopfzeile ausrichten: das erledigt jetzt
   scroll-padding-top am html-Element, das zugleich den Tastaturfokus vor der
   Leiste schützt. Beides zusammen ergab den doppelten Abstand (gemessen
   204 px statt 100 px bei 88 px hoher Leiste), deshalb steht hier nichts
   mehr. */

/* --- Standorte ------------------------------------------------------- */

.places { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; }
@media (min-width: 768px)  { .places { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
.places a {
  display: flex; align-items: center; gap: 11px; min-height: 52px; padding: 0 14px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 3px;
  color: #fff; font-family: var(--display); font-size: 15px; font-weight: 600;
}
@media (min-width: 768px) { .places a { min-height: 64px; padding: 0 24px; font-size: 17px; } }
.places a:hover { background: rgba(255,255,255,.10); color: #fff; }

/* --- Bewertungen ----------------------------------------------------- */

.rating {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px;
  background: #fff; border: 1px solid var(--hairline); border-radius: 3px;
  font-size: 14px; color: var(--muted);
}
.stars { display: flex; gap: 3px; }
.review { display: flex; flex-direction: column; gap: 14px; background: #fff; padding: 26px 22px; border: 1px solid var(--hairline); border-radius: 4px; }
@media (min-width: 768px) { .review { padding: 32px 30px; gap: 18px; } }
.review blockquote { margin: 0; font-size: 15.5px; line-height: 1.68; color: var(--text-2); }
.review figcaption { display: flex; flex-direction: column; gap: 2px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.review figcaption b { font-family: var(--display); font-size: 15px; font-weight: 700; color: var(--navy); }
.review figcaption span { font-size: 13px; color: var(--muted); }
.placeholder { color: #8a6a00; background: #fff4d6; box-shadow: inset 0 -1px 0 var(--star);
  padding: 0 4px; border-radius: 2px; }
.hero__promise b.placeholder, .form-promise b.placeholder { color: #6b5200; }

/* --- Abschluss-CTA --------------------------------------------------- */

.cta { background: var(--pale); border-top: 1px solid #dbe3ee; }
.cta__inner { display: flex; flex-direction: column; gap: 22px; padding-block: 44px; }
@media (min-width: 1024px) {
  .cta__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 60px; padding-block: 72px; }
}
.cta h2 { color: var(--navy); }
.cta p { font-size: 17px; line-height: 1.6; color: var(--text-2); }
.cta .btn-row { flex: none; }

/* --- Formular -------------------------------------------------------- */

.form-card { display: flex; flex-direction: column; gap: 22px; background: #fff; color: var(--text); padding: 28px 22px; border-radius: 4px; }
.form-card h1 { color: var(--navy); }
@media (min-width: 768px) { .form-card { padding: 44px; gap: 26px; } }
.form-card h1 { font-size: clamp(28px, 4vw, 40px); }
.form-card > hr { height: 1px; background: var(--hairline); border: 0; margin: 0; }

.field-row { display: grid; gap: 18px; }
@media (min-width: 640px) { .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.field { display: flex; flex-direction: column; gap: 8px; }
.field > label { font-family: var(--display); font-size: 13px; font-weight: 700; color: var(--text); }
.field input, .field textarea, .field select {
  width: 100%; min-height: 52px; padding: 14px 16px;
  background: var(--ivory); border: 1px solid var(--field); border-radius: 3px;
  font-family: var(--body); font-size: 16px; color: var(--text);
}
.field textarea { min-height: 132px; resize: vertical; line-height: 1.6; }
.field select { appearance: none; cursor: pointer; padding-right: 44px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235c6178' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; }
/* Platzhalter ist Text und faellt unter 1.4.3. #9aa0b4 mass 2,45:1 auf dem
   Feldgrund, #6b7185 misst 4,57:1 und bleibt deutlich heller als der Wert. */
.field input::placeholder, .field textarea::placeholder { color: #6b7185; }

.consent { display: flex; align-items: flex-start; gap: 12px; }
.consent input { width: 20px; height: 20px; margin: 3px 0 0; flex: none; accent-color: var(--accent-ink); }
.consent label { font-size: 14px; line-height: 1.6; color: var(--muted); }
.consent label a { text-decoration: underline; }

.honeypot { position: absolute !important; left: -9999px !important; }

.form-note { font-size: 14px; color: var(--muted); }
.form-status { padding: 14px 18px; border-radius: 3px; font-size: 15px; }
.form-status--ok { background: #e9f7ef; color: #17603a; }
.form-status--err { background: #fdecec; color: #a11a1a; }

/* --- Kontaktwege ----------------------------------------------------- */

.contact-side { display: flex; flex-direction: column; gap: 22px; }
.contact-side > p { color: rgba(255,255,255,.76); font-size: 17px; line-height: 1.66; }

.call-card {
  display: flex; align-items: center; gap: 18px;
  padding: 20px 22px; background: var(--accent); border-radius: 4px;
}
.call-card b { font-family: var(--display); font-size: clamp(21px, 3vw, 26px); font-weight: 800; color: var(--navy); }
/* Auf --accent gemessen 3,25:1 bei 11,5 px. Mit .9: 5,05:1. */
.call-card .label { color: rgba(12,19,56,.9); }

.contact-list {
  display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 4px;
}
.contact-list li + li { border-top: 1px solid rgba(255,255,255,.10); }
.contact-list li > * { display: flex; align-items: flex-start; gap: 16px; padding: 20px 22px; }
.contact-list a { color: #fff; }
.contact-list a:hover { color: #fff; background: rgba(255,255,255,.04); }
.contact-list .contact-list__text { display: flex; flex-direction: column; gap: 4px; padding: 0; }
.contact-list .contact-list__text span:last-child { font-size: 16px; line-height: 1.55; color: #fff; }

/* --- Karte mit Einwilligung ------------------------------------------ */

.map-consent {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; min-height: 320px; padding: 32px 22px; text-align: center;
  background: var(--pale); border: 1px solid var(--field); border-radius: 4px;
}
@media (min-width: 768px) { .map-consent { min-height: 420px; padding: 40px; } }
.map-consent p { font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 420px; }
.map-frame { width: 100%; min-height: 320px; border: 0; border-radius: 4px; }
@media (min-width: 768px) { .map-frame { min-height: 420px; } }

/* --- Footer ---------------------------------------------------------- */

.site-footer { background: var(--navy-deep); color: rgba(255,255,255,.78); }
.site-footer a { color: rgba(255,255,255,.78); }
.site-footer a:hover { color: #fff; }

.footer__grid { display: grid; gap: 32px; padding-block: 44px; }
@media (min-width: 768px)  { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; padding-block: 64px; } }
@media (min-width: 1200px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 56px; } }

.footer__brand { display: flex; flex-direction: column; gap: 18px; }
.footer__brand img { height: 32px; width: auto; align-self: flex-start; }
.footer__brand p { font-size: 15px; line-height: 1.68; color: rgba(255,255,255,.55); max-width: 320px; }

.footer__col { display: flex; flex-direction: column; gap: 10px; }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.footer__col a, .footer__col p { display: flex; align-items: center; min-height: 44px; font-size: 15px; }
.footer__col address { font-style: normal; font-size: 15px; line-height: 1.62; padding-block: 10px; }

.footer__legal {
  display: flex; flex-direction: column; gap: 4px;
  padding-block: 16px; border-top: 1px solid rgba(255,255,255,.10);
}
@media (min-width: 768px) {
  .footer__legal { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; padding-block: 24px; }
}
/* Gegen --navy-deep gemessen 4,49:1, also knapp unter 4,5. Mit .55: 6,20:1. */
.footer__legal small { font-size: 14px; color: rgba(255,255,255,.55); padding-block: 10px; }
.footer__legal ul { display: flex; flex-wrap: wrap; gap: 6px 24px; list-style: none; margin: 0; padding: 0; }
.footer__legal a, .footer__legal button {
  display: inline-flex; align-items: center; min-height: 44px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--body); font-size: 14px; color: rgba(255,255,255,.55);
}
.footer__legal a:hover, .footer__legal button:hover { color: #fff; }

/* --- Seitenkopf Unterseiten ------------------------------------------ */

.page-head { background: var(--navy); padding-top: var(--nav-h); }
.page-head__inner { display: grid; gap: 24px; padding-block: 40px 52px; }
@media (min-width: 1024px) {
  .page-head__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px; align-items: end; padding-block: 72px 76px; }
}
.page-head h1 { color: #fff; font-size: clamp(32px, 5.2vw, 58px); }
.page-head p { color: rgba(255,255,255,.72); font-size: clamp(16px, 1.6vw, 18px); line-height: 1.68; max-width: 520px; }

.crumbs { display: flex; align-items: center; gap: 9px; font-size: 13px; color: rgba(255,255,255,.55); }
.crumbs a { color: rgba(255,255,255,.55); display: inline-flex; align-items: center; min-height: 32px; }
.crumbs a:hover { color: #fff; }
.crumbs [aria-current] { color: rgba(255,255,255,.85); }

.checklist { display: grid; gap: 12px; list-style: none; margin: 0; padding: 0; }
@media (min-width: 560px) { .checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
.checklist li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.5; }

.metrics { display: flex; align-items: center; gap: 22px; padding-top: 20px; border-top: 1px solid var(--hairline); }
.metrics div { display: flex; flex-direction: column; gap: 2px; }
.metrics b { font-family: var(--display); font-size: 24px; font-weight: 800; color: var(--navy); }
.metrics span { font-size: 14px; color: var(--muted); }
.metrics hr { width: 1px; height: 44px; background: var(--hairline); border: 0; margin: 0; }

.spec-list { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; background: #fff; border-radius: 4px; overflow: hidden; }
.spec-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 22px; font-size: 15.5px;
}
.spec-list li + li { border-top: 1px solid var(--hairline); }
.spec-list .label { flex: none; }

.numbered { display: flex; flex-direction: column; gap: 14px; list-style: none; margin: 0; padding: 0; counter-reset: n; }
.numbered li { display: flex; align-items: flex-start; gap: 12px; counter-increment: n; }
.numbered li::before {
  content: "0" counter(n); flex: none; padding-top: 2px;
  font-family: var(--display); font-size: 13px; font-weight: 700; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.numbered b { display: block; font-family: var(--display); font-size: 16px; font-weight: 700; color: var(--navy); }
.numbered span { font-size: 15px; line-height: 1.55; color: var(--muted); }

.notice {
  display: flex; align-items: flex-start; gap: 18px;
  padding-block: 32px;
}
@media (min-width: 768px) { .notice { align-items: center; gap: 26px; padding-block: 40px; } }
.notice p { font-size: 16px; line-height: 1.6; }
@media (min-width: 768px) { .notice p { font-size: 17px; } }

/* --- Cookie-Banner --------------------------------------------------- */

.cookie {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 150;
  background: #fff; border-top: 1px solid var(--hairline);
  box-shadow: 0 -2px 24px rgba(0,0,0,.14);
  /* Ohne visibility bleibt der geschlossene Hinweis in der Tabreihenfolge:
     zwei unsichtbare Knoepfe am Ende jeder Seite (WCAG 2.4.3, 2.4.7). */
  visibility: hidden;
  transform: translateY(110%);
  transition: transform .28s ease, visibility .28s;
}
.cookie[data-open="true"] { visibility: visible; transform: translateY(0); }
.cookie__inner {
  display: flex; flex-direction: column; gap: 16px; padding-block: 20px;
}
@media (min-width: 900px) {
  .cookie__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; }
}
.cookie p { font-size: 14px; line-height: 1.6; color: var(--muted); max-width: 640px; }
.cookie b { display: block; font-family: var(--display); font-size: 16px; color: var(--navy); margin-bottom: 4px; }
.cookie .btn-row { flex: none; }

/* --- Danke-Seite ------------------------------------------------------ */
.danke { display: flex; flex-direction: column; gap: 20px; max-width: 620px; padding-block: 20px 40px; }
.danke__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%; background: rgba(74,144,255,.14);
}
.danke h1 { color: #fff; }
.danke .lead { color: rgba(255,255,255,.78); }
.next-steps--light { background: rgba(255,255,255,.06); }
.next-steps--light li { color: rgba(255,255,255,.8); }
.next-steps--light li::before { background: var(--accent); color: var(--navy); }
.hero__fine { font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.55); }

/* --- Durchlauf 4 ------------------------------------------------------ */

/* Begriffserklaerung direkt am Posten */
.case__split { grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 620px) { .case__split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; } }
.case__split dt { font-weight: 700; color: var(--navy); font-size: 13.5px; }

.case__split dd { margin: 2px 0 0; font-family: var(--body); font-size: 13px; font-weight: 400; line-height: 1.45; color: var(--muted); }

/* Zeitangabe je Ablaufschritt */
.steps__when {
  display: inline-flex; align-self: flex-start; padding: 3px 9px;
  border-radius: 3px; font-family: var(--display); font-size: 12.5px; font-weight: 700;
}

/* Hinweise unter den Eckdaten */
.facts__note {
  font-size: 14px; line-height: 1.6; color: var(--muted);
}
.facts__lead { font-size: 15px; line-height: 1.55; color: var(--text-2); font-weight: 700; }

/* Nur-per-Mail-Wunsch */
.consent--contact label { color: var(--text-2); }

/* --- Durchlauf 5 ------------------------------------------------------ */

/* Drei gleichwertige Einstiege */
/* Die Karten sassen oben buendig am hellen Band darueber und hatten nur
   unten Luft. padding-block statt padding-bottom setzt beide Seiten gleich
   und nimmt den Rhythmus von .now auf. */
.paths-band { background: var(--navy); }
.paths { display: grid; gap: 12px; padding-block: 28px; }
@media (min-width: 900px) { .paths { padding-block: 32px; } }
@media (min-width: 800px) { .paths { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.path {
  position: relative; display: flex; flex-direction: column; gap: 3px;
  padding: 22px 52px 22px 22px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
  border-radius: 4px; color: #fff;
  transition: border-color .24s ease, background-color .24s ease, transform .24s cubic-bezier(.22,.61,.36,1);
}
.path:hover { color: #fff; border-color: var(--accent); background: rgba(74,144,255,.12); transform: translateY(-3px); }
.path .icon { position: absolute; right: 20px; top: 50%; margin-top: -8px; color: var(--accent); }
.path__when { font-size: 13px; color: rgba(255,255,255,.58); }
.path__title { font-family: var(--display); font-size: 20px; font-weight: 700; line-height: 1.2; }
.path__note { font-size: 13px; color: rgba(255,255,255,.58); }

/* Und wenn es nicht klappt */
.risk { display: grid; gap: 16px; }
@media (min-width: 800px) { .risk { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.risk__item {
  display: flex; flex-direction: column; gap: 10px;
  padding: 26px 24px; background: #fff;
  border: 1px solid var(--hairline); border-left: 3px solid var(--accent); border-radius: 4px;
}
.risk__item h3 { font-size: 18px; }
.risk__item p { font-size: 15px; line-height: 1.65; color: var(--muted); }

/* Wer kommt */
.person { display: flex; align-items: center; gap: 16px; padding-top: 20px; margin-top: 4px; border-top: 1px solid var(--hairline); }
.person img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; flex: none; }
.person span { display: flex; flex-direction: column; gap: 3px; font-size: 15px; line-height: 1.55; color: var(--muted); }
.person b { font-family: var(--display); font-size: 16px; font-weight: 700; color: var(--navy); }

/* Musterausschnitt */
.muster {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 130px; padding: 20px; border: 1px dashed var(--star); border-radius: 4px;
  font-size: 14px; line-height: 1.5;
}

/* Nur-per-Mail direkt unter dem Telefonfeld */
.field__hint--check { display: flex; align-items: center; gap: 9px; padding-top: 2px; }
.field__hint--check input { width: 17px; height: 17px; margin: 0; accent-color: var(--accent-ink); flex: none; }
.field__hint--check label { font-size: 13.5px; color: var(--muted); cursor: pointer; }

/* --- Durchlauf 6 ------------------------------------------------------ */

/* Was du jetzt tun solltest */
.now-band { background: var(--pale); border-bottom: 1px solid #dbe3ee; }
.now { display: flex; flex-direction: column; gap: 14px; padding-block: 28px; }
@media (min-width: 900px) {
  .now { flex-direction: row; align-items: flex-start; gap: 44px; padding-block: 32px; }
  .now h2 { flex: 0 0 230px; }
}
.now h2 { font-size: clamp(19px, 2.1vw, 24px); line-height: 1.25; color: var(--navy); }
.now ul {
  display: grid; gap: 10px 32px; list-style: none; margin: 0; padding: 0; flex: 1;
}
@media (min-width: 620px) { .now ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.now li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 15px; line-height: 1.55; color: var(--text-2);
}
.now li .icon { margin-top: 3px; }

/* Was wirklich bei dir landet */
.case__own {
  display: block; margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed var(--hairline);
  font-size: 13.5px; line-height: 1.5; color: var(--muted); width: 100%;
}
.case__sum { flex-wrap: wrap; }

/* Anfahrts- und Preisbeispiele */
.trips {
  display: flex; flex-direction: column;
  border: 1px solid var(--hairline); border-radius: 4px; background: #fff; overflow: hidden;
}
.trips .facts__lead { padding: 14px 18px 12px; margin: 0; border-bottom: 1px solid var(--hairline); }
.trips > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 12px 18px;
}
.trips > div + div { border-top: 1px solid var(--hairline); }
.trips span { font-size: 14.5px; line-height: 1.45; color: var(--text-2); }
.trips b {
  font-family: var(--display); font-size: 15px; font-weight: 700;
  color: var(--navy); white-space: nowrap;
}

.card--link { text-decoration: none; color: inherit; }
.card--link:hover { color: inherit; }
.card--link h3 { color: var(--navy); }

.case__lead { font-size: 13px; font-weight: 700; color: var(--muted); margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.case__split { border-top: 0; padding-top: 0; }

/* --- Kontaktformular als Ablauf --------------------------------------- */

/* Ohne JavaScript bleiben alle Schritte sichtbar, das Formular funktioniert. */
.wizard .step { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.wizard--aktiv .step[hidden] { display: none; }
.wizard__head { display: flex; flex-direction: column; gap: 18px; }

.wizard__steps {
  display: flex; gap: 0; list-style: none; margin: 0; padding: 0;
  counter-reset: ws; border-bottom: 1px solid var(--hairline);
}
.wizard__steps li {
  flex: 1; display: flex; align-items: center; gap: 8px;
  padding: 0 0 12px; counter-increment: ws;
  font-family: var(--display); font-size: 13.5px; font-weight: 600; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .24s ease, border-color .24s ease;
}
.wizard__steps li::before {
  content: counter(ws); flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ivory); color: var(--muted);
  font-size: 12px; font-weight: 700;
  transition: background-color .24s ease, color .24s ease;
}
.wizard__steps li[aria-current="step"] { color: var(--navy); border-bottom-color: var(--accent); }
.wizard__steps li[aria-current="step"]::before { background: var(--navy); color: #fff; }
.wizard__steps li.is-done { color: var(--accent-ink); }
.wizard__steps li.is-done::before { background: var(--accent); color: var(--navy); content: "✓"; }

.step__lead { font-family: var(--display); font-size: 16px; font-weight: 700; color: var(--navy); }

/* Auswahl im ersten Schritt */
.choices { display: flex; flex-direction: column; gap: 10px; }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice span {
  display: flex; flex-direction: column; gap: 4px;
  padding: 18px 20px; min-height: 62px;
  background: var(--ivory); border: 1px solid var(--field); border-radius: 4px;
  transition: border-color .2s ease, background-color .2s ease;
}
.choice b { font-family: var(--display); font-size: 16.5px; font-weight: 700; color: var(--navy); }
.choice small { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.choice:hover span { border-color: #b6bdcd; }
.choice input:checked + span { border-color: var(--accent); background: #f2f7ff; box-shadow: inset 0 0 0 1px var(--accent); }
/* Das Auswahlfeld selbst ist 0x0 gross; der Ring gehoert an die Karte.
   Navy statt --accent, das auf der weissen Karte nur 3,12:1 erreicht.
   Kein zweiter Ring per box-shadow: der wuerde die eingesetzte Markierung
   des gewaehlten Eintrags ueberschreiben, und die Karte steht ohnehin auf
   Weiss (18,0:1). */
.choice input:focus-visible + span { outline: 3px solid var(--navy); outline-offset: 2px; }

.wizard__nav { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 4px; }
.wizard__nav .form-note { margin-left: auto; }
.wizard__nav [hidden] { display: none !important; }

/* Die Formularkarte steht in einer dunklen Sektion, erbt aber deren
   Absatzfarbe. Hier explizit zuruecksetzen. */
.form-card p, .form-card li, .form-card label, .form-card small, .form-card span { color: inherit; }
.form-card .form-promise { color: var(--text-2); }
.form-card .form-promise b { color: var(--navy); }
.form-card .field__hint, .form-card .form-note, .form-card .field__opt,
.form-card .consent label, .form-card .choice small { color: var(--muted); }
.form-card .next-steps li { color: var(--text-2); }
.form-card .step__lead, .form-card .choice b { color: var(--navy); }
.form-card .field > label { color: var(--text); }

/* --- Ratgeberseiten ---------------------------------------------------
   Vier Antwortseiten (build_guides.py) nutzen das Layout der Rechtstexte
   (.legal). Dort fehlten bisher Tabelle, Begriffsliste und der Hinweis
   am Seitenende. */

.legal__sec .tablewrap { overflow-x: auto; margin: 0 0 18px; }
.legal__sec table {
  border-collapse: collapse; width: 100%; min-width: 380px;
  border: 1px solid var(--hairline); border-radius: 4px; background: #fff;
}
.legal__sec th, .legal__sec td {
  text-align: left; padding: 11px 14px; vertical-align: top;
  font-size: 15px; line-height: 1.55; color: var(--text-2);
  border-bottom: 1px solid var(--hairline);
}
.legal__sec th {
  font-family: var(--display); font-weight: 700; font-size: 13.5px;
  color: var(--navy); background: var(--ivory);
}
.legal__sec tbody tr:last-child td,
.legal__sec tbody tr:last-child th { border-bottom: 0; }
/* Zeilenkopf der Vergleichstabelle: technisch <th>, optisch wie der Rumpf. */
.legal__sec tbody th { background: #fff; font-size: 15px; }
.legal__sec table caption {
  caption-side: bottom; text-align: left; padding: 10px 2px 0;
  font-size: 13.5px; line-height: 1.5; color: var(--muted);
}

.legal__sec dl.terms { margin: 0 0 18px; }
.legal__sec dl.terms dt {
  font-family: var(--display); font-size: 16px; font-weight: 700;
  color: var(--navy); margin-top: 16px;
}
.legal__sec dl.terms dt:first-child { margin-top: 0; }
.legal__sec dl.terms dd {
  margin: 5px 0 0; font-size: 16px; line-height: 1.72; color: var(--text-2);
}

.legal__sec ol.numbers { margin: 0 0 16px; padding-left: 20px; }
.legal__sec ol.numbers li {
  font-size: 16px; line-height: 1.72; color: var(--text-2); margin-bottom: 8px;
}
.legal__sec .checklist { grid-template-columns: 1fr; margin-bottom: 16px; }
.legal__sec .checklist li { color: var(--text-2); }

.legal__body .hinweis {
  margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--hairline);
  font-size: 14px; line-height: 1.65; color: var(--muted);
}

/* Verweis von einer FAQ-Antwort auf die ausfuehrliche Ratgeberseite. */
.faq details p.faq__more { padding-top: 0; font-size: 14px; }
.faq details p.faq__more a { color: var(--accent-ink); text-decoration: underline; }

/* --- Bewertungen aus dem Google-Profil ------------------------------- */
/* Stehen fest im HTML, kein Drittanbieter-Skript, keine Einwilligung noetig. */
.reviews { display: flex; flex-direction: column; gap: 22px; }

.reviews__score { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }
.reviews__score b { font-family: var(--display); font-size: 30px; font-weight: 800; color: var(--navy); }
.reviews__score > span:last-child { color: var(--muted); font-size: 15px; }
.reviews__score a { color: var(--accent-ink); text-decoration: underline; }

/* --- Karussell, allgemein ------------------------------------ */
/* Unterbau ist eine Scroll-Snap-Bahn, kein Schieber aus JavaScript. Ohne
   Skript bleibt es eine wischbare Reihe, in der alle vier Faelle lesbar
   sind. Die Bedienleiste steht im Quelltext auf hidden und wird von
   js/site.js eingeblendet, damit ohne Skript keine toten Knoepfe stehen. */

.karussell { position: relative; }

.karussell__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 20px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Platz fuer den Hover-Versatz der Karte und den Fokusrahmen. */
  padding: 6px 2px 12px;
  scrollbar-width: thin;
  scrollbar-color: #c9d2e4 transparent;
}
.karussell__track:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.karussell__slide { scroll-snap-align: start; min-width: 0; display: flex; }
.karussell__slide > .case,
.karussell__slide > .review { width: 100%; }

/* Wie viele Karten nebeneinander liegen, steckt in --spalten und haengt am
   Inhalt. Auf dem Telefon ist es immer genau eine, alles andere ist dort
   nicht mehr lesbar. */
.karussell__track {
  --spalten: 1;
  grid-auto-columns: calc((100% - (var(--spalten) - 1) * 20px) / var(--spalten));
}

/* Standard, der Fallblock: erst spaet zwei nebeneinander, die
   Aufschluesselung wird schmaler unlesbar. */
@media (min-width: 900px) { .karussell__track { --spalten: 2; } }

/* Die Bewertungen sind kurz und vertragen mehr, hoechstens drei. */
@media (min-width: 640px)  { .karussell--drei .karussell__track { --spalten: 2; } }
@media (min-width: 1024px) { .karussell--drei .karussell__track { --spalten: 3; } }

.karussell__ctrl { display: flex; align-items: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.karussell__ctrl[hidden] { display: none; }

.karussell__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; flex: none;
  /* Nicht --hairline: das ist die dekorative Trennlinie mit 1,24:1 gegen
     Weiss. Ein Bedienelement braucht nach 1.4.11 mindestens 3:1, hier 3,60. */
  background: #fff; border: 1px solid #7d879e; border-radius: 3px;
  color: var(--navy); cursor: pointer;
  transition: background-color .22s ease, border-color .22s ease, color .22s ease, transform .18s ease, opacity .22s ease;
}
.karussell__btn:hover:not(:disabled) { background: var(--navy); border-color: var(--navy); color: #fff; }
.karussell__btn:active:not(:disabled) { transform: scale(.94); }
.karussell__btn:disabled { opacity: .35; cursor: default; }

.karussell__dots { display: flex; align-items: center; gap: 8px; margin-left: 8px; }
.karussell__dot {
  width: 26px; height: 12px; padding: 4px 0; border: 0; background: none;
  cursor: pointer; box-sizing: content-box;
}
.karussell__dot::before {
  /* #b6c0d4 waere mit 1,83:1 zu hell: die Punkte sind Schaltflaechen und
     zeigen zugleich die Position an, beides faellt unter 1.4.11. 3,60:1. */
  content: ""; display: block; width: 100%; height: 4px; border-radius: 2px;
  background: #7d879e; transition: background-color .26s ease;
}
.karussell__dot[aria-current="true"]::before { background: var(--navy); }


@media (prefers-reduced-motion: reduce) {
  .karussell__track { scroll-behavior: auto; }
  .karussell__btn { transition: none; }
  .karussell__dot::before { transition: none; }
}