/* N3 „Fakten“: gemeinsame Grundlage für Erklärseite und Formular.
   Kühle helle Fläche, dunkle Tinte, eine Akzentfarbe (Kobalt).
   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: #F1F4F7;
  --flaeche: #FBFCFD;
  --tinte: #0E1A24;
  --tinte-2: #44525F;
  --tinte-3: #56636F;
  --linie: #D5DCE2;
  --linie-2: #B9C4CD;
  --akzent: #2343C4;
  --akzent-dunkel: #1A34A3;
  --akzent-hell: #E4E9FA;
  --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: 650; 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='%232343C4' 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(251, 252, 253, 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='%232343C4' 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(251, 252, 253, 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 „© 2026 Padronus · Impressum · Datenschutz“ (Fassung A, Julius 07.10.2026). Der Trenner steht
   vor jedem Baustein; der Absatz ragt um seine Breite über den Rand, so schneidet overflow den Punkt am
   Zeilenanfang ab (auch nach einem Umbruch). Logische Eigenschaften, damit es in ar/fa gespiegelt gilt. */
.fuss__recht { overflow: hidden; }
.fuss__recht p { display: flex; flex-wrap: wrap; align-items: center; margin: 0; margin-inline-start: -1.3em; }
.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__recht a:focus-visible { outline-offset: 0; } /* sonst schneidet overflow den Fokusrahmen oben und unten ab */
.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, .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 N3 „Fakten“ */

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

/* Kopf */
.kopf {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--linie);
}
.kopf__innen {
  max-width: 1200px; margin: 0 auto; padding: 0 var(--rand);
  height: 64px; display: flex; align-items: center; gap: 10px;
}
.kopf__marke { margin-inline-end: auto; display: block; }
.kopf__nav { display: none; gap: 26px; font-size: 15px; }
.kopf__nav a { text-decoration: none; color: var(--tinte-2); padding: 10px 0; }
.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: 72px; 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 */
.auftakt {
  max-width: 1200px; margin: 0 auto;
  padding: 36px var(--rand) 56px;
  display: grid; gap: 44px;
}
.auftakt h1 {
  font-size: clamp(34px, 3.1vw + 21px, 60px);
  font-weight: 680; letter-spacing: -0.032em; line-height: 1.03;
  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: 20px 0 28px; 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.05fr) minmax(0, .95fr); gap: 72px; padding-top: 72px; padding-bottom: 88px; align-items: start; }
  .auftakt__text { padding-top: 8px; }
}

/* Grafik-Grundform: Titel über kräftiger Linie, Quelle unten */
.grafik { margin: 0; border-top: 2px solid var(--tinte); padding-top: 14px; }
.grafik__titel { font: 650 19px/1.25 var(--display); letter-spacing: -0.012em; }
.grafik--anbieter .grafik__titel { font-size: clamp(20px, .6vw + 17px, 24px); letter-spacing: -0.02em; line-height: 1.2; }
.abschnitt--hell { background: var(--flaeche); }
.grafik__unter { margin-top: 3px; color: var(--tinte-3); font-size: 14.5px; line-height: 1.45; }
.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%; }

/* Anbieter-Tabelle */
.anbieter { width: 100%; border-collapse: collapse; margin-top: 14px; font-variant-numeric: tabular-nums; }
.anbieter thead th { font: 500 12.5px/1.3 var(--text); color: var(--tinte-3); text-align: start; padding: 0 0 8px; border-bottom: 1px solid var(--linie-2); }
.anbieter tbody th { text-align: start; font-weight: 650; font-size: 16px; padding: 14px 0 12px; padding-inline-end: 12px; vertical-align: top; width: 36%; }
.anbieter tbody th small { display: block; font-weight: 400; font-size: 12.5px; line-height: 1.35; color: var(--tinte-3); margin-top: 2px; }
.anbieter td { padding: 14px 0 12px; vertical-align: top; font-size: 16px; font-weight: 600; }
.anbieter tbody td:first-of-type { display: flex; align-items: center; gap: 10px; padding-top: 16px; }
.anbieter tbody td:first-of-type .balken { flex: 0 0 calc(var(--w) * (100% - 44px)); min-width: 3px; }
.anbieter tfoot th, .anbieter tfoot td { border-top: 1px solid var(--tinte); padding: 12px 0 0; font-weight: 700; font-size: 16px; text-align: start; }
@media (min-width: 1024px) {
  .anbieter tbody th { width: 40%; }
}

/* Abschnitte */
.abschnitt { border-top: 1px solid var(--linie); padding: 40px 0 44px; }
.abschnitt__titel { font-size: clamp(28px, 1.6vw + 22px, 42px); font-weight: 670; letter-spacing: -0.028em; }
.abschnitt__lead { margin-top: 14px; max-width: 38em; font-size: 17.5px; color: var(--tinte-2); }
@media (min-width: 1024px) { .abschnitt { padding: 60px 0 64px; } .abschnitt__lead { font-size: 18.5px; } }

/* Ablauf als Zeitleiste */
.zeitleiste { list-style: none; margin: 36px 0 0; padding: 0; display: grid; }
.zeitleiste li { position: relative; margin-inline-start: 6px; padding: 0 0 30px; 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: 650; letter-spacing: -0.012em; }
.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; }
.zeitleiste__zeit { display: block; color: var(--akzent); font-weight: 650; font-size: 14px; margin-bottom: 4px; }
@media (min-width: 900px) {
  .zeitleiste { grid-template-columns: repeat(4, 1fr); margin-top: 72px; }
  .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; }
  .zeitleiste__zeit { position: absolute; top: -40px; inset-inline-start: 0; margin: 0; font-size: 15px; }
}

/* September */
@media (min-width: 1024px) {
  .september__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }
}
.grafik--sept { margin-top: 32px; }
@media (min-width: 1024px) { .grafik--sept { margin-top: 6px; } }
.betraege { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.betraege th { text-align: start; font-weight: 600; font-size: 14.5px; color: var(--tinte); padding: 12px 0; padding-inline-end: 12px; width: 124px; line-height: 1.3; }
.betraege th small { display: block; font-weight: 400; font-size: 12.5px; color: var(--tinte-3); }
.betraege td { padding: 14px 0 12px; display: flex; align-items: center; gap: 12px; font-weight: 650; font-size: 17px; }
.betraege .balken { flex: 0 0 calc(var(--w) * (100% - 112px)); height: 18px; min-width: 3px; }
.betraege td .zahl { white-space: nowrap; }

/* 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: 2px 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 { margin-top: 56px; }
.presse-abschnitt { padding: 32px 0 40px; }
.presse-abschnitt .presse { margin-top: 0; }
@media (min-width: 1024px) { .presse-abschnitt { padding: 44px 0 48px; } }
.presse__titel { font: 650 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 */
.unternehmen__raster { display: grid; gap: 36px; }
@media (min-width: 1024px) { .unternehmen__raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; } }
.kennblatt { margin: 0; border-top: 2px solid var(--tinte); display: grid; }
.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: 550; }
.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: 2px 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: 620; 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 details[open] summary .ico { transform: rotate(180deg); }
.fragen__liste details p { padding: 0 0 20px; color: var(--tinte-2); max-width: 36em; }

/* Schluss */
.schluss { border-top: 1px solid var(--linie); background: var(--flaeche); padding: 40px 0; }
.schluss__innen { display: grid; gap: 24px; justify-items: start; }
.schluss h2 { font-size: clamp(26px, 1.4vw + 20px, 36px); font-weight: 670; letter-spacing: -0.026em; }
.schluss .knopf { width: 100%; min-height: 56px; }
@media (min-width: 768px) {
  .schluss__innen { grid-template-columns: 1fr auto; align-items: center; }
  .schluss .knopf { width: auto; }
}

/* Schwebender Prüfen-Knopf am Handy (wie KBG): fährt von unten ein, sobald kein anderer Prüfen-Knopf
   im Bild ist (seite.js). Der Fuß bekommt unten Platz, damit der Knopf am Ende nichts verdeckt. */
.leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: 10px var(--rand) calc(12px + env(safe-area-inset-bottom));
  background: rgba(241, 244, 247, .96); border-top: 1px solid var(--linie);
  transform: translateY(110%); transition: transform .35s var(--weich);
}
.leiste .knopf { width: 100%; }
.leiste.an { transform: none; }
.fuss { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
@media (min-width: 768px) {
  .leiste { display: none; }
  .fuss { padding-bottom: 36px; }
}

/* Bewegung „Belege“: 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 feine Kobalt-Linie unter „Sofortauszahlung“, einmal von links nach rechts. */
.unterstrich { position: relative; white-space: nowrap; }
.unterstrich::after {
  content: ''; position: absolute; left: 0; right: 0; top: 1.05em;
  height: max(2px, .05em); 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, der Kobalt-Ton 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: #7F95EC; } }

/* 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); }