/* Controlling – Basis-Stilsystem nach dem Rosomow-Raster.

   Alles hier stammt aus dem Zeichen: zwei Farben (Ziegel und Kalk), eine
   Strichstärke, rechte Winkel, ein einziger Winkel von 45 Grad. Daraus die
   drei Regeln, die den Rest erklären:

   1. Es wird gezeichnet, nicht gemalt. Gliederung entsteht durch Linien,
      nicht durch Flächen oder Schatten – deshalb --shadow: none.
   2. Kein Radius. Nirgends. Das Zeichen hat auch keinen.
   3. Ziegelrot bedeutet etwas. Es ist Marke und Fehlerfarbe zugleich und
      darf deshalb nirgends beiläufig auftauchen.

   Farben liegen als Tokens auf :root. Der dunkle Satz wird zweimal definiert:
   einmal für die Systemeinstellung, einmal für die manuelle Umschaltung. */

@import url("/static/css/fonts.css");

:root {
  /* Marke – unverändert aus dem Zeichen */
  --ziegel: #9b2335;
  --ziegel-tief: #751826;
  --ziegel-licht: #d4707e;
  --kalk: #d9d9c8;

  /* Grund und Schrift. Der helle Grund ist ein aufgehellter Kalk, kein Weiß:
     neben Ziegelrot wirkt reines Weiß kalt und lässt die Fläche kippen. */
  --bg: #e8e7db;
  --surface: #f1f0e7;
  --surface-2: #dedcce;
  --border: #c6c4b3;
  --border-strong: #a9a695;
  --text: #241c1a;
  --text-muted: #5c534e;
  --text-faint: #776c66;

  --accent: var(--ziegel);
  --accent-soft: #f0dde0;
  --accent-on: var(--kalk);
  --positive: #1f6b4e;
  --positive-soft: #dbe9e2;
  --negative: var(--ziegel);
  --negative-soft: #f0dde0;
  --warning: #8a5a00;
  --warning-soft: #f0e4cd;

  /* Saldolinien in Diagrammen: Nettovermögen, Übrig, Nettosteuer.
     Eigenes Token, weil --accent und --negative denselben Wert tragen --
     mit --accent gezeichnet war die Nettolinie von den Verbindlichkeiten
     nicht zu unterscheiden, sie hatten exakt dieselbe Farbe. Blau aus dem
     Serienraster: dort ist geprüft, dass es sich auch unter Rot-Grün-
     Blindheit von Grün und Rot trennt. Und Ziegelrot bleibt frei für das,
     was es bedeutet -- Marke oder Fehler. */
  --saldo: #0082b0;

  /* Die Signaturfläche des Zeichens – in beiden Darstellungen dieselbe. */
  --signal-bg: #9b2335;
  --signal-on: #d9d9c8;

  --radius: 0;
  --radius-sm: 0;
  --shadow: none;
  --shadow-lg: none;
  --strich: 2px;
  --strich-fein: 1px;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px;

  /* Archivo trägt die Oberfläche, Newsreader den Lesetext, Plex Mono alles
     Gemessene. Ein Dashboard wird überflogen, nicht gelesen – deshalb ist
     Archivo die Grundschrift und Newsreader steht dort, wo wirklich erklärt
     wird. */
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Newsreader", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  --header-height: 56px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1a1214;
    --surface: #241a1c;
    --surface-2: #130d0f;
    --border: #3a2e2c;
    --border-strong: #55433f;
    --text: #d9d9c8;
    --text-muted: #a8a697;
    --text-faint: #8b8a7c;

    /* Das volle Ziegelrot erreicht auf dunklem Grund nur 2,4:1 und fällt
       durch. Auf Dunkel gilt deshalb ausschließlich die helle Variante. */
    --accent: var(--ziegel-licht);
    --accent-soft: #33191e;
    --accent-on: #1a1214;
    --positive: #6fc49f;
    --positive-soft: #14332a;
    --negative: var(--ziegel-licht);
    --negative-soft: #33191e;
    --warning: #e0b155;
    --warning-soft: #362a12;
    --saldo: #1998cb;
  }
}

:root[data-theme="dark"] {
  --bg: #1a1214;
  --surface: #241a1c;
  --surface-2: #130d0f;
  --border: #3a2e2c;
  --border-strong: #55433f;
  --text: #d9d9c8;
  --text-muted: #a8a697;
  --text-faint: #8b8a7c;

  --accent: var(--ziegel-licht);
  --accent-soft: #33191e;
  --accent-on: #1a1214;
  --positive: #6fc49f;
  --positive-soft: #14332a;
  --negative: var(--ziegel-licht);
  --negative-soft: #33191e;
  --warning: #e0b155;
  --warning-soft: #362a12;
  --saldo: #1998cb;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--space-3);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -.015em;
  text-wrap: balance;
}
h1 { font-size: 25px; font-weight: 700; letter-spacing: -.025em; }
h2 { font-size: 19px; }
h3 { font-size: 16px; }

/* Erklärender Text bekommt die Serifenschrift – sie hält die Oberfläche
   davon ab, mit Ziegelrot und rechten Winkeln amtlich zu wirken. */
p, .prosa, .empty p, .auth-card .sub {
  font-family: var(--font-text);
  font-weight: 400;
}
/* Kurze Beischriften bleiben in der Grundschrift: eine Serifenschrift
   braucht Zeilen, um zu wirken, und wird in 13 px nur unscharf. */
.field-hint, .faint, .stat-delta, table.data p, .badge { font-family: var(--font); }
p { margin: 0 0 var(--space-3); }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

:focus-visible {
  outline: var(--strich) solid var(--accent);
  outline-offset: 2px;
}

/* Zahlen immer gleich breit – sonst springen Beträge in Tabellen. */
.num, td.num, .amount, .stat-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.positive { color: var(--positive); }
.negative { color: var(--negative); }
.neutral  { color: var(--text-muted); }
.muted    { color: var(--text-muted); }
.faint    { color: var(--text-faint); font-size: 13px; }

/* ---------- Gerüst ---------- */

.app-header {
  position: sticky; top: 0; z-index: 20;
  height: var(--header-height);
  display: flex; align-items: center; gap: var(--space-5);
  padding: 0 var(--space-5);
  background: var(--surface);
  border-bottom: var(--strich) solid var(--border-strong);
}
.app-header .brand {
  display: flex; align-items: center; gap: var(--space-3);
  font-weight: 700; font-size: 16px; color: var(--text);
  letter-spacing: -.02em; white-space: nowrap;
}
/* Das Zeichen in der Kopfzeile trägt seine eigene Fläche mit – die
   Signaturkombination bleibt so auch im hellen Modus erhalten. */
.brand-mark {
  width: 30px; height: 30px; flex: none;
  background: var(--signal-bg);
  color: var(--signal-on);
  display: grid; place-items: center;
  padding: 4px;
}
.brand-mark svg { width: 100%; height: 100%; display: block; }

/* Kein overflow-x hier: Die Gruppen klappen nach unten auf, und ein
   scrollender Streifen schnitte ihr Menü an der eigenen Kante ab. Getragen
   wird das von der Zahl der Punkte -- sieben statt elf passen auch schmal. */
.app-nav { display: flex; gap: var(--space-1); flex: 1; min-width: 0; }
.app-nav > a,
.navgruppe > summary {
  padding: var(--space-2) var(--space-3);
  color: var(--text-muted); font-weight: 500; white-space: nowrap;
  border-bottom: var(--strich) solid transparent;
}
.app-nav > a:hover { color: var(--text); text-decoration: none; border-bottom-color: var(--border-strong); }
.app-nav > a.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- Navigationsgruppen ---------- */

/* Gebaut wie das Benutzermenü rechts daneben -- dieselbe Technik, dieselbe
   Form. Zwei Menüarten in einer Kopfzeile wären eine Unterscheidung ohne
   Unterschied. */
.navgruppe { position: relative; flex: none; }
.navgruppe > summary {
  display: inline-flex; align-items: center; gap: var(--space-2);
  cursor: pointer; list-style: none;
}
.navgruppe > summary::-webkit-details-marker { display: none; }
.navgruppe > summary::marker { content: ""; }
.navgruppe > summary:hover { color: var(--text); border-bottom-color: var(--border-strong); }
/* Der Punkt, unter dem die offene Seite liegt. Er trägt dieselbe Markierung
   wie ein einzelner Verweis: Wer den Ort sucht, an dem er ist, soll nicht
   erst aufklappen müssen. */
.navgruppe.hier > summary { color: var(--accent); border-bottom-color: var(--accent); }
.navgruppe .pfeil { transition: transform .12s ease; opacity: .7; }
.navgruppe[open] .pfeil { transform: rotate(180deg); }

.navmenue {
  position: absolute; left: 0; top: calc(100% + var(--space-1));
  z-index: 60; min-width: 15rem;
  display: grid;
  padding: var(--space-2);
  background: var(--surface);
  border: var(--strich) solid var(--border-strong);
}
.navmenue > a {
  display: grid; gap: 1px;
  padding: var(--space-2) var(--space-3);
  color: var(--text); font-weight: 500;
  border-bottom: 0;
}
.navmenue > a:hover { background: var(--surface-2); text-decoration: none; }
/* Wo das Auswerten aufhört und das Pflegen anfängt. Ein Strich, kein
   Zwischentitel: Eine Überschrift über drei Verweisen wäre mehr Text als
   Inhalt. */
.navmenue > a.abschnitt {
  margin-top: var(--space-2);
  border-top: var(--strich-fein) solid var(--border);
  padding-top: var(--space-3);
}
.navmenue > a.active { color: var(--accent); }
.navmenue > a .faint { font-weight: 400; }

.app-main { max-width: 1240px; margin: 0 auto; padding: var(--space-5); }
.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-4); margin-bottom: var(--space-5); flex-wrap: wrap;
}

/* ---------- Benutzerbereich ---------- */

/* Aufbau und Verhalten wie in nlabSSH: eigenes Zeichen rechts im Kopf, das
   Menü darunter, gebaut aus <details> statt aus einem Skript.
   Die Gestaltung ist hiesig -- dort tragen Zeichen und Menü Radien und einen
   Schatten, hier gilt das Rosomow-Raster: keine Rundung, keine Schatten. Die
   Trennung ist Absicht. Gleich soll sein, wo etwas steht und wie es sich
   bedienen lässt, nicht wie stark die Ecken gebrochen sind. */
.benutzer { position: relative; flex: none; }
.benutzer > summary {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 3px var(--space-2) 3px 3px;
  border: var(--strich) solid transparent;
  cursor: pointer; list-style: none;
  color: var(--text-muted);
}
/* Das Dreieck des Browsers weg – wir zeichnen unseres selbst. */
.benutzer > summary::-webkit-details-marker { display: none; }
.benutzer > summary::marker { content: ""; }
.benutzer > summary:hover { border-color: var(--border-strong); color: var(--text); }
.benutzer[open] > summary { border-color: var(--border-strong); background: var(--surface-2); }
.benutzer .pfeil { transition: transform .12s ease; }
.benutzer[open] .pfeil { transform: rotate(180deg); }

/* Initialen statt Bild, in der Signaturkombination des Zeichens – quadratisch,
   wie die Marke selbst. Ein Kreis wäre hier das einzige runde Element der
   ganzen Oberfläche. */
.benutzer .avatar {
  width: 28px; height: 28px; flex: none;
  display: grid; place-items: center;
  background: var(--signal-bg); color: var(--signal-on);
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
}

.benutzermenue {
  position: absolute; right: 0; top: calc(100% + var(--space-2));
  z-index: 60; min-width: 16rem;
  display: grid;
  padding: var(--space-2);
  background: var(--surface);
  border: var(--strich) solid var(--border-strong);
}
.benutzerkopf {
  display: grid; gap: 2px;
  padding: var(--space-2) var(--space-3) var(--space-3);
  border-bottom: var(--strich) solid var(--border);
  margin-bottom: var(--space-2);
}
.benutzerkopf .rollenreihe {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-top: var(--space-2);
}
.benutzermenue > a,
.benutzermenue button {
  display: block; width: 100%; text-align: left;
  padding: var(--space-2) var(--space-3);
  border: 0; background: transparent;
  color: var(--text); font: inherit; cursor: pointer;
}
.benutzermenue > a:hover,
.benutzermenue button:hover { background: var(--surface-2); text-decoration: none; }
.benutzermenue form {
  margin: var(--space-2) 0 0;
  border-top: var(--strich) solid var(--border);
  padding-top: var(--space-2);
}

/* Merkmale des Kontos. Ziegelrot fehlt hier absichtlich: Es bedeutet Marke
   oder Fehler, und ein Konto ist keins von beidem. */
.rolle {
  border: var(--strich-fein) solid currentColor;
  padding: 1px var(--space-2);
  font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); white-space: nowrap;
}
.rolle-gut { color: var(--positive); }
.rolle-mangel { color: var(--warning); }
a.rolle-mangel:hover { background: var(--warning-soft); text-decoration: none; }

/* ---------- Abschnitte einer langen Seite ---------- */

/* Eine Seite mit acht gleichrangigen Karten ist eine Liste, keine
   Gliederung: Man liest sie von oben nach unten durch, statt zu dem Teil zu
   springen, der gerade zaehlt. Die Marke trennt, ohne eine eigene Ebene
   aufzumachen -- ein Strich und ein Wort. */
.abschnitt {
  display: flex; align-items: baseline; gap: var(--space-3);
  margin: var(--space-6) 0 var(--space-4);
  border-top: var(--strich) solid var(--border-strong);
  padding-top: var(--space-3);
}
.abschnitt h2 {
  margin: 0; font-size: 15px; letter-spacing: .08em;
  text-transform: uppercase;
}
.abschnitt .faint { margin-left: auto; text-align: right; }
.abschnitt:first-of-type { margin-top: 0; border-top: 0; padding-top: 0; }

/* ---------- Karten und Kacheln ---------- */

.card {
  background: var(--surface);
  border: var(--strich) solid var(--border);
}
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--strich) solid var(--border);
}
.card-head h2, .card-head h3 { margin: 0; }

/* Blätterer im Kartenkopf: Zeitraum links, Knöpfe rechts. Ein Knopf, der
   nicht weiterführt, bleibt stehen statt zu verschwinden -- sonst rutscht
   die ganze Reihe beim Blättern hin und her. */
.blaetterer {
  display: flex; align-items: center; gap: var(--space-3);
  flex-wrap: wrap; justify-content: flex-end;
}
.blaetterer [aria-disabled="true"] {
  opacity: .35;
  cursor: default;
}
.card-body { padding: var(--space-5); }
.card-body.tight { padding: 0; }

.grid { display: grid; gap: var(--space-4); }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.stat {
  background: var(--surface);
  border: var(--strich) solid var(--border);
  padding: var(--space-4) var(--space-5);
}
.stat-label {
  font-size: 12px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-muted);
  margin-bottom: var(--space-2);
}
.stat-value { font-size: 26px; font-weight: 500; letter-spacing: -.02em; line-height: 1.15; }
.stat-delta { font-size: 13px; margin-top: var(--space-1); }

/* Kacheln, die auf eine Detailseite führen. Der Verweis soll sichtbar sein,
   ohne dass die Kachel wie ein Knopf aussieht -- deshalb nur die Kante. */
a.stat-link { display: block; color: inherit; text-decoration: none; }
a.stat-link:hover {
  border-color: var(--accent);
  text-decoration: none;
}
a.stat-link:hover .stat-label { color: var(--accent); }

/* ---------- Tabellen ---------- */

.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th {
  text-align: left; font-size: 12px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--strich) solid var(--border-strong);
  white-space: nowrap; background: var(--surface);
  position: sticky; top: 0;
}
table.data td {
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--strich-fein) solid var(--border);
  vertical-align: top;
}
table.data tr:last-child td { border-bottom: none; }
table.data tbody tr:hover { background: var(--surface-2); }
table.data td.num, table.data th.num { text-align: right; }
table.data td.shrink { width: 1%; white-space: nowrap; }

/* Abteilungen in einer gegliederten Tabelle.
   Die Summe stand vorher in der Überschriftszeile -- oben rechts, mit den
   Posten darunter. Man musste raten, ob sie das zusammenfasst, was folgt,
   oder das, was darüber steht. Jetzt schließt sie ihre Abteilung ab, trägt
   deren Namen und steht auf einer Linie: Sie kann nur zu dem gehören, was
   unmittelbar davor kommt. */
table.data tbody.abteilung + tbody.abteilung .abteilung-kopf th {
  padding-top: var(--space-6);
}
.abteilung-kopf th {
  position: static;             /* nur die Tabellenköpfe kleben oben */
  border-bottom: var(--strich-fein) solid var(--border);
  background: transparent;
}
.abteilung-kopf .faint {
  text-transform: none; letter-spacing: 0; font-weight: 400;
  margin-left: var(--space-2);
}
.abteilung-summe td {
  border-top: var(--strich) solid var(--border-strong);
  border-bottom: none;
  font-weight: 600;
}
table.data tbody.abteilung tr.abteilung-summe:hover,
table.data tbody.abteilung tr.abteilung-kopf:hover { background: transparent; }

/* ---------- Formulare ---------- */

label {
  display: block; font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}
input[type="text"], input[type="password"], input[type="number"], input[type="date"],
input[type="email"], select, textarea {
  width: 100%;
  padding: 10px var(--space-3);
  font: inherit; font-size: 14px;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  border: var(--strich) solid var(--border-strong);
}
input:focus, select:focus, textarea:focus {
  outline: var(--strich) solid var(--accent);
  outline-offset: -2px;
  border-color: var(--accent);
}
input[type="number"], input.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums; text-align: right;
}
.field { margin-bottom: var(--space-4); }
.field-hint { font-size: 13px; color: var(--text-muted); margin-top: var(--space-2); }
.field-row { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.field-row > .field { flex: 1 1 180px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 9px var(--space-4);
  font: inherit; font-family: var(--font); font-size: 14px; font-weight: 600;
  letter-spacing: .01em;
  color: var(--text); background: transparent;
  border: var(--strich) solid var(--border-strong);
  cursor: pointer;
  transition: background 120ms linear, color 120ms linear, border-color 120ms linear;
}
.btn:hover { background: var(--surface-2); text-decoration: none; }

/* Ein gefüllter Knopf je Ansicht – der, den man wirklich drücken soll. */
.btn-primary {
  background: var(--accent); border-color: var(--accent); color: var(--accent-on);
}
.btn-primary:hover {
  background: var(--ziegel-tief); border-color: var(--ziegel-tief); color: var(--kalk);
}
:root[data-theme="dark"] .btn-primary:hover { background: var(--kalk); border-color: var(--kalk); color: var(--ziegel); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-primary:hover {
    background: var(--kalk); border-color: var(--kalk); color: var(--ziegel);
  }
}

.btn-danger { color: var(--negative); border-color: var(--negative); }
.btn-danger:hover { background: var(--negative); color: var(--accent-on); }
.btn-sm { padding: 5px var(--space-3); font-size: 13px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Meldungen ---------- */

.alert {
  padding: var(--space-3) var(--space-4);
  border: var(--strich) solid transparent;
  border-left-width: 6px;
  margin-bottom: var(--space-4);
  font-size: 14px;
  font-family: var(--font-text);
}
.alert-error   { background: var(--negative-soft); border-color: var(--negative); color: var(--text); }
.alert-success { background: var(--positive-soft); border-color: var(--positive); color: var(--text); }
.alert-warning { background: var(--warning-soft);  border-color: var(--warning);  color: var(--text); }
.alert-info    { background: var(--accent-soft);   border-color: var(--accent);   color: var(--text); }

.badge {
  display: inline-block; padding: 2px var(--space-2);
  font-family: var(--font);
  font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  background: transparent; color: var(--text-muted);
  border: var(--strich-fein) solid currentColor;
}
.badge-positive { color: var(--positive); }
.badge-negative { color: var(--negative); }

.empty {
  padding: var(--space-7) var(--space-5);
  text-align: center; color: var(--text-muted);
}
.empty h3 { color: var(--text); }

/* ---------- Anmeldung ---------- */

/* Geteilter Bildschirm: links das Zeichen auf seiner Ziegelfläche, rechts
   das Formular. Das ist die eine Stelle, an der die Signaturkombination
   ganzflächig auftritt – ein Anmeldebildschirm trägt keinen Fließtext. */
.auth-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--bg);
}

.auth-mark {
  background: var(--signal-bg);
  color: var(--signal-on);
  display: grid;
  place-items: center;
  padding: var(--space-6) var(--space-5);
  gap: var(--space-5);
}
.auth-mark .zeichen {
  /* Breite folgt dem Block, aber gedeckelt: Unser Zeichen ist quadratisch,
     volle Blockbreite ergaebe ein 360x360 grosses Quadrat und erschluege
     die Flaeche. Bei einer queren Wortbildmarke waere 100% richtig. */
  width: 100%; max-width: 260px;
  height: auto; display: block; margin: 0 auto;
}
.auth-mark .wortmarke {
  margin: var(--space-5) 0 0;
  font-family: var(--font);
  font-size: 13px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--signal-on);
  text-align: center;
}

/* Zeichen, Wortmarke und Zitat als ein Block. Das Zitat liegt absolut
   darunter und zaehlt fuer die Hoehe nicht mit -- sonst gilt die senkrechte
   Mitte fuer Zeichen plus Zitat, und das Zeichen wandert bei jedem
   Seitenaufruf ein Stueck, je nachdem wie lang das gezogene Zitat ist. */
.auth-mark .signatur-block {
  position: relative;
  width: min(88%, 300px);
}

.spruch {
  position: absolute;
  top: 100%;
  right: 0;
  width: 85%;
  /* blockquote bringt vom Browser margin: 1em 40px mit. Ohne das Zuruecksetzen
     sitzt der Block 40px innerhalb der rechten Kante statt buendig. */
  margin: var(--space-5) 0 0;
  padding: .1rem 0 .1rem var(--space-4);
  border-left: 2px solid color-mix(in srgb, var(--signal-on) 45%, transparent);
  text-align: left;
}
.spruch p {
  margin: 0 0 var(--space-2);
  font-family: var(--font-text);
  font-size: 15px; font-weight: 400;
  line-height: 1.6; letter-spacing: .005em;
  color: var(--signal-on);
  text-wrap: pretty;
}
/* Kein Gedankenstrich vor dem Namen: Der Balken zeichnet den Block bereits
   als Zitat aus, der Strich taete daneben dasselbe ein zweites Mal. */
.spruch cite {
  display: block;
  font-family: var(--font);
  font-size: 12px; font-weight: 500; font-style: normal;
  line-height: 1.6;
  color: var(--signal-on);
}
.spruch cite span { display: block; opacity: .8; }

.auth-panel {
  display: grid;
  place-items: center;
  padding: var(--space-6) var(--space-5);
}

.auth-card {
  width: 100%; max-width: 380px;
  background: transparent;
  border: 0;
  padding: 0;
}
.auth-card .marke-zeile {
  font-size: 12px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}
.auth-card h1 {
  font-size: 34px; font-weight: 800;
  margin-bottom: var(--space-2); letter-spacing: -.035em;
}
.auth-card .sub {
  color: var(--text-muted); margin-bottom: var(--space-6); font-size: 16px;
}
/* Auf der Anmeldeseite gibt es genau eine Sache zu tun - der Knopf darf
   das zeigen. */
.auth-card .btn-block { padding: 12px var(--space-4); font-size: 15px; }

@media (min-width: 860px) {
  .auth-shell { grid-template-columns: minmax(320px, 42%) 1fr; }
  .auth-mark { padding: var(--space-7); }
  .auth-mark .signatur-block { width: min(100%, 360px); }
  /* Die Breite steht am Block, das Zeichen folgt ihr mit 100 %. Andersherum
     bekaeme jede der drei Controlling-Seiten eine andere Blockbreite. */
  .auth-panel { padding: var(--space-7) var(--space-6); justify-items: start; }
  .auth-card { max-width: 400px; }
}

.code-input {
  font-family: var(--font-mono); font-size: 26px; font-weight: 500;
  letter-spacing: .4em; text-align: center; text-indent: .4em;
}
.qr {
  display: block; margin: 0 auto var(--space-4);
  width: 200px; height: 200px; image-rendering: pixelated;
  border: var(--strich) solid var(--border-strong);
}
.secret {
  font-family: var(--font-mono); font-size: 13px;
  background: var(--surface-2); border: var(--strich) solid var(--border);
  padding: var(--space-3);
  word-break: break-all; text-align: center;
}

/* Die Rechnung hinter einer Zahl. Sie soll da sein, wenn man sie sucht --
   und nicht mit der Zahl selbst um Aufmerksamkeit ringen. */
.rechenweg {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  margin-top: var(--space-1);
  letter-spacing: -.01em;
}

/* ---------- Hinweis auf veraltete Stände ---------- */

/* Zurückhaltend: ein veralteter Stand ist kein Fehler, sondern eine Aufgabe
   für später. Erst beim Überfahren tritt er hervor. */
.veraltet-zeichen {
  /* Größe und Farbe stehen als Attribute am Element selbst -- ohne sie wäre
     ein SVG schwarz gefüllt und volle Zellenbreite groß. Hier steht nur, was
     darüber hinausgeht. */
  vertical-align: -2px;
  margin-left: var(--space-2);
  color: var(--text-faint);
  transition: color 120ms linear;
}
tr:hover .veraltet-zeichen,
.stat:hover .veraltet-zeichen,
.veraltet-zeichen:hover { color: var(--warning); }

/* ---------- Diagramme ---------- */

.chart { width: 100%; height: 320px; }
.chart-sm { height: 200px; }
.chart-lg { height: 420px; }

@media (max-width: 640px) {
  .app-main { padding: var(--space-4) var(--space-3); }
  .app-header { padding: 0 var(--space-3); gap: var(--space-3); }
  /* Schmal wird es eng: Der Abstand zwischen den Punkten geht zuerst. */
  .app-nav { gap: 0; }
  .app-nav > a,
  .navgruppe > summary { padding-left: var(--space-2); padding-right: var(--space-2); }
  .stat-value { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}