/* ===========================================================================
   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 2
   ---------------------------------------------------------------------------
   Ziel: Financial Dashboard. Dichte Daten, ruhige Flächen, harte Kanten.
   Vorbilder: Linear (Grauskala und Fokusringe), Stripe (Typografie und
   Abstände), Bloomberg (Informationsdichte, Zahlen vor Zierde).

   Drei Regeln, aus denen sich der Rest ergibt:

   1. Die Fläche ist neutral, die Farbe ist knapp. Genau ein Akzent für
      Bedienbares, drei Statusfarben für Ergebnisse, sonst Grau.
   2. Kanten statt Schatten. Trennung entsteht aus einer 1-px-Linie und einem
      Wechsel der Flächenhelligkeit, nicht aus Weichzeichnung.
   3. Zahlen sind der Inhalt. Sie laufen in Tabellenziffern mit
      durchgestrichener Null, damit Spalten stehen und 0 und O sich
      unterscheiden.

   Radien sind klein (2/4/6 px). Ein Pill-Radius erscheint nur dort, wo das
   Element tatsächlich eine Marke ist — Ampelpunkt, Zähler.
   =========================================================================== */

:root {
    /* Die Seite ist dunkel, unabhängig von der Systemeinstellung: Neon ist
       Licht und braucht Dunkelheit. Auf weißem Grund wird aus einer
       leuchtenden Linie eine graue. */
    color-scheme: dark;

    /* --- Flächen -------------------------------------------------------
       Vier Stufen, von der Seite bis zur eingesenkten Fläche. Der Abstand
       zwischen zwei Stufen ist klein: Die Ordnung soll aus Linien kommen,
       nicht aus Helligkeitssprüngen. */
    --f-seite:      #08090C;   /* Seitenhintergrund                         */
    --f-panel:      #0D0F14;   /* Formularspalte, Tabellenkopf              */
    --f-karte:      #11141A;   /* Karten und Zeilen auf dem Panel           */
    --f-tief:       #161A21;   /* Eingabefelder, eingesenkte Flächen        */
    --f-mark:       #1B2029;   /* Zeile unter dem Zeiger, aktive Zeile      */

    /* --- Linien --------------------------------------------------------
       Drei Stärken. Die schwache trennt innerhalb einer Gruppe, die mittlere
       Gruppen voneinander, die starke rahmt Bedienelemente. */
    --l-zart:       #1C2029;
    --l-mittel:     #272D38;
    --l-stark:      #6A7284;   /* 3,3:1 gegen Weiss: Kante eines Bedienelements */

    /* --- Schrift -------------------------------------------------------
       Drei Stufen. Mehr braucht eine Tabelle nicht, und jede weitere Stufe
       wäre eine, die niemand mehr auseinanderhält. */
    --t-stark:      #ECEEF3;   /* Zahlen, Überschriften                     */
    --t-normal:     #A8AFBD;   /* Fließtext, Beschriftungen                 */
    --t-leise:      #7E8695;   /* Hilfetext, Einheiten, Fußnoten            */

    /* --- Akzent: ausschließlich Bedienbares ---------------------------- */
    --a-basis:      #7D9BFF;
    --a-hoch:       #A9BEFF;   /* gedrückt                                  */
    --a-flaeche:    #151B31;   /* aktive Reiterfläche, Auswahl              */
    --a-ring:       rgba(125, 155, 255, 0.40);
    --auf-a:        #07080B;

    /* --- Status: ausschließlich Ergebnisse ----------------------------- */
    --s-gut:        #4FE3A5;
    --s-gut-f:      #0A2018;
    --s-halb:       #F0B65C;
    --s-halb-f:     #241B0C;
    --s-schlecht:   #FF7A78;
    --s-schlecht-f: #26100F;

    /* --- 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. */
    --reihe-1:      #7D9BFF;
    --reihe-2:      #F0B65C;
    --reihe-gitter: #222732;

    /* --- Abstände ------------------------------------------------------
       Vierer-Raster, dicht besetzt im unteren Bereich. Eine Tabellenzeile
       lebt von 6 und 8, nicht von 24. */
    --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 --------------------------------------------------------
       Klein und wenige. 4 für alles Bedienbare, 6 für Behälter, 2 für
       Marken und Kennzeichen. 999 nur für den Ampelpunkt. */
    --r-marke:  2px;
    --r-bedien: 4px;
    --r-karte:  6px;
    --r-punkt:  999px;

    /* --- Schrift und Schriftgrößen -------------------------------------
       Ein Textschnitt, ein Zahlenschnitt. Die Skala ist eng, weil Dichte
       aus kleinen, klar getrennten Stufen entsteht. */
    --schrift-text: "Fira Sans", system-ui, -apple-system, sans-serif;
    --schrift-zahl: "Fira Code", ui-monospace, "SF Mono", "Cascadia Mono", monospace;

    --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-eng:   1.25;   /* Überschriften und Kennzahlen                  */
    --zeile-tab:   1.35;   /* Tabellen                                      */
    --zeile-text:  1.55;   /* Fließtext                                     */

    /* --- Erhebung ------------------------------------------------------
       Ein einziger, sehr flacher Schatten, und auch der nur für Dinge, die
       tatsächlich über der Seite schweben. Karten bekommen keinen. */
    --schwebe: 0 1px 2px rgba(0, 0, 0, 0.55), 0 8px 28px -10px rgba(0, 0, 0, 0.7);

    /* --- Neon ----------------------------------------------------------
       Zwei Leuchtfarben und eine Spanne dazwischen. Der Anfang ist das
       Akzentblau der Marke, das Ende ein Violett; die Stäbe im Hintergrund
       laufen über den Winkel dazwischen. Bewusst kein Magenta bis Rot: Rot
       gehört auf dieser Seite dem schlechten Ergebnis und darf nicht als
       Dekoration auftauchen.

       Neon ist ausschließlich Bildwelt und Bedienzustand. Kein Wert und kein
       Urteil wird je in Neon gesetzt — dafür bleiben --s-gut, --s-halb und
       --s-schlecht zuständig. */
    --neon-winkel-a: 226;      /* Akzentblau als Winkel im HSL-Rad          */
    --neon-winkel-b: 288;      /* Violett                                   */
    --neon-a:      hsl(226 100% 70%);
    --neon-b:      hsl(288 100% 72%);
    --neon-glut:   0 0 12px hsl(226 100% 66% / 0.55);
    --neon-glut-b: 0 0 16px hsl(288 100% 68% / 0.45);

    /* --- Schweben ------------------------------------------------------
       Die Zeit, die etwas braucht, um einzuschweben, und der Weg dahin.
       Beides steht hier, damit Karten, Kennzahlen und Aufklapper denselben
       Rhythmus haben. */
    --schwebe-weg:  14px;
    --schwebe-zeit: 0.44;      /* Sekunden, Antwortzeit der Feder           */

    /* --- Bewegung ------------------------------------------------------
       Kurz und einheitlich. Ein Zustandswechsel darf man nicht sehen,
       sondern nur bemerken. */
    --zeit-schnell: 120ms;
    --zeit-normal:  170ms;
    --kurve:        cubic-bezier(0.2, 0, 0.13, 1);

    --spalte-max: 1180px;
}

/* 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%;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* 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);
}
.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-bottom: var(--raum-6);
  border-bottom: 1px solid var(--l-mittel);
}
h1 {
  font-family: var(--schrift-text);
  font-weight: 600;
  /* Auf der Skala: von --g-24 bis --g-32. Ein Dashboard-Kopf benennt die
     Seite, er bewirbt sie nicht. */
  font-size: clamp(var(--g-24), 4vw, var(--g-32));
  letter-spacing: -0.022em;
  line-height: 1.1;
  margin: 0;
  color: var(--t-stark);
}
/* --- Der Name waechst aus MPL --------------------------------------------
   Die Gruppen der Kleinbuchstaben wachsen aus der Breite 0 hervor. Dafuer
   muessen sie inline-block mit overflow:hidden sein — und genau das
   verschiebt die Grundlinie: Bei einem inline-block mit overflow ungleich
   visible ist die Grundlinie die untere Rand-Kante und nicht die Schriftlinie.
   Ohne Ausgleich saessen "y", "rop" und "ens" hoeher als M, P und L.

   line-height:1 macht die Box so hoch wie die Schrift, der negative Rand holt
   die Unterlaenge wieder herein. Der Wert ist im Browser nachgemessen und
   nicht geschaetzt; er steht in em, damit er jeder Schriftgroesse folgt.

   Bewegt werden max-inline-size und opacity. Die erste Eigenschaft rechnet
   das Layout neu — hier eine Zeile mit drei Elementen, einmal, in 0,3
   Sekunden. Nur mit transform waere das nicht zu machen: Die Buchstaben
   danach muessen mitwandern, und transform bewegt nichts im Textfluss. */
.w-rest {
  display: inline-block;
  overflow: hidden;
  line-height: 1;
  margin-bottom: -0.156em;
}
@media (prefers-reduced-motion: no-preference) {
  .w-baut .w-rest {
    animation: wort-rest 300ms var(--kurve) var(--v) both;
  }
}
@keyframes wort-rest {
  from { max-inline-size: 0;         opacity: 0; }
  to   { max-inline-size: var(--w);  opacity: 1; }
}
@media print {
  /* Auf Papier steht der Name vollstaendig da, auch wenn der Ausdruck
     waehrend des Aufbaus ausgeloest wird. */
  .w-rest { max-inline-size: none !important; opacity: 1 !important;
            animation: none !important; }
}

/* Der Name laeuft in Kapitaelchen, wie in der Wortmarke. Die Laufweite wird
   dafuer positiv: Kapitaelchen sind breiter gebaut als Kleinbuchstaben und
   brauchen mehr Luft, nicht weniger. Die Regel steht auf .marke h1 und nicht
   auf h1, damit sie eine spaetere Ueberschrift nicht mitnimmt — und weil sie
   so die Laufweite aus dem Schriftabschnitt weiter unten ueberschreibt, ohne
   dass es auf die Reihenfolge ankommt. */
.marke h1 {
  font-variant-caps: small-caps;
  letter-spacing: 0.012em;
}
/* Marke: Zeichen in der Akzentfarbe, Wort in der Textfarbe. Dieselbe Regel wie im
   Diagramm — Farbe steht neben der Schrift, nie in der Schrift. */
.marke {
  display: flex;
  align-items: center;
  gap: var(--raum-5);
}
.marke-zeichen {
  width: clamp(26px, 3.4vw, 30px);
  height: clamp(26px, 3.4vw, 30px);
  color: var(--a-basis);
  flex: none;
}

.header-container p {
  margin: var(--raum-3) 0 0 0;
  font-size: var(--g-14);
  color: var(--t-normal);
  max-width: 58ch;
}

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

.eingabe-gruppe { margin-bottom: var(--raum-6); }
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-tief);
  border: 1px solid var(--l-stark);
  color: var(--t-stark);
  font-family: var(--schrift-zahl);
  font-size: var(--g-14);
  padding: var(--raum-3) var(--raum-4);
  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(--t-leise); }
/* 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-8);
}
/* 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-4);
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -4px;
  border-right: 1.5px solid var(--t-leise);
  border-bottom: 1.5px solid var(--t-leise);
  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(--t-stark); }
select option { background: var(--f-karte); color: var(--t-stark); }

.readonly-field {
  background: transparent !important;
  border-style: dashed !important;
  color: var(--t-normal);
}

.help-text {
  font-size: var(--g-13);
  line-height: var(--zeile-text);
  color: var(--t-normal);
  margin-top: var(--raum-3);
  max-width: 65ch;
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--raum-6); }
.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-bedien);
  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-bedien);
}

/* 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: 12px;
  height: 2px;
  border-radius: 0;
  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); }
/* 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-bedien);
  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); }

/* --- 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. */
  input[type="text"], input[type="number"], select { font-size: 16px; min-height: 42px; }
  /* 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); }
}

/* ---------------------------------------------------------------------------
   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: color-mix(in srgb, var(--f-karte) 72%, transparent);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 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);
}

/* =========================================================================
   ERTRAGSFELD — der bewegte Hintergrund

   Aufbau von hinten nach vorn:
     .neonraum     die Bühne, fest im Fenster
     .neon-raster  ein feines Datenraster, das schräg durchs Bild zieht
     .neon-feld    die steigenden Linien, jede für sich unterwegs
     .neon-glanz   zwei weiche Lichtfelder, die langsam wandern
     .neon-dunst   die Verdunklung in der Mitte, damit Text lesbar bleibt

   Die Form kommt aus der Marke, nicht aus einer Vorlage. Der rechte Arm des
   Y im Zeichen läuft von (12|13) nach (18|5), also 6 nach rechts und 8 nach
   oben. Daraus ergibt sich ein Winkel von 53,13 Grad über der Waagerechten,
   und in genau diesem Winkel steigt hier alles: die Linien, das Raster und
   die Richtung, in die sie wandern. Auch die Maschenweite des Rasters,
   60 auf 80 Pixel, ist dasselbe Verhältnis 6:8 — deshalb kann das Raster um
   genau eine Masche wandern und schließt danach nahtlos an sich selbst an.

   Die Verdunklung ist nicht Geschmack, sondern Bedingung: Ohne sie stünden
   Zahlenkolonnen vor wanderndem Licht, und genau die soll man hier lange
   lesen können.
   ========================================================================= */
html { background: var(--f-seite); }

.neonraum {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background:
    /* Unten das Akzentblau der Marke, oben rechts das Violett. Beide sehr
       schwach: Sie geben dem Bild eine Richtung, mehr nicht. */
    radial-gradient(90% 70% at 22% 108%, hsl(226 100% 58% / 0.20), transparent 66%),
    radial-gradient(80% 60% at 88% -8%, hsl(288 100% 58% / 0.14), transparent 62%),
    var(--f-seite);
}

/* --- Das Raster ----------------------------------------------------------
   Zwei Scharen dünner Linien, sehr leise. Es zieht in der Steigung des
   Zeichens durchs Bild und wandert dabei um genau eine Masche, damit die
   Schleife keine sichtbare Naht hat. Die Fläche ist ringsum über den Rand
   hinaus gezogen; sonst liefe an zwei Kanten eine leere Zone mit. */
.neon-raster {
  position: absolute;
  inset: -12%;
  background-image:
    linear-gradient(to right,  hsl(226 100% 72% / 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, hsl(226 100% 72% / 0.05) 1px, transparent 1px);
  background-size: 60px 80px;
  animation: neon-zug 22s linear infinite;
}

@keyframes neon-zug {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(60px, -80px, 0); }
}

/* --- Die steigenden Linien -----------------------------------------------
   Vierzehn Striche, jeder mit eigener Stelle, Länge, Farbe, Dauer und
   Startversatz. Der Versatz ist negativ: Die Striche stehen von Anfang an
   an verschiedenen Stellen ihres Takts, sonst liefe beim Laden eine
   sichtbare Welle einmal durch das ganze Bild.

   Jeder Strich gleitet an seiner eigenen Achse entlang — er bewegt sich
   also in die Richtung, in die er zeigt. Deshalb steht das Verschieben im
   transform hinter dem Drehen. */
.neon-feld { position: absolute; inset: 0; }

.neon-feld i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--l);
  height: 3px;
  border-radius: 3px;
  /* Der Farbwinkel läuft über --t von 0 (Akzentblau) bis 1 (Violett). */
  background: hsl(calc(226 + 62 * var(--t)) 100% 70%);
  box-shadow:
    0 0 10px hsl(calc(226 + 62 * var(--t)) 100% 66% / 0.9),
    0 0 34px hsl(calc(226 + 62 * var(--t)) 100% 62% / 0.55),
    0 0 76px hsl(calc(226 + 62 * var(--t)) 100% 58% / 0.25);
  opacity: 0;
  animation: neon-steigt var(--d) linear infinite;
  animation-delay: var(--v);
}


/* --- Die vierzehn Linien -------------------------------------------------
   Jede Linie trägt ihre eigene Stelle, Länge, Farbe, Dauer und ihren eigenen
   negativen Startversatz. Bis zum 29.08.2026 standen diese Werte als
   style-Attribut am Element; sie sind hierher gewandert, damit die
   Content-Security-Policy ohne 'unsafe-inline' für Stilangaben auskommt.

   Der Versatz ist der Grund, warum beim Laden keine sichtbare Welle einmal
   durchs Bild läuft: Die Linien stehen von Anfang an an verschiedenen Stellen
   ihres Takts. Wer eine Linie ändert, ändert sie hier — es gibt keine zweite
   Stelle mehr, an der diese Zahlen stehen. */
.linie-1  { --x: 4%; --y: 88%; --l: 26vmin; --t: 0.00; --d: 13s; --v: -0s }
.linie-2  { --x: 11%; --y: 62%; --l: 18vmin; --t: 0.15; --d: 16s; --v: -3s }
.linie-3  { --x: 17%; --y: 96%; --l: 34vmin; --t: 0.05; --d: 11s; --v: -6s }
.linie-4  { --x: 23%; --y: 34%; --l: 14vmin; --t: 0.35; --d: 18s; --v: -2s }
.linie-5  { --x: 30%; --y: 74%; --l: 22vmin; --t: 0.20; --d: 14s; --v: -9s }
.linie-6  { --x: 38%; --y: 18%; --l: 12vmin; --t: 0.55; --d: 20s; --v: -5s }
.linie-7  { --x: 44%; --y: 90%; --l: 28vmin; --t: 0.10; --d: 12s; --v: -11s }
.linie-8  { --x: 52%; --y: 50%; --l: 16vmin; --t: 0.45; --d: 17s; --v: -7s }
.linie-9  { --x: 60%; --y: 26%; --l: 20vmin; --t: 0.65; --d: 15s; --v: -1s }
.linie-10 { --x: 67%; --y: 84%; --l: 30vmin; --t: 0.25; --d: 13s; --v: -4s }
.linie-11 { --x: 74%; --y: 44%; --l: 15vmin; --t: 0.75; --d: 19s; --v: -8s }
.linie-12 { --x: 81%; --y: 70%; --l: 24vmin; --t: 0.40; --d: 12s; --v: -10s }
.linie-13 { --x: 88%; --y: 22%; --l: 18vmin; --t: 0.90; --d: 16s; --v: -2s }
.linie-14 { --x: 95%; --y: 58%; --l: 32vmin; --t: 1.00; --d: 14s; --v: -6s }

@keyframes neon-steigt {
  0%   { opacity: 0;    transform: translate(-50%, -50%) rotate(-53.13deg) translateX(-16vmin); }
  20%  { opacity: 0.85; }
  80%  { opacity: 0.85; }
  100% { opacity: 0;    transform: translate(-50%, -50%) rotate(-53.13deg) translateX(16vmin); }
}

/* --- Der Glanz -----------------------------------------------------------
   Zwei große, weiche Lichtfelder, die gegenläufig wandern. Sie sorgen für
   die Unregelmäßigkeit, die eine einzelne Schleife nie hat: Wo sich Glanz
   und Strich treffen, wird es heller, und dieser Treffpunkt wiederholt sich
   erst nach vielen Minuten. */
.neon-glanz {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(38% 32% at 30% 70%, hsl(226 100% 62% / 0.22), transparent 70%),
    radial-gradient(32% 28% at 72% 28%, hsl(288 100% 62% / 0.16), transparent 70%);
  filter: blur(20px);
  animation: neon-wandern 34s ease-in-out infinite;
}

@keyframes neon-wandern {
  0%, 100% { transform: translate3d(-3%, 2%, 0) scale(1); }
  50%      { transform: translate3d(3%, -2%, 0) scale(1.08); }
}

.neon-dunst {
  position: absolute;
  inset: 0;
  /* Die Deckung ist nachgerechnet, nicht geschaetzt. Der schlechteste Fall
     ist der leiseste Text (--t-leise, #7E8695) ueber dem hellsten Strich
     (Violett, rund #CC66FF):

       Deckung 0,80  Grund rgb(47,28,61)  leiser Text 4,24:1  — zu wenig
       Deckung 0,88  Grund rgb(32,20,41)  leiser Text 4,80:1  — genug

     Bei 0,88 kommt der normale Text auf 7,99:1 und die Ueberschrift auf
     15,16:1. Die Rechnung gilt unveraendert weiter, weil die hellste Farbe
     im Bild dieselbe geblieben ist; nur ihre Form hat sich geaendert. Die
     aeusseren sechzehn Prozent bleiben frei; dort steht nichts zu lesen. */
  background:
    linear-gradient(to right,
      hsl(228 26% 3% / 0.06) 0,
      hsl(228 26% 3% / 0.30) 12%,
      hsl(228 26% 3% / 0.88) 23%,
      hsl(228 26% 3% / 0.88) 77%,
      hsl(228 26% 3% / 0.30) 88%,
      hsl(228 26% 3% / 0.06) 100%),
    /* Oben und unten zusätzlich abdunkeln: Dort stehen Kopfzeile und
       schwebende Ergebnisleiste, beide ohne eigene Fläche. */
    linear-gradient(to bottom, hsl(228 26% 3% / 0.72) 0, transparent 22%),
    linear-gradient(to top, hsl(228 26% 3% / 0.55) 0, transparent 18%);
}

@media (max-width: 640px) {
  /* Auf dem Telefon füllt der Inhalt die ganze Breite. Der Streifen wird zur
     Fläche, und vom Feld bleibt nur an den äußersten Rändern etwas sichtbar.
     Die Striche werden dünner, damit sie in der schmalen Randzone nicht wie
     Balken wirken. */
  .neon-feld i { height: 2px; }
  .neon-dunst {
    background:
      linear-gradient(to right,
        hsl(228 26% 3% / 0.55) 0,
        hsl(228 26% 3% / 0.90) 10%,
        hsl(228 26% 3% / 0.90) 90%,
        hsl(228 26% 3% / 0.55) 100%),
      linear-gradient(to bottom, hsl(228 26% 3% / 0.6) 0, transparent 20%);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Das Bild bleibt, die Bewegung geht. Wer Bewegung abbestellt hat, meint
     nicht, dass er keine Gestaltung will. Die Striche stehen dann dort, wo
     sie gesetzt sind — ohne Animation greift die Deckung 0 aus der Regel
     oben, deshalb wird sie hier ausdrücklich zurückgenommen. */
  .neon-raster, .neon-glanz, .neon-feld i { animation: none; }
  .neon-feld i {
    opacity: 0.55;
    transform: translate(-50%, -50%) rotate(-53.13deg);
  }
}

@media print {
  .neonraum { display: none; }
}

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

   Die Werte sind gegen Weiß gemessen: Fließtext 15,9:1, Hilfetext 8,9:1,
   die Statusfarben zwischen 5,1:1 und 6,4: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 Schwarz 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:       #F2F3F5;

  --l-zart:       #D7DAE0;
  --l-mittel:     #B5B9C2;
  --l-stark:      #838893;

  --t-stark:      #000000;
  --t-normal:     #1E2229;
  --t-leise:      #4C525C;

  --a-basis:      #12336E;
  --a-hoch:       #12336E;
  --a-flaeche:    #EDF0F7;
  --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;

  --reihe-1:      #1B3FA8;
  --reihe-2:      #8A5A00;
  --reihe-gitter: #D7DAE0;

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

/* =========================================================================
   NEONSCHEIN

   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 aber in der Statusfarbe, nicht in Neon, damit
        das Leuchten die Aussage verstärkt statt sie zu überschreiben.
   ========================================================================= */
.btn-nav:hover,
.sp-weiter:hover,
.action-btn:hover {
  box-shadow: var(--neon-glut);
}
.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), var(--neon-glut);
}
.step-pill.active {
  box-shadow: inset 0 0 0 1px var(--a-basis), 0 0 14px hsl(226 100% 62% / 0.25);
}
/* 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 hsl(226 100% 64% / 0.75);
}
/* 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 hsl(226 100% 62% / 0.6);
}
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px var(--a-ring), 0 0 12px -2px hsl(226 100% 62% / 0.35);
}
.urteil-ampel.gruen, .sp-ampel.gruen, .ergebnis-leiste-ampel.gruen {
  box-shadow: 0 0 12px hsl(155 70% 55% / 0.7);
}
.urteil-ampel.gelb, .sp-ampel.gelb, .ergebnis-leiste-ampel.gelb {
  box-shadow: 0 0 12px hsl(38 85% 62% / 0.7);
}
.urteil-ampel.rot, .sp-ampel.rot, .ergebnis-leiste-ampel.rot {
  box-shadow: 0 0 12px hsl(2 100% 72% / 0.7);
}
/* Das Markenzeichen im Kopf steht für sich und darf leuchten. */
.marke-zeichen { filter: drop-shadow(0 0 10px hsl(226 100% 62% / 0.45)); }

/* =========================================================================
   NEONSCHIMMER

   Der Schein oben sagt, WO Licht sitzt. Hier steht, wie es sich bewegt.

   Zwei Bauarten, und die Wahl zwischen ihnen ist eine Frage der Fläche:

     1. Ein Lichtband, das quer durch das Element zieht. Es liegt in einem
        ::before, wird vom Element beschnitten (overflow: hidden) und
        bewegt sich ausschließlich über transform. Das übernimmt der
        Compositor. Für große Flächen — Knöpfe, Feldzeilen — ist das die
        richtige Bauart.
     2. Ein Verlauf, dessen background-position wandert. Das ist Malarbeit
        in jedem Bild und deshalb die Ausnahme: Sie gilt nur für das
        Markenzeichen, 28 mal 28 Pixel. Ein ::before ginge dort nicht, weil
        das Zeichen ein svg ist und svg keine Pseudoelemente zeichnet; die
        Hülle darum darf nicht beschneiden, sonst wäre der Schein weg.

   Der Schimmer läuft langsam und mit langer Pause. Ein Knopf, der im
   Sekundentakt blitzt, zieht den Blick von der Zahl weg, um die es geht —
   deshalb 7 bis 9 Sekunden je Durchgang, davon nur etwa ein Fünftel in
   Bewegung.

   Alle Farben kommen aus dem Akzent der Marke (--a-basis, Winkel 226). Der
   Hintergrund darf zwischen Blau und Violett laufen, ein Bedienelement nie:
   Wo etwas anzufassen ist, hat die Seite genau eine Farbe.
   ========================================================================= */

/* --- Das Lichtband -------------------------------------------------------
   Ein schmaler heller Streifen, schräg gestellt und breiter als hoch, damit
   er beim Durchlaufen wie ein Reflex über eine Kante wirkt und nicht wie ein
   Balken. Er trägt kein eigenes Blau: Auf blauer Fläche würde ein blauer
   Reflex verschwinden. */
.sp-weiter,
.btn-nav:not(.btn-prev),
.action-btn.primaer,
.sp-feldzeile,
.step-pill.active {
  position: relative;
  overflow: hidden;
}

.sp-weiter::before,
.btn-nav:not(.btn-prev)::before,
.action-btn.primaer::before,
.sp-feldzeile::before,
.step-pill.active::before {
  content: "";
  position: absolute;
  top: -60%;
  bottom: -60%;
  left: -40%;
  width: 34%;
  pointer-events: none;
  background: linear-gradient(
    to right,
    transparent 0,
    hsl(226 100% 92% / 0.18) 42%,
    hsl(226 100% 96% / 0.30) 50%,
    hsl(226 100% 92% / 0.18) 58%,
    transparent 100%);
  transform: translate3d(0, 0, 0) rotate(18deg);
  animation: neon-band 8s var(--kurve) infinite;
}
/* Auf den leisen Flächen — Feldzeile, aktiver Reiter — ist der Reflex
   schwächer. Dort liegt Text auf dunklem Grund, und ein heller Streifen
   darüber kostet Lesbarkeit, statt sie zu verstärken. */
.sp-feldzeile::before,
.step-pill.active::before {
  width: 70%;
  background: linear-gradient(
    to right,
    transparent 0,
    hsl(226 100% 80% / 0.04) 40%,
    hsl(226 100% 88% / 0.10) 50%,
    hsl(226 100% 80% / 0.04) 60%,
    transparent 100%);
  animation-duration: 11s;
}
.btn-nav:not(.btn-prev)::before { animation-duration: 9s; }
/* Ein gesperrter Knopf schimmert nicht. Licht heißt auf dieser Seite
   „anzufassen"; an einem Knopf, der nicht reagiert, wäre es eine Lüge. */
.sp-weiter[disabled]::before { display: none; }

@keyframes neon-band {
  /* Der Streifen steht die meiste Zeit außerhalb. Sichtbar ist er nur
     zwischen 0 und 22 Prozent des Takts — knapp zwei Sekunden. */
  0%        { transform: translate3d(-120%, 0, 0) rotate(18deg); }
  22%, 100% { transform: translate3d(420%, 0, 0) rotate(18deg); }
}

/* --- Der Ruheschein ------------------------------------------------------
   Bisher leuchtete ein Knopf erst unter dem Zeiger. Damit war er im
   Ruhezustand ein blaues Rechteck wie jedes andere. Jetzt trägt die erste
   Handlung eines Blattes dauerhaft einen weichen Schein — schwächer als
   unter dem Zeiger, damit der Zeigerzustand seine Aussage behält. */
.sp-weiter:not([disabled]) {
  box-shadow: 0 0 18px -4px hsl(226 100% 66% / 0.55);
}
.sp-weiter:not([disabled]):hover {
  box-shadow: 0 0 26px -2px hsl(226 100% 70% / 0.8);
}

/* --- Die Eingabefelder ---------------------------------------------------
   Die Kante bleibt --l-stark und damit die gemessenen 3,66:1; angetastet
   wird sie nicht, denn sie ist der Nachweis, dass hier ein Bedienelement
   steht. Dazu kommen nur zwei Lichter: eine helle Linie an der Oberkante,
   die die Vertiefung zeigt, und ein sehr schwacher Schein nach außen. Beide
   liegen über der Kante, nicht an ihrer Stelle — Kontrast kann dadurch nur
   steigen. */
input[type="text"], input[type="number"], select {
  box-shadow:
    inset 0 1px 0 0 hsl(226 100% 80% / 0.07),
    0 0 12px -6px hsl(226 100% 64% / 0.5);
}
/* Im Fokus atmet der Ring. Das ist die einzige Stelle, an der eine
   Schattenfarbe selbst bewegt wird: Ein Eingabefeld zeichnet keine
   Pseudoelemente, ein Lichtband ist dort also nicht zu haben. Es läuft immer
   nur an einem einzigen Feld und betrifft eine Fläche von rund 300 mal 40
   Pixeln. */
input:focus, select:focus {
  animation: neon-feldpuls 2.8s var(--kurve) infinite;
}
.sp-feldzeile input:focus {
  animation: none;
  box-shadow: inset 0 1px 0 0 hsl(226 100% 80% / 0.07);
}
.sp-feldzeile:focus-within {
  animation: neon-linienpuls 2.8s var(--kurve) infinite;
}
@keyframes neon-linienpuls {
  0%, 100% { box-shadow: 0 2px 0 0 var(--a-basis), 0 6px 20px -8px hsl(226 100% 62% / 0.6); }
  50%      { box-shadow: 0 2px 0 0 var(--a-basis), 0 8px 28px -6px hsl(226 100% 70% / 0.85); }
}
@keyframes neon-feldpuls {
  0%, 100% { box-shadow: 0 0 0 3px var(--a-ring), 0 0 12px -2px hsl(226 100% 62% / 0.35); }
  50%      { box-shadow: 0 0 0 3px var(--a-ring), 0 0 20px 0   hsl(226 100% 70% / 0.65); }
}

/* --- Die Fortschrittsleiste ----------------------------------------------
   Die Füllung wird von der Feder über scaleX gesetzt. Ein Lichtband darin
   würde mitgestreckt und liefe bei einem Fünftel Füllung fünffach breit
   durchs Bild. Deshalb bewegt sich hier nichts im Raum, sondern nur die
   Deckung: Die Füllung bekommt eine zweite, hellere Lage darüber, die
   auf- und abblendet. opacity ist von scaleX unberührt. */
.sp-strich-fuell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: hsl(226 100% 84%);
  opacity: 0;
  animation: neon-fuellpuls 3.4s var(--kurve) infinite;
}
@keyframes neon-fuellpuls {
  0%, 100% { opacity: 0; }
  50%      { opacity: 0.45; }
}
/* --- Das Markenzeichen ---------------------------------------------------
   Die Hülle trägt den Schein. Sie ist nötig, weil ein svg keine
   Pseudoelemente zeichnet und der Schein außerhalb des Zeichens liegt.
   drop-shadow folgt dabei der tatsächlichen Form des Strichs und nicht dem
   Rechteck der Hülle — anders als box-shadow, das den Schein um den ganzen
   Kasten legen würde. */
.marke-glanz {
  position: relative;
  display: inline-flex;
  filter: drop-shadow(0 0 10px hsl(226 100% 62% / 0.45));
}
/* Der Schein am svg selbst entfällt: Er sitzt an der Hülle, sonst läge er
   zweimal übereinander. */
.marke-zeichen { filter: none; }

/* Das wandernde Lichtband ist zurück. Es war entfallen, als das Zeichen ein
   reiner Umriss war — ein Band über leerer Fläche sieht aus wie ein Fehler in
   der Darstellung. Das Haus ist wieder gefüllt, also gibt es wieder etwas,
   über das Licht ziehen kann.

   Beschnitten wird auf das HAUS und nicht auf die Kachel: Zwischen Rahmen und
   Haus liegt leere Fläche, und genau dort wäre das Band wieder falsch. Die
   Werte sind die fünf Eckpunkte des Hauses aus dem 64er-Raster in Prozent —
   Giebel (32|16), Traufen (14|29,5) und (50|29,5), Sockelecken auf y=49,6. */
.marke-glanz::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  clip-path: polygon(50% 25%, 78.1% 46.1%, 78.1% 77.5%, 21.9% 77.5%, 21.9% 46.1%);
  background: linear-gradient(
    115deg,
    transparent 38%,
    hsl(226 100% 96% / 0.42) 50%,
    transparent 62%);
  background-size: 320% 100%;
  background-position: 120% 0;
  /* Neun Sekunden je Durchgang, davon ein Fünftel in Bewegung. Der Versatz
     von 1,4 s lässt zuerst den Aufbau darunter zu Ende laufen. */
  animation: neon-marke 9s var(--kurve) 1.4s infinite;
}
@keyframes neon-marke {
  0%        { background-position: 120% 0; }
  20%, 100% { background-position: -120% 0; }
}

/* --- Das Zeichen baut sich einmal auf ------------------------------------
   Rahmen, Haus, Haken, Spitze — in dieser Reihenfolge, weil das die
   Reihenfolge der Aussage ist: erst das Feld, dann das Objekt, dann die
   Prüfung, dann ihr Ergebnis. Zusammen 0,96 Sekunden, danach steht es still.

   Es läuft EINMAL und nicht in Schleife. Ein Zeichen, das im Seitenkopf
   dauernd in Bewegung ist, zieht den Blick von den Zahlen weg, um die es
   geht — derselbe Grund, aus dem das Lichtband darüber neun Sekunden Pause
   hat und nicht eine.

   Der verborgene Anfangszustand steht AUSSCHLIESSLICH in den Keyframes und
   die Regeln ausschließlich in `prefers-reduced-motion: no-preference`. Damit
   braucht es für den umgekehrten Fall keine Ausnahmeregel: Wer Bewegung
   abbestellt hat, bekommt das fertige Zeichen, weil nie etwas anderes gesetzt
   wurde. Beim Ertragsfeld ist das umgekehrt gebaut, und dort musste die
   Ausnahmeregel Deckung und Drehung eigens nachtragen — sonst standen die
   Linien auf 0.

   Bewegt werden nur transform, opacity und stroke-dashoffset. Die ersten
   beiden übernimmt der Compositor; das dritte zeichnet neu, betrifft aber
   eine Fläche von 30 mal 30 Pixeln und läuft nur einmal. */
@media (prefers-reduced-motion: no-preference) {
  .marke-zeichen .m-rahmen {
    transform-box: fill-box;
    transform-origin: center;
    animation: marke-rahmen 380ms var(--kurve) both;
  }
  .marke-zeichen .m-haus {
    transform-box: fill-box;
    transform-origin: center bottom;
    animation: marke-haus 340ms var(--kurve) 150ms both;
  }
  /* Erst liegt die Scheibe, dann werden die Blätter darauf gezeichnet — die
     umgekehrte Reihenfolge zum früheren Haken, bei dem der Strich zuerst kam
     und die Spitze zuletzt. Zusammen weiterhin 0,96 Sekunden. */
  .marke-zeichen .m-scheibe {
    transform-box: fill-box;
    transform-origin: center;
    animation: marke-scheibe 260ms var(--kurve) 380ms both;
  }
  .marke-zeichen .m-blende {
    /* Der Pfad trägt pathLength="1", deshalb rechnet der Strich in 0 bis 1
       und die Animation bleibt richtig, wenn sich der Pfad ändert. */
    stroke-dasharray: 1;
    animation: marke-blende 480ms var(--kurve) 480ms both;
  }
}
@keyframes marke-rahmen {
  from { opacity: 0; transform: scale(0.86); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes marke-haus {
  from { opacity: 0; transform: translateY(5px) scale(0.9); }
  to   { opacity: 1; transform: none; }
}
@keyframes marke-scheibe {
  from { opacity: 0; transform: scale(0.4); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes marke-blende {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  /* Das Licht bleibt, die Bewegung geht. Die Lichtbänder verschwinden
     vollständig — ein stehender heller Streifen quer über einem Knopf sähe
     aus wie ein Fehler in der Darstellung. Der Ruheschein, die Feldkante
     und der Schein am Zeichen bleiben unverändert. */
  .sp-weiter::before,
  .btn-nav:not(.btn-prev)::before,
  .action-btn.primaer::before,
  .sp-feldzeile::before,
  .step-pill.active::before,
  .marke-glanz::after { display: none; }
  input:focus, select:focus {
    animation: none;
    box-shadow: 0 0 0 3px var(--a-ring), 0 0 16px -2px hsl(226 100% 66% / 0.5);
  }
  .sp-feldzeile:focus-within {
    animation: none;
    box-shadow: 0 2px 0 0 var(--a-basis), 0 6px 20px -8px hsl(226 100% 62% / 0.6);
  }
  .sp-feldzeile input:focus { box-shadow: inset 0 1px 0 0 hsl(226 100% 80% / 0.07); }
  .sp-strich-fuell::after { animation: none; opacity: 0.25; }
}

@media print {
  .sp-weiter::before,
  .btn-nav:not(.btn-prev)::before,
  .action-btn.primaer::before,
  .sp-feldzeile::before,
  .step-pill.active::before,
  .marke-glanz::after,
  .sp-strich-fuell::after { display: none; }
  .marke-glanz { filter: none; }
  /* Auf Papier steht das Zeichen fertig da. Ohne diese Zeile könnte ein
     Ausdruck, der während des Aufbaus ausgelöst wird, ein halbes Zeichen
     zeigen. */
  .marke-zeichen > * { animation: none !important; }
}

/* --- 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); }
@media print { .mehr { display: block; } .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.
   =========================================================================== */

.schnell {
  /* body ist ein Flexbehaelter mit align-items: center. Ein Kind darin ist auf
     der Querachse nur so breit wie sein Inhalt — die Spalte sprang deshalb in
     der Breite, sobald unter dem Feld eine Ableitung erschien oder ein Text
     laenger wurde. Eine feste Breite nimmt dem Inhalt diesen Einfluss; die
     Begrenzung auf 100 Prozent haelt sie auf schmalen Fenstern im Rahmen. */
  width: 640px;
  max-width: 100%;
  margin: 0 auto;
  padding: var(--raum-6) var(--raum-6) var(--raum-11);
  min-height: 60vh;
}

/* --- Fortschritt ---------------------------------------------------------
   Fünf Striche, kein Prozentbalken. Ein Balken bei 20 % sagt "du bist noch
   lange nicht fertig"; fünf Striche sagen "es sind fünf". */
.sp-fortschritt {
  display: flex;
  gap: var(--raum-2);
  margin-bottom: var(--raum-9);
  height: 3px;
}
.sp-fortschritt[hidden] { display: none; }
.sp-strich {
  flex: 1;
  background: var(--l-mittel);
  border-radius: 2px;
  /* Die Fuellung liegt darin und wird beschnitten, damit die abgerundeten
     Enden auch waehrend der Bewegung stimmen. */
  overflow: hidden;
  position: relative;
}
.sp-strich-fuell {
  position: absolute;
  inset: 0;
  background: var(--a-basis);
  transform: scaleX(0);
  transform-origin: left center;
  /* Die Feder setzt scaleX aus JavaScript. Der Uebergang hier greift nur,
     wenn JavaScript den Wert einmal ohne Feder setzt. */
  will-change: transform;
}

/* --- 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. */
.sp-einfuegen {
  margin-top: var(--raum-9);
  border-top: 1px solid var(--l-mittel);
  padding-top: var(--raum-6);
}
.sp-einfuegen > summary {
  display: flex;
  align-items: center;
  gap: var(--raum-4);
  /* 44 Pixel Höhe: Ein Tippziel muss auf dem Telefon mit dem Daumen zu
     treffen sein, und aus Schriftgröße und Innenabstand allein kämen nur
     rund 30 zusammen. */
  min-height: 44px;
  font-size: var(--g-14);
  color: var(--a-basis);
  cursor: pointer;
}
.sp-einfuegen > summary svg {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.sp-einfuegen > summary:focus-visible {
  outline: 2px solid var(--a-basis);
  outline-offset: 2px;
  border-radius: var(--r-bedien);
}
.sp-einfuegen-inhalt { padding-top: var(--raum-3); }
.sp-einfuegen-inhalt .sp-hilfe { margin: 0 0 var(--raum-4); }

#q-inserat {
  width: 100%;
  box-sizing: border-box;
  margin-top: var(--raum-3);
  padding: var(--raum-5);
  background: var(--f-tief);
  color: var(--t-stark);
  border: 1px solid var(--l-stark);
  border-radius: var(--r-bedien);
  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. */
.sp-feldzeile.aus-inserat { border-bottom-color: var(--s-gut); }
.sp-feldzeile.aus-inserat-unsicher { border-bottom-color: var(--s-halb); }

/* --- Bühne und Frage ----------------------------------------------------- */
.sp-buehne { position: relative; }
.sp-frage { display: none; }
.sp-frage.aktiv { display: block; }
.sp-frage.faehrt-raus {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  pointer-events: none;
}

.sp-nummer {
  font-family: var(--schrift-zahl);
  font-size: var(--g-11);
  letter-spacing: 0.08em;
  color: var(--t-leise);
  text-transform: uppercase;
  margin-bottom: var(--raum-4);
}
.sp-frage h2 {
  font-size: clamp(28px, 5vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.022em;
  font-weight: 600;
  color: var(--t-stark);
  margin: 0 0 var(--raum-4);
  /* Kurze Überschriften brechen sonst mit einem einzelnen Wort in der letzten
     Zeile. balance ist ein Vorschlag an den Browser, keine feste Vorgabe. */
  text-wrap: balance;
}
.sp-frage > p.sp-hilfe {
  font-size: var(--g-15);
  line-height: 1.55;
  color: var(--t-normal);
  margin: 0 0 var(--raum-8);
  max-width: 46ch;
}

/* --- Das Feld selbst -----------------------------------------------------
   Ein Feld je Bild, und es ist groß genug, dass man es nicht suchen muss. 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. */
.sp-feldzeile {
  display: flex;
  align-items: baseline;
  gap: var(--raum-4);
  border-bottom: 2px solid var(--l-stark);
  padding-bottom: var(--raum-4);
  transition: border-color var(--zeit-schnell) var(--kurve);
}
/* Die Kante ist zugleich der Fokusnachweis. Ein zusätzlicher Schatten macht
   ihn auch dann sichtbar, wenn die Kante selbst durch Kontrasteinstellungen
   des Systems anders gezeichnet wird. */
.sp-feldzeile:focus-within {
  border-bottom-color: var(--a-basis);
  box-shadow: 0 2px 0 0 var(--a-basis);
}
.sp-feldzeile input {
  flex: 1;
  min-width: 0;
  field-sizing: content;
  border: none;
  background: none;
  padding: 0;
  font-family: var(--schrift-zahl);
  font-variant-numeric: tabular-nums slashed-zero;
  font-size: clamp(26px, 4.4vw, 34px);
  font-weight: 500;
  color: var(--t-stark);
  letter-spacing: -0.01em;
  text-align: right;
}
.sp-feldzeile input::placeholder { color: var(--l-stark); font-weight: 400; }
.sp-feldzeile input:focus { outline: none; }
@supports (field-sizing: content) {
  /* Mit field-sizing folgt die Einheit dem Wert. Ohne die Mindestbreite wäre
     das leere Feld nur so breit wie sein Platzhalter und kaum zu treffen. */
  .sp-feldzeile input { flex: 0 1 auto; min-width: 4ch; text-align: left; }
  .sp-feldzeile { justify-content: flex-start; }
}
#q-plz { text-align: left; }

/* --- 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); }
.sp-einheit {
  font-family: var(--schrift-zahl);
  font-size: clamp(20px, 3vw, 26px);
  color: var(--t-leise);
  flex: none;
}

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

/* --- Knöpfe --------------------------------------------------------------- */
.sp-knopfzeile {
  display: flex;
  align-items: center;
  gap: var(--raum-5);
  margin-top: var(--raum-9);
}
.sp-weiter {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-4);
  padding: var(--raum-6) var(--raum-8);
  background: var(--a-basis);
  color: var(--auf-a);
  border: none;
  border-radius: var(--r-bedien);
  font-family: var(--schrift-text);
  font-size: var(--g-15);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--zeit-schnell) var(--kurve), transform var(--zeit-schnell) var(--kurve);
}
.sp-weiter:hover { background: var(--a-hoch); }
.sp-weiter:active { transform: translateY(1px); }
.sp-weiter svg { width: 18px; height: 18px; }
.sp-weiter[disabled] { background: var(--l-mittel); color: var(--t-leise); cursor: not-allowed; }
.sp-weiter[disabled]:active { transform: none; }

.sp-zurueck, .sp-ueberspringen {
  background: none;
  border: none;
  /* Ebenfalls 44 px: "Zurück" ist der einzige Weg, eine Fehleingabe zu
     korrigieren. Die Fläche wächst nach oben und unten, der Text bleibt, wo
     er steht. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--raum-4) 0;
  font-family: var(--schrift-text);
  font-size: var(--g-13);
  color: var(--t-leise);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--l-mittel);
}
.sp-zurueck:hover, .sp-ueberspringen:hover { color: var(--t-stark); }

/* --- Startbild ------------------------------------------------------------ */
.sp-start { padding-top: var(--raum-8); }
.sp-start h2 { font-size: clamp(32px, 6vw, 48px); }
.sp-start .sp-hilfe { font-size: var(--g-17); max-width: 40ch; }
.sp-merkmale {
  list-style: none;
  padding: 0;
  margin: var(--raum-8) 0 0;
  display: grid;
  gap: var(--raum-5);
}
.sp-merkmale li {
  display: flex;
  align-items: flex-start;
  gap: var(--raum-4);
  font-size: var(--g-14);
  color: var(--t-normal);
}
.sp-merkmale svg { width: 18px; height: 18px; flex: none; color: var(--a-basis); margin-top: 1px; }

/* --- Ergebnisbild --------------------------------------------------------
   Die Antwort steht als Satz, nicht als Tabelle. Drei Zahlen darunter, mehr
   nicht — alles Weitere liegt hinter "Alle Zahlen". */
.sp-ergebnis-kopf {
  display: flex;
  align-items: center;
  gap: var(--raum-5);
  margin-bottom: var(--raum-6);
}
.sp-ampel {
  width: 14px; height: 14px;
  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-size: var(--g-11);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t-leise);
  font-family: var(--schrift-zahl);
}
#sp-urteil {
  font-size: clamp(26px, 4.6vw, 36px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--t-stark);
  margin: 0 0 var(--raum-5);
  text-wrap: balance;
}
#sp-satz {
  font-size: var(--g-15);
  line-height: 1.6;
  color: var(--t-normal);
  margin: 0 0 var(--raum-9);
  max-width: 48ch;
}
.sp-zahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border: 1px solid var(--l-zart);
  border-radius: var(--r-karte);
  overflow: hidden;
}
.sp-zahl {
  padding: var(--raum-6);
  border-right: 1px solid var(--l-zart);
  background: var(--f-karte);
}
.sp-zahl:last-child { border-right: none; }
.sp-zahl dt {
  font-size: var(--g-11);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--t-leise);
  margin-bottom: var(--raum-4);
}
.sp-zahl dd {
  margin: 0;
  font-family: var(--schrift-zahl);
  font-variant-numeric: tabular-nums slashed-zero;
  font-size: var(--g-24);
  font-weight: 500;
  color: var(--t-stark);
  letter-spacing: -0.01em;
}
.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); color: var(--t-leise); }

.sp-ergebnis-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-5);
  margin-top: var(--raum-9);
}
.sp-zweitknopf {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-4);
  padding: var(--raum-6) var(--raum-7);
  background: var(--f-karte);
  color: var(--t-stark);
  border: 1px solid var(--l-mittel);
  border-radius: var(--r-bedien);
  font-family: var(--schrift-text);
  font-size: var(--g-14);
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--zeit-schnell) var(--kurve);
}
.sp-zweitknopf:hover { border-color: var(--l-stark); }
.sp-zweitknopf svg { width: 16px; height: 16px; color: var(--t-leise); }

.sp-druckhinweis {
  margin: var(--raum-6) 0 0;
  font-size: var(--g-13);
  line-height: 1.55;
  color: var(--t-leise);
  max-width: 52ch;
}
/* 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; }
/* Das Feld mit der fehlenden Angabe wird auch optisch angezeigt. Der Rahmen
   ist der zweite Träger der Aussage neben dem Satz darunter. */
.sp-feldzeile:has(input[aria-invalid="true"]) {
  box-shadow: 0 2px 0 0 var(--s-schlecht);
}

/* Die Überschrift nimmt den Fokus nur an, um angesagt zu werden. Ein Umriss
   sähe aus, als wäre sie anklickbar. */
.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) {
  .schnell { padding: var(--raum-5) var(--raum-5) var(--raum-10); }
  .sp-knopfzeile { flex-wrap: wrap; }
  .sp-weiter { width: 100%; justify-content: center; }
}

/* =========================================================================
   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;
}
/* 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: auto; margin: 0; padding: 0; background: none; box-shadow: none;
  }
}

@media print {
  .pdf-modus #pdf-dokument {
    position: static; left: auto; width: auto; visibility: visible;
  }

  /* 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. */
  .pdf-modus body > *:not(#pdf-dokument) { display: none !important; }
}

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

.pdf-seite {
  height: 255mm;
  display: flex;
  flex-direction: column;
  break-after: page;
  page-break-after: always;
  font-family: 'Fira Sans', system-ui, sans-serif;
  font-size: 9.5pt;
  line-height: 1.42;
  color: var(--t-normal);
}
.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: var(--raum-6);
  font-size: 8pt;
  color: var(--t-leise);
  flex: none;
}
.pdf-kopf {
  padding-bottom: 2.5mm;
  margin-bottom: 5mm;
  border-bottom: 0.6pt solid var(--l-mittel);
}
/* Dieselbe Vorsorge wie in der Fusszeile, und sie ist hier zuerst aufgelaufen:
   Mit einer langen Objektbezeichnung brach die Kopfzeile auf jedem Blatt in
   zwei Zeilen um und nahm der Inhaltsflaeche rund 14 px — auf jeder Seite des
   Dokuments, ohne dass es beim Messen auffiel, weil dabei eine kurze
   Bezeichnung eingetragen war. Der Titel rechts steht fest und wird nicht
   gekuerzt; er sagt, was das Blatt ist. */
.pdf-kopf-objekt {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pdf-kopf-titel { flex: none; white-space: nowrap; }
.pdf-fuss {
  padding-top: 2.5mm;
  margin-top: 5mm;
  border-top: 0.6pt solid var(--l-mittel);
}
/* Die Objektbezeichnung ist eine freie Eingabe und kann beliebig lang sein.
   Bricht sie um, waechst die Fusszeile um eine Zeile — und damit laeuft jede
   Seite des Dokuments ueber, ohne dass es beim Bauen auffaellt, weil beim
   Messen eine kurze Bezeichnung eingetragen war. 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. Er steht unter der Fusszeile und nicht in
   ihr — die Fusszeile hat zwei Enden, ein dritter Eintrag darin saesse in der
   Mitte. Kleiner als der Fliesstext, aber nicht kleiner als die Fusszeile. */
.pdf-fuss-vorbehalt {
  flex: none;
  margin-top: 1.5mm;
  font-size: 8pt;
  line-height: 1.3;
  color: var(--t-leise);
}

/* ROADMAP R-11. Der Kasten auf dem Deckblatt, 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", und
   ein Satz in derselben Groesse wie der Rest des Kleingedruckten ist das
   nicht. Farbe traegt er nicht: Auf dem Papier waere sie nur ein weiterer
   Grauton, und im Exposé ist Farbe fuer Ampeln reserviert. */
.pdf-deckblatt-eigen {
  margin-top: auto;
  padding: 3mm 4mm;
  border: 0.8pt solid var(--l-stark);
  font-size: 9.5pt;
  line-height: 1.35;
}
.pdf-deckblatt-eigen + .pdf-deckblatt-hinweis { margin-top: 3mm; }

/* --- Deckblatt --- */
.pdf-seite-deckblatt .pdf-inhaltsflaeche { display: flex; flex-direction: column; }
.pdf-deckblatt { display: flex; flex-direction: column; height: 100%; }
.pdf-deckblatt-kopf { margin-bottom: 14mm; }
.pdf-marke {
  font-variant-caps: small-caps;
  letter-spacing: 0.012em;
  font-size: 13pt;
  font-weight: 600;
  color: var(--a-basis);
  margin: 0 0 22mm;
}
.pdf-deckblatt h1 {
  font-size: 21pt;
  line-height: 1.18;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--t-stark);
  margin: 0 0 var(--raum-4);
}
.pdf-untertitel { font-size: 11pt; color: var(--t-leise); margin: 0; }
.pdf-inhalt-titel {
  font-size: 10pt; font-weight: 600; color: var(--t-stark);
  margin: 12mm 0 var(--raum-5); text-transform: uppercase; letter-spacing: 0.06em;
}
.pdf-inhalt { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 10mm; }
.pdf-inhalt li {
  display: flex; gap: var(--raum-4); padding: 1.1mm 0;
  break-inside: avoid; font-size: 9pt;
}
.pdf-inhalt-nr {
  color: var(--t-leise); font-family: 'Fira Code', monospace;
  min-width: 4.5mm; text-align: right;
}
.pdf-deckblatt-hinweis {
  margin: auto 0 0; padding-top: var(--raum-6);
  border-top: 0.6pt solid var(--l-zart);
  font-size: 8pt; color: var(--t-leise); max-width: 150mm;
}

/* --- Abschnitte --- */
.pdf-abschnitt h2 {
  display: flex; gap: var(--raum-5); align-items: baseline;
  font-size: 13pt; font-weight: 600; color: var(--t-stark);
  margin: 0 0 var(--raum-4); letter-spacing: -0.005em;
}
.pdf-nummer {
  font-family: 'Fira Code', monospace; font-size: 10pt;
  color: var(--a-basis); font-weight: 600;
}
.pdf-abschnitt h3 {
  font-size: 9.5pt; font-weight: 600; color: var(--t-stark);
  margin: var(--raum-6) 0 var(--raum-3);
}
.pdf-vorspann {
  margin: 0 0 var(--raum-6); color: var(--t-leise);
  font-size: 8.5pt; max-width: 155mm;
}

/* --- Tabellen ---
   Betraege in Fira Code 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 var(--raum-6);
}
.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-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: 8pt; 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-family: 'Fira Code', monospace;
  font-variant-numeric: tabular-nums slashed-zero;
  font-size: 8.5pt;
}
.pdf-werte tfoot th, .pdf-werte tfoot td {
  border-top: 0.8pt solid var(--l-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); }
.pdf-mitte { text-align: center !important; }
.pdf-links { text-align: left !important; font-family: 'Fira Sans', sans-serif !important; }
.pdf-fussnote { color: var(--t-leise); font-size: 8pt; }
.pdf-summenzeile { font-size: 8.5pt; color: var(--t-normal); margin: 0; }

/* Das Begriffsverzeichnis. Zwei Spalten, links das Wort, rechts der eine Satz —
   dieselbe Bauform wie jede Wertetabelle, nur dass rechts kein Betrag steht.
   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;
  /* Ein Begriff ist ein Wort und keine Zahl. Ohne diese Angabe erbt die
     Kopfzelle die Zifferschrift der Wertetabellen, und das Verzeichnis liest
     sich wie eine Preisliste. */
  font-family: 'Fira Sans', system-ui, sans-serif;
  hyphens: auto;
}
.pdf-begriffe td { line-height: 1.38; }

/* 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 und in der Textschrift — Fira Code und
   rechter Rand gehoeren den Zahlen. */
.pdf-risiken th, .pdf-risiken td,
.pdf-risiken thead th { text-align: left; font-family: 'Fira Sans', sans-serif; }
.pdf-risiken th[scope="row"] { width: 42mm; font-weight: 600; }
.pdf-risiken td:first-child { width: 20mm; color: var(--t-leise); }

/* --- Urteile, Merker, Disclaimer --- */
/* Fliessender Text und kein Flex-Layout: Als Flexzeile bekam die Einstufung
   eine eigene schmale Spalte und brach dort nach jedem zweiten Wort um. Punkt,
   Einstufung und Satz gehoeren in eine Zeile, die einfach weiterlaeuft. */
.pdf-urteil {
  margin: 0 0 var(--raum-6); padding: var(--raum-5);
  border: 0.6pt solid var(--l-mittel); border-radius: var(--r-karte);
  font-size: 9.5pt;
}
.pdf-urteil-gross { font-size: 11pt; line-height: 1.45; }
.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 var(--raum-6); padding: var(--raum-4) var(--raum-5);
  border-left: 1.2pt solid var(--l-stark);
  font-size: 8.5pt; color: var(--t-normal); background: none;
}
.pdf-disclaimer {
  margin-top: var(--raum-7); padding-top: var(--raum-5);
  border-top: 0.8pt solid var(--l-stark);
  font-size: 8pt; color: var(--t-normal);
}
.pdf-disclaimer p { margin: 0 0 var(--raum-3); 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 unter einer Annahmen-Gruppe. Sie steht kleiner und leiser
   als die Werte darueber, muss aber lesbar bleiben: Sie ist der Grund, warum
   eine Bank der Zahl daneben glauben kann. */
.pdf-quelle {
  margin: calc(-1 * var(--raum-4)) 0 var(--raum-6);
  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: 1px;
  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-dialog 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: 2px;
}

/* ===========================================================================
   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: 6px;
  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);
}