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

/* Formular N3: nüchtern, klar, eine Frage je Bildschirm. */

:root { --feldrand: #858B85; }
.fb { min-height: 100dvh; display: flex; flex-direction: column; }
.fb-haupt { flex: 1; }

/* Kopf mit Fortschritt */
.fb-kopf { position: sticky; top: 0; z-index: 10; background: var(--bg); border-top: 3px solid var(--akzent); border-bottom: 1px solid var(--linie); }
.fb-kopf__innen { max-width: 1120px; margin: 0 auto; padding: 0 var(--rand); height: 60px; display: flex; align-items: center; gap: 8px; }
.fb-marke { margin-inline-end: auto; }
.fb-marke .logo { width: 112px; }
.fb-tel {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px;
  font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.fb-tel .ico { width: 18px; height: 18px; color: var(--akzent); }
.fb-schliessen {
  display: inline-grid; place-items: center; width: 44px; height: 44px; margin-inline-end: -10px;
  background: none; border: 0; border-radius: var(--r); cursor: pointer; color: var(--tinte);
}
.fb-schliessen[hidden] { display: none; }
.fb-schliessen .ico { width: 22px; height: 22px; }
.fb-schliessen:hover { background: var(--flaeche); }
@media (min-width: 768px) { .fb-kopf__innen { height: 68px; } .fb-marke .logo { width: 128px; } }

.fb-fortschritt__innen { max-width: 1120px; margin: 0 auto; padding: 0 var(--rand) 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fb-teil span { display: block; font-size: 12.5px; font-weight: 600; color: var(--tinte-3); letter-spacing: .005em; }
.fb-teil.aktiv span { color: var(--tinte); }
.fb-teil i { display: block; height: 3px; margin-top: 6px; background: var(--linie); overflow: hidden; }
.fb-teil b { display: block; height: 100%; background: var(--akzent); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; transition: transform .5s var(--aus); }
[dir="rtl"] .fb-teil b { transform-origin: 100% 50%; }
@media (min-width: 1024px) { .fb-fortschritt__innen { grid-template-columns: repeat(2, minmax(0, 286px)); } }
.fb-fuss .fuss__innen { max-width: 1120px; }

/* Raster */
.fb-raster { max-width: 1120px; margin: 0 auto; padding: 22px var(--rand) 56px; }
.fb-spalte { max-width: 560px; margin: 0 auto; }
.angaben { display: none; }
@media (min-width: 768px) { .fb-raster { padding-top: 40px; padding-bottom: 80px; } }
@media (min-width: 1024px) {
  .fb-raster { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 80px; align-items: start; }
  .fb-spalte { margin: 0; max-width: 580px; }
  .angaben { display: block; position: sticky; top: 124px; }
}

.fb-zurueck {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: -6px 0 6px; margin-inline-start: -4px; padding: 0 4px;
  background: none; border: 0; color: var(--tinte-2); font-weight: 600; font-size: 15px; cursor: pointer;
}
.fb-zurueck[hidden] { display: none; }
.fb-zurueck .ico { width: 18px; height: 18px; }
.fb-zurueck:hover { color: var(--tinte); }

/* Schritte */
.schritt[hidden] { display: none; }
.schritt { animation: rein .19s var(--aus) both; }
.zurueck-richtung .schritt { --von: -12px; }
@keyframes rein { from { opacity: 0; transform: translateX(var(--von, 12px)); } }
.schritt__titel { font-size: clamp(26px, 1.1vw + 22px, 34px); font-weight: 720; letter-spacing: -0.026em; line-height: 1.12; margin-bottom: 22px; }
.schritt__titel:focus { outline: none; }
.schritt__text { margin: -8px 0 22px; color: var(--tinte-2); font-size: 17px; }
.schritt__knopf { width: 100%; min-height: 56px; margin-top: 22px; font-size: 17.5px; }
.schritt__knopf.laedt { pointer-events: none; }
.schritt__knopf.laedt .ico { animation: puls 1s ease-in-out infinite; }
@keyframes puls { 50% { opacity: .3; } }

/* Kacheln */
.kacheln { display: grid; gap: 10px; }
.kachel {
  position: relative; display: flex; align-items: center; gap: 14px; width: 100%;
  min-height: 64px; padding: 12px 18px;
  background: var(--flaeche); color: var(--tinte);
  border: 1px solid var(--feldrand); border-radius: var(--r);
  font: 600 17.5px/1.3 var(--text); text-align: start; cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease, transform .18s var(--aus);
  -webkit-tap-highlight-color: transparent;
}
.kachel:hover { border-color: var(--tinte-2); }
.kachel:active { transform: scale(.992); }
.kachel input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.kachel__text small { display: block; margin-top: 2px; font-weight: 400; font-size: 13.5px; line-height: 1.35; color: var(--tinte-3); }
.kachel__box {
  flex: none; display: grid; place-items: center; width: 24px; height: 24px;
  border: 1.5px solid var(--feldrand); border-radius: 5px; background: #fff; color: #fff;
  transition: background-color .15s ease, border-color .15s ease;
}
.kachel__box .ico { width: 16px; height: 16px; opacity: 0; transform: scale(.6); transition: opacity .15s ease, transform .25s var(--aus); }
.kachel:has(input:checked), .kachel.gewaehlt {
  border-color: var(--akzent); box-shadow: inset 0 0 0 1px var(--akzent); background: var(--akzent-hell);
}
.kachel:has(input:checked) .kachel__box { background: var(--akzent); border-color: var(--akzent); }
.kachel:has(input:checked) .kachel__box .ico { opacity: 1; transform: none; }
.kachel:has(input:focus-visible) { outline: 2px solid var(--akzent); outline-offset: 3px; }
.kachel--wahl { justify-content: space-between; }
.kachel__haken { width: 22px; height: 22px; color: var(--akzent); opacity: 0; transform: scale(.5); transition: opacity .15s ease, transform .3s var(--aus); }
.kachel.gewaehlt .kachel__haken { opacity: 1; transform: none; }
/* Anbieter (DE): zwölf kurze Namen in zwei Spalten, „anderer Anbieter“ über die ganze Breite, darunter das Freitextfeld. */
.kacheln--zwei { grid-template-columns: 1fr 1fr; }
.kacheln--zwei .kachel { padding-inline: 14px; gap: 10px; font-size: 16.5px; }
.kachel--breit { grid-column: 1 / -1; }
.feld--anderer { margin-top: 14px; }
.feld--anderer[hidden] { display: none; }

/* Felder */
.felder { display: grid; gap: 18px; }
.feld { min-width: 0; }
.feld > label, .datum legend { display: block; margin-bottom: 7px; font-weight: 600; font-size: 15px; color: var(--tinte); }
.fb input[type="text"], .fb input[type="email"], .fb input[type="tel"] {
  display: block; width: 100%; height: 54px; padding: 0 14px;
  background: #fff; color: var(--tinte);
  border: 1px solid var(--feldrand); border-radius: var(--r);
  font: 400 17px/1 var(--text); font-variant-numeric: tabular-nums;
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none; appearance: none;
}
.fb input::placeholder { color: #6B7885; opacity: 1; }
.fb input:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px rgba(13, 65, 112, .2); }
.fb input[aria-invalid="true"] { border-color: var(--fehler); }
.fb input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(180, 35, 24, .16); }
.felder__zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.felder__ort { display: grid; grid-template-columns: 104px 1fr; gap: 12px; }
.datum { border: 0; margin: 0; padding: 0; min-width: 0; }
.datum legend { padding: 0; }
.datum__felder { display: grid; grid-template-columns: 76px 76px 104px; gap: 10px; }
.datum__felder label span { display: block; margin-bottom: 4px; font-size: 13px; color: var(--tinte-3); }
.datum__felder input { text-align: center; }
.fehler { margin-top: 7px; color: var(--fehler); font-size: 14.5px; line-height: 1.4; }
.fehler:empty { display: none; }
.sendefehler { margin-top: 20px; padding: 12px 14px; border: 1px solid var(--fehler); border-radius: var(--r); background: #FDF3F2; color: var(--fehler); font-size: 15px; line-height: 1.45; }
.sendefehler + .schritt__knopf { margin-top: 12px; }
.vorschlag {
  display: inline-block; min-height: 44px; margin-top: 2px; padding: 10px 0;
  background: none; border: 0; color: var(--akzent); font-size: 15px; text-decoration: underline; text-underline-offset: .2em; cursor: pointer;
}
.vorschlag[hidden] { display: none; }

/* Einschätzung */
/* Knopf abgesetzt unter der Karte, Form A in Grün aus C (Julius 30.09.2026) */
.ergebnis { padding: 22px 22px 24px; background: var(--akzent-hell); border: 1px solid var(--akzent-rand); border-radius: 16px; }
@media (max-width: 420px) { .ergebnis { padding-inline: 18px; } }
/* Safari (iOS 26) gleicht mit text-wrap: pretty alle Zeilen aus und bricht zu früh um (Julius, iPhone 17e, 03.10.2026) */
:is(.ergebnis, .rueckruf) p { text-wrap: wrap; }
.ergebnis__art { font-weight: 600; font-size: 15px; color: var(--tinte-2); }
.ergebnis__betrag {
  margin: 2px 0 6px; font: 700 clamp(33px, 9vw + 2px, 60px)/1.04 var(--display); white-space: nowrap;
  letter-spacing: -0.036em; color: var(--tinte);
}
.ergebnis__fuer { color: var(--tinte-2); font-size: 16px; }
/* Hinweis „{Anbieter} hat unseren Kunden schon Geld zurückgezahlt.“, kleiner Haken wie in der Liste der Unterschrift */
.ergebnis__gezahlt { display: flex; gap: 8px; margin-top: 8px; color: var(--tinte-2); font-size: 16px; line-height: 1.45; }
.ergebnis__gezahlt[hidden] { display: none; }
.ergebnis__gezahlt .ico { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--akzent); }
.ergebnis__zusatz { margin-top: 10px; font-weight: 650; font-size: 16px; color: var(--tinte); }
.rueckruf { margin-top: 22px; padding: 16px 18px; background: var(--flaeche); border: 1px solid var(--linie-2); border-radius: var(--r); }
.rueckruf[hidden] { display: none; }
/* Grüner Knopf: Einschätzung und letzter Schritt „Rückforderung beauftragen“ (Form aus AT, Julius 30.09.2026) */
.ergebnis__knopf, .knopf--gruen {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 64px; padding: 10px; padding-inline-start: 18px;
  background: #0A7A4A; color: #fff; border: 0; border-radius: 16px;
  box-shadow: 0 6px 0 #065A36, 0 16px 24px -8px rgba(10, 122, 74, .45);
  font: 700 16px/1.25 var(--text); letter-spacing: -0.012em; white-space: nowrap; cursor: pointer; text-align: start;
  transition: background-color .2s var(--aus), transform .12s var(--aus), box-shadow .12s var(--aus);
}
.ergebnis__knopf { margin-top: 14px; }
.ergebnis__knopf .ico, .knopf--gruen .ico { flex: none; width: 42px; height: 42px; padding: 11px; border-radius: 50%; background: #fff; color: #0A7A4A; transition: transform .25s var(--aus); }
.ergebnis__knopf:hover, .knopf--gruen:hover { background: #086C41; }
.ergebnis__knopf:hover .ico, .knopf--gruen:hover .ico { transform: translateX(3px); }
[dir="rtl"] :is(.ergebnis__knopf, .knopf--gruen):hover .ico { transform: translateX(-3px); }
.ergebnis__knopf:active, .knopf--gruen:active { transform: translateY(4px); box-shadow: 0 2px 0 #065A36, 0 8px 14px -8px rgba(10, 122, 74, .45); }
.ergebnis__knopf:focus-visible, .knopf--gruen:focus-visible { outline: 2px solid var(--akzent); outline-offset: 4px; }
.knopf--gruen[disabled] { background: #A7B1BB; box-shadow: none; transform: none; }
.knopf--gruen[disabled] .ico { color: #A7B1BB; }
.ergebnis-karte + .rueckruf { margin-top: 28px; }
@media (max-width: 374px) { .ergebnis__knopf, .knopf--gruen { white-space: normal; } }
html:not([lang|="de"]) :is(.ergebnis__knopf, .knopf--gruen) { white-space: normal; text-align: start; padding-block: 10px; text-wrap: balance; }
.schalter { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 12px; padding: 4px; background: var(--bg); border: 1px solid var(--feldrand); border-radius: var(--r); }
.schalter label { position: relative; cursor: pointer; }
.schalter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.schalter span { display: grid; place-items: center; min-height: 44px; padding: 0 10px; border-radius: 4px; font-weight: 600; font-size: 15.5px; color: var(--tinte-2); text-align: center; transition: background-color .2s var(--aus), color .2s var(--aus), box-shadow .2s var(--aus); }
.schalter input:checked + span { background: #fff; color: var(--tinte); box-shadow: 0 1px 2px rgba(14, 26, 36, .16), inset 0 0 0 1px var(--akzent); }
.schalter input:focus-visible + span { outline: 2px solid var(--akzent); outline-offset: 2px; }
.rueckruf p { font-size: 16.5px; font-weight: 500; }
.weg__titel { margin: 30px 0 14px; font: 650 15px/1.3 var(--text); letter-spacing: 0; color: var(--tinte-2); }
.weg { list-style: none; margin: 0; padding: 0; }
.weg li { position: relative; margin-inline-start: 6px; padding: 0 0 16px; padding-inline-start: 24px; border-inline-start: 2px solid var(--linie-2); }
.weg li:last-child { border-inline-start-color: transparent; padding-bottom: 0; }
.weg li::before {
  content: ''; position: absolute; inset-inline-start: -7px; top: 5px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--tinte-3);
}
.weg li:last-child::before { background: var(--akzent); border-color: var(--akzent); }
.weg .weg__jetzt::before { background: var(--tinte); border-color: var(--tinte); }
.weg strong { display: block; font-weight: 650; font-size: 16px; }
.weg span { display: block; color: var(--tinte-2); font-size: 15px; }

/* Ausweis */
.uploads { display: grid; gap: 12px; }
@media (min-width: 560px) { .uploads { grid-template-columns: 1fr 1fr; } }
.uploads.ein-slot { grid-template-columns: 1fr; }
.upload {
  position: relative; display: block; min-height: 132px; cursor: pointer;
  background: var(--flaeche); border: 1px solid var(--feldrand); border-radius: var(--r);
  transition: border-color .15s ease, background-color .15s ease;
}
.upload[hidden] { display: none; }
.upload:hover { border-color: var(--tinte-2); }
.upload:focus-within { outline: 2px solid var(--akzent); outline-offset: 3px; }
.upload.fehlt { border-color: var(--fehler); }
.upload__leer { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 130px; padding: 18px; text-align: center; }
.upload__leer .ico { width: 30px; height: 30px; color: var(--akzent); margin-bottom: 4px; }
.upload__leer strong { font-weight: 650; font-size: 16.5px; }
.upload__leer > span { font-size: 14px; color: var(--tinte-3); }
.upload__voll { display: grid; grid-template-columns: 76px 1fr auto; align-items: center; gap: 14px; min-height: 130px; padding: 14px 16px; }
.upload__voll[hidden], .upload__leer[hidden] { display: none; }
.upload.voll { border-color: var(--akzent); background: #fff; }
.upload__bild { width: 76px; height: 54px; border-radius: 4px; overflow: hidden; background: var(--bg); border: 1px solid var(--linie); display: grid; place-items: center; }
.upload__bild img { width: 100%; height: 100%; object-fit: cover; }
.upload__bild .ico { width: 28px; height: 28px; color: var(--tinte-2); }
.upload__info { min-width: 0; }
.upload__info strong { display: block; font-weight: 650; font-size: 15.5px; }
.upload__name { display: block; font-size: 13px; color: var(--tinte-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload__aendern { font-weight: 600; font-size: 14.5px; color: var(--akzent); }
.upload.laedt .upload__leer > span::after { content: ' …'; }

/* Unterschrift „Auf einen Blick“ (Fassung U2): erst was passiert, dann Haken und Unterschrift */
.blick { padding: 18px 18px 6px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 16px; }
.blick__titel { font: 650 15px/1.3 var(--text); letter-spacing: 0; color: var(--tinte-2); }
.blick__liste { list-style: none; margin: 8px 0 0; padding: 0; }
.blick__liste li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; padding: 12px 0; font-size: 16.5px; line-height: 1.45; text-wrap: pretty; }
.blick__liste li + li { border-top: 1px solid var(--linie); }
.blick__liste strong { font-weight: 650; }
.blick__haken { display: grid; place-items: center; width: 26px; height: 26px; margin-top: -1px; border-radius: 50%; background: var(--akzent-hell); color: var(--akzent); }
.blick__haken .ico { width: 15px; height: 15px; }
@media (hover: hover) { .u-doks button:hover { color: var(--akzent); text-decoration-color: currentColor; } }
/* Vertrauen über der Unterschrift (Fassung A2, Julius 01.10.2026): Satz als Kopfzeile, drei Zahlen, Presse */
.vertrauen { margin-top: 22px; }
.vertrauen__titel { margin-bottom: 8px; font: 700 15px/1.3 var(--text); text-align: center; color: var(--tinte); }
.vertrauen__zahlen { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; border-top: 3px solid var(--tinte); border-bottom: 1px solid var(--linie); }
.vertrauen__zahlen div { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding: 14px 4px 12px; text-align: center; }
.vertrauen__zahlen div + div { border-inline-start: 1px solid var(--linie); }
.vertrauen__zahlen dd { margin: 0; font: 700 21px/1.1 var(--display); letter-spacing: -.02em; color: var(--akzent); white-space: nowrap; }
.vertrauen__zahlen dt { margin-top: 5px; font-size: 12.5px; line-height: 1.3; color: var(--tinte-2); }
.vertrauen__presse { margin-top: 10px; font-size: 12.5px; text-align: center; color: var(--tinte-3); }
.vertrauen__presse b { font-weight: 650; color: var(--tinte-2); }
.u-label { margin: 26px 0 7px; font-weight: 600; font-size: 15px; }
.u-ruhe { margin-top: 14px; font-size: 14.5px; line-height: 1.5; color: var(--tinte-3); }
.u-doks { margin-top: 30px; padding-top: 6px; border-top: 1px solid var(--linie); }
.u-doks__titel { margin: 14px 0 0; font: 650 13px/1.3 var(--text); letter-spacing: 0; color: var(--tinte-3); }
.u-doks ul { list-style: none; margin: 0; padding: 0; }
.u-doks button {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0; background: none; border: 0; cursor: pointer; text-align: start;
  font-size: 14.5px; line-height: 1.35; color: var(--tinte-2);
  text-decoration: underline; text-decoration-color: var(--linie-2); text-decoration-thickness: 1px; text-underline-offset: .22em;
}
.u-doks button:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; border-radius: 2px; }

/* Unterschrift */
.unterschrift {
  position: relative; height: 200px; background: #fff;
  border: 1px solid var(--feldrand); border-radius: var(--r); touch-action: none;
}
.unterschrift.fehlt { border-color: var(--fehler); }
.unterschrift canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
.unterschrift__linie { position: absolute; left: 22px; right: 22px; bottom: 50px; border-bottom: 1px solid var(--linie-2); pointer-events: none; }
.unterschrift__hinweis { position: absolute; inset-inline-start: 22px; bottom: 24px; font-size: 13.5px; color: var(--tinte-3); pointer-events: none; }
.unterschrift__loeschen {
  position: absolute; top: 6px; inset-inline-end: 6px; display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 12px; background: none; border: 0; border-radius: var(--r);
  color: var(--tinte-2); font-weight: 600; font-size: 14.5px; cursor: pointer;
}
.unterschrift__loeschen[hidden] { display: none; }
.unterschrift__loeschen .ico { width: 17px; height: 17px; }
.unterschrift__loeschen:hover { background: var(--bg); }
/* Dokumente noch nicht geladen (formular.js texteStand): Feld gesperrt, Stand darunter, bei Fehler mit „Erneut laden“.
   PLZ-Liste fehlt (plzStand): derselbe Fehler unter den Adressfeldern. */
.unterschrift.gesperrt { opacity: .5; pointer-events: none; }
.texte-stand:empty { display: none; }
.texte-stand { margin-top: 12px; font-size: 15px; line-height: 1.45; color: var(--tinte-2); }
.texte-stand:focus { outline: none; }
.texte-stand [role="alert"], .dok-fenster__text [role="alert"] { color: var(--fehler); }
#plz-stand { margin-top: 4px; }
.nochmal {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; padding: 0 14px;
  background: var(--flaeche); border: 1px solid var(--linie-2); border-radius: var(--r); font-weight: 600; font-size: 15px; cursor: pointer;
}
.nochmal:hover { border-color: var(--tinte-3); }

/* Bestätigung */
.fertig__haken { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 18px; border-radius: 50%; background: var(--akzent); color: #fff; }
.fertig__haken .ico { width: 26px; height: 26px; }
.akte { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 4px 0 0; padding: 14px 0; border-top: 3px solid var(--tinte); border-bottom: 1px solid var(--linie); }
.akte dt { font-size: 15px; color: var(--tinte-2); }
.akte dd { margin: 0; font: 700 28px/1 var(--display); letter-spacing: -0.02em; }
.fertig__text { margin-top: 18px; font-size: 17px; }
.fertig__kontakt { margin-top: 26px; color: var(--tinte-2); font-size: 15.5px; }

/* Übersicht „Deine Angaben“ (Desktop) */
.angaben { border-top: 3px solid var(--tinte); padding-top: 14px; }
.angaben__titel { font: 650 16px/1.3 var(--display); letter-spacing: -0.01em; }
.angaben__leer { margin-top: 10px; font-size: 14.5px; color: var(--tinte-3); }
.angaben__leer[hidden] { display: none; }
.angaben__liste { margin: 8px 0 0; }
.angaben__liste div { display: grid; grid-template-columns: 104px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--linie); animation: einblenden .4s ease both; }
.angaben__liste dt { font-size: 13px; color: var(--tinte-3); padding-top: 1px; }
.angaben__liste dd { margin: 0; font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; }
@keyframes einblenden { from { opacity: 0; } }
.angaben__firma { display: flex; gap: 10px; margin-top: 22px; font-size: 13px; line-height: 1.5; color: var(--tinte-3); }
.angaben__firma .ico { width: 16px; height: 16px; margin-top: 2px; }

/* Dokument-Fenster */
.dok-fenster {
  width: min(760px, calc(100vw - 20px)); max-height: min(88dvh, 920px); padding: 0;
  border: 0; border-radius: 8px; background: #fff; color: var(--tinte);
  box-shadow: 0 30px 80px -24px rgba(14, 26, 36, .5);
}
.dok-fenster[open] { display: flex; flex-direction: column; }
.dok-fenster::backdrop { background: rgba(14, 26, 36, .5); }
.dok-fenster__kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px; padding-inline-start: 20px; border-bottom: 1px solid var(--linie); }
.dok-fenster__kopf h2 { font-size: 18px; font-weight: 650; }
.dok-fenster__zu { display: grid; place-items: center; width: 44px; height: 44px; background: none; border: 0; border-radius: var(--r); cursor: pointer; }
.dok-fenster__zu .ico { width: 22px; height: 22px; }
.dok-fenster__zu:hover { background: var(--bg); }
.dok-fenster__text { overflow: auto; padding: 18px 22px 24px; font-size: 15px; line-height: 1.6; overscroll-behavior: contain; }
.dok-fenster__text h2 { font-size: 16.5px; margin: 20px 0 6px; letter-spacing: -0.01em; }
.dok-fenster__text h2:first-child { margin-top: 0; }
.dok-fenster__text h3 { font-size: 15.5px; margin: 16px 0 6px; }
.dok-fenster__text p { margin: 0 0 10px; }
.dok-fenster__text ul { margin: 0 0 10px; padding-left: 20px; }
.dok-fenster__text table { width: 100%; border-collapse: collapse; margin: 8px 0 14px; font-size: 14px; }
.dok-fenster__text td { border: 1px solid var(--linie); padding: 6px 8px; vertical-align: top; }
.dok-fenster__text .eingesetzt { font-weight: 650; color: var(--akzent-dunkel); }
.dok-fenster__text .offen { color: var(--tinte-3); font-style: italic; }
/* Änderungsvorschlag im Vertragstext (6.1 Deutschland statt Österreich), bis Julius ihn bestätigt. */
.dok-fenster__text mark.vorschlag { background: #FFF1B8; color: inherit; padding: 0 2px; border-bottom: 2px solid #E0B400; }
.dok-fenster__fuss { padding: 12px 20px; border-top: 1px solid var(--linie); display: flex; justify-content: flex-end; }

.fb-fuss { padding-top: 22px; padding-bottom: 26px; font-size: 13px; }
/* Einwilligung zur Werbemessung (Stufe 1): kleine Zeile unter Impressum/Datenschutz, nur auf dem Kontakt-Schritt. */
.fuss__werbung { display: none; margin: 0; font-size: 12.5px; color: var(--tinte-3); }
body[data-schritt="kontakt"] .fuss__werbung { display: block; }
.fuss__link { padding: 0; border: 0; background: none; font: inherit; color: var(--tinte); text-decoration: underline; cursor: pointer; }
/* Honigtopf: für Menschen unsichtbar und nicht erreichbar (tabindex -1, aria-hidden), Bots füllen ihn aus. */
.honig { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }

/* Rechts nach links: E-Mail, Telefon und Ziffernfelder bleiben links nach rechts (rechtsbündig wie die
   Beschriftung), Namen und Adresse nehmen die Richtung ihres Inhalts. */
[dir="rtl"] .fb input:is([type="email"], [type="tel"], [inputmode="numeric"]) { direction: ltr; text-align: right; }
[dir="rtl"] .fb input[type="text"]:not([inputmode]) { unicode-bidi: plaintext; text-align: start; }
[dir="rtl"] .datum__felder input { text-align: center; }

/* Fremdsprachen: Hinweis über den deutschen Dokumenten */
.dok-fenster__hinweis { margin: 0; padding: 10px 20px; border-bottom: 1px solid var(--linie); background: var(--akzent-hell); color: var(--tinte); font-size: 14px; line-height: 1.45; }