/* Buchhaltung version.blue — Auffrischung der Oberfläche, Schicht 3 von 3
 *
 * Geladen nach app.css (Boden) und marke.css (Auftritt nach außen). Was hier steht, gewinnt
 * gegen app.css durch die Reihenfolge — und verliert gegen marke.css durch deren höhere
 * Spezifität (`body.marke .x`). Wo die Marke einklassig schreibt, tritt diese Datei
 * ausdrücklich zurück (`body:not(.marke)`); dafür gibt es eine Prüfung.
 *
 * `php bin/console stil` zeigt, welche Regel aus app.css hier eingefangen wird.
 *
 * Diese Datei liegt bewusst *neben* app.css und nicht darin: Die Grundlage bleibt, was sie
 * war, und was hier steht, überschreibt sie gezielt. So lässt sich die Auffrischung in einem
 * Zug zurücknehmen, wenn etwas nicht gefällt — eine Zeile im Layout genügt.
 *
 * Gearbeitet wird über die Merkmale, die jede Ansicht ohnehin benutzt (.karte, .knopf,
 * table.liste, .feld). Vierzig Ansichten einzeln anzufassen wäre vierzig Gelegenheiten,
 * etwas zu zerschlagen.
 */

/* `hidden` setzt display:none — aber nur, solange keine eigene Regel ein `display`
   vorgibt. Genau das tun die Reiterleiste (flex) und die Reiterfläche (grid): Ohne diese
   Zeile stünde die leere Leiste auf jeder Seite, und die Fläche legte sich über den Inhalt.
   Sie gehört nach vorn, weil sie für alles gilt, was danach kommt. */
[hidden] { display: none !important; }

:root {
    /* Rundungen: drei Stufen statt einer. Ein Knopf darf runder sein als eine Tabelle. */
    --radius:      10px;
    --radius-s:    7px;
    --radius-xl:   14px;

    /* Schatten in Schichten. Ein einzelner harter Schatten sieht nach 2009 aus; zwei weiche
       übereinander geben Tiefe, ohne dass man den Schatten bemerkt. */
    --schatten:    0 1px 2px rgba(16,24,40,.04), 0 4px 12px -2px rgba(16,24,40,.06);
    --schatten-m:  0 2px 4px rgba(16,24,40,.05), 0 12px 28px -6px rgba(16,24,40,.12);
    --schatten-l:  0 8px 20px rgba(16,24,40,.10), 0 24px 56px -12px rgba(16,24,40,.22);

    --grund:       #f4f6f9;
    --rand:        #e3e7ee;
    --rand-stark:  #cbd2dd;
    --flaeche-alt: #f3f5f9;
    --text-leise:  #5c6675;

    --schnell:     120ms cubic-bezier(.2,0,.2,1);
    --ruhig:       220ms cubic-bezier(.2,0,.2,1);
}

/* Schrift: die Systemschrift des jeweiligen Geräts, aber die heutige. Dazu Ziffern gleicher
   Breite — in einer Buchhaltung stehen Beträge untereinander, und dann müssen sie fluchten. */
body {
    font-family: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "cv05", "ss01";
}
table.liste td, .kennzahl .wert, .r, td.r, th.r, [data-betrag], .betrag {
    font-variant-numeric: tabular-nums;
}

/* Fokus: sichtbar, aber nicht wie ein Warnschild. */
:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: 2px;
    border-radius: var(--radius-s);
}

/* --------------------------------------------------------------------- Karten */
.karte {
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    overflow: hidden;
}
.karte > h2, .karte > .karte-kopf {
    background: linear-gradient(180deg, #fbfcfe, #f6f8fb);
    border-bottom: 1px solid var(--rand);
    font-size: .92rem;
    letter-spacing: -.005em;
}
.kennzahl {
    border-radius: var(--radius);
    transition: transform var(--schnell), box-shadow var(--schnell);
}
.kennzahl:hover { transform: translateY(-1px); box-shadow: var(--schatten-m); }
.kennzahl .wert { letter-spacing: -.02em; }

/* --------------------------------------------------------------------- Knöpfe */
.knopf {
    border-radius: var(--radius-s);
    font-weight: 500;
    transition: background var(--schnell), border-color var(--schnell),
                box-shadow var(--schnell), transform var(--schnell);
    box-shadow: 0 1px 1px rgba(16,24,40,.04);
}
.knopf:hover { box-shadow: 0 2px 6px rgba(16,24,40,.10); }
.knopf:active { transform: translateY(1px); box-shadow: none; }
.knopf.haupt {
    background: linear-gradient(180deg, #245e9f, var(--akzent));
    box-shadow: 0 1px 2px rgba(16,24,40,.14), inset 0 1px 0 rgba(255,255,255,.14);
}
.knopf.haupt:hover { background: linear-gradient(180deg, #1f5493, #163f70); }
.knopf.gefahr { background: linear-gradient(180deg, #b52626, var(--rot)); }
.knopf.gut    { background: linear-gradient(180deg, #227f4c, var(--gruen)); }
.knopfreihe { gap: .45rem; }

/* --------------------------------------------------------------------- Felder */
input[type=text], input[type=number], input[type=date], input[type=email],
input[type=password], input[type=search], input[type=tel], select, textarea {
    border-radius: var(--radius-s);
    border-color: var(--rand-stark);
    transition: border-color var(--schnell), box-shadow var(--schnell);
}
input:focus, select:focus, textarea:focus {
    border-color: var(--akzent);
    box-shadow: 0 0 0 3px var(--akzent-hell);
    outline: none;
}
input[type=file] {
    border: 1px dashed var(--rand-stark); border-radius: var(--radius-s);
    padding: .5rem; background: var(--flaeche-alt); width: 100%;
}
.feld label { font-weight: 500; }
fieldset { border-radius: var(--radius); }
fieldset > legend { font-weight: 600; font-size: .86rem; padding: 0 .4rem; }

/* -------------------------------------------------------------------- Tabellen */
table.liste th {
    position: sticky; top: 0; z-index: 2;
    background: #f6f8fb;
    font-size: .76rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-leise);
    border-bottom: 1px solid var(--rand);
}
table.liste tbody tr { transition: background var(--schnell); }
table.liste tbody tr:hover { background: #f7f9fd; }
table.liste td { border-bottom: 1px solid #eef1f5; }
table.liste tbody tr:last-child td { border-bottom: 0; }
.tabellenrahmen { border-radius: var(--radius); }

/* ------------------------------------------------------------------ Statusmarken */
.marke-status {
    border-radius: 999px;
    padding: .1rem .55rem;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .01em;
    display: inline-flex; align-items: center; gap: .3rem;
}

/* --------------------------------------------------------------------- Meldungen */
.meldung {
    border-radius: var(--radius);
    border-left: 3px solid currentColor;
    box-shadow: var(--schatten);
}

/* ------------------------------------------------------------------- Seitenleiste */
.seitenleiste { background: linear-gradient(180deg, #17243c, #131d31); }
.nav a { border-radius: 0 999px 999px 0; margin-right: .7rem; border-left-width: 0;
         padding-left: 1.1rem; transition: background var(--schnell), color var(--schnell); }
.nav a.aktiv { background: rgba(110,168,240,.18); color: #fff; }
.nav a.aktiv::before {
    content: ""; position: absolute; left: 0; width: 3px; height: 1.35rem;
    background: #6ea8f0; border-radius: 0 3px 3px 0;
}
.nav a { position: relative; }
.reiter a { border-radius: var(--radius-s) var(--radius-s) 0 0; }

/* --------------------------------------------------------------------- Fenster */
.modal-hintergrund {
    background: rgba(12,18,30,.5);
    backdrop-filter: blur(3px);
    animation: ein var(--schnell);
}
.modal-fenster {
    border-radius: var(--radius-xl);
    box-shadow: var(--schatten-l);
    animation: auf var(--ruhig);
}
.modal-kopf {
    display: flex; align-items: center; gap: .6rem;
    background: linear-gradient(180deg, #fbfcfe, #f6f8fb);
}
.modal-kopf .rechts { margin-left: auto; }
.modal-fuss { background: #f8fafc; }
@keyframes ein { from { opacity: 0; } }
@keyframes auf { from { opacity: 0; transform: translateY(12px) scale(.985); } }

/* -------------------------------------------------------------------- Hinweise */
.hinweis-kasten {
    border-radius: var(--radius);
    box-shadow: var(--schatten-l);
    border-left-width: 3px;
}

/* --------------------------------------------------------------------- Explorer */
.ex-inhalt, .ex-baum { border: 1px solid var(--rand); }
.ex-kachel svg { filter: drop-shadow(0 1px 1px rgba(16,24,40,.12)); }
.ex-kachel { transition: background var(--schnell), border-color var(--schnell),
                         transform var(--schnell); }
.ex-kachel:hover { transform: translateY(-1px); }

/* Wer Bewegung nicht mag oder nicht verträgt, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* ----------------------------------------------------------- Arbeitsfläche */
/* Die Seite ist der erste Reiter, jedes geöffnete Dokument ein weiterer. */
.reiterleiste { display: flex; align-items: stretch; gap: .2rem; margin: 0 0 .9rem;
  border-bottom: 1px solid var(--rand); overflow-x: auto; scrollbar-width: thin; }
.reiter-knopf { display: inline-flex; align-items: center; gap: .45rem; border: 0;
  background: none; font: inherit; font-size: .85rem; color: var(--text-leise);
  padding: .5rem .75rem; cursor: pointer; white-space: nowrap; border-radius: 8px 8px 0 0;
  border-bottom: 2px solid transparent; max-width: 16rem; }
.reiter-knopf span { overflow: hidden; text-overflow: ellipsis; }
.reiter-knopf:hover { background: var(--flaeche-alt); color: var(--text); }
.reiter-knopf.aktiv { background: var(--flaeche); color: var(--akzent); font-weight: 600;
  border-bottom-color: var(--akzent); box-shadow: var(--schatten); }
.reiter-knopf i { font-style: normal; font-size: 1rem; line-height: 1; opacity: .45;
  border-radius: 4px; padding: 0 .18rem; }
.reiter-knopf i:hover { opacity: 1; background: rgba(16,24,40,.1); }
.reiter-teilen { margin-left: auto; border: 0; background: none; cursor: pointer;
  font-size: .95rem; color: var(--text-leise); padding: .3rem .6rem; border-radius: 6px; }
.reiter-teilen:hover, .reiter-teilen.aktiv { background: var(--akzent-hell); color: var(--akzent); }

.reiterflaeche { display: grid; grid-template-columns: 1fr; gap: .8rem; height: calc(100vh - 11rem); }
.reiterflaeche.geteilt { grid-template-columns: 1fr 1fr; }
@media (max-width: 62rem) { .reiterflaeche.geteilt { grid-template-columns: 1fr; } }
.reiter-rahmen { display: flex; flex-direction: column; background: var(--flaeche);
  border: 1px solid var(--rand); border-radius: var(--radius); box-shadow: var(--schatten);
  overflow: hidden; min-height: 0; }
.reiter-kopf { display: flex; align-items: center; gap: .6rem; padding: .4rem .7rem;
  border-bottom: 1px solid var(--rand); font-size: .82rem; font-weight: 600;
  background: linear-gradient(180deg, #fbfcfe, #f6f8fb); }
.reiter-kopf .knopf { margin-left: auto; font-weight: 400; }
.reiter-rahmen iframe { flex: 1 1 auto; width: 100%; border: 0; background: #fff; }

/* =========================================================== Die neue Hülle
 * Aus dem Entwurf übernommen, auf die Merkmale der Anwendung gelegt. Die Gliederung
 * folgt dem, was auf dem Bildschirm zu sehen ist: Leiste, Kopf, Inhalt.
 */

/* ---------------------------------------------------------------- Seitenleiste */
.rahmen { transition: grid-template-columns var(--ruhig); }
.rahmen.schmal { grid-template-columns: 4.4rem 1fr; }

.seitenleiste { display: flex; flex-direction: column; padding: 0; }
.seitenmarke { display: flex; align-items: center; gap: .6rem; padding: .85rem .9rem; }
.seitenmarke-zeichen { width: 2rem; height: 2rem; border-radius: 9px; display: grid;
  place-items: center; background: linear-gradient(135deg, #2f6fb8, #1c4f8b); color: #fff;
  font-weight: 700; font-size: .8rem; flex: 0 0 auto; }
.seitenmarke-text { display: flex; flex-direction: column; min-width: 0; }
.seitenmarke-text strong { color: #fff; font-size: .92rem; display: block; }
.seitenmarke-text small { font-size: .71rem; color: #8fa0bb; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.leiste-schmal { margin-left: auto; border: 0; background: none; color: #8fa0bb;
  cursor: pointer; font-size: 1rem; border-radius: 6px; padding: .1rem .35rem; }
.leiste-schmal:hover { background: rgba(255,255,255,.1); color: #fff; }

.menuesuche { padding: .1rem .8rem .5rem; }
.menuesuche input { width: 100%; background: #24344f; color: #fff; border: 1px solid #3a4d70;
  border-radius: 999px; padding: .34rem .8rem; font: inherit; font-size: .82rem; }
.menuesuche input::placeholder { color: #7e91b0; }
.menuesuche input:focus { outline: none; border-color: #6ea8f0;
  box-shadow: 0 0 0 3px rgba(110,168,240,.18); }

.nav { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: .2rem .45rem 1rem; }
.nav-gruppe-block.zieht { opacity: .4; }
.nav-gruppe-block.ziel { box-shadow: inset 0 2px 0 #6ea8f0; }
.nav-gruppe { display: flex; align-items: center; gap: .4rem; cursor: pointer;
  user-select: none; padding: .8rem .6rem .3rem; }
.nav-griff { opacity: 0; font-size: .78rem; cursor: grab; }
.nav-gruppe:hover .nav-griff { opacity: .5; }
.nav-pfeil { margin-left: auto; font-size: .62rem; transition: transform var(--schnell); }
.nav-gruppe-block.zu .nav-pfeil { transform: rotate(-90deg); }
.nav-gruppe-block.zu .nav-punkte { display: none; }

.nav a { gap: .55rem; padding: .38rem .6rem; margin: 0; border-radius: var(--radius-s);
  border-left: 0; }
.nav a::before { content: none; }
.nav a.aktiv { background: rgba(110,168,240,.16); }
.nav-zeichen { width: 1.3rem; text-align: center; flex: 0 0 auto; opacity: .7; font-size: .95rem; }
.nav a.aktiv .nav-zeichen { opacity: 1; }
.nav-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }
.leiste-fuss { padding: .6rem .8rem; border-top: 1px solid rgba(255,255,255,.1); }
.leiste-fuss .knopf { width: 100%; background: transparent; color: #8fa0bb;
  border-color: rgba(255,255,255,.16); }
.leiste-fuss .knopf:hover { background: rgba(255,255,255,.08); color: #fff; }

/* Schmal: nur Zeichen, und der Name erscheint beim Überfahren daneben. */
.rahmen.schmal .seitenmarke-text, .rahmen.schmal .menuesuche,
.rahmen.schmal .nav-gruppe, .rahmen.schmal .nav-name,
.rahmen.schmal .leiste-fuss { display: none; }
.rahmen.schmal .nav a { justify-content: center; padding: .5rem 0; position: relative; }
.rahmen.schmal .nav-zeichen { font-size: 1.1rem; }
.rahmen.schmal .zaehler { position: absolute; top: .15rem; right: .5rem; }
.rahmen.schmal .leiste-schmal { transform: rotate(180deg); margin: 0 auto; }
.rahmen.schmal .seitenleiste, .rahmen.schmal .nav { overflow: visible; }
.rahmen.schmal .nav-gruppe-block + .nav-gruppe-block {
  border-top: 1px solid rgba(255,255,255,.1); margin-top: .4rem; padding-top: .4rem; }
.rahmen.schmal .nav a::after {
  content: attr(data-titel); position: absolute; left: calc(100% + .5rem); top: 50%;
  transform: translateY(-50%) scale(.96); background: #0f1726; color: #fff;
  padding: .3rem .6rem; border-radius: var(--radius-s); font-size: .8rem; white-space: nowrap;
  box-shadow: var(--schatten-l); opacity: 0; pointer-events: none; z-index: 60;
  transition: opacity var(--schnell), transform var(--schnell); }
.rahmen.schmal .nav a:hover::after, .rahmen.schmal .nav a:focus-visible::after {
  opacity: 1; transform: translateY(-50%) scale(1); }

/* ------------------------------------------------------------------- Kopfleiste */
.kopfleiste { position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--flaeche) 85%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--rand); }
.kopfleiste .titel { letter-spacing: -.01em; }

.mandantwahl { position: relative; margin-left: auto; }
.mandant-knopf { display: flex; align-items: center; gap: .5rem; border: 1px solid var(--rand);
  background: var(--flaeche); color: inherit; border-radius: 999px;
  padding: .2rem .65rem .2rem .25rem; font: inherit; cursor: pointer;
  transition: background var(--schnell), box-shadow var(--schnell); }
.mandant-knopf:hover { background: var(--flaeche-alt); box-shadow: var(--schatten); }
.mandant-zeichen { width: 1.7rem; height: 1.7rem; border-radius: 50%; color: #fff;
  display: grid; place-items: center; font-size: .66rem; font-weight: 700; flex: 0 0 auto; }
.mandant-text { display: flex; flex-direction: column; align-items: flex-start;
  min-width: 0; line-height: 1.15; }
.mandant-text strong { font-size: .83rem; }
.mandant-text small { font-size: .69rem; color: var(--text-leise); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; max-width: 11rem; }
.mandant-pfeil { font-size: .68rem; color: var(--text-leise); }

.mandant-liste { position: absolute; right: 0; top: calc(100% + .45rem); z-index: 40;
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius);
  box-shadow: var(--schatten-l); padding: .3rem; min-width: 19rem; animation: auf var(--ruhig); }
.mandant-titel { font-size: .67rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-leise); padding: .45rem .6rem .3rem; }
.mandant-eintrag { display: flex; align-items: center; gap: .55rem; width: 100%; border: 0;
  background: none; color: inherit; font: inherit; text-align: left; padding: .4rem .55rem;
  border-radius: var(--radius-s); cursor: pointer; }
.mandant-eintrag:hover { background: var(--flaeche-alt); }
.mandant-eintrag.aktiv { background: var(--akzent-hell); }
.mandant-haken { margin-left: auto; color: var(--akzent); font-weight: 700; }

/* ----------------------------------------------------------- Bildlaufleisten */
* { scrollbar-width: thin; scrollbar-color: var(--rand-stark) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(90,100,118,.3); border-radius: 999px;
  border: 3px solid transparent; background-clip: content-box; }
*:hover::-webkit-scrollbar-thumb { background: rgba(90,100,118,.45); background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(90,100,118,.7); background-clip: content-box; }
.seitenleiste { scrollbar-color: rgba(255,255,255,.18) transparent; }
.seitenleiste::-webkit-scrollbar-thumb, .nav::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.18); background-clip: content-box; }

/* ============================================================== Dunkle Fassung
 * Zweifarbig bleibt es auch dunkel: Die Leiste ist noch eine Spur tiefer als die Fläche,
 * damit die Gliederung erhalten bleibt und der Bildschirm nicht zu einer Fläche verläuft.
 *
 * Umgeschaltet wird bewusst von Hand und nicht nach der Tageszeit oder der Einstellung des
 * Betriebssystems: Wer bei Tageslicht am Fenster sitzt, will nicht um 18 Uhr eine andere
 * Anwendung vor sich haben.
 */
body.dunkel {
    --grund:        #0f141c;
    --flaeche:      #161d27;
    --flaeche-alt:  #1d2632;
    --rand:         #273140;
    --rand-stark:   #3a4759;
    --text:         #e6ebf2;
    --text-leise:   #9aa7b8;
    --akzent:       #6ea8f0;
    --akzent-hell:  #1b2c44;
    --blau:         #6ea8f0;
    --blau-hell:    #1b2c44;
    --gruen:        #58c08a;   --gruen-hell:  #16301f;
    --gelb:         #e3b341;   --gelb-hell:   #33280f;
    --rot:          #f07070;   --rot-hell:    #361a1a;
    --schatten:     0 1px 2px rgba(0,0,0,.4), 0 4px 12px -2px rgba(0,0,0,.45);
    --schatten-m:   0 2px 6px rgba(0,0,0,.45), 0 14px 30px -8px rgba(0,0,0,.6);
    --schatten-l:   0 10px 24px rgba(0,0,0,.5), 0 30px 60px -16px rgba(0,0,0,.7);

    background: var(--grund);
    color: var(--text);
}
body.dunkel .seitenleiste { background: linear-gradient(180deg, #0c1119, #0a0f16); }
body.dunkel .karte > h2, body.dunkel .karte > .karte-kopf,
body.dunkel .modal-kopf, body.dunkel .reiter-kopf {
    background: linear-gradient(180deg, #1b2431, #161d27);
}
body.dunkel .modal-fuss, body.dunkel table.liste th { background: #1a222d; }
body.dunkel table.liste tbody tr:hover { background: #1b2430; }
body.dunkel table.liste td { border-bottom-color: #212b38; }
body.dunkel input, body.dunkel select, body.dunkel textarea {
    background: #10161f; color: var(--text); border-color: var(--rand-stark);
}
body.dunkel input::placeholder { color: #6b788b; }
body.dunkel .knopf { background: #1d2632; border-color: var(--rand-stark); color: var(--text); }
body.dunkel .knopf:hover { background: #253040; }
body.dunkel .knopf.haupt { background: linear-gradient(180deg, #2f6fb8, #235a99);
    border-color: transparent; color: #fff; }
body.dunkel .kopfleiste { background: color-mix(in srgb, var(--flaeche) 85%, transparent); }
body.dunkel .hinweis-kasten, body.dunkel .modal-fenster,
body.dunkel .mandant-liste {
    background: var(--flaeche); border-color: var(--rand); color: var(--text);
}
/* `.ex-inhalt`, `.ex-baum` und `.ex-kachel:hover` standen hier, weil der Explorer in
   `app.css` feste helle Farben trug. Die sind jetzt Token — er folgt dem Umschalter von
   selbst, und zwei Stellen entscheiden nicht mehr über dieselbe Farbe. */
body.dunkel .reiter-knopf.aktiv { background: var(--flaeche); }
body.dunkel .reiterleiste { background: #121923; }
body.dunkel .ex-x { background: #232d3b; color: var(--rot); }
body.dunkel .meldung.erfolg { background: var(--gruen-hell); color: #9ae0b8; border-color: #23482f; }
body.dunkel .meldung.fehler { background: var(--rot-hell);  color: #f5a8a8; border-color: #4a2424; }
body.dunkel .meldung.warnung{ background: var(--gelb-hell); color: #edd08a; border-color: #4a3a14; }
body.dunkel .meldung.info   { background: var(--blau-hell); color: #a9c9f2; border-color: #24395a; }
body.dunkel * { scrollbar-color: rgba(255,255,255,.16) transparent; }
body.dunkel *::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); background-clip: content-box; }
body.dunkel *:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,.26); background-clip: content-box; }

.hell-dunkel { font-size: .95rem; line-height: 1; }

/* ======================================================= Formulare und Abstände
 * Der zweite Teil der Auffrischung: Was auf jeder Seite vorkommt, bekommt überall dieselbe
 * Luft. Bisher hatte jede Ansicht ihre eigenen Zwischenräume — mal .4rem, mal 1rem —, und
 * das sieht man, sobald zwei Karten nebeneinanderstehen.
 */

/* Ein gleichmäßiger Takt zwischen den Blöcken einer Seite. */
/* Der Arbeitsbereich nimmt die Breite, die da ist. `app.css` hielt ihn bei 1560px an — auf
   einem breiten Schirm blieb rechts eine tote Fläche neben jeder Karte, und eine Tabelle mit
   zwölf Spalten musste schieben, obwohl daneben Platz war. Lange Fließtexte begrenzt weiter
   `main > p`; alles andere hat mit den Karten und Spalten schon seinen Rahmen. */
main { max-width: none; }
main > * + * { margin-top: 1.1rem; }
main > .knopfreihe + * { margin-top: .9rem; }
.karte { margin-bottom: 0; }

/* Felder: mehr Luft, klarere Beschriftung, gleiche Höhe in einer Reihe. */
.feld { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .9rem; }
.feld > label, .feld > .beschriftung {
    font-size: .8rem; font-weight: 500; color: var(--text-leise); letter-spacing: .01em;
}
.feldreihe { display: flex; gap: .9rem; flex-wrap: wrap; align-items: flex-start; }
.feldreihe > .feld { flex: 1 1 12rem; min-width: 0; }
.feld .hinweis, .hinweis {
    font-size: .78rem; color: var(--text-leise); line-height: 1.45; margin-top: .1rem;
}

input[type=text], input[type=number], input[type=date], input[type=email],
input[type=password], input[type=search], input[type=tel], input[type=month],
select, textarea {
    padding: .46rem .62rem;
    min-height: 2.25rem;
    width: 100%;
}
textarea { min-height: 5rem; line-height: 1.5; resize: vertical; }
input[type=checkbox], input[type=radio] { width: 1.05rem; height: 1.05rem; accent-color: var(--akzent); }
label:has(> input[type=checkbox]), label:has(> input[type=radio]) {
    display: inline-flex; align-items: center; gap: .45rem; font-size: .88rem;
}
input:disabled, select:disabled, textarea:disabled {
    background: var(--flaeche-alt); color: var(--text-leise); cursor: not-allowed;
}

/* Fieldsets tragen ihre Überschrift als Zwischentitel, nicht als Rahmenunterbrechung.
 *
 * `min-inline-size: 0` ist kein Schönheitsstrich, sondern die Behebung eines Fehlers: Ein
 * `fieldset` bekommt vom Browser ab Werk `min-inline-size: min-content` und schrumpft
 * deshalb nicht mit. Steht es in einem Fenster oder einer Spalte, die schmaler ist als sein
 * breitester Inhalt, wächst es aus der Karte heraus nach rechts — die Beschriftung stand
 * dann neben dem Rahmen statt darin. */
fieldset { border: 0; border-top: 1px solid var(--rand); padding: 1rem 0 0; margin: 1.3rem 0 0;
    min-inline-size: 0; min-width: 0; }
/* Das `float: left` ist kein Gestaltungsmittel, sondern der einzige verlässliche Weg, ein
   `<legend>` aus der Sonderbehandlung des Browsers (mitten in den Rahmen gesetzt) in den
   normalen Fluss zu holen. Nur: Ein Float muss aufgehoben werden. Ohne das stellte sich die
   nächste `.feldreihe` als eigener Formatierungskontext **neben** die Überschrift statt
   darunter — mal ging es gut, mal stand die ganze Reihe rechts. */
fieldset > legend { padding: 0; color: var(--text-leise); text-transform: uppercase;
    font-size: .72rem; letter-spacing: .06em; float: left; width: 100%; margin-bottom: .6rem; }
fieldset > legend + * { clear: both; }

/* Aufklappbares: der Knopf bleibt ein Knopf, der Inhalt bekommt Luft. */
details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] > summary { margin-bottom: .5rem; }

/* Tabellen: Kopf und Zellen atmen, Zahlen stehen rechts. */
table.liste th, table.liste td { padding: .55rem .8rem; }
table.liste th.r, table.liste td.r { text-align: right; }
.tabellenrahmen { overflow: auto; max-width: 100%; }
table.liste td .knopf.klein { white-space: nowrap; }
table.liste .leer { text-align: center; color: var(--text-leise); padding: 2rem 1rem; }

/* Raster mit gleichmäßigem Abstand statt je Ansicht eigener Werte. */
.raster { display: grid; gap: 1rem; }
/* Ein Rasterfeld ist ab Werk `min-width: auto` — es schrumpft also nie unter den breitesten
   Inhalt, sondern wächst darüber hinaus. In einem Fenster sah man das Ergebnis: Die zweite
   Karte stand nicht neben, sondern neben und außerhalb. */
.raster > * { min-width: 0; }
.raster.k2 { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.raster.k3 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.raster.k4 { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }

/* Die Karte gibt ihrem Inhalt Luft — auch wenn darin eine Tabelle steckt. */
.karte-inhalt { padding: 1.1rem; }
.karte-inhalt > :first-child { margin-top: 0; }
.karte-inhalt > :last-child { margin-bottom: 0; }
.karte-inhalt > form > :last-child { margin-bottom: 0; }
.karte > .tabellenrahmen { border-radius: 0 0 var(--radius) var(--radius); }

.knopfreihe { display: flex; flex-wrap: wrap; align-items: center; }
.karte-kopf .knopfreihe { margin-left: auto; }

/* ==================================================== Die übrigen Bestandteile
 * Was auf vielen Seiten vorkommt und bisher überall ein wenig anders aussah.
 */

/* Filterleiste über den Listen: eine Zeile, die zusammengehört. */
.filterleiste { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end;
    background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius);
    padding: .8rem 1rem; box-shadow: var(--schatten); }
.filterleiste .feld { margin-bottom: 0; }
.filterleiste .feld > label { font-size: .74rem; }
.filterleiste .knopf { align-self: flex-end; }

/* Kennzahlen: die Zahl ist die Aussage, alles andere ist Beiwerk. */
.kennzahl .beschriftung { letter-spacing: .05em; }
.kennzahl .wert { line-height: 1.15; }

/* Ampel und Statusmarken: gleiche Größe, gleiche Höhe zur Schrift. */
.ampel { width: .62rem; height: .62rem; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 12%, transparent); }
.marke-status + .marke-status { margin-left: .3rem; }

/* Anmeldung und Portal — drinnen dieselbe Handschrift, draußen die der Marke.
   Siehe den Abschnitt „Anmeldung" weiter unten: Grund, Kasten und Logo gehören dort der
   Marke, wenn sie geladen ist (`body.marke`). */
body:not(.marke) .anmeldung .kasten { border-radius: var(--radius-xl);
    box-shadow: var(--schatten-l); border: 1px solid var(--rand); }
body:not(.marke) .anmeldung h1 { letter-spacing: -.02em; }

/* Reiter innerhalb einer Seite (Verwaltung, Auswertungen). */
.reiter { gap: .15rem; }
.reiter a { padding: .5rem .85rem; color: var(--text-leise);
    transition: background var(--schnell), color var(--schnell); }
.reiter a:hover { background: var(--flaeche-alt); text-decoration: none; color: var(--text); }
.reiter a.aktiv { background: var(--flaeche); border-bottom-color: var(--akzent); }

/* ================================================== Takt innerhalb einer Karte
 *
 * Hier stand bis jetzt eine Regel, die den Abstand an der *Inline-Angabe* festmachte:
 * `.karte-inhalt > [style*="margin-top"] { margin-top: .8rem !important }`. Das war ein
 * Pflaster auf die eigentliche Ursache, und es verriet sie auch: Ein Element im Karteninhalt
 * bekam von sich aus keinen Abstand nach oben, also setzten die Ansichten ihn von Hand —
 * zweiundsechzig Mal. Danach musste das Stylesheet den Wert wieder einfangen, damit nicht
 * jede Seite ihren eigenen Takt hat.
 *
 * Jetzt der Takt selbst: Geschwister im Karteninhalt rücken auseinander, das erste nicht.
 * Dieselbe Regel, die `main` schon hat. Die Inline-Angaben in den Ansichten werden dadurch
 * wirkungslos, wo sie denselben Wert meinen — und die paar, die etwas anderes meinen, dürfen
 * es weiterhin sagen. */
.karte-inhalt > * + *,
/* Und eine Ebene tiefer, wo die Ansichten es ebenso brauchen: im Formular und im
   aufklappbaren Block. Dort stand der Abstand genauso von Hand. */
.karte-inhalt form > * + *,
.karte-inhalt details > * + *,
.karte-inhalt .abschnitt > * + * { margin-top: .85rem; }

/* Felder bringen ihren Abstand selbst mit (`.feld { margin-bottom }`). Bekämen sie zusätzlich
   einen nach oben, stünde zwischen zwei Feldern die doppelte Lücke. */
.karte-inhalt .feldreihe + .feldreihe,
.karte-inhalt .feld + .feld,
.karte-inhalt .feld + .feldreihe,
.karte-inhalt .feldreihe + .feld { margin-top: 0; }
.karte-inhalt p + p { margin-top: .6rem; }          /* Fließtext dichter als Blöcke */
/* Eine Tabelle sitzt am Rand der Karte, nicht im Textfluss. */
.karte > .tabellenrahmen + *, .karte-inhalt > .tabellenrahmen { margin-top: .85rem; }

/* Monospace ist für Nummern da, nicht für Fließtext. Als Klasse `.mono`, und — bis die
   Ansichten umgestellt sind — auch für die Inline-Angabe. */
.mono, [style*="ui-monospace"] { font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo,
    Consolas, monospace !important; font-size: .86em; letter-spacing: -.01em; }

/* ------------------------------------ Klassen, die niemand definiert hatte
 *
 * Alle vier standen in Ansichten und wirkten nicht. Eine Klasse ohne Regel ist ein stiller
 * Irrtum: Der Verfasser wollte etwas, und es kommt nie an.
 */

/* Ein Formular, das an die Stelle des Karteninhalts tritt — in fünf Ansichten steht es
   unmittelbar in der Karte, nicht in `.karte-inhalt`. Ohne diese Regel klebte es am Rahmen,
   weil es dessen Innenmaß nicht erbt. */
.karte > form.formular { padding: 1.1rem; }
.karte > form.formular > * + * { margin-top: .85rem; }
.karte > form.formular > .feldreihe + .feldreihe,
.karte > form.formular > .feld + .feld { margin-top: 0; }

/* Ein Feld, das in seiner Reihe mehr Platz braucht als die anderen — eine
   Leistungsbeschreibung neben zwei Datumsfeldern. Ohne die Regel war es genauso breit wie
   sie, und der Text lief in einem Schlitz. */
.feldreihe > .feld.gross { flex: 2.5 1 20rem; }

/* Die Überschrift einer Menügruppe in der Seitenleiste. */
.nav-gruppe-name { flex: 1 1 auto; font-size: .72rem; text-transform: uppercase;
    letter-spacing: .07em; color: #8fa2bd; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; }

/* Wiederkehrende Kleinigkeiten, die in den Ansichten als Inline-Angabe standen. Als Klasse
   sind sie an einer Stelle änderbar — und man sieht am Namen, was gemeint war. */
.inaktiv { opacity: .5; }                           /* ein stillgelegter Datensatz */
.eng-oben { margin-top: 0 !important; }
.weit-oben { margin-top: 1.5rem; }
/* Die Überschrift eines Blocks, der ins Fenster wandert: auf der Seite sichtbar, im Fenster
   überflüssig (dort steht sie im Rahmen). */
.fenster-titel { font-size: 1rem; margin: 1.5rem 0 .6rem; }

/* Der Nachsatz unter einer Tabelle: erklärt, was die Zeilen bedeuten, ohne sich als Zeile
   auszugeben. Gegenstück zu `.karte-kopf`, nur leiser. */
.karte-fuss {
    padding: .7rem 1.1rem;
    border-top: 1px solid var(--rand, #e6e9ef);
    background: color-mix(in srgb, var(--flaeche, #fff) 92%, var(--grund, #f4f5f8));
}
/* Ein Formular, das in einer Knopfreihe steht, ist kein Absatz: Es trägt genau einen Knopf
   und soll neben den anderen stehen, nicht darunter. (`display: contents` wäre eleganter,
   nimmt dem Formular aber die Box — und damit jede Möglichkeit, es später anzufassen.) */
.knopfreihe form, .karte-kopf form { margin: 0; display: inline-flex; }
/* Eine Adresse hat keine Leerstellen. Ohne Umbrucherlaubnis ist sie ein Stück, das nicht
   schmaler werden kann — und zieht alles, worin sie steht, auf ihre Länge auseinander. */
code { background: var(--flaeche-alt); border: 1px solid var(--rand); border-radius: 5px;
    padding: .05rem .3rem; font-size: .86em; overflow-wrap: anywhere; }

/* Leere Zustände sollen nicht wie ein Fehler aussehen. */
.leer, td.leer { color: var(--text-leise); font-style: normal; }

/* ================================================ Schnittstellenbeschreibung
 *
 * Stand als `<style>`-Block in der Ansicht. Eine Seite, die ihr Aussehen selbst mitbringt,
 * entzieht sich dem hell/dunkel-Umschalter und der Prüfung auf Selektorfehler — und beim
 * nächsten Umbau der Karten bleibt sie als Einzige zurück.
 */
.doku h2 { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--rand); }
.doku h3 { margin-top: 1.6rem; font-size: .95rem;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.doku pre { background: var(--flaeche-alt); border: 1px solid var(--rand);
    border-radius: var(--radius-s); padding: .8rem 1rem; overflow-x: auto;
    font-size: .82rem; line-height: 1.5; }
.doku code { font-size: .85em; }
/* Der Weg steht in der ersten Spalte und darf nicht umbrechen: `/api/v1/rechnungen/{id}` in
   drei Zeilen ist kein Weg mehr, sondern ein Rätsel. */
.doku table.liste td:first-child { white-space: nowrap;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

/* Das Verb einer Anfrage. Feste Mindestbreite, damit die Wege darunter fluchten. */
.verb { display: inline-block; min-width: 3.4rem; padding: .05rem .4rem; border-radius: 4px;
    font-size: .72rem; font-weight: 700; text-align: center; color: #fff;
    letter-spacing: .02em; }
.verb.get    { background: #2563a8; }
.verb.post   { background: #2f7d4f; }
.verb.put    { background: #8a6a1f; }
.verb.delete { background: var(--rot); }

/* Druck: Leiste, Reiter und Knöpfe fallen weg, die Karten werden flach. */
@media print {
    .reiterleiste, .reiterflaeche, .hinweise, .mandantwahl, .menuesuche,
    .leiste-fuss, .hell-dunkel { display: none !important; }
    .karte { box-shadow: none; border-color: #ccc; }
    main > * + * { margin-top: .6rem; }
}

/* ------------------------------------------------- Aufklappbares als Bedienteil
 * `<details><summary class="knopf">` steckt in zwei Dutzend Ansichten: „Neues Dokument",
 * „Bankverbindung", „Token". Aufgeklappt stand das Formular bisher nackt auf der Seite und
 * lief in den nächsten Block. Jetzt bekommt es eine eigene Fläche — dann ist zu sehen,
 * wo es anfängt und wo es aufhört.
 */
details > summary.knopf { display: inline-flex; align-items: center; gap: .35rem; }
details > summary.knopf::after { content: "▾"; font-size: .7rem; opacity: .6;
    transition: transform var(--schnell); }
details[open] > summary.knopf::after { transform: rotate(180deg); }
details:has(> summary.knopf)[open] {
    background: var(--flaeche-alt); border: 1px solid var(--rand);
    border-radius: var(--radius); padding: .7rem .8rem; margin: .3rem 0 .6rem;
}
details:has(> summary.knopf)[open] > form { margin-top: .6rem; }
details:has(> summary.knopf)[open] .feld:last-of-type { margin-bottom: .6rem; }

/* In einer Tabellenzelle darf das Aufklappbare die Zeile nicht sprengen. */
table.liste details:has(> summary.knopf)[open] { background: transparent; border: 0;
    padding: 0; margin: .2rem 0 0; }

/* ------------------------------------------------------------- Kleine Ordnung */
/* Knopfreihen am Fuß eines Formulars bekommen Abstand nach oben, ohne ihn je Ansicht
   von Hand zu setzen. */
form > .knopfreihe:last-child { margin-top: 1rem; }
/* Zwei Knöpfe direkt nebeneinander, ohne Reihe drumherum. */
.knopf + .knopf { margin-left: .4rem; }
table.liste .knopf + .knopf { margin-left: .25rem; }

/* Überschriften innerhalb des Inhalts folgen demselben Takt wie die Karten. */
main h2 { font-size: 1rem; letter-spacing: -.01em; margin: 1.4rem 0 .6rem; }
main h3 { font-size: .92rem; margin: 1.1rem 0 .5rem; }
main p { line-height: 1.55; }
/* Nur freistehender Text bekommt eine Lesebreite. In einer Karte nicht: Dort ist der Rahmen
   das Maß, und ein Absatz, der vor der rechten Kante stehen bleibt, sieht nicht ruhig aus,
   sondern kaputt. */
main > p { max-width: 62rem; }

/* ===================================================== Startseite und Auswertungen
 * Kennzahlen sind kein Schmuck: Sie sollen in einer Sekunde sagen, ob etwas zu tun ist.
 * Deshalb bekommen die, hinter denen Arbeit steckt, eine farbige Kante — und die, hinter
 * denen nichts steckt, bleiben ruhig.
 */
.kennzahl { position: relative; padding-left: 1.05rem; }
.kennzahl::before { content: ""; position: absolute; left: 0; top: .7rem; bottom: .7rem;
    width: 3px; border-radius: 0 3px 3px 0; background: var(--rand); }
.kennzahl.warn::before { background: var(--rot); }
.kennzahl.gut::before  { background: var(--gruen); }
a.kennzahl { text-decoration: none; color: inherit; display: block; }
a.kennzahl:hover { text-decoration: none; border-color: var(--rand-stark); }
.kennzahl .wert { font-size: 1.6rem; }
.kennzahl .zusatz { margin-top: .25rem; }

/* Balken in den Auswertungen: höher, runder, mit ruhiger Bewegung beim Aufbau. */
.balken { height: 10px; border-radius: 999px; background: var(--flaeche-alt);
    border: 1px solid var(--rand); }
.balken > span { border-radius: 999px; background: linear-gradient(90deg, #3a7fc4, var(--akzent));
    transition: width var(--ruhig); }
.balken.warn > span { background: linear-gradient(90deg, #d35454, var(--rot)); }

/* Die Karten auf der Startseite: Kopf und Liste gehören zusammen, der Verweis rechts. */
.karte-kopf .knopf.klein { margin-left: auto; float: none !important; }
.karte > .leer { padding: 2rem 1rem; text-align: center; }

/* ================================================================== Listen
 * Eine Liste wird gelesen, nicht betrachtet: enge Zeilen, ruhige Linien, und die Kopfzeile
 * bleibt stehen, damit man nach zwanzig Zeilen noch weiß, welche Spalte man vor sich hat.
 */
.tabellenrahmen { max-height: none; }
table.liste { width: 100%; border-collapse: separate; border-spacing: 0; }
table.liste th { position: sticky; top: 0; z-index: 3; box-shadow: 0 1px 0 var(--rand); }
table.liste.klein th, table.liste.klein td { padding: .42rem .7rem; font-size: .84rem; }
table.liste td { vertical-align: middle; }
table.liste td.oben { vertical-align: top; }

/* Die erste Spalte trägt meist die Nummer — sie darf nicht umbrechen. Die letzte trägt die
 * Knöpfe und bleibt so schmal wie möglich.
 *
 * Beides gilt nur für Tabellen mit *mehreren* Spalten. Hat eine Tabelle nur eine, ist deren
 * Zelle zugleich die erste und die letzte — dann traf sie beide Regeln: kein Umbruch und
 * Breite 1 %. Ein Befundsatz von hundertsechzig Zeichen stand dadurch auf einer einzigen
 * Zeile, und die Kachel war dreimal so breit wie die Karte, in der sie liegt.
 *
 * `:not(:last-child)` sagt genau das, was gemeint war: „die erste von mehreren". */
table.liste td:first-child:not(:last-child),
table.liste th:first-child:not(:last-child) { white-space: nowrap; }
table.liste td:first-child { font-variant-numeric: tabular-nums; }
table.liste th:last-child:not(:first-child),
table.liste td:last-child:not(:first-child) { width: 1%; white-space: nowrap; }
table.liste tbody tr:hover .knopf { border-color: var(--rand-stark); }

/* Eine angeklickte Zeile bleibt erkennbar — hilfreich, wenn man zwischen Liste und Beleg
   hin und her springt. */
table.liste tbody tr:target, table.liste tbody tr.hervor { background: var(--akzent-hell); }

/* ============================================================== Formularseiten
 * Lange Formulare zerfallen in Abschnitte. Der Zwischentitel ist dabei wichtiger als der
 * Rahmen: Er sagt, worum es im nächsten Dutzend Felder geht.
 */
.karte-kopf { position: relative; }
.karte-inhalt .abschnitt { margin-top: 1.4rem; padding-top: 1.1rem;
    border-top: 1px solid var(--rand); }
.karte-inhalt .abschnitt:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.karte-inhalt .abschnitt > h3, .abschnitt-titel {
    font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--text-leise); margin: 0 0 .7rem; font-weight: 600;
}

/* Pflichtfelder als leiser Hinweis, nicht als Ausrufezeichen. */
.feld > label [aria-hidden="true"] { color: var(--rot); font-weight: 400; }

/* Der Inhalt einer Karte reicht bis an ihren Rand. Die Breite der Felder regelt das Raster
   in `.felder` — nicht eine Schranke, die rechts eine tote Fläche stehen lässt. */
.karte-inhalt > form, .karte-inhalt > .felder { max-width: none; }

/* Select2 an die neuen Felder angleichen — sonst steht daneben ein Feld von 2014. */
.select2-container--default .select2-selection--single {
    height: 2.25rem !important; border-radius: var(--radius-s) !important;
    border-color: var(--rand-stark) !important; background: var(--flaeche) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 2.1rem !important; color: var(--text) !important; padding-left: .62rem !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 2.15rem !important;
}
.select2-dropdown { border-radius: var(--radius) !important; border-color: var(--rand) !important;
    box-shadow: var(--schatten-l); background: var(--flaeche) !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--akzent) !important;
}
.select2-search--dropdown .select2-search__field {
    border-radius: var(--radius-s) !important; border-color: var(--rand-stark) !important;
}
body.dunkel .select2-container--default .select2-selection--single,
body.dunkel .select2-dropdown,
body.dunkel .select2-search--dropdown .select2-search__field {
    background: #10161f !important; color: var(--text) !important;
}
body.dunkel .select2-results__option { color: var(--text); }

/* ------------------------------------------- Was nur im Fenster gebraucht wird
 * Das Bearbeitungsformular stand bisher zweimal auf der Seite: einmal als Ansicht oben und
 * einmal als Formular unten. Seit „Bearbeiten" ein Fenster öffnet, ist das untere überflüssig
 * — es ist dasselbe Formular, nur an der falschen Stelle.
 *
 * Versteckt wird es ausschließlich, wenn JavaScript läuft (`html.js`). Ohne Skript gibt es
 * kein Fenster, und dann muss das Formular erreichbar bleiben: Lieber doppelt als gar nicht.
 */
html.js [data-nur-fenster] { display: none; }
html.js .modal-inhalt [data-nur-fenster] { display: block; }

/* ===================================================== Kleine Bildschirme
 * Bisher klappte die Seitenleiste unter 900 px einfach über den Inhalt — sechzig Menüpunkte
 * vor jeder Seite. Auf einem Telefon scrollt man sich damit tot. Jetzt wird sie zu einer
 * Schublade, die nur auf Verlangen aufgeht.
 */
@media (max-width: 900px) {
    .rahmen { grid-template-columns: 1fr; }
    .seitenleiste {
        position: fixed; inset: 0 auto 0 0; width: min(19rem, 86vw); z-index: 80;
        height: 100vh; transform: translateX(-100%);
        transition: transform var(--ruhig); box-shadow: var(--schatten-l);
    }
    .rahmen.leiste-offen .seitenleiste { transform: none; }
    .rahmen.leiste-offen::after {
        content: ""; position: fixed; inset: 0; background: rgba(12,18,30,.45); z-index: 70;
    }
    /* Der Griff, der sie aufzieht — er ersetzt auf kleinen Geräten die Schmalstellung. */
    .leiste-griff { display: inline-flex !important; }
    .kopfleiste { gap: .5rem; padding: .6rem .8rem; flex-wrap: wrap; }
    .kopfleiste .titel { order: 2; flex: 1 1 100%; font-size: .95rem; }
    .mandantwahl { order: 1; margin-left: auto; }
    .mandant-text small, .benutzer { display: none; }
    main { padding: .9rem; }
    .reiterflaeche { height: calc(100vh - 13rem); }
    .filterleiste { padding: .7rem .8rem; }
    table.liste th, table.liste td { padding: .5rem .55rem; }
}
.leiste-griff { display: none; border: 0; background: none; font-size: 1.15rem; cursor: pointer;
    color: inherit; padding: .2rem .4rem; border-radius: var(--radius-s); }
.leiste-griff:hover { background: var(--flaeche-alt); }

/* ================================================================ Anmeldung
 *
 * Hier stritten drei Stylesheets um dieselbe Seite: `app.css`, `marke.css` und dieses. Alle
 * drei mit einklassigen Selektoren, also entschied die Ladereihenfolge — und das war dieses,
 * als Letztes geladen. Damit überschrieb die allgemeine Oberfläche die Marke: Grund, Kasten
 * und Logo kamen aus `--akzent`/`--grund` statt aus `--marke-akzent`/`--marke-grund`.
 *
 * Aufgefallen ist es erst, als die Anmeldung `marke.css` überhaupt wieder lud — vorher war
 * die Zeile zerrissen, und der Streit fand nicht statt.
 *
 * Die Zuständigkeit ist jetzt geteilt, nicht gewonnen: **Die Marke bestimmt das Aussehen**
 * der Seiten nach außen (Grund, Kasten, Logo, Schrift) — dafür ist sie da. Dieses Stylesheet
 * ergänzt nur, was die Marke nicht regelt, und tritt zurück, wo sie es tut (`body.marke`).
 */
body:not(.marke) .anmeldung {
    background: radial-gradient(1200px 600px at 50% -10%,
        color-mix(in srgb, var(--akzent) 12%, transparent), transparent), var(--grund);
}
body:not(.marke) .anmeldung .kasten { padding: 2rem; }
body:not(.marke) .anmeldung .logo { max-height: 2.2rem; margin-bottom: 1rem; }
body:not(.marke) .anmeldung .unterzeile {
    color: var(--text-leise); font-size: .86rem; margin: .2rem 0 1.3rem;
}

/* Ein Anmeldeknopf, der nur so breit ist wie sein Wort, sieht auf einem Telefon aus wie ein
   Versehen — `width` und `justify-content` gelten deshalb immer. Die Marke regelt beides
   nicht.
   Maße dagegen (Abstand, Innenabstand, Schriftgröße) gehören ihr, sobald sie geladen ist:
   Sie setzt sie inzwischen selbst, und gleich starke Regeln würden sich sonst über die
   Ladereihenfolge streiten. */
.anmeldung .knopf.haupt { width: 100%; justify-content: center; }
body:not(.marke) .anmeldung .feld { margin-bottom: .9rem; }
body:not(.marke) .anmeldung .knopf.haupt { padding: .55rem; font-size: .95rem; }

/* ================================================================== Fehlerseite */
.fehlerseite { max-width: 40rem; margin: 4rem auto; text-align: center; }
.fehlerseite .status { font-size: 3.4rem; font-weight: 700; letter-spacing: -.04em;
    color: var(--rand-stark); line-height: 1; }
.fehlerseite h1 { margin: .4rem 0 .6rem; font-size: 1.3rem; }
.fehlerseite p { color: var(--text-leise); }

/* ================================================================== Blättern */
.blaettern, .knopfreihe.blaettern { justify-content: center; gap: .5rem; }

/* =================================================== Partnerportal (außen) */
.portal .karte { border-radius: var(--radius); }
.portal .knopf.haupt { padding: .5rem 1rem; }

/* ==================================================== Alle Eingabefelder
 * Die bisherige Aufzählung nach `type` traf 73 Felder nicht: Wer kein `type` schreibt,
 * bekommt vom Browser ein Textfeld — aber `input[type=text]` greift dann nicht. Dazu Farbe,
 * Zeit und Datei, die auch nicht in der Liste standen.
 *
 * Deshalb umgekehrt: **alle** Eingabefelder, und ausgenommen wird, was wirklich anders ist —
 * Häkchen, Auswahlknöpfe, Verstecktes, Schieberegler und Knöpfe.
 */
/* Alles auf einer Zeile: Ein Zeilenumbruch zwischen zwei `:not()` wäre ein Leerzeichen —
   und damit ein Nachfahrenselektor. Die Regel griffe dann für nichts. */
input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]):not([type=file]):not([type=submit]):not([type=button]):not([type=reset]):not([type=image]):not([type=color]),
select, textarea {
    font: inherit;
    font-size: .88rem;
    color: var(--text);
    background: var(--flaeche);
    border: 1px solid var(--rand-stark);
    border-radius: var(--radius-s);
    padding: .46rem .62rem;
    min-height: 2.25rem;
    width: 100%;
    transition: border-color var(--schnell), box-shadow var(--schnell);
}
input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]):not([type=submit]):not([type=button]):not([type=reset]):focus,
select:focus, textarea:focus {
    border-color: var(--akzent);
    box-shadow: 0 0 0 3px var(--akzent-hell);
    outline: none;
}

/* Ein `size`-Attribut aus alten Ansichten soll die Breite bestimmen dürfen — sonst werden
   kleine Eingaben in Tabellenzellen unnötig breit. */
input[size] { width: auto; min-width: 6rem; }
input.klein, select.klein { font-size: .82rem; min-height: 1.95rem; padding: .3rem .5rem; }

/* Datumsfelder: Der Kalenderknopf des Browsers bekommt die Farbe der Oberfläche. */
input[type=date], input[type=month], input[type=time], input[type=datetime-local] {
    max-width: 12rem;
}
input[type=date]::-webkit-calendar-picker-indicator,
input[type=month]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
input[type=date]:hover::-webkit-calendar-picker-indicator { opacity: 1; }
body.dunkel input[type=date]::-webkit-calendar-picker-indicator { filter: invert(.8); }

/* Zahlen stehen rechts und fluchten — in einer Buchhaltung ist das keine Geschmacksfrage. */
input[type=number], input[data-betrag], input.betrag {
    text-align: right; font-variant-numeric: tabular-nums; max-width: 12rem;
}

/* Ein Eingabefeld in einer rechts ausgerichteten Zelle richtet sich mit aus.
 *
 * `td.r` richtet den Text der Zelle aus, nicht den Inhalt eines Feldes darin — ein `input`
 * bringt seine eigene Ausrichtung mit. Deshalb stand in acht Ansichten
 * `style="text-align:right"` am Feld, und in der neunten wurde es vergessen: Dann steht in
 * einer Spalte mit Beträgen eine Zahl linksbündig, und die Spalte fluchtet nicht mehr. */
table.liste td.r input, table.liste td.r select,
table.liste th.r input { text-align: right; font-variant-numeric: tabular-nums; }

/* „Nach rechts schieben" in einer Knopfreihe: Der Knopf, der die Hauptsache ist, steht am
   anderen Ende — getrennt von denen, die nur zurückführen. */
.knopfreihe .rechts, .knopfreihe .nach-rechts { margin-left: auto; }

/* Ein Feld ohne Beschriftung neben Feldern mit Beschriftung: Es soll unten fluchten, nicht
   oben. Betrifft Knöpfe und Kontrollkästchen in einer `.feldreihe`. */
.feldreihe > .feld.unten, .feldreihe > .knopfreihe { align-self: flex-end; }

/* Farbwähler: quadratisch, mit Rahmen wie die übrigen Felder. */
input[type=color] {
    width: 2.6rem; height: 2.25rem; padding: .18rem; border: 1px solid var(--rand-stark);
    border-radius: var(--radius-s); background: var(--flaeche); cursor: pointer;
}

/* Dateiauswahl: eine Fläche zum Hineinziehen, kein grauer Systemknopf. */
input[type=file] {
    font-size: .85rem; cursor: pointer; min-height: 2.6rem;
}
input[type=file]::file-selector-button {
    font: inherit; font-size: .82rem; margin-right: .7rem; cursor: pointer;
    border: 1px solid var(--rand-stark); background: var(--flaeche);
    color: var(--text); border-radius: var(--radius-s); padding: .3rem .7rem;
}
input[type=file]::file-selector-button:hover { background: var(--flaeche-alt); }

/* Schieberegler in der Farbe des Hauses. */
input[type=range] { accent-color: var(--akzent); width: 100%; }

/* Nur-Lese-Felder sehen aus wie Text und nicht wie ein Feld, in das man tippen dürfte. */
input[readonly], textarea[readonly] {
    background: var(--flaeche-alt); border-style: dashed; color: var(--text-leise);
}

/* Der Grund eines Eingabefeldes ist im Dunkelmodus etwas tiefer als die Fläche ringsum —
   sonst verschwindet das Feld in der Karte. Als Token, damit die Regel selbst nur einmal
   dasteht (in `app.css`). */
body.dunkel { --eingabe-grund: #10161f; }
body.dunkel input[type=file]::file-selector-button { background: #1d2632; color: var(--text); }

/* ================================================= Häkchen, Marken, Kleinkram
 * Die letzten Merkmale, die in den Ansichten vorkommen und bisher nur halb oder gar nicht
 * bedacht waren. `.schlicht` etwa wird an drei Stellen benutzt und stand in keiner Datei.
 */

/* Ein Häkchen mit Beschriftung ist eine Zeile, kein Feld: Es bekommt eine Fläche, damit man
   den ganzen Text anklicken kann und nicht das 16-Pixel-Kästchen treffen muss. */
.kontrollkaestchen {
    padding: .35rem .5rem; margin: 0 -.5rem; border-radius: var(--radius-s);
    cursor: pointer; transition: background var(--schnell); line-height: 1.45;
}
.kontrollkaestchen:hover { background: var(--flaeche-alt); }
.kontrollkaestchen input { margin-top: .18rem; flex: 0 0 auto; }
.kontrollkaestchen:has(input:checked) { color: var(--text); font-weight: 500; }
.kontrollkaestchen .hinweis { font-weight: 400; margin-top: .15rem; }

/* Mehrere Häkchen untereinander sind eine Gruppe und keine Aufzählung. */
.kaestchengruppe { display: grid; gap: .1rem; border: 1px solid var(--rand);
    border-radius: var(--radius); padding: .5rem .8rem; }

/* Ein schlichter Knopf sieht aus wie ein Verweis, verhält sich aber wie ein Knopf. */
.knopf.schlicht {
    background: none; border-color: transparent; box-shadow: none; color: var(--akzent);
    padding-left: .35rem; padding-right: .35rem;
}
.knopf.schlicht:hover { background: var(--akzent-hell); box-shadow: none; }

/* Statusmarken auch dunkel lesbar — sonst steht dort dunkelblau auf dunkelblau. */
body.dunkel .m-blau  { background: #1b2c44; color: #a9c9f2; border-color: #26405f; }
body.dunkel .m-gruen { background: #16301f; color: #93dcb4; border-color: #22482f; }
body.dunkel .m-gelb  { background: #33280f; color: #e9c877; border-color: #4a3a14; }
body.dunkel .m-rot   { background: #361a1a; color: #f0a0a0; border-color: #4d2525; }
body.dunkel .m-grau  { background: #1d2632; color: #9aa7b8; border-color: #2b3646; }

/* Beträge im Minus: rot, aber nicht schreiend. */
.negativ { color: var(--rot); font-variant-numeric: tabular-nums; }
body.dunkel .negativ { color: #f0a0a0; }

/* Die Ampelspalte mittig, damit die Punkte eine Linie bilden. */
table.liste .z { text-align: center; width: 1%; }

/* „Zur Hauptsache springen" für die Tastatur: Wer mit der Tabulatortaste arbeitet, muss
   sonst durch sechzig Menüpunkte, bevor er auf der Seite ankommt. */
.sprungmarke {
    position: absolute; left: -999px; top: .5rem; z-index: 100;
    background: var(--flaeche); color: var(--text); border: 1px solid var(--akzent);
    border-radius: var(--radius-s); padding: .5rem .9rem; box-shadow: var(--schatten-l);
}
.sprungmarke:focus { left: .5rem; text-decoration: none; }

/* Select2 mit Mehrfachauswahl — bisher nur die einfache Auswahl bedacht. */
.select2-container--default .select2-selection--multiple {
    border-radius: var(--radius-s) !important; border-color: var(--rand-stark) !important;
    background: var(--flaeche) !important; min-height: 2.25rem !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--akzent-hell) !important; border-color: transparent !important;
    color: var(--akzent) !important; border-radius: 999px !important;
    padding: .05rem .5rem !important; margin: .2rem .2rem 0 0 !important;
}
body.dunkel .select2-container--default .select2-selection--multiple { background: #10161f !important; }

/* ============================================== Zustände, die man selten sieht
 * Ladezeiten, leere Listen, lange Texte — die Stellen, an denen eine Oberfläche sonst
 * unfertig wirkt, weil niemand sie beim Bauen vor Augen hat.
 */

/* Ein Knopf, der gerade arbeitet, sagt es — und lässt sich nicht zweimal drücken. */
.knopf[disabled], .knopf[aria-busy="true"] { cursor: progress; }
.knopf[aria-busy="true"]::after {
    content: ""; width: .8rem; height: .8rem; margin-left: .45rem; display: inline-block;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
    animation: dreht .7s linear infinite; vertical-align: -1px;
}
@keyframes dreht { to { transform: rotate(360deg); } }

/* Eine leere Liste ist kein Fehler: ruhiger Text, mittig, mit Luft. */
table.liste .leer, .karte-inhalt > .leer {
    padding: 2.2rem 1rem; text-align: center; color: var(--text-leise); font-size: .9rem;
}
table.liste .leer a { font-weight: 500; }

/* Lange Texte in Zellen sollen die Tabelle nicht sprengen.
 *
 * `anywhere` war zu scharf: Es bricht in *jedem* Wort, auch wenn die Zeile ohne den Bruch
 * bloß ein wenig zu lang geworden wäre. In einer schmalen Spalte stand dann „nicht vorhan /
 * den". `break-word` bricht nur, wenn ein Wort allein nicht in die Zeile passt — eine IBAN
 * ohne Leerzeichen also schon, „vorhanden" nicht.
 *
 * Dazu eine Mindestbreite: Eine Spalte, die auf vier Zeichen zusammengedrückt wird, liest
 * sich auch mit richtigem Umbruch nicht. */
table.liste td { overflow-wrap: break-word; }
table.liste td.nowrap, table.liste td .knopf { overflow-wrap: normal; }

/* Text, der abgeschnitten wird, bekommt Auslassungspunkte statt eines harten Endes. */
.gekuerzt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
    display: inline-block; vertical-align: bottom; }

/* Trennlinien zwischen Abschnitten einer Karte, ohne eigene Auszeichnung. */
.karte-inhalt hr { border: 0; border-top: 1px solid var(--rand); margin: 1.2rem 0; }

/* Ein Textbereich, der mitwächst, statt eine Bildlaufleiste in drei Zeilen zu zeigen. */
textarea[rows="2"] { min-height: 3.6rem; }
textarea[rows="3"] { min-height: 5rem; }

/* Auswahl markieren: die Hausfarbe, nicht das Systemblau. */
::selection { background: color-mix(in srgb, var(--akzent) 25%, transparent); }

/* Bilder in Karten laufen nicht über. */
.karte img, .karte-inhalt img { max-width: 100%; height: auto; }