/* Kern — Oberfläche, geerbt von billbase (gleiche Tokens, gleiches Bild).
   Dunkles Cockpit: feste Leiste links, Karten im Raster, farbige Symbolkacheln,
   ein Flächendiagramm und ein Ring. Alle Werte sind aus der Vorlage gemessen.

   Farbe ist hier Sprache: Indigo = Marke und aktive Stelle, Grün = Zuwachs und
   was dir bleibt, Rot = Rückgang und überfällig, Orange = Kosten, Lila = Gewinn.
   Jede Text-auf-Fläche-Kombination ist auf mindestens 4,5:1 gerechnet.

   Kein JavaScript: Diagramme sind serverseitig erzeugtes SVG, Aufklappbares ist
   <details>, die Symbole ein eigenes <symbol>-Sprite. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* --- Flächen: Tiefe entsteht über Helligkeit, nicht über Schatten ---------
     Grund → Karte → Feld → gehoben. Vier Ebenen, mehr braucht es nicht. */
  --grund: #0a0d13;
  --karte: #11151e;
  --karte-2: #171c27;
  --karte-3: #1c2230;
  --rand: rgba(255, 255, 255, 0.07);
  --rand-stark: rgba(255, 255, 255, 0.13);
  --zeile-an: rgba(255, 255, 255, 0.035);   /* Tabellenzeile unter dem Zeiger */
  --text: #f1f4f9;
  --blass: #949db1;
  --blasser: #838da2;      /* 4,8:1 auf jeder Fläche - #6f7789 aus dem Entwurf lag bei 4,07:1 */

  --indigo: #5566f2;
  --indigo-hell: #7d8bff;
  --gruen: #3ac47d;
  --orange: #f0913f;
  --lila: #a482f8;         /* eine Spur heller als der Entwurf: auf der eigenen Kachel sonst 4,4:1 */
  --rot: #f26b76;
  --tuerkis: #35c2c8;      /* Anteil eines Firmen-Zweigs im Ring - Rot hieße dort „Alarm" */

  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* --- Abstände: acht Stufen auf einer Vierer-Basis -------------------------
     Vorher standen hier 23 verschiedene Werte (3, 5, 7, 9, 11, 13 …). Kein
     einzelner davon war falsch; zusammen sorgten sie dafür, dass nichts auf
     einer Linie lag. Wer eine Zwischenstufe vermisst, nimmt die nächstgrößere. */
  --a0: 2px;    /* optische Korrektur, kein Abstand */
  --a1: 4px;    /* zwischen Label und Wert */
  --a2: 8px;    /* eng Zusammengehöriges */
  --a3: 12px;   /* Innenabstand von Feldern, Abstand in Gruppen */
  --a4: 16px;   /* Kartenkopf zum Inhalt */
  --a5: 20px;   /* Innenabstand einer Karte */
  --a6: 24px;   /* zwischen Karten und Abschnitten */
  --a7: 32px;   /* zwischen Bereichen */
  --a8: 48px;   /* Seitenfuß */

  /* --- Schrift: acht Stufen, Verhältnis ~1,2, feste Größen -----------------
     Produkt-UI liest sich bei gleichbleibender Größe am besten; mitwachsende
     Überschriften („clamp") sind für Werbeseiten. Zeilenhöhen sind Vielfache
     von 4, damit Text auf demselben Raster sitzt wie die Abstände. */
  --t0: 11px;   /* Versalien: Tabellenkopf, Gruppentitel */
  --t1: 12px;   /* Unterzeile, Hinweis, Zeitangabe */
  --t2: 13px;   /* Sekundäres: Chips, kleine Knöpfe, Fußverweise */
  --t3: 14px;   /* Grundtext, Eingaben, Tabellenzellen */
  --t4: 16px;   /* Kartenüberschrift */
  --t5: 20px;   /* Kennzahl in einem Band */
  --t6: 26px;   /* große Zahl: Privat-Netto, Ringmitte */
  --t7: 28px;   /* Seitentitel */

  /* --- Ecken: drei Stufen, dazu Pille und Kreis ---------------------------- */
  --r-s: 8px;
  --r-m: 12px;
  --r-l: 16px;

  /* --- Eine Bedienhöhe -----------------------------------------------------
     Eingabe, Auswahl, Knopf, Chip, Klappknopf und Datumsfeld sind gleich hoch.
     Vorher lagen 34, 36, 38 und 40 px nebeneinander in derselben Formularreihe;
     das ist der Hauptgrund, warum Zeilen „verschoben" aussahen. 40 px ist
     zugleich mehr, als Regel 20 verlangt. */
  --ziel: 40px;
  --ziel-klein: 36px;      /* innerhalb einer Tabellenzeile - immer noch über Regel 20 */

  /* --- Bewegung ------------------------------------------------------------
     Rückmeldung, kein Schmuck: 150 ms für Zustände, 240 ms für Flächen, die
     ihre Größe ändern. Wer Bewegung abbestellt hat, bekommt keine (ganz unten). */
  --takt: 150ms;
  --takt-lang: 240ms;
  --kurve: cubic-bezier(0.2, 0, 0.1, 1);

  --leiste: 252px;
  --unten: 56px;          /* Höhe der Leiste unten am Handy */

  /* --- Glas ----------------------------------------------------------------
     Hinter der Seite liegt ein Bild; die Flächen darüber lassen es durch, ohne
     den Text zu verlieren. Die Werte sind gerechnet, nicht nach Augenmaß
     gesetzt: `scripts/glas_pruefen.py` nimmt die hellste Stelle des Bildes,
     legt den Schleier und die Fläche darüber und misst den blassesten Text.
     Bei diesen Zahlen bleibt der ungünstigste Fall über 4,5:1.

     Der Schleier ist ein Verlauf: oben deckt er stärker, weil dort der
     Seitenkopf ohne Karte auf dem Bild steht; unten ist er dünner, damit die
     Dünen zu sehen bleiben.

     Das Bild liegt **schon dunkel** in `static/` (siehe
     `scripts/hintergrund_bauen.py`). Das ist der Unterschied zwischen einem
     Motiv und einer grauen Fläche: ein dicker Schleier über einem hellen Bild
     nimmt die Struktur und lässt die Helligkeit, andersherum bleiben die
     Dünenkanten und die Farbe der Sonne stehen. */
  --glas: 66%;              /* Deckkraft der Flächen über dem Bild */
  --glas-fest: 88%;         /* wo viel Text übereinander liegt: Leiste, Blatt */
  /* Wenig Weichzeichnung auf Karten: bei 20 px bleibt vom Motiv nur ein
     Farbschimmer, bei 8 px erkennt man die Dünenkante. Wo dagegen echter
     Inhalt durchscrollt - klebende Tabellenköpfe, die Leiste unten - steht
     stärkere Weichzeichnung direkt an der Regel, sonst wird es unruhig. */
  --glas-weich: 8px;
  --schleier-oben: 0.58;
  --schleier-unten: 0.30;

  /* Die alten Namen bleiben als Verweis auf die Skala - sie stehen noch in
     Regeln, die von der Umstellung nicht berührt werden. */
  --r-karte: var(--r-l);
  --r-knopf: var(--r-m);
  --luft: var(--a6);

  /* Formularfelder und Kalender kommen vom Browser. Ohne diese Zeile rendert
     er sie hell auf dunklem Grund - inklusive des Kalenderblatts hinter dem
     Datumsfeld. Die <meta>-Angabe allein deckt nicht jeden Fall ab. */
  color-scheme: dark;
}

/* Ohne Rücksprache keine Bewegung auf Elementen, die keine brauchen: die
   Regel unten schaltet gezielt frei, statt alles zu animieren. */
:where(a, button, .chip, .knopf, summary, input, select, textarea, .karte-fuss,
       .nav a, .buch tbody tr, .balken i) {
  transition: background-color var(--takt) var(--kurve),
              border-color var(--takt) var(--kurve),
              color var(--takt) var(--kurve),
              box-shadow var(--takt) var(--kurve),
              transform var(--takt) var(--kurve);
}

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

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 400 var(--t3)/20px var(--sans);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
/* Das Bild steht, während die Seite darüber scrollt. Als festes Pseudoelement
   statt `background-attachment: fixed` - das ruckelt auf iOS oder wird ganz
   ignoriert. `--grund` bleibt darunter als Fläche, falls das Bild nicht kommt. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(10, 13, 19, var(--schleier-oben)) 0%,
      rgba(10, 13, 19, calc((var(--schleier-oben) + var(--schleier-unten)) / 2)) 45%,
      rgba(10, 13, 19, var(--schleier-unten)) 100%),
    url("/static/hintergrund.webp") center / cover no-repeat;
}
a { color: inherit; text-decoration: none; }
svg { display: block; }
.sym { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor;
       stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

:where(a, button, input, select, textarea, summary, label):focus-visible {
  outline: 2px solid var(--indigo-hell);
  outline-offset: 2px;
  border-radius: var(--r-m);
}
/* Das Feld, in dem gerade getippt wird, hebt sich - ohne Sprung. */
.feld:focus-within > label { color: var(--text); }

/* Überschriften brechen ausgewogen statt mit einem Wort in der zweiten Zeile. */
h1 { font: 700 var(--t6)/32px var(--sans); margin: 0; letter-spacing: -0.02em;
     text-wrap: balance; }
@media (min-width: 720px) { h1 { font-size: var(--t7); } }
h2 { font: 600 var(--t4)/20px var(--sans); margin: 0; text-wrap: balance; }
h3 { font: 600 var(--t0)/16px var(--sans); margin: var(--a5) 0 var(--a2);
     text-transform: uppercase; letter-spacing: 0.09em; color: var(--blasser); }
p { text-wrap: pretty; }

.blass { color: var(--blass); }
.gruen { color: var(--gruen); }
.rot { color: var(--rot); }
.orange { color: var(--orange); }
.indigo { color: var(--indigo-hell); }
.stark { font-weight: 600; }
.rechts { margin-left: auto; text-align: right; }

/* Nur für Vorleseprogramme: ein Symbol allein ist für sie stumm. */
.sr-nur {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.aufzaehlung { margin: var(--a2) 0 0; padding-left: var(--a5); font-size: var(--t1);
               color: var(--blass); }
.aufzaehlung li { margin-bottom: var(--a1); }
.aufzaehlung strong { color: var(--text); font-weight: 500; }

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

.app { min-height: 100vh; }

main {
  padding: var(--a5) var(--a4) calc(var(--unten) + env(safe-area-inset-bottom) + var(--a4));
  /* width: 100% ist Absicht: ohne sie schrumpft der Bereich als Rasterkind mit
     automatischen Rändern auf seine Inhaltsbreite, und Formularseiten stünden
     als schmale Säule in der Mitte. */
  width: 100%;
  max-width: 1420px;
  margin: 0 auto;
}
/* Ein Hinweis, der direkt auf der Seite steht (nicht in einer Karte), trägt
   denselben Abstand nach unten wie jeder andere Block. */
main > .hinweis { margin-bottom: var(--a6); }
/* Der letzte Block bringt keinen Abstand mehr mit - dafür ist der Innenabstand
   der Seite da. */
main > :last-child { margin-bottom: 0; }

/* --- Seitenleiste --------------------------------------------------------- */

.leiste { display: none; }

.marke {
  display: flex; align-items: center; gap: var(--a3);
  padding: var(--a6) var(--a5) var(--a5); font: 700 var(--t5)/24px var(--sans);
  letter-spacing: -0.02em;
}
.marke .zeichen { width: 34px; height: 34px; flex: none; display: block; }

/* Suchfeld über der Navigation - eine Zeile, dieselbe Breite wie die Punkte. */
.suche-leiste { padding: 0 var(--a3) var(--a3); }
.suche-leiste input {
  width: 100%; min-height: var(--ziel); padding: 0 var(--a3); border-radius: var(--r-m);
  background: var(--karte); border: 1px solid var(--rand); color: var(--text);
  font: 400 var(--t3) var(--sans);
}
.suche-leiste input::placeholder { color: var(--blasser); }

.nav { padding: 0 var(--a3); }
.nav a {
  display: flex; align-items: center; gap: var(--a3);
  min-height: var(--ziel); padding: 0 var(--a3); margin-bottom: var(--a0);
  border-radius: var(--r-m);
  color: var(--blass); font-size: 14px; font-weight: 500;
}
.nav a:hover { background: var(--karte-2); color: var(--text); }
.nav a[aria-current="page"] { background: var(--indigo); color: #fff; }
.nav a[aria-current="page"] .sym { stroke-width: 2; }
.nav-gruppe {
  font: 600 10px/1.35 var(--sans); text-transform: uppercase; letter-spacing: 0.11em;
  color: var(--blasser); padding: 18px 12px 8px; margin-top: 8px;
  border-top: 1px solid var(--rand);
}

/* Privat-Netto unten in der Leiste - die Zahl, die den Betreiber interessiert,
   steht damit auf jeder Seite. */
.netto-karte {
  margin: auto var(--a3) var(--a3); padding: var(--a4); border-radius: var(--r-l);
  background: var(--karte); border: 1px solid var(--rand);
}
.netto-karte .titel { color: var(--indigo-hell); font-weight: 600; font-size: 14px; }
.netto-karte .klein { color: var(--blass); font-size: var(--t1); margin-bottom: 8px; }
.netto-karte .wert { font: 700 26px/1.15 var(--sans); letter-spacing: -0.02em; }
.netto-karte .monat { color: var(--gruen); font-size: var(--t2); font-weight: 500; margin-top: 2px; }
/* Überzogen ist rot - `.rot` allein verliert hier gegen die zwei Klassen darüber
   und färbte eine negative Zahl grün. */
.netto-karte .monat.rot { color: var(--rot); }
.netto-karte .knopf { display: block; text-align: center; margin-top: 12px; }

.konto-fuss {
  display: flex; align-items: center; gap: var(--a3);
  padding: var(--a3) var(--a4) calc(var(--a4) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--rand);
}
.konto-fuss .kreis {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: linear-gradient(140deg, var(--indigo-hell), var(--indigo));
  display: grid; place-items: center; font: 600 12px/1 var(--sans); color: #fff;
}
.konto-fuss .name { font-size: var(--t2); font-weight: 500; }
.konto-fuss .rolle { font-size: var(--t1); color: var(--blass); }

/* Leiste unten am Handy - dieselben Rechte, andere Anordnung. */
.unten-leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex;
  /* Der Inhalt scrollt hier wirklich darunter durch - die Stelle, an der Glas
     am meisten bringt und am wenigsten kostet. */
  background: color-mix(in srgb, #0d1119 var(--glas-fest), transparent);
  backdrop-filter: blur(24px) saturate(130%);
  -webkit-backdrop-filter: blur(24px) saturate(130%);
  border-top: 1px solid var(--rand);
  padding-bottom: env(safe-area-inset-bottom);
}
.unten-leiste a, .unten-leiste summary {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--a1);
  padding: 8px 2px; color: var(--blass); font-size: var(--t0); font-weight: 500;
  list-style: none; cursor: pointer;
}
.unten-leiste a[aria-current="page"] { color: var(--indigo-hell); }
.unten-leiste summary::-webkit-details-marker { display: none; }

/* Das Mehr-Blatt: ein Kartenblatt, das über der Leiste aufgeht.
   Ohne JavaScript schließt es nur derselbe Knopf, der es geöffnet hat -
   deshalb steht dort im offenen Zustand „Schließen", und der Schleier lässt
   die Leiste frei, damit der Ausgang immer sichtbar bleibt. */
/* Das <details> ist selbst das fünfte Ziel der Leiste und muss deshalb wie die
   anderen ein Fünftel bekommen - sonst schrumpft es auf die Breite des Wortes. */
.unten-leiste > .mehr { flex: 1; display: flex; }
.unten-leiste > .mehr > summary { flex: 1; }
.mehr > summary > span {
  display: flex; flex-direction: column; align-items: center; gap: var(--a1);
}
.mehr > summary .auf, .mehr[open] > summary .zu { display: none; }
.mehr[open] > summary .auf { display: flex; }
.mehr[open] > summary { color: var(--indigo-hell); }
.mehr[open]::after {
  content: ""; position: fixed; z-index: -1;
  inset: 0 0 calc(var(--unten) + env(safe-area-inset-bottom)) 0;
  background: rgba(4, 6, 10, 0.66);
}

.mehr-blatt {
  position: fixed; left: 0; right: 0; z-index: 31;
  bottom: calc(var(--unten) + env(safe-area-inset-bottom));
  max-height: calc(100vh - var(--unten) - 20px); overflow-y: auto;
  background: color-mix(in srgb, var(--karte-2) var(--glas-fest), transparent);
  backdrop-filter: blur(24px) saturate(130%);
  -webkit-backdrop-filter: blur(24px) saturate(130%);
  border-top: 1px solid var(--rand-stark);
  border-radius: var(--r-l) var(--r-l) 0 0; padding: var(--a2) var(--a4) var(--a5);
  box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.6);
}
.mehr-blatt .griff {
  display: block; width: 38px; height: 4px; border-radius: 999px;
  background: var(--rand-stark); margin: 2px auto 14px;
}
.mehr-blatt .kopf {
  display: flex; align-items: center; gap: var(--a3);
  padding-bottom: 13px; border-bottom: 1px solid var(--rand);
}
.mehr-blatt .kreis {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: linear-gradient(140deg, var(--indigo-hell), var(--indigo));
  display: grid; place-items: center; font: 600 12px/1 var(--sans); color: #fff;
}
.mehr-blatt .name { font-size: var(--t3); font-weight: 500; color: var(--text); }
.mehr-blatt .rolle { font-size: var(--t1); color: var(--blass); }
.mehr-blatt .gruppe {
  font: 600 10px/1.35 var(--sans); text-transform: uppercase; letter-spacing: 0.11em;
  color: var(--blasser); padding: 16px 2px 8px;
}
/* Zwei Kacheln am Handy, mehr sobald Platz ist - auf dem Tablet ist dieselbe
   Leiste unten, nur doppelt so breit. */
.mehr-blatt .kacheln {
  display: grid; gap: var(--a2);
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
/* Setzt die Spaltenanordnung der Leiste darüber zurück: hier sind es Kacheln
   mit Symbol links und Beschriftung daneben, wie in der Seitenleiste. */
.mehr-blatt .kacheln a {
  display: flex; flex-direction: row; align-items: center; gap: var(--a3);
  padding: 12px; border-radius: 12px; background: var(--karte);
  border: 1px solid var(--rand); color: var(--text);
  font-size: var(--t3); font-weight: 500; text-align: left;
}
.mehr-blatt .kacheln a:hover, .mehr-blatt .kacheln a:active { background: var(--karte-3); }
.mehr-blatt .kacheln .sym { color: var(--blass); }
.mehr-blatt form { margin-top: 16px; }
.mehr-blatt button.leise {
  width: 100%; justify-content: center; gap: var(--a2); min-height: var(--ziel);
  background: var(--karte); border: 1px solid var(--rand); border-radius: 12px;
  color: var(--blass); font-size: var(--t3);
}
.mehr-blatt button.leise:hover { color: var(--text); background: var(--karte-3); }

/* --- Kopfzeile ------------------------------------------------------------ */

.kopfzeile {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--a4);
  margin-bottom: var(--a6);
}
/* Das Zeichen vor der Begrüßung. Am Handy steht in der Kopfzeile sonst nichts
   von der Marke - die Leiste links gibt es erst ab 1080 px. */
/* Am Handy bricht die Begrüßung auf zwei Zeilen um; dann steht das Zeichen an
   der ersten statt in der Mitte des Blocks. */
.kopf-zeichen { flex: none; display: block; align-self: flex-start; margin-top: 1px; }
.kopfzeile .gruss { flex: 1 1 200px; }
.kopfzeile .gruss p { margin: var(--a1) 0 0; color: var(--blass); font-size: var(--t3); }
.kopf-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2);
                 margin-left: auto; }

/* Die Jahreswahl ist ein <details>: ein Klappmenü ohne eine Zeile JavaScript.
   Ein <select> könnte ohne Skript nicht navigieren, ein Formular bräuchte einen
   zweiten Knopf. */
.wahl { position: relative; }
.wahl > summary {
  display: inline-flex; align-items: center; gap: var(--a2); list-style: none;
  background: var(--karte); border: 1px solid var(--rand); border-radius: var(--r-m);
  min-height: var(--ziel); padding: 0 var(--a3);
  color: var(--text); font: 500 var(--t3)/20px var(--sans); cursor: pointer;
}
.wahl > summary::-webkit-details-marker { display: none; }
.wahl > summary:hover { border-color: var(--rand-stark); }
.wahl[open] > summary { border-color: var(--indigo); }
.wahl-blatt {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; min-width: 116px;
  background: var(--karte-2); border: 1px solid var(--rand-stark);
  border-radius: var(--r-knopf); padding: 6px; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
}
.wahl-blatt a {
  display: flex; align-items: center; min-height: var(--ziel);
  padding: 0 var(--a3); border-radius: var(--r-s); font-size: var(--t2);
}
.wahl-blatt a:hover { background: var(--karte-3); }
.wahl-blatt a[aria-current] { color: var(--indigo-hell); font-weight: 600; }

.glocke {
  position: relative; width: 40px; height: 40px; border-radius: var(--r-knopf);
  background: var(--karte); border: 1px solid var(--rand);
  display: grid; place-items: center; color: var(--blass);
}
.glocke:hover { color: var(--text); border-color: var(--rand-stark); }
.glocke .zahl {
  position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px;
  border-radius: 999px; background: var(--indigo); color: #fff;
  font: 600 11px/19px var(--sans); text-align: center; padding: 0 5px;
  border: 2px solid var(--grund);
}

.knopf, button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--a2);
  min-height: var(--ziel); padding: 0 var(--a4);
  background: var(--karte-2); border: 1px solid var(--rand); border-radius: var(--r-m);
  color: var(--text); font: 500 var(--t3)/20px var(--sans); cursor: pointer;
}
.knopf:hover, button:hover { border-color: var(--rand-stark); background: var(--karte-3); }
.knopf:active, button:active { transform: translateY(1px); }
.knopf--primaer, button.primaer {
  background: linear-gradient(135deg, var(--indigo-hell), var(--indigo));
  border: 1px solid transparent; color: #fff; font-weight: 600;
}
.knopf--primaer:hover, button.primaer:hover {
  filter: brightness(1.08); border-color: transparent;
}
/* Der leise Knopf sieht aus wie ein Verweis, wird aber wie ein Knopf getroffen. */
button.leise {
  background: none; border: 0; color: var(--blass);
  min-height: var(--ziel); padding: 0 var(--a1); font-size: var(--t2);
}
button.leise:hover { color: var(--text); background: none; text-decoration: underline;
                     text-underline-offset: 3px; }
button.leise:active { transform: none; }
/* In einer Tabellenzeile darf es eine Nummer kleiner sein - die Zeile ist
   ohnehin 44 px hoch und damit weit über dem Tippziel. */
.buch button.leise { min-height: var(--ziel-klein); }

/* Die Kette eines Vorgangs: eine Zeile unter dem Titel, keine eigene Karte.
   „Angebot → Auftrag → Rechnung" ist ein Weg, kein Gegenstand. */
.vorgang {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2);
  margin: calc(var(--a6) * -1 + var(--a2)) 0 var(--a6);
}

/* Ein Formular, das an den Inhalt darüber anschließt - durch eine Linie
   getrennt, aber in derselben Karte. */
.anbau {
  margin-top: var(--a5); padding-top: var(--a5);
  border-top: 1px solid var(--rand);
}

/* Ein breites Feld im Zahlenband: ein Firmenname bricht sonst mitten im Wort. */
.band > .weit { grid-column: span 2; }
/* Die Beschriftung einer Kennzahl ist Beiwerk - sie tritt zurück, damit die
   Zahl vorne steht. */
.band label {
  font: 600 var(--t0)/16px var(--sans); text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--blasser); margin-bottom: var(--a1);
}
.kpi-v { font-size: var(--t6); line-height: 32px; }

/* --- Karten --------------------------------------------------------------- */

.karte {
  background: color-mix(in srgb, var(--karte) var(--glas), transparent);
  backdrop-filter: blur(var(--glas-weich)) saturate(135%);
  -webkit-backdrop-filter: blur(var(--glas-weich)) saturate(135%);
  border: 1px solid var(--rand); border-radius: var(--r-l);
  padding: var(--a5); margin-bottom: var(--a6);
}
.karte-kopf { display: flex; align-items: center; gap: var(--a3); margin-bottom: var(--a4); }
/* Der Innenabstand der Karte reicht - was zuletzt darin steht, bringt keinen
   eigenen mehr mit. */
.karte > :last-child { margin-bottom: 0; }
/* Eine Chipreihe innerhalb einer Karte gehört zum Inhalt, nicht zum Seitenkopf. */
.karte .seite-kopf { margin-bottom: var(--a4); }
.karte .seite-kopf:last-child { margin-bottom: 0; }
.karte-kopf .sym { color: var(--blass); }
.karte-kopf .rechts { font-size: var(--t2); color: var(--blass); }
/* Der Verweis im Kartenkopf ist Navigation, kein Fließtext. */
.karte-kopf a.rechts { display: inline-flex; align-items: center; min-height: var(--ziel-klein); }
.karte-kopf a.rechts:hover { color: var(--indigo-hell); }
.karte-fuss {
  display: flex; align-items: center; justify-content: center; gap: var(--a2);
  margin-top: var(--a4); min-height: var(--ziel); border-radius: var(--r-m);
  background: var(--karte-2); color: var(--indigo-hell);
  font-size: var(--t2); font-weight: 500;
}
.karte-fuss:hover { background: var(--karte-3); }
.karte--warnung { border-color: var(--indigo); }

/* Eine Karte, die aufklappt. Der Kartenkopf ist zugleich der Griff - deshalb
   ohne Dreieck des Browsers, aber mit einem Zeichen, das sich dreht. */
details.karte > summary { list-style: none; cursor: pointer; margin-bottom: 0;
                          min-height: var(--ziel); }
details.karte > summary::-webkit-details-marker { display: none; }
details.karte[open] > summary { margin-bottom: var(--a4); }
details.karte > summary::after {
  content: "›"; margin-left: var(--a2); color: var(--blasser); font-size: var(--t4);
  transition: transform var(--takt) var(--kurve);
}
details.karte[open] > summary::after { transform: rotate(90deg); }
details.karte > summary:hover { color: var(--text); }
details.karte > summary:hover h2 { color: var(--indigo-hell); }
details.karte[open] > summary .anlegen-hinweis { display: none; }
.anlegen-hinweis { font-size: var(--t1); }

/* Raster: vier Kennzahlen, dann 2fr/1fr, dann drei Listen.

   Der Abstand nach unten gehört an den Rasterblock selbst. Seine Karten haben
   ihren eigenen abgelegt (sonst käme er zum `gap` hinzu) - ohne diese Zeile
   stößt jeder Block ohne eine Lücke an den nächsten, und auf dem Dashboard
   kleben sechs Kartenreihen aneinander. */
.raster-4, .raster-2-1, .raster-3, .raster-2 {
  display: grid; gap: var(--a6); margin-bottom: var(--a6);
}
.raster-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.raster-2-1, .raster-3, .raster-2 { grid-template-columns: minmax(0, 1fr); }
.raster-4 > .karte, .raster-2-1 > .karte, .raster-3 > .karte,
.raster-2 > .karte { margin-bottom: 0; }
/* Ohne min-width sprengt eine breite Tabelle ihre Spalte und schiebt die
   ganze Seite nach rechts - Rasterkinder dürfen nicht kleiner werden als ihr
   Inhalt, solange man es ihnen nicht erlaubt. */
.raster-4 > *, .raster-2-1 > *, .raster-3 > *, .raster-2 > * { min-width: 0; }
/* Karten einer Reihe sind gleich hoch; der Fußlink sitzt deshalb unten, damit
   die Links nebeneinander auf einer Linie liegen. */
.raster-2-1 > .karte, .raster-3 > .karte, .raster-2 > .karte {
  display: flex; flex-direction: column;
}
.raster-2-1 > .karte > .karte-fuss, .raster-3 > .karte > .karte-fuss,
.raster-2 > .karte > .karte-fuss { margin-top: auto; }

/* --- Kennzahlkarte -------------------------------------------------------- */

.kennzahl .oben { display: flex; align-items: center; gap: var(--a3); margin-bottom: var(--a3); }
.kennzahl .titel { font-size: var(--t3); font-weight: 500; }
.symbol-kachel {
  width: 36px; height: 36px; border-radius: var(--r-m); flex: none;
  display: grid; place-items: center;
}
.symbol-kachel--indigo { background: rgba(85, 102, 242, 0.16); color: var(--indigo-hell); }
.symbol-kachel--gruen { background: rgba(58, 196, 125, 0.16); color: var(--gruen); }
.symbol-kachel--orange { background: rgba(240, 145, 63, 0.16); color: var(--orange); }
.symbol-kachel--lila { background: rgba(164, 130, 248, 0.16); color: var(--lila); }
/* Am Handy stehen zwei Karten nebeneinander; die 27 px des Entwurfs brächen
   dort „10.015,00 €" auf zwei Zeilen. Sehr lange Beträge (Millionen) bekommen
   zusätzlich eine Stufe weniger - lieber kleiner als umgebrochen. */
.kennzahl .wert { font: 700 27px/1.15 var(--sans); font-size: clamp(19px, 5vw, 27px);
                  letter-spacing: -0.025em; }
.kennzahl .wert--lang { font-size: clamp(15px, 3.9vw, 22px); }
/* Gleich hohe Karten, damit Nebenzeile und Vergleich auf einer Linie liegen -
   sonst tanzt jede Karte auf eigener Höhe, sobald eine Zahl umbricht. */
.raster-4 > .karte { display: flex; flex-direction: column; }
.kennzahl .delta { margin-top: auto; }
.kennzahl .unter { color: var(--blass); font-size: var(--t1); margin-top: var(--a1); }
.kennzahl .delta {
  display: flex; align-items: center; gap: var(--a2); font-size: var(--t2); font-weight: 600;
  margin-top: var(--a4); padding-top: var(--a3); border-top: 1px solid var(--rand);
  white-space: nowrap;      /* „+197 %" ist eine Angabe, keine zwei */
}
/* In einer schmalen Karte steht der Bezug unter der Zahl statt neben ihr -
   sonst bricht „vs. Vormonat" mitten entzwei. */
@container (max-width: 264px) {
  .kennzahl .delta { flex-wrap: wrap; }
  .kennzahl .delta .bezug { margin-left: 0; flex-basis: 100%; }
}
.kennzahl .delta .bezug { margin-left: auto; color: var(--blass); font-weight: 400; font-size: var(--t1); }
/* Ohne Vergleichszahl steht dort nur der Grund - und zwar links, sonst hinge
   er ohne Bezug am rechten Rand. */
.kennzahl .delta.blass .bezug { margin-left: 0; }

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

.diagramm { width: 100%; height: auto; }
.diagramm .gitter { stroke: var(--rand); stroke-dasharray: 4 5; }
.diagramm .achse { fill: var(--blasser); font-size: var(--t0); }
.diagramm .linie { stroke: var(--indigo-hell); stroke-width: 2.4; fill: none;
                   stroke-linecap: round; stroke-linejoin: round; }
.diagramm .punkt { fill: var(--indigo-hell); }
/* Wertfahne und Monatsband liegen außerhalb des SVG: Schrift, die mit der
   Kartenbreite skaliert, ist am Handy sechs Pixel groß. */
.diagramm-block { position: relative; }
.wertfahne {
  position: absolute; transform: translate(-50%, -155%); white-space: nowrap;
  background: var(--indigo); color: #fff; border-radius: 7px;
  padding: 3px 8px; font-size: var(--t1); font-weight: 600;
}
.wertfahne--links { transform: translate(-8%, -155%); }
.wertfahne--rechts { transform: translate(-92%, -155%); }
.wertfahne--unten { transform: translate(-50%, 60%); }
.wertfahne--links.wertfahne--unten { transform: translate(-8%, 60%); }
.wertfahne--rechts.wertfahne--unten { transform: translate(-92%, 60%); }
.achsen-band {
  display: flex; justify-content: space-between;
  padding: 4px 1.9% 0; font-size: var(--t0); color: var(--blasser);
}
@container (max-width: 460px) {
  /* Zwölf Monate nebeneinander sind am Handy Streifen, keine Schrift. */
  .achsen-band span:nth-child(even) { visibility: hidden; }
}

/* Der Verlauf des Zweigs sitzt unter seinen Kennzahlen in derselben Karte -
   eine Linie braucht keine eigene Überschrift, nur eine Trennung. */
.verlauf-block { border-top: 1px solid var(--rand); padding-top: 12px; }
.verlauf-kopf { display: flex; align-items: center; gap: var(--a3); margin-bottom: var(--a2); }
/* Sieht aus wie h3, ist aber h2: die Karte hat keine eigene Überschrift, und
   eine Gliederung, die von h1 auf h3 springt, ist für Vorleseprogramme kaputt. */
.verlauf-kopf .klein-titel {
  font: 600 11px/1.3 var(--sans); text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--blasser); margin: 0;
}
.spanne { display: flex; gap: var(--a1); margin-left: auto; }
.spanne a {
  display: inline-flex; align-items: center; min-height: 36px;
  padding: 5px 14px; border-radius: 999px; background: var(--karte-2);
  color: var(--blass); font-size: var(--t1); font-weight: 600;
}
.spanne a:hover { background: var(--karte-3); color: var(--text); }
.spanne a[aria-current] { background: var(--indigo); color: #fff; }
/* Etwas dicker als die grüne darüber: wo beide gleich laufen, bleibt ein
   schmaler blauer Rand stehen statt einer verschwundenen Linie. */
.diagramm .linie--umsatz { stroke-width: 3.4; }
.diagramm .linie--gewinn { stroke: var(--gruen); stroke-width: 2; }
.diagramm .punkt--gewinn { fill: var(--gruen); }

.ring-block { display: flex; flex-direction: column; align-items: center; }
.ring { width: 168px; height: 168px; }
.ring .mitte-wert { fill: var(--text); font-size: 19px; font-weight: 700; text-anchor: middle; }
.ring .mitte-text { fill: var(--blass); font-size: var(--t0); text-anchor: middle; }

.legende { width: 100%; margin-top: var(--a4); }
.legende .zeile { display: flex; align-items: center; gap: var(--a3); padding: var(--a2) 0;
                  font-size: var(--t2); }
.legende .punkt { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.legende .betrag { margin-left: auto; font-weight: 500; }
.legende .anteil { width: 42px; text-align: right; color: var(--blass); }

/* --- Zeilen und Listen ---------------------------------------------------- */

.zeile {
  display: flex; align-items: center; gap: var(--a3);
  padding: 9px 0; font-size: var(--t3); border-bottom: 1px solid var(--rand);
}
.zeile:last-of-type { border-bottom: 0; }
.zeile .betrag { margin-left: auto; font-weight: 500; white-space: nowrap; }
/* Schmale Spalte rechts außen - Prozentsatz oder kleiner Betrag. min-width
   statt width: „+12,50 €" darf nicht auf zwei Zeilen brechen. */
.zeile .anteil { min-width: 44px; padding-left: var(--a3); white-space: nowrap;
                 text-align: right; color: var(--blass); font-size: var(--t1); }
.zeile .neben { color: var(--blass); font-size: var(--t1); white-space: nowrap; }

.termin { display: flex; align-items: center; gap: var(--a3); padding: var(--a2) 0; }
.datum-plakette {
  width: 46px; flex: none; border-radius: var(--r-knopf); background: var(--karte-2);
  padding: var(--a2) 0; text-align: center; line-height: 16px;
}
.datum-plakette .tag { font: 700 17px/1 var(--sans); }
.datum-plakette .monat {
  font-size: var(--t0); text-transform: uppercase; letter-spacing: 0.08em; color: var(--blass);
}
.termin .was { min-width: 0; }
.termin .titel { font-size: var(--t2); font-weight: 500; }
.termin .zusatz { font-size: var(--t1); color: var(--blass); }
.pille {
  margin-left: auto; flex: none; border-radius: 999px; padding: var(--a1) var(--a3);
  font-size: var(--t1); font-weight: 500; background: var(--karte-2); color: var(--blass);
}
/* Deckend getönt statt durchscheinend: auf dem Grund wie auf der Karte bleibt
   die Schrift bei 4,8:1 und mehr (glas_pruefen.py). */
.pille--gruen { background: color-mix(in srgb, var(--gruen) 18%, var(--karte)); color: var(--gruen); }
.pille--rot { background: color-mix(in srgb, var(--rot) 18%, var(--karte)); color: var(--rot); }
.pille--indigo { background: color-mix(in srgb, var(--indigo) 18%, var(--karte)); color: var(--indigo-hell); }

/* --- Banner --------------------------------------------------------------- */

.banner {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: var(--a4); flex-wrap: wrap;
}
.banner .bild {
  width: 54px; height: 54px; border-radius: var(--r-l); flex: none; display: grid;
  place-items: center; font-size: 26px; background: rgba(58, 196, 125, 0.14);
}
.banner .text { flex: 1 1 260px; }
.banner .text strong { font-size: var(--t4); }
.banner .text p { margin: 3px 0 0; color: var(--blass); font-size: var(--t2); }
.banner .welle { position: absolute; right: 0; bottom: 0; width: 340px; opacity: 0.5;
                 pointer-events: none; }

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

label {
  display: block; font-size: var(--t1); font-weight: 500; color: var(--blass);
  margin-bottom: var(--a1);
}
input:not([type]), input[type="url"],
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="search"], input[type="tel"], input[type="file"],
select, textarea {
  width: 100%; min-height: var(--ziel); padding: 0 var(--a3);
  background: var(--karte-2); color: var(--text);
  border: 1px solid var(--rand); border-radius: var(--r-m);
  font: 400 var(--t3)/20px var(--sans);
}
textarea { padding: var(--a3); min-height: calc(var(--ziel) * 2); field-sizing: content; }
input[type="file"] { padding: var(--a2) var(--a3); }
input:focus, select:focus, textarea:focus { border-color: var(--indigo); }
input::placeholder, textarea::placeholder { color: var(--blasser); }

/* Das Datumsfeld: das native bleibt (Kalender am Telefon, Tastatur am Rechner,
   deutsche Schreibweise vom Browser). Was fehlte, war die Bedienbarkeit - das
   Kalendersymbol war ein 16-px-Ziel in der Ecke. */
input[type="date"] { padding-right: var(--a2); }
input[type="date"]::-webkit-calendar-picker-indicator {
  width: 22px; height: 22px; padding: var(--a1); margin: 0; cursor: pointer;
  border-radius: var(--r-s); opacity: 0.55;
  transition: opacity var(--takt) var(--kurve), background-color var(--takt) var(--kurve);
}
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="date"]:focus::-webkit-calendar-picker-indicator {
  opacity: 1; background: var(--karte-3);
}
button:disabled, button:disabled:hover {
  opacity: 0.45; cursor: not-allowed; filter: grayscale(0.6);
}
input:hover, select:hover { border-color: var(--rand-stark); }
/* Ein Haken von 13 px ist am Telefon Glückssache. */
input[type="checkbox"], .haken {
  width: 20px; height: 20px; accent-color: var(--indigo); flex: none;
}
.feld { margin-bottom: var(--a3); }
/* Ein Namensfeld über die volle Breite einer 1200 px breiten Karte sieht aus
   wie ein Fehler. Im Felderraster greift die Grenze ohnehin nicht. */
.feld input, .feld select, .feld textarea { max-width: 460px; }
/* Ein Anschreiben liest sich in 460 px schlecht - Fließtext darf breiter sein. */
.feld textarea { max-width: 760px; line-height: 22px; resize: vertical; }
.feld--eng { margin: 0; }
.feld--breit { grid-column: span 2; margin: 0; }
.feld--voll { grid-column: 1 / -1; margin: 0; }

/* In einer Reihe sorgt der Rasterabstand für den Zwischenraum. Der eigene
   Außenabstand eines Feldes verschob es dagegen um genau seine 12 px gegen den
   Nachbarn, weil `align-items: end` die Außenkante ausrichtet - das war der
   sichtbarste Teil von „verschoben". */
.reihe-felder > .feld { margin-bottom: 0; }
/* Die Beschriftung nimmt eine feste Höhe ein, auch wenn sie umbricht. Sonst
   rutscht die Eingabe unter einem zweizeiligen Label eine Zeile tiefer als die
   Eingabe daneben. */
.reihe-felder > .feld > label {
  min-height: 36px; display: flex; align-items: flex-end; margin-bottom: var(--a1);
  line-height: 16px;
}

/* Ein Feld ist so breit wie das, was hineingehört. Ein Mengenfeld in der Breite
   eines Namensfeldes ist der sichtbarste Teil von „nicht durchdacht". */
.feld--datum input { max-width: 168px; }
.feld--zahl input { max-width: 96px; }
.feld--betrag input { max-width: 132px; }
.feld--plz input { max-width: 104px; }
.feld--kurz input, .feld--kurz select { max-width: 200px; }

.reihe-felder {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: var(--a3) var(--a4); align-items: end;
}
/* Knöpfe behalten ihre Breite: über eine ganze Rasterspalte gezogen sähe
   „Anlegen" aus wie eine Fläche, nicht wie ein Knopf. */
.reihe-felder > button { justify-self: start; }
.aktionen { display: flex; flex-wrap: wrap; gap: var(--a3); align-items: flex-end; }
.aktionen form { display: flex; gap: var(--a2); align-items: flex-end; }
.klein { width: 120px; min-height: var(--ziel-klein); padding: 0 var(--a2);
         font-size: var(--t2); }
/* Neben Feldern so hoch wie die Felder - sonst steht der Knopf einen Hauch tiefer. */
.reihe-felder .klein { min-height: var(--ziel); }
.wahl-feld {
  display: inline-flex; align-items: center; gap: var(--a2); margin: 0 var(--a4) 0 0;
  min-height: var(--ziel);     /* der Haken ist klein, sein Feld nicht */
  font: 400 var(--t3)/20px var(--sans); color: var(--text); cursor: pointer;
}
.wahl-feld:hover { color: var(--text); }

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

.buch { width: 100%; border-collapse: collapse; font-size: var(--t3); }
/* Zeilenhöhe 16 px, nicht 11: sonst schneidet der Browser die Punkte über
   einem großen Ü ab und aus „ÜBERFÄLLIG" wird „UBERFALLIG". */
.buch th {
  font: 600 var(--t0)/16px var(--sans); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--blasser); text-align: left; padding: 0 0 var(--a3);
  /* Die Kopfzeile bleibt beim Scrollen stehen - bei fünfzig Zeilen weiß man
     sonst in der Mitte der Liste nicht mehr, welche Spalte man liest. */
  position: sticky; top: 0; z-index: 1;
  /* Auf einer Glaskarte muss die klebende Kopfzeile selbst Glas sein - sonst
     scrollen die Zeilen sichtbar durch sie hindurch. */
  background: color-mix(in srgb, var(--karte) var(--glas-fest), transparent);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 1px 0 var(--rand);
}
.buch th.betrag, .buch td.betrag { text-align: right; }
/* Die tragende Spalte einer Liste bekommt Platz: sonst bricht „Möbelwerkstatt
   Brandt GmbH" auf zwei Zeilen, während daneben eine E-Mail-Adresse in einer
   Zeile steht. Ab Tablet, am Telefon entscheidet der Inhalt. */
@media (min-width: 720px) { .buch th.haupt { width: 30%; } }
/* Spalten ohne Betragsausrichtung haben keinen Abstand voneinander - in der
   Kopfzeile einer Rechnung stand am Handy „POSBEZEICHNUNGMENGE". */
.buch th + th:not(.betrag), .buch td + td:not(.betrag) { padding-left: var(--a3); }
/* 44 px Zeilenhöhe: zwischen „dicht" (40) und „normal" (48) - dicht genug für
   ein Kontobuch, ruhig genug zum Lesen. */
.buch td { padding: var(--a3) 0; border-top: 1px solid var(--rand); vertical-align: middle; }
/* Zeilen mit Unterzeile stehen oben: sonst schwimmt der Haupttext in der Mitte
   und die Spalten daneben liegen nicht mehr auf einer Linie. */
.buch tr:has(.unterzeile) td, .buch tr:has(.nur-klein) td { vertical-align: top; }
.buch tbody tr:first-child td { border-top: 0; }
/* Eine Zeile, die man über die ganze Breite verfolgen kann. */
.buch tbody tr:hover td { background: var(--zeile-an); }
.buch tfoot td, .buch tbody tr:has(td[colspan]) td:hover { background: none; }
.buch .betrag { font-weight: 500; white-space: nowrap; padding-left: var(--a4); }
/* Verweise mitten in Zeilen: ohne eigene Höhe sind sie 14 px hohe Ziele. */
.buch td a, .reihe a:not(.chip):not(.knopf) {
  display: inline-flex; align-items: center; min-height: var(--ziel-klein);
}
.buch td a:hover { color: var(--indigo-hell); }
.buch .eingerueckt td:first-child { padding-left: var(--a4); color: var(--blass); }
.buch .gruppe td {
  font: 600 var(--t0)/16px var(--sans); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--blasser); padding-top: var(--a4); border-top: 0;
}
.buch .summe td { border-top: 2px solid var(--rand-stark); padding-top: var(--a3);
                  font-weight: 600; }
/* Eine Zielzeile, die schon erreicht ist - grün markiert statt durchgestrichen. */
.buch .erreicht td:first-child { color: var(--gruen); }
.buch .summe .betrag { font-size: var(--t4); }
.unterzeile { display: block; font-size: var(--t1); color: var(--blass); margin-top: var(--a0); }
.zeit { color: var(--blass); font-size: var(--t1); }
/* Ein überfälliges Datum ist rot - `.zeit` steht später im Stylesheet und
   gewönne sonst gegen `.rot`. */
.zeit.rot { color: var(--rot); }
/* Storniertes tritt zurück, bleibt aber lesbar: halbdurchsichtiger Text
   unterschreitet jeden Kontrastwert. */
.storniert td, .storniert { color: var(--blass); }
.storniert .zeit { color: var(--blasser); }
.breit { overflow-x: auto; overflow-y: clip; }

.herleit > summary { list-style: none; cursor: pointer; min-height: var(--ziel-klein);
                     display: flex; align-items: center; gap: var(--a0); }
.herleit > summary::-webkit-details-marker { display: none; }
.herleit > summary::before { content: "›"; display: inline-block; width: 11px; color: var(--blass); }
.herleit[open] > summary::before { content: "⌄"; }
.herleit ul { margin: 5px 0 2px 11px; padding-left: 14px; font-size: var(--t1); color: var(--blass); }

details.faltung > summary, details > summary.blass {
  font-size: var(--t2); color: var(--blass); cursor: pointer;
  padding: 0 var(--a2); min-height: var(--ziel); display: flex; align-items: center;
  gap: var(--a2); border-radius: var(--r-m); margin: 0 calc(var(--a2) * -1);
}
details.faltung > summary::before {
  content: "›"; display: inline-block; width: 12px; color: var(--blasser);
  transition: transform var(--takt) var(--kurve);
}
details.faltung[open] > summary::before { transform: rotate(90deg); }
details.faltung > summary:hover { color: var(--text); background: var(--karte-2); }
details.faltung[open] > summary { color: var(--text); }
/* Mehrere Klappzeilen untereinander sind eine Liste, keine Ansammlung. */
.karte > details.faltung + details.faltung { border-top: 1px solid var(--rand); }
.karte > details.faltung > :not(summary) { padding-bottom: var(--a4); }
/* Der Betreff hinter dem Namen ist Beiwerk und darf abschneiden, statt die
   Zeile zu sprengen. */
details.faltung > summary > .blass {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}

/* --- Balken und Fortschritt ----------------------------------------------- */

.balken { display: block; height: 6px; background: var(--karte-3); border-radius: 999px;
          overflow: hidden; margin-top: 8px; }
.balken i { display: block; height: 100%; background: var(--gruen); border-radius: 999px; }
.balken i.warn { background: var(--orange); }
.balken i.ueber { background: var(--rot); }
.balken i.indigo { background: var(--indigo); }

/* Der Fortschritt im persönlichen Fenster - dieselbe Sprache wie die anderen
   Balken, nur groß genug, um die Hauptaussage der Seite zu tragen. */
.fenster { margin-bottom: var(--a4); }
.balken.gross { height: 14px; border-radius: 999px; margin: 0; }
.balken.gross i { background: linear-gradient(90deg, var(--indigo-hell), var(--indigo)); }
.balken.gross i.netto { background: linear-gradient(90deg, var(--gruen), #2aa568); }
.fenster .skala {
  display: flex; justify-content: space-between; gap: var(--a3);
  margin-bottom: 7px; font-size: var(--t1); color: var(--blass);
}
.fenster .skala .stand { color: var(--text); font-weight: 600; }

.grenze { padding: 10px 0; border-bottom: 1px solid var(--rand); }
.grenze:last-of-type { border-bottom: 0; }
.grenze .kopf { display: flex; gap: var(--a3); align-items: baseline; font-size: var(--t3); }
.grenze .hinweis { margin-top: var(--a2); }

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

:where(.hinweis) { color: var(--blass); font-size: var(--t1); margin: var(--a2) 0 0;
           max-width: 78ch; }
.melden {
  font-size: var(--t2); padding: var(--a3) var(--a4); border-radius: var(--r-m);
  border: 1px solid var(--rand); margin-bottom: var(--a6);
}
.melden--gut { border-color: rgba(58, 196, 125, 0.4); color: var(--gruen);
               background: rgba(58, 196, 125, 0.08); }
.melden--fehler, .fehler {
  border: 1px solid rgba(242, 107, 118, 0.4); color: var(--rot); font-size: var(--t2);
  padding: var(--a3) var(--a4); border-radius: var(--r-m); margin-bottom: var(--a6);
  background: rgba(242, 107, 118, 0.08);
}
/* Eine Meldung erscheint, sie springt nicht ins Bild. */
.melden, .fehler { animation: melden-auf var(--takt-lang) var(--kurve); }
@keyframes melden-auf {
  from { opacity: 0; transform: translateY(-4px); }
}
.leer { color: var(--blass); font-size: var(--t1); padding: var(--a3) 0; }
.token {
  font-family: ui-monospace, Menlo, monospace; font-size: var(--t1); word-break: break-all;
  background: var(--karte-2); padding: var(--a3); border-radius: var(--r-m);
}
.parameter { border-bottom: 1px solid var(--rand); padding: var(--a2) 0; }
.parameter a, .parameter summary { display: inline-flex; align-items: center;
                                   min-height: var(--ziel-klein); }
.parameter .zeile { border-bottom: 0; padding: 0; cursor: pointer; }

/* --- Chips (Jahre, Unterseiten) ------------------------------------------- */

.chip {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--a2);
  min-height: var(--ziel);     /* Daumenbreite, nicht Textbreite */
  font: 500 var(--t2)/18px var(--sans); padding: 0 var(--a4); border-radius: var(--r-m);
  border: 1px solid var(--rand); background: var(--karte); color: var(--blass);
  white-space: nowrap;
}
.chip:hover { border-color: var(--rand-stark); color: var(--text); background: var(--karte-2); }
.chip:active { transform: translateY(1px); }
.chip[aria-current] { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.seite-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2);
              margin-bottom: var(--a6); }
.seite-kopf .jahre { display: flex; gap: var(--a2); margin-left: auto; }

/* Spalten, die am Handy nicht mitkommen. */
.opt { display: none; }
/* Zusatzzeilen in Zahlenspalten dürfen umbrechen - sonst zieht der Text die
   ganze Spalte breit, obwohl die Zahl darüber schmal ist. */
.nur-klein { display: block; font-size: var(--t1); color: var(--blass);
             white-space: normal; font-weight: 400; }

/* --- Bausteine der Listen- und Formularseiten ------------------------------
   Diese Klassen sind älter als der Entwurf, meinen aber dasselbe. Sie stehen
   hier in dessen Sprache übersetzt, statt in zwanzig Vorlagen umbenannt zu
   werden - Umbenennen hätte nichts verbessert, nur Zeilen bewegt. */

.karte > h2 { margin-bottom: var(--a4); }
.zahl { font-weight: 500; white-space: nowrap; }
/* Das Währungszeichen tritt zurück: die Größenordnung soll zuerst gelesen
   werden. Nur an den großen Zahlen - in Listen bleibt es, wie es war. */
.waehrung { color: var(--blass); font-weight: 400; }
/* Lange Werte ohne Leerzeichen - etwa der Steuertarif als JSON - dürfen umbrechen,
   sonst schieben sie am Handy die ganze Seite nach rechts. */
.brechbar { white-space: normal; overflow-wrap: anywhere; }
.mono { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: var(--t1); }
.haben { color: var(--gruen); }
.soll { color: var(--rot); }
.messing { color: var(--orange); }   /* „in Arbeit" - im Entwurf ist das Orange */

/* Zahlenband: zwei bis vier Kennzahlen nebeneinander über einer Tabelle.
   Flexbox statt Raster, damit zwei Kennzahlen beieinanderstehen und nicht über
   die ganze Breite auseinandergezogen werden. */
/* Ein Raster statt einer Flexzeile: sonst rutscht die letzte Kennzahl je nach
   Textlänge in eine eigene Zeile und das Band sieht gebrochen aus. */
.band {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: var(--a4) var(--a6); margin-bottom: var(--a5);
}
/* Nach einem Absatz braucht das Zahlenband Luft, sonst klebt die erste
   Beschriftung am Text darüber. */
.hinweis + .band { margin-top: var(--a4); }
/* Dasselbe für eine Tabelle: die Kopfzeile klebte sonst am Hinweis darüber. */
.hinweis + .buch, .hinweis + .breit { margin-top: 14px; display: block; }
.band > * { min-width: 120px; }
/* Fußzeile einer langen Liste: links wo man steht, rechts die Seiten. */
/* Beispielzeilen zum Abtippen: Schrift mit fester Breite, eigener Grund. */
code {
  font: 400 var(--t1)/1.5 var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  background: var(--karte-2); border: 1px solid var(--rand); border-radius: var(--r-s);
  padding: 1px var(--a1);
}
pre.code {
  font: 400 var(--t1)/1.7 var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  background: var(--karte-2); border: 1px solid var(--rand);
  border-radius: var(--r-m); padding: var(--a3) var(--a4); margin: var(--a3) 0;
  overflow-x: auto; color: var(--text);
}
pre.code code { background: none; border: 0; padding: 0; }

/* Glocke im Fuß der Leiste - dieselbe Zeile wie ein Navigationspunkt. */
.glocke-leiste {
  display: flex; align-items: center; gap: var(--a3); margin: 0 var(--a3) var(--a1);
  padding: 0 var(--a3); border-radius: var(--r-m); color: var(--blass);
  font-size: var(--t3); font-weight: 500; min-height: var(--ziel);
}
.glocke-leiste:hover { background: var(--karte-2); color: var(--text); }
.konto-fuss a.kreis { text-decoration: none; }

/* Nachrichtenverlauf: eigene Beiträge rechts, fremde links - mehr braucht ein
   Zweiergespräch nicht. */
.verlauf { display: flex; flex-direction: column; gap: var(--a3); margin-bottom: var(--a5); }
.sprech {
  max-width: min(560px, 88%); padding: var(--a3) var(--a4); border-radius: var(--r-l);
  background: var(--karte-2); border: 1px solid var(--rand);
}
.sprech--ich { align-self: flex-end; background: var(--karte-3); }
.sprech .zeit { display: block; font-size: var(--t0); color: var(--blasser); }
.sprech p { margin: var(--a1) 0 0; white-space: pre-wrap; }

/* Der Haken einer Aufgabe ist ein Formular, aber er soll wie ein Kästchen wirken. */
.haken-form button { font-size: var(--t4); line-height: 20px; padding: 0 var(--a1);
                     min-height: var(--ziel-klein); }
.buch tr.neu td { background: rgba(85, 102, 242, 0.07); }

/* Die Rechte einer Rolle: viele kurze Haken, in Spalten statt untereinander. */
.rechte-raster {
  display: grid; gap: var(--a2) var(--a5); margin-bottom: var(--a4);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.rechte-raster .wahl-feld { align-items: flex-start; margin: 0; }
.rechte-raster .unterzeile { display: block; }

/* Sammelaktionen unter einer Liste: was mit den angehakten Zeilen geschieht. */
.sammel {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2) 12px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rand);
  font-size: var(--t2);
}
.sammel select { width: auto; min-width: 160px; }
.sammel .blass { font-size: var(--t1); }
/* Sammelauswahl ist Schreibtischarbeit - am Telefon nimmt sie nur die Breite,
   die der Betrag braucht. */
.buch th.haken-spalte, .buch td.haken-spalte { width: 34px; padding-right: 0; display: none; }
@media (min-width: 720px) {
  .buch th.haken-spalte { display: table-cell; }
  .buch td.haken-spalte { display: table-cell; }
}
.sammel { display: none; }
@media (min-width: 720px) { .sammel { display: flex; } }
.haken-spalte .wahl-feld { margin: 0; min-height: 34px; }

.blaettern {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2) 14px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rand);
  font-size: var(--t1);
}
/* Drei Mahnstufen untereinander sind drei Formulare - ohne Linie sieht man
   nicht, wo die eine aufhört. */
.stufe + .stufe { border-top: 1px solid var(--rand); padding-top: 16px; margin-top: 4px; }
/* Eine Belegnummer bricht nicht um: „2026-0001" ist ein Wort. */
.buch .fest { white-space: nowrap; }
/* Die Unterzeile der Nummernspalte darf umbrechen - aber zwischen den Wörtern,
   nicht im Datum: „2026-08-/28" liest sich wie ein Fehler. */
.buch .fest .nur-klein { white-space: normal; overflow-wrap: normal; hyphens: manual; }
/* Ein Verweis im Zahlenband ist ein Ziel, kein Fließtext. */
.band a { display: inline-flex; align-items: center; min-height: 34px; }
.kpi-v { font: 700 var(--t5)/24px var(--sans); letter-spacing: -0.02em; }
/* Ein Band mit mehr als vier Feldern bleibt bei der kleineren Stufe - sonst
   springt eine Zeile um, nur weil eine Zahl größer wurde. */
.band:has(> :nth-child(5)) .kpi-v { font-size: var(--t5); line-height: 24px; }

/* Listenzeile mit Beschriftung links und Wert rechts. */
.reihe {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--a1) 10px;
  padding: 9px 0; border-bottom: 1px solid var(--rand); font-size: var(--t3);
}
.reihe:last-of-type { border-bottom: 0; }
.eng { margin: 0; }
.liste { margin: 6px 0 0; padding-left: 18px; font-size: var(--t1); color: var(--blass); }

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

.anmelden { min-height: 100vh; display: grid; place-items: center; padding: var(--a5); }
.anmelden .karte { width: 100%; max-width: 350px; margin: 0; padding: var(--a6); }
.anmelden .marke { padding: 0 0 var(--a1); }
.anmelden .hinweis { margin-bottom: 20px; }

/* --- Ab Tablet ------------------------------------------------------------ */

@media (min-width: 720px) {
  /* Auf dem Tablet bleiben es zwei Spalten: vier Kennzahlen nebeneinander
     zwängen „10.015,00 €" in zwei Zeilen, und eine umgebrochene Zahl liest
     sich schlechter als eine Karte mehr untereinander. */
  .raster-3, .raster-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opt { display: table-cell; }
  .nur-klein { display: none; }
  main { padding: var(--a6) var(--a6) calc(var(--unten) + var(--a6)); }
  /* Am Handy ist der Titel eine Nummer kleiner - „Willkommen zurück, Chef"
     bräuchte sonst zwei Zeilen, bevor die Seite überhaupt anfängt. */
}

/* Nebenspalten hängen an der Breite der Karte, nicht an der des Fensters: eine
   fünfspaltige Tabelle in der schmalen Rasterspalte würde sonst abgeschnitten,
   obwohl das Fenster breit ist. Muss nach der Bildschirmregel oben stehen. */
.karte { container-type: inline-size; }
@container (max-width: 460px) {
  .opt { display: none; }
  /* In einer Spalte gibt es nichts zu überspannen: ein Feld über zwei Spalten
     schöbe sich sonst aus der Karte heraus. */
  .feld--breit, .feld--voll { grid-column: 1 / -1; }
  .nur-klein { display: block; }
  /* „Krankenversicherung" lässt sich nicht brechen und schiebt sonst die letzte
     Spalte aus der Karte - in der schmalen Spalte darf getrennt werden. */
  .buch td:first-child, .buch th:first-child { hyphens: auto; overflow-wrap: break-word; }
  .buch .nur-klein, .buch .unterzeile { hyphens: manual; }
}

/* --- Ab Rechner: Leiste links statt unten --------------------------------- */

@media (min-width: 1080px) {
  .app { display: grid; grid-template-columns: var(--leiste) minmax(0, 1fr); }
  /* Ohne Anmeldung gibt es keine Leiste - und keine Spalte dafür. */
  .app--offen { grid-template-columns: minmax(0, 1fr); }
  .leiste {
    display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
    /* Fester als die Karten: hier steht viel kleiner Text übereinander, und die
       Leiste liegt über dem hellsten Teil des Bildes. */
    background: color-mix(in srgb, #0c1017 var(--glas-fest), transparent);
    backdrop-filter: blur(28px) saturate(130%);
    -webkit-backdrop-filter: blur(28px) saturate(130%);
    border-right: 1px solid var(--rand); overflow-y: auto;
  }
  .unten-leiste { display: none; }
  main { padding: var(--a6) var(--a7) var(--a8); }
  .raster-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .raster-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .raster-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  /* Nebeneinander ist die Ringkarte höher. Statt das Diagramm zu strecken (eine
     verzerrte Kurve lügt über die Steigung) steht es mit seiner Beschriftung
     mittig im übrigen Platz. */
  .raster-2-1 .diagramm-block {
    flex: 1; display: flex; flex-direction: column; justify-content: center;
  }
  .raster-2-1 .diagramm { min-height: 190px; }
}

/* --- Aufklappen ------------------------------------------------------------
   Ein <details> springt von Natur aus auf. Mit `interpolate-size` darf der
   Browser von 0 auf „so hoch wie der Inhalt" überblenden, `@starting-style`
   gibt den Zustand davor, `allow-discrete` hält die Sichtbarkeit so lange an,
   bis die Bewegung fertig ist. Kennt ein Browser das nicht, klappt es sofort
   auf wie bisher. */
:root { interpolate-size: allow-keywords; }

details::details-content {
  block-size: 0; overflow: hidden; opacity: 0;
  transition: block-size var(--takt-lang) var(--kurve),
              content-visibility var(--takt-lang) allow-discrete,
              opacity var(--takt) var(--kurve);
}
details[open]::details-content { block-size: auto; opacity: 1; }
@starting-style { details[open]::details-content { block-size: 0; opacity: 0; } }

/* Das Blatt am Handy schiebt sich von unten herein, statt zu erscheinen. */
.mehr-blatt { animation: blatt-auf var(--takt-lang) var(--kurve); }
@keyframes blatt-auf {
  from { transform: translateY(12px); opacity: 0; }
}
/* Es ist ein Überbau, kein Kasten im Fluss - deshalb ohne die Regel oben. */
.mehr::details-content { block-size: auto; overflow: visible; opacity: 1; transition: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, ::details-content {
    transition: none !important; animation: none !important;
  }
}

/* --- Wenn Glas nicht geht --------------------------------------------------
   Ohne Weichzeichnung wäre eine halbdurchsichtige Fläche einfach ein Fenster
   auf das Bild: die Zahlen ständen dann auf Sanddünen. Deshalb wird sie in
   diesem Fall deckend, und das Bild bleibt trotzdem am Rand sichtbar. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glas: 100%; --glas-fest: 100%; }
}
/* Wer Durchsichtigkeit abbestellt hat, bekommt das Cockpit wie vorher: feste
   Flächen, kein Bild. Das ist keine Notlösung, sondern die Einstellung des
   Betriebssystems - und die zählt mehr als der Effekt. */
@media (prefers-reduced-transparency: reduce) {
  :root { --glas: 100%; --glas-fest: 100%; }
  body::before { display: none; }
}


/* ==========================================================================
   Kern - Zusätze zum billbase-Erbe. Alles oberhalb ist übernommen, alles
   hierunter gehört nur Kern: Netz, Chancen, Rollen, Beiträge, Personen.
   Reihenfolge: Bausteine, die überall vorkommen, zuerst; dann Seite für Seite.
   ========================================================================== */

/* --- Allgemeine Bausteine ------------------------------------------------- */

.lila { color: var(--lila); }
.tuerkis { color: var(--tuerkis); }

/* Verweise im Fließtext sind sichtbar; Verweise auf Karten, Zeilen und Knöpfen
   bleiben unauffällig - dort ist die ganze Fläche der Verweis. */
p a, .hinweis a, .leer a, .zusatz a, .fliesstext a, .titel a, .melden a {
  color: var(--indigo-hell); text-decoration: underline;
  text-underline-offset: 2px; text-decoration-color: rgba(125, 139, 255, 0.45);
}
p a:hover, .hinweis a:hover, .leer a:hover, .zusatz a:hover, .fliesstext a:hover,
.titel a:hover, .melden a:hover { text-decoration-color: currentColor; }

/* Das Paar aus Titel und Zusatz - der Kern jeder Zeile, jeder Karte, jeder
   Chance. Die Farbe steht in :where(), damit „zusatz rot" rot bleibt. */
.was { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; }
.titel { font-size: var(--t3); font-weight: 500; overflow-wrap: anywhere; }
.zusatz { font-size: var(--t1); line-height: 16px; overflow-wrap: anywhere; }
:where(.zusatz) { color: var(--blass); }
.zusatz strong { color: var(--text); font-weight: 600; }
.titel .pille, h1 .pille, h2 .pille { margin-left: var(--a2); vertical-align: middle; }
.neben { font-size: var(--t1); white-space: nowrap; }
:where(.neben) { color: var(--blass); }
.zeit { font-size: var(--t1); white-space: nowrap; flex: none; margin-left: auto; }
:where(.zeit) { color: var(--blass); }
a.zeile:hover .titel, a.chance:hover .titel, a.ereignis:hover .titel { color: var(--indigo-hell); }

/* Die eigene Zeile in einer Liste: leicht unterlegt, über die Kartenränder
   hinaus, damit die Fläche wie ein Streifen wirkt. */
.zeile--ich {
  background: rgba(85, 102, 242, 0.09); margin: 0 calc(var(--a3) * -1);
  padding-left: var(--a3); padding-right: var(--a3); border-radius: var(--r-s);
}
.zeile--storniert .titel, .zeile--storniert .betrag { text-decoration: line-through; color: var(--blass); }
.zeile--storniert { opacity: 0.75; }
.zeile .kreis--initialen { flex: none; }

/* Weitere Farben für Pillen - dieselbe Tönung wie die geerbten. */
.pille--orange { background: color-mix(in srgb, var(--orange) 18%, var(--karte)); color: var(--orange); }
.pille--tuerkis { background: color-mix(in srgb, var(--tuerkis) 18%, var(--karte)); color: var(--tuerkis); }
.pille--lila { background: color-mix(in srgb, var(--lila) 18%, var(--karte)); color: var(--lila); }
a.pille:hover { filter: brightness(1.15); }
/* Mehrere Pillen nebeneinander: keine darf den Rest nach rechts schieben. */
.rolle-kopf .pille, .kopf-aktionen .pille, .titel .pille, .zu-tun .pille,
.projekt-meta .pille, .person-kopf .pille { margin-left: 0; }
.kopf-aktionen .pille, .rolle-kopf a.pille { min-height: var(--ziel-klein); display: inline-flex; align-items: center; }

/* Ein Chip mit Zähler - und in Rot, wenn er auf Probleme zeigt. */
.chip-zahl {
  font-size: var(--t0); font-weight: 600; line-height: 16px; min-width: 18px;
  padding: 0 5px; border-radius: 999px; text-align: center;
  background: rgba(255, 255, 255, 0.08); color: var(--text);
}
.chip[aria-current] .chip-zahl { background: rgba(10, 13, 19, 0.28); color: #fff; }
.chip--rot { border-color: rgba(242, 107, 118, 0.5); color: var(--rot); }
.chip--rot .chip-zahl { background: rgba(242, 107, 118, 0.18); color: var(--rot); }
.chip--rot[aria-current] { background: var(--rot); border-color: var(--rot); color: var(--grund); }
.chip--rot[aria-current] .chip-zahl { background: rgba(10, 13, 19, 0.2); color: var(--grund); }
.chip b { font-weight: 600; color: var(--text); }
.chip[aria-current] b { color: #fff; }
/* Eine zweite Chipreihe direkt unter der ersten rückt an sie heran. */
.seite-kopf--zweite { margin-top: calc(var(--a6) * -1 + var(--a2)); }

/* Knöpfe in Zeilen: so breit wie ihr Text, nicht fest 120 px. */
.klein { width: auto; min-width: 120px; white-space: nowrap; }
form.inline { display: inline-flex; align-items: center; gap: var(--a2); margin: 0; }
details.inline { display: inline-block; }
details.inline > summary { list-style: none; cursor: pointer; }
details.inline > summary::-webkit-details-marker { display: none; }
.leise-link {
  color: var(--blass); font-size: var(--t2); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: rgba(148, 157, 177, 0.45);
  display: inline-flex; align-items: center; min-height: var(--ziel-klein);
}
.leise-link:hover { color: var(--text); text-decoration-color: currentColor; }
.aktionen-eng { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2) var(--a3);
                margin-top: var(--a3); font-size: var(--t1); }
.aktionen-eng .neben { white-space: normal; }
form.inline.aktionen-eng { margin-top: 0; }

/* Zugeklappter Text in einer Zeile: „ganzen Text zeigen" als leiser Verweis. */
.klapp > summary {
  list-style: none; cursor: pointer; color: var(--indigo-hell); font-size: var(--t1);
  display: inline-flex; align-items: center; min-height: 34px;
}
.klapp > summary::-webkit-details-marker { display: none; }
.klapp > summary::after { content: " ›"; display: inline-block; margin-left: 3px;
                          transition: transform var(--takt) var(--kurve); }
.klapp[open] > summary::after { transform: rotate(90deg); }
.klapp[open] > summary { margin-bottom: var(--a1); }
.fliesstext { margin: 0; font-size: var(--t3); line-height: 22px; white-space: pre-line;
              overflow-wrap: anywhere; max-width: 78ch; }
.zusatz .fliesstext, .klapp .fliesstext { font-size: var(--t2); line-height: 20px; color: var(--text); }
h3.abschnitt { margin-top: var(--a4); }
h3.abschnitt:first-child { margin-top: 0; }

/* Kartenvarianten */
.karte--schmal { max-width: 720px; }
.karte--filter { padding: var(--a4) var(--a5); }
.karte--filter .reihe-felder { margin: 0; }
.karte--filter .feld { margin-bottom: 0; }
.karte--auflagen { border-color: rgba(240, 145, 63, 0.45); }
.karte--auflagen .karte-kopf .sym { color: var(--orange); }

/* Auswahl per Radios in einer Reihe - das Fieldset ist unsichtbar. */
.wahl-reihe { border: 0; padding: 0; margin: 0 0 var(--a3); display: flex; flex-wrap: wrap;
              gap: 0 var(--a2); min-width: 0; }
.wahl-reihe legend { display: block; font-size: var(--t1); font-weight: 500; color: var(--blass);
                     margin-bottom: var(--a1); padding: 0; }
.wahl-reihe .wahl-feld { margin-right: var(--a3); }

/* Zahlenband mit Beschriftung, Zahl und Nebensatz übereinander. */
.band--zahlen > * { display: flex; flex-direction: column; }
.band--zahlen .kpi-v { display: block; }
.band--zahlen small { font-size: var(--t1); line-height: 16px; margin-top: 2px; }
:where(.band--zahlen small) { color: var(--blass); }
.band--zahlen .hinweis { margin-top: 2px; }
.kpi-v--text { font-size: var(--t3); font-weight: 500; line-height: 24px; letter-spacing: 0;
               overflow-wrap: anywhere; }

/* Ein Token, das nur einmal erscheint: breit, kopierbar, deutlich. */
.token-neu { display: flex; flex-direction: column; gap: var(--a2); align-items: flex-start; }
.token-neu .token { display: block; width: 100%; overflow-wrap: anywhere; user-select: all;
                    color: var(--text); }
.token-klein { font-size: var(--t0); background: var(--karte-2); padding: 1px 6px;
               border-radius: 6px; color: var(--text); }
.parameter-liste { display: grid; gap: var(--a2); }

/* Symbolwahl: eine Reihe Kacheln, die gewählte mit Indigo-Rand. */
.symbolwahl { border: 0; padding: 0; margin: 0 0 var(--a3); display: flex; flex-wrap: wrap;
              gap: var(--a2); min-width: 0; }
.symbolwahl legend { font-size: var(--t1); font-weight: 500; color: var(--blass);
                     margin-bottom: var(--a1); padding: 0; }
.symbol-opt {
  width: var(--ziel); height: var(--ziel); display: grid; place-items: center; font-size: 20px;
  border-radius: var(--r-m); border: 1px solid var(--rand); background: var(--karte-2);
  cursor: pointer; margin: 0; position: relative;
}
.symbol-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.symbol-opt:hover { border-color: var(--rand-stark); background: var(--karte-3); }
.symbol-opt:has(:checked) { border-color: var(--indigo-hell); background: rgba(85, 102, 242, 0.18);
                            box-shadow: 0 0 0 1px var(--indigo-hell) inset; }
.symbol-opt:has(:focus-visible) { outline: 2px solid var(--indigo-hell); outline-offset: 2px; }

/* --- Kreise mit Initialen, Symbole der Projekte ---------------------------- */

.kreis--initialen {
  width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font: 600 12px/1 var(--sans); color: #fff; letter-spacing: 0.02em;
  background: linear-gradient(140deg, var(--indigo-hell), var(--indigo));
}
.kreis--gross { width: 44px; height: 44px; font-size: 15px; }
.kreis--riesig { width: 64px; height: 64px; font-size: 22px; }
.person-karte--still .kreis--initialen, .person-eintrag--still .kreis--initialen {
  background: var(--karte-3); color: var(--blass);
}

.projekt-symbol, .chance-symbol {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center; line-height: 1;
  font-size: 20px; border-radius: var(--r-m); border: 1px solid var(--rand);
  background: var(--karte-2);
}
.projekt-symbol--gross { width: 56px; height: 56px; font-size: 28px; border-radius: var(--r-l); }
.projekt-symbol--klein { width: 28px; height: 28px; font-size: 14px; border-radius: var(--r-s); }
.projekt-symbol--aktiv { background: rgba(58, 196, 125, 0.14); border-color: rgba(58, 196, 125, 0.35); }
.projekt-symbol--genehmigt { background: rgba(85, 102, 242, 0.16); border-color: rgba(85, 102, 242, 0.4); }
.projekt-symbol--vorschlag { background: rgba(164, 130, 248, 0.14); border-color: rgba(164, 130, 248, 0.35); }
.projekt-symbol--ressource { background: rgba(53, 194, 200, 0.14); border-color: rgba(53, 194, 200, 0.35); }
.projekt-symbol--zurueckgestellt, .projekt-symbol--pausiert { filter: grayscale(0.7); opacity: 0.8; }
.projekt-symbol--abgelehnt, .projekt-symbol--beendet { filter: grayscale(1); opacity: 0.6; }
.symbol-kachel--tuerkis { background: rgba(53, 194, 200, 0.16); color: var(--tuerkis); }
.symbol-kachel--rot { background: rgba(242, 107, 118, 0.16); color: var(--rot); }

/* --- Köpfe von Projekt und Person ----------------------------------------- */

.projekt-kopf, .person-profil { align-items: flex-start; }
.projekt-kopf .gruss, .person-profil .gruss { flex: 1 1 260px; min-width: 0; }
.projekt-kopf .kopf-aktionen, .person-profil .kopf-aktionen { align-self: center; }
.kopfzeile h1 .pille { display: inline-block; line-height: 16px; }
.projekt-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--a1) var(--a4);
  margin: var(--a2) 0 0; font-size: var(--t2);
}
:where(.projekt-meta) { color: var(--blass); }
.kopfzeile .gruss .projekt-meta { font-size: var(--t2); margin-top: var(--a2); }
.projekt-meta > * { display: inline-flex; align-items: center; gap: var(--a1); min-height: 24px; }
.projekt-meta .sym { width: 14px; height: 14px; flex: none; }
/* Verweise in Zeilen sind am Handy Tippziele: die Fläche wächst nach oben und
   unten, die Zeile nicht (bei Inline-Verweisen trägt Padding nicht zur Zeilenhöhe
   bei, bei den Inline-Flex-Kindern hebt der negative Rand es auf). */
.zeile .was a, .chance .was a { padding: 10px 0; }
.projekt-meta a { padding: 10px 0; margin: -10px 0; }
.projekt-meta a:hover { color: var(--text); }
.projekt-meta .pille { min-height: 0; }
.person-faehigkeiten { margin: 0; font-size: var(--t2); line-height: 20px; overflow-wrap: anywhere; }
.kopfzeile .gruss .person-faehigkeiten { margin-top: var(--a2); color: var(--text); max-width: 70ch; }

/* --- Board ---------------------------------------------------------------- */

/* „Zu tun" der Verwaltung: ein Band aus Chips mit Zählern; leer bleibt es still. */
.zu-tun:not(.zu-tun--leer) { border-color: rgba(85, 102, 242, 0.45); }
.zu-tun--leer .karte-kopf { margin-bottom: 0; }
.zu-tun-band { display: flex; flex-wrap: wrap; gap: var(--a2); }
.zu-tun-band .chip { padding: 0 var(--a3) 0 var(--a4); }

/* Aufgaben: ein Kästchen zum Abhaken, Titel, Fälligkeit rechts. */
.aufgabe { display: flex; align-items: flex-start; gap: var(--a3); padding: var(--a2) 0;
           border-bottom: 1px solid var(--rand); }
.aufgabe:last-of-type { border-bottom: 0; }
.aufgabe form { display: flex; flex: none; margin: 0; }
.haken-knopf {
  width: 34px; height: 34px; min-height: 0; padding: 0; border-radius: var(--r-s);
  font-size: var(--t2); color: var(--gruen);
}
.aufgabe--erledigt .titel { text-decoration: line-through; color: var(--blass); font-weight: 400; }
.aufgabe--erledigt .haken-knopf { background: rgba(58, 196, 125, 0.16); border-color: rgba(58, 196, 125, 0.35); }
.aufgabe .zeit { margin-top: 5px; }
.aufgabe .zusatz .mono { font-size: var(--t0); }

.firma-zeile .band { margin-bottom: 0; }
.netz-karte { padding: var(--a4); }
.netz-karte .karte-kopf { margin-bottom: var(--a3); }
.netz-karte--gross { padding: var(--a4) var(--a4) var(--a3); }

/* Chancen: Symbol des Projekts, Rolle mit Vergütung, Knopf rechts. */
.chance { display: flex; align-items: center; gap: var(--a3); padding: var(--a2) 0;
          border-bottom: 1px solid var(--rand); }
.chance:last-of-type { border-bottom: 0; }
.chance--zeile { align-items: flex-start; padding: var(--a3) 0; }
.chance--zeile .chance-symbol { margin-top: 2px; }
.chance--admin { background: linear-gradient(90deg, rgba(240, 145, 63, 0.1), transparent 55%);
                 margin: 0 calc(var(--a3) * -1); padding-left: var(--a3); padding-right: var(--a3);
                 border-radius: var(--r-s); }
.chance-ziel { margin: var(--a1) 0 0; font-size: var(--t2); line-height: 20px; color: var(--text);
               max-width: 70ch; overflow-wrap: anywhere; }
.chance .hinweis { margin-top: var(--a1); }
.chance-aktion { margin-left: auto; flex: none; align-self: center; display: flex; align-items: center; }
.chance-aktion form { margin: 0; }
.chance .pille { margin-left: 0; }

/* Ereignisse: kurze Zeilen, im Protokoll mit fester Zeitspalte vorn. */
.ereignis { display: flex; align-items: flex-start; gap: var(--a3); padding: var(--a2) 0;
            border-bottom: 1px solid var(--rand); }
.ereignis:last-of-type { border-bottom: 0; }
.ereignis--protokoll .zeit { margin-left: 0; width: 118px; flex: none; color: var(--blasser);
                             margin-top: 2px; }
.ereignis--protokoll .titel { font-weight: 400; }
.ereignis .zusatz .mono { font-size: var(--t0); }

/* Rangliste */
.platz { width: 26px; flex: none; text-align: center; font: 700 var(--t3)/1 var(--sans);
         color: var(--blass); font-variant-numeric: tabular-nums; }
.platz--1 { color: #f0c14b; }
.platz--2 { color: #c3ccdc; }
.platz--3 { color: #d59a67; }
.rang-zeile .betrag { font-variant-numeric: tabular-nums; }

/* --- Projekte: Liste und Seite -------------------------------------------- */

.projekt-karte { gap: var(--a3); transition: border-color var(--takt) var(--kurve),
                                             transform var(--takt) var(--kurve); }
.projekt-karte:hover { border-color: var(--rand-stark); transform: translateY(-1px); }
.projekt-karte .karte-kopf { margin-bottom: 0; }
.projekt-karte .karte-kopf h2 { flex: 1 1 auto; min-width: 0; }
.projekt-ziel { margin: 0; font-size: var(--t2); line-height: 20px; color: var(--blass);
                overflow-wrap: anywhere; }
.projekt-karte .projekt-meta { margin-top: 0; font-size: var(--t1); }
.projekt-karte .projekt-meta > * { min-height: 20px; }
.projekt-band { margin: auto 0 0; padding-top: var(--a3); border-top: 1px solid var(--rand);
                grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a2) var(--a3); }
.projekt-band > * { min-width: 0; }
.projekt-band .zahl { font-size: var(--t3); font-weight: 600; line-height: 20px; }
.projekt-band label { margin-bottom: 0; }
a.zeile.projekt-zeile .zusatz { white-space: normal; }

/* Rollen: eine Fläche je Rolle, Kopf mit Pillen, Fuß mit Handlung. */
.rolle { background: var(--karte-2); border: 1px solid var(--rand); border-radius: var(--r-m);
         padding: var(--a4); margin-bottom: var(--a3); }
.rolle:last-of-type { margin-bottom: 0; }
.rolle--zu { opacity: 0.72; }
.rolle-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2); }
.rolle-kopf .titel { font-size: var(--t4); font-weight: 600; margin-right: var(--a1); }
.rolle-verguetung { margin-top: var(--a1); font-size: var(--t2); font-weight: 500; color: var(--gruen); }
.rolle--zu .rolle-verguetung { color: var(--blass); }
.rolle-ziel { margin: var(--a2) 0 0; font-size: var(--t2); line-height: 20px; overflow-wrap: anywhere; }
.rolle .hinweis { margin-top: var(--a2); }
.rolle-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2) var(--a3);
              margin-top: var(--a3); }
.rolle-fuss:empty { display: none; }
.rolle-fuss .neben { margin-right: auto; }
.einsetzen .reihe-felder { margin-top: var(--a2); }
.reihe-felder--eng { gap: var(--a2) var(--a3); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.reihe-felder--eng .feld { margin-bottom: 0; }
.reihe-felder--eng .klein { align-self: end; }

/* Bewerbungen und Beiträge, mit Prüfzeile darunter. */
.bewerbung { flex-wrap: wrap; }
.beitrag { border-bottom: 1px solid var(--rand); padding-bottom: var(--a2); }
.beitrag:last-of-type { border-bottom: 0; padding-bottom: 0; }
.beitrag > .zeile { border-bottom: 0; }
.beitrag--abgelehnt .titel { color: var(--blass); }
.beitrag--bestaetigt .betrag { color: var(--gruen); }
.pruefen, .pruefen-felder { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2); }
.pruefen { margin: 0 0 var(--a2) 46px; }
.pruefen input, .pruefen select, .pruefen-felder input, .pruefen-felder select {
  width: auto; flex: 1 1 160px; min-height: var(--ziel-klein); font-size: var(--t2);
}
.pruefen select { flex: 0 1 160px; }
.pruefen .klein { min-width: 0; }
.pruefen button.leise { min-height: var(--ziel-klein); }
.pruefen-felder { margin-left: auto; flex: 1 1 100%; padding-left: 46px; }
.pruefen-felder input[type="date"] { flex: 0 1 150px; }
.anforderung { flex-wrap: wrap; }
.anforderung .was { flex: 1 1 240px; }
.anforderung .titel { font-weight: 400; }
.anforderung .titel strong { font-weight: 600; }

/* Kommentare */
.kommentar-neu { display: flex; gap: var(--a2); align-items: flex-end; margin-bottom: var(--a4); }
.kommentar-neu textarea { flex: 1 1 auto; max-width: none; min-height: 56px; }
.kommentar { display: flex; align-items: flex-start; gap: var(--a3); padding: var(--a2) 0;
             border-bottom: 1px solid var(--rand); }
.kommentar:last-of-type { border-bottom: 0; }
.kommentar .kreis--initialen { margin-top: 2px; }
.kommentar .fliesstext { margin-top: 2px; font-size: var(--t2); line-height: 20px; }

.baustein-zeile { flex-wrap: wrap; }
.baustein-zeile .aktionen-eng { margin-top: 0; }

/* Messwerte: ein Verlauf je Art, Zahl des Monats groß. */
.messwerte { display: grid; gap: var(--a4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.messwert { background: var(--karte-2); border: 1px solid var(--rand); border-radius: var(--r-m);
            padding: var(--a3) var(--a4); min-width: 0; }
.messwert-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--a1) var(--a2);
                 margin-bottom: var(--a2); }
.messwert-kopf .titel { text-transform: capitalize; }
.messwert-kopf .kpi-v { font-size: var(--t5); line-height: 24px; margin-left: auto; }
.messwert-kopf .zusatz { flex: 1 1 100%; }
.messwert-verlauf { display: block; width: 100%; height: 64px; }
.messwert-fuss { display: flex; justify-content: space-between; gap: var(--a2);
                 font-size: var(--t0); color: var(--blasser); margin-top: var(--a1); }
.messwert .hinweis { margin-top: var(--a1); }

/* Zähl-Links: drei Zahlen rechts, jede mit ihrer Beschriftung darunter. */
.link-zeile { flex-wrap: wrap; }
.link-zeile .was { flex: 1 1 240px; }
.link-zahlen { display: flex; gap: var(--a4); margin-left: auto; flex: none; }
.link-zahlen .zahl { display: flex; flex-direction: column; align-items: flex-end; min-width: 44px;
                     font-variant-numeric: tabular-nums; }
.link-zahlen strong { font-size: var(--t3); font-weight: 600; line-height: 18px; }
.link-zahlen small { font-size: var(--t0); color: var(--blasser); line-height: 14px; }

/* --- Personen ------------------------------------------------------------- */

.personen .person-karte { gap: var(--a3); }
.person-karte:hover { border-color: var(--rand-stark); }
.person-karte--still { opacity: 0.7; }
.person-kopf { display: flex; align-items: center; gap: var(--a3); }
.person-kopf .titel { font-size: var(--t4); font-weight: 600; }
.person-karte .person-faehigkeiten {
  color: var(--blass); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.person-projekte { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2);
                   margin: auto 0 0; padding-top: var(--a3); border-top: 1px solid var(--rand); }
.person-projekte .zusatz { display: inline; }

/* Verwaltung: eine Person je Klappzeile, das Formular darunter. */
.person-eintrag { border-bottom: 1px solid var(--rand); }
.person-eintrag:last-of-type { border-bottom: 0; }
.person-eintrag > summary.zeile { list-style: none; cursor: pointer; border-bottom: 0; }
.person-eintrag > summary::-webkit-details-marker { display: none; }
.person-eintrag > summary:hover .titel { color: var(--indigo-hell); }
.person-eintrag--still > summary .titel { color: var(--blass); }
.person-form { margin: var(--a2) 0 var(--a4) 46px; }
.person-eintrag .aktionen-eng { margin: 0 0 var(--a3) 46px; }
.person-zeile .zusatz { white-space: normal; }

/* Zeilen der Verwaltung: Anträge mit Statusstreifen links, Probleme rot. */
.antrag { flex-wrap: wrap; border-left: 3px solid var(--rand-stark); padding-left: var(--a3); }
.antrag--offen { border-left-color: var(--indigo-hell); }
.antrag--in_arbeit { border-left-color: var(--orange); }
.antrag--erledigt { border-left-color: var(--gruen); }
.antrag--abgelehnt { border-left-color: var(--rot); opacity: 0.75; }
.antrag .pruefen { margin-left: 0; flex: 1 1 100%; }
.problem .pille--rot { margin-left: 0; }
.problem:hover .titel { color: var(--rot); }

/* --- Das Netz ------------------------------------------------------------- */

.netz { position: relative; }
.netz-flaeche {
  display: block; width: 100%; height: auto; aspect-ratio: 1000 / 700; max-height: 72vh;
  touch-action: none; cursor: grab; user-select: none; border-radius: var(--r-m);
  background: radial-gradient(ellipse at center, rgba(85, 102, 242, 0.08), transparent 68%);
}
.netz--klein .netz-flaeche { max-height: 360px; }
.netz-flaeche--schiebt { cursor: grabbing; }
.netz--lebt .knoten { cursor: grab; }
.knoten--zieht { cursor: grabbing; }
/* Unsichtbare Trefferfläche je Knoten: das Netz ist auf 1000 Einheiten gezeichnet
   und am Handy auf etwa ein Drittel verkleinert (Maßstab 0,32, am Rechner 0,5 bis
   0,86) - der CSS-Radius in Einheiten hält das Tippziel überall bei 36 px und mehr. */
.knoten .treffer { fill: transparent; r: 36px; }
@media (max-width: 720px) { .knoten .treffer { r: 56px; } }
.knoten .hof { fill: transparent; transition: fill var(--takt) var(--kurve); }
.knoten:hover .hof, .knoten--zieht .hof, .knoten:focus-visible .hof { fill: rgba(255, 255, 255, 0.07); }
.knoten:focus-visible { outline: none; }
.knoten .kreis { stroke: var(--grund); stroke-width: 2; }
.knoten--firma .kreis { fill: var(--indigo); }
.knoten--projekt .kreis { fill: var(--gruen); }
.knoten--projekt.knoten--genehmigt .kreis { fill: var(--indigo-hell); }
.knoten--projekt.knoten--pausiert .kreis { fill: var(--blasser); }
.knoten--ressource .kreis { fill: var(--tuerkis); }
.knoten--person .kreis { fill: var(--karte-3); stroke: var(--blasser); stroke-width: 1.5; }
.knoten text { text-anchor: middle; font-family: var(--sans); fill: var(--text); pointer-events: none; }
.knoten .zeichen { dominant-baseline: central; fill: #fff; font-weight: 700; }
.knoten--firma .zeichen { font-size: 30px; }
.knoten .name { font-size: 13px; font-weight: 500; }
.knoten .zahl { font-size: 11px; font-weight: 400; fill: var(--blass); }
.knoten--person .name { font-size: 11px; fill: var(--blass); }
.knoten:hover .name { fill: var(--indigo-hell); }
.netz--klein .knoten .name { font-size: 16px; }
.netz--klein .knoten .zahl { font-size: 13px; }

/* Kanten: die Farbe steht in einer Variablen, damit Linie und Legendenstrich
   dieselbe Quelle haben. Ohne Farbe: Firma → Projekt in Indigo, Person → Projekt
   gestrichelt und blass. */
.kante--tuerkis { --kante: var(--tuerkis); }
.kante--gruen { --kante: var(--gruen); }
.kante--indigo { --kante: var(--indigo-hell); }
.kante--lila { --kante: var(--lila); }
.kante--orange { --kante: var(--orange); }
.kante--firma { --kante: rgba(85, 102, 242, 0.45); }
.kante--person { --kante: rgba(148, 157, 177, 0.35); stroke-dasharray: 4 5; }
line.kante { stroke: var(--kante, var(--rand-stark)); stroke-width: 1.5; stroke-linecap: round; }
line.kante--traffic, line.kante--umsatz, line.kante--dienst, line.kante--inhalt,
line.kante--abhaengigkeit { stroke-width: 2.5; stroke-opacity: 0.85; }
line.kante--firma { stroke-width: 2; }

.netz-legende { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a1) var(--a4);
                margin-top: var(--a3); font-size: var(--t1); color: var(--blass); }
.netz-legende > span { display: inline-flex; align-items: center; gap: var(--a2); min-height: 24px; }
.knoten-punkt { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.knoten-punkt--firma { background: var(--indigo); }
.knoten-punkt--projekt { background: var(--gruen); }
.knoten-punkt--ressource { background: var(--tuerkis); }
.knoten-punkt--person { background: var(--karte-3); box-shadow: 0 0 0 1.5px var(--blasser) inset; }
.kante-strich { width: 18px; height: 0; display: inline-block; flex: none;
                border-top: 2px solid var(--kante, var(--rand-stark)); }
.netz-hilfe { margin-left: auto; color: var(--blasser); }
.netz--fehler::after {
  content: "Lage nicht gespeichert"; position: absolute; top: var(--a2); right: var(--a2);
  font-size: var(--t1); font-weight: 500; color: var(--rot); padding: var(--a1) var(--a3);
  border-radius: 999px; background: rgba(242, 107, 118, 0.15);
}

/* --- Breite Bildschirme --------------------------------------------------- */

@media (min-width: 720px) {
  .pruefen { margin-left: 0; }
  .pruefen-felder { flex: 1 1 auto; padding-left: 0; justify-content: flex-end; }
  .pruefen-felder input, .pruefen-felder select { flex: 0 1 200px; }
  .anforderung .was { flex: 1 1 320px; }
  .kommentar-neu textarea { min-height: 44px; }
}
@media (min-width: 1080px) {
  .raster-3.personen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .netz-karte--gross .netz-flaeche { max-height: calc(100vh - 300px); min-height: 420px; }
}
@media (prefers-reduced-motion: reduce) {
  .projekt-karte:hover { transform: none; }
}