/* myblank Finanzplanung — Stylesheet, ausgelagert am 29.09.2026 (Befund 10 des Debuggings).
   Quelle bleibt index.php im Quellordner; diese Datei entsteht aus ihr bei der Auslieferung.
   Zwischen Teil A und Teil B steht in der Seite ein kleiner Block, den PHP aus den Themenfeldern schreibt. */

/* DIE BUCHUNGSSCHRIFT.
   Christian am 13.09.2026: „eine andere Schriftart für die Buchungen … sehr
   sachlich, das verwenden Banken oft … sehr technisch … wie früher
   Schreibmaschinenschrift … man hat das Gefühl, es ist wie eine Buchung."
   Entschieden nach Schriftprobe (System, IBM Plex Mono, JetBrains Mono,
   Courier Prime, Source Code Pro): „IBM Plex Mono bitte verwenden für alle
   Buchungen." Nichtproportional: jedes Zeichen gleich breit, Ziffern
   stehen von selbst untereinander. Liegt als Datei bei der Anwendung
   (schrift-plexmono-*.woff2, SIL Open Font License 1.1), kein fremder
   Server. Nur die BUCHUNGSZEILEN tragen sie — Tag, Name, Betrag —, der
   Rest der Anwendung bleibt in der Systemschrift. */
@font-face{font-family:'Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url(schrift-plexmono-400.woff2) format('woff2')}
@font-face{font-family:'Plex Mono'; font-style:italic; font-weight:400; font-display:swap; src:url(schrift-plexmono-400i.woff2) format('woff2')}
@font-face{font-family:'Plex Mono'; font-style:normal; font-weight:600; font-display:swap; src:url(schrift-plexmono-600.woff2) format('woff2')}
:root{
  --schrift:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  --schrift-buchung:'Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* DER BUCHUNGSSATZ, AN EINER STELLE FESTGELEGT (18.09.2026, Gesetz 31).
     Christian: „Die Bezeichnungen … müssen die Schriftart der Einnahmen und Ausgaben tragen.
     Die ist genau festgelegt … Passe es an, das ist ein Befehl. Und verankere es im Corporate
     Design." GEMESSEN an `ol.buliste li.bu`, dem Maßstab: Bezeichnung 13 px/400, Betrag
     14 px/500 mit tabellarischen Ziffern, Beiwerk (Tag, Zusatz) 12 px/400 — alles Plex Mono.
     Wer eine Buchung zeigt, nimmt diese Stellvertreter; dann kann es nicht auseinanderlaufen. */
  --buchschrift:var(--schrift-buchung);
  --buchgrad:13px; --buchgradwert:14px; --buchgradbei:12px;
  /* DIE KOMPAKTE STUFE DESSELBEN SATZES (18.09.2026). Christian: „Die Schriftgröße bei der
     Monatsdarstellung … ist ein bisschen kleiner als das, was unter Mein Stand ist. Deshalb
     würde ich die Buchungen bei Mein Stand von der Schriftgröße zusammen mit den
     Buchungszahlen auch kleiner machen … dann ist das nicht so gedrungen, das Modul ist
     ziemlich gequetscht. Es soll ja nur eine schnelle Information sein, was da so ansteht."
     Dieselbe Familie, dieselben Schnitte, EINE Stufe kleiner — für Karten, die einen
     Überblick geben, nicht zum Arbeiten da sind. Keine zweite Pflegestelle: Diese Werte
     stehen hier neben den grossen, nicht in einem Modul. */
  --buchgradk:12px; --buchgradwertk:12.5px; --buchgradbeik:12px;
  /* ANMUTUNG „WIE MACOS" (15.09.2026, Fassung o). Christian: „Momentan fühlt sich die ganze Sache noch zu sehr an
     wie eine Webseite. Ich würde es lieber als Applikation haben wollen … es fühlt sich sehr kalt an … orientiere
     dich bitte mal an Apple, wie würde Apple das Betriebssystem machen." Zwei Holz-Entwürfe hat er verworfen
     („das Braun holt mich nicht ab"), den dritten gewählt: Systemgrau statt Blaugrau als Grund, Karten mit
     Haarlinie und weichem, tiefem Schatten statt sichtbarem Rahmen, große Radien — und die Person als
     Akzentfarbe des ganzen Blatts (siehe „DIE PERSON IST DER AKZENT" unten). */
  /* Ein Hauch Creme statt Grau — Christian: „etwas mehr Wärme". Apples Systemgrau (#F5F5F7) um einen Hauch
     Warmton gedreht; Haarlinie und Schatten in warmem Braungrau statt Schwarz. */
  --grundrein:#F6F3EE; --grund:var(--grundrein);
  --flaeche:#FFFFFF; --flaeche2:#F1EDE6;
  /* GEMESSEN 15.09.2026: `--flaeche2` (#F1EDE6) liegt nur drei Helligkeitsstufen
     ueber dem Grund (#F6F3EE) — als Hervorhebung unsichtbar. `--markiert` ist die
     Flaeche fuer „hierauf zeige ich gerade": deutlich abgesetzt, ohne zu schreien. */
  --markiert:#E4EBEE;
  /* Eine Karte, eine Quelle: Haarlinie, Radius und Schatten stehen EINMAL hier. */
  --karterand:1px solid rgba(60,45,30,.07); --karteradius:20px;
  --karteschatten:0 1px 2px rgba(60,45,30,.04), 0 16px 40px -28px rgba(60,45,30,.28);
  /* SCHRIFT AUF FARBE — EINE Quelle (15.09.2026, Fassung q). Der Akzent und die Personenfarben sind in der hellen
     Fassung DUNKEL (weisse Schrift) und in der dunklen Fassung HELL (dunkle Schrift). Wer eine farbige Flaeche baut,
     nimmt --aufakzent und schreibt nie #fff hin — sonst steht die Schrift in der dunklen Fassung hell auf hell.
     Christian am 15.09.2026: „dann muss es invertiert werden, was die Schrift angeht … kaum lesbar." */
  --aufakzent:#FFFFFF;
  /* EINE SPRACHE FUER „GEWAEHLT" (16.09.2026, Fassung r). Der grosse Durchgang fand acht verschiedene
     Antworten auf dieselbe Frage — Akzentflaeche mit weisser Schrift, weisse Flaeche mit blauem Text,
     weisse Pille mit dunklem Text, beige Flaeche ohne Schatten —, dazu sechs verschiedene Radien.
     Christian: „dieselbe Handlung sieht ueberall gleich aus." Es gibt genau zwei Gattungen:
     (A) SCHALTER IN EINER LEISTE — Konten, Ebenen, Jahre, Zeitfenster, Sichten, Reiter: die gewaehlte
         Pille traegt die Akzentflaeche und --aufakzent, die Leiste den Ruhegrund.
     (B) GEWAEHLTE SPALTE IN EINER DATENREIHE — die zwoelf Monate, die Haushaltsmonate: dort waere ein
         voller Farbblock zu schwer; die Spalte wird unterlegt und traegt unten die Akzentkante.
     Wer eine neue Wahl baut, nimmt eine der beiden — keine dritte. */
  --wahlleiste:12px;   /* Radius der Leiste  */
  --wahl:10px;         /* Radius der Pille darin */
  /* DREI KNOPFGROESSEN, NICHT NEUNZEHN (16.09.2026, Fassung r). Gemessen fand der grosse Durchgang
     19 verschiedene Knopfhoehen; allein auf der Steuerseite standen 43, 44 und 46 px nebeneinander,
     bei vier verschiedenen Innenabstaenden. Apple hat drei Groessen. Hier auch:
       --knopf-klein  34px — Nebenhandlung in einer Zeile („ändern", „Messen")
       --knopf        44px — der Normalfall; zugleich Apples Mindesttrefferflaeche
       --knopf-gross  52px — die eine Haupthandlung eines Formulars
     Die Hoehe steht am Knopf, nicht im Innenabstand: so bleibt sie gleich, egal wie gross die Schrift
     im Knopf ist. Wer eine vierte Groesse braucht, braucht sie nicht. */
  --knopf-klein:34px; --knopf:44px; --knopf-gross:52px;
  /* DIE SCHRIFT HOERT BEI 11,5 px AUF (16.09.2026, Fassung r). Der grosse Durchgang fand 18 Stellen mit
     10 bis 11 px — Monatsbeschriftungen, Kacheltitel, Stationsnamen. Kleiner als 11,5 px wird in dieser
     Anwendung nichts mehr gesetzt; einzige Ausnahme sind Initialen in den Personenkreisen, die Grafik
     sind und kein Text. Wer eine Zahl kleiner braucht, braucht weniger Text an der Stelle. */
  /* Das Material der schwebenden Leiste (Kopf): durchscheinend, weichgezeichnet. */
  --material:rgba(255,255,255,.66); --materialrand:rgba(60,45,30,.08);
  /* Womit der Personenton gemischt wird und wie stark — siehe unten bei
     „DER GRUND TRAEGT DIE PERSON". Hell wird in die Flaeche gemischt,
     weil die Personenfarben hier DUNKLER sind als der Grund. */
  --grundmisch:var(--flaeche); --ptonstark:5%;   /* seit der Anmutung „wie macOS" (15.09.2026) nur noch ein Hauch — die Person trägt jetzt der Akzent, nicht der Grund */
  /* DIE DRITTE TINTE TRAEGT DIE HAELFTE DES TEXTES (16.09.2026 gemessen, Fassung r).
     Grosser Durchgang ueber zehn Seiten, sechs Breiten, hell und dunkel: 56 von 62 Kontrastbefunden
     kamen aus EINER Farbe — --tinte3 stand bei 3,14 : 1 (hell) und 3,35 : 1 (dunkel), lesbar ist ab
     4,5 : 1. Betroffen war alles Erklaerende: Kacheltitel, Zeitangaben, Hilfssaetze, Tabellenkoepfe.
     Jetzt 5,44 : 1 auf Weiss, 4,66 : 1 auf der Kachel, 4,91 : 1 auf dem Grund. Wer sie heller macht,
     macht die halbe Anwendung wieder unlesbar. */
  --tinte:#1E1B18; --tinte2:#55514C; --tinte3:#6E6963;
  /* DER AKZENT IST INES' GRÜN — an der QUELLE, nicht als Ausnahme (17.09.2026).
     Christian: „Generell alle Buttons von Petrol auf Grün ändern.“ Vorher stand hier der
     Petrolton und wurde nur für die angemeldete Anwendung überschrieben — die Anmeldeseite
     und alles, was sonst am Grundwert hängt, blieb petrol. Eine Farbe, die an zwei Stellen
     festgelegt wird, weicht irgendwann an einer davon ab. Also EINE Quelle. */
  --linie:#E6E1D9; --akzent:var(--pines); --bad:#C0392B;
  /* ZWEI GRUEN NEBENEINANDER BEISSEN SICH (22.09.2026). Christian zum grünen Haken bei
     gebuchten Zeilen, direkt neben den grünen Knöpfen: „Das Grün von den angehakten
     Buchungen beißt sich farblich mit dem Grün der Buttons … das muss auch auf das
     Buttongrün angepasst werden." GEMESSEN: --gut trug #2A7248 (ein Blaugrün, 5,63:1) —
     eine ANDERE Farbe als --akzent (#4F712A, Ines' Grün, seit dem 17.09. die Quelle fuer
     jeden Knopf). Zwei Gruentoene an derselben Zeile, die nicht zusammengehoeren, sehen
     nicht nach zwei Bedeutungen aus, sondern nach einem Fehler. Die aeltere Regel (12.09.,
     weiter unten bei --pchris/--pines/--puna) wollte Personenfarben nie mit --gut/--bad
     verwechselt sehen — das galt, solange --akzent noch Petrol war. Seit --akzent selbst
     Ines' Gruen IST, ist die Trennung schon durchbrochen; sie jetzt an --gut weiter
     hochzuhalten, haette nur zwei Gruentoene erzeugt, die noch dazu nebeneinander stehen
     (Haken direkt neben Knopf). Deshalb jetzt EINE Quelle: --gut folgt --akzent. */
  --gut:var(--akzent);
  /* DAS GRUEN ALS SCHRIFT (20.09.2026). GEMESSEN: --gut-tinte war NIRGENDS
     definiert — überall galt der Rückfallwert #3C5A2A. Im Hellen sieht das
     gut aus; im Dunkeln stand damit dunkelgrüne Schrift auf dunklem Grund,
     also neun leise Knöpfe praktisch ohne Kontrast. Eine Farbe, die nur als
     Rückfallwert existiert, hat keine Quelle — jetzt hat sie eine, hell und
     dunkel. */
  --gut-tinte:#3C5A2A;      /* auf Weiß gemessen: 7,4 : 1 */
  --warte:#C77D12;      /* Bernstein als FLAECHE und Zeichen: „steht noch aus" — Signal, keine Warnung */
  --wartetinte:#8A5A06;  /* Bernstein als SCHRIFT: die Flaechenfarbe steht auf Weiss nur bei 3,3 : 1, diese bei 5,1 : 1 */

  /* ZWEI MENSCHEN, ZWEI FARBEN.
     Christian am 12.09.2026: „dass Chris vielleicht in 'nem Blauton und
     Ines dann vielleicht in einem Grünton, ja, zusammen haben wir dann
     eine Kombination". Die Farben stehen EINMAL hier, damit derselbe
     Mensch im Umschalter, im Nebenkonto und in der Zeitreise garantiert
     dieselbe traegt. Sie sind bewusst gedaempft: Sie sollen einordnen,
     nicht schreien — und sie duerfen nie mit --bad oder --gut
     verwechselt werden, die eine Wertung tragen. */
  --pchris:#2F63A8; --pines:#4F712A; --puna:#8A5B2B;   /* gemessen gegen Weiss 5,45 · 5,63 · 5,20 */
  --palle:#7350A8;   /* ALLE GEMEINSAM (22.10.2026), Chris: „gemeinsam gerne lila“ — Grün trägt schon Ines. Gegen Weiss 6,4 : 1 */

  /* Zwoelf Farben fuer die zwoelf Gruppen. Sie stehen EINMAL hier, damit
     dieselbe Gruppe im Kreis, im Balken und im Punkt vor dem Namen garantiert
     dieselbe Farbe traegt. Die Zuordnung macht `gruppeFarbe()` — fest an der
     Gruppe, NICHT am Rang: sonst wandert die Farbe, sobald sich die
     Reihenfolge aendert, und man lernt sie nie. */
  --f0:#874557; --f1:#D0936F; --f2:#814C2C; --f3:#595D22; --f4:#97A67F;
  --f5:#086649; --f6:#40B1A8; --f7:#385F6E; --f8:#2C9CC4; --f9:#2B3A67;
  --f10:#6A4E82; --f11:#C493A6;
  /* Die Zahl steht IM farbigen Ring, nicht auf dem Grund. Welche der
     beiden Tinten je Farbe die lesbarere ist, ist gemessen (Kontrast nach
     WCAG, weiss gegen dunkel): sechs Toene tragen weiss, sechs dunkel.
     Beide Werte kippen in der dunklen Ansicht NICHT mit — die dunkle
     Palette ist hell, dort traegt jeder Ton die dunkle Tinte. */
  --ringhell:#FFFFFF; --ringdunkel:#101A1B;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{height:100%}
/* DIE SEITE SPRINGT NICHT NACH RECHTS (16.09.2026). Christian: „Wenn ich auf Versicherung
   klicke, springt das Bild nach rechts. Das musst du fixen." GEMESSEN am laufenden System
   (Fenster 1556 × 1490): Haushalt ist 3591 px hoch — Scrollleiste da, Blatt beginnt bei
   x = 163. Die Versicherungsseite ist genau 1490 px hoch, passt also ins Fenster — keine
   Leiste, und alles rueckte um ihre 15 px nach rechts. Der Platz der Leiste wird jetzt
   immer freigehalten, ob sie gebraucht wird oder nicht: gleiche Breite auf jeder Seite.
   Waechter: pruef/kopf-gleich.js */
html{scrollbar-gutter:stable}
@supports not (scrollbar-gutter:stable){ html{overflow-y:scroll} }
/* ================================================================== *
 *  GRUEN IST HEREIN, ROT IST HINAUS — EINE Regel fuer die ganze Seite
 *
 *  Christian am 13.09.2026: „Hier, Einnahmen. Die Zahl muss grün sein, die
 *  Ausgaben minus rot."
 *  Er hat in der Kopfzeile der Gegenueberstellung eine Stelle gefunden, an
 *  der beide Zahlen schwarz standen. Der Grund war nicht Absicht, sondern
 *  Buchhaltung: `.plus`/`.minus` war sechzehnmal einzeln erklaert — fuer die
 *  Kacheln, die Tabelle, die Postenliste, die Zeitreise — und beim
 *  siebzehnten Mal vergessen. Das ist keine Schlamperei, das ist ein
 *  Aufbaufehler: Eine Farbregel des Corporate Design gehoert EINMAL
 *  hingeschrieben und nicht an jeder Stelle neu.
 *  Sie steht hier ganz vorn, damit jede spaetere, genauere Regel sie
 *  weiterhin ueberstimmen kann (etwa ein gedaempftes Grau fuer Nullwerte).
 * ================================================================== */
.plus{color:var(--gut)}
.minus{color:var(--bad)}

body{
  margin:0; background:var(--grund); color:var(--tinte);
  font:17px/1.5 var(--schrift);
  display:flex; align-items:center; justify-content:center;
  padding:32px 20px calc(32px + env(safe-area-inset-bottom));
}
main{width:100%; max-width:380px}
.marke{display:flex; align-items:center; gap:10px; margin-bottom:34px; justify-content:center}
.marke svg{display:block}
.marke span{font-size:15px; letter-spacing:.02em; color:var(--tinte2)}
.marke img{display:block; width:min(230px, 62vw); height:auto}

/* ------------------------------------------------------------------ *
 *  DAS LOGO BEKOMMT SEINEN GRUND ZURUECK
 *
 *  Christian am 16.09.2026, mit einem Bild der Anmeldeseite im
 *  Dunkelmodus: „Ein freigestelltes Logo, das so freigestellt ist, kann
 *  nicht bleiben … wenn, dann einfach das Logo auf weiss, aber nicht so.
 *  Das sieht total unprofessionell aus."
 *
 *  GEMESSEN an logo.png (480 × 338): KEIN EINZIGER Punkt ist ganz
 *  deckend. 50.546 Punkte sind halbdurchsichtig, davon 19.776 fast
 *  weiss. Das Logo wurde freigestellt, indem Weiss in Durchsichtigkeit
 *  umgerechnet wurde — dabei wurde das ganze Motiv halbtransparent, und
 *  die weissen Anteile blieben als heller Schleier stehen. Auf weissem
 *  Grund faellt das nicht auf; auf schwarzem sieht man genau diesen
 *  Schleier als Rand um jeden Buchstaben.
 *
 *  Das laesst sich nicht nachbessern: Welcher Punkt zum Motiv gehoerte
 *  und welcher zum Hintergrund, steht in der Datei nicht mehr drin.
 *  Also derselbe Weg, den Christian nennt — das Logo bekommt eine
 *  weisse Flaeche. Nicht als Notnagel hingestellt, sondern als Karte
 *  mit Rundung und Luft, damit es aussieht wie gewollt und nicht wie
 *  geflickt. Im Hellmodus faellt sie nicht auf, im Dunkelmodus traegt
 *  sie das Logo.
 * ------------------------------------------------------------------ */
.marke.bild{
  background:#FFFFFF;
  border-radius:18px;
  padding:16px 22px;
  box-shadow:0 1px 3px rgba(15,30,31,.10);
  /* Die Flaeche ist genau so breit wie das Logo plus Luft, nicht breiter. */
  width:max-content; max-width:min(100%, 320px);
  margin-left:auto; margin-right:auto;
}
h1{font-size:24px; line-height:1.2; letter-spacing:-.02em; margin:0 0 10px; text-align:center}
p.lede{margin:0 0 30px; color:var(--tinte2); text-align:center; font-size:16px}
button{
  /* DIE BREITE GEHOERT ZUM BAUTEIL (20.09.2026, Gesetz 45). Christian:
     „Solche Buttonbreiten sind verboten. Sowas geht gar nicht … Corporate
     Design einheitlich. Buttonbreiten sind vorgeschrieben."
     URSACHE, gemessen: width:100% liess jeden Knopf so breit werden wie
     sein Behaelter — in einem Formular ueber die ganze Karte. Ein Knopf ist
     so breit wie sein Text plus Schutzraum, mindestens 168 px, hoechstens
     340 px. Nur auf dem Telefon wird er zur vollen Breite, weil ein Daumen
     dort die ganze Zeile braucht. */
  /* EINE KNOPFSCHRIFT FUER ALLE (20.09.2026, Gesetz 44 und 46).
     GEMESSEN: `font:inherit` liess jeden <button> ohne eigene Klasse die
     Fliesstextgroesse von 17 px erben — daneben stand der gleiche Knopf mit
     Klasse `.knopf` in 14,5 px. Der CI-Waechter hat das auf der
     Vermoegensseite siebenmal gemeldet. Die Groesse gehoert ins Bauteil,
     nicht in jede einzelne Regel. */
  /* DIE FAMILIENMASSE KOMMEN UEBER VARIABLEN (20.09.2026, von Christian
     zweimal gemeldet: erst der Abmelde-Knopf, dann die Themenfeld-Punkte).
     URSACHE: `min-width:168px` schlaegt jedes `width:8px` eines Bauteils —
     aus einem 8-px-Punkt wurde ein 168 px langer Strich. Eine Liste von
     Ausnahmen hier waere eine Inselloesung, die bei jedem neuen Bauteil
     wieder bricht. Stattdessen: Ein Bauteil, das seine Geometrie selbst
     bestimmt, setzt --knopf-min und --knopf-max bei SICH zurueck — die
     Geometrie bleibt damit dort, wo sie hingehoert. */
  font:inherit; font-size:14.5px; font-weight:600; width:auto;
  min-width:var(--knopf-min, 168px); max-width:var(--knopf-max, 340px);
  border:0; border-radius:12px;
  min-height:var(--knopf); padding:0 22px; background:var(--akzent); color:var(--aufakzent); cursor:pointer;
  transition:transform .12s ease, opacity .12s ease;
  /* DER ABSTAND GEHOERT INS BAUTEIL (20.09.2026). Christian: „Man sieht auch
     bei den gruenen Buttons, da stimmen die Abstaende nicht. Die Texte passen
     nicht zueinander, also da ist kein Leerzeichen drin."
     URSACHE, gemessen: Ein Knopf ist ein Flex-Behaelter. Ein Browser wirft in
     einem Flex-Behaelter reine Leerzeichen-Textknoten weg — aus
     „<Zeichen> Baustein eintragen" wurde „✓Baustein eintragen", aus
     „Kanten auf <b>600 €</b> setzen" wurde „Kanten auf600 €setzen". Ein
     Leerzeichen im Quelltext hilft deshalb nicht; nur ein gap hilft. */
  gap:9px;
}
/* Wo ein Knopf ausdruecklich die Zeile fuellen soll, sagt er es selbst. */
button.breit, .knopf.breit{width:100%; max-width:none}
/* AUCH AUF DEM TELEFON BESTIMMT DAS BAUTEIL SEINE GEOMETRIE (20.09.2026).
   GEMESSEN, von Christian am iPhone gefunden: Diese Regel setzte width:100%
   auf JEDEN Knopf — und machte aus den 8-px-Themenfeldpunkten wieder lange
   Striche, obwohl sie am Schreibtisch längst rund waren. Derselbe Fehler,
   nur durch eine zweite Tür. Also läuft auch die volle Breite über eine
   Variable, die ein Bauteil bei sich zurücknimmt. */
@media (max-width:560px){
  button, a.knopf{width:var(--knopf-breit, 100%); max-width:var(--knopf-max, none)}
}
/* Im Raster-Formular steht der Knopf links und behaelt seine Breite. */
form.ubform button, form.vwform button{justify-self:start}

/* Das Bauteil „Knopf": eine Schriftgroesse fuer alle, damit nicht ein Knopf
   in Fliesstextgroesse (17 px) neben einem in 14,5 px steht. */
.knopf{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-size:14.5px; letter-spacing:0;
}
.knopf .ikon{width:15px; height:15px; flex:0 0 auto}
a.mtzutest{
  margin-left:auto; display:inline-flex; align-items:center; gap:6px; min-height:var(--knopf-klein);
  padding:0 12px; border-radius:var(--wahl); font-size:13px; font-weight:600; text-decoration:none;
  color:var(--akzent); background:var(--flaeche); border:1px solid var(--linie);
}
a.mtzutest:hover{border-color:var(--akzent)}
a.mtzutest .ikon{width:14px; height:14px}
article.eink#testmail:target, article.eink.mthebt{box-shadow:0 0 0 2px var(--akzent); transition:box-shadow .3s ease}

/* DIE VERSANDSPERRE, SICHTBAR (16.09.2026) — sie ersetzt den Knopf, statt ihn nur zu daempfen:
   Ein grauer Knopf laedt zum Klicken ein und enttaeuscht danach. Hier steht, WAS fehlt und WO es steht. */
.stgesperrt{
  display:grid; gap:12px; padding:16px 18px; border-radius:var(--karteradius);
  background:color-mix(in srgb, var(--warte) 8%, var(--flaeche)); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--warte) 35%, transparent);
}
p.stgkopf{display:flex; gap:9px; align-items:flex-start; margin:0; font-size:14.5px; line-height:1.55; color:var(--tinte2)}
p.stgkopf b{color:var(--tinte)}
p.stgkopf .ikon{width:16px; height:16px; flex:none; margin-top:3px; color:var(--wartetinte)}
ul.stgliste{list-style:none; margin:0; padding:0; display:grid; gap:6px}
ul.stgliste a{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; min-height:var(--knopf-klein);
  padding:7px 13px; border-radius:var(--wahl); text-decoration:none; background:var(--flaeche);
  box-shadow:inset 0 0 0 1px var(--linie); color:var(--tinte); font-size:13px;
}
ul.stgliste a:hover{box-shadow:inset 0 0 0 1.5px var(--akzent)}
ul.stgliste b{font-weight:600}
ul.stgliste span{color:var(--tinte3); font-size:12px}
ul.stgliste li.wartet a{opacity:.85}
p.stgfuss{margin:0; font-size:12px; color:var(--tinte3)}

/* JEDES AUSWAHLFELD ZEIGT, DASS ES EINES IST (16.09.2026).
   Christian zum Absender in der Mailzentrale: „hier wird nicht klar, dass ich den Absender ändern kann.
   Wenn ich nicht zufällig reinklicke … es muss da wohl ein Symbol nach rechts."
   Das Zeichen stand bisher nur an EINER Formularart (.sonderform). Jetzt traegt es jedes select in der
   Anwendung — und beim Ueberfahren hebt sich der Rahmen, damit die Hand weiss, dass hier etwas passiert.
   Das Doppelpfeilchen ist dasselbe, das Apple an Auswahlfeldern benutzt. */
select{
  appearance:none; -webkit-appearance:none; padding-right:32px;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20width%3D'10'%20height%3D'16'%20viewBox%3D'0%200%2010%2016'%20fill%3D'none'%20stroke%3D'%2355514C'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M1.2%206.2%205%202.4%208.8%206.2M1.2%209.8%205%2013.6%208.8%209.8'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center; background-size:10px 16px;
}
select:hover{border-color:var(--akzent)}
/* DUNKEL WIRD GESCHALTET, NICHT GEERBT (20.09.2026). Christian:
   „ich möchte trotzdem diese Webseite schalten können, die ich gerade
   will ... und dass ich das nicht an der Betriebssystemeinstellung
   orientiere." Statt einer Media-Query steht hier ein Attribut auf
   <html>. Wer „wie das Gerät" waehlt, bekommt es von einem winzigen
   Skript gesetzt, BEVOR dieses Stylesheet greift — deshalb blitzt
   nichts auf. Eine Quelle, drei Zustaende. */

  :root[data-hell="dunkel"] select{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20width%3D'10'%20height%3D'16'%20viewBox%3D'0%200%2010%2016'%20fill%3D'none'%20stroke%3D'%23ACA79F'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M1.2%206.2%205%202.4%208.8%206.2M1.2%209.8%205%2013.6%208.8%209.8'/%3E%3C/svg%3E")}


/* Haekchen und Punkte tragen die Personenfarbe — dieselbe Regel wie jede andere Wahl (16.09.2026).
   Sie waren ausserdem 13 px gross; 17 px sind sichtbar, und ihr Griff ist das Beschriftungsfeld daneben. */
input[type=checkbox], input[type=radio]{width:17px; height:17px; accent-color:var(--akzent); flex:0 0 auto}
label:has(> input[type=checkbox]), label:has(> input[type=radio]){min-height:30px; display:flex; align-items:center; gap:8px}

/* KLEINE BEDIENELEMENTE: klein im Bild, gross im Griff (16.09.2026, Fassung r).
   Gemessen im grossen Durchgang: die Themenpunkte in den Buchungszeilen waren 8 × 8 px, die
   Erklaerungszeichen 17 × 17, die Anordnungsknoepfe 27 × 27. Apple verlangt 44 × 44 Trefferflaeche —
   am Telefon trifft man 8 px schlicht nicht. Diese Elemente behalten ihr Bild und bekommen einen
   unsichtbaren Schutzraum darum; die feste Mindesthoehe der Knoepfe gilt fuer sie NICHT, sonst
   waeren sie ploetzlich 44 px hohe Kloetze. Wer hier ein Element ergaenzt, ergaenzt es in beiden Zeilen. */
.ziehgriff button, button.bupunkt, button.ststift, button.zutun, .bukuenftig, details.info > summary, .bmgriff, button.bmfeld{min-height:0}
.ziehgriff button, button.bupunkt, .bukuenftig, details.info > summary, .bmgriff{position:relative}
.ziehgriff button::after, button.bupunkt::after, .bukuenftig::after,
details.info > summary::after, .bmgriff::after{
  content:''; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
  width:max(100%, 44px); height:max(100%, 44px); border-radius:50%;
}
/* Flache, breite Schalter (Stift „ändern", Chip „ohne Gruppe", „n Konten ansehen") wachsen nicht in
   die Breite, sondern bekommen oben und unten Griff bis 44 px. */
button.ststift, button.zutun, button.bmfeld{position:relative}
button.ststift::after, button.zutun::after, button.bmfeld::after{
  content:''; position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); height:max(100%, 44px);
}
/* DER TEXT STEHT IN DER MITTE DES KNOPFES (Christian 14.09.2026: „Buttontexte müssen mittig sein und auch mittig
   innerhalb des Buttons, also nicht … am unteren Rand kleben"). GEMESSEN: bei 44 px Höhe und 16 px Polster blieben
   12 px für 17 px Schrift — der Text hing 19 px unter der Oberkante und 6 px über der Unterkante. Deshalb ist jeder
   Knopf ein Flex-Kasten, der seinen Inhalt waagerecht UND senkrecht zentriert; feste Höhen tragen kein senkrechtes
   Polster mehr. Handbuchregel „Knopftexte stehen in der Mitte". */
button{display:inline-flex; align-items:center; justify-content:center; text-align:center; box-sizing:border-box; line-height:1.2}
button:active{transform:scale(.98)}
button:disabled{opacity:.5; cursor:default}
button.leise{background:transparent; color:var(--akzent); font-weight:500; padding:12px; margin-top:6px}
.karte{background:var(--flaeche); border:var(--karterand); border-radius:var(--karteradius); box-shadow:var(--karteschatten); padding:24px 22px}
.wahl{display:grid; gap:10px; margin-bottom:18px}
.wahl label{
  display:flex; align-items:center; gap:12px; padding:14px 16px; border:1px solid var(--linie);
  border-radius:13px; cursor:pointer; background:var(--flaeche);
}
.wahl input{accent-color:var(--akzent); width:19px; height:19px; margin:0}
.wahl label:has(input:checked){border-color:var(--akzent); background:var(--flaeche2)}
/* ACHTUNG: Diese Regel gilt fuer JEDES Textfeld der Anwendung, auch fuer
   die in der Uebersicht und in der Verwaltung. Sie war einmal fuer die
   Anmeldekarte gedacht und trug deshalb "margin-bottom:14px" — dieser
   Rand wanderte still in jedes andere Formular mit.
   GEMESSEN am 12.09.2026: Im Formular „Sonderausgaben und Abos" stand
   „Konto" dadurch vierzehn Punkte tiefer als „Betrag" — das Textfeld
   drueckte sich mit seinem Rand nach oben, das Auswahlfeld ohne Rand
   blieb unten. Der Rand gehoert dorthin, wo er gebraucht wird: in die
   Anmeldekarte. Wer ihn hierher zurueckholt, holt den Versatz mit. */
input[type=text]{
  font:inherit; width:100%; padding:14px 16px; border:1px solid var(--linie);
  border-radius:13px; background:var(--flaeche); color:var(--tinte);
}
.karte input[type=text]{margin-bottom:14px}
input[type=text]:focus{outline:2px solid var(--akzent); outline-offset:-1px}
/* DIE ANMELDEKARTE STELLT IHREN KNOPF IN DIE MITTE (20.09.2026)
   Christian mit einem Bildschirmfoto: „Der Anmelde-Button ist nicht mehr
   mittig. Das sieht nicht gut aus."
   URSACHE, gemessen: Seit Gesetz 45 ist ein Knopf so breit wie sein Text
   (mindestens 168, hoechstens 340 px) statt so breit wie seine Karte.
   Vorher fuellte „Anmelden" die Karte und WIRKTE mittig; seither steht er
   mit seinen 280 px am linken Rand einer 630 px breiten Karte.
   Die Breite ist richtig — die Ausrichtung war es nie. Eine Karte, in der
   genau EINE Handlung steht, stellt sie in ihre Mitte. Die Felder darunter
   behalten ihre volle Breite; nur die Knoepfe werden zentriert. */
#bereichAnmelden{display:grid; justify-items:center; gap:0}
#bereichEinrichten{display:grid; gap:0}
#bereichEinrichten > button{justify-self:center}
.meldung{margin-top:16px; font-size:15px; text-align:center; min-height:22px}
.meldung.schlecht{color:var(--bad)}
.fuss{margin-top:26px; text-align:center; font-size:13px; color:var(--tinte3); line-height:1.55}
.versteckt{display:none}
.gut h1{margin-bottom:6px}

/* ------------------------------------------------ Die Tageslinie selbst */
body.app{display:block; height:auto; min-height:100%; padding:0 0 calc(40px + env(safe-area-inset-bottom)); overflow-x:clip}
body.app main{max-width:1280px; margin:0 auto; padding:0 clamp(16px, 3vw, 32px)}

/* ---------- DER GRUND TRAEGT DIE PERSON --------------------------------
   Christian am 12.09.2026: „Die Farbcodierung fehlt auch noch. Wenn ich
   mich unter Chris befinde, haben wir doch gesagt: ein zartes Blau. Wenn
   ich mich bei Ines befinde: ein zartes Grün. Damit ich sofort eine
   Codierung hab. Der Hintergrund sollte entsprechend angepasst sein."

   Getoent wird `--grund` selbst und NICHT nur der Hintergrund des <body>:
   Die Kacheln, die Erklaerungszeile und jede zweite Bankzeile liegen auf
   demselben Grund. Toente man nur das <body>, liefen sie auseinander.

   Die Farben sind die vorhandenen Personenfarben — keine neuen. Wie stark
   und worein gemischt wird, steht als `--ptonstark` und `--grundmisch`
   oben bei der Palette, einmal je Ansicht.

   ZART heisst hier gemessen zart. Jeder Ton im Grund kostet Kontrast,
   weil die Tinte dunkel ist und der Ton den Grund bewegt. GEMESSEN am
   12.09.2026 (WCAG, in der laufenden Seite):
     hell   neutral  #F1F4F4  --tinte 15,49:1  --tinte3 3,15:1
            Chris    #E8EDF4  --tinte 14,56:1  --tinte3 2,96:1
            Ines     #EDF1E9  --tinte 14,98:1  --tinte3 3,04:1
            Zusammen #EBEFEE  --tinte 14,78:1  --tinte3 3,00:1
     dunkel neutral  #0C1415  --tinte 16,17:1  --tinte3 5,07:1
            Chris    #121B1F  --tinte 15,16:1  --tinte3 4,75:1
            Ines     #141D1A  --tinte 14,93:1  --tinte3 4,68:1
            Zusammen #131C1C  --tinte 15,05:1  --tinte3 4,72:1
   Das sind 3,3 bis 7,7 Prozent weniger Kontrast — die Rangfolge der Texte
   bleibt, und keine Zeile rutscht unter eine Schwelle, ueber der sie
   vorher stand. Derselbe Ton direkt in den Grund gemischt kostete
   GEMESSEN 11 Prozent; deshalb wird hell in die Flaeche gemischt.
   Von --bad und --gut bleibt der Grund so weit entfernt, dass nichts
   nach Wertung aussieht.

   „Zusammen" bekommt beide Toene zu gleichen Teilen, nicht Neutral.
   Christian am 12.09.2026: „zusammen haben wir dann eine Kombination".
   Neutral hiesse, die Seite wisse nicht, wo man ist; die Mischung sagt:
   bei beiden. */
/* AUCH DER GRUND IST ÜBERALL DERSELBE (16.09.2026). Christian: „Wir machen alles in dem zarten
   Grün bei Ines … Das springt mir zu sehr hin und her. Das ist zu unruhig.“ Eine Seite, ein Ton —
   der Wechsel der Person färbt nichts mehr um. */
body.app[data-konto="cons"], body.app[data-konto="volk"], body.app[data-konto="zus"]{
  --grund:color-mix(in srgb, var(--pines) var(--ptonstark), var(--grundmisch));
}
/* DIE PERSON IST DER AKZENT (15.09.2026). Christian: „die Farbkodierung vorher hat dafür gesorgt, dass ich weiß,
   okay, ich bin jetzt im Girokonto Chris … gerade wenn man nach unten scrollt, weiß man plötzlich nicht mehr, in
   welcher Welt man ist." Wie auf dem Mac ist die Person nicht ein Hintergrund, sondern die Akzentfarbe des ganzen
   Blatts: gewählte Pille, Modulzeichen, Knöpfe, gewählte Schalter, Kurve — alles, was „aktiv" ist, trägt bei Chris
   Blau, bei Ines Grün, bei „Zusammen" Petrol. Man sieht die Welt an jedem Bedienelement, nicht nur oben. */
/* DIE FARBKODIERUNG DER OBERFLÄCHE IST AUFGEGEBEN (16.09.2026).
   Christian: „Ich möchte jetzt so haben, dass das gesamte Menü alle die gleiche Farbe hat. Wir
   machen jetzt den Farbton, der bei Ines ist, in dem Grün. Der wird jetzt überall durchgezogen.
   Ich will die Farbkodierung aufgeben. Das nützt nichts. Das springt mir zu sehr hin und her.
   Das ist zu unruhig.“
   Der Akzent wechselte bisher mit der gewählten Person — jeder Wechsel färbte die halbe Seite um.
   Jetzt trägt die ganze Anwendung EINEN Akzent: Ines' Grün. Die Personenfarben bleiben nur dort,
   wo sie zwei Datenreihen im selben Bild auseinanderhalten — das ist eine Legende, keine
   Einfärbung der Oberfläche. */
/* UND ZWAR AUF JEDER SEITE (17.09.2026). Christian, mit zwei Bildern: „Die Bereiche Haushalt
   und Vermögen sind noch in Petrol eingefärbt. Das ist falsch. Sie müssen auch das gleiche
   Grün tragen wie die anderen Menüpunkte.“
   Mein Fehler war halbherzig: Ich hatte den Akzent nur auf den KONTO-Seiten umgestellt, wo die
   Personenfarbe herkam — auf Haushalt, Vermögen und den übrigen Bereichen blieb der alte
   Petrolton stehen. Eine Farbkodierung, die man zur Hälfte aufgibt, ist immer noch eine
   Farbkodierung. Jetzt gilt EIN Akzent für die ganze Anwendung, auf jeder Seite.
   Gemessen von pruef/einakzent.js. */
body.app{--akzent:var(--pines)}
/* Jede Karte auf einem Blatt trägt dieselbe Haut — Haarlinie, Radius, Schatten aus EINER Quelle (:root). */
/* Die Kartenhaut gilt fuer Inhaltsblöcke — NICHT fuer den Seitenkopf (16.09.2026): Titel und Satz einer
   Seite standen dadurch in einer breiten, sonst leeren Karte, deren rechte Haelfte nichts trug. Ein Titel
   ist keine Karte; er steht frei auf dem Grund. */
/* DIE HAUT UND DIE FLÄCHE GEHÖREN ZUSAMMEN (16.09.2026).
   Christian zum Modul „Jeder Monat für sich": „Auch hier hast du wieder den weißen oder hellen,
   cremefarbenen Hintergrund nicht eingebaut. Warum baust du nicht gemäß Handbuch?"
   GEMESSEN: Von zehn Modulen auf dem Blatt trugen sieben --flaeche und drei gar nichts
   (monatskurve, tage, tabelle) — sie zeigten den Grund durch und wirkten dadurch kühl und
   eingefallen. Der Fehler war hier: Diese Regel gab jedem Block Haarlinie, Radius und Schatten,
   ALSO das Aussehen einer Karte — aber nicht ihre Fläche. Wer ein neues Modul baute, musste die
   Fläche von Hand nachtragen und konnte sie vergessen; ich habe sie vergessen.
   JETZT kommt beides aus derselben Regel. Ein Block auf dem Blatt IST eine Karte und trägt ihre
   Fläche, ohne dass es jemand noch einmal hinschreibt. Ein Modul, das bewusst durchsichtig sein
   soll, sagt das ausdrücklich — Schweigen heisst ab jetzt Kartenfläche. */
#blatt > section:not(.vwkopf), #blatt > aside, #blatt > .abrufleiste{background:var(--flaeche); border:var(--karterand); border-radius:var(--karteradius); box-shadow:var(--karteschatten)}
/* Der Widget-Park ist keine Karte auf dem Blatt, sondern eine Schublade am Fensterrand — er trägt
   seine eigene, durchscheinende Fläche (siehe .Widget-Park). */
/* GESETZ: JEDE KARTE HÄLT ABSTAND ZU IHREM RAND (16.09.2026).
   Christian: „Vom Rand muss ein kleiner Sicherheitsabstand eingehalten werden. Bitte
   websiteweit umsetzen und dauerhaft berücksichtigen." GEMESSEN war der Anlass die Zeile
   „2 stehen im Vermögen": Sie stand 1 px vom Rahmen entfernt, weil die Karte gar keinen
   Innenabstand hatte (padding 0). Betroffen waren sechs Karten quer durch die Anwendung.
   Das hier ist der GRUNDWERT für jede Karte im Blatt — wer eine eigene Regel schreibt,
   überschreibt ihn bewusst und muss dann selbst mindestens --kartenluft lassen.
   Der Wächter pruef/randluft.js misst es auf allen Seiten und drei Breiten. */
:root{--kartenluft:22px; --kartenluft-hoch:20px}
@media (max-width:560px){ :root{--kartenluft:16px; --kartenluft-hoch:16px} }
#blatt > section:not(.vwkopf), #blatt > aside, #blatt > .abrufleiste{padding:var(--kartenluft-hoch) var(--kartenluft)}
#blatt > section.vwkopf{border:0; box-shadow:none; background:transparent; padding:0}
h2.modultitel .mtz{background:color-mix(in srgb, var(--akzent) 12%, var(--flaeche)); color:var(--akzent)}
/* DIE LEISTE BLEIBT (15.09.2026). Christian: „mit der feststehenden Menüleiste oben finde ich sehr gut. Wenn man
   scrollt, musst Du aber aufpassen … es darf nicht sein, dass die Seite über dem Menü wieder durchblitzt … der
   Bereich muss in einer Unschärfe verschwinden." Darum ist die Leiste kein schwebendes Inselchen mit Luft darüber,
   sondern ein Band vom oberen Fensterrand bis unter die Pillen: alles, was darunter scrollt, verschwimmt im Material
   — vom ersten Pixel an. Nach unten läuft das Band weich aus (::after mit Maske), damit keine Kante entsteht. */
.kopf{
  /* EIN KOPF, EINE REGEL (29.09.2026, Befund 20 des Debuggings). Vorher stand .kopf dreimal im Stylesheet
     (Zeilen 521, 628, 660) und widersprach sich: z-index 60 gegen 40, Blur-Grund gegen deckenden Grund,
     border-bottom 0 gegen 1px. Gewonnen hat jeweils die spaetere Regel — genau das steht jetzt hier,
     gemessen am Live-Stand, nichts sieht anders aus. */
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:14px; flex-wrap:nowrap; min-width:0;
  background:var(--grund);
  margin:0 0 -12px; padding:12px 0 12px; border-bottom:1px solid var(--linie);
  overflow-x:clip; overflow-clip-margin:8px;
}
.kopf::before{
  content:""; position:absolute; top:0; bottom:0; left:calc(50% - 50vw); right:calc(50% - 50vw); z-index:-1;   /* volle Fensterbreite */
  background:color-mix(in srgb, var(--grund) 78%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(22px); backdrop-filter:saturate(180%) blur(22px);
}
.kopf::after{
  content:""; position:absolute; left:calc(50% - 50vw); right:calc(50% - 50vw); top:100%; height:40px; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, color-mix(in srgb, var(--grund) 78%, transparent), transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  -webkit-mask-image:linear-gradient(180deg, #000, transparent); mask-image:linear-gradient(180deg, #000, transparent);
}
.umschalter{background:var(--flaeche); border:1px solid var(--materialrand); box-shadow:0 1px 2px rgba(0,0,0,.05), 0 10px 30px -18px rgba(0,0,0,.35); border-radius:14px}
/* SCHALTERLEISTEN: RUHEND — BERÜHRT — GEWÄHLT (16.09.2026, Corporate Design » Schalterleisten).
   Christian: „Ich möchte, wenn ich einen der Menüpunkte habe, dass dieser im jeweiligen Farbton
   zart gehovert wird. Und wenn ich ihn anklicke, dann wird er vollflächig von der Farbe eingenommen,
   so wie Haushalt … Das gilt für alle diese Menüs.“
   Jede Pille trägt ihren eigenen Farbton in --pillefarbe: bei Chris und Ines ihre Personenfarbe,
   sonst der Akzent des Bereichs. Berührt = 12 % Fläche und Schrift im Farbton, gewählt = volle
   Fläche. EINE Regel für alle Leisten — Umschalter, Zeitfenster, Reiter, Sichten, Pillen. */
.umschalter a, .zrfenster button, .tabwahl a, nav.ggsicht a, .brpille{--pillefarbe:var(--akzent)}
/* Seit dem 16.09.2026 tragen alle Pillen denselben Farbton — siehe oben, „Farbkodierung
   aufgegeben“. Die Klassen k-cons/k-volk bleiben im Markup: Sie benennen die Pille, sie färben
   sie nicht mehr. */
.umschalter a:hover:not(.aktiv),
.zrfenster button:hover:not(.an),
.tabwahl a:hover:not(.aktiv),
nav.ggsicht a:hover:not(.an),
.brpille:hover:not(.an){
  background:color-mix(in srgb, var(--pillefarbe) 12%, transparent);
  color:var(--pillefarbe);
}
.umschalter a:hover:not(.aktiv) .ikon,
.zrfenster button:hover:not(.an) .ikon,
.tabwahl a:hover:not(.aktiv) .ikon,
nav.ggsicht a:hover:not(.an) .ikon{color:currentColor}
@media (hover:none){   /* auf dem Telefon gibt es kein Berühren ohne Tippen */
  .umschalter a:hover:not(.aktiv), .zrfenster button:hover:not(.an), .tabwahl a:hover:not(.aktiv),
  nav.ggsicht a:hover:not(.an), .brpille:hover:not(.an){background:none; color:var(--tinte2)}
}
.umschalter a.aktiv{background:var(--pillefarbe); color:var(--aufakzent); box-shadow:0 1px 3px rgba(0,0,0,.18)}
/* Gattung A — alle Schalterleisten tragen dieselbe Form und denselben gewaehlten Zustand (siehe :root). */
.umschalter, .zrfenster, .tabwahl, nav.ggsicht{border-radius:var(--wahlleiste)}
.umschalter a, .zrfenster button, .tabwahl a, nav.ggsicht a, .brpille{border-radius:var(--wahl)}
.zrfenster button.an, .tabwahl a.aktiv, nav.ggsicht a.an, .brpille.an{
  background:var(--akzent); color:var(--aufakzent); box-shadow:0 1px 3px rgba(0,0,0,.18);
}
.zrfenster button.an .ikon, .tabwahl a.aktiv .ikon, nav.ggsicht a.an .ikon, .brpille.an .ikon{color:currentColor}
/* Gattung B — die gewaehlte Spalte einer Datenreihe: unterlegt, mit Akzentkante unten. */
.monatswahl a.aktiv, .hhmon.aktiv{background:var(--flaeche2); color:var(--tinte); box-shadow:inset 0 -2.5px 0 var(--akzent)}
.umschalter a.aktiv .ikon{color:currentColor}
.umschalter a.aktiv .pbild{box-shadow:0 0 0 2px rgba(255,255,255,.9)}
/* … aber NICHT um die Dreiergruppe (16.09.2026). Christian: „Anzeigefehler bei Zusammen. Der
   Kreis und das Rechteck passt nicht zusammen.“ Der Container der drei Bilder trägt selbst die
   Klasse `pbild` und hat keinen Radius — der weiße Ring wurde deshalb zu einem Rechteck um alle
   drei. Der Ring gehört an jedes einzelne runde Bild, nicht um die Gruppe. */
.umschalter a.aktiv .pbild.pzus{box-shadow:none}
.meinstand .zahl, .zr-zahl{font-weight:700; letter-spacing:-.035em}

/* ---- Kopf ---- */
/* DAS MARKENBAND — es zeigt, was die Marke-Seite verspricht
   Christian am 12.09.2026: „Wenn Du unter Verwaltung guckst, Marke,
   sind ganz genaue Aufloesungen vorgegeben und an die hab ich mich
   jetzt gehalten und die musst Du auch gewaehrleisten."
   Er hat recht: Vorher stand dort eine Hoehe zwischen 52 und 90 Punkten
   und darueber object-fit:cover — das Band hat also mehr als die Haelfte
   des gelieferten Bildes weggeschnitten. Wer sich an die Vorgabe haelt,
   bekam trotzdem ein beschnittenes Bild zu sehen.
   Jetzt haelt das Band genau das Verhaeltnis der Vorgabe (1280 : 205).
   Damit schneidet cover nichts mehr ab — das Bild steht vollstaendig da.
   Aendert sich die Vorgabe, aendert sich BANNER_BREIT/BANNER_HOCH in
   daten.php UND dieses Verhaeltnis. Eine Zahl, zwei Orte, deshalb steht
   der Hinweis hier. */
.markenband{
  position:relative;
  margin-top:calc(12px + env(safe-area-inset-top));
  border-radius:var(--karteradius); overflow:hidden; background:var(--flaeche2);   /* dieselbe Rundung wie die Karten darunter (16.09.2026) */
  box-shadow:0 1px 2px rgba(15,30,31,.06);
}
.markenband img{
  display:block; width:100%; height:auto;
  aspect-ratio:1280 / 205;
  object-fit:cover; object-position:center;
}
/* DUNKEL WIRD GESCHALTET, NICHT GEERBT (20.09.2026). Christian:
   „ich möchte trotzdem diese Webseite schalten können, die ich gerade
   will ... und dass ich das nicht an der Betriebssystemeinstellung
   orientiere." Statt einer Media-Query steht hier ein Attribut auf
   <html>. Wer „wie das Gerät" waehlt, bekommt es von einem winzigen
   Skript gesetzt, BEVOR dieses Stylesheet greift — deshalb blitzt
   nichts auf. Eine Quelle, drei Zustaende. */

  :root[data-hell="dunkel"] .markenband{box-shadow:none; border:1px solid var(--linie)}
/* ALS APP AUF DEM HOMESCREEN (05.10.2026). Chris am iPhone (Liquid Glass): „läuft oben das Banner in den Unschärfebereich
   hinein". Als eigenständige App gehört der Streifen unter der Statusleiste dem System, das ihn weichzeichnet; das Band
   stand bei rund 43 pt — mitten in dieser Zone. Jetzt beginnt es frühestens 60 pt unter der Oberkante (mindestens 44 pt
   Statusleiste plus 16 pt Luft), auf Geräten mit grösserem Sicherheitsrand entsprechend tiefer. Im Browser bleibt alles,
   wie es war. */
@media (display-mode: standalone){
  .markenband{margin-top:calc(max(env(safe-area-inset-top, 0px), 44px) + 16px)}
}


.markenzeile{
  display:flex; align-items:center; gap:10px;
  margin-top:calc(14px + env(safe-area-inset-top)); color:var(--akzent);
}
.markenzeile span{font-size:17px; letter-spacing:-.01em; color:var(--tinte); font-weight:400}
.markenzeile span b{font-weight:600}
.markenzeile i{font-style:normal; font-size:14.5px; color:var(--tinte3); border-left:1px solid var(--linie); padding-left:10px}
.marke.bild svg, .marke.bild span{display:none}
/* Das Menü-Kreuz traegt seine Masse in jeder Breite (29.09.2026, vom Gestaltwaechter oberhalb 1.240 px gemeldet: 168 px
   Mindestbreite, weil die Regel nur in der Media-Query bis 1.240 px stand). */
.mnzu{--knopf-min:0; --knopf-max:none; min-width:0; max-width:38px; min-height:0; padding:0}
/* SCHMALE TELEFONE (29.09.2026, gemessen am Prüfstand bei 375 px): auf der Übersicht stehen vier Kopfknöpfe (Verwaltung,
   Module ordnen, Ansicht, Abmelden) — mit dem Zusatz „Finanzplanung“ (106 px) ragte „Abmelden“ 13 px aus der Seite.
   Unter 400 px trägt die Wortmarke allein; der Zusatz kehrt ab 400 px zurück. */
@media (max-width:400px){ .markenzeile i{display:none} }

/* .kopf: siehe die eine Regel weiter oben (29.09.2026). nowrap: Christians Bild vom 13.09. zeigte Verwaltung ·
   Abmelden in einer zweiten Zeile. Die Knoepfe bleiben oben rechts; die Kontoleiste gibt nach (schmale Regeln unten). */
/* ------------------------------------------------------------------ *
 *  DIE LEISTEN BLEIBEN STEHEN
 *
 *  Christian: „Die zweite Menüzeile muss beim Scrollen verankert sein."
 *  Auf langen Seiten — dem Protokoll, den Buchungen, der Postenliste —
 *  war der Weg in einen anderen Bereich nach zwei Umdrehungen weg. Wer
 *  wechseln wollte, musste erst wieder ganz nach oben.
 *
 *  Beide Leisten bleiben, nicht nur eine: Eine Bereichsleiste, die klebt,
 *  während die Hauptleiste darüber wegscrollt, sieht aus wie ein Fehler —
 *  und der Weg in die anderen Bereiche darf nicht verschwinden (Gesetz
 *  „Eine Seite ohne Rückweg ist eine Sackgasse").
 *
 *  GEMESSEN, warum die zweite nur ab 834 px mitkommt: Darunter legt sie
 *  sich als Raster in vier Reihen (154 px bei 390 px Breite). Zusammen mit
 *  dem Kopf wären das 202 von 900 Punkten — ein Fünftel des Bildschirms,
 *  dauerhaft belegt. Ab 834 px ist sie eine Zeile von 44 px; zusammen mit
 *  dem Kopf 124 Punkte, und das trägt sich.
 *
 *  Die Polsterung nach unten samt negativem Aussenabstand hält den Abstand
 *  wie zuvor und deckt trotzdem die Lücke zu, durch die sonst der Inhalt
 *  hindurchliefe. Nichts bewegt sich, nichts wird kleiner — Ruhe (Gesetz 17).
 * ------------------------------------------------------------------ */
/* .kopf (sticky, deckender Grund, Polsterung nach unten): siehe die eine Regel weiter oben (29.09.2026). */
@media (min-width:901px){
  nav.umschalter.vw{
    position:sticky; top:80px; z-index:39;
    box-shadow:0 -14px 0 0 var(--grund), 0 14px 0 0 var(--grund);
  }
}
/* Eine Sprungmarke darf nicht unter den Leisten landen — sonst zeigt der
   Weg ins Leere, und genau das hatten wir schon einmal. */
#blatt [id]{scroll-margin-top:104px}
@media (min-width:901px){ #blatt [id]{scroll-margin-top:140px} }


/* =================================================================== *
   DAS MENÜ AM TELEFON — ein Knopf, ein Blatt
   -------------------------------------------------------------------
   Christian am 16.09.2026, mit Bild vom Telefon: „Die Menüsteuerung auf dem
   Smartphone ist wirklich eine Zumutung. Es ist winzig, die Sachen anzuklicken,
   gerade wenn man im Browser im Hochformat bedienen möchte … Kann ja nicht sein,
   dass ich da jedes Mal ins Querformat drehen muss … kann sein, dass wir dann ein
   klassisches horizontale drei Streifen brauchen, die antippen und dann
   entsprechend das in vertikaler Struktur anzeigen. So wie sich das gehört."

   GEMESSEN bei 390 px, bevor gebaut wurde: Acht Ziele in einer Rollleiste, jedes
   nicht gewählte Ziel 33 px breit — Apples Mindestmaß ist 44 — und zwei der acht
   standen ausserhalb des sichtbaren Bereichs, erreichbar nur durch seitliches
   Schieben, ohne dass etwas darauf hinwies. Er hat recht: Das ist keine Bedienung,
   das ist Zielen.

   DAS KONZEPT
   1. Bis 720 px tritt an die Stelle der Leiste EIN Knopf: links steht, wo man
      gerade ist (Bild und Name), rechts die drei Streifen. Griff 48 px hoch über
      die ganze Breite — man kann ihn nicht verfehlen.
   2. Antippen öffnet ein Blatt, das von UNTEN hereinfährt. Dort ist der Daumen;
      ein Menü, das oben aufklappt, zwingt zum Umgreifen.
   3. Im Blatt steht jedes Ziel als eigene Zeile: 56 px hoch, volle Breite, Bild
      oder Zeichen links, Name, darunter der kurze Satz, und an der Stelle, an der
      man gerade ist, ein Haken. Zwei Gruppen mit Überschrift: „Wer" und „Bereiche".
   4. Geschlossen wird mit dem Kreuz, mit einem Tipp auf den abgedunkelten Grund,
      mit einem Wisch nach unten oder mit der Esc-Taste.
   5. Es trägt sich selbst: `details`/`summary` öffnet und schliesst ohne eine Zeile
      JavaScript. Das Skript fügt nur hinzu, was CSS nicht kann (Grund-Tipp, Esc,
      Wischen, Rollsperre).
   6. Der Kopf bleibt beim Öffnen stehen — Gesetz „Ruhe": Ein Blatt kommt dazu, die
      Seite darunter bewegt sich nicht.
   Ab 1241 px bleibt alles, wie es war.
   Gemessen von pruef/mobilmenue.js (320, 360, 390, 430 px).

   ===================================================================
   DIE SCHWELLE WANDERT VON 720 AUF 1240 PX (19.09.2026)

   Christian, mit Bild von einem 11-Zoll-iPad: „Da siehst Du die
   Menüstruktur, die leidet. Es sieht alles sehr komprimiert aus und
   unübersichtlich … Eventuell muss dann das Menü auch mit drei
   horizontalen Strichen gekennzeichnet werden, dass man das Menü
   aufklappt, so wie auf dem Smartphone, weil es wird einfach sehr eng
   inzwischen."

   GEMESSEN am laufenden System, alle Zahlen am Fenster abgelesen:
   Die Pillenleiste braucht mit ihren neun Punkten in voller Groesse
   1094 px. Der Kopf ist 79 px schmaler als das Fenster (Seitenraender
   und Rollbalken) und hoechstens 1216 px breit. Rechnerisch passt die
   Leiste also bis hinunter zu 1173 px Fensterbreite — und genau das war
   die Falle: Darunter griff bisher eine Verkleinerung auf 13,5 px
   Schrift, und damit „passte" sie auch bei 834 px noch. Passen ist aber
   nicht dasselbe wie lesbar; Christians Bild vom iPad zeigt genau diesen
   Unterschied.

   Die Schwelle steht deshalb nicht dort, wo die Leiste gerade noch
   hineingeht, sondern dort, wo sie in voller Groesse ATMET: Bei 1241 px
   Fenster misst der Kopf 1162 px, die Leiste 1094 — 68 px Luft.
   Darunter uebernimmt das Blattmenue.
   Darunter uebernimmt dasselbe Blattmenue, das das Telefon schon hat:
   ein Knopf mit dem Ort, an dem man ist, drei Strichen und dem Wort
   „Menü".
   =================================================================== */
.mn{display:none}
.mn > summary{list-style:none}
.mn > summary::-webkit-details-marker{display:none}

@media (max-width:1180px){
  /* Die Pillenleiste tritt ab — und mit ihr das Zielen auf 33 px. */
  .kopf .umschalter.konten{display:none}

  .mn{display:block; flex:1 1 auto; min-width:0}
  .mnknopf{
    display:flex; align-items:center; gap:10px;
    min-height:48px; padding:6px 8px 6px 10px;
    border:1px solid var(--materialrand); border-radius:var(--wahlleiste);
    background:var(--flaeche2); color:var(--tinte);
    cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent;
  }
  .mnknopf:focus-visible{outline:2px solid var(--akzent); outline-offset:2px}
  .mnhier{display:flex; align-items:center; gap:9px; min-width:0; flex:1 1 auto}
  .mnhier .pbild{flex:0 0 auto}
  .mnhier .ikon{width:19px; height:19px; color:var(--tinte2); flex:0 0 auto}
  .mnname{font-size:15px; font-weight:600; letter-spacing:-.01em; white-space:nowrap;
          overflow:hidden; min-width:0}
  .mnwort{font-size:13px; color:var(--tinte3); flex:0 0 auto}
  .mnstreifen{
    display:flex; flex-direction:column; justify-content:center; gap:4px;
    width:22px; height:36px; flex:0 0 auto; padding-left:2px;
  }
  .mnstreifen i{display:block; height:2px; border-radius:2px; background:var(--tinte2)}
  .mn[open] .mnstreifen i{background:var(--akzent)}

  /* Der Grund: dunkel, aber nicht schwarz — die Seite bleibt erkennbar dahinter. */
  .mngrund{
    position:fixed; inset:0; z-index:60;
    background:rgba(12,22,23,.42); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
    animation:mngrundauf .18s ease both;
  }
  @keyframes mngrundauf{from{opacity:0} to{opacity:1}}

  .mnblatt{
    position:fixed; left:0; right:0; bottom:0; z-index:61;
    max-height:min(82vh, 640px); overflow-y:auto; -webkit-overflow-scrolling:touch;
    background:var(--flaeche); border-radius:20px 20px 0 0;
    box-shadow:0 -12px 40px -16px rgba(0,0,0,.45);
    padding:0 12px calc(18px + env(safe-area-inset-bottom, 0px));
    animation:mnblattauf .22s cubic-bezier(.22,.9,.3,1) both;
  }
  @keyframes mnblattauf{from{transform:translateY(14%); opacity:.6} to{transform:none; opacity:1}}
  @media (prefers-reduced-motion:reduce){
    .mngrund, .mnblatt{animation:none}
  }
  .mnkopf{
    position:sticky; top:0; z-index:1; background:var(--flaeche);
    display:flex; align-items:center; justify-content:center;
    padding:10px 0 10px; margin:0 -12px; border-radius:20px 20px 0 0;
  }
  .mngriff{display:block; width:38px; height:4px; border-radius:99px; background:var(--linie)}
  .mnzu{
    position:absolute; right:10px; top:6px;
    width:38px; height:38px; display:flex; align-items:center; justify-content:center;
    border:0; border-radius:99px; background:var(--flaeche2); color:var(--tinte2); cursor:pointer;
  }
  .mnzu .ikon{width:17px; height:17px}
  .mnzu:focus-visible{outline:2px solid var(--akzent); outline-offset:2px}
  /* 26.09.2026, Chris am Telefon: „das X oben rechts im Menü, das ist viel zu breit.“ GEMESSEN:
     168 px statt 38 px - wieder die Mindestbreite der Knopffamilie (Gesetz 45/46). Rückbau hier;
     der Gestaltwächter meldet künftig jeden Zeichen-Knopf ohne Text, der breiter als 60 px wird. */
  .mnzu{--knopf-min:0; --knopf-max:none; --knopf-breit:38px; min-width:0; max-width:38px; min-height:0; padding:0;
    z-index:3; touch-action:manipulation}

  /* 20 px, nicht 12: Das Schliesskreuz im Blattkopf braucht Schutzraum zur ersten farbigen
     Zeile darunter — gemessen 16.09.2026, bei „Übersicht Chris" waren es 5 px. */
  .mntitel{
    margin:20px 6px 8px; font-size:12px; font-weight:600;
    letter-spacing:.06em; text-transform:uppercase; color:var(--tinte3);
  }
  ul.mnliste{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}
  a.mnzeile{
    display:flex; align-items:center; gap:12px;
    min-height:56px; padding:8px 12px; border-radius:14px;
    text-decoration:none; color:var(--tinte);
  }
  a.mnzeile:hover{background:var(--flaeche2)}
  a.mnzeile:focus-visible{outline:2px solid var(--akzent); outline-offset:-2px}
  a.mnzeile.aktiv{background:color-mix(in srgb, var(--akzent) 12%, transparent)}
  .mnmarke{display:flex; align-items:center; flex:0 0 auto}
  .mnmarke .ikon{width:21px; height:21px; color:var(--tinte2)}
  .mnmarke .pbild{width:32px; height:32px; font-size:13px}
  .mnmarke .pzus{height:32px}
  .mnmarke .pzus .pbild{width:28px; height:28px}
  .mnzeilentext{display:flex; flex-direction:column; gap:1px; min-width:0; flex:1 1 auto}
  .mnzeilentext b{font-size:15px; font-weight:600; letter-spacing:-.01em}
  /* KEINE Zeilenbegrenzung (16.09.2026): `-webkit-line-clamp` setzt die drei Punkte selbst —
     ohne Leerzeichen davor, und daran kommt kein Text im HTML heran. Das waere ein Verstoss
     gegen Gesetz 20. Die Saetze hier sind kurz genug; was umbricht, umbricht. */
  .mnzeilentext small{font-size:12px; color:var(--tinte3); line-height:1.35}
  .mnhaken{display:flex; align-items:center; flex:0 0 auto; color:var(--akzent)}
  .mnhaken .ikon{width:19px; height:19px}

  /* Solange das Blatt offen ist, rollt die Seite darunter nicht mit. */
  body.mnoffen{overflow:hidden}

  /* ---- AUF DEM TABLET IST DAS BLATT KEIN BRETT (19.09.2026) ----------
     Am Telefon fuellt das Blatt die Breite aus, und das ist richtig: Dort
     IST die Breite ein Daumen. Auf einem iPad waeren 1180 px Blatt eine
     Liste, deren Zeilen einen halben Meter leer laufen — und deren rechte
     Haelfte kein Finger erreicht, der das Geraet haelt. Also bekommt es
     eine Hoechstbreite und steht in der Mitte, wie eine Karte. Die
     abgerundeten Ecken gelten dann rundum, weil es den unteren Rand nicht
     mehr beruehrt. */
  @media (min-width:761px){
    .mnblatt{
      max-width:560px; margin:0 auto; bottom:18px;
      border-radius:20px; max-height:min(76vh, 640px);
      box-shadow:0 22px 60px -18px rgba(0,0,0,.5);
    }
    .mnkopf{border-radius:20px 20px 0 0}
    /* Der Knopf traegt hier mehr Luft — er ist das einzige Bedienelement
       in dieser Zeile und darf das auch zeigen. */
    .mnknopf{min-height:52px; padding:8px 12px 8px 14px}
    .mnname{font-size:16px}
    .mnstreifen{width:24px}
  }
}

/* SICHERHEITSNETZ (19.09.2026): Die Leiste rollt notfalls in sich selbst,
   statt die Seite breiter zu machen. Bisher galt das nur unter 720 px —
   und genau deshalb wurde aus einer zu engen Leiste ein zu enges Bild
   statt einer rollenden Leiste. Kommt eines Tages ein zehnter Punkt dazu,
   faellt das jetzt nicht mehr auf die ganze Seite zurueck. */
/* .kopf overflow-x:clip: siehe die eine Regel weiter oben (29.09.2026). */
/* NICHTS DARF VERSCHWINDEN (20.09.2026). Christian: „Wo ist der Bereich
   Nachlass hin? Der ist plötzlich verschwunden. Das darf nicht sein, dass
   jetzt plötzlich hier Menüpunkte verschwinden."
   URSACHE, gemessen: Die Leiste stand auf flex-wrap:nowrap mit
   overflow-x:auto. Mit dem elften Punkt war sie 1336 px breit bei 1214 px
   Platz — „Nachlass" lag dahinter, erreichbar nur durch seitliches
   Scrollen, und damit für einen Menschen nicht vorhanden. Ein waagerechter
   Rollbalken ohne sichtbaren Balken ist kein Weg. Jetzt bricht die Leiste
   um: Bei genug Platz sieht nichts anders aus, bei zu wenig entsteht eine
   zweite Zeile, statt dass ein Bereich unsichtbar wird. */
.kopf .umschalter.konten{min-width:0; flex:0 1 auto;
  flex-wrap:nowrap; overflow:visible; max-width:100%; position:relative}
.kopf .umschalter.konten > a{flex:0 0 auto}
/* Das Aufklappfeld am Ende der Leiste: es traegt die Punkte, die nicht mehr
   in die Zeile passen. Es sieht aus wie ein Punkt und verhaelt sich wie ein
   Punkt — dieselbe Handlung, dieselbe Gestalt. */
/* AUF DERSELBEN LINIE WIE DIE ANDEREN PUNKTE (20.09.2026). Christian:
   „Dieser Mehrbereich ist plötzlich nicht mehr in der gleichen Ebene wie
   die anderen Menüpunkte, so leicht oben drüber."
   GEMESSEN: Ein Menüpunkt ist 46 px hoch (das Porträt bestimmt die Höhe),
   das Aufklappfeld war 46 px hoch, sein Knopf darin aber nur 33 px und saß
   oben an. Deshalb steht der Knopf jetzt auf voller Höhe und ist darin
   mittig — dieselbe Handlung, dieselbe Gestalt, dieselbe Grundlinie. */
.umschalter details.mehr{flex:0 0 auto; position:relative; display:flex; align-items:stretch}
.umschalter details.mehr[hidden]{display:none}
.umschalter summary.mehrknopf{display:flex; align-items:center; gap:8px; cursor:pointer;
  list-style:none; padding:6px 16px 6px 12px; border-radius:999px; color:var(--tinte2); font-size:14.5px}
.umschalter summary.mehrknopf::-webkit-details-marker{display:none}
.umschalter summary.mehrknopf .ikon{width:17px; height:17px; color:var(--tinte3)}
.umschalter details.mehr[open] summary.mehrknopf{background:var(--flaeche2); color:var(--tinte)}
/* GESETZ 38 GILT FUER JEDE LEISTE (20.09.2026). Christian zur Reiterleiste
   der Verwaltung: „Das muss doch dann genauso sein wie das Hauptmenü oben
   mit Mehr. So wie das jetzt ist, kann es nicht bleiben." Also dieselbe
   Mechanik, dieselbe Gestalt — nur in den Maßen dieser Leiste. */
.umschalter.vw summary.mehrknopf{font-size:14.5px; padding:7px 15px}
.umschalter.vw details.mehr{align-items:center}
.umschalter div.mehrblatt{position:absolute; right:0; top:calc(100% + 8px); z-index:40;
  min-width:220px; padding:6px; display:grid; gap:2px;
  background:var(--flaeche); border:1px solid var(--materialrand, var(--linie)); border-radius:14px;
  box-shadow:0 1px 2px rgba(0,0,0,.05), 0 18px 40px -20px rgba(0,0,0,.45)}
/* "MEHR"-DROPDOWN WAR NICHT LINKSBUENDIG (23.09.2026)
Christian: "Bitte linksbuendig ausrichten" (Screenshot: Icon+Text von "Unsere Familie" und "Nachlass" standen nicht auf einer Linie). GEMESSEN: Die allgemeine Menue-Pille-Regel .umschalter a{justify-content:center; text-align:center} ist fuer die kurzen Pillen oben (Chris/Ines/Zusammen) gedacht. Die spezifischere Regel hier fuer die Mehr-Klappe erbte justify-content/text-align von dort, weil sie diese beiden Eigenschaften nie selbst gesetzt hat - darum zentrierte jede Zeile ihren Inhalt einzeln statt linksbuendig zu stehen. Jetzt: justify-content:flex-start und text-align:left explizit gesetzt. */
.umschalter div.mehrblatt a{display:flex; align-items:center; justify-content:flex-start; gap:9px; padding:9px 12px;
  border-radius:10px; text-decoration:none; color:var(--tinte); font-size:14px; white-space:nowrap; text-align:left}
.umschalter div.mehrblatt a:hover{background:var(--flaeche2)}
.umschalter div.mehrblatt a .ikon{width:17px; height:17px; color:var(--tinte3)}
.umschalter.konten div.mehrblatt a .pbild{width:22px; height:22px; border-radius:50%; object-fit:cover}
.kopf .marke{margin:0; gap:9px; color:var(--akzent); flex:0 0 auto}
.umschalter.konten a.hh{padding-left:12px}
.umschalter.konten a.hh .ikon{width:17px; height:17px; color:var(--tinte3)}
.umschalter.konten a.hh.aktiv .ikon{color:currentColor}   /* auf der Akzent-Pille: Zeichen wie die Schrift (15.09.2026) */
/* Diese Verkleinerung hat ab dem 19.09.2026 keine Wirkung mehr: Unter
   1240 px steht gar keine Pillenleiste mehr da, sondern das Blattmenue.
   Sie bleibt als Auffanglinie stehen, falls die Schwelle je wieder
   sinkt — gedraengt ist immer noch besser als uebergelaufen. */
@media (max-width:900px){
  .umschalter.konten a{padding:6px 10px 6px 6px; font-size:13px; gap:6px; min-width:0}
  .umschalter.konten a.hh{padding-left:9px}
}
/* Ganz schmal (gemessen 390 px: 15 px Überlauf mit vier Namen): die
   Pillen, die nicht gewaehlt sind, zeigen nur ihr Bild oder Zeichen; der
   Name steht bei der gewaehlten. Der Weg bleibt, die Beschriftung faellt —
   dieselbe Regel wie bei den Wegen rechts. Seit der sechsten Pille (Vermögen, 14.09.2026) gilt das schon
   unter 720 px — gemessen: bei 600 px lief „Zusammen“ 5 px über. */
@media (max-width:760px){
  .umschalter.konten a:not(.aktiv){padding:6px 8px; flex:0 0 auto}
  .umschalter.konten a:not(.aktiv) .pname{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}
/* DER GEWAEHLTE PUNKT WIRD NICHT GEQUETSCHT (16.09.2026).
   Christian, mit Bild vom Telefon: „In der mobilen Ansicht gibt es noch ein Problem. Da steht
   ‚Zusammen‘ — das passt da nicht richtig rein."
   GEMESSEN bei 390 px: Der gewaehlte Punkt trug `flex:1 1 auto` und durfte damit schrumpfen; der
   Name bekam 11 px statt der noetigen 68 und stand halb unter den Portraets. Die Leiste rollt hier
   ohnehin waagerecht in sich selbst — dann braucht der gewaehlte Punkt nicht zu schrumpfen: Er
   steht ganz da, mit Bild UND Namen, und wer weiterwill, schiebt die Leiste. Nichts wird
   abgeschnitten, nichts liegt uebereinander. */
  .umschalter.konten a.aktiv{flex:0 0 auto; min-width:0}
  .umschalter.konten a.aktiv .pname{flex:0 0 auto}
/* GESETZ 20 (16.09.2026): VOR DEN DREI PUNKTEN STEHT EIN LEERZEICHEN.
   Christian: „Wenn ein Text abgebrochen wird, dann muss vor das Punkt, Punkt, Punkt ein
   Leerzeichen. Das habe ich jetzt mindestens fünfmal in Auftrag gegeben und es wurde nie
   berücksichtigt.“
   Der Grund, warum es nie kam: `text-overflow:ellipsis` setzt das Zeichen … selbst, ohne
   Leerzeichen, und daran kommt kein Text im HTML heran. CSS kennt aber eine zweite Form:
   text-overflow nimmt auch eine ZEICHENKETTE — und die darf mit einem Leerzeichen beginnen.
   Also steht überall " …" statt ellipsis. Eine Regel, alle Stellen; wer eine neue Kachel
   baut, schreibt dasselbe. Der Wächter pruef/auslassung.js misst es am fertigen Bild nach.

   GEMESSEN am selben Tag: Chrome setzt fuer <input> von sich aus text-overflow:ellipsis —
   auf der Steuer- und der Markenseite blieb das Zeichen deshalb ohne Leerzeichen stehen, und das
   Gesetz haette dort ein Loch gehabt. Darum tragen auch die Eingabefelder die Regel. */
input, textarea, input[type=file]{text-overflow:" …"}
  .umschalter.konten a.aktiv .pname{overflow:hidden; text-overflow:" …"; white-space:nowrap}
}
/* ACHT PILLEN PASSEN NICHT MEHR IN 390 px (16.09.2026, im Durchgang gemessen: 46 px Überlauf, seit
   „Versicherungen“ dazukam). Die Leiste rollt dann waagerecht in sich selbst — wie die Reiter in iOS —
   statt die ganze Seite zu verschieben. Die Rollleiste bleibt unsichtbar; der Rand gibt den Fingerplatz. */
@media (max-width:760px){
  .kopf .umschalter.konten{
    overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
    /* `min-width:0` ist der Unterschied zwischen „rollt in sich" und „schiebt die ganze Seite":
       Ohne ihn behaelt ein Flex-Element seine Inhaltsbreite als Mindestbreite bei, und die Leiste
       waechst ueber den Bildschirm hinaus. Gemessen am 16.09.2026 bei 390 px in der Sicht
       „Zusammen": Seite rollte waagerecht, mit dieser Zeile nur noch die Leiste. */
    scrollbar-width:none; max-width:100%; min-width:0; flex:1 1 auto;
  }
  .kopf .umschalter.konten::-webkit-scrollbar{display:none}
  .umschalter.konten a{flex:0 0 auto}
  /* UND DER KOPF GIBT DEN UEBERHANG NICHT WEITER (16.09.2026).
     GEMESSEN bei 390 px in der Sicht „Zusammen": Die Leiste rollte zwar in sich, das Dokument war
     aber trotzdem 394 px breit und die ganze Seite liess sich 19 px verschieben. Mit `clip` am Kopf
     bleibt es bei 375 px und die Seite steht still — die Leiste rollt weiter. Der Clipp-Rand von
     8 px laesst Platz fuer Schatten und Fokusring, damit nichts angeschnitten wirkt. */
  .kopf{overflow-x:clip; overflow-clip-margin:8px}
}
.kopf .marke span{font-size:15px; color:var(--tinte2)}
.kopf form{margin:0 0 0 auto; flex:0 0 auto}
button.abmelden{
  width:auto; background:transparent; color:var(--tinte3); font-weight:500;
  font-size:14.5px; padding:8px 2px;
}
button.abmelden:active{transform:none; color:var(--tinte2)}

/* DIE DECKUNGSWARNUNG — eine Information, kein Alarm.
   Christian am 12.09.2026: „Das sollte kein Alarm in dem Sinne sein,
   sondern es sollte eine Information sein und diese sollte oben
   moeglichst ausgespielt werden, dass man sie sieht."
   Deshalb traegt sie KEIN --bad und keinen roten Rand: Rot gehoert in
   dieser Anwendung dem, was schon schiefgegangen ist. Sichtbar wird sie
   ueber ihren Platz (ganz oben) und ueber einen kaum getoenten Grund —
   fuenf Prozent Markenfarbe reichen, damit die Karte sich vom Weiss der
   uebrigen Karten loest, ohne zu leuchten. Die Markenfarbe selbst traegt
   genau EIN Element: das Zeichen. Danach ist Ruhe.
   `color-mix` wird nur als ZWEITE Zeile gesetzt; ein Browser, der es
   nicht kennt, behaelt den vollen Flaechenton und verliert nichts als
   die Toenung. */
section.deckung{
  margin:0 0 20px; padding:20px 22px 18px;
  background:var(--flaeche);
  background:color-mix(in srgb, var(--akzent) 5%, var(--flaeche));
  border:1px solid var(--linie); border-radius:16px;
}
.dkkopf{display:flex; align-items:center; gap:10px; margin:0 0 10px}
.dkzeichen{display:inline-flex; flex:none; color:var(--akzent)}
.dkzeichen .ikon{width:17px; height:17px}
section.deckung h2{
  margin:0; font-size:15px; font-weight:600; letter-spacing:-.01em; color:var(--tinte);
}
.dksatz{
  margin:0; max-width:70ch; font-size:15px; line-height:1.6;
  color:var(--tinte2); text-wrap:pretty;
}
.dksatz b{font-weight:600; color:var(--tinte); font-variant-numeric:tabular-nums}

/* WARUM es knapp wird — die Posten, die den Einbruch machen.
   Sie stehen kleiner und stiller als der Satz: Wer handeln will, liest
   den Satz; wer nachrechnen will, liest die Liste. */




/* Der zweite Satz im Deckungshinweis: was ohne Termin aussteht. Leiser als die harte
   Aussage davor, weil er eine Moeglichkeit beschreibt und keinen Tag (16.09.2026). */
.dkoffen{display:block; margin-top:4px; color:var(--tinte2); font-size:13px}



/* Der Knopf zum Wegmachen. Er ist absichtlich NICHT in der Markenfarbe
   und nicht ueber die volle Breite: Wegklicken ist kein Ziel der Seite,
   es ist die Erlaubnis, weiterzuarbeiten. Er muss auffindbar sein und
   sonst nichts. */
.dktun{margin:16px 0 0}
button.dkknopf{
  width:auto; display:inline-flex; align-items:center; gap:9px;
  font:inherit; font-size:14.5px; font-weight:500; color:var(--tinte);
  min-height:var(--knopf); padding:0 18px; cursor:pointer;   /* auf der Skala 34/44/52, war 46 px */
  background:var(--flaeche); border:1px solid var(--linie); border-radius:12px;
}
button.dkknopf .ikon{width:16px; height:16px; color:var(--akzent); flex:none}
button.dkknopf:hover{background:var(--flaeche2)}
button.dkknopf:active{transform:none}

/* Weitere Luecken. Eine je Zeile, klein, jede fuer sich wegklickbar —
   sonst muesste man auf den naechsten Monat warten, um sie loszuwerden. */







/* Die Schlusszeile, wenn die Liste gekappt ist. Sie traegt keinen Knopf —
   es gibt dort nichts zu erledigen, nur etwas zu wissen. */


@media (max-width:560px){
  section.deckung{padding:17px 16px 15px}
  .dksatz{font-size:15px}
  button.dkknopf{width:100%; justify-content:center}
  /* Auf dem Telefon passt die Zeile „Tag – Text – Betrag" nicht mehr
     nebeneinander, und ein umbrechender Flex-Kasten liefert je nach
     Textlaenge mal zwei, mal drei Zeilen — die Liste sieht dann kaputt
     aus. Deshalb hier eine feste Form: Tag und Betrag oben, der Text
     darunter ueber die ganze Breite. Gleich fuer JEDE Zeile. */
  
  
  
  
  
}
/* DUNKEL WIRD GESCHALTET, NICHT GEERBT (20.09.2026). Christian:
   „ich möchte trotzdem diese Webseite schalten können, die ich gerade
   will ... und dass ich das nicht an der Betriebssystemeinstellung
   orientiere." Statt einer Media-Query steht hier ein Attribut auf
   <html>. Wer „wie das Gerät" waehlt, bekommt es von einem winzigen
   Skript gesetzt, BEVOR dieses Stylesheet greift — deshalb blitzt
   nichts auf. Eine Quelle, drei Zustaende. */

  /* Die dunkle Markenfarbe ist hell (#5FC8DC). Fuenf Prozent davon
     verschwinden auf dem dunklen Grund fast — acht Prozent geben
     dieselbe leise Abhebung wie in der hellen Ansicht, ohne zu leuchten.
     Der Knopf bekommt den Grundton statt der Flaeche, damit er sich vom
     getoenten Kartenruecken abhebt statt mit ihm zu verschmelzen. */
  :root[data-hell="dunkel"] section.deckung{background:color-mix(in srgb, var(--akzent) 8%, var(--flaeche))}
  :root[data-hell="dunkel"] button.dkknopf{background:var(--grund)}
  :root[data-hell="dunkel"] button.dkknopf:hover{background:var(--flaeche2)}


/* DER ABGLEICH GEGEN DIE ABBUCHUNGEN.
   Sie erbt die Machart der Deckungskarte darueber — gleicher Radius,
   gleicher Rand, gleiche Kopfzeile — aber NICHT deren Toenung: Zwei
   getoente Karten uebereinander heben sich gegenseitig auf, und die
   Deckungskarte ist die dringendere von beiden. Diese hier traegt den
   ruhigen Flaechenton und meldet sich allein ueber ihren Platz.
   Die Markenfarbe traegt auch hier genau EIN Element: das Zeichen. */
section.abgleich{
  margin:0 0 20px; padding:20px 22px 18px;
  background:var(--flaeche);
  border:1px solid var(--linie); border-radius:16px;
}
.agkopf{display:flex; align-items:center; gap:10px; margin:0 0 10px}
.agzeichen{display:inline-flex; flex:none; color:var(--akzent)}
.agzeichen .ikon{width:17px; height:17px}
section.abgleich h2{
  margin:0; font-size:15px; font-weight:600; letter-spacing:-.01em; color:var(--tinte);
}
.agsatz{
  margin:0; max-width:70ch; font-size:15px; line-height:1.6;
  color:var(--tinte2); text-wrap:pretty;
}

/* Ein Fall je Zeile: erst was im Plan steht, dann was die Bank zeigt,
   dann die zwei Knoepfe. Die Trennlinie steht OBEN, damit die letzte
   Zeile nicht mit einer Linie ins Leere endet. */
ul.agliste{
  list-style:none; margin:14px 0 0; padding:0;
  display:flex; flex-direction:column; gap:0; max-width:76ch;
}
ul.agliste li{
  padding:14px 0 4px; border-top:1px solid var(--linie);
}
ul.agliste li:first-child{border-top:0}
.agplan{
  margin:0; font-size:14.5px; line-height:1.5; color:var(--tinte2);
  overflow-wrap:anywhere; text-wrap:pretty;
}
.agplan b{font-weight:600; color:var(--tinte); font-variant-numeric:tabular-nums}
/* Der Beleg ist die Begruendung, nicht die Nachricht — kleiner und
   stiller. Wer handeln will, liest die Zeile darueber. */
.agbeleg{
  margin:4px 0 0; font-size:13px; line-height:1.5; color:var(--tinte3);
  overflow-wrap:anywhere; text-wrap:pretty;
}
.agbeleg b{font-weight:500; color:var(--tinte2); font-variant-numeric:tabular-nums}
.agwort{white-space:normal}

/* Zwei Knoepfe, zwei Gewichte: Entfernen ist die Handlung und sieht aus
   wie der Erledigt-Knopf der Deckungskarte; Wegwerfen ist nur die
   Erlaubnis weiterzuarbeiten und bleibt ein leiser Verweis. */
.agtun{display:flex; align-items:center; flex-wrap:wrap; gap:10px 16px; margin:11px 0 0}
.agtun form{margin:0}
button.agknopf{
  width:auto; display:inline-flex; align-items:center; gap:9px;
  font:inherit; font-size:14.5px; font-weight:500; color:var(--tinte);
  padding:9px 15px; cursor:pointer;
  background:var(--flaeche); border:1px solid var(--linie); border-radius:12px;
}
button.agknopf .ikon{width:16px; height:16px; color:var(--akzent); flex:none}
button.agknopf:hover{background:var(--flaeche2)}
button.agknopf:active{transform:none}
button.agleise{
  width:auto; background:transparent; border:0; padding:2px; cursor:pointer;
  font:inherit; font-size:12px; color:var(--tinte3);
  text-decoration:underline; text-underline-offset:3px;
}
button.agleise:hover{color:var(--tinte2)}
/* Die Schlusszeile der gekappten Liste — nichts zu tun, nur zu wissen. */
ul.agliste li.agmehr{
  color:var(--tinte3); font-size:12px; line-height:1.5; padding:11px 0 2px;
}

@media (max-width:560px){
  section.abgleich{padding:17px 16px 15px}
  .agsatz{font-size:15px}
  /* Untereinander statt nebeneinander: Zwei Knoepfe in einer Zeile
     ergeben auf dem Telefon zwei Halbzeilen, von denen die zweite
     aussieht wie ein verrutschter Rest. */
  .agtun{flex-direction:column; align-items:stretch; gap:9px}
  button.agknopf{width:100%; justify-content:center}
  button.agleise{align-self:flex-start}
}
/* DUNKEL WIRD GESCHALTET, NICHT GEERBT (20.09.2026). Christian:
   „ich möchte trotzdem diese Webseite schalten können, die ich gerade
   will ... und dass ich das nicht an der Betriebssystemeinstellung
   orientiere." Statt einer Media-Query steht hier ein Attribut auf
   <html>. Wer „wie das Gerät" waehlt, bekommt es von einem winzigen
   Skript gesetzt, BEVOR dieses Stylesheet greift — deshalb blitzt
   nichts auf. Eine Quelle, drei Zustaende. */

  /* Die Deckungskarte nimmt im Dunkeln acht Prozent Markenfarbe. Diese
     hier bleibt ungetoent und braucht stattdessen den Knopf auf dem
     Grundton, damit er sich von der Karte abhebt statt in ihr zu
     verschwinden. */
  :root[data-hell="dunkel"] button.agknopf{background:var(--grund)}
  :root[data-hell="dunkel"] button.agknopf:hover{background:var(--flaeche2)}


/* DIE FREIGABELEISTE — die einzige Stelle der Anwendung, die drängt.
   Sie erscheint nur, wenn die Bank wirklich wartet, und dann ganz oben.
   Rot umrandet wie ein Befund, aber mit dem Knopf in der Markenfarbe:
   Es ist kein Fehler, es ist eine Handlung, die JETZT ansteht. */
.tanleiste{
  margin:0 0 18px; padding:14px 16px 12px;
  background:var(--flaeche); border:1.5px solid var(--bad); border-radius:14px;
}
/* DER PROBELAUF SIEHT ANDERS AUS ALS DER ERNSTFALL (16.09.2026).
   Eine Übung, die aussieht wie eine echte Bankanfrage, wäre die nächste Unwahrheit: Der
   rote Rand heißt „Handlung nötig“. Beim Proben ist nichts nötig — also ruhiger Rand,
   ruhiges Zeichen, und im Text steht, dass keine Bank beteiligt ist. */
.tanleiste.probe{border-color:var(--linie); border-width:1px}
.tanleiste.probe .tanzeichen{color:var(--tinte3)}
.tankopf{display:flex; align-items:baseline; gap:9px; flex-wrap:wrap}
.tanzeichen{display:inline-flex; color:var(--bad); align-self:center}
.tanzeichen .ikon{width:17px; height:17px}
.tantitel{font-size:15px; font-weight:600; letter-spacing:-.01em; color:var(--tinte)}
.tanwann{font-size:12px; color:var(--tinte3)}
.tantext{margin:7px 0 0; font-size:13px; line-height:1.5; color:var(--tinte2); text-wrap:pretty}
.tanform{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:12px 0 0}
.tanform label{font-size:12px; color:var(--tinte2)}
.tanform input[type=text]{
  width:190px; font:inherit; font-size:15px; letter-spacing:.08em;
  padding:9px 12px; border:1px solid var(--linie); border-radius:10px;
  background:var(--grund); color:var(--tinte);
}
.tanform input[type=text]:focus{outline:2px solid var(--akzent); outline-offset:1px}
/* Die Anwendung setzt Knoepfe sonst auf volle Breite (Telefon zuerst).
   Hier waere das falsch: Der Knopf gehoert neben das Eingabefeld, nicht
   quer ueber die Leiste. Gemessen am 12.09.2026 im Bild. */
.tanform button.bkknopf{width:auto; flex:0 0 auto}
.tanweg{margin:8px 0 0; text-align:left}
.tanweg button{width:auto}
button.tanabbruch{
  background:transparent; border:0; padding:2px; cursor:pointer;
  font:inherit; font-size:12px; color:var(--tinte3);
  text-decoration:underline; text-underline-offset:3px;
}
button.tanabbruch:hover{color:var(--tinte2)}
.tanfuss{margin:9px 0 0; font-size:12px; line-height:1.5; color:var(--tinte3); text-wrap:balance}
@media (max-width:560px){
  .tanform input[type=text]{width:100%}
  .tanform button{width:100%; justify-content:center}
}

/* Die Abrufleiste steht unter der Kopfzeile, nicht in einem Aufklapper.
   Christian am 12.09.2026: „Ich finde keinen Button jetzt holen. Wo ist
   der?" — Er sass hinter einem geschlossenen Aufklapper weit unten.
   Genau EIN Element traegt hier die Markenfarbe: der Knopf, solange er
   sichtbar ist; laeuft der Abruf, ist es an seiner Stelle der Punkt. */
.abrufleiste{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin:0 0 18px; padding:10px 12px 10px 16px;
  background:var(--flaeche); border:1px solid var(--linie); border-radius:14px;
}
.alsatz{
  margin:0; display:flex; align-items:center; gap:9px;
  font-size:13px; line-height:1.45; color:var(--tinte2);
}
.alsatz b{font-weight:600; color:var(--tinte)}
/* Der Fortschrittsbalken unter dem Satz: eine feine Linie, die zur Marke
   hin fuellt. Kein Prozentwert als Zahl — die Stationen stehen im Satz. */
/* PROZENT UND RESTZEIT NEBEN DEM SATZ (17.09.2026) — leiser als der Satz, mit
   Zifferngleichstand, damit die Zahl beim Hochzaehlen nicht wackelt (Gesetz „Ruhe"). */
.alproz{margin-left:10px; font-size:12px; font-weight:600; color:var(--tinte2);
  font-variant-numeric:tabular-nums; white-space:nowrap}
.abrufleiste.veraltet .alproz{color:var(--bad)}
/* STATUSZEILE AUF DEM TELEFON (26.09.2026). Christian: „Die wird irgendwie abgeschnitten. Das ist nicht professionell.“
   Gemessen bei 390 px: Der Fortschrittssatz stand ohne Umbruch neben dem Text und lief 84 px über den Rand, der Text selbst wurde auf 68 px gequetscht.
   Jetzt darf die Zeile umbrechen; auf schmalen Geräten steht der Fortschritt unter dem Text, bündig mit ihm, in zwei ausgeglichenen Zeilen. */
.alsatz{flex:1 1 auto; min-width:0; flex-wrap:wrap; row-gap:2px}
.alzeichen{flex:none}
.altext{flex:0 1 auto; min-width:0}
.alproz{white-space:normal; min-width:0; text-wrap:balance}
@media (max-width:560px){ .alproz{flex:0 1 calc(100% - 24px); margin-left:24px} }

.albalken{flex:1 0 100%; order:9; height:3px; border-radius:2px; background:var(--flaeche2); overflow:hidden; margin:-2px 0 2px}
.albalken > span{display:block; height:100%; background:var(--akzent); border-radius:2px; transition:width .9s cubic-bezier(.22,.61,.36,1)}
.abrufleiste.frischgut .albalken > span{background:var(--gut)}
/* DAS ZEICHEN LINKS ERZAEHLT DEN ZUSTAND.
   Christian am 13.09.2026: „Es muss eine Art Rädchen geben, das sich dreht
   … und wenn's dann da ist, bleibt das Rädchen still und wird zu einem
   grünen Haken."
   Vier Zeichen liegen uebereinander an derselben Stelle; sichtbar ist immer
   genau eines. Dadurch bleibt die Zeile beim Wechsel exakt gleich breit —
   nichts verschiebt sich, waehrend sich der Zustand aendert. */
.alzeichen{
  display:inline-flex; flex:none; color:var(--tinte3);
  position:relative; width:18px; height:18px; align-items:center; justify-content:center;
}
.alzeichen > *{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .2s ease;
}
/* „Ruht" heisst auch „fertig" — die Datenbank kennt beide Worte fuer
   denselben Zustand (`abruf_lage` steht nach einem Lauf auf „fertig").
   Deshalb wird hier NEGATIV geprueft: alles, was nicht laeuft und nicht
   fehlgeschlagen ist, ist Ruhe. Sonst bliebe das Zeichen leer, und niemand
   saehe je, dass alles in Ordnung ist. */
.abrufleiste:not([data-lage="laeuft"]):not([data-lage="gewuenscht"]):not([data-lage="fehler"]) .alruhe{opacity:1}
.abrufleiste[data-lage="fehler"] .albang{opacity:1}
.abrufleiste.laeuft .alrad{opacity:1}
.abrufleiste.frischgut .alruhe{opacity:0}
.abrufleiste.frischgut .alhaken{opacity:1}

/* Das Raedchen: ein Ring mit einer Luecke, der sich dreht. Kein Bild, kein
   Nachladen — zwei Zeilen CSS. */
.alrad::before{
  content:''; width:15px; height:15px; border-radius:50%;
  border:2px solid color-mix(in srgb, var(--akzent) 28%, transparent);
  border-top-color:var(--akzent);
  animation:aldreh .75s linear infinite;
}
@keyframes aldreh{to{transform:rotate(360deg)}}

/* Der Haken wird gezeichnet, nicht getippt: zwei Striche, die nacheinander
   wachsen. Ein Haken, der einfach da ist, wird uebersehen; einer, der
   entsteht, sagt „fertig". */
.alhaken::before{
  content:''; width:16px; height:16px;
  background:no-repeat center/16px 16px
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.4 8.6l3 3 6.2-7' fill='none' stroke='%231D6B4F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  animation:alhak .45s cubic-bezier(.22,.61,.36,1);
}
@keyframes alhak{from{transform:scale(.5); opacity:0} to{transform:scale(1); opacity:1}}
.abrufleiste.frischgut{border-color:var(--gut)}
.abrufleiste.frischgut .altext{color:var(--gut)}
@media (prefers-reduced-motion: reduce){
  .alrad::before{animation-duration:2s}
  .alhaken::before{animation:none}
}
.alform[hidden]{display:none}
.alzeichen .ikon{width:16px; height:16px}
.abrufleiste.laeuft .alsatz{color:var(--akzent); font-weight:500}
/* Stockt es, traegt nur das Zeichen die Warnfarbe — der Satz bleibt
   ruhig lesbar, der Knopf bleibt das einzige Element in der Marke. */
/* Der Streifen fuer den 90-Tage-Termin. Bernstein, solange nur erinnert
   wird („steht noch aus"), rot, sobald es wirklich klemmt. Er nimmt die
   Breite des Blattes und steht ueber allem — aber nur, wenn es ihn braucht. */
.scabalken{
  display:flex; align-items:center; gap:10px; margin:0 0 14px;
  padding:11px 14px; border-radius:var(--karteradius);
  background:var(--flaeche); border:1.5px solid var(--warte);
  color:var(--wartetinte); font-size:14.5px; line-height:1.4;
}
.scabalken > span{flex:1 1 auto; min-width:0}
/* Der Knopf sieht aus wie der Verweis, der hier stand — er tut jetzt nur etwas
   (18.09.2026). Dieselbe Handlung sieht ueberall gleich aus, also aendert sich
   das Bild nicht, obwohl sich die Wirkung geaendert hat. */
.scabalken > a,
.scabalken > button{
  flex:0 0 auto; color:var(--wartetinte); font-weight:600;
  text-decoration:underline; text-underline-offset:3px;
  padding:6px 10px; margin:-6px -4px -6px 0; border-radius:8px;
  background:none; border:0; font-size:inherit; font-family:inherit; cursor:pointer;
  width:auto; height:auto; box-shadow:none;
}
.scabalken > button:hover{background:color-mix(in srgb, var(--wartetinte) 10%, transparent)}
.scabalken.jetzt{border-color:var(--bad); color:var(--bad)}
.scabalken.jetzt > button{color:var(--bad)}
form.scabalkenform{margin:0}

/* Der zweite Weg zur Marke: die Adresse beim Anbieter. Er steht unter dem
   Hochladen, schmaler und leiser — beide führen zum selben Ziel. */
form.bmholen{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:6px}
form.bmholen input[type=url]{
  flex:1 1 260px; min-width:0; height:34px; padding:0 10px;
  border:1px solid var(--linie); border-radius:9px; background:var(--flaeche);
  color:var(--tinte); font:inherit; font-size:13px;
}
form.bmholen input[type=url]:focus{outline:2px solid var(--akzent); outline-offset:1px}
form.bmneuholen p.vwsatz{grid-column:1 / -1; margin:0}
form.bmneuholen input[type=url], form.bmneuholen input[type=text]{
  height:38px; padding:0 10px; border:1px solid var(--linie); border-radius:9px;
  background:var(--flaeche); color:var(--tinte); font:inherit; font-size:13.5px; min-width:0;
}

/* Die Zugangsliste in Verwaltung › Konten. Ein Zustand je Zeile, als Satz. */
.kbsca{margin:0 0 22px}
.scaliste{list-style:none; margin:12px 0 0; padding:0; display:grid; gap:10px}
/* DIE MARKENSPALTE IST FEST BREIT (18.09.2026). Christian: „die Texte stehen hier nicht
   in einer Ebene. Consorsbank, VR-Bank, muss doch in einer Ebene stehen. Kannst du doch
   nicht so schief und krumm machen."
   GEMESSEN: Die Spalte stand auf `auto`, war also so breit wie das Bild — Consorsbank 28 px,
   VR Bank 41 px. Die Texte begannen dadurch bei 253 und 265 px, 12 px versetzt. Eine Spalte,
   deren Breite vom Inhalt abhaengt, kann keine Kante bilden; jede neue Marke haette die
   Ausrichtung wieder verschoben. Also feste Breite, Bild darin zentriert: Die Textkante
   liegt fest, egal welche Marke daneben steht und welche noch dazukommt. */
.scazeile{
  display:grid; grid-template-columns:46px 20px minmax(0,1fr); align-items:center; gap:12px;
  padding:12px 14px; border:1px solid var(--linie); border-radius:var(--karteradius);
  background:var(--flaeche);
}
.scamarke{display:flex; align-items:center; justify-content:center; width:46px; height:36px}
/* `height:auto` HAT DIE MARKEN VERSCHWINDEN LASSEN (18.09.2026, sofort gemessen):
   `.bankmarke` setzt `height:var(--bmh)`; mein `height:auto` hat das ueberschrieben,
   und ohne eigene Hoehe fiel das Bild in einem Flex-Element auf 0 x 0 zusammen.
   Gemessen unmittelbar nach der Auslieferung: „Logo 0x0" bei beiden Banken.
   Also die Hoehe NICHT anfassen, nur deckeln — die Marke behaelt ihre gerechnete
   Groesse (markeAnzeige), passt aber garantiert in die feste Spalte. */
.scamarke .bankmarke{max-width:46px; max-height:36px; object-fit:contain}
.scazeichen{display:flex; align-items:center; justify-content:center}
.scasatz{font-size:14.5px; line-height:1.45; min-width:0}
.scasatz b{display:block; font-size:13px; letter-spacing:.02em}
.scasatz small{display:block; margin-top:3px; font-size:12px; color:var(--tinte3)}
/* DER MAILBLOCK KLEBT NICHT MEHR AN DER LISTE (18.09.2026). Christian: „der Text, die
   Erinnerung geht raus und so weiter, der klebt ja förmlich wieder am Bereich davor, das
   sieht doch einfach furchtbar aus." GEMESSEN: 0 px Abstand zwischen Liste und Block.
   Ein eigener Gedanke braucht einen eigenen Abstand — sonst liest er sich als Fussnote
   der Zeile darueber. */
.scamail{margin-top:22px; padding-top:18px; border-top:1px solid var(--linie)}
.scamail .ein-gemessen{margin:0 0 12px}
.scamail .einform{margin-top:14px}
.scazeile.art-gut .scazeichen{color:var(--gut)}
.scazeile.art-gut{border-color:color-mix(in srgb, var(--gut) 35%, var(--linie))}
.scazeile.art-bald .scazeichen{color:var(--wartetinte)}
.scazeile.art-bald{border-color:var(--warte)}
.scazeile.art-faellig .scazeichen, .scazeile.art-unbekannt .scazeichen{color:var(--bad)}
.scazeile.art-faellig, .scazeile.art-unbekannt{border-color:var(--bad)}
.scatun{
  display:flex; align-items:center; gap:8px; margin:12px 0 0;
  font-size:13px; color:var(--tinte2);
}
@media (max-width:560px){
  .scazeile{grid-template-columns:20px minmax(0,1fr); row-gap:8px}
  .scamarke{grid-column:1 / -1}
}
.scabalken.jetzt > a{color:var(--bad)}
@media (max-width:560px){ .scabalken{flex-wrap:wrap} .scabalken > a{margin-left:26px} }
/* DREI ZUSTAENDE, NICHT ZWEI (16.09.2026).
   Christian, mit einem Bild der roten Leiste: „Hat nichts Neues gebracht, ist ja
   nichts Schlimmes … Aber bitte doch nicht in Rot und als Alarm. Wenn es wirklich
   zu einem Fehler kommt, dann muss der Waechter anspringen und dann muss es rot
   sein. Jetzt hast Du overacted."

   Er hat recht. Nach dem Befund vom 15.09. hatte ich JEDE Zahl, die nicht von
   heute war, in die Warnfarbe gesetzt — also auch jeden Montagmorgen, an dem seit
   Freitag nichts gebucht wurde. Eine Anzeige, die immer schreit, wird nicht mehr
   gelesen, und dann geht die echte Warnung unter.

   `ruhig`    — der Abruf lief, es gab nur nichts zu holen. Normale Schrift, das
                ruhige Zeichen, kein Rand in Signalfarbe. Ein Hinweis, mehr nicht.
   `veraltet` — seit mehr als drei BANKARBEITSTAGEN kommt nichts an, obwohl
                stuendlich gefragt wird. Das ist eine Stoerung, und die ist rot.
   `stockt`   — der Abruf selbst ist gescheitert. Ebenfalls rot. */
.abrufleiste.ruhig .altext{color:var(--tinte2)}
.abrufleiste.ruhig .alzeichen{color:var(--tinte3)}
.abrufleiste.ruhig .alruhe{opacity:1}
.abrufleiste.ruhig .albang{opacity:0}

.abrufleiste.veraltet{border-color:var(--bad)}
.abrufleiste.veraltet .altext{color:var(--bad); font-weight:600}
.abrufleiste.veraltet .alzeichen{color:var(--bad)}
.abrufleiste.veraltet .alruhe{opacity:0}
.abrufleiste.veraltet .albang{opacity:1}
.abrufleiste.stockt{border-color:var(--bad)}
.abrufleiste.stockt .alzeichen{color:var(--bad)}

/* ================================================================== *
 *  DIE STILLE ZEILE (19.09.2026)
 *
 *  Christian, vom iPad: „Diese Meldung, die ist einfach noch nicht sexy …
 *  die nimmt so viel Platz oben ein … Das ist eher so eine kleinere
 *  Meldung wert."
 *
 *  GEMESSEN bei 850 px: 141 px hoch, drei Zeilen, mit Rahmen, Fläche und
 *  Schatten — also eine KARTE, gleichwertig neben „Mein Stand" und der
 *  Kurve. Sie meldet aber nur, dass alles seinen Gang geht. Etwas, das
 *  nichts zu sagen hat, darf nicht aussehen wie etwas, das etwas zu sagen
 *  hat.
 *
 *  SOLANGE ES RUHIG IST, ist es deshalb keine Karte mehr, sondern eine
 *  Zeile: kein Rahmen, keine Fläche, kein Schatten, kleinere Schrift, und
 *  der Knopf daneben ist ein leiser Umriss statt einer grünen Fläche.
 *
 *  UND WENN ETWAS IST, ist die Karte sofort wieder da: `.stockt` (Abruf
 *  gescheitert) und `.veraltet` (seit Bankarbeitstagen kommt nichts an)
 *  behalten Rahmen, Fläche und Farbe. Ruhig, wenn es ruhig ist; laut, wenn
 *  es laut sein muss — dieselbe Regel wie im Cockpit.
 * ================================================================== */
#blatt > .abrufleiste:not(.stockt):not(.veraltet){
  background:none; border:0; box-shadow:none; border-radius:0;
  padding:0 2px; margin:0 0 14px; gap:10px 14px; min-height:34px;
}
#blatt > .abrufleiste:not(.stockt):not(.veraltet) .alsatz{font-size:13px; color:var(--tinte3)}
#blatt > .abrufleiste:not(.stockt):not(.veraltet) .alzeichen{width:15px; height:15px}
#blatt > .abrufleiste:not(.stockt):not(.veraltet) .alzeichen .ikon{width:13px; height:13px}
/* Der Knopf: gleiche Handlung, leiserer Ton. Er bleibt ein Knopf mit
   Trefferfläche — nur sieht er nicht mehr nach Hauptbefehl aus. */
#blatt > .abrufleiste:not(.stockt):not(.veraltet) button.bkknopf{
  width:auto; min-height:32px; height:32px; padding:0 13px; gap:7px;
  background:transparent; color:var(--tinte2);
  border:1px solid var(--linie); box-shadow:none;
  /* Lesbar, nicht nur leise (20.09.2026, vom Kontrastwaechter gemeldet:
     2,7 : 1). --tinte2 statt --tinte3 bringt 4,6 : 1, ohne den Knopf
     lauter zu machen. */
  font-size:13px; font-weight:500; border-radius:9px; color:var(--tinte2);
}
#blatt > .abrufleiste:not(.stockt):not(.veraltet) button.bkknopf:hover{
  background:var(--flaeche2); color:var(--tinte); border-color:var(--tinte3);
}
#blatt > .abrufleiste:not(.stockt):not(.veraltet) button.bkknopf .ikon{width:13px; height:13px}

/* DIE STATUSZEILE WANDERT INS MENÜ (25.09.2026, nachgebessert 25.09.2026 nachmittags).
   Christian: „Letzter Kontoabruf, dass das sozusagen angeflanscht wird
   unterhalb vom Menü" — gegengeprüft am Entwurf, den er dazu geschickt
   hatte (entwurf-statuszeile.html).

   ERSTER ANLAUF (verworfen): Die Zeile wurde per :has() nur zu einem
   FLEX-GESCHWISTER von nav.umschalter.konten innerhalb von .kopf gemacht —
   sie lag zwar direkt darunter, aber in keinem gemeinsamen Kasten: kein
   gemeinsamer Hintergrund, kein gemeinsamer Rahmen, die Trennlinie lief
   über die volle Kopf-Breite statt nur über die Pillenbreite. Christian
   danach: „Wir haben doch gesagt, wir wählen den unteren Entwurf" — im
   Entwurf steckt die Zeile ALS ZWEITE REIHE IM SELBEN Menü-Kasten, nicht
   nur in seiner Nähe.

   ZWEITER ANLAUF (dieser): Ein neuer Kasten .kopfkasten umschliesst jetzt
   BEIDES — die Kontoleiste (kontoleiste() liefert nav.umschalter.konten
   fuer den Schreibtisch und details.mn fuers Telefon in einem Aufruf) UND
   die Abrufleiste. Der Kasten traegt die Flaeche, den Rahmen, den Schatten
   und die Rundung, die vorher auf nav.umschalter.konten selbst lagen; die
   Pille wird deshalb an genau dieser Stelle unsichtbar gemacht (siehe
   .kopfkasten > .umschalter.konten unten) — sie behaelt ihre Auspolsterung
   (padding:3px aus der allgemeinen .umschalter-Regel), nur die aeussere
   Box wandert eine Ebene hoeher. Ueberall sonst in der Anwendung, wo
   .umschalter vorkommt (Zeitfenster, Sichten, andere Leisten), ist nichts
   veraendert — die Regel ist auf ".kopfkasten >" verengt.

   Die Abrufleiste ist jetzt echtes zweites Kind desselben Kastens statt
   Geschwister von aussen: dieselbe Flaeche, derselbe Rahmen, nur eine
   duenne Trennlinie zwischen den beiden Reihen. Chris ausdruecklich dazu:
   „so übernehmen, aber nicht mit farbigen Icons — die bleiben, wie sie
   sind." Die Zeichen (zeichen()) sind unveraendert.

   Ist wirklich etwas los (.stockt, .veraltet), bleibt die Zeile die
   eigene, auffaellige Karte von vorher (Rahmen in --bad, eigene Randung
   unten im Kasten) — ein echter Stoerfall gehoert nicht in eine
   Menuezeile, wo er untergeht.

   .kopfkasten steht in JEDEM .kopf, auch ohne Bankkonten (dann ohne
   zweite Reihe) — das Aussehen der Pille aendert sich dadurch nicht,
   nur die Box, die sie traegt, sitzt eine Ebene hoeher. `overflow` bleibt
   auf visible: Das Aufklappfeld „Mehr" haengt als position:absolute an
   nav.umschalter.konten und wuerde von einem eigenen overflow:hidden am
   Kasten abgeschnitten. */
.kopf > .kopfkasten{
  flex:0 1 auto; min-width:0; max-width:100%; position:relative;
  background:var(--flaeche2); border:1px solid var(--materialrand);
  box-shadow:0 1px 2px rgba(0,0,0,.05), 0 10px 30px -18px rgba(0,0,0,.35);
  border-radius:var(--wahlleiste);
}
.kopfkasten > .umschalter.konten{background:none; border:0; box-shadow:none; border-radius:0}
.kopfkasten > .abrufleiste:not(.stockt):not(.veraltet){
  background:none; border:0; box-shadow:none; border-radius:0;
  margin:0; padding:10px 13px; gap:10px 14px; min-height:34px;
  border-top:1px solid var(--linie);
}
.kopfkasten > .abrufleiste:not(.stockt):not(.veraltet) .alsatz{font-size:13px; color:var(--tinte3)}
.kopfkasten > .abrufleiste:not(.stockt):not(.veraltet) .alzeichen{width:15px; height:15px}
.kopfkasten > .abrufleiste:not(.stockt):not(.veraltet) .alzeichen .ikon{width:13px; height:13px}
.kopfkasten > .abrufleiste:not(.stockt):not(.veraltet) button.bkknopf{
  width:auto; min-height:32px; height:32px; padding:0 13px; gap:7px;
  background:transparent; color:var(--tinte2);
  border:1px solid var(--linie); box-shadow:none;
  font-size:13px; font-weight:500; border-radius:9px;
}
.kopfkasten > .abrufleiste:not(.stockt):not(.veraltet) button.bkknopf:hover{
  background:var(--flaeche2); color:var(--tinte); border-color:var(--tinte3);
}
.kopfkasten > .abrufleiste:not(.stockt):not(.veraltet) button.bkknopf .ikon{width:13px; height:13px}
.kopfkasten > .abrufleiste.stockt, .kopfkasten > .abrufleiste.veraltet{
  margin:10px -1px -1px; border-radius:0 0 var(--wahlleiste) var(--wahlleiste);
}

.alrechts{display:flex; align-items:center; gap:16px; margin-left:auto}
.alrechts form{margin:0}
/* Der Vorbehalt bei der Zahl in „Mein Stand" — leiser als der Bankstand
   davor, weil er ihn einschraenkt und nicht ersetzt. */



@media (max-width:560px){
  .abrufleiste{align-items:flex-start; padding:12px 14px}
  .alrechts{width:100%; margin-left:0; justify-content:space-between}
}

.umschalter{
  display:flex; gap:3px; padding:3px; background:var(--flaeche2);
  border-radius:var(--wahlleiste); flex:0 1 auto;
}
.umschalter a{
  padding:6px 18px 6px 8px; border-radius:var(--wahl); text-decoration:none; text-align:center;
  color:var(--tinte2); font-size:14.5px; font-weight:500; letter-spacing:-.01em;
  transition:background .16s ease, color .16s ease; white-space:nowrap;
}
/* DIE BEREICHSLEISTE BRICHT UM, STATT AUSZUFRANSEN (16.09.2026).
   Christian: „Ich finde es nicht schick, dass das Untermenü so abgeschnitten wird … irgendwie wirkt
   es unvollständig und unsauber, wenn da ‚Mitteilung' steht und dann im Nirvana versandet. Wenn man
   die Seite kleiner skaliert, dann ist das Menü ganz weg und man kommt gar nicht auf die Idee, dass
   man da überhaupt weiter raus kann. Schau, wie Apple das macht."

   ER HAT RECHT, UND ZWEIMAL. Vorher rollte die Leiste waagerecht in sich selbst und blendete an den
   Raendern aus. Das ist die iOS-Reiterleiste — sie taugt fuer fuenf Reiter, die man mit dem Daumen
   schiebt. Fuer DREIZEHN Bereiche am Schreibtisch taugt sie nicht: Der letzte Bereich stand
   halbiert da, und ein halbes Wort sieht nicht nach „hier geht es weiter" aus, sondern nach einem
   Fehler. Schlimmer: Unter 760 px machte eine alte Regel `display:grid` daraus — die Leiste fiel in
   sich zusammen und der Weg zu den hinteren Bereichen war weg, ohne dass man es merkte.

   WAS APPLE TUT, wenn Wahlmoeglichkeiten nicht in eine Zeile passen: Es versteckt keine. In den
   Systemeinstellungen stehen alle Bereiche untereinander, in der Symbolleiste bricht die Reihe um.
   Verborgen wird nur, was man im Zweifel nicht braucht — ein Bereich der Verwaltung gehoert nicht
   dazu.

   ALSO BRICHT DIE REIHE UM. Kein Rollen, keine Maske, kein halbes Wort: Jeder Bereich steht immer
   ganz da, in jeder Breite. Die Zeilen sitzen mittig untereinander; die Leiste waechst nach unten,
   und weil sie klebt, waechst der Abstand darunter mit. */
.umschalter.vw{
  display:flex; justify-content:center;
  gap:4px; max-width:100%; flex:1 1 auto;
  padding:5px; overflow:visible;
}
.umschalter.vw a{flex:0 0 auto; padding:7px 13px}
/* Die Bereiche der Verwaltung als zweite Reihe unter der Kontoleiste. */
.umschalter.vw.vwreihe{margin:-6px 0 18px}

/* UND WENN EINE ZEILE NICHT REICHT, wird ein RASTER daraus — keine ausgefranste Reihe.
   GEMESSEN am 16.09.2026: Bei 1180 px war der Inhalt 20 px zu breit; die Reihe brach um und
   „Mitteilungen“ stand allein in der zweiten Zeile. Das sieht nach Unfall aus, nicht nach Absicht.
   Ein Raster mit gleich breiten Feldern bricht dagegen in ordentliche Bloecke — jedes Wort ganz,
   jede Zeile gefuellt, wie die Felder im Kontrollzentrum. Die Grenze ist gemessen, nicht geraten:
   Bis 1200 px passt die Reihe mit Luft einzeilig, darunter nicht mehr. */
@media (max-width:1180px){
  .umschalter.vw{ display:grid; gap:3px; justify-content:stretch; grid-template-columns:repeat(6, 1fr); }
  .umschalter.vw a{padding:7px 10px; font-size:14.5px; min-width:0;
                   overflow:hidden; text-overflow:" …"}
  /* GEMESSEN 22.09.2026, von Christian gemeldet („schief und krumm"): Zwoelf Bereiche teilen 6, 4, 3
     und 2 Spalten glatt auf (s.u.) — aber „Mehr" ist ein DREIZEHNTES Feld im selben Raster. 13 laesst
     sich durch keine dieser Zahlen glatt teilen, also blieb „Mehr" bei JEDER Breite allein in der
     letzten Zeile und klebte, wie jedes Rasterfeld ohne eigene Regel, links an Spalte 1 — genau das
     Unfall-Bild, das die Zeile oben eigentlich vermeiden sollte. Die Zeile bekommt jetzt eine eigene
     Regel: „Mehr" spannt die ganze Breite der letzten Zeile und steht darin mittig — eine bewusste
     Abschlusszeile statt eines schiefen Rests. */
  .umschalter.vw details.mehr{grid-column:1/-1; justify-self:center}
}
/* Die Spaltenzahl ist nicht dem Zufall ueberlassen: „auto-fit" fuellte bei 1180 px neun Spalten und
   liess drei Woerter allein in der zweiten Zeile stehen — wieder der Unfall-Eindruck. Bei zwoelf
   Bereichen teilen 6, 4 und 3 Spalten glatt auf; die Zeilen sind dann gleich lang. */
@media (max-width:760px){ .umschalter.vw{grid-template-columns:repeat(4, 1fr)} }
@media (max-width:560px){
  .umschalter.vw{grid-template-columns:repeat(3, 1fr)}
  .umschalter.vw a{padding:7px 8px; font-size:13px}
}
@media (max-width:360px){ .umschalter.vw{grid-template-columns:repeat(2, 1fr)} }

/* ---------- Die Menschen hinter den Konten --------------------------- *
 * Ein rundes Bild vor dem Namen. Liegt keines vor, traegt derselbe Kreis
 * den Anfangsbuchstaben in der Farbe des Menschen — die Oberflaeche sieht
 * also NIE leer aus, auch nicht am ersten Tag. Bilder laedt Chris unter
 * Verwaltung, Marke, Abschnitt „Unsere Porträts" hoch (person-chris.jpg,
 * person-ines.jpg, person-una.jpg). Seit 16.09.2026 NUR dort — im oberen
 * Markenabschnitt standen sie ein zweites Mal, das war doppelt gepflegt.
 * Groesse und Form stehen hier EINMAL; wer sie aendert, aendert sie
 * ueberall — Umschalter, Zeitreise, Nebenkonten.                        */
/* GROESSE: Christian am 12.09.2026: „die bilder sind zu klein".
   GEMESSEN vorher: 22 px im Umschalter, 20 px bei „Zusammen" — auf einem
   1440-px-Schirm ist ein Gesicht darin nicht zu erkennen. Jetzt 34 px
   (bzw. 30 px je Kreis bei „Zusammen"), also gut anderthalbfach. Der
   Umschalter bekommt dafuer mehr Innenraum, sonst klebt das Bild am Text.
   Auf 390 px bleibt es bei 28 px, damit die drei Eintraege nebeneinander
   passen — dort zaehlt, dass die Zeile nicht umbricht. */
.pbild{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:14.5px; font-weight:600; letter-spacing:.01em; line-height:1;
  color:var(--aufakzent); overflow:hidden; vertical-align:middle;   /* Initiale auf der Personenfarbe — siehe SCHRIFT AUF FARBE */
  box-shadow:inset 0 0 0 1px rgba(15,30,31,.10);
}
img.pbild{object-fit:cover; display:block}
.pbild.p-cons{background:var(--pchris)}
.pbild.p-volk{background:var(--pines)}
/* Unà (16.09.2026): ein dritter Ton, der neben den beiden anderen steht und sich von ihnen
   unterscheidet, ohne aus der Palette zu fallen. Gemessen gegen Weiß: 5,2. */
.pbild.p-una{background:var(--puna)}

/* „Zusammen" = beide, leicht ueberlappend. Der Ring in der Grundfarbe
   trennt die zwei Kreise optisch, damit sie nicht zu einer Form
   verschmelzen. */
.pzus{
  width:auto; height:34px; border-radius:0; background:none;
  box-shadow:none; gap:0; overflow:visible;
}
.pzus .pbild{width:30px; height:30px; font-size:12px;
  box-shadow:0 0 0 2px var(--flaeche2), inset 0 0 0 1px rgba(15,30,31,.10)}
.pzus .pbild + .pbild{margin-left:-10px}
/* GEMESSEN 25.09.2026 (Chris: "die ueberlappt zu sehr und sprengt dort den Rahmen"):
   span.mnmarke .pbild (fuer den grossen Einzel-Avatar gedacht) traegt min-width:44px.
   Weil der Zusammen-Stapel innerhalb von .mnmarke liegt, hebt dieses min-width die
   kleinen 25-30px-Kreise auf 44px Breite an, waehrend die Hoehe klein bleibt - aus dem
   Kreis wird ein Oval, das den Ring/Rahmen sprengt. Hier gezielt zurueckgesetzt, ohne
   den grossen Einzel-Avatar anderswo anzutasten. */
.mnmarke .pzus .pbild{min-width:0}

/* Der Umschalter traegt jetzt Bild UND Name — also Reihe statt Block. */
.umschalter a{display:inline-flex; align-items:center; justify-content:center; gap:8px}
.umschalter a.aktiv .pzus .pbild{box-shadow:0 0 0 1.5px var(--flaeche), inset 0 0 0 1px rgba(15,30,31,.10)}

/* GEMESSEN 22.09.2026: Hier stand noch eine ZWEITE, aeltere Raster-Regel fuer .umschalter.vw bei
   760 px — aus der Zeit, als die Verwaltung fuenf statt sechzehn Bereiche hatte („fuenf Reiter statt
   vier"). Sie nutzte „auto-fit", genau das Verfahren, das die Regel oben (820/520/360 px) bewusst
   verworfen hat, weil auto-fit die Spaltenzahl vom Zufall der Fensterbreite abhaengig macht statt von
   der Anzahl der Bereiche — und weil beide Regeln dieselbe Spezifitaet trugen, gewann bei ≤760 px
   IMMER diese hier, nicht die gemessene daneben. Das war die zweite Ursache von Christians Befund
   „schief und krumm": zwei Bauteile an einer Stelle, wie beim Knopf-Fehler vom selben Tag. Ersatzlos
   entfernt — „ein Bauteil, eine Quelle"; die Regel bei 820/520/360 px deckt jede Breite darunter
   bereits sauber ab, jetzt ohne Gegenspieler. */
@media (max-width:560px){
  .pbild{width:28px; height:28px; font-size:12px}
  .pzus{height:28px}
  .pzus .pbild{width:26px; height:26px; font-size:11.5px}
  .pzus .pbild + .pbild{margin-left:-8px}
  .umschalter a{padding:5px 12px 5px 6px; gap:6px; font-size:13px}
}


/* ---------------------------------------------------------------- Auswertung
   „Wohin das Geld geht": ein Kreis und eine Liste, die dieselben Farben und
   dieselben Zeichen benutzen. Wer im Kreis auf ein Stueck zeigt, findet es
   in der Liste an derselben Farbe wieder — deshalb kommt die Reihenfolge
   aus EINER Quelle und wird nicht zweimal berechnet. */
section.auswertung{
  background:var(--flaeche); border:var(--karterand); border-radius:var(--karteradius); box-shadow:var(--karteschatten);
  padding:18px 18px 16px; margin-bottom:20px;
}
.awkopf{display:flex; justify-content:space-between; align-items:flex-start; gap:18px; flex-wrap:wrap; margin-bottom:16px}
.awkopf h2{margin:0 0 3px; font-size:15px; font-weight:600; letter-spacing:-.01em; color:var(--tinte)}
.awkopf p{margin:0; font-size:12px; color:var(--tinte3); line-height:1.5; max-width:62ch}
.awsumme{display:flex; flex-direction:column; align-items:flex-end; gap:1px; margin:0 !important; white-space:nowrap}
.awsumme span{display:flex; align-items:center; gap:5px; font-size:12px; letter-spacing:.03em;
  text-transform:uppercase; color:var(--tinte3)}
.awsumme span .ikon{width:13px; height:13px; vertical-align:0; opacity:.6}
/* HAUSHALTSKONTO: EINE FLUCHT (26.09.2026). Das " €" der Summe stand in
   20px - breiter als in den Zeilen (12,5px Plex Mono), die letzte Ziffer
   daher 3,4px rechts der Zeilenziffern. Jetzt eigenes Element in der
   Zeilenschrift, 1,2em = zwei Zeichen breit wie " €" in der Zeile.
   Gemessen: Ziffern 1318,5 = 1318,5, Euro 1333,5 = 1333,5. Das Betrags-
   span wird wieder inline - die Flex-Regel darunter gilt der Beschriftung. */
.awsumme b span{display:inline}
.awsumme b i.aweur{display:inline-block; width:1.2em; text-align:right; font-style:normal;
  font-family:var(--schrift-buchung); font-size:12px; letter-spacing:normal}
.awsumme b{font-size:24px; font-weight:600; font-variant-numeric:tabular-nums;
  letter-spacing:-.02em; color:var(--bad)}

/* DER RING BEKOMMT DEN PLATZ, DEN ER VERDIENT.
   Christian am 12.09.2026: „Das Kreisdiagramm ist echt popelig klein. Da
   ist die rechte Spalte, so viel Platz frei, und Du nutzt es so
   unausgewogen. Das Kreisdiagramm ist viel wichtiger als der Riesenplatz,
   der danach rechts gelassen wird."
   GEMESSEN am 12.09.2026 bei 1440 px Fenster: Ring 200 x 200, Liste
   952 px breit — und darin 585 px Luft in JEDER Zeile, weil der breiteste
   Gruppenname („Energie und Kommunikation") nur 172 px misst.
   Der Ring waechst jetzt in drei Stufen mit dem Fenster mit; die Liste
   bekommt, was uebrig bleibt. Die Stufen sind an der Liste gemessen: bei
   800, 940 und 1100 px bleibt die Namensspalte 195, 263 und 310 px breit
   und schneidet die gemessenen 172 px nirgends ab. Ab 1100 px steht ein
   460 px grosser Ring neben einer 412 px hohen Liste — zwei Bloecke, die
   gleich hoch stehen. */
.awraster{display:grid; grid-template-columns:1fr; gap:20px; align-items:center}
@media (min-width:761px){ .awraster{grid-template-columns:300px minmax(0,1fr); gap:clamp(24px,3vw,44px)} }
@media (min-width:901px){ .awraster{grid-template-columns:360px minmax(0,1fr)} }
@media (min-width:1181px){ .awraster{grid-template-columns:460px minmax(0,1fr)} }

/* `--kz` ist die Schriftgroesse der Prozentzahl IM Ring, in SVG-Einheiten
   (viewBox 200). Sie steht hier und nicht an `svg.kreis`, weil sie mit
   der Ringgroesse zusammenhaengt: Was im Bild 1 Einheit gross ist, misst
   auf dem Schirm Ringbreite/200. GEMESSEN am 12.09.2026 ueber alle vier
   Stufen: 11,9 / 12,3 / 12,4 / 13,1 px auf dem Schirm. */
.awkreis{position:relative; width:min(320px,78vw); margin:0 auto; aspect-ratio:1; --kz:8.2px}
/* DER RING IM REITER „GRUPPEN" WAR ZU KLEIN UND SEINE ZAHLEN ZU WINZIG (18.09.2026).
   Christian: „Wenn ich mir das Kreisdiagramm ansehe, dann sehe ich nahezu nichts. Die
   Prozentwerte sind so winzig, dass ich sie mit meinen Augen kaum erkennen kann. Gerade
   die lila Fläche ist nahezu nicht mehr erkennbar … Das Kreisdiagramm muss deutlich
   größer werden. Es ist sehr puppelig klein. Dafür ist dieser Wert in den 6.830 Euro
   irre groß."
   GEMESSEN: Der Ring stand auf 230 px, und ab 1100 px Fensterbreite fiel die
   Prozentschrift auf 5,4 SVG-Einheiten — auf dem Schirm keine 5 px. Die Zahl in der
   Mitte dagegen lief in voller Groesse mit. Ein Bild, dessen Beschriftung man nicht
   lesen kann, ist Dekoration; die Flaeche daneben stand leer.
   Der Ring waechst deshalb auf das Doppelte, und seine Prozentschrift waechst MIT ihm
   statt gegen ihn: Die Staffel nach unten gilt nur noch fuer den grossen Ring in der
   Auswertung, der ohnehin breit steht. */
.awkreis.ggkreis{width:min(460px,86vw); margin:10px auto 18px; --kz:8.4px}
@media (min-width:761px){ .awkreis{width:100%} }
@media (min-width:901px){ .awkreis:not(.ggkreis){--kz:6.6px} }
@media (min-width:1181px){ .awkreis:not(.ggkreis){--kz:5.4px} }
svg.kreis{display:block; width:100%; height:100%}
svg.kreis .stueck{transition:transform .16s ease, opacity .15s ease}
svg.kreis .kst{stroke:var(--flaeche); stroke-width:1.5}
/* WEISS AUF DER FARBE — EINHEITLICH (18.09.2026). Christian: „die Prozente müssen mit
   weißer Schrift auf dem farbigen Untergrund sein."
   Er hat recht, und zwar aus einem Grund, der ueber den Geschmack hinausgeht: Vorher
   trug jede Zahl dieselbe dunkle Tinte — auf dem dunkelblauen Stueck fast unsichtbar,
   auf dem hellen beige gerade noch lesbar. Eine Beschriftung, deren Lesbarkeit vom
   Stueck abhaengt, auf dem sie zufaellig sitzt, ist keine.
   Weiss traegt auf allen zehn Gruppenfarben; die duenne dunkle Kontur haelt es auch
   auf den hellsten (Vorsorge, Gesundheit) sauber ablesbar, ohne dass die Zahl auf den
   dunklen Stuecken schwer wirkt. */
svg.kreis .kzahl{
  font-size:var(--kz); font-weight:700; fill:#fff;
  text-anchor:middle; dominant-baseline:central; pointer-events:none;
  font-variant-numeric:tabular-nums;
  paint-order:stroke; stroke:rgba(0,0,0,.28); stroke-width:.9px; stroke-linejoin:round;
}

/* Zeigen im Kreis: alles tritt zurueck, das gezeigte Stueck faehrt heraus. */
/* NUR die anderen Stuecke werden blass, nie das angefasste.
   Christian am 12.09.2026: „hover auf einen bestimmten abschnitt des
   Kreisdiagramms darf den aktiven bereich nicht dimmen!"
   Vorher stand hier `.awkreis:hover svg.kreis .stueck` ohne :not() —
   diese Regel ist spezifischer als `.stueck:hover` und hat deshalb
   gewonnen: GEMESSEN lag das angefasste Stueck bei opacity .4 statt 1,
   es fuhr zwar heraus, blieb aber blass. */
.awkreis:hover svg.kreis .stueck:not(:hover){opacity:.4}
svg.kreis .stueck:hover{opacity:1; transform:translate(calc(var(--dx) * 1px), calc(var(--dy) * 1px))}

/* Zeigen in der Liste: dasselbe, nur von der anderen Seite. `:has()` reicht
   vom gemeinsamen Vater `.awraster` aus in beide Richtungen — deshalb
   braucht dieser Teil kein JavaScript. Zwoelf Gruppen, zwoelf Paare; sie
   stehen ausgeschrieben da, weil CSS keine Schleife kennt und eine
   halbautomatische Loesung nur schwerer zu pruefen waere. */
.awraster:has(a.awgriff:hover) svg.kreis .stueck{opacity:.4}
/* Dasselbe von der Gruppenliste der Uebersicht aus (16.09.2026) — siehe die Begruendung
   bei den erzeugten Paaren weiter unten. */
.ggseite:has(li.ggzeile > details > summary:hover) svg.kreis .stueck{opacity:.4}