/* ===========================================================================
   Diese Datei stand bis zum 29.08.2026 als <style> im Kopf von index.html.

   Sie ist ausgelagert worden, damit die Content-Security-Policy auch für
   Stilangaben ohne 'unsafe-inline' auskommt. Für Skripte ist das seit dem
   28.08.2026 so; die Begründung dort gilt hier abgeschwächt weiter:
   Eingeschleustes CSS führt kein Skript aus, kann die Seite aber entstellen —
   einen Knopf verdecken, eine Warnung unsichtbar machen, eine Zahl an eine
   andere Stelle setzen. In einem Werkzeug, dessen Ausgabe zur Bank getragen
   wird, ist das kein reines Schönheitsproblem.

   Zur selben Umstellung gehören die style-Attribute, die im Markup standen.
   Sie sind zu Klassen geworden; die vierzehn Linien des Ertragsfeldes tragen
   ihre Werte jetzt als .linie-1 bis .linie-14 weiter unten in dieser Datei.
   =========================================================================== */

/* ===========================================================================
   MYPROPLENS — Gestaltung, zweite Fassung

   Design Read: Rechen- und Pruefwerkzeug fuer private Kapitalanleger in
   Deutschland. Publikum: Laien, die am Ende ein Dokument fuer ihre Bank
   brauchen. Damit ist die Sprache vertrauens-erst, nicht ausdrucks-erst.
   Regler: Varianz 4, Bewegung 3, Dichte 5 (Fachwerkzeug, kein Schaufenster).

   Die vorherige Fassung war ein dunkler Werkplan mit Messing-Akzent,
   Grundriss-Wasserzeichen und eigenem Mauszeiger. Diese Fassung ersetzt sie:
   helles Papier, Tinte, eine einzige Akzentfarbe. Der Grund ist nicht
   Geschmack, sondern Zweck. Wer eine Kaufentscheidung ueber 300.000 Euro
   prueft, liest lange Zahlenkolonnen; Papier liest sich dabei ruhiger als eine
   dunkle Flaeche, und das Ergebnis wandert ohnehin in ein gedrucktes
   Bank-Expose.

   Drei Festlegungen, die das ganze Blatt bestimmen:

   1. Eine Akzentfarbe: Kobalt. Sie markiert ausschliesslich Bedienbares,
      also Fokus, aktiven Reiter und Verweise. Sie sagt nie etwas ueber ein
      Ergebnis.
   2. Daneben stehen drei Statusfarben, und die sagen ausschliesslich etwas
      ueber das Ergebnis: Gruen gut, Bernstein Vorbehalt, Rot schlecht. Kein
      Wert ist eingefaerbt, weil es huebsch aussieht.
   3. Zahlen laufen in einer eigenen Schrift mit Tabellenziffern, Text in
      einer humanistischen Grotesk. Wer eine Spalte Betraege ueberfliegt, soll
      die Stellen uebereinander finden.

   Hell und dunkel sind beide vorgesehen und folgen der Systemeinstellung. Die
   Seite kippt nie abschnittsweise: ein Modus, ganze Seite.
   =========================================================================== */

/* ===========================================================================
   MyPropLens — Design-Tokens, Fassung 3 „Lichtung" (18.09.2026)
   ---------------------------------------------------------------------------
   Die Vorgabe steht in entwurf/redesign-2026-09/REDESIGN.md, die Werte mit ihren Messungen
   in entwurf/redesign-2026-09/tokens.css. Nachtgrün statt Blauschwarz, Creme statt Kaltweiß,
   ein warmes Gold als Akzent (seit 19.09.2026; vorher Himmelblau, das
   MyPropLens nach Andis Entscheidung nicht mehr trägt).

   Die drei Farbsysteme bleiben streng getrennt: Der Akzent markiert
   ausschließlich Bedienbares, Grün, Bernstein und Rot sagen ausschließlich
   etwas über ein Ergebnis, und --bild-* gehört ausschließlich der Bildwelt.
   Der Akzent ist bewusst kein Grün — Grün ist hier schon zweimal besetzt,
   als Status „gut" und als Moos in den Bildern.

   Die Namen der früheren Fassung bleiben, wo es sie schon gab. Dazu gehören
   auch die Abstandsskala --raum-* und die Schriftgrößen --g-11 bis --g-32:
   entwurf/redesign-2026-09/tokens.css führt sie nicht mehr, aber rund dreihundert Stellen in
   dieser Datei und in app.js bauen darauf. Sie ersatzlos zu streichen, hätte
   die Seite zerlegt, statt sie umzufärben.
   =========================================================================== */

:root {
    /* Die Seite ist dunkel, unabhängig von der Systemeinstellung. */
    color-scheme: dark;

    /* --- Flächen -------------------------------------------------------
       Kontraste gegen --f-seite gemessen (WCAG 2.x): --t-stark 16,84:1,
       --t-normal 10,63:1, --t-leise 6,34:1, --a-basis 14,14:1. */
    --f-seite:      #0A0E0B;   /* Seitenhintergrund                         */
    --f-panel:      #0F1510;   /* Formularspalte, Tabellenkopf, Fuß         */
    --f-karte:      #131B15;   /* Karten und Zeilen                         */
    --f-tief:       #18221A;   /* Eingabefelder, eingesenkte Flächen        */
    --f-mark:       #1D2920;   /* Zeile unter dem Zeiger, aktive Zeile      */
    --f-glas:       rgba(12, 17, 13, 0.62);  /* alt, nur noch Verweisname   */
    /* Milchglas (REDESIGN.md 13.2): eine Rezeptur für jede Fläche über einem
       Bild. Nur die äußerste Glasfläche zeichnet weich; was in ihr liegt,
       nimmt --f-glas-innen und die Kante, ohne eigenen Blur. */
    --f-glas-dicht: rgba(12, 17, 13, 0.72);  /* Glas mit Text darauf        */
    --f-glas-innen: rgba(10, 14, 11, 0.45);  /* Fläche in einer Glasfläche  */
    --glas-blur:    blur(22px) saturate(1.25);
    --glas-kante:   inset 0 0 0 1px var(--l-glas), inset 0 1px 0 rgba(238, 240, 226, 0.06);

    /* --- Linien -------------------------------------------------------- */
    --l-zart:       #1F2A21;
    --l-mittel:     #2D3B2F;
    --l-stark:      #6F7E6C;   /* 4,51:1 — Kante eines Bedienelements       */
    --l-glas:       rgba(238, 240, 226, 0.14);  /* Kante auf Glas          */

    /* --- Schrift ------------------------------------------------------- */
    --t-stark:      #EEF0E2;   /* Zahlen, Überschriften                     */
    --t-normal:     #BCC2B0;   /* Fließtext, Beschriftungen                 */
    --t-leise:      #8E9685;   /* Hilfetext, Einheiten, Fußnoten            */
    --t-marke:      #EEF0E2;   /* Farbe der Wortmarke (das SVG liest sie)   */

    /* --- Akzent: ausschließlich Bedienbares ---------------------------- */
    /* Warmes Gold, das die warmen Fotos aufnimmt. Gegen das Bernstein des
       Status (--s-halb) gemessen: Abstand 11,6 (CIEDE2000), 9,5 bei
       Protanopie, 8,1 bei Deuteranopie; verlangt sind 8. Ein satteres Gold
       fiel darunter und wäre neben einer bernsteinfarbenen Ampel nicht mehr
       als etwas anderes zu lesen. */
    --a-basis:      #F3DA96;
    --a-hoch:       #FBEBC2;   /* gedrückt                                  */
    --a-flaeche:    #2A2415;   /* aktive Reiterfläche, Auswahl              */
    --a-ring:       rgba(243, 218, 150, 0.45);
    --auf-a:        #0A0E0B;   /* Schrift auf Akzent und auf Creme-Knöpfen  */

    /* --- Eingabefelder --------------------------------------------------
       Die Feldfläche ist die eingesenkte Fläche, die Kante die eines
       Bedienelements. Die frühere Fassung drehte beides in den Akzent; mit
       einem hellen Akzent wäre das eine helle Kante um dreißig Felder und
       damit lauter als jede Zahl daneben. Der volle Akzent bleibt dem
       Zeiger- und dem Fokuszustand. */
    --f-feld:       var(--f-tief);
    --l-feld:       var(--l-stark);

    /* --- Status: ausschließlich Ergebnisse ----------------------------- */
    --s-gut:        #5BE3A6;   /* 12,02:1 */
    --s-gut-f:      #0B2119;
    --s-halb:       #F0B65C;   /* 10,69:1 */
    --s-halb-f:     #251C0D;
    --s-schlecht:   #FF7F7C;   /*  7,94:1 */
    --s-schlecht-f: #271110;

    /* --- Bildwelt: nur für Bilder, nie für Werte ----------------------- */
    --bild-tief:    #0A0E0B;
    --bild-moos:    #45582F;
    --bild-himmel:  #AFC0E6;
    --bild-zelle:   2px;

    /* --- Datenreihen im Diagramm ---------------------------------------
       Bewusst nicht die Statusfarben: Grün und Rot sagen etwas über ein
       Ergebnis, eine Reihe sagt nur, welche Größe gemeint ist. */
    /* Gold und Salbeigrau: Abstand 25,1 (CIEDE2000), 22,3 bei Protanopie,
       24,4 bei Deuteranopie. Das Salbeigrau hält zum Grün des Status 12,9
       und zum Rot 11,4 auch bei Farbfehlsichtigkeit. */
    --reihe-1:      #F3DA96;   /* Gold */
    --reihe-2:      #9EAFA8;   /* Salbeigrau, kein Statusgrün */
    --reihe-gitter: #222D24;

    /* --- Abstände (aus Fassung 2 übernommen) --------------------------- */
    --raum-1:  2px;
    --raum-2:  4px;
    --raum-3:  6px;
    --raum-4:  8px;
    --raum-5:  12px;
    --raum-6:  16px;
    --raum-7:  20px;
    --raum-8:  24px;
    --raum-9:  32px;
    --raum-10: 40px;
    --raum-11: 56px;

    /* --- Radien: genau zwei (REDESIGN.md 13.1) -------------------------
       Einzeilig ist Pille, mehrzeilig ist Fläche. Einen dritten Wert gibt
       es nicht; ein Test in seite.test.js lässt in border-radius nur diese
       beiden, ihre Verweisnamen, 50 % und 0 zu. Die alten Namen bleiben als
       Verweise, damit jede Regel weiter den Namen tragen kann, der sagt,
       was sie rundet. */
    --r-bedien:  999px;        /* Pille: Knöpfe, Felder, Reiter, Chips, Punkte */
    --r-flaeche: 20px;         /* Fläche: Karten, Glas, Dialog, Listen, Bilder */
    --r-pille:  var(--r-bedien);
    --r-feld:   var(--r-bedien);
    --r-punkt:  var(--r-bedien);
    --r-marke:  var(--r-bedien);
    --r-karte:  var(--r-flaeche);
    --r-buehne: var(--r-flaeche);

    /* --- Schrift und Schriftgrößen -------------------------------------
       Drei Familien, alle SIL OFL, alle selbst gehostet in schriften/.
       Instrument Serif hat keinen fetten Schnitt und steht nur ab 24 px. */
    --schrift-anzeige: "Instrument Serif", "Times New Roman", serif;
    --schrift-text:    "Geist", system-ui, -apple-system, sans-serif;
    --schrift-zahl:    "Geist Mono", ui-monospace, "Cascadia Mono", monospace;

    --g-anzeige: clamp(46px, 7.4vw, 112px);  /* Frage, Hero                 */
    --g-h2:      clamp(34px, 4.6vw, 68px);   /* Abschnitt                   */
    --g-h3:      clamp(24px, 2.4vw, 32px);
    --g-text:    17px;
    --g-klein:   14px;
    --g-etikett: 11.5px;   /* Mono, Versalien, Laufweite 0.09em             */

    --g-11: 11px;   /* Versalien-Beschriftung, Einheiten                    */
    --g-12: 12px;   /* Tabellenkopf, Fußnote                                */
    --g-13: 13px;   /* Hilfetext, dichte Tabellenzelle                      */
    --g-14: 14px;   /* Fließtext und Eingabefelder                          */
    --g-16: 16px;   /* Feldbeschriftung, kleine Überschrift                 */
    --g-19: 19px;   /* Abschnittsüberschrift                                */
    --g-24: 24px;   /* Kennzahl                                             */
    --g-32: 32px;   /* Leitzahl im Ergebnis                                 */

    --zeile-anzeige: 0.96;
    --zeile-eng:     1.2;
    --zeile-tab:     1.35;
    --zeile-text:    1.55;

    /* --- Erhebung ------------------------------------------------------ */
    --schwebe: 0 1px 2px rgba(0, 0, 0, 0.5), 0 24px 60px -24px rgba(0, 0, 0, 0.75);

    /* --- Schweben (Einblenden über die Federn) ------------------------- */
    --schwebe-weg:  14px;
    --schwebe-zeit: 0.44;      /* Sekunden, Antwortzeit der Feder           */

    /* --- Bewegung ------------------------------------------------------ */
    --kurve-aus:    cubic-bezier(0.22, 1, 0.36, 1);   /* Ankommen            */
    --kurve-inaus:  cubic-bezier(0.65, 0, 0.35, 1);   /* Wechsel             */
    --kurve:        var(--kurve-aus);
    --zeit-schnell: 120ms;     /* Zeiger, Farbe                             */
    --zeit-normal:  180ms;
    --zeit-mittel:  420ms;     /* Einblenden, Kopfleiste                    */
    --zeit-lang:    900ms;     /* Wort- und Scroll-Einblendung              */
    --zeit-bild:    1100ms;    /* Pixel-Übergang der Bildwelt               */

    --rand:       clamp(16px, 3vw, 40px);
    --spalte-max: 1240px;
}

/* Der frühere Block für die dunkle Systemeinstellung ist entfallen: Seine
   Werte stehen jetzt oben im Wurzelblock und gelten immer. */

/* --- Zahlen ------------------------------------------------------------
   Tabellenziffern halten die Spalten, die durchgestrichene Null trennt 0
   von O. Beides gehört an jede Stelle, an der ein Betrag steht. */
.zahl,
input[inputmode="decimal"],
table td,
table th {
    font-family: var(--schrift-zahl);
    font-variant-numeric: tabular-nums slashed-zero;
    font-feature-settings: "tnum" 1, "zero" 1, "ss01" 1;
}


* { box-sizing: border-box; }

html {
  background: var(--f-seite);
  overflow-x: hidden;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  /* Die schwebende Ergebnisleiste ist 44 px hoch und sitzt am unteren Rand.
     Ohne diesen Wert schiebt der Browser ein Feld beim Tabben nur so weit ins
     Bild, dass die Leiste es zur Hälfte verdeckt — gemessen 28 von 46 px bei
     "Sollzins" und "Tilgung". WCAG 2.2 AA, "Focus Not Obscured (Minimum)". */
  scroll-padding-bottom: 96px;
}

body {
  margin: 0;
  padding: 40px 18px 108px 18px;
  min-height: 100dvh;
  /* Durchsichtig: Die Farbe liegt auf html, dazwischen der Neonraum. */
  background: transparent;
  color: var(--t-stark);
  font-family: var(--schrift-text);
  font-size: 15px;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  /* Letzte Verteidigung, nicht der Schutz. Ueberlaufen soll nichts; wenn doch,
     darf es die Seite nicht seitlich verschiebbar machen. ACHTUNG: Diese Zeile
     hat einen Fehler jahrelang verdeckt — siehe den Block "SCHMALE FENSTER,
     BREITE INHALTE" weiter unten. Sie versteckt Ueberlauf, sie behebt ihn
     nicht, und weil body zentriert, versteckt sie ihn auf BEIDEN Seiten.
     clip statt hidden: hidden macht den Körper zu einem Scrollbehälter, der
     nie scrollt, und daran hielt sich position: sticky fest — die
     Aktionsleiste der Detailansicht klebte deshalb nirgends. */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------------------
   SCHMALE FENSTER, BREITE INHALTE

   Der Fehler, den diese Regeln beheben, ist am 01.09.2026 auf einem iPhone
   aufgefallen und war am Schreibtisch unsichtbar: In der Detailansicht stand
   der Text links angeschnitten, und nach dem ersten Aufklappen liess sich die
   Ansicht nicht mehr zurechtruecken.

   Gemessen bei 375 px Fensterbreite: #detailansicht war 970 px breit und begann
   bei left = -297. Die Ursache ist eine Kette, und jedes Glied fuer sich sieht
   harmlos aus:

     1. Die drei Stufenreiter tragen lange Beschriftungen ("03 Genauere Angaben
        freiwillig", 335 px). Als Flex-Items mit der Vorgabe min-width:auto
        schrumpfen sie nicht unter ihre Inhaltsbreite.
     2. .step-indicators hat zwar flex-wrap:wrap — das greift aber erst, wenn
        der Container schmaler ist als der Inhalt. Er war es nie.
     3. Denn jedes Element der Kette darueber (        #detailansicht, #immoForm) ist selbst ein Flex-Item mit min-width:auto
        und gibt die Inhaltsbreite ungebremst nach oben weiter.
     4. body ist ein zentrierender Flex-Container. Ein zu breites Kind ragt
        deshalb auf BEIDEN Seiten heraus, je zur Haelfte.
     5. overflow-x:hidden am body schneidet beide Ueberstaende ab. Nach rechts
        waere das noch sichtbar gewesen; nach links ist der Text schlicht weg,
        und scrollen kann man dorthin nicht.

   Die Behebung ist deshalb min-width:0 an der ganzen Kette und nicht eine
   Breitenangabe an einer Stelle. Erst damit greift das flex-wrap, das seit je
   an .step-indicators steht.

   Merksatz fuers naechste Mal: Ein Flex- oder Grid-Kind, das schrumpfen
   koennen muss, braucht min-width:0. Die Vorgabe ist auto, und auto heisst
   "mindestens so breit wie mein Inhalt".

   ZWEITER TEIL, und der ist der eigentliche Ausloeser: min-width:0 allein hat
   nichts geaendert. body ist flex-direction:column, und dort wirkt
   flex-shrink auf die HOEHE. Die Breite eines Kindes bestimmt in dieser
   Richtung align-items — und align-items:center gibt ihm seine Inhaltsbreite,
   nicht die des Containers. Eine Untergrenze hilft dagegen nichts; es braucht
   eine Obergrenze. Deshalb max-width:100% an den direkten Kindern von body.

   Die beiden Teile sind beide noetig: max-width:100% haelt die Aussenkante,
   min-width:0 laesst die inneren Flex-Ketten (.detail-kopfzeile,
   .step-indicators) darunter tatsaechlich umbrechen statt zu ueberlaufen. */
body > * {
  max-width: 100%;
}

#detailansicht,
#hauptbereich,
#immoForm,
#progressContainer,
.detail-kopfzeile,
.step-indicators,
.wizard-card,
.schnell {
  min-width: 0;
}

/* Zahlen bekommen Tabellenziffern, damit Betraege in Spalten uebereinander
   stehen. */
/* Der Ergebnisbereich regelt seine Zahlen selbst (tabular-nums slashed-zero,
   siehe Abschnitt ERGEBNIS). Hier bleiben nur die Felder des Formulars. */
input, select, .readonly-field {
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: "tnum" 1, "zero" 1, "ss01" 1;
}

main {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.skip-link {
  position: fixed;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--a-basis);
  color: var(--auf-a);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  padding: 11px 18px;
  border-radius: var(--r-bedien);
  /* Aus Schriftgroesse und Innenabstand allein kamen 42,8 px zusammen. Der
     Sprunglink ist fuer Tastatur- und Screenreader-Nutzer das erste
     Bedienelement der Seite; er faellt nicht unter die Ausnahme fuer
     Verweise im Fliesstext, denn er steht fuer sich. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.skip-link:focus { left: 14px; top: 14px; }

h1, h2, h3, h4, .urteil-satz, .step-title-text h3 { text-wrap: balance; }
p, .help-text, .annahme-hinweis, .haftungshinweis, .freiwillig-hinweis { text-wrap: pretty; }

/* ---------------------------------------------------------------------------
   KOPFZEILE
   Linksbuendig statt mittig: Die Seite ist ein Formular, kein Plakat.
   --------------------------------------------------------------------------- */
.header-container {
  width: 100%;
  max-width: var(--spalte-max);
  margin-bottom: var(--raum-8);
  padding-block: var(--raum-4);
  display: flex;
  align-items: center;
}
h1 {
  font-family: var(--schrift-text);
  font-weight: 600;
  font-size: clamp(var(--g-24), 4vw, var(--g-32));
  letter-spacing: -0.022em;
  line-height: 1.1;
  margin: 0;
  color: var(--t-stark);
}

/* --- Die Wortmarke "Lichtung" --------------------------------------------
   Seit dem 18.09.2026 steht im Kopf die Wortmarke aus werkzeuge/
   baue-wortmarke.py: "my" als gestischer Strich, "prop" fett und "lens"
   normal in einer gerasterten Serife, alles klein. Sie ist ein Verweis und
   keine Ueberschrift; die eine h1 ist die Frage auf der Buehne.

   Farbe: ausschliesslich --t-marke, das das svg selbst liest. Nie Akzent,
   nie Statusfarbe, nie Leuchten (REDESIGN.md 3.3). Der Schein am
   frueheren Zeichen ist deshalb entfallen.

   Hoehe 34 px, also ueber der Mindestgroesse der Fassung "web" (24 px).
   Die Breite folgt aus dem viewBox des svg. */
.kopf-marke {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-radius: var(--r-bedien);
  color: var(--t-marke);
}
.kopf-marke:focus-visible {
  outline: 2px solid var(--a-basis);
  outline-offset: 4px;
}
.wortmarke {
  display: block;
  height: 34px;
  width: auto;
  /* Die Schrift steht im viewBox oberhalb der Mitte: Farbe von y 7,8 bis
     109,9 bei 138 Einheiten Höhe, weil unter der Grundlinie nur das y und
     das p reichen. Mittig gesetzt wirkte die Marke 2,5 px zu hoch. Der
     Ausgleich verschiebt nur die Zeichnung, nicht das Tippziel. */
  position: relative;
  top: 2.5px;
}

/* --- Die Marke baut sich auf (B1) ----------------------------------------
   Ersetzt "Der Name waechst aus MPL" und damit marke-aufbau.js. Reines CSS,
   kein Skript und keine Messung:

     1. "my" zieht sich als Strich, 900 ms ab 150 ms. Der Pfad traegt
        pathLength="1", deshalb rechnet der Strich in 0 bis 1 und bleibt
        richtig, wenn der Erzeuger den Pfad aendert.
     2. "prop" tritt ab 700 ms in 14 Pixelstufen von links hervor.
     3. "lens" genauso, ab 950 ms. Fertig nach 1650 ms.

   Der verborgene Anfangszustand steht AUSSCHLIESSLICH in den Keyframes und
   die Regeln ausschliesslich in prefers-reduced-motion: no-preference. Wer
   Bewegung abbestellt hat, sieht die fertige Marke, weil nie etwas anderes
   gesetzt wurde; ohne Stylesheet steht sie ebenso da. Das ist derselbe Weg,
   den schon das fruehere Zeichen genommen hat.

   Die Stufen sind Absicht: Die Marke ist gerastert, und ein weicher
   Wischer liefe quer durch die Zellen. steps(14) laesst sie spaltenweise
   erscheinen. */
@media (prefers-reduced-motion: no-preference) {
  .kopf-marke .m-my {
    stroke-dasharray: 1;
    animation: marke-strich 900ms var(--kurve-inaus) 150ms both;
  }
  .kopf-marke .m-prop {
    animation: marke-raster 700ms steps(14, end) 700ms both;
  }
  .kopf-marke .m-lens {
    animation: marke-raster 700ms steps(14, end) 950ms both;
  }
}
@keyframes marke-strich {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}
@keyframes marke-raster {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@media print {
  /* Auf Papier steht die Marke fertig da, auch wenn der Ausdruck waehrend
     des Aufbaus ausgeloest wird. */
  .kopf-marke * { animation: none !important; }
}

/* ---------------------------------------------------------------------------
   REITER DER DREI STUFEN
   --------------------------------------------------------------------------- */
.wizard-progress-container {
  width: 100%;
  max-width: var(--spalte-max);
  margin-bottom: var(--raum-6);
}
.step-indicators {
  display: flex;
  gap: var(--raum-2);
  flex-wrap: wrap;
}
/* Reiter, keine Marken: kleiner Bedienradius statt Pillenform. Eine Pille
   liest sich als Kennzeichen; hier steht aber eine Bedienung, die man
   anklickt. */
.step-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-3);
  /* --l-stark statt --l-mittel: Die Kante ist das Einzige, was den Reiter
     als Bedienelement ausweist, und muss deshalb 3:1 gegen den Grund
     erreichen. Gemessen 4,13:1 gegen die Seite, 3,82:1 gegen die Karte. */
  border: 1px solid var(--l-stark);
  background: var(--f-karte);
  color: var(--t-normal);
  font-family: var(--schrift-text);
  font-size: var(--g-14);
  font-weight: 500;
  padding: var(--raum-4) var(--raum-5);
  /* 44 px ist die Untergrenze für ein Ziel, das mit dem Daumen getroffen
     werden soll. Aus Schriftgröße und Innenabstand kamen nur rund 36. */
  min-height: 44px;
  border-radius: var(--r-bedien);
  cursor: pointer;
  transition: border-color var(--zeit-schnell) var(--kurve),
              color var(--zeit-schnell) var(--kurve),
              background var(--zeit-schnell) var(--kurve);
}
/* Der Zeigerzustand muss über dem Ruhezustand liegen, und der trägt jetzt
   selbst --l-stark. --t-leise erreicht 5,43:1. */
.step-pill:hover { border-color: var(--t-leise); color: var(--t-stark); }
/* Der Fokus muss deutlicher sein als der Zeigerzustand: Umriss plus Ring. */
.step-pill:focus-visible {
  outline: 2px solid var(--a-basis);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--a-ring);
}
.step-pill.active {
  border-color: var(--a-basis);
  background: var(--a-flaeche);
  color: var(--t-stark);
}
.pill-nr {
  font-family: var(--schrift-zahl);
  font-size: var(--g-12);
  color: var(--t-leise);
}
.step-pill.active .pill-nr { color: var(--a-basis); }
.pill-frei {
  font-size: var(--g-11);
  color: var(--t-leise);
  font-weight: 400;
}

/* ---------------------------------------------------------------------------
   EINGABEKARTEN
   --------------------------------------------------------------------------- */
form { width: 100%; max-width: var(--spalte-max); }

/* Kein Schatten im Eingabebereich: Die Karte trennt sich ueber ihre 1-px-Kante
   und den Wechsel der Flaeche gegen die Seite, wie im Ergebnisbereich auch.
   --schwebe bleibt der Ergebnisleiste vorbehalten. */
.wizard-card {
  display: none;
  width: 100%;
  background: var(--f-karte);
  border: 1px solid var(--l-mittel);
  border-radius: var(--r-karte);
  padding: var(--raum-7);
  margin-bottom: var(--raum-6);
}
.wizard-card.active { display: block; animation: einblenden .22s ease-out; }
@keyframes einblenden {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

.step-header { margin-bottom: var(--raum-6); }
.step-icon { display: none; }
.step-title-text h3 {
  margin: 0;
  font-size: var(--g-19);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--t-stark);
}
.step-title-text p {
  margin: var(--raum-3) 0 0 0;
  font-size: var(--g-14);
  color: var(--t-normal);
  max-width: 62ch;
}

/* Der Abstand zwischen zwei Gruppen ist bewusst das Vierfache des Abstands
   zwischen Beschriftung und Feld (24 gegen 6). Eine Beschriftung gehoert zu
   dem Feld unter ihr, nicht zu dem Hilfetext ueber ihr — und weil der
   Hilfetext mehrzeilig und damit optisch schwer ist, entscheidet allein der
   Abstand darueber, wem die Beschriftung zugeschlagen wird. Bei 16 gegen 6
   lag sie dazwischen. */
.eingabe-gruppe { margin-bottom: var(--raum-8); }
label {
  display: block;
  font-size: var(--g-13);
  font-weight: 500;
  color: var(--t-stark);
  margin-bottom: var(--raum-3);
}

/* Feldhoehe: ein Dashboard-Feld, kein Touch-Formular. Auf schmalen Fenstern
   steigt die Schrift wieder auf 16 px — siehe Abschnitt SCHMALE FENSTER. */
input[type="text"], input[type="number"], select {
  width: 100%;
  min-height: 34px;
  background: var(--f-feld);
  border: 1px solid var(--l-feld);
  color: var(--t-stark);
  font-family: var(--schrift-zahl);
  font-size: var(--g-14);
  /* Als Pille braucht das Feld seitlich mehr Luft, sonst steht der Wert
     in der Rundung. */
  padding: var(--raum-3) var(--raum-6);
  outline: none;
  border-radius: var(--r-bedien);
  transition: border-color var(--zeit-schnell) var(--kurve),
              box-shadow var(--zeit-schnell) var(--kurve),
              background var(--zeit-schnell) var(--kurve);
}
input:hover, select:hover { border-color: var(--a-basis); }
/* Der Fokus traegt einen Ring aus der Akzentfarbe und ist damit deutlich
   staerker als der Zeigerzustand, der nur die Kante nachdunkelt. */
input:focus, select:focus {
  border-color: var(--a-basis);
  background: var(--f-karte);
  box-shadow: 0 0 0 3px var(--a-ring);
}
input::placeholder { color: var(--t-leise); }

/* --- Flaechen, die der Browser selbst zeichnet ----------------------------
   Textauswahl, Schreibmarke, Bildlaufleiste und die Innenfarbe von Auswahl-
   feldern kommen sonst aus der Systemvoreinstellung und gehoeren damit zu
   keinem Entwurf. Sie tragen den Akzent wie jedes andere Bedienelement. */
::selection {
  background: var(--a-flaeche);
  color: var(--t-stark);
}
input, select, textarea { caret-color: var(--a-basis); }
:root {
  accent-color: var(--a-basis);
  scrollbar-color: var(--l-stark) transparent;
  scrollbar-width: thin;
}
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--l-stark);
  border-radius: var(--r-punkt);
  border: 3px solid var(--f-seite);
}
::-webkit-scrollbar-thumb:hover { background: var(--t-leise); }
select {
  appearance: none;
  font-family: var(--schrift-text);
  /* Platz fuer den Pfeil, den die Huelle zeichnet. */
  padding-right: var(--raum-10);
}
/* Der Pfeil gehoert der Huelle, nicht dem Feld. Als Hintergrundbild des
   Feldes zeichnete Chromium ihn beim Aufklappen gekachelt ueber die ganze
   Zeile, obwohl "background-repeat: no-repeat" gesetzt war. Ein
   Pseudoelement kann das nicht passieren, und die Farbe kommt direkt aus dem
   Token statt aus einem in JavaScript zusammengesetzten SVG. */
.auswahl {
  position: relative;
  display: block;
}
.auswahl::after {
  content: "";
  position: absolute;
  right: var(--raum-7);
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -4px;
  border-right: 1.5px solid var(--l-feld);
  border-bottom: 1.5px solid var(--l-feld);
  transform: rotate(45deg);
  /* Der Pfeil liegt ueber dem Feld; ohne das ginge jeder Druck genau auf
     seiner Flaeche ins Leere, statt das Feld aufzuklappen. */
  pointer-events: none;
  transition: border-color var(--zeit-schnell) var(--kurve);
}
.auswahl:hover::after { border-color: var(--a-basis); }
select option { background: var(--f-karte); color: var(--t-stark); }

/* Ein abgeleitetes Feld nimmt keine Eingabe an und traegt deshalb auch nicht
   den Akzent: Farbe heisst auf dieser Seite "anzufassen". Es bleibt bei der
   gestrichelten Kante im neutralen Grau der Linien. */
.readonly-field {
  background: transparent !important;
  border-style: dashed !important;
  border-color: var(--l-stark) !important;
  color: var(--t-normal);
}

/* Der Hilfetext stand auf --t-normal, der Farbe des Fliesstextes, und war
   damit genauso laut wie die Beschriftung und der Wert daneben. --t-leise ist
   die Stufe, die die Tokens fuer genau diesen Zweck vorsehen: Hilfetext,
   Einheiten, Fussnoten. Gemessen gegen die Karte, auf der die Felder stehen:
   5,03:1 statt 8,37:1 — ueber den 4,5:1 fuer normalen Text, und auf Papier
   bleibt es bei den 7,87:1 des Papier-Farbsatzes. */
.help-text {
  font-size: var(--g-13);
  line-height: var(--zeile-text);
  color: var(--t-leise);
  margin-top: var(--raum-3);
  max-width: 65ch;
}

/* Spalten- und Zeilenabstand sind hier getrennt: Der Zeilenabstand des
   Rasters legt sich zwischen Beschriftung und Feld und zwischen Feld und
   Hilfetext, und dort gelten schon --raum-3 aus deren eigenen Abstaenden.
   Mit gap: 16px standen die Felder eines Paares 22 px unter ihrer
   Beschriftung, die Felder daneben aber nur 6 px — dieselbe Beziehung,
   zweierlei Abstand. */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--raum-6);
  row-gap: 0;
}
.form-row > .eingabe-gruppe { min-width: 0; }
/* Zwei Felder nebeneinander sollen auf gleicher Hoehe beginnen, auch wenn die
   eine Beschriftung zweizeilig ist. Das Raster hat drei Zeilen: Beschriftung,
   Feld, Hilfetext. Frueher waren es zwei; der Hilfetext landete dann in
   derselben Zeile wie das Feld und lag sichtbar darueber. */
@supports (grid-template-rows: subgrid) {
  .form-row { grid-template-rows: auto auto auto; }
  .form-row > .eingabe-gruppe { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
  .form-row > .eingabe-gruppe > label { align-self: end; }
}

/* Ein Feld, dessen Wert nur angenommen ist, wird sichtbar markiert. */
.feld-ungeprueft {
  border-color: var(--s-halb) !important;
  background: var(--s-halb-f) !important;
}

/* ---------------------------------------------------------------------------
   HINWEISE
   Alle Hinweise haben dieselbe Form: 1-px-Kante ringsum und eine getoente
   Flaeche. Die Flaeche sagt, worum es geht.

   Vorher trug jeder Hinweis links einen 3 px starken farbigen Balken. Der ist
   das haeufigste Erkennungszeichen beliebiger Baukasten-Oberflaechen — und die
   Bedeutung traegt hier ohnehin die Flaeche, nicht der Balken.
   --------------------------------------------------------------------------- */
.annahme-hinweis, .annahmen-block, .steuer-disclaimer, .selbstaendig-hinweis,
.freiwillig-hinweis, .haftungshinweis, .speicher-hinweis {
  font-size: var(--g-13);
  line-height: var(--zeile-text);
  border-radius: var(--r-karte);
  padding: var(--raum-5);
  border: 1px solid var(--l-mittel);
  background: var(--f-panel);
  color: var(--t-normal);
}
/* Dieselbe Grundform fuer die drei Hinweise im Ergebnisbereich. Sie stehen
   hier nur, weil sie frueher dieselbe Regel mitbenutzt haben. */
.reserve-satz, .haushalt-hinweis, .beleihung-hinweis {
  font-size: var(--g-13);
  line-height: var(--zeile-text);
  border-radius: var(--r-flaeche);
  padding: var(--raum-5) var(--raum-6);
  border: 1px solid var(--l-mittel);
  background: var(--f-panel);
  color: var(--t-normal);
}
/* Ein angenommener Wert ist eine Aussage ueber das Ergebnis, kein Bedienelement:
   deshalb Bernstein, nicht der Akzent. */
.annahme-hinweis {
  margin-top: var(--raum-3);
  border-color: var(--s-halb);
  background: var(--s-halb-f);
  color: var(--t-stark);
}
/* Ein Anhaltspunkt ist kein Fehler, nur keine Erhebung: neutrale Flaeche statt
   Warnfarbe. Ein gefundener Mietspiegel ist eine gute Nachricht. */
.annahme-hinweis.anhaltspunkt {
  border-color: var(--l-mittel);
  background: var(--f-panel);
  color: var(--t-normal);
}
.annahme-hinweis.mietspiegel {
  border-color: var(--s-gut);
  background: var(--s-gut-f);
  color: var(--t-stark);
}
.annahmen-block {
  margin: var(--raum-6) 0;
  border-color: var(--s-halb);
  background: var(--s-halb-f);
}
.annahmen-block strong, .haftungshinweis strong, .reserve-satz strong,
.haushalt-hinweis strong, .beleihung-hinweis strong, .speicher-hinweis strong {
  color: var(--t-stark);
  font-weight: 600;
}
/* Zwischenüberschrift innerhalb einer Karte. Stufe 3 hat vier Abschnitte:
   einmalige Kosten, laufende Kosten, Finanzierung, Steuer. */
.abschnitt-titel {
  font-size: var(--g-11);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--t-leise);
  margin: var(--raum-9) 0 var(--raum-5) 0;
  padding-bottom: var(--raum-3);
  border-bottom: 1px solid var(--l-mittel);
}
.abschnitt-titel:first-of-type { margin-top: var(--raum-2); }

.annahmen-titel {
  font-weight: 600;
  font-size: var(--g-14);
  color: var(--t-stark);
  margin-bottom: var(--raum-3);
}
.annahmen-text { margin: 0; }
.annahmen-block label { margin-top: var(--raum-5); }
.freiwillig-hinweis { margin-bottom: var(--raum-6); }
.steuer-disclaimer, .selbstaendig-hinweis { margin-top: var(--raum-5); }
.haftungshinweis {
  width: 100%;
  max-width: var(--spalte-max);
  margin: 0 0 var(--raum-8) 0;
}
.speicher-hinweis {
  width: 100%;
  max-width: var(--spalte-max);
  margin: calc(var(--raum-4) * -1) 0 var(--raum-6) 0;
  border-color: var(--s-gut);
  background: var(--s-gut-f);
  color: var(--t-stark);
}
.speicher-hinweis[hidden] { display: none; }

/* ---------------------------------------------------------------------------
   KNOEPFE
   Genau eine erste Handlung je Blatt traegt Flaeche, alles andere ist Umriss.
   --------------------------------------------------------------------------- */
.button-bar { display: flex; gap: var(--raum-4); justify-content: space-between; margin-top: var(--raum-7); }
.action-bar { display: flex; gap: 10px; justify-content: flex-end; margin-bottom: 22px; flex-wrap: wrap; }

.btn-nav, .action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font-family: var(--schrift-text);
  font-size: var(--g-14);
  font-weight: 500;
  padding: var(--raum-4) var(--raum-6);
  border-radius: var(--r-bedien);
  border: 1px solid var(--a-basis);
  background: var(--a-basis);
  color: var(--auf-a);
  cursor: pointer;
  transition: background var(--zeit-schnell) var(--kurve),
              border-color var(--zeit-schnell) var(--kurve),
              color var(--zeit-schnell) var(--kurve),
              transform var(--zeit-schnell) var(--kurve);
}
.btn-nav:hover { background: var(--a-hoch); border-color: var(--a-hoch); }
/* Umriss plus Ring: deutlich staerker als der Zeigerzustand, der nur die
   Flaeche eine Stufe wechselt. */
.btn-nav:focus-visible {
  outline: 2px solid var(--a-basis);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--a-ring);
}
.action-btn:focus-visible { outline: 2px solid var(--a-basis); outline-offset: 2px; }
.btn-nav:active, .action-btn:active, .step-pill:active { transform: translateY(1px); }

.btn-prev, .action-btn {
  background: var(--f-karte);
  color: var(--t-stark);
  border-color: var(--l-stark);
}
.btn-prev:hover, .action-btn:hover {
  background: var(--f-tief);
  border-color: var(--t-leise);
  color: var(--t-stark);
}

/* Die Aktionsleiste der Detailansicht. Sie stand rechtsbuendig und klein
   ueber einer Seite voller Zahlen und ging darin unter; jetzt beginnt sie
   dort, wo auch der Inhalt beginnt, und traegt dieselbe Bauform wie die
   Knoepfe der Schnellpruefung. */
.action-bar {
  justify-content: flex-start;
  gap: var(--raum-5);
  margin-bottom: var(--raum-9);
}
.action-btn {
  gap: var(--raum-4);
  padding: var(--raum-6) var(--raum-7);
  font-size: var(--g-15);
  border-color: var(--l-stark);
}
/* Das Zeichen traegt den Akzent, die Beschriftung die Textfarbe: Farbe steht
   neben der Schrift, nie in der Schrift. */
.action-btn svg { width: 18px; height: 18px; color: var(--a-basis); }

.action-btn.primaer,
.action-btn.primaer:hover {
  background: var(--a-basis);
  border-color: var(--a-basis);
  color: var(--auf-a);
  font-weight: 600;
}
.action-btn.primaer:hover { background: var(--a-hoch); border-color: var(--a-hoch); }
.action-btn.primaer svg { color: var(--auf-a); }

/* ---------------------------------------------------------------------------
   ERGEBNIS
   Financial Dashboard: dichte Daten, ruhige Flaechen, Kanten statt Schatten.
   Karten trennen sich ueber eine 1-px-Kante und den Wechsel der Flaeche,
   nicht ueber Weichzeichnung. --schwebe bleibt der einen Sache vorbehalten,
   die tatsaechlich ueber der Seite schwebt: der Ergebnisleiste.
   --------------------------------------------------------------------------- */
.dashboard-container { width: 100%; max-width: var(--spalte-max); }

/* Im Ergebnisbereich steht ueberall eine Zahl — im Urteilssatz genauso wie in
   der Tabelle. Tabellenziffern halten die Spalten, die durchgestrichene Null
   trennt 0 von O. Deshalb gilt beides fuer den ganzen Bereich, und nicht nur
   fuer die Stellen, an denen ein Betrag allein steht. */
.dashboard-container, .ergebnis-leiste {
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: "tnum" 1, "zero" 1, "ss01" 1;
}

.urteil-card, .haushalt-card {
  background: var(--f-karte);
  border: 1px solid var(--l-mittel);
  border-radius: var(--r-karte);
  padding: var(--raum-7);
  margin-bottom: var(--raum-5);
}
/* Den Status tragen der Ampelpunkt, die Ueberschrift und die eingefaerbte Zahl.
   Die Karte bekommt dazu eine Kante in derselben Farbe — ringsum und 1 px stark,
   nicht als Balken an einer Seite. */
.urteil-card.gruen, .haushalt-card.gruen { border-color: var(--s-gut); }
.urteil-card.gelb,  .haushalt-card.gelb  { border-color: var(--s-halb); }
.urteil-card.rot,   .haushalt-card.rot   { border-color: var(--s-schlecht); }

.urteil-kopf { display: flex; align-items: flex-start; gap: var(--raum-4); margin-bottom: var(--raum-5); }
.urteil-ampel {
  margin-top: var(--raum-3);
  width: var(--raum-4);
  height: var(--raum-4);
  border-radius: var(--r-punkt);
  background: var(--t-leise);
  flex: none;
}
.urteil-card.gruen .urteil-ampel, .haushalt-card.gruen .urteil-ampel { background: var(--s-gut); }
.urteil-card.gelb  .urteil-ampel, .haushalt-card.gelb  .urteil-ampel { background: var(--s-halb); }
.urteil-card.rot   .urteil-ampel, .haushalt-card.rot   .urteil-ampel { background: var(--s-schlecht); }
/* Die Ampel kann ihren Zustand auch selbst tragen, etwa in der festen Leiste,
   wo es keine Karte darum gibt. */
.urteil-ampel.gruen, .ergebnis-leiste-ampel.gruen { background: var(--s-gut); }
.urteil-ampel.gelb,  .ergebnis-leiste-ampel.gelb  { background: var(--s-halb); }
.urteil-ampel.rot,   .ergebnis-leiste-ampel.rot   { background: var(--s-schlecht); }

.urteil-stufe {
  font-size: var(--g-19);
  line-height: var(--zeile-eng);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--t-stark);
}
/* Steht als Unterzeile direkt unter der Stufe, in einer eigenen Huelle neben
   der Ampel. */
.urteil-kopf > div { flex: 1 1 0; min-width: 0; }
.urteil-bezug {
  font-size: var(--g-12);
  color: var(--t-leise);
  margin-top: var(--raum-1);
}
.urteil-satz {
  font-size: var(--g-16);
  line-height: var(--zeile-text);
  color: var(--t-stark);
  margin: 0 0 var(--raum-3) 0;
  max-width: 62ch;
}
.urteil-spanne { font-size: var(--g-13); color: var(--t-normal); }
.urteil-spanne:empty { display: none; }

/* Kennzahlen ohne eigene Kaesten: Haarlinien trennen, der Wert traegt. */
.urteil-zahlen {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: var(--raum-6);
  border-top: 1px solid var(--l-mittel);
  padding-top: var(--raum-6);
}
.urteil-zahl { padding: 0 var(--raum-6); border-left: 1px solid var(--l-zart); }
.urteil-bezug { text-wrap: pretty; }
.urteil-zahl:first-child { padding-left: 0; border-left: 0; }
.urteil-zahl .label {
  display: block;
  font-size: var(--g-11);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--t-leise);
  margin-bottom: var(--raum-2);
}
/* Vier Werte nebeneinander: Ein achtstelliger Eurobetrag ("290.000,00 €")
   muss in einer Zeile stehen. Die Spanne endet deshalb bei --g-24 und faellt
   in engen Fenstern auf --g-19, statt umzubrechen. */
.urteil-zahl .wert {
  display: block;
  font-family: var(--schrift-zahl);
  font-size: clamp(var(--g-19), 2.1vw, var(--g-24));
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: "tnum" 1, "zero" 1, "ss01" 1;
  white-space: nowrap;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: var(--zeile-eng);
  color: var(--t-stark);
}
.urteil-zahl .sub {
  display: block;
  font-size: var(--g-12);
  color: var(--t-leise);
  margin-top: var(--raum-2);
}

.haushalt-hinweis { margin-top: var(--raum-5); }

/* Hinweisfelder im Ergebnisbereich laufen dichter als im Formular: Hier
   stehen sie zwischen Karten, nicht zwischen Eingabefeldern. */
.haushalt-hinweis, .beleihung-hinweis, .reserve-satz {
  font-size: var(--g-13);
  padding: var(--raum-5) var(--raum-6);
  border-radius: var(--r-flaeche);
}

/* Die angenommenen Werte für den Ausdruck. Am Bildschirm sind sie aus: Dort
   steht jeder dieser Werte in seinem Eingabefeld, mit Beschriftung und
   Erklärung, und eine zweite Liste daneben wäre eine Dopplung. Im Druck fehlt
   das Formular, und dann sind sie die einzige Stelle, an der die Annahmen
   stehen. */
.annahmen-druck {
  display: none;
  break-inside: avoid;
  margin-top: var(--raum-9);
  padding-top: var(--raum-7);
  border-top: 1px solid var(--l-stark);
}
.annahmen-druck h4 { margin-top: var(--raum-7); }
.annahmen-druck-vorspann {
  font-size: var(--g-12);
  line-height: var(--zeile-text);
  color: var(--t-leise);
  margin: 0 0 var(--raum-6);
}
.annahmen-druck-quelle {
  font-size: var(--g-11);
  line-height: var(--zeile-text);
  color: var(--t-leise);
  margin: var(--raum-4) 0 0;
}
/* Nur die Sichtbarkeit hängt am Druck. Alles andere steht außerhalb der
   Druckregel, damit es sich am Bildschirm nachmessen lässt — eine Farbe, die
   ausschließlich im Druck gilt, prüft sonst niemand. */
@media print { .annahmen-druck { display: block; } }

/* Der Vorbehalt aus Spec 10. Er steht leiser als die Liste darüber, weil er sie
   einordnet und nicht selbst ein Befund ist — aber als Fließtext auf --t-leise,
   nicht darunter. */
.risiko-vorbehalt {
  font-size: var(--g-12);
  line-height: var(--zeile-text);
  color: var(--t-leise);
  margin: var(--raum-5) 0 0;
}

/* --- Risiken --- */
.risiko-block {
  background: var(--f-karte);
  border: 1px solid var(--l-mittel);
  border-radius: var(--r-karte);
  padding: var(--raum-6) var(--raum-7);
  margin-bottom: var(--raum-5);
}
.risiko-titel {
  font-size: var(--g-16);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: var(--raum-5);
  color: var(--t-stark);
}
.risiko-zeile {
  display: flex;
  gap: var(--raum-5);
  align-items: flex-start;
  padding: var(--raum-4) 0;
  font-size: var(--g-13);
  line-height: var(--zeile-text);
  color: var(--t-normal);
  border-bottom: 1px solid var(--l-zart);
  font-variant-numeric: tabular-nums slashed-zero;
}
.risiko-zeile:last-child { border-bottom: 0; padding-bottom: 0; }
.risiko-symbol {
  flex: none;
  width: 18px; height: 18px;
  color: var(--t-leise);
  margin-top: 1px;
}
/* Das Wort zum Zustand steht im Text, nicht im Zeichen: Ein Zeichen allein
   laesst sich nicht vorlesen, und Farbe allein darf nie die einzige Aussage
   sein. Sichtbar ist es nicht — daneben steht ohnehin der ganze Satz. */
.nur-vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.risiko-zeile strong { color: var(--t-stark); font-weight: 600; }
.risiko-zeile.warnung .risiko-symbol, .risiko-zeile.warnung strong { color: var(--s-schlecht); }
.risiko-zeile.hinweis .risiko-symbol, .risiko-zeile.hinweis strong { color: var(--s-halb); }
.risiko-zeile.ok .risiko-symbol, .risiko-zeile.ok strong { color: var(--s-gut); }
.risiko-zeile.unbestimmt { color: var(--t-leise); }

.reserve-satz { margin-bottom: var(--raum-5); font-variant-numeric: tabular-nums slashed-zero; }
.reserve-erklaerung {
  font-size: var(--g-13);
  line-height: var(--zeile-text);
  color: var(--t-normal);
  margin-top: var(--raum-3);
}

/* --- Kennzahlenkacheln ---
   Ein Raster aus Haarlinien: Der 1-px-Spalt zeigt die Rasterfarbe durch, die
   Kachel selbst traegt keine eigene Kante und keinen Schatten. */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--l-mittel);
  border: 1px solid var(--l-mittel);
  border-radius: var(--r-karte);
  overflow: hidden;
  margin-bottom: var(--raum-5);
}
.kpi-card { background: var(--f-karte); padding: var(--raum-6) var(--raum-7); }
.kpi-card h4 {
  margin: 0 0 var(--raum-3) 0;
  font-size: var(--g-11);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--t-leise);
}
/* Ein achtstelliger Eurobetrag darf nicht umbrechen. */
.kpi-value {
  font-family: var(--schrift-zahl);
  font-size: var(--g-24);
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: "tnum" 1, "zero" 1, "ss01" 1;
  white-space: nowrap;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--t-stark);
  line-height: var(--zeile-eng);
}
.kpi-value-unbestimmt {
  font-family: var(--schrift-text);
  font-size: var(--g-14);
  white-space: normal;
  font-weight: 400;
  color: var(--t-leise);
}
.kpi-desc {
  font-size: var(--g-12);
  line-height: var(--zeile-text);
  color: var(--t-normal);
  margin-top: var(--raum-4);
}

/* --- Diagramm --- */
.chart-card {
  background: var(--f-karte);
  border: 1px solid var(--l-mittel);
  border-radius: var(--r-karte);
  padding: var(--raum-6) var(--raum-7);
  margin-bottom: var(--raum-5);
}
.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--raum-5);
  margin-bottom: var(--raum-5);
}
.chart-header h3 { margin: 0; font-size: var(--g-16); font-weight: 600; letter-spacing: -0.01em; }
.chart-header span { font-size: var(--g-12); color: var(--t-leise); text-align: right; }
.chart-wrapper { height: 300px; position: relative; }

/* Legende des Diagramms. Der Schluessel traegt die Reihenfarbe, der Text die
   Textfarbe der Seite: Farbe steht neben der Schrift, nie in der Schrift. */
.diagramm-legende {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-3) var(--raum-7);
  list-style: none;
  margin: 0 0 var(--raum-5) 0;
  padding: 0;
  font-size: var(--g-13);
  color: var(--t-stark);
}
.diagramm-legende li { display: flex; align-items: center; gap: var(--raum-4); }
.legenden-schluessel {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}

/* --- Aufklapper --- */
.accordion-item {
  background: var(--f-karte);
  border: 1px solid var(--l-mittel);
  border-radius: var(--r-karte);
  margin-bottom: var(--raum-4);
  overflow: hidden;
}
.accordion-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--raum-5);
  border: 0;
  background: none;
  text-align: left;
  font-family: var(--schrift-text);
  font-size: var(--g-14);
  font-weight: 500;
  color: var(--t-stark);
  padding: var(--raum-5) var(--raum-7);
  cursor: pointer;
  transition: background var(--zeit-schnell) var(--kurve);
}
.accordion-header:hover { background: var(--f-mark); }
.accordion-header:focus-visible { outline: 2px solid var(--a-basis); outline-offset: -2px; }
.accordion-pfeil {
  transition: transform var(--zeit-normal) var(--kurve);
  display: inline-block;
  color: var(--t-leise);
  font-size: var(--g-11);
}
.accordion-header[aria-expanded="true"] .accordion-pfeil { transform: rotate(180deg); }
/* Das obere Polster ist bewusst winzig: Der Kopf darueber traegt schon Luft.
   Die Feder misst scrollHeight, das Polster gehoert also zur gefederten
   Hoehe — Aenderungen hier bleiben deshalb ohne Wirkung auf die Mechanik. */
.accordion-body { padding: var(--raum-1) var(--raum-7) var(--raum-6) var(--raum-7); display: none; }
.accordion-body.open, .accordion-body.faehrt { display: block; }
.accordion-body h4 {
  font-size: var(--g-12);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--t-leise);
  margin: var(--raum-6) 0 var(--raum-4) 0;
}

/* Eine Zeile je Posten, ohne Linie unter jeder Zeile. Getrennt wird nur, wo
   wirklich eine Summe steht; die Trennlinien dafuer stehen im Markup. */
.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--raum-6);
  padding: var(--raum-3) 0;
  font-size: var(--g-13);
  line-height: var(--zeile-tab);
}
.detail-row span { color: var(--t-normal); }
.detail-row strong {
  font-family: var(--schrift-zahl);
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: "tnum" 1, "zero" 1, "ss01" 1;
  font-weight: 500;
  color: var(--t-stark);
  white-space: nowrap;
}
.detail-row:last-child { padding-bottom: 0; }
/* Ein hervorgehobener Posten steht links in der Textschrift, nicht in der
   Zahlenschrift. Mono ist fuer Betraege da, nicht fuer Bezeichnungen. */
.detail-row span strong { font-family: var(--schrift-text); font-weight: 600; color: var(--t-stark); }
/* Eine Zeile, deren Wert ein Satz ist und kein Betrag. Das nowrap darueber ist
   fuer Betraege gedacht — es haelt Zahl und Eurozeichen zusammen. Steht dort
   ein Satz wie "streng gerechnet keiner, guenstig gerechnet bis 153.585,21 €",
   kann er nirgends umbrechen und ragt aus seiner Karte heraus; gemessen am
   02.09.2026 bei 375 px waren es 253 px nach rechts und 142 px nach links, und
   nach links ist der Text weg, weil dorthin nicht gescrollt werden kann.
   Die Betraege im Satz bleiben trotzdem zusammen: formatiereEuro() setzt ein
   schmales geschuetztes Leerzeichen vor die Einheit. */
.detail-row-satz strong { white-space: normal; }
/* Leere Hinweisfelder nehmen sonst Platz und Rahmen ein. */
.beleihung-hinweis:empty, .annahme-hinweis:empty, .haushalt-hinweis:empty { display: none; }

/* Trennt eine Summe von den Posten darueber. Die einzige Linie in diesen
   Listen, damit sie auch etwas bedeutet. */
.summen-linie {
  border: 0;
  border-top: 1px solid var(--l-mittel);
  margin: var(--raum-4) 0;
}

/* --- Tilgungstabelle ---
   Dichte Zeilen, Kopfzeile auf der Panelflaeche, Zahlen rechts, Bezeichnung
   links. Getrennt wird mit der zarten Linie: Bei zwanzig Zeilen untereinander
   wuerde die mittlere zum Gitter. */
.tabelle-wrapper {
  overflow-x: auto;
  border: 1px solid var(--l-mittel);
  border-radius: var(--r-flaeche);
  margin-top: var(--raum-4);
  /* Zwei Verläufe, die am Rand kleben, und zwei, die mitscrollen. Solange
     etwas verdeckt ist, steht der klebende Verlauf allein da und zeigt eine
     weiche Kante; ist das Ende erreicht, deckt der mitscrollende ihn zu. Der
     Kniff braucht kein JavaScript und kein Ereignis am Scrollbalken. */
  background:
    linear-gradient(to right, var(--f-karte) 30%, transparent) left / 28px 100% no-repeat local,
    linear-gradient(to left, var(--f-karte) 30%, transparent) right / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.14), transparent) left / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.14), transparent) right / 12px 100% no-repeat scroll;
}
table.tilgungstabelle {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--schrift-zahl);
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: "tnum" 1, "zero" 1, "ss01" 1;
  font-size: var(--g-13);
  line-height: var(--zeile-tab);
  min-width: 720px;
}
table.tilgungstabelle th, table.tilgungstabelle td {
  padding: var(--raum-3) var(--raum-5);
  text-align: right;
  border-bottom: 1px solid var(--l-zart);
  white-space: nowrap;
}
/* Die erste Spalte benennt die Zeile (Jahr, Szenario) und ist damit Text,
   kein Betrag: linksbuendig. */
table.tilgungstabelle th:first-child, table.tilgungstabelle td:first-child { text-align: left; }
table.tilgungstabelle th {
  position: sticky;
  top: 0;
  background: var(--f-panel);
  border-bottom: 1px solid var(--l-mittel);
  font-family: var(--schrift-text);
  font-size: var(--g-11);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--t-leise);
}
table.tilgungstabelle tbody tr:last-child td { border-bottom: 0; }
tr.highlight-zinsbindung td {
  background: var(--s-halb-f);
  font-weight: 500;
}
/* Zeilen, die schon mit dem Anschlusszins gerechnet sind. Sie sind eine Annahme und
   sollen sich von den zugesagten Jahren unterscheiden — aber leiser, nicht als
   Warnung: Eine Statusfarbe wuerde eine Aussage ueber das Objekt treffen. */
table.tilgungstabelle tbody tr.zeile-anschluss td { color: var(--t-leise); }

/* --- Kartenliste statt breiter Tabelle auf schmalen Fenstern ---
   Die Beschriftung je Zelle steht am Schreibtisch nicht da: Dort traegt sie
   der Tabellenkopf, und ein zweites Mal daneben waere sie Ballast. Der Knopf
   zum Aufklappen ebenso — ohne Karten gibt es nichts zu kuerzen. Beide sind
   deshalb standardmaessig ausgeblendet und werden erst in der schmalen
   Ansicht eingeschaltet. Damit bleiben sie auch im Ausdruck fort, ohne dass
   dort eine eigene Regel noetig waere. */
.zellen-label { display: none; }
.karten-mehr { display: none; }

/* --- Beleihungsauslauf --- */
.beleihung-hinweis { margin-top: var(--raum-5); }
.beleihung-hinweis.hinweis { border-color: var(--s-halb); background: var(--s-halb-f); color: var(--t-stark); }
.beleihung-hinweis.warnung { border-color: var(--s-schlecht); background: var(--s-schlecht-f); color: var(--t-stark); }

/* --- Feste Leiste mit dem Ergebnis ---
   Das einzige Element auf der Seite, das tatsaechlich ueber dem Blatt liegt.
   Nur hier ist --schwebe erlaubt. */
.ergebnis-leiste {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: var(--raum-6);
  z-index: 40;
  width: calc(100% - var(--raum-9));
  max-width: var(--spalte-max);
  display: flex;
  align-items: center;
  gap: var(--raum-5);
  padding: var(--raum-5) var(--raum-6);
  border: 1px solid var(--l-stark);
  border-radius: var(--r-karte);
  background: var(--f-karte);
  box-shadow: var(--schwebe);
  cursor: pointer;
  font-size: var(--g-14);
  font-variant-numeric: tabular-nums slashed-zero;
  color: var(--t-stark);
  transition: border-color var(--zeit-schnell) var(--kurve);
}
.ergebnis-leiste:hover { border-color: var(--t-leise); }
.ergebnis-leiste:focus-visible { outline: 2px solid var(--a-basis); outline-offset: 2px; }
.ergebnis-leiste-ampel { width: var(--raum-4); height: var(--raum-4); border-radius: var(--r-punkt); background: var(--t-leise); flex: none; }
.ergebnis-leiste-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ergebnis-leiste-pfeil { font-size: var(--g-12); color: var(--a-basis); font-weight: 500; flex: none; }

/* Eine dezente Markierung der Zeile unter dem Zeiger. Nur mit echtem
   Zeigegeraet: Auf einem Touchgeraet bliebe die Markierung nach dem Tippen
   dauerhaft stehen. */
@media (hover: hover) and (pointer: fine) {
  table.tilgungstabelle tbody tr:hover td { background: var(--f-mark); }
  table.tilgungstabelle tbody tr.highlight-zinsbindung:hover td { background: var(--s-halb-f); }
}


/* ---------------------------------------------------------------------------
   SCHMALE FENSTER
   --------------------------------------------------------------------------- */
@media (max-width: 700px) {
  body { padding: 26px 14px 100px 14px; font-size: 14.5px; }
  h1 { font-size: 25px; }
  .wizard-card { padding: var(--raum-6); }
  .urteil-card, .haushalt-card, .risiko-block, .chart-card { padding: var(--raum-6); }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .form-row > .eingabe-gruppe { display: block; }
  .button-bar { flex-direction: column-reverse; }
  .btn-nav { width: 100%; }
  .step-pill { flex: 1 1 auto; justify-content: center; }
  .urteil-zahlen { grid-template-columns: 1fr 1fr; gap: var(--raum-6) 0; }
  .urteil-zahl { padding: 0 var(--raum-5); }
  .urteil-zahl:nth-child(odd) { padding-left: 0; border-left: 0; }
  .kpi-grid { grid-template-columns: 1fr; }
  .kpi-card { padding: var(--raum-5) var(--raum-6); }
  .accordion-header { padding: var(--raum-5) var(--raum-6); }
  .accordion-body { padding: var(--raum-1) var(--raum-6) var(--raum-5) var(--raum-6); }
  .chart-wrapper { height: 240px; }
  .ergebnis-leiste { bottom: var(--raum-5); width: calc(100% - var(--raum-8)); padding: var(--raum-5); }
  .ergebnis-leiste-pfeil { display: none; }
  /* Safari auf dem iPhone zoomt beim Antippen in jedes Feld, dessen Schrift
     kleiner als 16 px ist. Der Zoom bleibt danach stehen, und die Seite liegt
     schief im Fenster. 16 px ist deshalb keine Geschmacksfrage, sondern die
     Grenze, ab der das Verhalten ausbleibt. */
  /* Und weil auf dem Telefon der Finger tippt und nicht der Zeiger, bleibt das
     Feld hier hoeher als die 34 px der Dashboard-Ansicht. */
  /* 44 px und nicht 42: Das ist die Untergrenze fuer ein Ziel, das mit dem
     Daumen getroffen werden soll, und sie steht an sechs anderen Stellen
     dieser Datei genau so. Die 42 hier waren die einzige Ausnahme, und sie
     war keine bewusste — gemessen am 31.08.2026 im Telefon-Ansichtsfenster,
     nicht am Schreibtisch, weil die Regel dem Daumen gilt. */
  input[type="text"], input[type="number"], select { font-size: 16px; min-height: 44px; }
  /* Derselbe Grund fuer den Griff eines Aufklappers. Er mass 31 px und lag
     damit unter der Daumengrenze; solange nur ein paar lange Erklaerungen
     dahinter standen, fiel das nicht ins Gewicht. Seit die Hilfetexte gekuerzt
     sind, steht hinter diesen Griffen der groessere Teil der Erklaerung, und
     sie werden entsprechend oft gedrueckt. */
  .mehr > summary { min-height: 44px; }
  /* Mit Geist statt Fira Sans (18.09.2026) ist die Zeilenhoehe kleiner
     geworden, und drei Griffe fielen unter die Grenze, die vorher nur aus
     Schrift und Innenabstand zustande kam: Aufklapper der Ergebnisse und
     schwebende Leiste auf 42 px, der Griff "Woher kommt dieser Wert?" auf
     19 px. Gemessen bei 375 px. Die Hoehe steht jetzt ausdruecklich da und
     haengt nicht mehr an der Schrift. */
  .accordion-header, .ergebnis-leiste { min-height: 44px; }
  /* Ohne display: flex — das nähme dem Griff sein Aufklappzeichen. */
  .datengrundlage > summary { min-height: 44px; box-sizing: border-box; padding-block: 12px; }
  /* Versalien unter 12 px sind auf einem Telefon nicht mehr zuverlaessig
     lesbar; betroffen war die Beschriftung "Cashflow nach Steuern". */
  .urteil-zahl .label, .kpi-card h4 { font-size: var(--g-12); }
}

/* --- Sehr schmale Telefone ---
   Die vier Kennzahlen unter dem Urteil stehen ab 700 px in zwei Spalten. Ein
   Gitterkind hat die Vorgabe min-width: auto und schrumpft deshalb nie unter
   die Breite seines Inhalts — und der Inhalt ist hier ein Betrag in der
   Zahlenschrift, der nicht umbrechen darf. Bei 320 px Fensterbreite und einem
   Objekt fuer 9,5 Mio. € standen die beiden Spalten deshalb 10 px ueber der
   Seite (gemessen am 02.09.2026: Gitter 330 px im Platz von 320).

   min-width: 0 waere hier die falsche Antwort: Die Spalte wuerde schmaler, der
   Betrag darin aber nicht, und dann liefe er ueber seine eigene Zelle. Unter
   360 px steht deshalb eine Zahl je Zeile. Bei 375 px — dem heute
   verbreitetsten Telefonmass — bleiben es zwei Spalten; dort fasst jede
   156,5 px und der laengste gemessene Betrag passt hinein. */
@media screen and (max-width: 360px) {
  .urteil-zahlen { grid-template-columns: 1fr; }
  .urteil-zahl { padding-left: 0; border-left: 0; }
}

/* ---------------------------------------------------------------------------
   BREITE TABELLEN ALS KARTENLISTE

   Vier Tabellen dieser Anwendung haben sechs, acht und neun Spalten. Auf
   375 px sind davon drei zu sehen; die uebrigen scrollen seitwaerts, seit die
   Ueberlaufkette am 01.09.2026 behoben ist. Richtig ist das, gut ist es
   nicht: Wer eine Zeile nie als Ganzes sieht, vergleicht nichts.

   Jede Zeile wird deshalb eine Karte. Die erste Zelle — Jahr, Szenario,
   Rechenweg — ist ihre Ueberschrift, darunter steht je Wert die Beschriftung
   links und der Betrag rechts.

   Warum @media screen und nicht nur max-width: Die Breite im Druckbereich ist
   die des Papiers, und A4 misst bei 96 dpi 794 px. Ohne screen haenge es an
   Rundungen und Raendern, ob ein Ausdruck ploetzlich Karten zeigt.

   Warum der Kopf geklippt und nicht ausgeblendet wird: Ein Element mit
   display:none steht nicht im Barrierefreiheitsbaum. Mit ihm verschwaende die
   Zuordnung von Zelle zu Spalte, die ein Screenreader ansagt — und die ist
   hier das Einzige, was die Karte noch als Tabelle lesbar haelt, weil
   display:block dem Element seine Tabellenrolle nimmt. Genau deshalb setzt
   app.js die Rollen ausdruecklich.
   --------------------------------------------------------------------------- */
@media screen and (max-width: 700px) {
  /* Die Huelle rahmt nicht mehr: Jede Karte hat ihre eigene Kante. Die vier
     Verlaeufe, die seitliches Scrollen anzeigen, muessen weg — es wird nicht
     mehr seitwaerts gescrollt, und ein Verlauf ohne Ursache sieht aus wie ein
     Fehler in der Darstellung. */
  .tabelle-wrapper {
    overflow-x: visible;
    border: 0;
    border-radius: 0;
    background: none;
  }
  table.tilgungstabelle {
    display: block;
    min-width: 0;
    font-size: var(--g-13);
  }
  table.tilgungstabelle thead {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  table.tilgungstabelle tbody { display: block; }

  table.tilgungstabelle tbody tr {
    display: block;
    background: var(--f-karte);
    border: 1px solid var(--l-mittel);
    border-radius: var(--r-karte);
    padding: var(--raum-4) var(--raum-6);
    margin-bottom: var(--raum-5);
  }
  table.tilgungstabelle tbody tr:last-child { margin-bottom: 0; }

  table.tilgungstabelle tbody th,
  table.tilgungstabelle tbody td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--raum-6);
    padding: var(--raum-3) 0;
    border-bottom: 0;
    text-align: right;
    /* In der Tabelle darf keine Zelle umbrechen, sonst verrutschen die
       Spalten. In der Karte gibt es keine Spalten mehr, und eine
       Beschriftung wie "Restschuld Beginn" braucht die zweite Zeile. */
    white-space: normal;
  }
  .zellen-label {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    font-family: var(--schrift-text);
    font-size: var(--g-12);
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--t-leise);
  }

  /* Die erste Zelle benennt die Zeile und ist die Ueberschrift der Karte.
     Ihre Beschriftung bleibt stehen, anders als zuerst gebaut: Ohne sie steht
     ueber der Karte des dritten Jahres nur eine "3". In der Tabelle sagt die
     Kopfzeile darueber, dass das ein Jahr ist; in der Karte gibt es keine
     Kopfzeile mehr, und die Zahl allein sagt nichts. */
  table.tilgungstabelle tbody tr > :first-child {
    font-size: var(--g-16);
    font-weight: 500;
    color: var(--t-stark);
    padding: var(--raum-2) 0 var(--raum-4) 0;
    margin-bottom: var(--raum-3);
    border-bottom: 1px solid var(--l-zart);
  }

  /* Die beiden Kennzeichnungen der Tabelle wirken jetzt auf die ganze Karte
     statt auf eine Zeile. Die Farbflaeche einer Zelle waere in einer Karte
     ein Streifen ohne erkennbaren Bezug. */
  table.tilgungstabelle tbody tr.highlight-zinsbindung {
    background: var(--s-halb-f);
    border-color: var(--s-halb);
  }
  table.tilgungstabelle tbody tr.highlight-zinsbindung td { background: none; }
  table.tilgungstabelle tbody tr.zeile-anschluss { color: var(--t-leise); }

  /* Gekuerzte Liste: Die Karten ab der neunten bleiben fort, bis der Knopf
     darunter gedrueckt wird. Die Zahl steht in app.js (KARTEN_GRENZE) und
     hier; sie muessen zusammenpassen, und ein Test haelt sie zusammen. */
  .tabelle-wrapper.karten-gekuerzt tbody tr:nth-child(n+9) { display: none; }

  .karten-mehr {
    display: block;
    width: 100%;
    min-height: 44px;
    margin-top: var(--raum-5);
    padding: var(--raum-4) var(--raum-6);
    background: none;
    color: var(--a-basis);
    border: 1px solid var(--l-stark);
    border-radius: var(--r-bedien);
    font-family: var(--schrift-text);
    font-size: var(--g-14);
    cursor: pointer;
  }
  .karten-mehr:focus-visible {
    outline: 2px solid var(--a-basis);
    outline-offset: 2px;
  }
}

/* ---------------------------------------------------------------------------
   DRUCK
   Das Blatt ist ohnehin hell. Fuer den Druck bleibt, die Bedienung
   wegzulassen und alles aufzuklappen.
   --------------------------------------------------------------------------- */
@media print {
  body { background: #fff; color: #000; padding: 0; display: block; }
  .wizard-progress-container, .ergebnis-leiste, .action-bar, .wizard-card, form,
  .skip-link, .speicher-hinweis { display: none !important; }
  .dashboard-container { display: block; max-width: 100%; }
  .urteil-card, .haushalt-card, .risiko-block, .kpi-card, .chart-card,
  .accordion-item, .haftungshinweis, .reserve-satz {
    box-shadow: none;
    border: 1px solid #999;
    break-inside: avoid;
  }
  .accordion-body { display: block !important; height: auto !important; opacity: 1 !important; }
  .kpi-grid { background: none; }
  .tabelle-wrapper { overflow: visible; }
  table.tilgungstabelle { min-width: 0; font-size: 9.5px; }
  table.tilgungstabelle th { position: static; }
  /* Der Inseratstext gehört in kein Ausgabedokument. Er ist fremder Text, er
     steht in keiner Rechnung, und auf einem Blatt für die Bank hätte er nichts
     verloren. Beim Drucken über den Knopf ist die Schnellprüfung ohnehin
     ausgeblendet; diese Regel fängt den Fall ab, dass jemand mit offenem
     Aufklapper direkt aus dem Browser druckt. */
  .sp-einfuegen { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .accordion-pfeil { transition: none; }
  .wizard-card.active { animation: none; }
}

/* Reiter: die Nummer springt beim Zeigen auf die Akzentfarbe, wie eine
   hervorgehobene Positionsnummer. Nur mit echtem Zeigegeraet: Auf einem
   Touchgeraet gibt es kein Zeigen, dort bliebe die Hervorhebung nach dem
   Tippen dauerhaft stehen. */
@media (hover: hover) and (pointer: fine) {
  .step-pill:hover .pill-nr { color: var(--a-basis); }
}

/* Beim Zeigen antwortet die Flaeche, nicht die Hoehe. Ein angehobenes Element
   braucht einen Schatten, damit die Hebung sichtbar wird — und Schatten sind
   auf diesem Blatt der schwebenden Leiste vorbehalten. Also wechselt statt
   der Hoehe die Flaeche um eine Stufe. */
@media (hover: hover) and (pointer: fine) {
  .kpi-card, .accordion-item {
    transition: background var(--zeit-schnell) var(--kurve);
  }
  .kpi-card:hover { background: var(--f-mark); }
}

/* ===========================================================================
   VERHALTEN STATT ANIMATION

   Nach Apples "Designing Fluid Interfaces": Eine Oberflaeche fuehlt sich
   lebendig an, wenn sie sofort auf den Druck antwortet, sich jederzeit
   unterbrechen laesst und aus dem aktuellen Zustand weiterrechnet statt eine
   feste Ablaufzeit abzuspielen.

   Die eigentliche Bewegung rechnet deshalb eine Feder in JavaScript, nicht ein
   CSS-Uebergang (siehe Abschnitt "Feder" ganz unten im Dokument). Hier stehen
   nur die Dinge, die CSS besser kann: die Rueckmeldung auf den Druck, das
   Material der schwebenden Leiste und die Groessenabhaengigkeit der Schrift.
   =========================================================================== */

/* --- Antwort auf den Druck ------------------------------------------------
   Die Rueckmeldung sitzt auf dem Druck, nicht auf dem Loslassen. 100 ms sind
   kurz genug, dass es wie ein Nachgeben wirkt und nicht wie eine Animation. */
.btn-nav:active, .action-btn:active, .step-pill:active,
.accordion-header:active, .ergebnis-leiste:active {
  transform: scale(0.975);
  transition: transform 100ms cubic-bezier(.2, .8, .3, 1);
}
.btn-nav, .action-btn, .step-pill, .accordion-header {
  /* Alle Uebergaenge auf der kurzen Skala; das Zurueckfedern nach dem Druck
     laeuft auf --zeit-normal und damit als einziges ueber 120 ms. */
  transition: background var(--zeit-schnell) var(--kurve),
              border-color var(--zeit-schnell) var(--kurve),
              color var(--zeit-schnell) var(--kurve),
              transform var(--zeit-normal) cubic-bezier(.2, .8, .3, 1);
  /* Kein Warten auf die Klick-Erkennung, kein Textmarkieren beim Doppeltippen. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* Im Ergebnisbereich laufen alle Uebergaenge auf der kurzen Skala: Ein
   Zustandswechsel soll man nicht sehen, sondern nur bemerken. Der Kopf eines
   Aufklappers faellt deshalb aus der 220-ms-Regel der Formularknoepfe heraus. */
.accordion-header {
  transition: background var(--zeit-schnell) var(--kurve),
              transform var(--zeit-normal) var(--kurve);
}

/* --- Material der schwebenden Leiste --------------------------------------
   Die Ergebnisleiste ist eine eigene Ebene ueber dem Blatt, kein Streifen im
   Blatt. Deshalb liegt sie auf einem durchscheinenden Material, unter dem der
   Inhalt hindurchlaeuft, mit einer hellen Oberkante als Lichtkante.
   Wer Transparenz reduziert hat, bekommt dieselbe Leiste deckend. */
.ergebnis-leiste {
  background: var(--f-glas-dicht);
  backdrop-filter: var(--glas-blur);
  -webkit-backdrop-filter: var(--glas-blur);
  box-shadow: var(--glas-kante), var(--schwebe);
  transform: translateX(-50%) translateY(0);
  transition: border-color var(--zeit-schnell) var(--kurve);
  /* Ueber dem durchscheinenden Material traegt Text etwas mehr Gewicht, sonst
     verliert er gegen den wechselnden Untergrund. */
  font-weight: 500;
}
@media (prefers-reduced-transparency: reduce) {
  .ergebnis-leiste {
    background: var(--f-karte);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
@media (prefers-contrast: more) {
  .ergebnis-leiste {
    background: var(--f-karte);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: var(--t-stark);
  }
}

/* Kein harter Strich dort, wo die Leiste den Inhalt ueberlappt, sondern ein
   kurzer Verlauf: die Kante entsteht aus dem Material, nicht aus einer Linie. */
body:not(.zeigt-detail) .leisten-kante { display: none; }
.leisten-kante {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 92px;
  z-index: 39;
  pointer-events: none;
  background: linear-gradient(to top,
    color-mix(in srgb, var(--f-seite) 88%, transparent),
    transparent);
}

/* --- Farben für Papier ---------------------------------------------------
   Dieselben Namen, andere Werte. Gesetzt wird die Klasse unmittelbar vor dem
   Drucken und danach wieder entfernt.

   Gegen Weiß gemessen (entwurf/redesign-2026-09/tokens.css): Text 17,63:1, normal 13,50:1,
   leise 7,37:1, Akzent 11,02:1, gut 6,56:1, halb 7,19:1, schlecht 6,84:1 —
   überall über den 4,5:1, die für normalen Text gelten. Die Statusfarben
   sind eigene, dunklere Stufen und keine Abdunklung der hellen: Ein Grün,
   das auf Nachtgrün leuchtet, ist auf Weiß fast nicht zu sehen. */
.druckfarben {
  color-scheme: light;

  --f-seite:      #FFFFFF;
  --f-panel:      #FFFFFF;
  --f-karte:      #FFFFFF;
  --f-tief:       #FFFFFF;
  --f-mark:       #F2F3F6;
  --f-glas:       #FFFFFF;
  /* Das Milchglas der Lichtung (Nachtrag N1) wird auf Papier zur weissen
     Flaeche mit Haarlinie. Ohne diese vier Werte druckte jede Glaskarte der
     Detailansicht als dunkelgraue Flaeche, der Text darauf kaum lesbar, und
     die Weichzeichnung lief im Druckdialog mit. */
  --f-glas-dicht: #FFFFFF;
  --f-glas-innen: #FFFFFF;
  --glas-blur:    none;
  --glas-kante:   inset 0 0 0 1px #C9CDD6;
  /* Auf Papier gibt es nichts anzufassen. Das Feld ist dort nur noch der
     Rahmen um einen Wert und traegt deshalb die neutrale Linie. */
  --f-feld:       #FFFFFF;
  --l-feld:       #6A7183;

  --l-zart:       #DDE0E6;
  --l-mittel:     #C9CDD6;
  --l-stark:      #6A7183;
  --l-glas:       #DDE0E6;

  --t-stark:      #121A33;
  --t-normal:     #2A3042;
  --t-leise:      #4A5163;
  --t-marke:      #121A33;

  --a-basis:      #4A3A12;
  --a-hoch:       #4A3A12;
  --a-flaeche:    #F5F0E1;
  --a-ring:       transparent;
  --auf-a:        #FFFFFF;

  --s-gut:        #0A6B45;
  --s-gut-f:      #FFFFFF;
  --s-halb:       #7A4E06;
  --s-halb-f:     #FFFFFF;
  --s-schlecht:   #B0201E;
  --s-schlecht-f: #FFFFFF;

  /* Bronze und Schiefergrün: Abstand 21,8, bei Farbfehlsichtigkeit 19,0
     und 18,6; Bronze gegen das Bernstein des Papiers 13,2. */
  --reihe-1:      #4A3A12;
  --reihe-2:      #4F5E58;
  --reihe-gitter: #DDE0E6;

  /* Ein Schatten auf Papier ist eine graue Fläche ohne Aussage. */
  --schwebe: none;
}

/* --- Einschweben ---------------------------------------------------------
   Der Ausgangszustand. Die Klasse vergibt JavaScript, damit ohne JavaScript
   nichts unsichtbar bleibt. */
.schwebt {
  opacity: 0;
  transform: translate3d(0, var(--schwebe-weg), 0);
}

@media print {
  /* Der Hinweis zur Datengrundlage liegt im Formular, und der Druckbereich
     blendet das Formular aus. Er muss aber mit aufs Papier: Ohne ihn stünde
     dort eine Zahl mit dem Wort "Zensus" daneben und ohne den Satz, dass sie
     hochgerechnet ist. Aufgeklappt, weil ein Dokument vollständig sein muss. */
  form .datengrundlage:not([hidden]) { display: block !important; }
  .datengrundlage[open] > p, .datengrundlage > p { display: block !important; }
  .datengrundlage > summary { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .schwebt { opacity: 1; transform: none; }
}

/* =========================================================================
   SCHEIN

   Licht markiert ausschließlich Bedienbares und Zustände — nie einen Wert.
   Ein Betrag, der leuchtet, sähe aus, als sage das Leuchten etwas über ihn
   aus. Deshalb gibt es Schein nur an drei Stellen:

     1. am Element unter dem Zeiger und am Element mit dem Tastaturfokus,
     2. am aktiven Reiter und am gefüllten Fortschritt,
     3. am Ampelpunkt — dort in der Statusfarbe, damit das Leuchten die
        Aussage verstärkt statt sie zu überschreiben.

   Seit dem Redesign „Lichtung" (18.09.2026) kommt der Schein aus --a-ring
   und nicht mehr aus den Neon-Tokens, die mit dem Ertragsfeld entfallen
   sind. Entfallen ist auch der Schimmer — die Lichtbänder, die durch Knöpfe
   und Felder zogen, und die atmenden Fokusringe. Er gehörte zur Neon-
   Bildwelt; die neue Bildwelt sind die gerasterten Bilder der Bühne, und
   ein Bedienelement, das daneben zusätzlich blinkt, zöge den Blick von
   beidem weg.
   ========================================================================= */
.btn-nav:hover,
.sp-weiter:hover,
.action-btn:hover {
  box-shadow: 0 0 16px -2px var(--a-ring);
}
.btn-nav:focus-visible,
.sp-weiter:focus-visible,
.action-btn:focus-visible,
.step-pill:focus-visible,
.sp-zweitknopf:focus-visible {
  box-shadow: 0 0 0 3px var(--a-ring);
}
.step-pill.active {
  box-shadow: inset 0 0 0 1px var(--a-basis);
}
/* Der gefüllte Fortschritt leuchtet über seine Kante hinaus — so sieht man
   die Bewegung auch im Augenwinkel. */
.sp-strich-fuell {
  box-shadow: 0 0 10px var(--a-ring);
}
/* Das Eingabefeld der Schnellprüfung: Die Kante ist der Fokusnachweis, und
   im Fokus wird sie zu einer Leuchtlinie. */
.sp-feldzeile:focus-within {
  box-shadow: 0 2px 0 0 var(--a-basis), 0 6px 20px -8px var(--a-ring);
}
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px var(--a-ring);
}
.sp-feldzeile input:focus { box-shadow: none; }
.urteil-ampel.gruen, .sp-ampel.gruen, .ergebnis-leiste-ampel.gruen {
  box-shadow: 0 0 12px color-mix(in srgb, var(--s-gut) 70%, transparent);
}
.urteil-ampel.gelb, .sp-ampel.gelb, .ergebnis-leiste-ampel.gelb {
  box-shadow: 0 0 12px color-mix(in srgb, var(--s-halb) 70%, transparent);
}
.urteil-ampel.rot, .sp-ampel.rot, .ergebnis-leiste-ampel.rot {
  box-shadow: 0 0 12px color-mix(in srgb, var(--s-schlecht) 70%, transparent);
}

/* --- Gleiten -------------------------------------------------------------
   Was man anfasst, hebt sich einen Pixel. Mehr nicht: Ein Knopf, der einen
   Sprung macht, wirkt lose. */
.btn-nav, .action-btn, .sp-weiter, .sp-zweitknopf, .step-pill, .accordion-header {
  transition: transform var(--zeit-schnell) var(--kurve),
              box-shadow var(--zeit-normal) var(--kurve),
              background var(--zeit-schnell) var(--kurve),
              border-color var(--zeit-schnell) var(--kurve),
              color var(--zeit-schnell) var(--kurve);
}
.btn-nav:hover, .action-btn:hover, .sp-weiter:hover, .sp-zweitknopf:hover, .step-pill:hover {
  transform: translateY(-1px);
}
.btn-nav:active, .action-btn:active, .sp-weiter:active, .sp-zweitknopf:active, .step-pill:active {
  transform: translateY(1px);
}
@media (prefers-reduced-motion: reduce) {
  .btn-nav:hover, .action-btn:hover, .sp-weiter:hover, .sp-zweitknopf:hover, .step-pill:hover,
  .btn-nav:active, .action-btn:active, .sp-weiter:active, .sp-zweitknopf:active, .step-pill:active {
    transform: none;
  }
}

/* --- Hilfetext: ein Satz sichtbar, der Rest auf Abruf --------------------
   Die Hilfetexte waren zusammen laenger als das Formular, das sie erklaeren.
   Ein Erstnutzer ueberspringt so etwas vollstaendig — und verliert damit auch
   die eine Zeile, auf die es ankommt. Sichtbar bleibt deshalb der Satz, der
   die Frage beantwortet; alles Weitere steht hinter "Mehr dazu".

   details und summary sind eingebaute Elemente: Sie funktionieren mit der
   Tastatur und werden von Screenreadern als auf- und zuklappbar angesagt,
   ohne dass dafuer eine Zeile JavaScript noetig waere. Beim Drucken sind sie
   offen, weil das PDF vollstaendig sein muss. */
.loeschen-verweis {
  background: none;
  border: none;
  padding: var(--raum-3) 0;
  font-family: var(--schrift-text);
  font-size: inherit;
  color: var(--a-basis);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.loeschen-verweis:hover { color: var(--a-hoch); }
.loeschen-verweis:focus-visible { outline: 2px solid var(--a-basis); outline-offset: 2px; border-radius: var(--r-bedien); }

.mehr { margin-top: var(--raum-4); }
.mehr > summary {
  cursor: pointer;
  color: var(--a-basis);
  font-size: var(--g-12);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: var(--raum-3);
  /* 24 px hohes Ziel, auch wenn die Schrift nur 12 px misst. */
  padding: var(--raum-3) 0;
}
.mehr > summary::-webkit-details-marker { display: none; }
.mehr > summary::after {
  content: "";
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform var(--zeit-schnell) var(--kurve);
}
.mehr[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.mehr > summary:focus-visible { outline: 2px solid var(--a-basis); outline-offset: 2px; border-radius: var(--r-bedien); }
.mehr-inhalt { padding-top: var(--raum-3); }
/* Geoeffnet wird im Skript (aufklapperOeffnen), nicht hier: Ein <details>
   ohne "open" verbirgt seinen Inhalt nicht ueber "display", sondern ueber
   den Aufklappzustand — in neueren Browsern ueber ::details-content und
   content-visibility, was sich mit einer Regel nicht aufheben laesst. Hier
   bleibt nur der Griff, den auf Papier niemand druecken kann. */
@media print { .mehr > summary { display: none; } }

/* --- Schrift: Laufweite und Zeilenabstand haengen von der Groesse ab -------
   Eine feste Laufweite ist immer irgendwo falsch. Grosse Schrift laeuft enger,
   kleine Schrift minimal weiter, damit sie nicht zusammenklebt. */
h1 { letter-spacing: -0.024em; line-height: 1.05; }
.urteil-stufe, .step-title-text h3 { letter-spacing: -0.016em; line-height: 1.2; }
.kpi-value, .urteil-zahl .wert { letter-spacing: -0.02em; line-height: var(--zeile-eng); }
.urteil-satz { letter-spacing: -0.004em; line-height: var(--zeile-text); }
body, .help-text, .detail-row, .risiko-zeile { letter-spacing: 0; }
.kpi-card h4, .urteil-zahl .label, .pill-frei, .urteil-bezug, .kpi-desc {
  letter-spacing: 0.012em;
}
/* Grossbuchstaben brauchen mehr Luft als Gemischtsatz. */
.kpi-card h4, .urteil-zahl .label { letter-spacing: 0.055em; }

/* --- Karten beim Wechsel der Stufe ----------------------------------------
   Die Feder setzt Verschiebung und Deckung; CSS legt nur fest, dass die Karte
   waehrend der Bewegung nicht am Kompositor vorbei gerechnet wird. */
.wizard-card.active { display: block; animation: none; will-change: transform, opacity; }
.wizard-card.ruht { will-change: auto; }

/* Der Koerper eines Aufklappers wird in der Hoehe gefedert. Waehrend der
   Bewegung darf nichts herausragen. */
.accordion-body {
  overflow: hidden;
}
.accordion-body.faehrt { display: block; }

@media (prefers-reduced-motion: reduce) {
  /* Weniger Bewegung heisst nicht weniger Rueckmeldung: Der Druck bleibt
     spuerbar, nur ohne Weg. Die Feder schaltet sich im Skript selbst ab. */
  .btn-nav:active, .action-btn:active, .step-pill:active,
  .accordion-header:active, .ergebnis-leiste:active {
    transform: none;
    background: var(--f-tief);
  }
}

@media print {
  .leisten-kante { display: none !important; }
  /* Was noch nicht eingeschwebt ist, steht auf Deckung 0. Auf Papier gibt es
     kein Einschweben: Ohne diese Regel bleiben genau die Karten leer, die beim
     Druck noch nicht im Bild waren — und das sind bei einer langen Auswertung
     die meisten. */
  .schwebt { opacity: 1 !important; transform: none !important; }
}


/* ===========================================================================
   SCHNELLPRÜFUNG — die Oberfläche, die zuerst erscheint

   Das Werkzeug hatte bis hierher eine einzige Ansicht: alle rund dreißig Felder
   auf einmal, dazu Tabellen, Aufklapper und Erklärtexte. Für jemanden, der ein
   Inserat gefunden hat und wissen will, ob es sich lohnt, ist das die falsche
   erste Begegnung — er sieht Arbeit, bevor er ein Ergebnis sieht.

   Deshalb steht davor jetzt eine Strecke aus fünf Fragen, eine Frage je Bild.
   Die Regeln dieser Schicht:

     - Ein Bild trägt genau eine Frage. Wer eine Frage sieht, sieht nichts
       anderes, was er auch noch ausfüllen könnte.
     - Die Frage ist groß. Die Schriftgröße --g-32 aus der Skala reicht dafür
       nicht, hier steht clamp(28px, 5vw, 40px): Eine Frage ist keine Kennzahl.
     - Unter jeder Frage steht höchstens ein Satz. Alles, was mehr erklärt,
       gehört in die Detailansicht.
     - Antworten laufen sofort in die Rechnung. Was das Werkzeug aus einer
       Antwort ableiten kann, zeigt es unter dem Feld — das Bundesland aus der
       Postleitzahl, den Quadratmeterpreis aus Preis und Fläche.
     - Die Detailansicht bleibt vollständig erhalten. Sie ist nicht gestrichen,
       sondern hinter einen Knopf gewandert.
   =========================================================================== */

/* --- Inseratstext einfügen ------------------------------------------------
   Der zweite Weg in die Prüfung. Er sitzt hinter einem Aufklapper im
   Startbild: sichtbar für den, der ihn sucht, und im Weg für niemanden. */
#q-inserat {
  width: 100%;
  box-sizing: border-box;
  margin-top: var(--raum-3);
  padding: var(--raum-5);
  background: var(--f-feld);
  color: var(--t-stark);
  border: 1px solid var(--l-feld);
  border-radius: var(--r-flaeche);
  font-family: var(--schrift-text);
  font-size: var(--g-14);
  line-height: var(--zeile-text, 1.55);
  resize: vertical;
}
#q-inserat:focus-visible {
  outline: none;
  border-color: var(--a-basis);
  box-shadow: 0 0 0 3px var(--a-ring);
}

/* --- Was gefunden wurde ---------------------------------------------------
   Drei Zustände, und alle drei tragen ein Wort, nicht nur eine Farbe: Ein
   Zustand, den nur die Farbe unterscheidet, ist für einen Teil der Nutzer
   gar kein Zustand. */
.sp-funde { margin-top: var(--raum-6); }
.sp-funde h3 {
  margin: 0 0 var(--raum-4);
  font-size: var(--g-16);
  color: var(--t-stark);
}
.sp-fundliste { list-style: none; margin: 0; padding: 0; }
.sp-fundliste li {
  display: flex;
  align-items: baseline;
  gap: var(--raum-4);
  padding: var(--raum-3) 0;
  border-bottom: 1px solid var(--l-zart);
  font-size: var(--g-13);
}
.sp-fund-name { flex: none; min-width: 9.5em; color: var(--t-normal); }
.sp-fund-wert {
  font-family: var(--schrift-zahl);
  font-variant-numeric: tabular-nums slashed-zero;
  color: var(--t-stark);
}
.sp-fund-wert.fehlt { font-family: var(--schrift-text); color: var(--t-leise); }
.sp-fund-marke {
  margin-left: auto;
  flex: none;
  padding: 1px var(--raum-3);
  border: 1px solid var(--l-mittel);
  border-radius: var(--r-marke);
  font-size: var(--g-11);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--t-leise);
}
.sp-fund-marke.sicher   { color: var(--s-gut);  border-color: var(--s-gut); }
.sp-fund-marke.pruefen  { color: var(--s-halb); border-color: var(--s-halb); }

.sp-fund-quelle {
  display: block;
  margin-top: var(--raum-1);
  font-size: var(--g-11);
  color: var(--t-leise);
}
.sp-fund-hinweise {
  margin: var(--raum-5) 0 0;
  padding: var(--raum-5);
  background: var(--f-karte);
  border: 1px solid var(--l-zart);
  border-radius: var(--r-karte);
  font-size: var(--g-13);
  color: var(--t-normal);
}
.sp-fund-hinweise ul { margin: var(--raum-3) 0 0; padding-left: 1.2em; }
.sp-fund-hinweise li { margin-bottom: var(--raum-2); }

/* --- Herkunft eines übernommenen Werts ------------------------------------
   Steht unter dem Feld, solange der Wert aus dem Inserat stammt, und
   verschwindet, sobald der Nutzer ihn ändert. */
.sp-herkunft {
  margin: var(--raum-3) 0 0;
  font-size: var(--g-12);
  color: var(--t-leise);
}
.sp-herkunft.unsicher { color: var(--s-halb); }
/* Die Kante trägt dasselbe noch einmal, weil der Blick beim Ausfüllen am Feld
   hängt und nicht an der Zeile darunter. Sie ist nicht die ganze Aussage — die
   steht im Text darunter, denn eine Farbe allein ist für einen Teil der Nutzer
   kein Zustand.

   Gefärbt wird die Feldzeile und nicht das Eingabefeld: Das Feld selbst hat
   "border: none", die sichtbare Kante ist die Unterkante seiner Zeile. Der
   Fokuszustand steht im Stylesheet dahinter und gewinnt damit gegen diese
   Regel — richtig so, denn wo der Fokus steht, ist die dringendere Auskunft. */

/* --- Die Bühne (Redesign „Lichtung", REDESIGN.md 6.1, 7 und 8.2) ----------
   Eine Bildfläche mit 22 px Radius und 10 px Abstand zum Fensterrand, so hoch
   wie das Fenster. Darin das gerasterte Bild aus bildwelt.js, darüber ein
   Schleier, darüber die Frage. Die Bildwelt hört auf, wo gelesen wird: Das
   Bild füllt genau eine Fensterhöhe. Was im Ergebnis darunter steht —
   Auffälligkeiten, Annahmen, Hinweis zum Exposé —, steht auf der ruhigen
   Fläche, in die der Schleier unten übergeht. */
.schnell {
  position: relative;
  isolation: isolate;
  /* body hat 18 px Rand; die Bühne soll 10 px vom Fensterrand stehen. Die
     Breite ergibt sich aus dem Strecken, nicht aus einer Zahl. */
  align-self: stretch;
  max-width: none;
  margin: 0 -8px;
  border-radius: var(--r-buehne);
  /* clip und nicht nur hidden: Das atmende Bild ragt über den Rand, und
     focus() dürfte eine hidden-Fläche seitlich verschieben (REDESIGN.md 11). */
  overflow: hidden;
  overflow: clip;
  background: var(--bild-tief);
}
/* Auf der Startseite liegt der Kopf über der Bühne. In der Detailansicht ist
   die Bühne ausgeblendet, und der Kopf steht wieder im Fluss. */
body:not(.zeigt-detail) { padding-top: 10px; }
body:not(.zeigt-detail) > .header-container {
  position: absolute;
  z-index: 5;
  top: 10px;
  left: 10px;
  right: 10px;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 18px 28px;
  box-sizing: border-box;
}

.sp-bild {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: -1;
  height: max(640px, calc(100svh - 20px));
  overflow: hidden;
  overflow: clip;
  pointer-events: none;
}
.sp-leinwand {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* Das Raster wird hochgezogen und nicht geglättet: Die Zellen sind die
     Gestaltung. */
  image-rendering: pixelated;
}
/* B7: Das Bild atmet — 24 s von 106 % auf 100 % und zurück. Nur transform,
   das übernimmt der Compositor. */
@media (prefers-reduced-motion: no-preference) {
  .sp-leinwand { animation: bild-atmen 24s var(--kurve-inaus) infinite alternate; }
}
@keyframes bild-atmen {
  from { transform: scale(1.06); }
  to   { transform: scale(1) translate(-0.6%, 0.4%); }
}
/* Der Schleier: dunkler in der Mitte, wo der Text steht, dunkler oben und
   unten, und ganz unten deckend in der Farbe der Seite. Er ist die
   Stellschraube für den Kontrast; gemessen wird am gerenderten Bild. */
.sp-schleier {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(58% 64% at 50% 52%,
      color-mix(in srgb, var(--f-seite) 66%, transparent) 0%,
      color-mix(in srgb, var(--f-seite) 52%, transparent) 60%, transparent 100%),
    radial-gradient(120% 80% at 50% 55%, transparent 30%,
      color-mix(in srgb, var(--f-seite) 55%, transparent) 100%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--f-seite) 35%, transparent) 0%, transparent 25%,
      transparent 60%, color-mix(in srgb, var(--f-seite) 70%, transparent) 88%,
      var(--f-seite) 100%);
}

/* Ein dunkler Hof um die leisen Zeilen auf dem Bild. Er gehört zum Grund und
   nicht zur Schrift: Wo der Kontrast gemessen zu knapp war, wird der Grund
   verstärkt und die Schrift nicht aufgehellt (REDESIGN.md 11.2). */
.sp-frage > p.sp-hilfe,
#sp-satz,
.sp-nummer,
.sp-zurueck,
.sp-merkmale li {
  text-shadow:
    0 0 10px color-mix(in srgb, var(--f-seite) 85%, transparent),
    0 1px 22px color-mix(in srgb, var(--f-seite) 70%, transparent);
}

/* Etiketten: Mono, Versalien, gesperrt. */
.etikett {
  font-family: var(--schrift-zahl);
  font-size: var(--g-etikett);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--t-leise);
}
/* Die Ecken unten: das redaktionelle Detail. Sie sitzen am Fuß des Bildes,
   nicht der Bühne, denn im Ergebnis ist die Bühne höher als das Bild. */
.sp-ecke {
  position: absolute;
  z-index: 1;
  top: calc(max(640px, calc(100svh - 20px)) - 24px);
  transform: translateY(-100%);
  display: grid;
  gap: 2px;
  pointer-events: none;
  transition: opacity var(--zeit-mittel) var(--kurve-aus);
}
.sp-ecke .etikett { color: color-mix(in srgb, var(--t-stark) 78%, transparent); }
.sp-ecke-links { left: 28px; }
.sp-ecke-rechts { right: 28px; text-align: right; }
/* Im Ergebnis läuft der Text über den Fuß des Bildes; dort stünden die
   Ecken im Satz. */
.schnell:has(#sp-7.aktiv) .sp-ecke { opacity: 0; }

/* --- Fortschritt ----------------------------------------------------------
   Sechs Striche, kein Prozentbalken. Ein Balken bei 20 % sagt "du bist noch
   lange nicht fertig"; sechs Striche sagen "es sind sechs". Die Füllung setzt
   weiterhin die Feder aus federn.js (B6). */
.sp-fortschritt {
  position: absolute;
  z-index: 3;
  top: 92px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  height: 3px;
}
.sp-fortschritt[hidden] { display: none; }
.sp-strich {
  width: 34px;
  background: color-mix(in srgb, var(--t-stark) 22%, transparent);
  border-radius: var(--r-bedien);
  overflow: hidden;
  position: relative;
}
.sp-strich-fuell {
  position: absolute;
  inset: 0;
  background: var(--t-stark);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

/* --- Die Fragen -----------------------------------------------------------
   Alle Bilder liegen in derselben Zelle eines Rasters übereinander. Sichtbar
   ist das aktive, beim Wechsel für 260 ms zusätzlich das abgehende
   (.faehrt-raus, gesetzt von bildwelt.js). Beide stehen damit an derselben
   Stelle, und nichts springt. */
.sp-buehne {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  min-height: max(640px, calc(100svh - 20px));
  padding: 120px var(--rand) 90px;
  box-sizing: border-box;
}
.sp-frage {
  grid-area: 1 / 1;
  display: none;
  width: min(760px, 100%);
  min-width: 0;
  text-align: center;
}
.sp-frage.aktiv,
.sp-frage.faehrt-raus { display: block; }
.sp-frage.faehrt-raus { pointer-events: none; }

/* B5: altes Bild 260 ms aus, neues 400 ms ein, 180 ms versetzt. */
@media (prefers-reduced-motion: no-preference) {
  .sp-frage.aktiv { animation: frage-ein 400ms var(--kurve-aus) 180ms both; }
  .sp-frage.faehrt-raus { animation: frage-aus 260ms var(--kurve-aus) both; }
}
@keyframes frage-ein { from { opacity: 0; } }
@keyframes frage-aus { to { opacity: 0; } }

.sp-nummer {
  font-family: var(--schrift-zahl);
  font-size: var(--g-etikett);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--t-stark) 72%, transparent);
  margin-bottom: 22px;
}
/* Instrument Serif hat nur den Schnitt 400; ein fetter Schnitt würde vom
   Browser künstlich aufgedickt, deshalb steht das Gewicht ausdrücklich da.
   Die kursive Stelle jeder Frage kommt aus dem eigenen kursiven Schnitt. */
.sp-frage h1,
.sp-frage h2 {
  font-family: var(--schrift-anzeige);
  font-weight: 400;
  font-size: clamp(40px, 5.6vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.015em;
  color: var(--t-stark);
  margin: 0 0 22px;
  text-wrap: balance;
}
.sp-start h1 { font-size: var(--g-anzeige); }
.sp-frage h1 em,
.sp-frage h2 em { font-style: italic; }

/* B2: Die Wörter der Überschrift erscheinen einzeln — aus der Unschärfe, von
   unten. bildwelt.js zerlegt sie und setzt --i. */
.wort { display: inline-block; white-space: pre; }
@media (prefers-reduced-motion: no-preference) {
  .sp-frage.aktiv .wort {
    animation: wort-ein 900ms var(--kurve-aus) both;
    animation-delay: calc(var(--i) * 55ms + 120ms);
  }
}
@keyframes wort-ein {
  from { opacity: 0; transform: translateY(0.35em); filter: blur(10px); }
}

.sp-frage > p.sp-hilfe {
  font-size: 19px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--t-stark) 90%, transparent);
  max-width: 560px;
  margin: 0 auto 34px;
  text-wrap: pretty;
}

/* B3: Unterzeile, Feld und Knöpfe steigen nach. Die Zeiten sind die aus
   REDESIGN.md 7; der Versatz steht hier statt als Stil im Markup. */
@media (prefers-reduced-motion: no-preference) {
  .sp-frage.aktiv > .sp-nummer { animation: steigen 800ms var(--kurve-aus) 40ms both; }
  .sp-frage.aktiv > .sp-hilfe,
  .sp-frage.aktiv > .sp-ergebnis-kopf { animation: steigen 800ms var(--kurve-aus) 380ms both; }
  .sp-frage.aktiv > .sp-feldzeile,
  .sp-frage.aktiv > .sp-feldhuelle,
  .sp-frage.aktiv > #sp-urteil { animation: steigen 800ms var(--kurve-aus) 480ms both; }
  .sp-frage.aktiv > .sp-ableitung,
  .sp-frage.aktiv > #sp-satz,
  .sp-start.aktiv > .sp-knopfzeile,
  .sp-start.aktiv > .sp-einfuegen { animation: steigen 800ms var(--kurve-aus) 560ms both; }
  .sp-frage.aktiv > .sp-knopfzeile,
  .sp-frage.aktiv > .risiko-block,
  .sp-start.aktiv > .sp-merkmale { animation: steigen 800ms var(--kurve-aus) 620ms both; }
  #sp-7.aktiv .sp-zahl { animation: steigen 800ms var(--kurve-aus) 420ms both; }
  #sp-7.aktiv .sp-zahl:nth-child(2) { animation-delay: 500ms; }
  #sp-7.aktiv .sp-zahl:nth-child(3) { animation-delay: 580ms; }
  #sp-7.aktiv > .sp-ergebnis-knoepfe { animation: steigen 800ms var(--kurve-aus) 700ms both; }
}
@keyframes steigen { from { opacity: 0; transform: translateY(14px); } }

/* Übergang in die Detailansicht (Andi, 19.09.2026; bildwelt.js, zuDetail).
   Wie zwischen zwei Fragen (B5): Das Ergebnis blendet in 260 ms aus, danach
   steigen Kopf, Titel, Stufen und Inhalt versetzt ein, während das Bild
   dahinter rieselt. Die Ergebnisleiste steigt nicht mit: Sie ist fest
   positioniert, und ein transform am Elternelement verschöbe sie. */
@media (prefers-reduced-motion: no-preference) {
  .schnell.geht .sp-buehne,
  .schnell.geht .sp-fortschritt,
  .schnell.geht .sp-ecke { opacity: 0; transition: opacity 260ms var(--kurve-aus); }
  body.detail-kommt > .header-container { animation: steigen 400ms var(--kurve-aus) 120ms both; }
  body.detail-kommt .detail-titel { animation: steigen 400ms var(--kurve-aus) 180ms both; }
  body.detail-kommt .detail-kopfzeile { animation: steigen 400ms var(--kurve-aus) 240ms both; }
  body.detail-kommt #hauptbereich > :not(.ergebnis-leiste) { animation: steigen 400ms var(--kurve-aus) 300ms both; }
}

/* --- Das Pillenfeld -------------------------------------------------------
   68 px hoch, Glasfläche, Wert in Geist Mono, Einheit rechts, der runde
   Weiter-Knopf im Feld. Die Einheit steht als Text daneben, nicht im Feld:
   Ein Platzhalter, der wie ein Wert aussieht, ist genau die Verwechslung, die
   das Werkzeug nirgends machen darf.

   Die Kante trägt --l-stark und nicht die zarte Glaskante: Sie ist das, was
   das Feld als Bedienelement ausweist, und muss 3:1 erreichen. */
.sp-feldhuelle { position: relative; width: min(480px, 100%); margin: 0 auto; }
.sp-feldzeile {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(480px, 100%);
  height: 68px;
  margin: 0 auto;
  padding: 0 9px 0 26px;
  box-sizing: border-box;
  border-radius: var(--r-pille);
  background: var(--f-glas-dicht);
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
  box-shadow: inset 0 0 0 1px var(--l-stark);
  transition: box-shadow var(--zeit-schnell) var(--kurve);
}
.sp-feldhuelle .sp-feldzeile { width: 100%; }
/* Übernommen aus dem Inserat: Die Kante sagt es noch einmal, weil der Blick
   beim Ausfüllen am Feld hängt. Die ganze Aussage steht im Text darunter. */
.sp-feldzeile.aus-inserat { box-shadow: inset 0 0 0 1px var(--s-gut); }
.sp-feldzeile.aus-inserat-unsicher { box-shadow: inset 0 0 0 1px var(--s-halb); }
/* Der Fokus steht dahinter und gewinnt — wo er steht, ist die dringendere
   Auskunft. */
.sp-feldzeile:focus-within {
  box-shadow: inset 0 0 0 1px var(--a-basis), 0 0 0 4px var(--a-ring);
}
.sp-feldzeile input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  background: none;
  padding: 0;
  font-family: var(--schrift-zahl);
  font-variant-numeric: tabular-nums slashed-zero;
  font-size: 26px;
  font-weight: 400;
  color: var(--t-stark);
  text-align: left;
}
.sp-feldzeile input::placeholder { color: var(--t-leise); }
.sp-feldzeile input:focus { outline: none; box-shadow: none; }
.sp-einheit {
  flex: none;
  font-family: var(--schrift-zahl);
  font-size: 16px;
  color: var(--t-leise);
}

/* --- Knöpfe ---------------------------------------------------------------
   Pillen mit einem runden Pfeil darin. Gefüllt in Creme ist jeweils nur die
   erste Aktion eines Bildes; die übrigen sind leise. */
.sp-knopfzeile {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
.sp-weiter {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 8px 0 24px;
  background: var(--t-stark);
  color: var(--auf-a);
  border: none;
  border-radius: var(--r-pille);
  font-family: var(--schrift-text);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}
.sp-weiter:hover { background: color-mix(in srgb, var(--t-stark), #FFFFFF 60%); }
.sp-weiter svg {
  flex: none;
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  padding: 10px;
  border-radius: 50%;
  background: var(--auf-a);
  color: var(--t-stark);
}
.sp-weiter[disabled] { background: var(--l-mittel); color: var(--t-leise); cursor: not-allowed; }
.sp-weiter[disabled]:active { transform: none; }
/* Der runde Knopf im Feld: nur der Pfeil, der Name steht für Screenreader
   in einem unsichtbaren span. */
.sp-feldknopf {
  width: 50px;
  height: 50px;
  min-height: 0;
  padding: 0;
  justify-content: center;
}

.sp-zurueck, .sp-ueberspringen {
  display: inline-flex;
  align-items: center;
  /* 44 px: "Zurück" ist der einzige Weg, eine Fehleingabe zu korrigieren. */
  min-height: 44px;
  padding: 0 var(--raum-4);
  background: none;
  border: none;
  font-family: var(--schrift-text);
  font-size: 14px;
  color: color-mix(in srgb, var(--t-stark) 72%, transparent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--t-stark) 30%, transparent);
}
.sp-zurueck:hover, .sp-ueberspringen:hover { color: var(--t-stark); }
/* Auf dem Bild steht "Zurück" auf einer leisen Glaspille. Als blosser Text
   lag es gemessen bei 3,3 bis 4,0:1 — einzelne helle Rasterpunkte zwischen
   den Buchstaben. Die Glasflaeche mittelt sie weg. */
.sp-frage > .sp-knopfzeile > .sp-zurueck {
  padding: 0 18px;
  border-radius: var(--r-pille);
  background: var(--f-glas-dicht);
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
  text-decoration: none;
}

.sp-zweitknopf {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-4);
  min-height: 52px;
  padding: 0 22px;
  background: var(--f-glas-dicht);
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
  color: var(--t-stark);
  border: none;
  box-shadow: inset 0 0 0 1px var(--l-stark);
  border-radius: var(--r-pille);
  font-family: var(--schrift-text);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}
.sp-zweitknopf:hover { background: color-mix(in srgb, var(--t-stark) 8%, var(--f-glas-dicht)); }
.sp-zweitknopf svg { width: 16px; height: 16px; color: var(--t-normal); }

/* --- Glaskarten unter dem Feld --------------------------------------------
   Ableitung, Nachfrage, Fehler, Vorschlag, Herkunft: alles, was das Werkzeug
   zur Antwort sagt, steht als Glaskarte unter dem Feld, links bündig. */
.sp-frage > :is(.sp-ableitung, .sp-nachfrage, .sp-fehler, .sp-vorschlag,
                .sp-uebernommen, .datengrundlage, .sp-herkunft) {
  width: min(480px, 100%);
  box-sizing: border-box;
  margin: 12px auto 0;
  padding: 12px 16px;
  text-align: left;
  border: none;
  border-radius: var(--r-feld);
  background: var(--f-glas-dicht);
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
  box-shadow: var(--glas-kante);
}
/* Eine leere Ableitung bleibt eine Live-Region und steht deshalb im Baum —
   aber ohne Fläche, sonst stünde unter jedem leeren Feld eine leere Karte. */
.sp-frage > .sp-ableitung:has(> span:empty) {
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  padding-block: 0;
}
.sp-frage > .sp-ableitung:has(> span:empty) svg { display: none; }
.sp-frage > .sp-nachfrage { box-shadow: inset 0 0 0 1px var(--s-halb); }
.sp-frage > .sp-fehler { box-shadow: inset 0 0 0 1px var(--s-schlecht); }
.sp-feldzeile:has(input[aria-invalid="true"]) {
  box-shadow: inset 0 0 0 1px var(--s-schlecht), 0 0 0 4px color-mix(in srgb, var(--s-schlecht) 30%, transparent);
}
.sp-frage > .sp-vorschlag { display: flex; }
.sp-vorschlag[hidden] { display: none; }

/* --- Startbild -------------------------------------------------------------
   Überschrift, Unterzeile, die beiden Wege nebeneinander, darunter die drei
   Merkmale. Im Markup stehen die Merkmale vor den Knöpfen; die Reihenfolge
   am Bildschirm legt order fest. Die Merkmale sind kein Bedienelement, die
   Tabulatorreihenfolge ändert sich also nicht. */
.sp-start {
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 12px;
}
.sp-start.aktiv, .sp-start.faehrt-raus { display: flex; }
.sp-start > * { flex: 0 0 100%; }
.sp-start > .sp-knopfzeile { flex: 0 0 auto; margin-top: 0; }
.sp-start > .sp-einfuegen { flex: 0 0 auto; }
.sp-start > .sp-einfuegen[open] { flex-basis: 100%; }
.sp-start > .sp-merkmale { order: 1; }

.sp-merkmale {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  margin: 30px 0 0;
  padding: 0;
}
.sp-merkmale li {
  display: flex;
  /* Oben ausgerichtet und linksbündig: Bricht ein Punkt auf dem Telefon um,
     stand der Text mittig zentriert und das Quadrat allein am linken Rand. */
  align-items: flex-start;
  text-align: left;
  gap: 8px;
  font-size: 14px;
  color: color-mix(in srgb, var(--t-stark) 80%, transparent);
}
/* Ein Quadrat von 6 px statt des Hakens: Ein Haken sagte "geprüft", und das
   ist über die Eigenschaften des Werkzeugs nicht die richtige Aussage. */
.sp-merkmale li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: calc(0.5lh - 3px);
  background: var(--t-stark);
}
.sp-merkmale svg { display: none; }
/* Auf dem Telefon steht ohnehin jeder Punkt in einer eigenen Zeile. Als
   linksbündige Spalte in der Mitte stehen die Quadrate untereinander. */
@media (max-width: 700px) {
  .sp-merkmale {
    flex-direction: column;
    align-items: flex-start;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
  }
}

/* Der zweite Weg: der Aufklapper als leise Pille, sein Inhalt als Glaskarte. */
.sp-einfuegen { margin: 0; padding: 0; border: none; }
.sp-einfuegen > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 22px;
  border-radius: var(--r-pille);
  background: var(--f-glas-dicht);
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
  box-shadow: inset 0 0 0 1px var(--l-stark);
  color: var(--t-stark);
  font-family: var(--schrift-text);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}
.sp-einfuegen > summary::-webkit-details-marker { display: none; }
.sp-einfuegen > summary svg { width: 18px; height: 18px; flex: none; }
.sp-einfuegen > summary:hover { background: color-mix(in srgb, var(--t-stark) 8%, var(--f-glas-dicht)); }
.sp-einfuegen > summary:focus-visible {
  outline: 2px solid var(--a-basis);
  outline-offset: 3px;
  border-radius: var(--r-pille);
}
.sp-einfuegen[open] > summary { margin-bottom: 12px; }
.sp-einfuegen-inhalt {
  width: min(640px, 100%);
  box-sizing: border-box;
  margin: 0 auto;
  padding: var(--raum-6);
  text-align: left;
  border-radius: var(--r-karte);
  background: var(--f-glas-dicht);
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
  box-shadow: var(--glas-kante);
}

/* --- Ergebnisbild ----------------------------------------------------------
   Das Urteil als Glaspille mit leuchtendem Ampelpunkt, darunter der Satz in
   der Anzeigeschrift, links bündig. Die Auffälligkeiten stehen VOR den drei
   Zahlen (Antwort 65 des Anwalts: Vorbehalt und Punkte sollen gelesen sein,
   bevor die Einzeldaten wahrgenommen werden) — das geht dem Aufbau aus
   REDESIGN.md 8.2 vor. */
#sp-7 { width: min(980px, 100%); text-align: left; }
.sp-ergebnis-kopf {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 12px;
  margin-bottom: 22px;
  border-radius: var(--r-pille);
  background: var(--f-glas-dicht);
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
  box-shadow: var(--glas-kante);
}
.sp-ampel {
  width: 10px;
  height: 10px;
  border-radius: var(--r-punkt);
  background: var(--l-stark);
  flex: none;
}
.sp-ampel.gruen { background: var(--s-gut); }
.sp-ampel.gelb { background: var(--s-halb); }
.sp-ampel.rot { background: var(--s-schlecht); }
.sp-ergebnis-kopf span {
  font-family: var(--schrift-zahl);
  font-size: var(--g-etikett);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--t-stark);
}
#sp-urteil {
  font-size: clamp(36px, 4.8vw, 70px);
  max-width: 18ch;
}
#sp-satz {
  font-size: 19px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--t-stark) 90%, transparent);
  margin: 0 0 30px;
  max-width: 60ch;
}
.sp-zahlen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 30px 0 0;
}
.sp-zahl {
  padding: 22px 22px 20px;
  border-radius: var(--r-karte);
  background: var(--f-glas-dicht);
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
  box-shadow: var(--glas-kante);
}
.sp-zahl dt {
  font-family: var(--schrift-zahl);
  font-size: var(--g-etikett);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--t-normal);
}
.sp-zahl dd {
  margin: 16px 0 0;
  font-family: var(--schrift-zahl);
  font-variant-numeric: tabular-nums slashed-zero;
  font-size: clamp(26px, 2.6vw, 38px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--t-stark);
}
.sp-zahl dd.gut { color: var(--s-gut); }
.sp-zahl dd.schlecht { color: var(--s-schlecht); }
.sp-zahl dd.unbestimmt { font-family: var(--schrift-text); font-size: var(--g-15); letter-spacing: 0; color: var(--t-normal); }

.sp-ergebnis-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
.sp-druckhinweis {
  margin: var(--raum-6) 0 0;
  font-size: var(--g-13);
  line-height: 1.55;
  color: var(--t-normal);
  max-width: 60ch;
}

/* --- Telefon ---------------------------------------------------------------- */
@media (max-width: 720px) {
  .sp-feldzeile { height: 60px; padding-left: 20px; }
  .sp-feldzeile input { font-size: 19px; }
  .sp-feldknopf { width: 44px; height: 44px; }
  .sp-feldknopf svg { width: 32px; height: 32px; padding: 8px; }
  .sp-frage > p.sp-hilfe, #sp-satz { font-size: 17px; }
  .sp-ecke { display: none; }
  /* Auf dem Telefon steht der Text über fast der ganzen Breite des Bildes,
     die Mitte des Schleiers muss deshalb dichter sein. Gemessen. */
  .sp-schleier {
    background:
      radial-gradient(70% 64% at 50% 52%,
        color-mix(in srgb, var(--f-seite) 76%, transparent) 0%,
        color-mix(in srgb, var(--f-seite) 62%, transparent) 60%, transparent 100%),
      linear-gradient(180deg,
        color-mix(in srgb, var(--f-seite) 35%, transparent) 0%, transparent 25%,
        transparent 60%, color-mix(in srgb, var(--f-seite) 70%, transparent) 88%,
        var(--f-seite) 100%);
  }
  .sp-buehne { padding-top: 110px; padding-bottom: 60px; }
  .sp-zahlen { grid-template-columns: minmax(0, 1fr); }
  .sp-zahl {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--raum-4);
    padding: 16px 18px;
  }
  .sp-zahl dd { margin: 0; font-size: 26px; text-align: right; }
}

@media print {
  .sp-bild, .sp-ecke { display: none; }
}

/* --- Vorschlagsliste beim Tippen ----------------------------------------
   Die Liste liegt über dem folgenden Inhalt, statt ihn wegzuschieben: Ein
   Bild, das bei jedem Zeichen die Höhe ändert, springt unter dem Finger weg.
   Die Hülle darum ist der Bezugspunkt für die Lage; sie darf nichts
   beschneiden, sonst wäre die Liste abgeschnitten.

   Die markierte Zeile trägt ihre Aussage nicht in der Fläche, sondern in der
   Kante links: --a-flaeche kommt gegen die Liste nur auf 1,08:1 und wäre für
   sich genommen kein Nachweis. Der Akzentbalken erreicht 6,49:1 gegen die
   eigene Zeile und 7,03:1 gegen die Liste und liegt damit weit über den 3:1,
   die WCAG 1.4.11 für ein solches Zeichen verlangt.

   Weiter gemessen: Ortsname (--t-stark) 15,89:1 auf der Liste und 14,67:1 auf
   der markierten Zeile, Bundesland (--t-leise) 5,03:1 und 7,73:1, die Kante der
   Liste (--l-stark) 4,35:1 gegen den Seitengrund. */
.sp-feldhuelle { position: relative; }
.sp-vorschlaege {
  position: absolute;
  left: 0; right: 0; top: calc(100% + var(--raum-2));
  z-index: 30;
  margin: 0;
  padding: var(--raum-2) 0;
  list-style: none;
  max-height: 296px;
  overflow-y: auto;
  background: var(--f-karte);
  /* --l-stark statt --l-mittel: Die Liste ist ein Bedienelement, und ihre
     Kante muss 3:1 gegen den Grund erreichen. Gemessen 4,35:1. */
  border: 1px solid var(--l-stark);
  border-radius: var(--r-karte);
  box-shadow: var(--schwebe);
}
.sp-vorschlaege[hidden] { display: none; }
.sp-ortsvorschlag {
  display: flex;
  align-items: baseline;
  gap: var(--raum-4);
  /* 44 px hoch, damit der Daumen trifft. */
  min-height: 44px;
  padding: var(--raum-4) var(--raum-6);
  border-left: 2px solid transparent;
  font-size: var(--g-16);
  color: var(--t-stark);
  cursor: pointer;
}
.sp-ortsvorschlag .land {
  font-size: var(--g-13);
  color: var(--t-leise);
}
.sp-ortsvorschlag:hover,
.sp-ortsvorschlag[aria-selected="true"] {
  background: var(--a-flaeche);
  border-left-color: var(--a-basis);
}
.sp-ortsvorschlag[aria-selected="true"] .land { color: var(--t-normal); }
/* --- Hinweis zur Datengrundlage (Spec 3.2c) ------------------------------
   Leiser als der Fließtext, aber nicht versteckt: Ein Wert, der fortgeschrieben
   ist, darf nicht wie ein erhobener aussehen. Gemessen gegen --f-seite kommt
   --t-normal auf 7,99:1 und liegt damit weit über der Anforderung. */
.datengrundlage {
  margin: var(--raum-5) 0 0;
  padding-left: var(--raum-5);
  border-left: 2px solid var(--l-stark);
  font-size: var(--g-12);
  line-height: var(--zeile-text);
  color: var(--t-normal);
  max-width: 62ch;
}
.datengrundlage[hidden] { display: none; }

/* --- Nachfrage: eine Frage, die nur im Ausnahmefall erscheint -------------
   Für 8.144 der 8.159 Postleitzahlen ergibt sich das Bundesland aus dem
   amtlichen Verzeichnis. Für die übrigen — Grenzfälle und Unbekanntes — wird
   gefragt, statt den voreingestellten Wert der Detailansicht stillschweigend
   weiterzurechnen. */
.sp-nachfrage {
  margin-top: var(--raum-6);
  padding: var(--raum-5);
  border: 1px solid var(--s-halb);
  border-radius: var(--r-flaeche);
  background: var(--s-halb-f);
}
.sp-nachfrage[hidden] { display: none; }
.sp-nachfrage label {
  display: block;
  font-size: var(--g-13);
  color: var(--t-stark);
  margin-bottom: var(--raum-4);
}
.sp-nachfrage select {
  width: 100%;
  min-height: 44px;
  font-size: var(--g-14);
}

/* --- Ableitung: was das Werkzeug aus der Antwort schon weiß --------------- */
.sp-ableitung {
  display: flex;
  align-items: flex-start;
  gap: var(--raum-3);
  margin-top: var(--raum-5);
  font-size: var(--g-13);
  line-height: 1.5;
  color: var(--t-normal);
  min-height: 20px;
}
.sp-ableitung svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--t-leise); }
.sp-ableitung.gefunden svg { color: var(--s-gut); }
/* Ein Anhaltspunkt ist kein Fund: Er bekommt die neutrale Textfarbe, nicht das
   Grün, das auf dieser Seite ausschließlich ein Ergebnis bewertet. */
.sp-ableitung.anhaltspunkt svg { color: var(--t-normal); }
.sp-ableitung.annahme svg { color: var(--s-halb); }
.sp-ableitung b { color: var(--t-stark); font-weight: 600; }

/* Der übernommene Vergleichswert: Feld und Satz tragen dieselbe Farbe wie die
   ungeprüften Felder der Detailansicht. Sie sagt "angenommen", nicht "falsch". */
.sp-feldzeile input.feld-uebernommen { color: var(--s-halb); }
.sp-uebernommen {
  margin: var(--raum-4) 0 0;
  font-size: var(--g-12);
  line-height: var(--zeile-text);
  color: var(--s-halb);
}
.sp-uebernommen[hidden] { display: none; }

/* Ein Vorschlag, den man mit einem Druck übernimmt. */
.sp-vorschlag {
  margin-top: var(--raum-5);
  display: inline-flex;
  align-items: center;
  gap: var(--raum-3);
  padding: var(--raum-4) var(--raum-5);
  background: var(--a-flaeche);
  border: 1px solid transparent;
  border-radius: var(--r-bedien);
  font-family: var(--schrift-text);
  font-size: var(--g-13);
  color: var(--a-hoch);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--zeit-schnell) var(--kurve);
}
/* 44 px ist die Untergrenze für ein Ziel, das mit dem Daumen getroffen werden
   soll. Aus Schriftgröße und Innenabstand kamen hier nur rund 32 zusammen. */
.sp-vorschlag { min-height: 44px; }
.sp-vorschlag:hover { border-color: var(--a-basis); }
.sp-vorschlag svg { width: 16px; height: 16px; flex: none; }

/* Die Meldung, wenn eine Pflichtangabe fehlt. Sie trägt die Statusfarbe für
   "schlecht" — dieselbe, die auch sonst ein Problem markiert — und ein
   Zeichen, damit die Aussage nicht allein an der Farbe hängt. */
.sp-fehler {
  display: flex;
  align-items: flex-start;
  gap: var(--raum-4);
  margin: var(--raum-5) 0 0;
  font-size: var(--g-14);
  line-height: 1.5;
  color: var(--s-schlecht);
}
.sp-fehler[hidden] { display: none; }
.sp-fehler svg { flex: none; width: 18px; height: 18px; margin-top: 1px; }
/* Die Überschrift nimmt den Fokus nur an, um angesagt zu werden. Ein Umriss
   sähe aus, als wäre sie anklickbar. */
.sp-frage h1:focus,
.sp-frage h2:focus { outline: none; }

.sp-fussnote {
  margin-top: var(--raum-8);
  font-size: var(--g-12);
  line-height: 1.55;
  color: var(--t-leise);
  max-width: 52ch;
}

/* Die Detailansicht wird nicht gelöscht, nur ausgeblendet. */
#detailansicht[hidden] { display: none; }
/* --- Kopfzeile der Detailansicht ----------------------------------------
   Rückweg, Trennstrich und die drei Reiter in einer Zeile. Sie sind
   Geschwister in einem Flex-Behälter und teilen sich dieselbe Breite wie der
   Inhalt darunter — damit schließt der Rückweg links bündig mit den Reitern
   ab, und überschneiden können sie sich nicht mehr. */
.detail-kopfzeile {
  width: 100%;
  max-width: var(--spalte-max);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--raum-2);
  margin-bottom: var(--raum-6);
}
.detail-kopfzeile .wizard-progress-container {
  width: auto;
  flex: 1 1 auto;
  margin-bottom: 0;
}
.step-zurueck {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-3);
  min-height: 44px;
  padding: var(--raum-4) var(--raum-5) var(--raum-4) 0;
  border: none;
  background: none;
  color: var(--t-leise);
  font-family: var(--schrift-text);
  font-size: var(--g-14);
  font-weight: 500;
  cursor: pointer;
  transition: color var(--zeit-schnell) var(--kurve),
              border-color var(--zeit-schnell) var(--kurve);
}
.step-zurueck svg { width: 16px; height: 16px; flex: none; }
.step-zurueck:hover { color: var(--t-stark); }
.step-zurueck:hover svg { transform: translateX(-2px); }
.step-zurueck svg { transition: transform var(--zeit-schnell) var(--kurve); }
.step-zurueck:focus-visible { outline: 2px solid var(--a-basis); outline-offset: 3px; border-radius: var(--r-bedien); }
.step-zurueck:active { transform: translateY(1px); }
/* Der Strich trennt zwei Dinge, die verschiedene Wege gehen: der Rückweg
   verlässt die Ansicht, die Reiter wechseln innerhalb. */
.step-trenner {
  width: 1px;
  height: 22px;
  background: var(--l-mittel);
  flex: none;
  margin: 0 var(--raum-3);
}
@media (max-width: 640px) {
  /* Auf schmalen Geräten bricht die Zeile ohnehin um; dann trennt der Umbruch,
     und der Strich stünde nur verloren am Zeilenende. */
  .step-trenner { display: none; }
  .detail-kopfzeile { gap: var(--raum-4); }
}

@media (max-width: 560px) {
  /* Auf dem Telefon stehen die Knöpfe eines Bildes untereinander und sind so
     breit wie die Spalte. Der runde Knopf im Feld bleibt rund. */
  .sp-knopfzeile > .sp-weiter,
  .sp-ergebnis-knoepfe > :is(.sp-weiter, .sp-zweitknopf),
  .sp-start > .sp-knopfzeile,
  .sp-start > .sp-einfuegen,
  .sp-einfuegen > summary { width: 100%; justify-content: center; box-sizing: border-box; }
  /* Beide Knöpfe tragen ihren Text in der Mitte (Andi, 19.09.2026). Der
     runde Pfeil des gefüllten Knopfes steht dabei fest am rechten Rand und
     schiebt den Text nicht aus der Mitte; der Innenabstand hält ihn frei. */
  .sp-knopfzeile > .sp-weiter,
  .sp-ergebnis-knoepfe > .sp-weiter {
    position: relative;
    justify-content: center;
    padding-inline: 52px;
  }
  .sp-knopfzeile > .sp-weiter svg,
  .sp-ergebnis-knoepfe > .sp-weiter svg {
    position: absolute;
    right: 8px;
    top: 50%;
    margin-top: -18px;
  }
  .sp-start > .sp-knopfzeile, .sp-start > .sp-einfuegen { flex-basis: 100%; }
  /* Untereinander brauchen die beiden Wege Abstand; ohne ihn lagen sie
     Kante an Kante. */
  .sp-start > .sp-einfuegen { margin-top: 12px; }
}

/* =========================================================================
   DAS BANK-EXPOSÉ (Roadmap Phase 3)

   Ein eigenes Dokument, kein Abbild der Bildschirmseite. Es liegt als
   #pdf-dokument im Quelltext, ist am Bildschirm ausgeblendet und wird erst
   sichtbar, wenn gedruckt wird — und auch dann nur, wenn die Klasse
   .pdf-modus am Wurzelelement steht.

   Warum die Klasse und nicht einfach @media print: Der Knopf "Drucken" in
   der Detailansicht soll weiterhin die Bildschirmseite ausgeben. Beides
   sind Ausdrucke, aber es sind zwei verschiedene Dokumente, und welches
   gemeint ist, entscheidet der Knopf und nicht das Medium.

   Die Farben kommen aus .druckfarben — derselbe Papier-Farbsatz, den auch
   der Seitenausdruck benutzt. Ein zweiter Satz eigens fuers Exposé waere
   eine zweite Stelle, an der ein Kontrast stimmen muesste.
   ========================================================================= */

/* Ausserhalb des Bildes statt display:none: pruefeSeitenumbruch() misst
   scrollHeight gegen clientHeight, und beide sind bei display:none 0 — die
   Warnung vor einer ueberlaufenden Seite koennte nie ausloesen. Die Breite
   entspricht der Inhaltsflaeche von A4 zwischen den Raendern (210 - 2 x 16). */
#pdf-dokument {
  position: absolute; left: -20000px; top: 0;
  width: 178mm; visibility: hidden; pointer-events: none;
}

/* Die Vorschau. Sie zeigt dasselbe Element, das auch gedruckt wird — eine
   zweite Darstellung waere eine zweite Stelle, an der etwas anders aussehen
   koennte als auf dem Papier. Dazu holt sie den Behaelter nur ins Bild und
   legt einen Papierrand darum. */
#pdf-dokument.vorschau {
  position: fixed; inset: 60px 0 0 0; left: 0; top: 60px;
  width: auto; visibility: visible; pointer-events: auto;
  overflow: auto; z-index: 60;
  background: var(--f-seite);
  padding: var(--raum-8) var(--raum-6);
  -webkit-overflow-scrolling: touch;
}
#pdf-dokument.vorschau .pdf-seite {
  width: 178mm; max-width: 100%;
  margin: 0 auto var(--raum-8);
  background: #fff;
  box-shadow: var(--schwebe);
  /* Genau die Raender aus @page: 210 mm Blatt minus 2 x 16 mm ergeben die
     178 mm Inhaltsbreite, mit der auch gerechnet und gedruckt wird. Ein
     abweichender Innenabstand liesse den Text in der Vorschau anders umbrechen
     als auf dem Papier — und dann waere die Vorschau keine. */
  padding: 18mm 16mm;
  box-sizing: content-box;
}
/* Am Telefon: jede Seite in die Breite eingepasst, nicht schmaler gesetzt
   (app.js, exposeVorschauMass). Verkleinert mit transform, nicht mit zoom:
   WebKit verkleinert unter zoom die Breite von Tabellenzellen mit nowrap
   nicht mit, und die rechte Spalte des Deckblatts ragte am iPhone über den
   Blattrand (gemessen in WebKit: Kopfzelle 60,8 statt 28 px, Andi,
   10.10.2026). Die negativen Ränder nehmen den Platz zurück, den die Seite in
   voller Größe belegen würde: 210 mm breit, 255 mm + 2 × 18 mm hoch. Nur am
   Bildschirm; das PDF bleibt A4. Die Leiste zeigt
   „Zurück“ und „Drucken oder als PDF speichern“ nebeneinander, die
   Seitenzahl steht ohnehin am Fuß jedes Blatts (Andi, iPhone, 10.10.2026). */
@media screen and (max-width: 760px) {
  #pdf-dokument.vorschau { padding: 16px 12px 32px; overflow-x: hidden; }
  #pdf-dokument.vorschau .pdf-seite {
    max-width: none;
    transform: scale(var(--vorschau-zoom, 1)); transform-origin: 0 0;
    margin: 0 calc((var(--vorschau-zoom, 1) - 1) * 210mm) calc(24px + (var(--vorschau-zoom, 1) - 1) * 291mm) 0;
  }
  .expose-vorschau-leiste { padding: 0 12px; }
  #exposeVorschauZahl { display: none; }
  .expose-vorschau-knoepfe { flex: 1; flex-wrap: nowrap; justify-content: space-between; gap: 12px; }
  .expose-vorschau-knoepfe .action-btn { white-space: nowrap; }
}

/* Solange die Vorschau offen ist, scrollt die Seite dahinter nicht mit. */
body.vorschau-offen { overflow: hidden; }

.expose-vorschau-leiste {
  position: fixed; inset: 0 0 auto 0; height: 60px; z-index: 61;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--raum-6);
  padding: 0 var(--raum-6);
  background: var(--f-panel);
  border-bottom: 1px solid var(--l-stark);
  color: var(--t-normal); font-size: var(--g-13);
}
.expose-vorschau-knoepfe { display: flex; gap: var(--raum-5); flex-wrap: wrap; }
/* display: flex schlaegt das eingebaute display: none des hidden-Attributs.
   Ohne diese Regel blieb die Leiste nach "Zurueck" stehen. */
.expose-vorschau-leiste[hidden] { display: none; }
@media print {
  .expose-vorschau-leiste { display: none !important; }
  /* Im Druck gilt wieder die Seitenaufteilung des Dokuments und nicht die
     Bildschirmdarstellung der Vorschau. */
  #pdf-dokument.vorschau {
    position: static; inset: auto; width: auto; overflow: visible;
    padding: 0; background: none;
  }
  #pdf-dokument.vorschau .pdf-seite {
    width: 178mm; max-width: none; margin: 0; padding: 0; background: none; box-shadow: none;
    transform: none;
  }
}

/* iOS-Safari vergroessert Schrift, die ihm zu klein erscheint ("text
   autosizing"), den Zeilenabstand aber nicht im selben Mass. In der
   verkleinerten Vorschau stand am iPhone Text ueber Text, und im Ausdruck
   wurde jedes Blatt so lang, dass es auf ein zweites A4-Blatt ueberlief:
   30 Blaetter statt 15 (Andi, iPhone, iOS 26.6.2, 10.10.2026). Das Exposé
   hat feste, gemessene Masse; vergroessert wird hier nichts. Am Wurzelelement
   nur, solange Vorschau oder Exposé-Druck laufen, damit die Seite selbst
   bleibt, wie sie am iPhone abgenommen ist. */
#pdf-dokument, .expose-deckblatt-blatt,
html.pdf-modus, html:has(> body.vorschau-offen) {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media print {
  /* Feste Blattbreite statt auto: iOS legt den Druck schmaler an als die
     Seite und vergrößert ihn danach um ein Viertel. Mit auto stand das
     Exposé dort in rund 530 px statt 178 mm, das Inhaltsverzeichnis
     einspaltig, und jedes Blatt lief über (30 statt 15, Andi, iPhone,
     10.10.2026). */
  .pdf-modus #pdf-dokument, body.vorschau-offen #pdf-dokument {
    position: static; left: auto; width: 178mm; visibility: visible;
    /* Die Obergrenze für die Kinder des Körpers (body > *, gegen Überlauf am
       Telefon) kappte die feste Breite wieder auf die Breite, die iOS
       anlegt: 530 px statt 178 mm, und es blieb bei 30 Blättern (Andi,
       iPhone, 12.10.2026). */
    max-width: none !important; margin: 0; align-self: flex-start;
  }
  /* Ein zentrierender Flex-Körper schöbe ein Blatt, das breiter ist als die
     angelegte Fläche, nach links über den Rand. */
  .pdf-modus body, body.vorschau-offen { display: block !important; }

  /* Im Exposé-Modus verschwindet die Seite vollstaendig. Sie stuende sonst
     als zweiter Ausdruck hinter dem Dokument — mit eigenen Seitenzahlen,
     die zu denen des Exposés nicht passen. Dasselbe gilt, solange die
     Vorschau offen ist: Am iPhone wird auch ueber Teilen → Drucken gedruckt,
     ohne den Knopf und damit ohne .pdf-modus. */
  .pdf-modus body > *:not(#pdf-dokument),
  body.vorschau-offen > *:not(#pdf-dokument) { display: none !important; }

  /* Weisses Papier: Safari druckt Hintergruende mit, und der Himmel des
     Tagblatts lag auf jedem Blatt. Der Innenabstand des Koerpers stuende
     vor dem ersten Blatt und schoebe es ueber den Rand. */
  html.pdf-modus, html:has(> body.vorschau-offen),
  .pdf-modus body, body.vorschau-offen {
    background: #fff !important;
    background-image: none !important;
  }
  .pdf-modus body, body.vorschau-offen {
    margin: 0 !important; padding: 0 !important; min-height: 0 !important;
  }
  /* Kein Abschneiden: Ist das Blatt breiter als die Fläche, die der Browser
     anlegt, soll er verkleinern, nicht die rechte Seite verschlucken. */
  html.pdf-modus, html:has(> body.vorschau-offen),
  .pdf-modus body, body.vorschau-offen { overflow: visible !important; }
}

/* Nur Safari am iPhone (nur dort gilt -webkit-touch-callout): iOS druckt mit
   eigenen Rändern samt Kopf- und Fußzeile, die sich nicht abschalten lassen,
   und verkleinert ein Dokument, das breiter ist als seine Druckfläche, auf
   deren Breite. Ein etwas breiterer Behälter wird etwas stärker verkleinert,
   und das 255 mm hohe Blatt bekommt Luft unter der Fußzeile von iOS: bei
   178 mm rund 251 von 263 mm, bei 190 mm rund 235 (gerechnet aus Andis PDF
   vom 10.10.2026, nicht am Gerät gemessen). Die Schrift wird dabei rund
   6 % kleiner; der Umbruch im Blatt bleibt, weil das Blatt 178 mm breit
   bleibt. */
@supports (-webkit-touch-callout: none) {
  @media print {
    .pdf-modus #pdf-dokument, body.vorschau-offen #pdf-dokument { width: 190mm; }
    .pdf-modus #pdf-dokument .pdf-seite,
    body.vorschau-offen #pdf-dokument .pdf-seite { margin-left: auto; margin-right: auto; }
  }
}

@page {
  size: A4 portrait;
  margin: 18mm 16mm;
}

/* Das Exposé im Relaunch (Tor G5, Variante „Kennblatt“, Andi 10.10.2026):
   seriös, ruhig, gut lesbar und druckbar, helle neutrale Farben unabhängig
   von der Tageszeit der Seite. Schriftpaar a: Instrument Serif für Titel und
   die große Zahl, Figtree für alles andere, Ziffern als Tabellenziffern. Keine
   Fläche, kein Schatten, kein Verlauf: Browser drucken Hintergründe von sich
   aus nicht mit; alles steht in Strichen und Schrift.

   Die Farben kommen aus .druckfarben (oben); hier stehen nur die Schriften,
   und zwar fest: Die Brücke des Relaunchs (bausatz/bruecke.css) greift beim
   Drucken nicht, und --schrift-text hiesse dort noch Geist. */
#pdf-dokument th, #pdf-dokument td, #pdf-dokument caption,
.expose-deckblatt-blatt th, .expose-deckblatt-blatt td {
  /* Die allgemeine Regel "Tabellenzellen in der Zahlschrift" der Detailansicht
     gilt im Exposé nicht: Schriftpaar a kennt keine Zahlschrift, Ziffern
     stehen als Tabellenziffern in Figtree. */
  font-family: var(--pdf-text);
}
/* Das Deckblatt im Dialog (app.js, zeigeDeckblattVorschau) steht ausserhalb
   von #pdf-dokument und braucht dieselben Schriften. */
#pdf-dokument, .expose-deckblatt-blatt {
  --pdf-serif: "Instrument Serif", "Times New Roman", serif;
  --pdf-text: "Figtree", system-ui, sans-serif;
}

.pdf-seite {
  height: 255mm;
  display: flex;
  flex-direction: column;
  break-after: page;
  page-break-after: always;
  font-family: var(--pdf-text);
  font-size: 9.5pt;
  line-height: 1.42;
  color: var(--t-normal);
  font-variant-numeric: tabular-nums lining-nums;
}
.pdf-seite:last-child { break-after: auto; page-break-after: auto; }

.pdf-inhaltsflaeche { flex: 1 1 auto; min-height: 0; }

/* Kopf- und Fusszeile stehen in jeder Seite selbst und nicht in einem
   Seitenrand-Kasten: Die dafuer vorgesehenen @page-Randboxen unterstuetzt
   Chrome nicht, und ohne sie gaebe es weder Seitenzahl noch Objektbezug auf
   Blatt vier. */
.pdf-kopf, .pdf-fuss {
  display: flex;
  justify-content: space-between;
  gap: 5mm;
  font-size: 8pt;
  color: var(--t-leise);
  flex: none;
}
.pdf-kopf {
  align-items: center;
  padding-bottom: 2mm;
  margin-bottom: 3.6mm;
  border-bottom: 0.6pt solid var(--l-mittel);
}
/* Die Wortmarke, 20 px hoch. Breite und Hoehe stehen am Bild selbst, damit der
   Kopf schon vor dem Laden seine endgueltige Hoehe hat. */
.pdf-kopf .pdf-wortmarke { height: 20px; width: auto; flex: none; display: block; }
/* Mit einer langen Objektbezeichnung brach die Kopfzeile auf jedem Blatt in
   zwei Zeilen um und nahm der Inhaltsflaeche rund 14 px. Der Titel rechts steht
   fest und wird nicht gekuerzt; er sagt, was das Blatt ist. */
.pdf-kopf-objekt {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pdf-kopf-titel, .pdf-etikett {
  font-size: 7.5pt; font-weight: 600; line-height: 1.25;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--t-leise);
}
.pdf-kopf-titel { flex: none; white-space: nowrap; }
.pdf-etikett { margin: 0; }
.pdf-fuss {
  padding-top: 2.5mm;
  margin-top: 5mm;
  border-top: 0.6pt solid var(--l-mittel);
  color: var(--t-normal);
}
/* Die Objektbezeichnung ist eine freie Eingabe. Bricht sie um, waechst die
   Fusszeile um eine Zeile — und damit laeuft jede Seite des Dokuments ueber.
   Die Seitenzahl darf dabei nicht schrumpfen: Sie ist der Nachweis, dass
   nichts fehlt. */
.pdf-fuss-quelle {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pdf-fuss-seite { flex: none; white-space: nowrap; }
/* Der Vorbehalt auf jedem Blatt, unter der Fusszeile. */
.pdf-fuss-vorbehalt {
  flex: none;
  margin-top: 1.5mm;
  font-size: 8pt;
  line-height: 1.3;
  color: var(--t-leise);
}

/* --- Deckblatt (Spec 7 Punkt 1, „Auf einen Blick“ seit Tor G5) --- */
.pdf-seite-deckblatt .pdf-inhaltsflaeche { display: flex; flex-direction: column; }
.pdf-deckblatt { display: flex; flex-direction: column; height: 100%; }
.pdf-deck-marke { display: flex; justify-content: space-between; align-items: center; gap: 5mm; }
.pdf-marke { margin: 0; }
.pdf-marke .pdf-wortmarke { height: 30px; width: auto; display: block; }
.pdf-deck-titel {
  margin-top: 8mm;
  display: grid; grid-template-columns: minmax(0, 1fr) 62mm; gap: 9mm; align-items: end;
}
/* Titel in der Anzeigeschrift. Instrument Serif hat nur den einen Schnitt;
   eine Fettung erfaende der Browser selbst und schmierte sie. */
.pdf-deckblatt h1 {
  font-family: var(--pdf-serif);
  font-size: 23pt;
  line-height: 1.08;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--t-stark);
  margin: 2.5mm 0 0;
}
.pdf-deck-objekt { margin: 4mm 0 0; }
.pdf-deck-objekt .pdf-etikett { display: block; margin-bottom: 1mm; }
/* Die freie Eingabe kuerzt nach drei Zeilen, statt das Deckblatt zu sprengen. */
.pdf-deck-objekt-name {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  font-size: 11pt; font-weight: 600; color: var(--t-stark); line-height: 1.3;
}
.pdf-deck-titel .pdf-werte { margin: 0; }
.pdf-deck-titel .pdf-werte th, .pdf-deck-titel .pdf-werte td { font-size: 8.5pt; padding: 1.1mm 0; }
.pdf-deck-titel .pdf-werte td { padding-left: 3mm; }
.pdf-deck-titel .pdf-werte th { white-space: nowrap; }

.pdf-blick { margin-top: 7mm; border-top: 1.2pt solid var(--t-stark); padding-top: 3.5mm; }
.pdf-blick-zahl {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 9mm; row-gap: 2.5mm;
  align-items: center; margin-top: 3.5mm;
}
.pdf-blick-wert {
  font-family: var(--pdf-serif); font-size: 54pt; line-height: 0.9; letter-spacing: -0.02em;
  color: var(--t-stark); margin: 0; white-space: nowrap;
}
.pdf-cent { font-size: 0.5em; letter-spacing: 0; vertical-align: 0.62em; }
.pdf-blick-name { margin: 2.5mm 0 0; font-size: 9.5pt; font-weight: 600; color: var(--t-stark); }
.pdf-blick-satz { margin: 0; font-size: 9.5pt; max-width: 88mm; }
.pdf-blick-haushalt { padding-left: 5mm; border-left: 0.6pt solid var(--l-mittel); }
.pdf-blick-wort { margin: 1.2mm 0 0; font-size: 10.5pt; font-weight: 600; color: var(--t-stark); line-height: 1.3; }
.pdf-blick-puffer { margin: 1.2mm 0 0; font-size: 9pt; }
.pdf-blick-puffer strong { color: var(--t-stark); white-space: nowrap; }
.mit-haushalt .pdf-blick-satz { grid-column: 1 / -1; max-width: none; }
/* Der Vorbehalt bei der Zahl (Andi, 09.10.2026), auf dem Deckblatt wie in
   der Zusammenfassung. */
.pdf-vorbehalt-zahl { margin: 0; font-size: 9pt; font-weight: 700; color: var(--t-stark); }
.pdf-blick-zahl .pdf-vorbehalt-zahl { grid-column: 1 / -1; }
.pdf-blick-klein { margin: 1.2mm 0 0; font-size: 8pt; line-height: 1.35; color: var(--t-leise); }
.pdf-blick-klein strong { color: var(--t-stark); }
/* Seit dem 16.10.2026 steht die Grundlage immer da und hat zwei Zeilen (Zähler
   und Vorgabewerte). Mit selbständigem Einkommen und langer Bezeichnung lief das
   Deckblatt um 7 px über; Abstand und Zeilenhöhe geben 8 px zurück. */
.pdf-blick-grundlage { margin: 1.5mm 0 0; font-size: 8.5pt; line-height: 1.3; color: var(--t-normal); }
.pdf-eck {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 4mm 0 0; border-top: 0.6pt solid var(--l-mittel);
}
.pdf-eck div { padding: 2.5mm 3.5mm 0 0; border-right: 0.6pt solid var(--l-mittel); }
.pdf-eck div + div { padding-left: 3.5mm; }
.pdf-eck div:last-child { border-right: 0; }
.pdf-eck dt { font-size: 8pt; color: var(--t-leise); }
.pdf-eck dd { margin: 1mm 0 0; font-size: 12pt; font-weight: 600; line-height: 1.2; color: var(--t-stark); white-space: nowrap; }
.pdf-eck dd span { display: block; margin-top: 0.6mm; font-size: 7.5pt; font-weight: 400; color: var(--t-leise); white-space: normal; }

.pdf-inhalt-titel {
  font-size: 7.5pt; font-weight: 600; line-height: 1.25; color: var(--t-leise);
  margin: 6mm 0 2mm; text-transform: uppercase; letter-spacing: 0.1em;
}
/* Raster statt `columns`: Safari am iPhone setzt Mehrspaltensatz im Druck
   einspaltig (Andi, iPhone, 12.10.2026). Die Zeilenzahl setzt pdf.js als
   Klasse; ohne passende Klasse läuft das Raster zeilenweise und bleibt
   trotzdem dreispaltig. */
.pdf-inhalt {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 7mm;
}
.pdf-inhalt-z4 { grid-auto-flow: column; grid-template-rows: repeat(4, auto); }
.pdf-inhalt-z5 { grid-auto-flow: column; grid-template-rows: repeat(5, auto); }
.pdf-inhalt-z6 { grid-auto-flow: column; grid-template-rows: repeat(6, auto); }
.pdf-inhalt li {
  display: flex; gap: 2mm; padding: 0.7mm 0;
  break-inside: avoid; font-size: 8.5pt; min-width: 0;
}
.pdf-inhalt-nr { color: var(--t-leise); min-width: 4.5mm; }
.pdf-inhalt-seite { margin-left: auto; color: var(--t-leise); padding-left: 2mm; }

/* ROADMAP R-11. Der Kasten, der sagt, wer das Dokument erstellt hat. Er
   traegt eine Kante und den Fliesstextgrad, damit er sich vom Kleingedruckten
   darunter abhebt — Antwort 59 verlangt "gut sichtbar". */
.pdf-deckblatt-eigen {
  margin-top: auto;
  padding: 2.6mm 4mm;
  border: 0.8pt solid var(--t-stark);
  font-size: 9pt;
  line-height: 1.35;
  color: var(--t-stark);
}
.pdf-deckblatt-hinweis {
  margin: 2.5mm 0 0;
  font-size: 8pt; color: var(--t-leise); max-width: 150mm;
}

/* --- Abschnitte --- */
.pdf-abschnitt h2 {
  display: flex; gap: 3mm; align-items: baseline;
  font-family: var(--pdf-serif);
  font-size: 17pt; line-height: 1.15; font-weight: 400; color: var(--t-stark);
  margin: 0 0 2mm; letter-spacing: 0;
}
.pdf-nummer {
  font-family: var(--pdf-text); font-size: 9pt;
  color: var(--t-leise); font-weight: 600;
}
.pdf-abschnitt h3 {
  font-size: 9.5pt; font-weight: 600; color: var(--t-stark);
  margin: 5mm 0 1.5mm;
}
.pdf-vorspann {
  margin: 0 0 4mm; color: var(--t-leise);
  font-size: 8.5pt; max-width: 155mm;
}
/* Zwei Abschnitte auf einem Blatt trennt eine Linie. */
.pdf-abschnitt + .pdf-abschnitt { margin-top: 3mm; padding-top: 4mm; border-top: 0.6pt solid var(--l-mittel); }

/* Abschnitt mit Randspalte: links Nummer, Titel, erklaerender Satz und die
   Legende der Herkunftszeichen, rechts die Zahlen. */
.pdf-rand { display: grid; grid-template-columns: 44mm minmax(0, 1fr); column-gap: 7mm; }
.pdf-rand-kopf h2 { display: block; font-size: 14pt; line-height: 1.15; margin: 0; hyphens: auto; }
.pdf-rand-kopf .pdf-nummer {
  display: block; margin-bottom: 1.6mm;
  font-family: var(--pdf-serif); font-size: 28pt; line-height: 0.9; font-weight: 400; color: var(--t-stark);
}
/* Die breiten Abschnitte (Tilgungsplan, Prognose, Begriffe …) tragen dieselbe
   große Nummer, neben dem Titel über der Tabelle statt in einer Randspalte
   (Andi, 12.10.2026). Bis dahin stand sie dort klein, und ab Abschnitt 7
   sah das Dokument anders aus als davor. */
.pdf-abschnitt:not(.pdf-rand) > h2 { gap: 3.5mm; margin-bottom: 0; }
.pdf-abschnitt:not(.pdf-rand) > h2 .pdf-nummer {
  font-family: var(--pdf-serif); font-size: 28pt; line-height: 0.9; font-weight: 400; color: var(--t-stark);
}
.pdf-rand-kopf .pdf-vorspann { margin: 2mm 0 0; font-size: 8pt; line-height: 1.38; }
.pdf-rand-inhalt > :last-child { margin-bottom: 0; }
.pdf-legende { margin: 4mm 0 0; display: grid; gap: 0.8mm; font-size: 7.5pt; line-height: 1.3; color: var(--t-leise); }

/* Herkunft je Zeile: voller Punkt Angabe des Kaeufers, Ring Vorgabewert oder
   Annahme, kein Zeichen gerechnet. Gezeichnet mit einer Kante und nicht mit
   einer Flaeche: Browser drucken Flaechen von sich aus nicht mit, eine Kante
   immer. */
.pdf-hk {
  display: inline-block; box-sizing: border-box; width: 1.9mm; height: 1.9mm; border-radius: 50%;
  margin-right: 2mm; vertical-align: 0.1mm; border: 0.25mm solid var(--t-stark); flex: none;
}
.pdf-hk.angabe { border-width: 1mm; }
.pdf-hk.leer { visibility: hidden; }

/* --- Tabellen ---
   Beträge mit Tabellenziffern, damit die Stellen in Spalten untereinander
   stehen. Getrennt wird ueber eine Haarlinie und nicht ueber wechselnde
   Flaechen: Ein grau hinterlegter Zeilenwechsel druckt je nach Einstellung gar
   nicht mit, eine Linie immer. */
.pdf-werte, .pdf-lang {
  width: 100%; border-collapse: collapse; margin: 0 0 4.4mm;
}
.pdf-werte th, .pdf-werte td, .pdf-lang th, .pdf-lang td {
  padding: 1.5mm 2mm; border-bottom: 0.4pt solid var(--l-zart);
  text-align: right; vertical-align: baseline;
}
.pdf-rand .pdf-werte th, .pdf-rand .pdf-werte td { padding-left: 0; }
.pdf-rand .pdf-werte td { padding-right: 0; }
.pdf-werte th[scope="row"], .pdf-lang th[scope="row"] {
  text-align: left; font-weight: 400; color: var(--t-normal);
}
.pdf-lang thead th {
  text-align: right; font-size: 7.5pt; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--t-leise); border-bottom: 0.8pt solid var(--l-stark);
}
.pdf-lang thead th:first-child { text-align: left; }
.pdf-werte td, .pdf-lang td { font-size: 9pt; white-space: nowrap; }
.pdf-werte tfoot th, .pdf-werte tfoot td {
  border-top: 0.8pt solid var(--t-stark); border-bottom: none;
  font-weight: 600; color: var(--t-stark); padding-top: 2mm;
}
.pdf-hervor th, .pdf-hervor td { font-weight: 600; color: var(--t-stark); }
/* Der Vorbehalt unter der Zeile „Cashflow nach Steuern“: ohne Linie dazwischen,
   linksbündig, in Textfarbe. */
.pdf-mit-vorbehalt th, .pdf-mit-vorbehalt td { border-bottom: 0; padding-bottom: 0.4mm; }
.pdf-werte tr.pdf-vorbehalt-zeile td { text-align: left; white-space: normal; padding-top: 0; font-size: 8.5pt; font-weight: 700; color: var(--t-stark); }
/* Ein Wert aus Worten darf umbrechen; ein Betrag nicht. */
.pdf-werte td.pdf-wort { white-space: normal; }
.pdf-mitte { text-align: center !important; }
.pdf-links { text-align: left !important; white-space: normal !important; }
.pdf-fussnote { color: var(--t-leise); font-size: 8pt; }
.pdf-summenzeile { font-size: 8.5pt; color: var(--t-normal); margin: 0; }

/* Das Begriffsverzeichnis. Die feste Breite der ersten Spalte haelt die Saetze
   auf gleicher Kante; ohne sie richtet sich die Spalte nach dem laengsten Wort
   der jeweiligen Gruppe, und die Erklaerungen springen von Gruppe zu Gruppe. */
.pdf-begriffe { table-layout: fixed; }
.pdf-begriff-wort { width: 42mm; }
.pdf-begriffe th[scope="row"] {
  font-weight: 600; color: var(--t-stark); padding-right: 4mm;
  hyphens: auto;
}
.pdf-begriffe td { line-height: 1.38; font-size: 8.5pt; }

/* Das Ende der Zinsbindung ist die Zeile, auf die eine Bank zuerst schaut.
   Markiert wird sie ueber Strichstaerke und Fettung und ueber das Sternchen
   in der Jahresspalte — nicht ueber Farbe. */
.pdf-marke-zeile th, .pdf-marke-zeile td {
  border-bottom-color: var(--l-stark);
  font-weight: 600; color: var(--t-stark);
}

/* Die Risikoliste besteht aus Woertern und nicht aus Betraegen. Sie laeuft
   deshalb durchgehend linksbuendig. */
.pdf-risiken th, .pdf-risiken td,
.pdf-risiken thead th { text-align: left; white-space: normal; }
.pdf-risiken td { font-size: 8.5pt; }
.pdf-risiken th[scope="row"] { width: 42mm; font-weight: 600; }
.pdf-risiken td:first-child { width: 20mm; color: var(--t-leise); }

/* --- Bewertungen, Merker, Disclaimer --- */
/* Fliessender Text und kein Flex-Layout: Punkt, Einstufung und Satz gehoeren
   in eine Zeile, die einfach weiterlaeuft. */
.pdf-urteil {
  margin: 0 0 4.4mm; padding: 3mm 3.5mm;
  border: 0.6pt solid var(--l-mittel);
  font-size: 9.5pt;
}
.pdf-urteil-gross { font-size: 10.5pt; line-height: 1.45; }
.pdf-urteil + .pdf-vorbehalt-zahl { margin: -2mm 0 3.5mm; }
.pdf-ampel {
  display: inline-block;
  width: 3mm; height: 3mm; border-radius: 50%; flex: none;
  margin-right: 1.6mm;
  background: var(--l-stark); transform: translateY(-0.2mm);
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.pdf-ampel.gruen { background: var(--s-gut); }
.pdf-ampel.gelb { background: var(--s-halb); }
.pdf-ampel.rot { background: var(--s-schlecht); }
/* Farbe allein traegt nie die Aussage — schon gar nicht auf einem
   Schwarzweissausdruck, und so kommt ein Exposé bei einer Bank oft an. */
.pdf-ampel-wort { font-weight: 600; color: var(--t-stark); margin-right: 0.6em; }

.pdf-merker {
  margin: 0 0 4.4mm; padding: 2mm 3.5mm;
  border-left: 1.2pt solid var(--l-stark);
  font-size: 8.5pt; color: var(--t-normal); background: none;
}
.pdf-disclaimer {
  margin-top: 6mm; padding-top: 3.5mm;
  border-top: 0.8pt solid var(--t-stark);
  font-size: 8pt; color: var(--t-normal);
}
.pdf-disclaimer p { margin: 0 0 1.5mm; max-width: 155mm; }

.pdf-nur-vorlesen {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Die Quellenangabe. Kleiner und leiser als die Werte darueber, aber lesbar:
   Sie ist der Grund, warum eine Bank der Zahl daneben glauben kann. */
.pdf-quelle {
  margin: -2.6mm 0 4.4mm;
  font-size: 8pt; color: var(--t-leise); max-width: 155mm;
}
.pdf-abschnitt h3:first-of-type { margin-top: 0; }

/* Die zweite Lesart einer Kennzahl, unter dem Hauptwert derselben Karte. Sie ist
   kleiner gesetzt und durch eine Kante abgesetzt: Es ist dieselbe Groesse in einer
   anderen Rechnung, kein zweiter Wert. */
.kpi-zweitwert {
  margin-top: var(--raum-5);
  padding-top: var(--raum-4);
  border-top: 1px solid var(--l-zart);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--raum-3);
}
.kpi-zweitwert-zahl {
  font-family: var(--schrift-zahl); font-size: var(--g-16);
  font-variant-numeric: tabular-nums slashed-zero; color: var(--t-stark);
}
.kpi-zweitwert-text { font-size: var(--g-12); color: var(--t-leise); }

/* Das Diagramm im Exposé. Die Hoehe steht fest, weil sie in die Seitenrechnung
   eingeht (PDF_GEWICHT_DIAGRAMM in pdf.js): 81 mm bei 178 mm Breite, also genau
   das Seitenverhaeltnis der Leinwand, auf der das Bild gezeichnet wird. Weicht
   eines von beiden ab, staucht der Browser das Bild. */
.pdf-diagramm {
  width: 100%; height: 81mm; margin: 0 0 var(--raum-5);
}
.pdf-diagramm img { width: 100%; height: 100%; display: block; }
/* Die Legende steht als Text neben dem Bild, nicht darin: Farbe steht neben der
   Schrift, nie in der Schrift, und auf einem Schwarzweissausdruck bleibt das
   Wort lesbar, wenn die Farbe es nicht mehr ist. */
.pdf-diagramm-legende {
  margin: 0 0 var(--raum-4); font-size: 8.5pt; color: var(--t-normal);
}
.pdf-diagramm-schluessel {
  display: inline-block; width: 10px; height: 3px; border-radius: var(--r-bedien);
  vertical-align: middle; margin: 0 6px 0 0;
}
.pdf-diagramm-legende .pdf-diagramm-schluessel:nth-of-type(2) { margin-left: 14px; }
.pdf-reihe-1 { background: var(--reihe-1); }
.pdf-reihe-2 { background: var(--reihe-2); }

/* Der Dialog, der das Exposé ausloest. Er traegt die beiden freiwilligen
   Deckblattangaben und die Fehlermeldung — beide lagen vorher in der
   Detailansicht und waren aus dem Kurzergebnis unerreichbar.

   Gebaut als eingebautes <dialog>: Es bringt Tastaturbedienung, Escape, die
   Rueckgabe des Fokus an den ausloesenden Knopf und die oberste Ebene ohne
   eigenes z-index mit. Ein nachgebauter Kasten muesste all das selbst tun. */
.expose-dialog {
  border: 1px solid var(--l-stark);
  border-radius: var(--r-karte);
  background: var(--f-panel);
  color: var(--t-normal);
  padding: var(--raum-8);
  max-width: 34rem;
  width: calc(100vw - 2 * var(--raum-6));
  box-shadow: var(--schwebe);
}
.expose-dialog::backdrop {
  /* Der Grund hinter dem Dialog wird abgedunkelt und nicht weichgezeichnet:
     Eine Weichzeichnung ueber einer Seite voller Zahlen kostet in jedem Bild
     Rechenzeit und traegt hier nichts bei. */
  background: rgba(0, 0, 0, 0.62);
}
.expose-bogen-formular > h2 {
  margin: 0 0 var(--raum-4);
  font-size: var(--g-19);
  color: var(--t-stark);
}
.expose-dialog-vorspann {
  margin: 0 0 var(--raum-7);
  font-size: var(--g-13);
  color: var(--t-leise);
  line-height: 1.55;
}
.expose-dialog .eingabe-gruppe { margin-bottom: var(--raum-6); }
/* Das Wort steht am Etikett und nicht als Sternchen daneben: "freiwillig" ist
   die Auskunft, die hier gebraucht wird, und ein Zeichen dafuer muesste man
   erst irgendwo nachschlagen. */
.expose-freiwillig { color: var(--t-leise); font-weight: 400; }
.expose-hinweis {
  margin: 0 0 var(--raum-6);
  font-size: var(--g-12);
  color: var(--t-leise);
}
.expose-dialog-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-5);
  justify-content: flex-end;
  margin-top: var(--raum-7);
}
/* Der Satz unter der Aktionsleiste, der die beiden Druckknoepfe auseinanderhaelt. */
.aktion-hinweis {
  margin: calc(-1 * var(--raum-5)) 0 var(--raum-7);
  font-size: var(--g-12);
  color: var(--t-leise);
  max-width: 62ch;
}
/* Auf Papier haben weder Dialog noch Hinweis etwas verloren. */
@media print {
  .expose-dialog, .aktion-hinweis { display: none !important; }
}


/* ===========================================================================
   Klassen anstelle von style-Attributen
   ===========================================================================
   Diese Klassen ersetzen die style-Attribute, die bis zum 29.08.2026 im
   Markup standen. Sie tragen absichtlich keine Gestaltung im engeren Sinn,
   sondern genau das, was vorher am Element stand — sonst hätte die Umstellung
   das Aussehen mit verändert, und ein Umbau, der zweierlei zugleich tut, ist
   hinterher nicht mehr auseinanderzuhalten.
   =========================================================================== */

/* Ein Feld, das sich die Zeile mit einem zweiten teilt. */
.eingabe-gruppe.wachsend { flex: 1; }

/* Anfangs verborgen. Das Skript blendet diese Elemente über
   element.style.display ein; eine Angabe am Element schlägt eine Klasse, also
   gewinnt das Einblenden. Umgekehrt greift die Klasse wieder, sobald das
   Skript "none" setzt oder die Angabe zurücknimmt. */
.aus { display: none; }
.an  { display: block; }

/* Der Vorrat an Zeichnungen. Er stellt nichts dar und darf im Textfluss
   keinen Platz belegen. */
.zeichen-vorrat { position: absolute; }

/* Kopfzellen, die links stehen, weil in ihnen ein Wort steht und keine Zahl. */
.links { text-align: left; }

/* Zahlenspalten laufen rechtsbündig, die Jahresspalte mittig. */
.mitte { text-align: center; }

/* Der Schlüssel der Diagrammlegende trägt die Farbe seiner Reihe. Die Legende
   ist HTML und nicht Teil der Zeichenfläche: So folgt sie dem Wechsel zwischen
   Bildschirm und Papier sofort und ist für Screenreader erreichbar. */
.legenden-schluessel.reihe-1 { background: var(--reihe-1); }
.legenden-schluessel.reihe-2 { background: var(--reihe-2); }

/* ===========================================================================
   DIE FUSSZEILE

   Sie steht ausserhalb beider Ansichten und traegt den Vorbehalt sowie die
   beiden Pflichtverweise. Bis zum 30.08.2026 stand der Vorbehalt innerhalb des
   Ergebnisbereichs und war damit in der Schnellpruefung nicht zu sehen — der
   Ansicht, die fuer die meisten die einzige sein wird (ROADMAP R-03).
   =========================================================================== */
.seitenfuss {
  width: 100%;
  max-width: var(--spalte-max);
  margin-top: var(--raum-9);
  padding-top: var(--raum-6);
  border-top: 1px solid var(--l-mittel);
  display: flex;
  flex-direction: column;
  gap: var(--raum-5);
}
.seitenfuss-vorbehalt {
  margin: 0;
  font-size: var(--g-13);
  color: var(--t-leise);
  max-width: 78ch;
}
.seitenfuss-vorbehalt strong { color: var(--t-stark); }

.seitenfuss-verweise {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-4) var(--raum-7);
}
/* Ein Tippziel misst mindestens 44 px in der Hoehe. Aus Schriftgroesse allein
   kaemen hier rund 20 zusammen. */
.seitenfuss-verweise a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--g-13);
  color: var(--a-basis);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.seitenfuss-verweise a:hover { border-bottom-color: var(--a-basis); }
.seitenfuss-verweise a:focus-visible {
  outline: 2px solid var(--a-basis);
  outline-offset: 3px;
  border-radius: var(--r-bedien);
}

/* ===========================================================================
   IMPRESSUM UND DATENSCHUTZERKLAERUNG

   Beide Seiten kommen ohne Skript aus und tragen deshalb script-src 'none'.
   Sie benutzen dieselben Tokens wie der Rechner; der Neonraum fehlt, weil
   hier nur gelesen wird und die Bildwelt dort aufhoert, wo gelesen wird.
   =========================================================================== */
body.rechtsseite {
  display: block;
  padding: var(--raum-9) 18px var(--raum-10) 18px;
}
/* display: block ausdruecklich: Diese Seiten benutzen <main>, und die
   allgemeine Regel weiter oben macht daraus einen Flex-Behaelter mit
   align-items: center. Ueberschriften und Absaetze schrumpften darin auf ihre
   Inhaltsbreite und standen mittig — ein Fliesstext, den man nicht lesen kann,
   ohne die Augen hin und her zu fuehren. */
.rechtstext {
  display: block;
  max-width: 74ch;
  margin: 0 auto;
}
.rechtstext h1 {
  font-size: var(--g-32);
  line-height: 1.15;
  margin: 0 0 var(--raum-7) 0;
}
.rechtstext h2 {
  font-size: var(--g-19);
  margin: var(--raum-9) 0 var(--raum-4) 0;
  padding-top: var(--raum-6);
  border-top: 1px solid var(--l-mittel);
}
.rechtstext p, .rechtstext li {
  font-size: var(--g-14);
  color: var(--t-stark);
}
.rechtstext ul { padding-left: var(--raum-7); }
.rechtstext li { margin-bottom: var(--raum-4); }
.rechtstext code {
  font-family: var(--schrift-zahl);
  font-size: 0.92em;
}
.rechtstext a { color: var(--a-basis); }

.rechtstext-zurueck { margin: 0 0 var(--raum-7) 0; }
.rechtstext-zurueck a, .rechtstext-fuss a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.rechtstext-fuss {
  margin-top: var(--raum-9);
  padding-top: var(--raum-6);
  border-top: 1px solid var(--l-mittel);
  color: var(--t-leise);
}

/* Der Hinweis, dass eine Seite noch nicht fertig ist. Bernstein und nicht Rot:
   Es ist keine Fehlermeldung, sondern eine offene Stelle — dieselbe Bedeutung,
   die die Statusfarbe im Rechner traegt. */
.rechtstext-hinweis {
  border: 1px solid var(--s-halb);
  background: var(--s-halb-f);
  border-radius: var(--r-flaeche);
  padding: var(--raum-6);
  margin-bottom: var(--raum-8);
}
/* Eine einzelne offene Stelle im Fliesstext. Sie steht eingerueckt hinter einer
   farbigen Kante, damit sie sich beim Ueberfliegen von fertigem Text abhebt. */
.rechtstext-luecke {
  border-left: 3px solid var(--s-halb);
  padding: var(--raum-3) 0 var(--raum-3) var(--raum-5);
  color: var(--t-leise);
  font-size: var(--g-13);
}

/* ===========================================================================
   DIE SEITE UNTER DER BÜHNE (REDESIGN.md 8.1, 8.3, 8.6; Bewegung B9–B17)

   Kopf mit Verweisen, Laufband, vier Abschnitte, Bildband und der große Fuß.
   Alles davon gehört zur Startseite; in der Detailansicht bleiben nur der
   Vorbehalt und die Pflichtverweise im Fuß stehen.

   Bewegung: Die verborgenen Anfangszustände stehen ausschließlich in
   prefers-reduced-motion: no-preference und nur unter .bewegt, das
   scrollseite.js setzt. Ohne Skript und bei weniger Bewegung steht alles
   sofort da.
   =========================================================================== */

/* --- Knöpfe der Seite: Creme-Pille mit rundem Pfeil (B15) ----------------- */
.knopf {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 8px 0 24px;
  border-radius: var(--r-pille);
  background: var(--t-stark);
  color: var(--auf-a);
  font: 500 15px/1 var(--schrift-text);
  text-decoration: none;
  white-space: nowrap;
}
.knopf:hover { background: color-mix(in srgb, var(--t-stark), #FFFFFF 60%); }
.knopf:focus-visible { outline: 2px solid var(--a-basis); outline-offset: 3px; }
.knopf .pfeil {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--auf-a);
  color: var(--t-stark);
  overflow: hidden;
}
.knopf .pfeil svg { width: 16px; height: 16px; grid-area: 1 / 1; }
.knopf .pfeil svg + svg { transform: translateX(-28px); }
.knopf-klein { min-height: 40px; padding: 0 6px 0 18px; font-size: 14px; }
.knopf-klein .pfeil { width: 28px; height: 28px; }
@media (prefers-reduced-motion: no-preference) {
  .knopf .pfeil svg { transition: transform var(--zeit-mittel) var(--kurve-aus); }
  .knopf:hover .pfeil svg:first-child { transform: translateX(28px); }
  .knopf:hover .pfeil svg + svg { transform: translateX(0); }
  .knopf:active { transform: scale(0.97); }
}

/* --- Kopf (8.1, B14) ------------------------------------------------------ */
.header-container { justify-content: space-between; gap: var(--raum-8); }
.kopf-nav { display: flex; align-items: center; gap: 28px; }
.kopf-verweis {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--g-klein);
  color: var(--t-normal);
  text-decoration: none;
}
.kopf-verweis:hover { color: var(--t-stark); }
.kopf-verweis:focus-visible { outline: 2px solid var(--a-basis); outline-offset: 3px; border-radius: var(--r-bedien); }
/* Die Verweise stehen auch in der Detailansicht (Andi, 19.09.2026). Die
   Abschnitte selbst sind dort ausgeblendet; ein Klick führt deshalb erst
   zurück zur Startseite (app.js, spKopfVerweis). */
/* „Kontakt“ steht in der Kopfleiste auf dem Desktop (Andi, 19.09.2026). Auf
   dem Telefon stehen wie bisher nur Marke und Knopf; das Formular ist dort
   über den Fuß und die Reiter von Impressum und Datenschutz erreichbar. */
.kopf-verweis[aria-current="page"] { color: var(--t-stark); }
@media (max-width: 820px) {
  .kopf-verweis { display: none; }
  /* Auf dem Telefon ist der Knopf ein volles Tippziel. */
  .kopf-nav .knopf-klein { min-height: 44px; }
}

/* Auf der Startseite steht der Kopf fest oben. Über der Bühne ist er
   durchsichtig; ab 40 px Scroll bekommt er eine Glasfläche, damit Verweise
   und Marke über Text und Bildern lesbar bleiben. */
body:not(.zeigt-detail) > .header-container {
  position: fixed;
  z-index: 40;
  border-radius: var(--r-bedien);
  transition: background-color var(--zeit-mittel) var(--kurve-aus),
              box-shadow var(--zeit-mittel) var(--kurve-aus);
}
body:not(.zeigt-detail) > .header-container.glas {
  background: var(--f-glas-dicht);
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
  box-shadow: var(--glas-kante);
}
@media (prefers-reduced-motion: no-preference) {
  body:not(.zeigt-detail) > .header-container {
    transition: transform var(--zeit-mittel) var(--kurve-aus),
                background-color var(--zeit-mittel) var(--kurve-aus),
                box-shadow var(--zeit-mittel) var(--kurve-aus);
  }
  body:not(.zeigt-detail) > .header-container.weg { transform: translateY(calc(-100% - 20px)); }
}
@media (prefers-reduced-transparency: reduce) {
  body:not(.zeigt-detail) > .header-container.glas { background: var(--f-panel); }
}
/* Ein Sprungziel darf nicht unter dem festen Kopf liegen. */
html:has(body:not(.zeigt-detail)) { scroll-padding-top: 96px; }

/* --- Rahmen der Seite ----------------------------------------------------- */
body:not(.zeigt-detail) { padding-bottom: 10px; }
body.zeigt-detail .lichtung { display: none; }

/* Laufband, Bildband, Papiermuster und die Abschnitte der Lichtung sind
   mit A3 (05.10.2026) entfallen; die Abschnitte unter dem Fluss gestaltet
   bausatz/seite.css nach der Gesamtseite des Relaunchs. */

/* --- Einblenden beim Scrollen (B9, B10) ----------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .bewegt .zeigen {
    transition: opacity 1s var(--kurve-aus), transform 1s var(--kurve-aus), filter 1s var(--kurve-aus);
    transition-delay: var(--v, 0ms);
  }
  .bewegt .zeigen:not(.sichtbar) { opacity: 0; transform: translateY(28px); filter: blur(6px); }
}
.v-1 { --v: 60ms; }  .v-2 { --v: 120ms; } .v-3 { --v: 180ms; } .v-4 { --v: 240ms; }
.v-5 { --v: 300ms; } .v-6 { --v: 360ms; } .v-7 { --v: 420ms; } .v-8 { --v: 480ms; }

/* --- Fuß (8.6, B13) -------------------------------------------------------- */
.seitenfuss {
  box-sizing: border-box;
  width: calc(100% + 16px);
  max-width: none;
  margin: 160px -8px 0;
  padding: 60px clamp(16px, 3vw, 40px) 28px;
  border: 1px solid var(--l-zart);
  border-radius: var(--r-buehne);
  background: var(--f-panel);
  gap: 0;
  overflow: hidden;
  overflow: clip;
}
.fuss-oben {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
  margin-bottom: 56px;
}
.seitenfuss .fuss-titel { max-width: 14ch; margin-bottom: 22px; font-size: clamp(34px, 4vw, 56px); }
.fuss-spalten { display: flex; flex-wrap: wrap; gap: 60px; }
.fuss-spalten .etikett { margin: 0 0 8px; }
.fuss-spalten ul { list-style: none; margin: 0; padding: 0; display: grid; }
.fuss-spalten ul a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  color: var(--t-normal);
  text-decoration: none;
}
.fuss-spalten ul a:hover { color: var(--t-stark); }
.fuss-spalten ul a:focus-visible { outline: 2px solid var(--a-basis); outline-offset: 3px; border-radius: var(--r-bedien); }
.fuss-spalten .seitenfuss-verweise { flex-direction: column; gap: 0; }
.fuss-spalten .seitenfuss-verweise a { font-size: 15px; }
.seitenfuss .seitenfuss-vorbehalt { margin-bottom: 40px; }
.fuss-marke {
  display: block;
  width: 100%;
  aspect-ratio: 518 / 138;
  image-rendering: pixelated;
}
/* Das Zeichen „my“ liegt als Vektor über dem Raster und wird nie gerastert.
   Es hat denselben viewBox wie die Leinwand und deckt sie ganz; so sitzt es
   genau dort, wo es in der Wortmarke steht. */
.fuss-marke-huelle { position: relative; }
.fuss-marke-zeichen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.fuss-unten {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
/* In der Detailansicht bleiben Vorbehalt und Pflichtverweise; der Aufruf
   zur Schnellprüfung und die Verweise auf die Abschnitte führten ins Leere. */
body.zeigt-detail .fuss-aufruf,
body.zeigt-detail .fuss-werkzeug { display: none; }

@media print {
  .lichtung, .kopf-nav, .fuss-oben, .fuss-marke-huelle, .fuss-marke, .fuss-unten { display: none !important; }
  .seitenfuss { margin: 0; padding: 0; border: none; background: none; }
}

/* ===========================================================================
   DETAILANSICHT IN DER LICHTUNG (REDESIGN.md 8.4)

   Kein Bild, nur Tokens. Felder behalten 12 px Radius und keine Pille: Hier
   stehen dreißig Felder dicht untereinander. Die Knöpfe tragen die Bauform
   der Seite — die erste Aktion als Creme-Pille, die übrigen leise mit einer
   Kante, die 3:1 hält (--l-stark). Der Akzent bleibt Fokus und Verweisen.
   =========================================================================== */
.step-title-text h3 {
  font-family: var(--schrift-anzeige);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.btn-nav, .action-btn { border-radius: var(--r-pille); }
/* Die Stufenknöpfe sind alle leise: Die Stufen 2 und 3 sind freiwillig,
   und ein gefüllter Knopf machte daraus eine Aufforderung. */
.action-btn.primaer,
.action-btn.primaer:hover {
  background: var(--t-stark);
  border-color: var(--t-stark);
  color: var(--auf-a);
}
.action-btn.primaer:hover {
  background: color-mix(in srgb, var(--t-stark), #FFFFFF 60%);
  border-color: color-mix(in srgb, var(--t-stark), #FFFFFF 60%);
}
.action-btn, .btn-prev { background: transparent; }
.action-btn:hover, .btn-prev:hover { background: rgba(238, 240, 226, 0.08); }
.action-btn.primaer svg { color: var(--auf-a); }

/* ===========================================================================
   RUNDUNGEN (REDESIGN.md 13.1)

   Einzeilig ist Pille, mehrzeilig ist Fläche. Was auf breitem Schirm in eine
   Zeile passt und auf dem Telefon umbricht, wechselt per Media Query, nicht
   per Skript: Ein Skript müsste nach jedem Tastendruck messen.
   =========================================================================== */
.ergebnis-leiste { border-radius: var(--r-bedien); }
@media (max-width: 700px) {
  .ergebnis-leiste,
  .sp-frage > :is(.sp-ableitung, .sp-fehler, .sp-vorschlag,
                  .sp-uebernommen, .datengrundlage, .sp-herkunft) {
    border-radius: var(--r-flaeche);
  }
}
/* Die Zeile, in der die Zinsbindung endet, als Pille. Eine Tabellenzeile
   selbst lässt sich nicht runden; gerundet werden ihre äußeren Zellen. */
@media screen and (min-width: 701px) {
  /* Bei border-collapse: collapse rundet keine Zelle. Mit separate und
     Abstand 0 stehen die Haarlinien genau wie vorher. */
  table.tilgungstabelle { border-collapse: separate; border-spacing: 0; }
  table.tilgungstabelle tr.highlight-zinsbindung td:first-child {
    border-radius: var(--r-bedien) 0 0 var(--r-bedien);
  }
  table.tilgungstabelle tr.highlight-zinsbindung td:last-child {
    border-radius: 0 var(--r-bedien) var(--r-bedien) 0;
  }
}

/* ===========================================================================
   MILCHGLAS (REDESIGN.md 13.2)

   Eine Rezeptur für jede Fläche über einem Bild: --f-glas-dicht, weich
   gezeichnet mit --glas-blur, gefasst mit --glas-kante. Die Klasse .glas
   trägt sie; der Kopf der Startseite bekommt sie ab 40 px Scroll von
   scrollseite.js, alle anderen Glasflächen tragen dieselben Tokens in ihrer
   eigenen Regel. Flächen in einer Glasfläche (.glas-innen) zeichnen nicht
   ein zweites Mal weich: Verschachtelter Blur kostet viel und sieht
   matschig aus.
   =========================================================================== */
.glas {
  background: var(--f-glas-dicht);
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
  box-shadow: var(--glas-kante);
}
.glas-innen {
  background: var(--f-glas-innen);
  box-shadow: var(--glas-kante);
}
/* Ohne Weichzeichner wäre Glas eine halb durchsichtige Fläche über einem
   unruhigen Bild. Dann wird es deckend, und zwar über die Tokens selbst:
   Jede Regel, die sie liest, folgt ohne eine eigene Ausnahme. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --f-glas-dicht: var(--f-karte); --f-glas-innen: var(--f-panel); }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --f-glas-dicht: var(--f-karte); --f-glas-innen: var(--f-panel); --glas-blur: none; }
}

/* ===========================================================================
   EINFÜGEN UND TIPPEN (REDESIGN.md 13.4)

   Alles, was auf der Bühne erst beim Benutzen erscheint. Die äußere Fläche
   ist Milchglas; was in ihr liegt, ist innere Fläche ohne eigenen Blur.
   Grün und Bernstein bleiben den Ergebnissen: Ein Fund ist keine Aussage
   über das Objekt, also tragen seine Marken Wort und Form, nicht Farbe.
   =========================================================================== */

/* --- Inseratstext --------------------------------------------------------- */
/* Geöffnet rückt das Startbild nach oben und die Überschrift wird kleiner;
   die Ecken unten verschwinden, damit nichts über der Glasfläche steht. */
.sp-buehne:has(.sp-einfuegen[open]) { align-items: start; }
.sp-start:has(.sp-einfuegen[open]) h1 { font-size: clamp(40px, 5vw, 72px); }
.schnell:has(.sp-einfuegen[open]) .sp-ecke { opacity: 0; }
.sp-einfuegen-inhalt { padding: 22px; }
.sp-einfuegen-inhalt .etikett { margin: 0 0 10px; color: var(--t-leise); }
.sp-einfuegen-inhalt .sp-hilfe { margin: 0 0 14px; font-size: 15px; color: var(--t-normal); }
.sp-einfuegen-inhalt .sp-datenschutz { margin: 12px 4px 0; font-size: 13px; color: var(--t-leise); }
#q-inserat {
  margin-top: 0;
  background: var(--f-glas-innen);
  border: 1px solid var(--l-stark);
  font-family: var(--schrift-zahl);
  font-size: 14.5px;
  line-height: 1.6;
}
.sp-einfuegen-inhalt .sp-knopfzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
/* Innen zeichnet der Zweitknopf nicht ein zweites Mal weich. */
.sp-einfuegen-inhalt .sp-zweitknopf {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: transparent;
}
.sp-einfuegen-inhalt .sp-zweitknopf:hover { background: rgba(238, 240, 226, 0.08); }

/* --- Was gefunden wurde --------------------------------------------------- */
.sp-funde h3 {
  margin: 0 0 12px;
  font-family: var(--schrift-anzeige);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.1;
}
.sp-fundliste { display: grid; gap: 6px; }
.sp-fundliste li {
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 8px 10px 8px 18px;
  box-sizing: border-box;
  border: 0;
  border-radius: var(--r-bedien);
  background: var(--f-glas-innen);
  box-shadow: var(--glas-kante);
  font-size: 15px;
}
/* Mit Fundstelle ist die Zeile zweizeilig und damit eine Fläche. Die
   Fundstelle bleibt ganz sichtbar: Wer den Wert prüfen soll, muss ihn im
   Inserat wiederfinden (SPEC-Parser.md). */
.sp-fundliste li:has(.sp-fund-quelle) { border-radius: var(--r-flaeche); }
.sp-fund-name { min-width: 110px; }
.sp-fund-wert { flex: 1; min-width: 0; font-size: 14.5px; }
.sp-fund-quelle { font-family: var(--schrift-text); font-size: 12px; overflow-wrap: anywhere; }

/* Die Marken als Chips: Wort und Punkt. Die drei Zustände unterscheiden
   sich im Wort und in der Form des Punktes, nicht in der Farbe. */
.sp-fund-marke {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border: 0;
  box-shadow: inset 0 0 0 1px var(--l-glas);
  font-family: var(--schrift-zahl);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--t-normal);
}
.sp-fund-marke::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  box-sizing: border-box;
  border: 1px solid currentColor;
}
.sp-fund-marke.sicher,
.sp-fund-marke.pruefen { color: var(--t-stark); border-color: transparent; }
.sp-fund-marke.sicher::before { background: currentColor; }
.sp-fund-marke.pruefen { box-shadow: inset 0 0 0 1px var(--l-stark); }
.sp-fund-marke.pruefen::before { width: 8px; height: 8px; border-width: 1.5px; }
.sp-fund-hinweise {
  border: 0;
  background: var(--f-glas-innen);
  box-shadow: var(--glas-kante);
  border-radius: var(--r-flaeche);
}
/* Die Zeilen erscheinen einzeln, je 60 ms versetzt. Der verborgene Zustand
   steht nur im Keyframe, also braucht weniger Bewegung keine Ausnahme. */
@media (prefers-reduced-motion: no-preference) {
  .sp-fundliste li { animation: fund-ein 360ms var(--kurve-aus) both; }
  .sp-fundliste li:nth-child(2) { animation-delay: 60ms; }
  .sp-fundliste li:nth-child(3) { animation-delay: 120ms; }
  .sp-fundliste li:nth-child(4) { animation-delay: 180ms; }
  .sp-fundliste li:nth-child(5) { animation-delay: 240ms; }
  .sp-fundliste li:nth-child(6) { animation-delay: 300ms; }
  .sp-fundliste li:nth-child(n+7) { animation-delay: 360ms; }
}
@keyframes fund-ein { from { opacity: 0; transform: translateY(8px); } }

/* --- Vorschlagsliste zum Ort --------------------------------------------- */
/* Die Hülle aus Feld und Liste steht über den Hinweisen darunter. Die sind
   animiert und damit je eine eigene Ebene; ohne diese Stufe schienen sie
   und „Zurück“ durch die Liste. */
.sp-feldhuelle { z-index: 6; }
.sp-vorschlaege {
  padding: 8px;
  border: 0;
  border-radius: var(--r-flaeche);
  /* fast deckend: Unter der Liste steht Text */
  background: rgba(12, 17, 13, 0.94);
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
  box-shadow: inset 0 0 0 1px var(--l-stark), var(--schwebe);
  text-align: left;
}
.sp-ortsvorschlag {
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  border-left: 0;
  border-radius: var(--r-bedien);
}
.sp-ortsvorschlag .land {
  font-family: var(--schrift-zahl);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: right;
}
.sp-ortsvorschlag:hover,
.sp-ortsvorschlag[aria-selected="true"] { background: rgba(238, 240, 226, 0.10); }
@media (prefers-reduced-motion: no-preference) {
  .sp-vorschlaege:not([hidden]) { animation: fund-ein 280ms var(--kurve-aus) both; }
}

/* --- Hinweise unter dem Feld ---------------------------------------------- */
/* Ableitung, Übernahme, Fehler: Glas-Pillen, eng um ihren Text statt
   480 px breit. Auf dem Telefon werden sie zur Fläche (Abschnitt
   RUNDUNGEN). */
.sp-frage > :is(.sp-ableitung, .sp-uebernommen, .sp-fehler) {
  width: fit-content;
  max-width: min(560px, 100%);
  align-items: center;
  gap: 10px;
  padding: 8px 18px 8px 8px;
  font-size: 14.5px;
  color: var(--t-stark);
}
.sp-frage > .sp-ableitung svg {
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 6px;
  border-radius: 50%;
  background: rgba(238, 240, 226, 0.12);
}
.sp-frage > .sp-ableitung:has(> span:empty) { padding: 0; }
.sp-ableitung b { font-weight: 500; }

/* Übernommener Vergleichswert: Der Punkt trägt die Farbe der Annahme, wie
   jedes angenommene Feld der Detailansicht; der Satz bleibt Creme. */
.sp-frage > .sp-uebernommen { display: flex; padding-left: 16px; }
.sp-frage > .sp-uebernommen[hidden] { display: none; }
.sp-uebernommen::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--s-halb);
}

/* Fehler: rote Kante und ein leuchtender Punkt, die Schrift bleibt Creme.
   So hält sie auf jedem der acht Bilder ihren Kontrast; das Zeichen davor
   trägt die Aussage zusätzlich zur Farbe. */
.sp-frage > .sp-fehler {
  padding-left: 14px;
  box-shadow: inset 0 0 0 1px rgba(255, 127, 124, 0.45);
}
.sp-frage > .sp-fehler::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--s-schlecht);
  box-shadow: 0 0 10px var(--s-schlecht);
}
.sp-frage > .sp-fehler svg { color: var(--s-schlecht); margin-top: 0; }

/* „Vergleichswert übernehmen“: ein Zweitknopf, die Zahl in Geist Mono. */
.sp-frage > .sp-vorschlag {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  min-height: 44px;
  padding: 0 18px;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: inset 0 0 0 1px var(--l-stark);
  font-size: 14px;
  color: var(--t-stark);
}
.sp-frage > .sp-vorschlag[hidden] { display: none; }
.sp-frage > .sp-vorschlag:hover { background: rgba(238, 240, 226, 0.08); }
.sp-vorschlag b { font-family: var(--schrift-zahl); font-weight: 500; }

/* Nachfrage Bundesland: die Frage als Text, darunter die Auswahl als Pille
   auf Glas. Zwei Zeilen, also eine Fläche. */
.sp-frage > .sp-nachfrage {
  width: min(480px, 100%);
  padding: 14px 16px 16px;
  border: 0;
  border-radius: var(--r-flaeche);
  background: var(--f-glas-dicht);
  box-shadow: var(--glas-kante);
}
.sp-nachfrage label { font-size: 14.5px; }
.sp-nachfrage select {
  background: var(--f-glas-innen);
  border-color: var(--l-stark);
  font-family: var(--schrift-text);
}

/* Herkunft und Datengrundlage als Chips. */
.sp-frage > :is(.sp-herkunft, .datengrundlage) {
  width: fit-content;
  max-width: min(560px, 100%);
  padding: 6px 14px;
  border-left: 0;
  font-size: 13px;
  color: var(--t-normal);
}
.sp-herkunft.unsicher { color: var(--t-stark); box-shadow: inset 0 0 0 1px var(--l-stark); }
/* Solange die Ortsliste offen ist, treten die Hinweise darunter zurück; sie
   schienen sonst durch und ragten seitlich unter ihr hervor. Nur optisch:
   Die Live-Regionen bleiben im Baum und werden weiter angesagt. */
.sp-frage:has(.sp-vorschlaege:not([hidden])) > :is(.sp-ableitung, .sp-nachfrage, .sp-fehler, .sp-knopfzeile) { opacity: 0; }
.sp-frage > .sp-fehler { max-width: min(760px, 100%); }
/* Jede Fehlermeldung nennt, was fehlt und warum; sie steht damit auf zwei
   Zeilen und ist nach 13.1 eine Fläche, auf jeder Breite. */
.sp-frage > .sp-fehler { border-radius: var(--r-flaeche); }
/* Punkt und Satz tragen die Meldung; ein drittes Zeichen daneben wäre
   eines zu viel. */
.sp-frage > .sp-fehler svg { display: none; }
.sp-einfuegen-inhalt .sp-knopfzeile { justify-content: flex-start; }
/* Die Ableitung zur Miete nennt Wert, Quelle, Stand und Fortschreibung und
   läuft damit auf jeder Breite über mehrere Zeilen: eine Fläche. */
.sp-frage > #sp-4-ableitung { border-radius: var(--r-flaeche); }

/* ===========================================================================
   DETAILANSICHT MIT BILD UND GLAS (REDESIGN.md 13.3, ersetzt 8.4)

   Hinter der ganzen Ansicht steht fest das Startbild, dunkler als auf der
   Bühne (HELL_DETAIL in bildwelt.js) und unter einem Schleier von 35 auf
   60 Prozent Nachtgrün. Es bewegt sich nicht: Bewegte es sich unter den
   Glasflächen, müsste der Browser in jedem Bild jede von ihnen neu
   weichzeichnen. Jede Fläche darauf ist Milchglas (13.2); was in ihr liegt,
   ist innere Fläche ohne eigenen Blur.
   =========================================================================== */
.detail-grund { display: none; }
body.zeigt-detail .detail-grund {
  display: block;
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--f-seite);
}
.detail-bild { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.detail-grund::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 14, 11, 0.35), rgba(10, 14, 11, 0.60));
}

/* --- Kopf der Seite und der Ansicht ------------------------------------- */
body.zeigt-detail > .header-container {
  border-radius: var(--r-bedien);
  /* Die Pille ist 60 px hoch, ihre Enden also Halbkreise mit 30 px Radius.
     Ohne Einzug stand die Marke in der Rundung statt davor. */
  padding-inline: 28px;
  box-sizing: border-box;
  background: var(--f-glas-dicht);
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
  box-shadow: var(--glas-kante);
}
.detail-titel {
  width: 100%;
  max-width: var(--spalte-max);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  margin: 28px 0 28px;
}
.detail-titel .etikett { margin: 0 0 12px; color: var(--t-normal); }
.detail-ueberschrift {
  margin: 0;
  font-family: var(--schrift-anzeige);
  font-size: clamp(44px, 6.4vw, 88px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--t-stark);
  padding-bottom: 4px;
}
.detail-urteil {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  margin: 0 0 10px;
  padding: 0 16px 0 14px;
  border-radius: var(--r-bedien);
  background: var(--f-glas-dicht);
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
  box-shadow: var(--glas-kante);
  font-family: var(--schrift-zahl);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t-stark);
}
.detail-urteil[hidden] { display: none; }
.detail-urteil .urteil-ampel { margin: 0; width: 10px; height: 10px; }

/* --- Stufen-Leiste: eine Glas-Pille mit drei Pillen darin --------------- */
body.zeigt-detail .step-zurueck {
  padding: 0 18px 0 14px;
  border-radius: var(--r-bedien);
  background: var(--f-glas-dicht);
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
  box-shadow: var(--glas-kante);
  color: var(--t-stark);
}
body.zeigt-detail .step-trenner { display: none; }
body.zeigt-detail .detail-kopfzeile { gap: 10px; }
body.zeigt-detail .wizard-progress-container { width: auto; max-width: 100%; margin: 0; }
body.zeigt-detail .step-indicators {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  padding: 5px;
  box-sizing: border-box;
  border-radius: var(--r-bedien);
  background: var(--f-glas-dicht);
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
  box-shadow: var(--glas-kante);
  /* Auf dem Telefon laufen die Stufen seitlich, statt umzubrechen. */
  overflow-x: auto;
  scrollbar-width: none;
}
body.zeigt-detail .step-pill {
  flex: none;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--t-stark);
  padding: 0 16px;
  white-space: nowrap;
}
body.zeigt-detail .step-pill:hover { background: rgba(238, 240, 226, 0.08); }
body.zeigt-detail .step-pill.active { background: var(--t-stark); color: var(--auf-a); box-shadow: none; }
body.zeigt-detail .step-pill .pill-nr { color: var(--t-normal); }
body.zeigt-detail .step-pill.active .pill-nr { color: var(--auf-a); }
body.zeigt-detail .pill-frei {
  padding: 3px 8px;
  border-radius: var(--r-bedien);
  box-shadow: inset 0 0 0 1px var(--l-glas);
  font-family: var(--schrift-zahl);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t-normal);
}
body.zeigt-detail .step-pill.active .pill-frei { color: var(--auf-a); box-shadow: inset 0 0 0 1px rgba(10, 14, 11, 0.3); }
/* Auf dem Telefon passen die drei Stufen nebeneinander nicht in eine Zeile:
   gemessen 401 px Bedarf bei 347 px Platz, sichtbar waren nur 01 und 02.
   „Freiwillig“ allein unter den Namen zu setzen reicht nicht. Deshalb steht
   jede Stufe in drei Zeilen — Nummer, Name, Zusatz — und alle drei teilen
   sich die Breite. Mehrzeilig heißt nach der Regel der zwei Radien Fläche,
   für die Stufen wie für ihre Leiste. */
@media screen and (max-width: 700px) {
  body.zeigt-detail .step-indicators {
    width: 100%;
    border-radius: var(--r-flaeche);
  }
  body.zeigt-detail .step-pill {
    flex: 1 1 0;
    min-width: 0;
    display: grid;
    justify-items: center;
    align-content: center;
    row-gap: 3px;
    padding: 8px 6px;
    white-space: normal;
    text-align: center;
    line-height: 1.2;
    border-radius: var(--r-flaeche);
  }
  body.zeigt-detail .step-pill .pill-nr { font-size: var(--g-11); }
  body.zeigt-detail .pill-frei { padding: 2px 6px; font-size: 9.5px; }
}

/* --- Jede Fläche ist Glas ------------------------------------------------ */
body.zeigt-detail :is(.wizard-card, .urteil-card, .haushalt-card, .kpi-card, .chart-card,
                      .accordion-item, #dashboard > .risiko-block, #dashboard > .reserve-satz,
                      #dashboard > .speicher-hinweis, #dashboard > .aktion-hinweis,
                      #dashboard > .ergebnis-vorbehalt) {
  background: var(--f-glas-dicht);
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
  box-shadow: var(--glas-kante);
  border-radius: var(--r-flaeche);
}
body.zeigt-detail :is(.wizard-card, .kpi-card, .chart-card, .accordion-item,
                      #dashboard > .risiko-block) { border-color: transparent; }
/* Urteil und Haushalt behalten ihre Kante in der Statusfarbe: Sie trägt
   dort die Aussage mit und ist nicht Schmuck. */
body.zeigt-detail :is(.urteil-card, .haushalt-card):not(.rot):not(.gelb):not(.gruen) { border-color: transparent; }
body.zeigt-detail #dashboard > .aktion-hinweis { padding: 12px 18px; }
/* Die Kennzahlen stehen als einzelne Glaskarten, nicht als Raster mit
   Fugen: Eine Fuge über einem Bild wäre ein Streifen Bild. */
body.zeigt-detail .kpi-grid {
  gap: 12px;
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
/* Innen: Hinweiskästen und Tabellenhülle sind innere Flächen. */
body.zeigt-detail :is(.wizard-card, .urteil-card, .haushalt-card, .accordion-item, .chart-card)
  :is(.freiwillig-hinweis, .haftungshinweis, .steuer-disclaimer, .selbstaendig-hinweis,
      .haushalt-hinweis, .beleihung-hinweis, .reserve-satz, .tabelle-wrapper,
      .annahme-box, .annahme-hinweis) {
  background: var(--f-glas-innen);
  box-shadow: var(--glas-kante);
  border-radius: var(--r-flaeche);
}

/* --- Felder: Beschriftung links, Pillenfeld rechts ---------------------- */
@media (min-width: 701px) {
  body.zeigt-detail .wizard-card .eingabe-gruppe {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(200px, 360px);
    column-gap: 20px;
    align-items: center;
  }
  body.zeigt-detail .wizard-card .eingabe-gruppe > * { grid-column: 1 / -1; }
  body.zeigt-detail .wizard-card .eingabe-gruppe > label { grid-column: 1; margin: 0; font-weight: 400; color: var(--t-stark); }
  body.zeigt-detail .wizard-card .eingabe-gruppe > :is(input, select, .auswahl) { grid-column: 2; }
  /* Zwei Gruppen nebeneinander hätten je 300 px Feld auf halber Breite;
     dort steht die Beschriftung wieder über dem Feld. */
  body.zeigt-detail .wizard-card .form-row .eingabe-gruppe { grid-template-columns: minmax(0, 1fr) minmax(160px, 220px); }
}
body.zeigt-detail .wizard-card :is(input[type="text"], input[type="number"], select) {
  min-height: 44px;
  background: var(--f-glas-innen);
  border-color: var(--l-stark);
}
body.zeigt-detail .wizard-card input[inputmode="decimal"],
body.zeigt-detail .wizard-card input[type="number"] { text-align: right; }
body.zeigt-detail .wizard-card :is(input, select):focus { background: var(--f-glas-dicht); }
body.zeigt-detail .help-text { color: var(--t-normal); }
body.zeigt-detail .abschnitt-titel {
  font-family: var(--schrift-zahl);
  font-weight: 500;
  letter-spacing: 0.09em;
  color: var(--t-normal);
  border-bottom-color: rgba(238, 240, 226, 0.12);
}

/* „Mehr dazu“ als kleine Pille mit einem Plus im Kreis. */
body.zeigt-detail .mehr > summary {
  margin-top: 6px;
  padding: 4px 12px 4px 6px;
  border-radius: var(--r-bedien);
  box-shadow: inset 0 0 0 1px var(--l-glas);
  color: var(--t-stark);
  font-size: 12.5px;
}
body.zeigt-detail .mehr > summary::after { display: none; }
body.zeigt-detail .mehr > summary::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--l-stark);
  background:
    linear-gradient(currentColor, currentColor) center / 8px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 8px no-repeat;
  transition: transform var(--zeit-schnell) var(--kurve);
}
body.zeigt-detail .mehr[open] > summary::before { transform: rotate(45deg); }
body.zeigt-detail .mehr > summary:hover { background: rgba(238, 240, 226, 0.08); }

/* --- Aufklapper: eine Fläche, das Plus im Kreis --------------------------- */
body.zeigt-detail .accordion-header { border-radius: var(--r-flaeche); }
body.zeigt-detail .accordion-header:hover { background: rgba(238, 240, 226, 0.05); }
body.zeigt-detail .accordion-pfeil {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 0;
  color: var(--t-stark);
  box-shadow: inset 0 0 0 1px var(--l-stark);
  background:
    linear-gradient(currentColor, currentColor) center / 10px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 10px no-repeat;
  transform: none;
  transition: transform var(--zeit-schnell) var(--kurve);
}
body.zeigt-detail .accordion-header[aria-expanded="true"] .accordion-pfeil { transform: rotate(45deg); }

/* --- Tabellen: Geist Mono, Kopf als Etikett, Haarlinien ------------------ */
body.zeigt-detail table.tilgungstabelle { font-family: var(--schrift-zahl); font-size: 13px; }
body.zeigt-detail table.tilgungstabelle th {
  background: rgba(10, 14, 11, 0.9);
  font-family: var(--schrift-zahl);
  letter-spacing: 0.08em;
  color: var(--t-normal);
  border-bottom-color: rgba(238, 240, 226, 0.12);
}
body.zeigt-detail table.tilgungstabelle td { border-bottom-color: rgba(238, 240, 226, 0.07); }

/* --- Aktionsleiste: eine Glas-Pille, unten klebend ---------------------- */
body.zeigt-detail .action-btn {
  border: 0;
  box-shadow: inset 0 0 0 1px var(--l-stark);
  color: var(--t-stark);
}
body.zeigt-detail .action-btn svg { color: var(--t-normal); }
body.zeigt-detail .action-btn.primaer { box-shadow: none; color: var(--auf-a); }
body.zeigt-detail .action-btn.primaer svg { color: var(--auf-a); }
@media (min-width: 701px) {
  /* Die Leiste steht im Markup vorn und wird ans Ende des Ergebnisses
     gestellt, damit sie beim Lesen unten klebt. Sie schwebt über der
     Ergebnisleiste, nicht auf ihr (Entscheidung Andi). */
  body.zeigt-detail #dashboard.active { display: flex; flex-direction: column; }
  body.zeigt-detail #dashboard > * { flex: none; }
  body.zeigt-detail .action-bar {
    order: 99;
    position: sticky;
    bottom: 84px;
    z-index: 30;
    align-self: center;
    flex-wrap: nowrap;
    gap: 6px;
    margin: 24px 0 0;
    padding: 6px;
    border-radius: var(--r-bedien);
    background: var(--f-glas-dicht);
    -webkit-backdrop-filter: var(--glas-blur);
    backdrop-filter: var(--glas-blur);
    box-shadow: var(--glas-kante), var(--schwebe);
  }
  body.zeigt-detail #dashboard > .aktion-hinweis { order: 100; margin-top: 12px; }
  html:has(body.zeigt-detail) { scroll-padding-bottom: 170px; }
}
/* Auf dem Telefon eine Fläche mit 2 × 2 Knöpfen, die im Fluss steht:
   Klebend nähmen zwei Leisten übereinander ein Viertel des Bildes. */
@media (max-width: 700px) {
  body.zeigt-detail .action-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 6px;
    border-radius: var(--r-flaeche);
    background: var(--f-glas-dicht);
    -webkit-backdrop-filter: var(--glas-blur);
    backdrop-filter: var(--glas-blur);
    box-shadow: var(--glas-kante);
  }
  body.zeigt-detail .action-btn { padding-inline: 10px; }
}

@media print {
  .detail-grund, .detail-titel { display: none !important; }
  /* Auf Papier ist der Kopf keine schwebende Pille, sondern eine Zeile mit der
     Marke und einer Linie darunter, wie vor dem Redesign. Der Plus-Kreis der
     Aufklapper hat nichts zu bedienen; aufgeklappt ist beim Druck ohnehin
     alles. */
  body.zeigt-detail .header-container {
    background: none !important; box-shadow: none !important;
    border: 0 !important; border-radius: 0;
    border-bottom: 1px solid var(--l-mittel) !important;
    padding-inline: 0 !important;
  }
  body.zeigt-detail .accordion-pfeil,
  body.zeigt-detail .step-zurueck { display: none !important; }
}

/* ===========================================================================
   IMPRESSUM UND DATENSCHUTZ (REDESIGN.md 13.5, ersetzt 8.7)

   Ein reines Textdokument: kein Bild, kein Glas außer dem Kopf, der Grund
   ist --f-seite. Beide Seiten laufen ohne Skript. Großer Titel, darunter
   der Stand, dann nummerierte Abschnitte mit Haarlinien. Der Text selbst
   ist unverändert; ein Test vergleicht ihn mit dem Stand vom 31.08.2026.
   =========================================================================== */
body.rechtsseite { padding-top: 10px; }
body.rechtsseite .kopf-marke img { display: block; height: 34px; width: auto; }
body.rechtsseite .rechtstext {
  width: min(1080px, 100%);
  max-width: none;
  margin: 112px auto 0;
}
.rechts-reiter {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  border-radius: var(--r-bedien);
  box-shadow: inset 0 0 0 1px var(--l-stark);
}
.rechts-reiter a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: var(--r-bedien);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--t-stark);
  text-decoration: none;
}
.rechts-reiter a:hover { background: rgba(238, 240, 226, 0.08); }
.rechts-reiter a[aria-current="page"] { background: var(--t-stark); color: var(--auf-a); }
.rechts-reiter a:focus-visible { outline: 2px solid var(--a-basis); outline-offset: 3px; }
.rechts-titel {
  margin-top: 64px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(238, 240, 226, 0.12);
}
.rechts-titel .etikett { margin: 0; color: var(--t-leise); }
.rechtstext h1, .rechtstext h2 {
  font-family: var(--schrift-anzeige);
  font-weight: 400;
  color: var(--t-stark);
  border: 0;
}
.rechtstext h1 {
  margin: 18px 0 22px;
  font-size: clamp(56px, 9vw, 128px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  hyphens: auto;
  overflow-wrap: anywhere;
}
.rechts-stand { margin: 0; font-family: var(--schrift-zahl); font-size: 13px; color: var(--t-leise); }
.rechts-abschnitt {
  display: grid;
  grid-template-columns: 64px minmax(0, 68ch);
  padding: 44px 0;
  border-bottom: 1px solid rgba(238, 240, 226, 0.12);
}
.abschnitt-nr {
  padding-top: 12px;
  font-family: var(--schrift-zahl);
  font-size: 13px;
  color: var(--t-leise);
}
.rechtstext h2 {
  margin: 0 0 18px;
  padding: 0;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.rechtstext p, .rechtstext li { font-size: 17px; line-height: 1.7; color: var(--t-normal); }
.rechtstext p { margin: 0 0 16px; }
.rechtstext .abschnitt-text > :last-child { margin-bottom: 0; }
.rechtstext strong { color: var(--t-stark); font-weight: 500; }
/* Anschrift, Telefon und E-Mail in Geist Mono. */
.rechtstext .anschrift,
.rechtstext a[href^="mailto:"],
.rechtstext a[href^="tel:"] { font-family: var(--schrift-zahl); font-size: 15.5px; }
.rechtstext a {
  color: var(--t-stark);
  text-decoration: underline;
  text-decoration-color: var(--l-stark);
  text-underline-offset: 3px;
}
.rechtstext a:hover { text-decoration-color: var(--t-stark); }
.rechtstext a:focus-visible { outline: 2px solid var(--a-basis); outline-offset: 2px; border-radius: var(--r-bedien); }
.rechts-zurueck { margin: 48px 0 96px; }
.rechts-zurueck .knopf-zweit {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: var(--r-bedien);
  box-shadow: inset 0 0 0 1px var(--l-stark);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}
.rechts-zurueck .knopf-zweit:hover { background: rgba(238, 240, 226, 0.08); }
/* Die große Wortmarke im Fuß steht als Bild; ohne Skript rieselt nichts. */
.fuss-marke-bild { height: auto; }
@media (max-width: 700px) {
  body.rechtsseite .rechtstext { margin-top: 96px; }
  .rechtstext h1 { font-size: clamp(40px, 11.5vw, 56px); }
  .rechts-abschnitt { grid-template-columns: minmax(0, 1fr); padding: 32px 0; }
  .abschnitt-nr { padding: 0 0 8px; }
  .rechtstext p, .rechtstext li { font-size: 16px; }
}
.rechtstext :is(.rechts-reiter, .rechts-zurueck) a { text-decoration: none; }

/* --- Kontaktformular (kontakt.html) ---------------------------------------
   Dieselbe Feldgestaltung wie im Rechner, auf Textgröße für ein Formular, das
   man auch auf dem Telefon ausfüllt: 16 px verhindern, dass iOS beim Tippen
   hineinzoomt. Das mehrzeilige Feld ist eine Fläche, das einzeilige eine
   Pille — die Regel der zwei Radien. */
.kontakt-formular { margin-top: 32px; }
.kontakt-formular .eingabe-gruppe { margin-bottom: var(--raum-8); }
.kontakt-formular label { font-size: 14.5px; }
.kontakt-freiwillig { font-weight: 400; color: var(--t-leise); }
.kontakt-formular :is(input[type="text"], input[type="email"], textarea) {
  width: 100%;
  min-height: 48px;
  background: var(--f-feld);
  border: 1px solid var(--l-stark);
  color: var(--t-stark);
  font-family: var(--schrift-text);
  font-size: 16px;
  padding: var(--raum-4) var(--raum-7);
  outline: none;
  border-radius: var(--r-bedien);
}
/* [name] hebt die Regel auf dieselbe Spezifität wie die gemeinsame Regel
   darüber, deren :is() mit input[type=…] zählt; sonst bliebe die Pille. */
.kontakt-formular textarea[name] {
  display: block;
  min-height: 200px;
  line-height: 1.6;
  resize: vertical;
  border-radius: var(--r-flaeche);
}
.kontakt-formular :is(input, textarea):hover { border-color: var(--a-basis); }
.kontakt-formular :is(input, textarea):focus {
  border-color: var(--a-basis);
  box-shadow: 0 0 0 3px var(--a-ring);
}
.kontakt-formular .knopf { padding: 0 24px; border: 0; cursor: pointer; }
.kontakt-formular .knopf:hover { background: color-mix(in srgb, var(--t-stark), #FFFFFF 60%); }
.rechtstext .kontakt-hinweis { margin-top: 20px; font-size: 14.5px; color: var(--t-leise); }
/* Das Bild hinter Kontakt, Impressum und Datenschutz (Andi, 19.09.2026):
   Kontakt trägt die Skyline, Impressum und Datenschutz die Straße. Das Raster
   ist vorab gerechnet (werkzeuge/baue-kontakt-grund.mjs), weil diese Seiten
   ohne Skript laufen. Es steht fest wie in der Detailansicht, und gelesen
   wird auf Milchglas nach der einen Rezeptur. */
body:is(.kontaktseite, .rechtsgrund)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  image-rendering: pixelated;
}
/* Schleier 55 % in --f-seite über dem Raster. Gemessen gegen die hellste
   Zelle der Dateien (in beiden 128, 128, 128), nicht gegen eine Stelle: Das
   Bild steht fest, und beim Scrollen läuft jeder Text über jede Höhe des
   Bildes. Ergebnis: --t-stark 8,91:1, --t-normal 5,62:1. --t-leise hielte nur
   3,36:1 und steht deshalb nirgends direkt auf dem Bild; Etikett und Stand
   tragen hier --t-normal, Reiter und Rückweg liegen auf Glas. */
body.kontaktseite::before {
  background:
    linear-gradient(rgba(10, 14, 11, 0.55), rgba(10, 14, 11, 0.55)),
    var(--f-seite) url("bilder/kontakt-grund.png") center / cover no-repeat;
}
body.rechtsgrund::before {
  background:
    linear-gradient(rgba(10, 14, 11, 0.55), rgba(10, 14, 11, 0.55)),
    var(--f-seite) url("bilder/rechts-grund.png") center / cover no-repeat;
}
:is(.kontaktseite, .rechtsgrund) .rechts-titel { border-bottom: 0; padding-bottom: 24px; }
:is(.kontaktseite, .rechtsgrund) .rechts-titel :is(.etikett, .rechts-stand) { color: var(--t-normal); }
/* .rechtstext p (0,1,1) schlägt .rechts-zurueck (0,1,0) und nimmt dem Rückweg
   den Abstand nach oben. Ohne Haarlinie darüber klebte der Knopf am Glas. */
:is(.kontaktseite, .rechtsgrund) .rechtstext .rechts-zurueck { margin-top: 32px; }
:is(.kontaktseite, .rechtsgrund) :is(.rechts-reiter, .rechts-zurueck .knopf-zweit),
.kontaktseite .rechts-abschnitt,
.rechtsgrund .rechts-flaeche {
  background: var(--f-glas-dicht);
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
}
.kontaktseite .rechts-abschnitt,
.rechtsgrund .rechts-flaeche {
  border-radius: var(--r-flaeche);
  box-shadow: var(--glas-kante);
}
.kontaktseite .rechts-abschnitt {
  padding: 40px 44px 44px 20px;
  border: 0;
}
/* Impressum und Datenschutz: eine Fläche für alle Abschnitte, die
   Haarlinien bleiben dazwischen. */
.rechtsgrund .rechts-flaeche { padding: 0 44px 0 20px; }
.rechtsgrund .rechts-flaeche .rechts-abschnitt:last-child { border-bottom: 0; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .kontaktseite .rechts-abschnitt, .rechtsgrund .rechts-flaeche { background: var(--f-karte); }
}
.kontaktseite .kontakt-formular :is(input[type="text"], input[type="email"], textarea) {
  background: var(--f-glas-innen);
}
@media (max-width: 700px) {
  .kontaktseite .rechts-abschnitt { padding: 24px 20px 28px; }
  .rechtsgrund .rechts-flaeche { padding: 0 20px; }
}
@media (prefers-reduced-transparency: reduce) {
  :is(.kontaktseite, .rechtsgrund) :is(.rechts-abschnitt, .rechts-flaeche, .rechts-reiter, .rechts-zurueck .knopf-zweit) { background: var(--f-karte); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
/* Auf Papier kein Bild und kein Glas: Ausgedruckt wird der Text. */
@media print {
  body:is(.kontaktseite, .rechtsgrund)::before { display: none; }
  :is(.kontaktseite, .rechtsgrund) :is(.rechts-abschnitt, .rechts-flaeche, .rechts-reiter) { background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
/* Das Feld für Programme: außerhalb des Bildes, nicht display: none — ein
   Feld, das gar nicht gezeichnet wird, erkennen viele Programme und lassen
   es aus. aria-hidden und tabindex="-1" im Markup halten es von Screenreader
   und Tastatur fern. */
.kontakt-falle {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.rechtstext .rechts-reiter a[aria-current="page"] { color: var(--auf-a); }
/* Auf dem Telefon stehen Name und Marke oben, Wert und Fundstelle darunter
   über die volle Breite. In drei Spalten brachen Betrag und Fundstelle
   mitten im Wort um. Zweizeilig ist die Zeile eine Fläche. */
@media (max-width: 700px) {
  .sp-fundliste li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 10px;
    padding: 10px 10px 12px 16px;
    border-radius: var(--r-flaeche);
  }
  .sp-fund-name { min-width: 0; }
  .sp-fund-marke { grid-column: 2; grid-row: 1; margin-left: 0; }
  .sp-fund-wert { grid-column: 1 / -1; }
  .sp-fund-quelle { overflow-wrap: break-word; }
}
/* Der Exposé-Dialog ist Glas (13.3). Er liegt über der abgedunkelten Seite
   und zeichnet als einzige Fläche dort weich; der Grund dahinter bleibt
   ohne Blur, aus dem Grund, der am ::backdrop steht. */
.expose-dialog {
  border: 0;
  border-radius: var(--r-flaeche);
  background: var(--f-glas-dicht);
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
  box-shadow: var(--glas-kante), var(--schwebe);
}
.expose-dialog :is(input[type="text"], select) { background: var(--f-glas-innen); border-color: var(--l-stark); }