/* immo.kapitalstein.de/steuer-analyse — Aussehen der Strecke (12.09.2026)

   Mobil zuerst, und zwar wörtlich: Die Grundwerte gelten für 375 px, die
   Medienabfragen bauen nach oben aus. Die meisten Besucher kommen über eine
   Anzeige auf dem Handy, und dort entscheidet sich in den ersten Sekunden,
   ob jemand die erste Frage beantwortet.

   Regeln, die diese Datei durchhält:
   - Eine Frage füllt den Bildschirm. Kein Scrollen bis zur Antwort.
   - Jede Tippfläche ist mindestens 56 px hoch (Apple und Google nennen 44,
     das ist die Untergrenze für Finger, nicht das Ziel).
   - Farben, Radien, Abstände und Schriften kommen aus klartext.css. Diese
     Datei erfindet keine CI, sie ordnet sie an. */

/* ═══ Bühne ═══ */
.an-seite { background: var(--sand); min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.an-seite main { flex: 1; display: flex; flex-direction: column; }

.an-hut { position: sticky; top: 0; z-index: 40; background: var(--weiss); border-bottom: 1px solid var(--linie); }
.an-hut-innen { max-width: 640px; margin: 0 auto; padding: 10px var(--rand-x) 12px; }

/* Fortschritt: ein dünnes Band aus Sprossen, dieselbe Form wie in der
   Selbstauskunft, damit sich Kunden wiederfinden. Ohne Prozentzahl —
   „Schritt 3 von 14" entmutigt, die gefüllte Strecke nicht. */
.an-band { display: flex; gap: 3px; }
.an-band i { flex: 1; height: 4px; border-radius: var(--r-pille); background: var(--sand-3); transition: background var(--d-s) var(--ease); }
.an-band i.an { background: var(--akzent); }
.an-band i.laeuft { background: linear-gradient(90deg, var(--akzent) 55%, var(--sand-3) 55%); }

/* Vertrauenszeile. Nur was belegt ist: das ProvenExpert-Siegel und die
   Zahl der echten Bewertungen. Fremde Bankenlogos stehen hier NICHT —
   dafür bräuchten wir belegbare Partnerschaften (offen bei Jeff). */

/* ═══ Karte ═══ */
.an-buehne { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: var(--s-24) var(--rand-x) var(--s-48); }
.an-karte { position: relative; width: 100%; max-width: 640px; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-20); padding: var(--s-24) var(--s-20) var(--s-32); box-shadow: var(--schatten-1); }
.an-kopf { text-align: center; }
.an-frage { font-family: var(--display); font-weight: 600; font-size: clamp(1.375rem, 1.05rem + 1.5vw, 1.875rem); line-height: 1.18; letter-spacing: -.02em; margin: 0; color: var(--fg); text-wrap: balance; }
.an-frage:focus { outline: none; }
.an-hinweis { margin: var(--s-8) 0 0; font-size: var(--t-small); line-height: 1.5; color: var(--fg-3); }

/* ═══ Kacheln ═══
   Zwei Spalten am Handy, weil eine Spalte bei vier Optionen eine Rolltour
   wird. Die Schrift bleibt lesbar, weil die Beschriftungen kurz sind. */
.an-kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-12); margin-top: var(--s-24); }
.an-kachel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 104px; padding: var(--s-16) var(--s-8); background: var(--weiss); border: 1.5px solid var(--linie); border-radius: var(--r-16); cursor: pointer; font: inherit; color: var(--fg); text-align: center; transition: border-color var(--d-s) var(--ease), background var(--d-s) var(--ease), transform var(--d-xs) var(--ease); }
.an-kachel:hover { border-color: var(--akzent); background: var(--akzent-hell); }
.an-kachel:active { transform: scale(.98); }
.an-kachel:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.an-kachel.gewaehlt { border-color: var(--akzent); background: var(--akzent-hell); box-shadow: inset 0 0 0 1px var(--akzent); }
.an-kachel-text { font-size: .9375rem; font-weight: 500; line-height: 1.25; }
.an-emoji { font-size: 1.75rem; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.an-emoji.gross { font-size: 2rem; }

/* ═══ Liste (viele Optionen, etwa Bundesland) ═══ */
.an-liste { display: grid; gap: 8px; margin-top: var(--s-24); }
.an-zeile { display: flex; align-items: center; min-height: 56px; padding: 0 var(--s-16); background: var(--weiss); border: 1.5px solid var(--linie); border-radius: var(--r-12); cursor: pointer; font: inherit; font-size: 1rem; color: var(--fg); text-align: left; transition: border-color var(--d-s) var(--ease), background var(--d-s) var(--ease); }
.an-zeile:hover { border-color: var(--akzent); background: var(--akzent-hell); }
.an-zeile:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.an-zeile.gewaehlt { border-color: var(--akzent); background: var(--akzent-hell); font-weight: 600; }

/* ═══ Zahleneingabe ═══
   Die Zahl ist groß, weil sie das Wichtigste auf dem Schirm ist, und weil
   große Ziffern am Handy weniger Tippfehler bedeuten. */
.an-eingabe { margin-top: var(--s-24); }
.an-feld { display: flex; align-items: baseline; gap: var(--s-8); border-bottom: 2px solid var(--linie); padding-bottom: var(--s-8); transition: border-color var(--d-s) var(--ease); }
.an-feld:focus-within { border-color: var(--akzent); }
.an-feld input { flex: 1; min-width: 0; border: 0; background: none; padding: 0; font-family: var(--display); font-weight: 600; font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem); letter-spacing: -.02em; color: var(--fg); }
.an-feld input:focus { outline: none; }
.an-feld input::placeholder { color: var(--sand-3); }
.an-feld input[aria-invalid="true"] { color: var(--rot); }
.an-einheit { font-size: var(--t-small); color: var(--fg-3); white-space: nowrap; }
.an-meldung { margin: var(--s-8) 0 0; font-size: var(--t-small); color: var(--rot); min-height: 1.4em; opacity: 0; }
.an-meldung.da { opacity: 1; }
.an-weiter { margin-top: var(--s-20); width: 100%; }

/* ═══ „Warum wir das fragen" ═══
   Das Gegenmittel gegen die häufigste Abbruchfrage: Warum will der das
   wissen? Steht unter jeder Frage, nicht in einer Klappe. */
.an-warum { margin-top: var(--s-24); padding-top: var(--s-16); border-top: 1px solid var(--linie); text-align: center; }
.an-warum b { display: block; font-size: var(--t-small); font-weight: 600; color: var(--fg-2); margin-bottom: 4px; }
.an-warum p { margin: 0; font-size: var(--t-small); line-height: 1.55; color: var(--fg-3); }

/* Zurück: klein, rund, unten mittig. Es soll da sein, aber nicht locken. */
.an-zurueck { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: var(--s-20) auto 0; border: 1px solid var(--linie); border-radius: 50%; background: var(--weiss); color: var(--fg-3); font-size: 1.125rem; cursor: pointer; transition: border-color var(--d-s) var(--ease), color var(--d-s) var(--ease); }
.an-zurueck:hover { border-color: var(--fg-3); color: var(--fg); }
.an-zurueck:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* ═══ Kontaktkarte ═══ */
.an-feld-gross { margin-top: var(--s-16); }
.an-feld-gross label { display: block; font-size: var(--t-small); font-weight: 500; color: var(--fg-2); margin-bottom: 6px; }
.an-feld-gross input { width: 100%; min-height: 52px; padding: 0 var(--s-16); border: 1.5px solid var(--linie); border-radius: var(--r-12); background: var(--weiss); font: inherit; font-size: 1rem; color: var(--fg); }
.an-feld-gross input:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-hell); }
.an-feld-gross input[aria-invalid="true"] { border-color: var(--rot); }
.an-haken { margin-top: var(--s-20); display: grid; gap: var(--s-12); }
.an-haken .haken { display: grid; grid-template-columns: 22px 1fr; gap: var(--s-12); align-items: start; margin: 0; padding: 0; font-size: .8125rem; line-height: 1.5; color: var(--fg-3); cursor: pointer; }
.an-haken .haken::before { display: none; }
.an-haken .haken input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--akzent); }
.an-kontakt .meldung { margin-top: var(--s-12); font-size: var(--t-small); }
.an-kontakt .meldung.err { color: var(--rot); }
.an-kontakt button[type="submit"] { margin-top: var(--s-20); }
.an-klein { margin: var(--s-16) 0 0; font-size: var(--t-micro); line-height: 1.5; color: var(--fg-3); text-align: center; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ═══ Ladeschirm ═══ */
.an-laden { text-align: center; }
.an-schritte { list-style: none; margin: var(--s-24) 0 0; padding: 0; display: grid; gap: var(--s-12); text-align: left; max-width: 320px; margin-inline: auto; }
.an-schritt-zeile { display: flex; align-items: center; gap: var(--s-12); font-size: .9375rem; color: var(--fg-2); animation: anEin .32s var(--ease) backwards; }
.an-haken-klein { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--gruen-hell); color: var(--gruen); font-size: .8125rem; font-weight: 700; flex: none; }
@keyframes anEin { from { opacity: 0; transform: translateY(6px); } }

/* ═══ Ergebnis ═══ */
.an-ergebnis { width: 100%; max-width: 640px; display: grid; gap: var(--s-16); }
.an-zahl-karte { text-align: center; }
.an-grosse-zahl { font-family: var(--display); font-weight: 600; font-size: clamp(2.5rem, 1.4rem + 5vw, 4rem); line-height: 1; letter-spacing: -.035em; color: var(--akzent); margin-top: var(--s-16); }
.an-zahl-unter { margin: var(--s-8) 0 0; font-size: var(--t-small); color: var(--fg-3); }

.an-drei { display: grid; grid-template-columns: 1fr; gap: var(--s-12); }
.an-kennzahl { text-align: center; padding: var(--s-20) var(--s-16); }
.an-kennzahl-titel { margin-top: var(--s-8); font-size: var(--t-small); color: var(--fg-3); }
.an-kennzahl-wert { font-family: var(--display); font-weight: 600; font-size: 1.625rem; letter-spacing: -.02em; color: var(--fg); margin-top: 2px; }
.an-kennzahl-fuss { margin-top: 4px; font-size: var(--t-micro); color: var(--fg-3); }

.an-eyebrow { font-size: var(--t-micro); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--akzent); }
.an-aha h2 { font-family: var(--display); font-weight: 600; font-size: 1.25rem; line-height: 1.3; letter-spacing: -.02em; margin: var(--s-8) 0 0; color: var(--fg); }
.an-balken { display: flex; height: 40px; margin-top: var(--s-20); border-radius: var(--r-12); overflow: hidden; background: var(--sand-2); }
.an-teil { min-width: 3px; }
.an-teil.miete { background: var(--akzent); }
.an-teil.steuer { background: var(--akzent-nacht); }
.an-teil.du { background: var(--tinte-3); }
.an-legende { margin-top: var(--s-16); display: grid; gap: var(--s-8); }
.an-legende-punkt { display: flex; align-items: center; gap: var(--s-8); font-size: var(--t-small); }
.an-punkt { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.an-punkt.miete { background: var(--akzent); }
.an-punkt.steuer { background: var(--akzent-nacht); }
.an-punkt.du { background: var(--tinte-3); }
.an-legende-text { color: var(--fg-2); }
.an-legende-wert { margin-left: auto; font-weight: 600; color: var(--fg); }

.an-tat { text-align: center; }
.an-tat h2 { font-family: var(--display); font-weight: 600; font-size: 1.25rem; letter-spacing: -.02em; margin: 0; color: var(--fg); }
.an-tat .btn { margin-top: var(--s-20); }
.an-telefon { display: block; margin-top: var(--s-12); font-size: var(--t-small); color: var(--fg-3); }
.an-post b { display: block; font-size: 1rem; color: var(--fg); margin-bottom: 6px; }
.an-annahmen { border: 1px solid var(--linie); border-radius: var(--r-12); background: var(--sand-2); padding: var(--s-16); }
.an-annahmen summary { font-size: var(--t-small); font-weight: 500; color: var(--fg-2); cursor: pointer; }
.an-annahmen p { margin: var(--s-12) 0 0; font-size: var(--t-micro); line-height: 1.6; color: var(--fg-3); }

/* ═══ Fuß ═══
   Auf der Landingpage trägt der Fuß die ganze Marke. Hier ist er nur noch
   Pflichtangabe: Wer mitten in einer Strecke steht, soll nicht von einem
   schwarzen Block eingeladen werden, sie zu verlassen. */
.an-fuss { background: var(--sand-2); border-top: 1px solid var(--linie); padding: var(--s-20) 0; margin-top: auto; }
.an-fuss .an-klein { margin: 0; color: var(--fg-3); }
.an-fuss a { color: var(--fg-2); text-decoration: underline; text-underline-offset: 2px; }

/* Der zweite Knopf der Klebe-Leiste tritt zurück: Auf 390 px stehen zwei
   gleich laute Knöpfe nebeneinander wie eine Frage ohne Antwort. */
.klebe .klebe-zweit { flex: none; padding: 0 14px; font-size: var(--t-small); }
@media (max-width: 400px) { .klebe .text { display: none; } }

/* ═══ Ab Tablet ═══ */
@media (min-width: 560px) {
  .an-karte { padding: var(--s-32) var(--s-32) var(--s-40); }
  .an-kacheln.vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .an-drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .an-buehne { padding-top: var(--s-40); }
}
@media (min-width: 840px) {
  .an-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Wer Bewegung abbestellt hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  .an-schritt-zeile { animation: none; }
  .an-kachel, .an-zeile, .an-band i { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   Startschirm und Marke der Abfrage-Strecke (12.09.2026)

   Aufbau nach imonia-wohnbau.de/immocheck (Jeff: „die erste Seite 1:1
   nachbauen"): Logo zentriert über der Fortschrittslinie, darunter die drei
   Plaketten der Bewertungsportale, Augenbraue, große Überschrift, ein Satz,
   zwei Knöpfe, zwei Klappfragen, Finanzierungsleiste.

   Warum der Kopf schlank bleibt: Er klebt oben (position:sticky). Plaketten
   und Finanzierungsleiste im Kopf hätten auf 390 px rund ein Drittel des
   Schirms gefressen — bei jeder der vierzehn Fragen. Beim Vorbild stehen sie
   ebenfalls im Startschirm, nicht im Kopf.
   ═══════════════════════════════════════════════════════════════════ */

/* Die Marke ist inline-flex (klartext.css). Zentriert wird sie über eine
   eigene Breite, nicht über text-align: ein inline-flex-Kind folgt der
   Textausrichtung nur, wenn es keine eigene Breite hat. */
.an-marke { display: flex; width: -moz-fit-content; width: fit-content; margin: 0 auto var(--s-12); }
.an-marke svg { width: 22px; }
.an-marke .wort { font-size: 1.0625rem; }

/* ═══ Plaketten der Bewertungsportale ═══
   Drei Bilder in einer Reihe, zentriert. Die Höhe der Wortmarken ist
   festgesetzt (20 px), damit Google und Trustpilot trotz verschiedener
   viewBox gleich groß wirken; die ProvenExpert-Plakette bringt ihre eigene
   Gestaltung mit und steht deshalb größer. */
/* Drei gleich breite Spalten statt einer freien Reihe: Sonst richtet sich die
   Leiste nach der Breite der Schriftzüge, und Google steht weiter links als
   Trustpilot rechts. Die Marken sitzen alle auf derselben Linie, weil ihre
   Zeile eine feste Höhe hat — sonst hängt ein kleines Logo in der Mitte. */
.an-plaketten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; justify-items: center; gap: 10px 12px; margin-top: 10px; width: 100%; max-width: 440px; margin-left: auto; margin-right: auto; }
.bw-marke { display: flex; align-items: center; justify-content: center; height: 34px; }
/* Jede Plakette ist gleich gebaut: eine Markenzeile fester Höhe, darunter
   eine Textzeile. Damit stehen die drei Marken auf einer Linie und die Texte
   auf der nächsten — unabhängig davon, dass ProvenExpert ein ganzes Kästchen
   mitbringt und Google und Trustpilot nur einen Schriftzug. */
.bw-plakette { display: grid; grid-template-rows: auto auto; justify-items: center; align-content: start; gap: 5px; text-align: center; text-decoration: none; color: var(--fg-2); }
.bw-text { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 4px; min-height: 15px; font-size: var(--t-micro); color: var(--fg-3); line-height: 1.25; }
.bw-text b { color: var(--fg); font-weight: 600; }
.bw-plakette img { display: block; height: 20px; width: auto; }
.bw-pe img { height: 84px; }
.bw-sterne { display: inline-flex; gap: 1px; color: #F4B400; }
.bw-sterne svg { width: 13px; height: 13px; fill: currentColor; }
.bw-fuss { font-size: var(--t-micro); color: var(--fg-3); }
.bw-plakette:hover .bw-fuss, .bw-plakette:focus-visible .bw-fuss { color: var(--fg-2); }

/* ═══ Startschirm ═══ */
.an-start { width: 100%; max-width: 640px; margin: 0 auto; padding: var(--s-24) var(--rand-x) var(--s-48); text-align: center; }
.an-augenbraue { margin-top: var(--s-24); font-size: var(--t-micro); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--akzent-dunkel); }
.an-start-titel { margin-top: 10px; font-family: var(--display); font-weight: 600; font-size: var(--t-display-2); letter-spacing: -.03em; line-height: 1.05; color: var(--fg); }
.an-start-sub { margin-top: var(--s-16); font-size: 1.0625rem; line-height: 1.55; color: var(--fg-2); }
.an-start-knoepfe { margin-top: var(--s-24); display: flex; flex-direction: column; gap: 10px; }
.an-start-knoepfe .btn { width: 100%; }
.an-start-klein { margin-top: 12px; font-size: var(--t-micro); color: var(--fg-3); }
.an-start-fragen { margin-top: var(--s-32); text-align: left; }
/* Der Kreis des Klappzeichens nimmt --karte-2, und das ist auf dieser
   Sandfläche wieder Sand: unsichtbar. Eine Stufe dunkler macht ihn sichtbar. */
.an-start-fragen summary .faq-icon { background: var(--sand-2); }
.an-start .an-banken { margin-top: var(--s-32); }

/* Der Schirm baut sich einmal leise auf. Regel wie bei den Objekten: die
   Keyframes tragen nur ein `from`, der Endzustand IST der Grundzustand. Wer
   Bewegung abbestellt, sieht den fertigen Schirm. */
@keyframes an-auf { from { opacity: 0; transform: translateY(8px); } }
.an-start > * { animation: an-auf .5s var(--ease-aus) backwards; }
.an-start > :nth-child(2) { animation-delay: .05s; }
.an-start > :nth-child(3) { animation-delay: .1s; }
.an-start > :nth-child(4) { animation-delay: .15s; }
.an-start > :nth-child(5) { animation-delay: .2s; }

/* Im klebenden Kopf ist jede Zeile teuer: Was er belegt, fehlt der Frage. Die
   Plaketten stehen dort seit dem 13.09.2026 (Jeff: in jedem Schritt sichtbar),
   also kleiner als zuvor im Startschirm. Die Höhe des Kopfes misst der
   Prüfstand — über 150 px frisst er auf 390 px die erste Antwort. */
.an-hut .an-plaketten { gap: 8px 18px; margin-top: 8px; }
.an-hut .bw-plakette { gap: 4px; }
.an-hut .bw-marke { height: 32px; }
.an-hut .bw-plakette img { height: 15px; }
.an-hut .bw-pe img { height: 32px; }
.an-hut .bw-text { font-size: 10px; min-height: 13px; }
.an-hut .bw-sterne svg { width: 10px; height: 10px; }
.an-hut .bw-fuss { font-size: 10px; line-height: 1.25; }
/* Schmal bleibt im Kopf nur die Note mit den Sternen. Der Satz darunter
   („bei Google aus 17 Bewertungen") braucht zwei Zeilen und macht den
   klebenden Kopf auf 390 px 181 px hoch — gemessen am 13.09.2026. Die Zahl
   steht weiter auf der Landingpage und in der Belegdatei; hier zählt, dass
   die Plaketten in jedem Schritt zu sehen sind. */
/* Im Kopf trägt jede Plakette GENAU EINE kurze Zeile: Google die Note mit den
   Sternen, ProvenExpert die Art der Bewertung, Trustpilot die Anzahl. Die
   Anzahl bei Google steht auf der Landingpage — im Kopf brach sie die Zeile um,
   und die Spalte stand 16 px höher als ihre Nachbarn (gemessen 13.09.2026). */
.an-hut .bw-plakette:first-child .bw-fuss { display: none; }
/* Trustpilot trägt keine Zeile mehr (Jeff, 13.09.2026): Bei einer einzigen
   Bewertung sagt die Zahl nichts. Die frei gewordene Höhe bekommt die Marke —
   sie steht damit so groß da wie die anderen beiden Spalten zusammen mit ihrer
   Zeile. Die Spalten bleiben gleich hoch, weil die Plakette ihren Inhalt
   mittig setzt. */
.bw-plakette { align-content: center; }
.an-hut .bw-plakette:last-child .bw-marke { height: 49px; }
.an-hut .bw-plakette:last-child img { height: 24px; }

/* Fußzeile: Anschrift oben, Verweise darunter beisammen. */
.an-fuss-adresse { text-align: center; }
.an-fuss-wege { margin-top: 10px; justify-content: center; }
@media (max-width: 600px) {
  .an-hut .an-plaketten { gap: 6px 10px; margin-top: 6px; max-width: 360px; }
}

/* Schmal bleiben die drei Plaketten in EINER Reihe. Gemessen am 12.09.2026:
   mit der langen Google-Zeile brachen sie auf zwei Reihen um, die Leiste war
   143 px hoch und die Überschrift rutschte auf 293 px. Der Fuß darf umbrechen,
   die Reihe nicht. */
@media (max-width: 480px) {
  .an-plaketten { gap: 10px 14px; }
  .bw-pe img { height: 58px; }
  .bw-fuss { max-width: 100px; line-height: 1.3; }
  .bw-zeile { font-size: var(--t-micro); }
}

@media (min-width: 560px) {
  .an-start-knoepfe { flex-direction: row; justify-content: center; }
  .an-start-knoepfe .btn { width: auto; }
}
@media (min-width: 600px) {
  .an-plaketten { max-width: 520px; }
  .an-start { padding-top: var(--s-32); }
  .an-marke svg { width: 26px; }
  .an-marke .wort { font-size: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .an-start > * { animation: none; }
}

.an-start[hidden] { display: none; }

/* ═══ Fußzeile der Strecken ═══
   klartext.css baut den Fuß für eine DUNKLE Fläche: weiße Schrift, halb
   durchsichtig. Die Strecken stellen ihn auf Sand, und damit stand dort weiße
   Schrift auf hellem Grund — 1,23:1, praktisch unlesbar (gemessen am
   13.09.2026, Jeff hat es gemeldet). Hier stehen die Farben deshalb
   ausdrücklich, und der Prüfstand misst den Kontrast. */
/* Die Ursache war KEINE Farbregel, sondern ein Token-Tausch: .fuss setzt für
   seinen dunklen Grund --fg, --fg-2 und --fg-3 auf Weiß. Jede eigene Regel
   „color: var(--fg-2)" wurde damit ebenfalls weiß — deshalb werden hier die
   TOKEN zurückgesetzt, nicht die Farben überschrieben. Wer nur color setzt,
   erwischt die Kinder nicht, die ihre Farbe aus denselben Token holen. */
.an-fuss { --fg: var(--tinte); --fg-2: var(--tinte-2); --fg-3: var(--tinte-3); color: var(--tinte-2); }
.an-fuss .an-klein, .an-fuss p { color: var(--tinte-2); }
.an-fuss a { color: var(--tinte); text-decoration: underline; text-underline-offset: .15em; }
.an-fuss a:hover, .an-fuss a:focus-visible { color: var(--akzent-dunkel); }
.an-fuss .footer-base { border-top-color: var(--linie); }

/* ═══════════════════════════════════════════════════════════════════
   Erklärungen und Bankenleiste (12.09.2026)

   Beides steht so beim Vorbild (imonia-wohnbau.de/immocheck): unter der
   Deckseite ein zweispaltiger Erklärblock mit Bild, Überschrift, einem Absatz
   und einem zweiten, der erst auf Klick erscheint — und unter dem Fragebogen
   ein helles Band mit fünf Bankenlogos.
   ═══════════════════════════════════════════════════════════════════ */

.an-erklaer { margin-top: var(--s-48); padding-top: var(--s-40); border-top: 1px solid var(--rand); display: grid; gap: var(--s-24); text-align: left; }
.an-erklaer-bild img { display: block; width: 100%; height: auto; border-radius: var(--r-l, 18px); }
.an-erklaer h2 { font-family: var(--display); font-weight: 600; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem); letter-spacing: -.02em; line-height: 1.12; color: var(--fg); }
/* Ein farbiger Halbsatz in der Überschrift, wie beim Vorbild. Der Ton ist
   --akzent-dunkel, nicht --akzent: auf Sand misst der helle Akzent keine
   4,5:1, und dieser Text trägt Bedeutung. */
.an-erklaer h2 .hell { color: var(--akzent-dunkel); }
.an-erklaer p { margin-top: var(--s-16); color: var(--fg-2); line-height: 1.6; }
.an-erklaer .an-mehr p:first-child { margin-top: var(--s-16); }

/* Der Knopf wechselt die Beschriftung, der Pfeil dreht sich. Zugeklappt ist
   der Grundzustand: Wer nichts anklickt, liest einen Absatz statt drei. */
.an-mehr-knopf { margin-top: var(--s-20); display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 1px solid var(--fg); border-radius: var(--r-pille); background: none; color: var(--fg); font: inherit; font-weight: 500; cursor: pointer; }
.an-mehr-knopf:hover { background: var(--fg); color: var(--bg, var(--weiss)); }
.an-mehr-pfeil { display: inline-block; transition: transform var(--d-sm) var(--ease); }
.an-mehr-knopf[aria-expanded="true"] .an-mehr-pfeil { transform: rotate(180deg); }

@media (min-width: 760px) {
  .an-erklaer { grid-template-columns: 1fr 1.25fr; gap: var(--s-32); align-items: center; }
}

/* ═══ Bankenleiste ═══
   Das Vorbild setzt alle Logos auf dieselbe BREITE (110 px) und nimmt die
   Höhen, wie sie kommen. Das geht dort auf, weil alle fünf Dateien waagerechte
   Schriftzüge sind. Zwei unserer Dateien sind Signets im Quadrat (Sparkassen-S,
   PSD-Kasten): auf 110 px Breite wären sie 140 px hoch. Deshalb wird hier die
   optische HÖHE je Datei gesetzt und die Breite folgt — gemessen, nicht
   geschätzt (siehe Prüfstand: keine Marke darf mehr als die doppelte Fläche
   der kleinsten belegen). */
.an-bankenleiste { background: var(--weiss); border-top: 1px solid var(--linie); padding: var(--s-20) var(--rand-x); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-16) var(--s-32); }
.an-bankenleiste img { width: auto; height: 22px; max-width: 170px; object-fit: contain; }
.an-bankenleiste img[alt="Sparkasse"] { height: 32px; }
.an-bankenleiste img[alt="PSD Bank"] { height: 33px; }
.an-bankenleiste img[alt="Commerzbank"] { height: 18px; }
.an-bankenleiste img[alt="Bausparkasse Schwäbisch Hall"] { height: 16px; }
.an-bankenleiste img[alt="Volksbanken Raiffeisenbanken"] { height: 26px; }
@media (max-width: 600px) {
  .an-bankenleiste { gap: 14px 22px; padding: var(--s-16) var(--rand-x); }
  .an-bankenleiste img { height: 18px; }
  .an-bankenleiste img[alt="Sparkasse"] { height: 27px; }
  .an-bankenleiste img[alt="PSD Bank"] { height: 28px; }
  .an-bankenleiste img[alt="Commerzbank"] { height: 16px; }
  .an-bankenleiste img[alt="Bausparkasse Schwäbisch Hall"] { height: 14px; }
  .an-bankenleiste img[alt="Volksbanken Raiffeisenbanken"] { height: 22px; }
}

/* Die Belegzeile der zweiten Klappfrage: fünf Verweise auf die Institute. */
.an-belege a { color: var(--link); text-decoration: underline; text-underline-offset: .15em; }
.an-belege a:hover { color: var(--fg); }
@media (prefers-reduced-motion: reduce) {
  .an-mehr-pfeil { transition: none; }
}

/* ═══ Ergebnis des Finanzchecks (12.09.2026) ═══
   Die drei Bedingungen als Liste mit Zeichen, Beschriftung und Zahl. Ohne
   diese Regeln stand dort eine Aufzählung mit Punkten, bei der die Zahl direkt
   an der Beschriftung klebte („Haushaltsbrutto ab 5.000 € im Monat6.000 € im
   Monat") — im Quelltext sah alles richtig aus, im Browser nicht. */
.an-zwischen { font-family: var(--display); font-weight: 600; font-size: 1.125rem; letter-spacing: -.01em; line-height: 1.3; color: var(--fg); margin: 0; }
.an-regeln { list-style: none; margin: var(--s-16) 0 0; padding: 0; display: grid; gap: var(--s-16); }
.an-regel { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; }
.an-regel-zeichen { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; font-size: .8125rem; line-height: 1; }
.an-regel.gut .an-regel-zeichen { background: var(--gruen-hell); color: var(--gruen-dunkel); }
.an-regel.schlecht .an-regel-zeichen { background: var(--rot-hell); color: var(--rot); }
.an-regel-text { display: grid; gap: 2px; }
.an-regel-text b { font-weight: 600; color: var(--fg); line-height: 1.35; }
.an-regel-wert { font-size: var(--t-small); color: var(--fg-2); }
.an-regel-rat { font-size: var(--t-small); color: var(--fg-3); }
.an-regel.schlecht .an-regel-wert { color: var(--rot); }

/* Der Ergebniskopf: dieselbe Karte wie nebenan, nur mit einer Farbkante, wenn
   es trägt. Die Aussage steht im Text, nicht in der Farbe — Farbe allein ist
   für jeden Zehnten keine Information. */
.an-ergebnis-kopf { text-align: center; }
.an-ergebnis-kopf.gut { border-top: 3px solid var(--gruen); }
.an-kennzahlen { display: grid; grid-template-columns: 1fr; gap: var(--s-12); margin-top: var(--s-16); }
.an-kennzahlen .an-kennzahl { background: var(--sand); border-radius: var(--r-m, 14px); }
.an-kennzahl-label { margin-top: 2px; font-size: var(--t-small); color: var(--fg-3); }
@media (min-width: 560px) {
  .an-kennzahlen.an-drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Verlaufszeile im Vermögensplan: Jahr links, Vermögen rechts. Ohne diese
   Regel stünden beide Werte ohne Abstand hintereinander — derselbe Fehler wie
   bei den Bedingungen des Finanzchecks, deshalb prüft der Wächter jede
   an-Klasse gegen die Stilvorlagen. */
.an-zeile-wert { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-16); padding: 10px 0; border-bottom: 1px solid var(--rand); }
.an-zeile-wert:last-child { border-bottom: 0; }
.an-zeile-wert b { font-weight: 500; color: var(--fg-2); }
.an-zeile-wert span { font-family: var(--display); font-weight: 600; font-size: 1.125rem; letter-spacing: -.01em; color: var(--fg); }

/* ═══════════════════════════════════════════════════════════════════
   Übergänge der Strecken (13.09.2026, Jeff: „smooth und passend")

   Eine Frage geht nach links hinaus, die nächste kommt von rechts herein.
   Zurück läuft es andersherum — ohne Vorzeichen fühlt sich „zurück" an wie
   „weiter", und der Schritt verliert seine Bedeutung.

   Die Zeiten sind kurz gehalten: 220 ms für den Eintritt, 140 ms für den
   Austritt. Der Austritt läuft im Nachlauf, den die Kacheln ohnehin abwarten
   (160 ms), kostet also nichts. Alles über 300 ms fühlt sich am Handy zäh an.

   REGEL WIE ÜBERALL IM HAUS: Der Endzustand IST der Grundzustand. Die
   Eintritts-Keyframes tragen nur ein `from` und laufen `backwards`; wer die
   Bewegung abschaltet, sieht die fertige Karte, nie eine leere Fläche.
   ═══════════════════════════════════════════════════════════════════ */

/* Bewegt wird die SENKRECHTE Achse, nicht die waagerechte: Eine Karte, die
   seitlich hereinfährt, ragt währenddessen über den Rand, und auf 390 px ist
   das ein echter Überlauf von 2 px — der Wächter hat ihn gemeldet, und er hatte
   recht. Vorwärts kommt die Karte von unten, zurück von oben; die Richtung
   bleibt spürbar, ohne dass etwas über den Rand tritt. Die Spur Maßstab macht
   den Wechsel weich, ohne Platz zu brauchen. */
@keyframes an-rein-rechts { from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.985); } }
@keyframes an-rein-links  { from { opacity: 0; transform: translate3d(0, -14px, 0) scale(.985); } }
@keyframes an-raus-links  { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate3d(0, -10px, 0) scale(.99); } }
@keyframes an-raus-rechts { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate3d(0, 10px, 0) scale(.99); } }

.an-rein-rechts { animation: an-rein-rechts .22s var(--ease-aus) backwards; }
.an-rein-links  { animation: an-rein-links  .22s var(--ease-aus) backwards; }
.an-raus-links  { animation: an-raus-links  .14s var(--ease) forwards; pointer-events: none; }
.an-raus-rechts { animation: an-raus-rechts .14s var(--ease) forwards; pointer-events: none; }

/* Der Startschirm übergibt an die erste Frage: eine Spur nach oben, nicht zur
   Seite — er verschwindet, er wandert nicht. */
@keyframes an-start-raus { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate3d(0, -10px, 0); } }
.an-start-raus { animation: an-start-raus .18s var(--ease) forwards; pointer-events: none; }

/* Die Kacheln kommen nacheinander, 40 ms auseinander. Das liest sich als
   Reihenfolge und nicht als Block, und es ist vorbei, bevor jemand zielt. */
@keyframes an-kachel-rein { from { opacity: 0; transform: translate3d(0, 8px, 0); } }
.an-karte .an-kachel, .an-karte .an-zeile {
  animation: an-kachel-rein .26s var(--ease-aus) backwards;
}
.an-karte .an-kachel:nth-child(1), .an-karte .an-zeile:nth-child(1) { animation-delay: .06s; }
.an-karte .an-kachel:nth-child(2), .an-karte .an-zeile:nth-child(2) { animation-delay: .10s; }
.an-karte .an-kachel:nth-child(3), .an-karte .an-zeile:nth-child(3) { animation-delay: .14s; }
.an-karte .an-kachel:nth-child(4), .an-karte .an-zeile:nth-child(4) { animation-delay: .18s; }
.an-karte .an-kachel:nth-child(n+5), .an-karte .an-zeile:nth-child(n+5) { animation-delay: .22s; }

/* Die Antwort quittiert den Druck sofort: kurz kleiner, dann steht sie. Das
   ist die Rückmeldung, auf die der 160-ms-Nachlauf wartet. */
.an-kachel, .an-zeile { transition: transform var(--d-sm) var(--ease), border-color var(--d-sm) var(--ease), background var(--d-sm) var(--ease); }
.an-kachel:active, .an-zeile:active { transform: scale(.97); }
@keyframes an-gewaehlt { from { transform: scale(.94); } }
.an-kachel.gewaehlt { animation: an-gewaehlt .2s var(--ease-aus) backwards; }

/* Das Ergebnis baut sich in seiner Lesereihenfolge auf: erst die Zahl, dann,
   woraus sie kommt. */
@keyframes an-ergebnis-rein { from { opacity: 0; transform: translate3d(0, 14px, 0); } }
.an-ergebnis > * { animation: an-ergebnis-rein .32s var(--ease-aus) backwards; }
.an-ergebnis > :nth-child(2) { animation-delay: .08s; }
.an-ergebnis > :nth-child(3) { animation-delay: .16s; }
.an-ergebnis > :nth-child(4) { animation-delay: .24s; }
.an-ergebnis > :nth-child(n+5) { animation-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  .an-rein-rechts, .an-rein-links, .an-raus-links, .an-raus-rechts, .an-start-raus,
  .an-karte .an-kachel, .an-karte .an-zeile, .an-kachel.gewaehlt, .an-ergebnis > * { animation: none; }
  .an-kachel:active, .an-zeile:active { transform: none; }
}