/* F1 „Klar“: gemeinsame Grundlage für Erklärseite und Formular, Verwandte von N3 (Casino AT).
   Helles Papierweiß, blauschwarze Tinte, eine Akzentfarbe: Preußischblau (Berliner Blau, 1706 in Berlin gefunden).
   Deutsche Gewichtung: schwerere Überschriften, 3-px-Linien über Tabellen wie im Geschäftsbericht.
   Radien: alles Bedienbare 6 px, Flächen und Grafiken eckig. */

@font-face {
  font-family: 'N3 Display';
  src: url('../fonts/wix-madefor-display.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: 'N3 Text';
  src: url('../fonts/wix-madefor-text.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
}
/* Kyrillisch (ru, uk): die Teilmenge unverändert von Google Fonts (OFL, fonts/OFL.txt), gleiche Familie.
   Später definiert, deshalb gilt sie zuerst, aber nur für diese Zeichen; Deutsch und Englisch laden sie nie. */
@font-face {
  font-family: 'N3 Display';
  src: url('../fonts/wix-madefor-display-cyrillic.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'N3 Text';
  src: url('../fonts/wix-madefor-text-cyrillic.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Latin-Ext (bs, hr, sr, tr, ro, pl, hu, sk, sq: ă ș ț ő ű ğ ş ł ľ ŕ č ć đ ž …): ebenso unverändert von Google Fonts. */
@font-face {
  font-family: 'N3 Display';
  src: url('../fonts/wix-madefor-display-latin-ext.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'N3 Text';
  src: url('../fonts/wix-madefor-text-latin-ext.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Arabische Schrift (ar, fa): Vazirmatn, Teilmenge unverändert aus Mietheld/Neu (OFL, fonts/OFL-vazirmatn.txt).
   Gewichtsbereich gleich wie oben (400 800), sonst behandelt Chrome sie als eigene Schnittgruppe und nimmt sie nie. */
@font-face {
  font-family: 'N3 Display';
  src: url('../fonts/vazirmatn-arabic.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'N3 Text';
  src: url('../fonts/vazirmatn-arabic.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

:root {
  color-scheme: light;
  --bg: #F3F4F1;
  --flaeche: #FFFFFF;
  --tinte: #111820;
  --tinte-2: #434B55;
  --tinte-3: #575F69;
  --linie: #D9DBD6;
  --linie-2: #B8BDB7;
  --akzent: #0D4170;
  --akzent-dunkel: #08304F;
  --akzent-hell: #E6EDF4;
  --akzent-rand: #C4D3E2;
  --kontext: #7A8895;
  --fehler: #B42318;
  --r: 6px;
  --display: 'N3 Display', ui-sans-serif, system-ui, sans-serif;
  --text: 'N3 Text', ui-sans-serif, system-ui, sans-serif;
  --aus: cubic-bezier(.16, 1, .3, 1);
  --rand: 20px;
}
@media (min-width: 768px) { :root { --rand: 40px; } }
@media (min-width: 1280px) { :root { --rand: 56px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--tinte);
  font: 400 17px/1.55 var(--text);
  font-feature-settings: 'kern';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.022em; line-height: 1.1; margin: 0; text-wrap: balance; color: var(--tinte); }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--akzent); }
button { font: inherit; color: inherit; }
::selection { background: var(--akzent); color: #fff; }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; border-radius: 2px; }
.zahl, .tab { font-variant-numeric: tabular-nums lining-nums; }
.nur-vorleser { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.ico { width: 1.2em; height: 1.2em; flex: none; fill: currentColor; }
.nw { white-space: nowrap; }

/* Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 52px; padding: 0 26px;
  background: var(--akzent); color: #fff;
  border: 0; border-radius: var(--r);
  font: 600 17px/1 var(--text); letter-spacing: -0.005em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: 0 1px 2px rgba(14, 26, 36, .18);
  transition: background-color .2s var(--aus), transform .2s var(--aus);
}
.knopf:hover { background: var(--akzent-dunkel); color: #fff; }
.knopf:active { transform: translateY(1px); }
.knopf .ico { width: 20px; height: 20px; transition: transform .25s var(--aus); }
.knopf:hover .ico { transform: translateX(3px); }
.knopf[disabled], .knopf[aria-disabled="true"] { background: #A7B1BB; box-shadow: none; cursor: not-allowed; }
.knopf[disabled] .ico { transform: none; }
.knopf--leise {
  background: transparent; color: var(--tinte); box-shadow: inset 0 0 0 1px var(--linie-2);
}
.knopf--leise:hover { background: var(--flaeche); color: var(--tinte); }
/* Fremdsprachen: lange Knopftexte dürfen umbrechen (Deutsch passt immer in eine Zeile und bleibt wie es ist). */
html:not([lang|="de"]) .knopf { white-space: normal; text-align: center; line-height: 1.25; padding-block: 8px; text-wrap: balance; }

/* Sprachwahl im Kopf (Seite und Formular): Globus und Sprache ausgeschrieben, auch am Handy (Julius 01.10.2026). */
.sprachwahl { position: relative; flex: none; }
.sprachwahl summary {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 44px; min-height: 44px; padding: 0 8px; border-radius: var(--r);
  list-style: none; cursor: pointer; font: 600 15px/1 var(--text); color: var(--tinte); white-space: nowrap;
}
.sprachwahl summary::-webkit-details-marker { display: none; }
.sprachwahl summary:hover { background: var(--flaeche); }
.sprachwahl summary svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; flex: none; }
.sprachwahl[open] summary { background: var(--tinte); color: #fff; }
/* 16 Sprachen in zwei Spalten: am Handy über die ganze Kopfbreite (die Liste hängt dort am Kopf, nicht am
   Knopf), ab 768 px mittig unter dem Knopf. Jeder Eintrag in seiner Richtung (lang, dir im Markup), die Namen in der
   Systemschrift: so lädt das Öffnen keine Schriftdatei (Kyrillisch, Latin-Ext, Vazirmatn, 72 KB) und nichts flackert. */
.sprachliste {
  position: absolute; left: 50%; transform: translateX(-50%); top: calc(100% + 6px); z-index: 50;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 4px;
  width: 380px; max-height: calc(100dvh - 88px); overflow: auto; overscroll-behavior: contain;
  margin: 0; padding: 6px; list-style: none;
  background: var(--flaeche); border: 1px solid var(--linie-2); border-radius: var(--r);
  box-shadow: 0 12px 32px -14px rgba(14, 26, 36, .4);
}
.sprachliste a { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 4px; text-decoration: none; font-family: ui-sans-serif, system-ui, sans-serif; font-weight: 500; color: var(--tinte); white-space: nowrap; }
.sprachliste a:hover { background: var(--bg); color: var(--tinte); }
/* Alle Einträge bündig in der Richtung der Seite (eine Spalte sähe sonst zerrissen aus); dir im Markup bleibt
   für Vorleser, der Name selbst steht isoliert und richtig herum. */
.sprachliste a[dir] { direction: inherit; unicode-bidi: isolate; }
.sprachliste a[aria-current] { font-weight: 700; background: var(--akzent-hell); }
.sprachliste a[aria-current]::after { content: ''; flex: none; width: 8px; height: 8px; margin-inline-start: auto; border-radius: 50%; background: var(--akzent); }
/* Liegen noch Sprachen unter dem sichtbaren Bereich (seite.js/formular.js setzen .mehr), zeigt ein weicher Verlauf
   mit kleinem Pfeil, dass es weitergeht; am Listenende blendet er aus. Passt die Liste ganz, gibt es keinen. */
.sprachliste::after {
  content: ''; position: sticky; bottom: -6px; grid-column: 1 / -1; height: 48px; margin: -48px -6px -6px;
  pointer-events: none; opacity: 0; transition: opacity .2s ease;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D4170' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center bottom 6px / 20px no-repeat,
    linear-gradient(rgba(255, 255, 255, 0), var(--flaeche) 65%);
}
.sprachliste.mehr::after { opacity: 1; }
/* Gegenstück oben (Julius 01.10.2026): ist die Liste nach unten gescrollt, zeigt ein Pfeil nach oben, dass darüber
   noch Sprachen liegen (.oben setzen seite.js/formular.js). */
.sprachliste::before {
  content: ''; position: sticky; top: -6px; z-index: 1; grid-column: 1 / -1; height: 48px; margin: -6px -6px -48px;
  pointer-events: none; opacity: 0; transition: opacity .2s ease;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D4170' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E") center top 6px / 20px no-repeat,
    linear-gradient(var(--flaeche) 35%, rgba(255, 255, 255, 0));
}
.sprachliste.oben::before { opacity: 1; }
/* Telefon im Kopf: am Handy nur das Symbol als Knopf (Nummer für Vorleser im aria-label), ab 768 px Symbol und
   Nummer. Logo, Sprache und Telefon passen so bei 360 px in jeder Sprache in eine Zeile. */
@media (max-width: 767px) {
  .kopf__innen, .fb-kopf__innen { position: relative; }
  .sprachwahl { position: static; }
  /* Am Handy eine Spalte in der Reihenfolge des Menüs (häufigste Sprachen oben), höchstens 70 % der Höhe. */
  .sprachliste { inset-inline: var(--rand); top: calc(100% - 2px); width: auto; transform: none; grid-template-columns: 1fr; max-height: min(70dvh, calc(100dvh - 88px)); }
  .sprachwahl summary { gap: 5px; padding: 0 7px; font-size: 14.5px; }
  .sprachwahl summary svg { width: 18px; height: 18px; }
  .kopf__tel, .fb-tel { flex: none; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--linie-2); border-radius: var(--r); }
  .kopf__tel span, .fb-tel span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Logo */
.logo { display: block; width: 124px; height: auto; }
@media (min-width: 768px) { .logo { width: 138px; } }

/* Fuß */
.fuss {
  border-top: 1px solid var(--linie);
  padding: 28px 0 36px;
  color: var(--tinte-2); font-size: 14px; line-height: 1.6;
}
.fuss__innen { max-width: 1200px; margin: 0 auto; padding: 0 var(--rand); display: grid; gap: 14px; }
/* Eine Zeile „© · Impressum · Datenschutz“: der Trenner sitzt vor jedem Baustein, die Zeile ist um eine
   Trennerbreite nach vorne verschoben und der Rahmen schneidet ab, was vorne übersteht. So steht nach einem
   Umbruch nie ein Punkt am Zeilenanfang. */
.fuss__recht { overflow: hidden; }
.fuss__recht p { margin: 0; margin-inline-start: -1.3em; display: flex; flex-wrap: wrap; align-items: center; }
.fuss__recht span { white-space: nowrap; }
.fuss__recht span::before { content: "·"; content: "·" / ""; display: inline-block; width: 1.3em; text-align: center; }
.fuss__recht a { display: inline-block; padding: 10px 0; }
.fuss a { color: var(--tinte); }
/* Kein Logo mehr im Fuß (Julius, 07.10.2026): nur die eine Zeile. */

/* Rechts nach links (ar, fa; <html dir="rtl">). Das Layout spiegelt sich über logische Eigenschaften
   (margin-inline-start …) in basis/seite/formular.css; hier nur, was die Richtung selbst braucht. */
/* Arabische Schrift verbindet die Buchstaben: kein Zeichenabstand, etwas mehr Zeilenhöhe in Überschriften. */
[dir="rtl"] body * { letter-spacing: 0 !important; } /* ponytail: pauschal statt je Regel, nur ar/fa */
[dir="rtl"] :is(h1, h2, h3) { line-height: 1.3; }
/* Pfeile zeigen in Leserichtung: das Symbol spiegeln, die Bewegung beim Überfahren auch. */
[dir="rtl"] use[href*="i-arrow"] { transform: scaleX(-1); transform-origin: center; transform-box: fill-box; }
[dir="rtl"] .knopf:hover .ico { transform: translateX(-3px); }
/* Ziffernfolgen mit Leerzeichen (Telefon) und reine Zahlen bleiben links nach rechts. */
[dir="rtl"] :is(a[href^="tel:"], a[href^="mailto:"], .kopf__tel span, .fb-tel span, td .zahl, .belege td, .kennblatt dd.zahl, .presse__datum, figcaption .zahl, figcaption strong, .akte dd) { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .kennblatt dd.zahl { text-align: right; }
/* Deutsche Zitate in arabischer Seite: eigener Absatz links nach rechts, die Übersetzung darunter rechts. */
[dir="rtl"] .zitat [lang="de"] { display: block; direction: ltr; unicode-bidi: isolate; text-align: left; }

/* Erklärseite F1 „Klar“: Geschäftsbericht-Ordnung. Versprechen und Prüfliste oben, dann BGH, Ablauf, Zahlen,
   Bewertungen, Kennblatt, Fragen. Tabellen tragen eine 3-px-Linie in Tinte, Preußischblau nur für Handlung und
   eigene Zahlen, ein heller Blauton für die zwei Bänder BGH und Schluss. */

html { scroll-padding-top: 92px; }
.innen { max-width: 1200px; margin: 0 auto; padding: 0 var(--rand); }

/* Kopf: Preußischblau als feine Kante oben, sonst ruhig. */
.kopf {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg);
  border-top: 3px solid var(--akzent);
  border-bottom: 1px solid var(--linie);
}
.kopf__innen {
  max-width: 1200px; margin: 0 auto; padding: 0 var(--rand);
  height: 62px; display: flex; align-items: center; gap: 10px;
}
.kopf__marke { margin-inline-end: auto; display: block; }
.kopf__nav { display: none; gap: 24px; font-size: 15px; }
.kopf__nav a { text-decoration: none; color: var(--tinte-2); padding: 10px 0; font-weight: 500; }
.kopf__nav a:hover { color: var(--akzent); }
.kopf__tel {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-weight: 600; font-size: 15.5px; text-decoration: none; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.kopf__tel .ico { width: 18px; height: 18px; color: var(--akzent); }
.kopf__knopf { display: none; min-height: 44px; padding: 0 18px; font-size: 15.5px; }
@media (min-width: 768px) {
  .kopf__innen { height: 70px; gap: 20px; }
  .kopf__knopf { display: inline-flex; }
}
@media (min-width: 1100px) {
  .kopf__nav { display: flex; margin-inline-end: 12px; }
  .kopf__marke { margin-inline-end: 0; }
  .kopf__nav { margin-inline-start: auto; }
}

/* Auftakt: links das Versprechen, rechts (am Handy darunter) die Prüfliste „Wer sein Geld zurückfordern kann“. */
.auftakt {
  max-width: 1200px; margin: 0 auto;
  padding: 30px var(--rand) 48px;
  display: grid; gap: 40px;
}
.auftakt h1 {
  font-size: clamp(34px, 3.1vw + 21px, 60px);
  font-weight: 740; letter-spacing: -0.034em; line-height: 1.02;
  hyphens: manual; text-wrap: pretty;
}
/* Russisch: „Мгновенная выплата“ ist rund 10 em breit und bricht nie um. Die Schrift richtet sich nach
   der Spaltenbreite (cqi), damit es am Handy (360 px) und in der Desktop-Spalte in eine Zeile passt. */
/* Ebenso Polnisch (11,6 em), Albanisch (11,2 em) und Bulgarisch (9,7 em): Faktor = 96,5 / Wortbreite in em. */
:is(:lang(ru), :lang(pl), :lang(sq), :lang(bg)) .auftakt__text { container-type: inline-size; }
:lang(ru) .auftakt h1 { font-size: min(clamp(34px, 3.1vw + 21px, 60px), 9.6cqi); }
:lang(pl) .auftakt h1 { font-size: min(clamp(34px, 3.1vw + 21px, 60px), 8.3cqi); }
:lang(sq) .auftakt h1 { font-size: min(clamp(34px, 3.1vw + 21px, 60px), 8.6cqi); }
:lang(bg) .auftakt h1 { font-size: min(clamp(34px, 3.1vw + 21px, 60px), 9.9cqi); }
.auftakt__lead {
  margin: 18px 0 26px; max-width: 30em;
  font-size: clamp(17.5px, .4vw + 16px, 20px); line-height: 1.5; color: var(--tinte-2);
}
.auftakt__knopf { width: 100%; min-height: 56px; font-size: 18px; }
@media (min-width: 560px) { .auftakt__knopf { width: auto; } }
@media (min-width: 1024px) {
  .auftakt { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 80px; padding-top: 76px; padding-bottom: 88px; align-items: start; }
  .auftakt__text { padding-top: 6px; }
}

/* Prüfliste: weißes Blatt mit Tintenkante, jede Voraussetzung eine Zeile. */
.pruefliste {
  background: var(--flaeche); border: 1px solid var(--linie); border-top: 3px solid var(--tinte);
  padding: 16px 18px 6px;
  box-shadow: 0 1px 2px rgba(17, 24, 32, .04), 0 18px 36px -28px rgba(17, 24, 32, .28);
}
.pruefliste__titel { font-size: clamp(20px, .5vw + 18px, 24px); letter-spacing: -0.02em; line-height: 1.2; padding-bottom: 12px; border-bottom: 1px solid var(--linie-2); }
@media (min-width: 768px) { .pruefliste { padding: 22px 28px 10px; } }
.kriterien { list-style: none; margin: 0; padding: 0; }
.kriterien li { display: flex; gap: 12px; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid var(--linie); font-size: 16.5px; line-height: 1.45; }
.kriterien li:last-child { border-bottom: 0; }
.kriterien .ico { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--akzent); }

/* Grafik-Grundform */
.grafik { margin: 0; }
.abschnitt--hell { background: var(--flaeche); }
.grafik__quelle { margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--linie); color: var(--tinte-3); font-size: 13px; }
.balken { display: block; height: 14px; background: var(--akzent); transform-origin: 0 50%; }
[dir="rtl"] .balken, [dir="rtl"] .unterstrich::after { transform-origin: 100% 50%; }

/* Abschnitte */
.abschnitt { border-top: 1px solid var(--linie); padding: 46px 0 50px; }
.abschnitt__titel { font-size: clamp(28px, 1.7vw + 22px, 44px); font-weight: 730; letter-spacing: -0.031em; line-height: 1.06; }
.abschnitt__lead { margin-top: 14px; max-width: 38em; font-size: 17.5px; color: var(--tinte-2); }
@media (min-width: 1024px) { .abschnitt { padding: 72px 0 76px; } .abschnitt__lead { font-size: 18.5px; } }

/* BGH: das einzige farbige Band im Mittelteil, hell und ruhig. */
.bgh { background: var(--akzent-hell); border-top-color: var(--akzent-rand); }
.bgh .kennblatt div { border-bottom-color: var(--akzent-rand); }
.bgh + .abschnitt { border-top-color: var(--akzent-rand); }

/* Ablauf als Zeitleiste */
.zeitleiste { list-style: none; margin: 34px 0 0; padding: 0; display: grid; }
.zeitleiste li { position: relative; margin-inline-start: 6px; padding: 0 0 28px; padding-inline-start: 30px; border-inline-start: 2px solid var(--linie-2); }
.zeitleiste li:last-child { border-inline-start-color: transparent; padding-bottom: 0; }
.zeitleiste li::before {
  content: ''; position: absolute; inset-inline-start: -8px; top: 3px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--tinte);
}
.zeitleiste h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.014em; }
.zeitleiste p { margin-top: 6px; color: var(--tinte-2); font-size: 16px; max-width: 30em; }
.zeitleiste__ziel::before { background: var(--akzent) !important; border-color: var(--akzent) !important; }
@media (min-width: 900px) {
  .zeitleiste { grid-template-columns: repeat(4, 1fr); margin-top: 56px; }
  .zeitleiste li { margin: 0; padding: 30px 0 0; padding-inline-end: 32px; border-inline-start: 0; border-top: 2px solid var(--linie-2); }
  .zeitleiste li:last-child { border-top-color: var(--akzent); }
  .zeitleiste li::before { inset-inline-start: 0; top: -8px; }
}

/* Zahlen: Titel links, Kennzahlentabelle rechts. Zahlen groß und rechtsbündig, Wörter wie „über“ klein davor. */
.grafik--belege { display: grid; gap: 28px; margin: 0 auto; }
@media (min-width: 1024px) { .grafik--belege { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; } }
.belege { width: 100%; border-collapse: collapse; border-top: 3px solid var(--tinte); font-variant-numeric: tabular-nums lining-nums; }
.belege th { text-align: start; font-weight: 550; font-size: 16.5px; line-height: 1.3; padding: 16px 0; padding-inline-end: 16px; border-bottom: 1px solid var(--linie); vertical-align: middle; }
.belege td {
  text-align: end; padding: 12px 0; border-bottom: 1px solid var(--linie); white-space: nowrap; vertical-align: middle;
  font: 720 clamp(30px, 1.6vw + 24px, 46px)/1 var(--display); letter-spacing: -0.03em;
}
.belege__vor { font: 550 15px/1 var(--text); letter-spacing: 0; color: var(--tinte-2); }
.belege__zahler { margin-top: 16px; color: var(--tinte-2); font-size: 15.5px; max-width: 40em; }

/* Stimmen: Wert und Verteilung oben, darunter das Band der Zitate */
.stimmen__wert { display: grid; }
@media (min-width: 1024px) { .stimmen__wert { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; } .stimmen__wert .sterne { margin-top: 0; } }
.sterne { width: 100%; max-width: 440px; border-collapse: collapse; margin-top: 26px; font-variant-numeric: tabular-nums; }
.sterne th { text-align: start; font-weight: 500; font-size: 14px; color: var(--tinte-3); padding: 5px 0; padding-inline-end: 12px; width: 76px; white-space: nowrap; }
.sterne td { padding: 5px 0; display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 600; }
.sterne .balken { flex: 0 0 calc(var(--w) * (100% - 44px)); height: 10px; min-width: 3px; background: var(--tinte-2); }
.pfeil-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 18px; font-weight: 600; font-size: 15.5px; color: var(--akzent); text-decoration: none; min-height: 44px; }
.pfeil-link:hover { text-decoration: underline; }
.pfeil-link .ico { width: 16px; height: 16px; }
/* Ohne Skript: die Zitate als ruhige Liste unter der Verteilung. */
.band { max-width: 1200px; margin: 36px auto 0; padding: 0 var(--rand); }
.band__spur { display: grid; border-top: 3px solid var(--tinte); }
.zitat { margin: 0; padding: 22px 0 24px; border-bottom: 1px solid var(--linie); }
.zitat blockquote { margin: 0; }
.zitat blockquote p { font-size: 18px; line-height: 1.5; max-width: 36em; }
.zitat figcaption { margin-top: 10px; font-size: 14px; color: var(--tinte-3); }
.zitat figcaption strong { color: var(--tinte); font-weight: 650; margin-inline-end: 4px; }
.zitat figcaption a { color: var(--tinte-3); }
.presse-abschnitt { padding: 32px 0 40px; }
@media (min-width: 1024px) { .presse-abschnitt { padding: 44px 0 48px; } }
.presse__titel { font: 700 17px/1.3 var(--display); }
.presse__liste { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid var(--linie-2); }
.presse__liste a { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; padding: 14px 0; border-bottom: 1px solid var(--linie); text-decoration: none; align-items: baseline; }
.presse__medium { font-weight: 650; }
.presse__zeile { grid-column: 1 / -1; grid-row: 2; color: var(--tinte-2); }
.presse__datum { color: var(--tinte-3); font-size: 14px; }
.presse__liste a:hover .presse__zeile { color: var(--akzent); text-decoration: underline; }
@media (min-width: 900px) {
  .presse__liste a { grid-template-columns: 190px 110px 1fr; }
  .presse__zeile { grid-column: auto; grid-row: auto; }
}

/* Unternehmen und BGH: Kennblatt */
.unternehmen__raster { display: grid; gap: 32px; }
@media (min-width: 1024px) { .unternehmen__raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; } }
.kennblatt { margin: 0; border-top: 3px solid var(--tinte); display: grid; align-content: start; }
.kennblatt div { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--linie); }
.kennblatt dt { font-size: 13.5px; color: var(--tinte-3); }
.kennblatt dd { margin: 0; font-size: 16.5px; font-weight: 600; }
.kennblatt a { text-decoration: none; }
.kennblatt a:hover { text-decoration: underline; }
.kennblatt__hinweis { display: block; margin-top: 2px; font-size: 14px; font-weight: 400; color: var(--tinte-2); }
@media (min-width: 640px) {
  .kennblatt div { grid-template-columns: 170px 1fr; gap: 16px; align-items: baseline; }
}

/* Fragen */
.fragen__raster { display: grid; gap: 28px; }
@media (min-width: 1024px) { .fragen__raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; } }
.fragen__liste { border-top: 3px solid var(--tinte); }
.fragen__liste details { border-bottom: 1px solid var(--linie); }
.fragen__liste summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: 60px; padding: 14px 0; cursor: pointer; list-style: none;
  font-weight: 650; font-size: 17px; line-height: 1.4;
}
.fragen__liste summary::-webkit-details-marker { display: none; }
.fragen__liste summary .ico { width: 18px; height: 18px; color: var(--tinte-3); transition: transform .3s var(--aus); }
.fragen__liste summary:hover .ico { color: var(--akzent); }
.fragen__liste details[open] summary .ico { transform: rotate(180deg); }
.fragen__liste details p { padding: 0 0 20px; color: var(--tinte-2); max-width: 36em; }

/* Schluss: zweites blaues Band, der Knopf darin. */
.schluss { border-top: 1px solid var(--akzent-rand); border-bottom: 1px solid var(--akzent-rand); background: var(--akzent-hell); padding: 44px 0; }
.schluss__innen { display: grid; gap: 24px; justify-items: start; }
.schluss h2 { font-size: clamp(28px, 1.6vw + 21px, 40px); font-weight: 740; letter-spacing: -0.03em; }
.schluss .knopf { width: 100%; min-height: 56px; }
.schluss + .abschnitt { border-top: 0; }
@media (min-width: 768px) {
  .schluss__innen { grid-template-columns: 1fr auto; align-items: center; }
  .schluss .knopf { width: auto; }
}
@media (min-width: 1024px) { .schluss { padding: 60px 0; } }

/* Bewegung: leise, nur wo Vertrauen entsteht. Ausgangszustände nur unter
   .js (im Kopf gesetzt), ohne Skript steht alles fertig da. Nur transform, opacity, Farbe. */
:root { --weich: cubic-bezier(.22, .61, .36, 1); --ziehen: cubic-bezier(.45, 0, .2, 1); }

/* Kopf: eine preußischblaue Linie unter dem Schlüsselwort („Kostenrisiko“), einmal von links nach rechts. */
.unterstrich { position: relative; white-space: nowrap; }
.unterstrich::after {
  content: ''; position: absolute; left: 0; right: 0; top: 1.04em;
  height: max(3px, .06em); background: var(--akzent);
  transform-origin: 0 50%; pointer-events: none;
}
.js .unterstrich::after { transform: scaleX(0); animation: aufziehen .7s var(--ziehen) .35s forwards; }
@keyframes aufziehen { to { transform: scaleX(1); } }

/* Abschnitte blenden weich ein, 8 px Weg. */
.js .einblenden { opacity: 0; transform: translate3d(0, 8px, 0); }
.js .einblenden.sichtbar { opacity: 1; transform: none; transition: opacity .7s var(--weich), transform .7s var(--weich); }

/* Balken wachsen ruhig, gestaffelt. --vor schiebt sie im ersten Bild hinter die Kopf-Linie. */
.js .grafik .balken, .js .sterne .balken { transform: scaleX(0); }
.js .sichtbar .balken { transform: scaleX(1); transition: transform .8s var(--weich) calc(var(--vor, 0s) + var(--n, 0) * 90ms); }
.sichtbar tr:nth-child(2) { --n: 1; }
.sichtbar tr:nth-child(3) { --n: 2; }
.sichtbar tr:nth-child(4) { --n: 3; }
.sichtbar tr:nth-child(5) { --n: 4; }

/* Eigene Zahlen: stehen still, das Blau wird beim Erscheinen einmal kurz heller. */
.signal { color: var(--akzent); }
.abschnitt__lead .signal { font-weight: 650; }
.js .sichtbar .signal { animation: aufhellen .9s ease-in-out calc(var(--vor, 0s) + .5s); }
@keyframes aufhellen { 45% { color: #6F9BC4; } }

/* Presse: die drei Zeilen nacheinander, 120 ms Staffelung. */
.js .presse__liste li { opacity: 0; transform: translate3d(0, 6px, 0); }
.js .presse__liste.sichtbar li { opacity: 1; transform: none; transition: opacity .6s var(--weich), transform .6s var(--weich); }
.js .presse__liste.sichtbar li:nth-child(2) { transition-delay: 120ms; }
.js .presse__liste.sichtbar li:nth-child(3) { transition-delay: 240ms; }

/* Bewertungen als langsames Band quer über die Seite: ein Zitat je 8 s (--dauer setzt das
   Skript nach der Zahl der Zitate). Die Kopien hängt seite.js an; -50 % ist genau ein Satz. */
.js .band {
  --kante: 20px;
  max-width: none; margin-top: 40px; padding: 0; overflow: hidden;
  border-top: 1px solid var(--linie-2); border-bottom: 1px solid var(--linie);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--kante), #000 calc(100% - var(--kante)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--kante), #000 calc(100% - var(--kante)), transparent);
}
.js .band__spur { display: flex; width: max-content; border-top: 0; }
.js .band .zitat {
  flex: none; width: min(82vw, 400px); padding: 24px 26px 22px;
  border-bottom: 0; border-inline-end: 1px solid var(--linie);
  display: flex; flex-direction: column; justify-content: space-between; gap: 14px;
}
.js .band .zitat blockquote p { font-size: 17px; }
.js .band .zitat figcaption { margin-top: 0; }
/* Die ganze Karte ist der Link zur Bewertung: am laufenden Band trifft man das kleine
   „auf Google“ sonst kaum. */
.js .band .zitat { position: relative; }
.js .band .zitat a::after { content: ''; position: absolute; inset: 0; }
/* Läuft ohne Pause durch; 1,5 s Stillstand am Anfang, damit das erste Zitat ganz lesbar ist. */
.band--laeuft .band__spur { animation: band var(--dauer, 56s) linear 1.5s infinite; will-change: transform; }
@keyframes band { to { transform: translate3d(var(--band-ziel, -50%), 0, 0); } }
/* Rechts nach links: die Kopien liegen links, das Band läuft nach rechts (neue Zitate kommen in Leserichtung). */
[dir="rtl"] .band { --band-ziel: 50%; }
@media (min-width: 1024px) {
  .js .band { --kante: 120px; margin-top: 56px; }
  .js .band .zitat blockquote p { font-size: 18px; }
}

/* Formular in der Seite (vorgeladener Rahmen) */
.formular-ebene {
  position: fixed; inset: 0; z-index: 100; background: var(--bg);
  visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity .12s ease, visibility 0s linear .12s;
}
.formular-ebene.offen { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity .12s ease; }
.formular-ebene iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--bg); }
html.formular-offen, html.formular-offen body { overflow: hidden; }

/* Fremdsprachen: Google-Zitate bleiben deutsch, die kurze Übersetzung steht darunter. */
.zitat__uebersetzung { display: block; margin-top: 8px; font-size: 15px; line-height: 1.45; color: var(--tinte-2); }