/*
 * Postkorb — Grundgestalt.
 *
 * Farbwelt aus dem Haus (bewerter-immobilien): Navy traegt, Teal ist die
 * zweite Stimme, Gruen die Handlung. Bewusst KEINE externen Schriften: die
 * Auftritte im Haus laden nichts von fremden Servern, und eine interne
 * Anwendung mit Personendaten erst recht nicht.
 *
 * Die Mandantenfarben aus dem Baukasten (ThemeTokens) ueberschreiben
 * --brand-500 und Verwandte zur Laufzeit; alles hier arbeitet deshalb mit
 * Variablen und nicht mit festen Werten.
 */

/* Das Attribut `hidden` versteckt — auch dort, wo eine Klasse ein eigenes
   `display` mitbringt. Ohne diese Zeile gewinnt jede Regel wie
   `.knopf { display: inline-block }` gegen die Voreinstellung des Browsers,
   und ein `el.hidden = true` bliebe wirkungslos. Das ist keine Feinheit:
   Der Loeschknopf im Schritt-Dialog stand dadurch auch beim Anlegen da. */
[hidden] { display: none !important; }

:root {
    --navy: #002147;
    --navy-2: #0a3260;
    --teal: #00a1a3;
    --teal-ink: #00777a;
    --brand-500: #46b972;
    --brand-600: #2f7f5c;
    --rot: #b23a48;
    --gelb: #b7791f;

    --bg: #f5f7f9;
    --surface: #ffffff;
    --surface-2: #eef2f6;
    --border: #dbe2e9;
    --border-2: #c3cedb;
    --text: #10202f;
    --text-2: #48596a;
    --text-3: #6f8091;

    --radius: 4px;
    --kopf-h: 56px;

    /* Das Erscheinungsbild eines Mandanten überschreibt --font-sans, --text
       und --font-size-base (siehe Layout, ThemeTokens). Alles hier hängt
       an diesen Variablen, damit das ohne zweite Fassung wirkt. */
    --font-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --schrift: var(--font-sans);
    --font-size-base: 15px;
    /* Nicht mandantenfähig: der Pfeil der Marke. */
    --marke-pfeil: #00a1a3;
    --schrift-fest: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
}

* { box-sizing: border-box; }

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

/* ── Kopfleiste ──────────────────────────────────────── */

.kopf {
    height: var(--kopf-h);
    background: var(--navy);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0 20px;
    position: sticky;
    top: 0;
    z-index: 20;
}

.kopf__marke {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.01em;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}

.kopf__marke svg { display: block; }

.kopf__nav {
    display: flex;
    gap: 2px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
}

.kopf__nav a {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    padding: 7px 11px;
    border-radius: var(--radius);
    font-size: 14px;
    white-space: nowrap;
    /* Zeichen und Wort in einer Linie. Das Zeichen steht nie allein — es
       beschleunigt das Wiederfinden, ersetzt die Beschriftung aber nicht:
       Ein Sinnbild für „Struktur" versteht nur, wer den Punkt schon kennt. */
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Etwas blasser als die Schrift: Das Zeichen führt das Auge, das Wort trägt
   die Aussage. Beim aktiven Punkt tritt es mit nach vorn. */
.kopf__zeichen {
    width: 16px;
    height: 16px;
    flex: none;
    opacity: 0.72;
}

.kopf__nav a:hover .kopf__zeichen,
.kopf__nav a.aktiv .kopf__zeichen { opacity: 1; }

.kopf__marke svg { flex: none; }

.kopf__nav a:hover { background: rgba(255, 255, 255, 0.09); color: #fff; }
.kopf__nav a.aktiv { background: rgba(255, 255, 255, 0.14); color: #fff; }

.kopf__rechts {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 13.5px;
    white-space: nowrap;
}

.kopf__wer { color: rgba(255, 255, 255, 0.85); }
.kopf__mandant {
    color: rgba(255, 255, 255, 0.6);
    border-left: 1px solid rgba(255, 255, 255, 0.22);
    padding-left: 14px;
}

.kopf__abmelden {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: rgba(255, 255, 255, 0.9);
    border-radius: var(--radius);
    padding: 5px 11px;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.kopf__abmelden:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* ── Rumpf ───────────────────────────────────────────── */

/* Der Inhalt nutzt die Breite des Fensters. Die frühere Lesebreite von
   1140 px war für Fliesstext richtig und für alles andere falsch: Tabellen
   mit acht Spalten, der Zweispalter im Posteingang und das Baumdiagramm
   rollten schon auf einem gewöhnlichen Schirm, während rechts und links
   Platz leer blieb. Lesbar bleibt der Fliesstext trotzdem — begrenzt wird
   jetzt der Absatz (siehe .lead), nicht die Seite. */
.inhalt {
    max-width: none;
    margin: 0 auto;
    padding: 28px 24px 64px;
}

h1 {
    font-size: 25px;
    line-height: 1.2;
    letter-spacing: -0.015em;
    margin: 0 0 6px;
    color: var(--navy);
}

h2 { font-size: 18px; margin: 28px 0 10px; color: var(--navy); }
h3 { font-size: 15.5px; margin: 22px 0 8px; }

.lead { color: var(--text-2); margin: 0 0 22px; font-size: 15.5px; }

a { color: var(--teal-ink); }

code, .fest {
    font-family: var(--schrift-fest);
    font-size: 0.88em;
    background: var(--surface-2);
    padding: 1px 5px;
    border-radius: 2px;
}

/* ── Karten ──────────────────────────────────────────── */

.karte {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 18px;
}

.karte__kopf {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    font-weight: 700;
    font-size: 14.5px;
    color: var(--navy);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.karte__leib { padding: 16px; }
.karte__leib > :first-child { margin-top: 0; }
.karte__leib > :last-child { margin-bottom: 0; }

.raster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
}

/* ── Kennzahlen ──────────────────────────────────────── */

.zahl__wert {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--navy);
    font-variant-numeric: tabular-nums;
}

.zahl__text { color: var(--text-3); font-size: 13px; margin-top: 2px; }

/* ── Tabellen ────────────────────────────────────────── */

.tabellenrahmen { overflow-x: auto; }

table {
    border-collapse: collapse;
    width: 100%;
    font-size: 14px;
}

th, td {
    text-align: left;
    padding: 9px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

thead th {
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    border-bottom: 1px solid var(--border-2);
}

tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface-2); }

/* ── Formulare ───────────────────────────────────────── */

.feld { margin-bottom: 14px; }

.feld label,
.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-2);
    margin-bottom: 4px;
}

.eingabe, .input,
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="date"], select, textarea {
    width: 100%;
    padding: 8px 11px;
    border: 1px solid var(--border-2);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 14.5px;
}

.eingabe:focus, .input:focus,
input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--teal);
    outline-offset: -1px;
    border-color: var(--teal);
}

.hinweis, .hint { font-size: 12.5px; color: var(--text-3); margin-top: 4px; }

/* ── Knoepfe ─────────────────────────────────────────── */

.knopf, .btn, button[type="submit"] {
    display: inline-block;
    padding: 8px 15px;
    border-radius: var(--radius);
    border: 1px solid var(--border-2);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

.knopf:hover, .btn:hover { background: var(--surface-2); }

.knopf--haupt, .btn-primary, button[type="submit"] {
    background: var(--brand-500);
    border-color: var(--brand-500);
    /* Gruen traegt nie weissen Text — wie auf der Website.

       Ausser die Farbe des Hauses macht daraus Gruen auf Gruen: Setzt ein
       Mandant Marke und Seitenleiste auf denselben Wert, faellt --navy mit
       --brand-500 zusammen, und die Beschriftung verschwindet. Das Layout
       rechnet deshalb --knopf-schrift aus und prueft dabei den Kontrast;
       hier steht nur der Rueckfall fuer den Fall ohne Mandantenfarben. */
    color: var(--knopf-schrift, var(--navy));
}

.knopf--haupt:hover, .btn-primary:hover, button[type="submit"]:hover {
    background: var(--brand-600);
    border-color: var(--brand-600);
    color: var(--knopf-schrift-tief, #fff);
}

/* Der Absendeknopf oben faerbt JEDEN `button[type="submit"]` gruen — und
   gewinnt gegen eine reine Klasse. „Loeschen" sah damit aus wie
   „Speichern": derselbe Knopf in derselben Farbe, nebeneinander im
   selben Fuss. Deshalb hier dieselbe Staerke im Waehler. */
/* Ein Absendeknopf, der ausdruecklich `knopf` heisst und nicht
   `knopf--haupt`, ist ein Nebenknopf und muss auch so aussehen.

   Ohne diese Regel gewinnt `button[type="submit"]` aus der Regel darueber,
   und zwei Knoepfe nebeneinander sehen gleich aus, obwohl nur einer die
   Hauptsache tut. Bei „Freigeben" und „Ablehnen" ist das nicht Kosmetik:
   Wer die beiden nicht unterscheiden kann, klickt den falschen.

   Ein Absendeknopf ganz ohne Klasse bleibt unberuehrt — dort ist der
   Hauptknopf die richtige Annahme. */
button[type="submit"].knopf:not(.knopf--haupt):not(.knopf--gefahr) {
    background: var(--surface);
    border-color: var(--border-2);
    color: var(--text);
}

button[type="submit"].knopf:not(.knopf--haupt):not(.knopf--gefahr):hover {
    background: var(--surface-2);
}

.knopf--gefahr, button[type="submit"].knopf--gefahr {
    border-color: var(--rot); color: var(--rot); background: var(--surface);
}
.knopf--gefahr:hover, button[type="submit"].knopf--gefahr:hover {
    background: var(--rot); border-color: var(--rot); color: #fff;
}
.knopf--klein { padding: 5px 10px; font-size: 13px; }

/* Ein Knopf mit Zeichen.

   Ohne eine Groesse nimmt sich ein eingebettetes SVG die Breite, die es
   bekommen kann — im Knopf war das die ganze Karte, und aus einem Knopf wurde
   ein Bild mit Beschriftung darunter. Das Zeichen ist so gross wie der Text
   und sitzt auf seiner Linie. */
.knopf .zeichen {
    width: 1.05em;
    height: 1.05em;
    vertical-align: -0.16em;
    margin-right: 7px;
}

/* ── Marken ──────────────────────────────────────────── */

.marke {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 20px;
    border: 1px solid var(--border-2);
    color: var(--text-2);
    background: var(--surface);
    white-space: nowrap;
}

.marke--gruen { color: var(--brand-600); border-color: var(--brand-600); }
.marke--rot { color: var(--rot); border-color: var(--rot); }
.marke--gelb { color: var(--gelb); border-color: var(--gelb); }
.marke--teal { color: var(--teal-ink); border-color: var(--teal); }

/* ── Meldungen ───────────────────────────────────────── */

.meldung {
    padding: 11px 15px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    border-left: 3px solid var(--teal);
    background: var(--surface);
    margin-bottom: 18px;
    font-size: 14.5px;
}

.meldung--fehler { border-left-color: var(--rot); }
.meldung--erfolg { border-left-color: var(--brand-500); }

.leer {
    padding: 34px 20px;
    text-align: center;
    color: var(--text-3);
    font-size: 14.5px;
}

/* ── Anmeldeseite ────────────────────────────────────── */

body.anmelden {
    display: grid;
    place-items: center;
    min-height: 100vh;
    background: var(--navy);
}

/*
 * Der Baukasten bringt fuer die Anmeldung eigenes, schlichtes Markup mit
 * (Ueberschrift, Absatz, Formular) — ohne Kartenrahmen. Statt das Template
 * des Baukastens zu aendern, wird hier der Inhaltsbereich selbst zur Karte:
 * so bleibt der Baukasten aktualisierbar.
 */
body.anmelden .inhalt {
    max-width: 400px;
    width: 100%;
    padding: 32px 30px;
    background: var(--surface);
    border-radius: 6px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.32);
}

body.anmelden h1 {
    font-size: 21px;
    margin-bottom: 4px;
}

body.anmelden .lead {
    font-size: 14.5px;
    margin-bottom: 22px;
}

body.anmelden form { margin: 0; }

body.anmelden button[type="submit"] {
    width: 100%;
    margin-top: 6px;
    padding: 10px 15px;
}

/* Fehlermeldung der Anmeldung (Baukasten-Markup). */
body.anmelden .alert,
body.anmelden .error {
    background: var(--surface);
    border: 1px solid var(--rot);
    border-left-width: 3px;
    border-radius: var(--radius);
    color: var(--rot);
    padding: 10px 13px;
    margin-bottom: 16px;
    font-size: 14px;
}

.content, .content_i { width: 100%; }

.fuss {
    border-top: 1px solid var(--border);
    padding: 18px 20px;
    color: var(--text-3);
    font-size: 12.5px;
    text-align: center;
}

@media (max-width: 720px) {
    .kopf { gap: 12px; padding: 0 12px; }
    .kopf__mandant, .kopf__wer { display: none; }
    .inhalt { padding: 20px 14px 48px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Anklickbare Zeilen (assets/main/zeile.js)

   Die ganze Zeile ist das Ziel, nicht der Link darin. Der Zeiger sagt es an,
   und der Rahmen bei Tastaturbedienung macht sichtbar, wo man gerade steht —
   ohne ihn sähe die Zeile bedienbar aus, ohne es für die Tastatur zu sein.
   ══════════════════════════════════════════════════════════════════════════ */
tr[data-href], [data-zeile][data-href] { cursor: pointer; }

/* Beim Ueberfahren sichtbar. Bei Tabellenzeilen macht das die Tabellenregel
   ohnehin; eine Liste ausserhalb einer Tabelle hatte bisher nichts. */
[data-zeile][data-href]:hover { background: var(--surface-2); }

tr[data-href]:focus-visible,
[data-zeile][data-href]:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: -2px;
}

/* Der Link in der Zeile bleibt sichtbar — er sagt, wohin es geht —, führt aber
   dasselbe aus wie der Zeilenklick. Er zu unterstreichen wäre ein Versprechen,
   dass daneben etwas anderes geschieht. */
tr[data-href] a[data-zeilenlink] { color: inherit; text-decoration: none; }
tr[data-href]:hover a[data-zeilenlink] { color: var(--teal-ink); }

/* ══════════════════════════════════════════════════════════════════════════
   Miniatur in der Liste

   Feste Grösse, oben ausgerichtet: Ein Brief zeigt seinen Kopf, und dort steht,
   von wem er kommt. Zentriert man das Bild, sieht man von jedem Schreiben die
   Mitte — also nichts.
   ══════════════════════════════════════════════════════════════════════════ */
.miniatur {
    display: grid;
    place-items: center;
    width: 40px;
    height: 52px;
    flex: none;
    overflow: hidden;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 3px;
}

.miniatur img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

/* Ohne Vorschaubild: die Dateiendung als Platzhalter. Ein leeres Kästchen
   liesse offen, ob die Vorschau fehlt oder noch kommt. */
.miniatur__art {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-3);
    text-transform: uppercase;
}

td.spalte-miniatur { width: 56px; padding-right: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   Hover-Vorschau (assets/main/vorschau.js)

   `pointer-events: none` für die Bildfassung: Sie folgt der Maus und darf
   nichts blockieren. Die Textfassung dagegen MUSS Ereignisse annehmen — nur so
   lässt sich darin blättern; die Klasse setzt das Skript.
   ══════════════════════════════════════════════════════════════════════════ */
.vorschau {
    position: fixed;
    z-index: 9999;
    padding: 4px;
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: 6px;
    box-shadow: 0 12px 34px rgba(0, 33, 71, 0.28);
    pointer-events: none;
}

.vorschau--karte { pointer-events: auto; }

/* Vorschauen sind Dokumentseiten, also hochkant: Die Höhe ist das Mass, die
   Breite folgt dem Seitenverhältnis. max-width ist der Notnagel für Querformat. */
.vorschau img {
    display: block;
    border-radius: 3px;
    height: 62vh;
    width: auto;
    max-width: min(46vw, 640px);
    background: #fff;
}

.vorschau__karte { width: 480px; max-width: calc(100vw - 32px); }

.vorschau__kopf {
    padding: 4px 2px 10px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.vorschau__titel {
    font-size: 14.5px;
    font-weight: 650;
    color: var(--navy);
    line-height: 1.35;
}

.vorschau__zusatz { margin-top: 4px; font-size: 12.5px; color: var(--text-3); }

/* `overscroll-behavior: contain` verhindert, dass die Seite mitscrollt, sobald
   das Ende erreicht ist — sonst ginge die Karte ausgerechnet beim Weiterdrehen zu. */
.vorschau__text {
    max-height: 320px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 8px 2px 2px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-2);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.vorschau__text::-webkit-scrollbar { width: 8px; }
.vorschau__text::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; }

/* Die Lupe nur dort, wo auch wirklich etwas kommt. */
[data-vorschau] { cursor: zoom-in; }

/* ══════════════════════════════════════════════════════════════════════════
   Menü-Umschalter (assets/main/menue.js)
   ══════════════════════════════════════════════════════════════════════════ */
.kopf__umschalter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius);
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
}

.kopf__umschalter:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.kopf__umschalter svg { display: block; }

/* Das Symbol zeigt, wohin es GEHT, nicht wo man ist: In der waagerechten
   Anordnung sieht man die Seitenspalte, in der senkrechten die Kopfzeile. */
.kopf__umschalter .zu-senkrecht { display: block; }
.kopf__umschalter .zu-waagerecht { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   Senkrechte Anordnung

   Umgesetzt allein über `data-menue` am <html>. Kein zweites Markup, keine
   zweite Vorlage: Beide Anordnungen zeigen dieselben Elemente, nur anders
   angeordnet. Zwei Vorlagen liefen unweigerlich auseinander.

   Der Umbruch bei 900 px hebt die senkrechte Anordnung wieder auf: Auf einem
   schmalen Gerät ist eine Seitenspalte kein Gewinn, sondern der halbe Platz.
   ══════════════════════════════════════════════════════════════════════════ */
:root[data-menue="senkrecht"] { --seite-w: 216px; }

@media (min-width: 900px) {
    :root[data-menue="senkrecht"] body:not(.anmelden) {
        padding-left: var(--seite-w);
    }

    :root[data-menue="senkrecht"] .kopf {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: var(--seite-w);
        height: auto;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 16px 12px;
        overflow-y: auto;
    }

    :root[data-menue="senkrecht"] .kopf__marke {
        margin-bottom: 18px;
        padding: 0 6px;
    }

    :root[data-menue="senkrecht"] .kopf__nav {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        /* Schiebt alles Weitere ans untere Ende der Spalte — Person, Mandant
           und Abmelden gehören dorthin, nicht zwischen die Menüpunkte. */
        margin-bottom: auto;
    }

    :root[data-menue="senkrecht"] .kopf__nav a {
        padding: 8px 10px;
        border-radius: var(--radius);
    }

    :root[data-menue="senkrecht"] .kopf__rechts {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding-top: 14px;
        margin-top: 14px;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        white-space: normal;
    }

    :root[data-menue="senkrecht"] .kopf__abmelden { width: 100%; }

    :root[data-menue="senkrecht"] .kopf__umschalter .zu-senkrecht { display: none; }
    :root[data-menue="senkrecht"] .kopf__umschalter .zu-waagerecht { display: block; }

    /* Der Inhalt bekommt die gewonnene Höhe — die Kopfzeile ist weg. */
    :root[data-menue="senkrecht"] .inhalt { padding-top: 24px; }
}

/* Nur für Vorleseprogramme: Der Umschalter trägt ein Symbol, und ein
   Symbol allein sagt niemandem etwas, der die Seite hört. */
.nur-vorlesen {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* In der senkrechten Anordnung steht das Zeichen fest links, damit die Wörter
   eine gemeinsame Fluchtlinie bekommen — untereinander fällt jede Abweichung
   auf, waagerecht nicht. */
@media (min-width: 900px) {
    :root[data-menue="senkrecht"] .kopf__nav a { gap: 10px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Posteingang als Zweispalter

   Die Seite braucht mehr Breite als der Rest der Anwendung — zwei Spalten in
   1140 px sind beide zu schmal. `:has()` hebt die Grenze nur für diese eine
   Seite an, ohne dass die Vorlage davon wissen muss. Wo `:has()` fehlt, bleibt
   es bei der gewohnten Breite; die Ansicht ist dann enger, aber vollständig.
   ══════════════════════════════════════════════════════════════════════════ */

.zweispalt {
    display: grid;
    grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

/* Die Liste bleibt beim Blättern stehen, das Schriftstück scrollt. Wer eine
   lange Akte liest, soll die Liste nicht aus dem Blick verlieren — das ist der
   halbe Sinn der Anordnung. */
@media (min-width: 1000px) {
    .zweispalt__liste {
        position: sticky;
        top: calc(var(--kopf-h) + 16px);
        max-height: calc(100vh - var(--kopf-h) - 48px);
        display: flex;
        flex-direction: column;
    }

    .zweispalt__liste > .karte {
        overflow-y: auto;
        min-height: 0;
    }

    /* Im senkrechten Menü gibt es keine Kopfzeile über dem Inhalt. */
    :root[data-menue="senkrecht"] .zweispalt__liste { top: 16px; max-height: calc(100vh - 32px); }
}

/* Schmales Gerät: Es gibt keinen Platz für zwei Spalten. Die rechte fällt weg,
   und die Liste führt wieder auf die eigenständige Seite — das Skript merkt
   das von selbst und hält sich heraus. */
@media (max-width: 999px) {
    .zweispalt { grid-template-columns: 1fr; }
    .zweispalt__detail { display: none; }
}

/* ── Unter der Liste: Verlauf und Zustellungen ──────────────────

   Sie gehören zur Post und nicht zum Papier: was mit dem Stück geschehen
   ist, und wer sich kümmert. Neben dem PDF nähmen sie dem Blatt die
   Breite, die es zum Lesen braucht — hier stehen sie in der schmalen
   Spalte, in der ohnehin die Post steht.

   Leer ist der Kasten unsichtbar: ohne Skript und auf schmalen Geräten
   bleibt er es, und ein Abstand ohne Inhalt sähe aus wie ein Fehler.

   Der eigene Rollbereich ist nötig, weil die Spalte oben stehen bleibt
   und eine feste Höhe hat. Ohne ihn wüchse sie über den Schirm hinaus,
   und das untere Ende wäre nicht erreichbar.
   ──────────────────────────────────────────────── */

.zweispalt__anhang:empty { display: none; }
.zweispalt__anhang > .karte:first-child { margin-top: 12px; }

@media (min-width: 1000px) {
    /* Gedeckelt, damit die Liste den groesseren Teil behaelt: Sie ist der
       Grund, warum man hier ist. Ohne Deckel teilen sich beide die Hoehe
       nach ihrem Inhalt — und ein langer Verlauf draengte die Post auf
       drei Zeilen zusammen. Nachgemessen: 177 zu 507 Pixeln. */
    .zweispalt__anhang { overflow-y: auto; min-height: 0; max-height: 45vh; }
}

/* ── Die Liste ──────────────────────────────────────────────────────────── */
.postliste { list-style: none; margin: 0; padding: 0; }

.postzeile {
    position: relative;
    display: flex;
    gap: 11px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    /* Der Streifen links zeigt den offenen Eintrag an. Er ist immer da, nur
       durchsichtig — sonst versprängen die Zeilen beim Auswählen um 3 px. */
    border-left: 3px solid transparent;
}

.postzeile:last-child { border-bottom: 0; }
.postzeile:hover { background: var(--surface-2); }

.postzeile--offen {
    background: var(--surface-2);
    border-left-color: var(--teal);
}

.postzeile:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }

/* Der Link liegt unsichtbar über der ganzen Zeile. Er trägt die Bedienung
   ohne JavaScript und macht die Zeile zugleich zu etwas, das der Browser als
   Ziel kennt — Mittelklick, „Link in neuem Tab öffnen", Adresse kopieren. */
.postzeile__link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Die Miniatur muss ÜBER dem Link liegen, sonst käme die Hover-Vorschau nie
   zum Zug — der Link finge jedes Mausereignis ab. */
.postzeile .miniatur { position: relative; z-index: 2; }

.postzeile__inhalt {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.postzeile__oben {
    display: flex;
    align-items: baseline;
    gap: 8px;
    justify-content: space-between;
}

.postzeile__titel {
    font-weight: 600;
    font-size: 13.5px;
    color: var(--navy);
    /* Ein langer Betreff darf die Spalte nicht auseinanderziehen. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.postzeile__datum {
    font-size: 12px;
    color: var(--text-3);
    white-space: nowrap;
    flex: none;
}

.postzeile__unten {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 12.5px;
}

.postzeile__absender {
    color: var(--text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
}

/* In der schmalen Spalte sind die Marken kleiner — sonst brechen sie um und
   die Zeilen werden ungleich hoch. */
.postzeile__unten .marke { font-size: 10.5px; padding: 1px 6px; }

/* ── Die rechte Spalte ──────────────────────────────────────────────────── */
/* Die Überschrift des Schriftstücks steht schon in der Liste; in der Spalte
   darf sie kleiner ausfallen, damit oben nicht zwei Zeilen um dieselbe
   Aufmerksamkeit ringen. */
.zweispalt__detail h1 { font-size: 21px; }
.zweispalt__detail .karte:first-child { margin-top: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   Kopfleiste: wer man ist, und der Weg hinaus

   Getrennt vom Menü, weil sie etwas anderes beantwortet. Beide sitzen in
   einem Rahmen; ob sie nebeneinander oder übereinander stehen, entscheidet
   allein die gewählte Anordnung. Es gibt genau eine Fassung im Markup.
   ══════════════════════════════════════════════════════════════════════════ */
.rahmen {
    display: flex;
    align-items: center;
    gap: 20px;
    height: var(--kopf-h);
    padding: 0 20px;
    background: var(--navy);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 20;
}

/* Im Rahmen trägt der Kopf keinen eigenen Hintergrund und keine eigene Höhe
   mehr — das macht jetzt der Rahmen. */
.rahmen > .kopf {
    background: none;
    position: static;
    height: auto;
    padding: 0;
    flex: 1;
    min-width: 0;
    z-index: auto;
}

.leiste {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: none;
}

.leiste__umschalter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius);
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
}

.leiste__umschalter:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.leiste__umschalter svg { display: block; }
.leiste__umschalter .zu-senkrecht { display: block; }
.leiste__umschalter .zu-waagerecht { display: none; }

/* `button.` und nicht nur die Klasse: Die allgemeine Knopfregel weiter oben
   faerbt JEDEN `button[type="submit"]` gruen und gewinnt gegen einen reinen
   Klassenwaehler. Der Abmeldeknopf bekam so den Grund der Hauptknoepfe und
   die Schrift von woanders — in der senkrechten Anordnung grau auf gruen,
   ein Verhaeltnis von 1,5:1. Gleiche Staerke im Waehler, und er sieht
   wieder aus wie das, was er ist: eine leise Nebenhandlung. */
button.leiste__abmelden {
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    padding: 6px 12px;
    border-radius: var(--radius);
    font: inherit;
    font-size: 13.5px;
    cursor: pointer;
}

button.leiste__abmelden:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* ── Das Profil ─────────────────────────────────────────────────────────── */
.profil {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.profil__bild {
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
    background: var(--teal);
}

/* Das Ersatzbild aus den Anfangsbuchstaben. Es ist kein Notbehelf: Solange
   niemand ein Bild hinterlegt, ist ein farbiger Kreis mit Initialen die
   schnellste Art, das eigene Konto von einem fremden zu unterscheiden — etwa
   nach einem Wechsel des Mandanten. */
.profil__bild--kuerzel {
    display: grid;
    place-items: center;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
}

.profil__text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}

.profil__name {
    font-size: 13.5px;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Der Mandant steht kleiner darunter und nicht daneben: Er ist die Antwort
   auf „in wessen Post arbeite ich gerade" — wichtig, aber nur beim Hinsehen. */
.profil__mandant {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.62);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Senkrechte Anordnung ───────────────────────────────────────────────── */
@media (min-width: 900px) {
    /* Der Rahmen verliert seine Zeile: Das Menü geht an die Seite, die Leiste
       bleibt oben — aber über dem Inhalt und nicht mehr über dem Menü. */
    :root[data-menue="senkrecht"] .rahmen {
        display: contents;
    }

    :root[data-menue="senkrecht"] .leiste {
        position: sticky;
        top: 0;
        z-index: 19;
        height: 52px;
        padding: 0 20px;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
        /* Alles nach rechts — links steht das Menü. */
        justify-content: flex-end;
    }

    :root[data-menue="senkrecht"] .leiste__seite {
        color: var(--navy);
        border-left: 0;
        padding-left: 0;
    }
    :root[data-menue="senkrecht"] .leiste__seite .kopf__zeichen { color: var(--teal-ink); }
    :root[data-menue="senkrecht"] .leiste__seitenzusatz { color: var(--text-3); }

    :root[data-menue="senkrecht"] .leiste__umschalter {
        border-color: var(--border-2);
        color: var(--text-3);
    }

    :root[data-menue="senkrecht"] .leiste__umschalter:hover {
        background: var(--surface-2);
        color: var(--text);
    }

    :root[data-menue="senkrecht"] .leiste__umschalter .zu-senkrecht { display: none; }
    :root[data-menue="senkrecht"] .leiste__umschalter .zu-waagerecht { display: block; }

    :root[data-menue="senkrecht"] .leiste__abmelden {
        /* Auch den Grund: Ohne ihn bleibt der gruene der Hauptknoepfe
           stehen, und diese Schrift steht darauf nicht. */
        background: var(--surface);
        border-color: var(--border-2);
        color: var(--text-2);
    }

    :root[data-menue="senkrecht"] .leiste__abmelden:hover {
        background: var(--surface-2);
        color: var(--text);
    }

    :root[data-menue="senkrecht"] .profil__name { color: var(--text); }
    :root[data-menue="senkrecht"] .profil__mandant { color: var(--text-3); }

    /* Das Menü füllt jetzt die ganze Spalte; unten steht nichts mehr. */
    :root[data-menue="senkrecht"] .kopf__nav { margin-bottom: 0; }

    /* Der Rahmen nimmt dem Kopf in der waagerechten Anordnung den Hintergrund
       ab. In der senkrechten gibt es keinen Rahmen mehr (display: contents),
       also trägt ihn die Spalte wieder selbst — ohne diese Zeile stünde das
       Menü auf durchsichtigem Grund. */
    :root[data-menue="senkrecht"] .kopf { background: var(--navy); }

    /* Die Liste im Zweispalter klebt unter der Leiste, nicht unter der
       Kopfzeile — die gibt es hier nicht. */
    :root[data-menue="senkrecht"] .zweispalt__liste {
        top: 68px;
        max-height: calc(100vh - 84px);
    }
}

/* Auf schmalen Geräten bleibt es bei einer Zeile, auch wenn senkrecht gewählt
   ist — dort greift die Seitenspalte ohnehin nicht. */
@media (max-width: 899px) {
    .profil__text { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Seitentitel in der obersten Leiste

   Zeichen, Bezeichnung, Anzahl — links in der Leiste, die sonst nur sagt,
   wer man ist. In der waagerechten Anordnung liegt die Leiste in der
   dunklen Kopfzeile (helle Schrift), in der senkrechten über dem Inhalt
   (dunkle Schrift); die Farben kommen deshalb aus zwei Regeln.
   ══════════════════════════════════════════════════════════════════════════ */
.leiste__seite {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 auto 0 0;
    padding-right: 14px;
    font-size: 15.5px;
    font-weight: 620;
    color: #fff;
    letter-spacing: -0.005em;
    white-space: nowrap;
    min-width: 0;
}

.leiste__seite .kopf__zeichen {
    width: 17px;
    height: 17px;
    opacity: 1;
    color: var(--teal);
}

.leiste__seitentitel { overflow: hidden; text-overflow: ellipsis; }

.leiste__seitenzusatz {
    font-size: 12.5px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.62);
}

/* In der Kopfzeile trennt ein feiner Strich den Titel vom Menü. */
.rahmen .leiste__seite {
    border-left: 1px solid rgba(255, 255, 255, 0.16);
    padding-left: 16px;
}

/* Handlungen einer Seite, als schmale Zeile über dem Inhalt. */
.seitenaktionen {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin: -6px 0 14px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Filterleiste über der Liste
   ══════════════════════════════════════════════════════════════════════════ */
.filter {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

/* Suche: das Zeichen sitzt im Feld, nicht davor. So bleibt das Feld die
   ganze Breite lang und sagt trotzdem, was es ist. */
.filter__suche,
.filter__postfach {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0;
}

.filter__suche .kopf__zeichen,
.filter__postfach .kopf__zeichen {
    position: absolute;
    left: 10px;
    width: 15px;
    height: 15px;
    color: var(--text-3);
    opacity: 1;
    pointer-events: none;
}

.filter__suche input,
.filter__postfach select {
    width: 100%;
    padding: 7px 10px 7px 32px;
    border: 1px solid var(--border-2);
    border-radius: var(--radius);
    background: var(--surface);
    font: inherit;
    font-size: 13.5px;
    color: var(--text);
}

.filter__suche input:focus,
.filter__postfach select:focus {
    outline: 2px solid var(--teal);
    outline-offset: -1px;
    border-color: var(--teal);
}

.filter__suche input::-webkit-search-cancel-button { cursor: pointer; }

/* Die Marken: klein, dicht, in einer Reihe, notfalls umbrechend. */
.filter__marken {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.filtermarke {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border: 1px solid var(--border-2);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-2);
    font-size: 12.5px;
    text-decoration: none;
    white-space: nowrap;
}

.filtermarke:hover { border-color: var(--teal); color: var(--teal-ink); }

.filtermarke--aktiv {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

.filtermarke--aktiv:hover { color: #fff; border-color: var(--navy); }

.filtermarke__zahl {
    font-size: 11px;
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
}

/* Das Aufheben steht am Ende, abgesetzt: Es ist kein weiterer Filter,
   sondern der Weg aus allen heraus. */
.filtermarke--aufheben {
    margin-left: auto;
    border-style: dashed;
    color: var(--text-3);
}

.filtermarke--aufheben .kopf__zeichen { width: 12px; height: 12px; opacity: 1; }

/* Nachladen im Zweispalter: Das Alte bleibt stehen und wird gedämpft, bis das
   Neue da ist. Der Übergang ist kurz genug, um nicht aufzuhalten, und lang
   genug, dass man sieht, dass etwas geschieht. */
.zweispalt__detail { transition: opacity 0.15s ease; }
.zweispalt--wartet { opacity: 0.45; pointer-events: none; }


/* Titel des Dokuments im Kopf seiner Karte (Zweispalter). Der Titel darf
   lang sein und wird abgeschnitten; Nummer und Zustand bleiben immer
   sichtbar. */
.dokumentkopf {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.dokumentkopf__titel {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dokumentkopf__zeile {
    font-weight: 400;
    font-size: 12.5px;
    color: var(--text-3);
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}
.dokumentkopf__zeile a.fest { color: inherit; text-decoration: none; }
.dokumentkopf__zeile a.fest:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════════════════
   Menü: Logo, Filterfeld, Abschnitte

   Filter und Abschnittsüberschriften gibt es nur in der senkrechten
   Anordnung. Waagerecht stehen alle Punkte in einer Zeile — da ordnet
   nichts, und ein Suchfeld hätte nichts zu durchsuchen.
   ══════════════════════════════════════════════════════════════════════════ */
.kopf__logo {
    display: block;
    height: 26px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
}

.kopf__filter,
.kopf__abschnitt { display: none; }

@media (min-width: 900px) {
    /* Logo mittig: In der Seitenleiste steht es als einziges in seiner Zeile
       und traegt die ganze Breite. Linksbuendig sass es an der Kante und
       richtete sich an nichts aus — die Menuepunkte darunter beginnen mit
       einem Zeichen, nicht mit Text, und stehen ihrerseits eingerueckt. */
    :root[data-menue="senkrecht"] .kopf__marke {
        justify-content: center;
        text-align: center;
    }

    :root[data-menue="senkrecht"] .kopf__logo {
        height: auto;
        max-height: 44px;
        max-width: 100%;
    }

    /* Bleibt beim Rollen oben stehen: In einem langen Menue sucht man
       gerade dann, wenn man schon weit unten ist — und muesste sonst erst
       wieder ganz nach oben. Der Grund darunter ist der des Menues, damit
       die Punkte nicht durchscheinen. */
    :root[data-menue="senkrecht"] .kopf__filter {
        display: block;
        position: sticky;
        top: 0;
        z-index: 3;
        margin: 0 0 8px;
        padding: 6px 4px 8px;
        background: var(--menue-grund, var(--navy));
        box-shadow: 0 6px 10px -8px rgba(0, 0, 0, 0.6);
    }

    /* Unterstrich statt Kasten: Ein Rahmen im dunklen Menü sähe aus wie ein
       angefangenes Formular. Beschriftung mittig, bis man hineinklickt. */
    :root[data-menue="senkrecht"] .kopf__filter input {
        width: 100%;
        padding: 5px 2px;
        text-align: center;
        border: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.14);
        background: transparent;
        color: rgba(255, 255, 255, 0.86);
        font: inherit;
        font-size: 12.5px;
        outline: 0;
        transition: border-color 0.15s;
    }
    :root[data-menue="senkrecht"] .kopf__filter input::placeholder { color: rgba(255, 255, 255, 0.42); }
    :root[data-menue="senkrecht"] .kopf__filter:hover input { border-bottom-color: rgba(255, 255, 255, 0.3); }
    :root[data-menue="senkrecht"] .kopf__filter input:focus { border-bottom-color: var(--teal); text-align: left; }
    :root[data-menue="senkrecht"] .kopf__filter input::-webkit-search-cancel-button { -webkit-appearance: none; }

    :root[data-menue="senkrecht"] .kopf__abschnitt {
        display: block;
        padding: 16px 10px 5px;
        color: rgba(255, 255, 255, 0.42);
        font-size: 10.5px;
        font-weight: 650;
        letter-spacing: 0.09em;
        text-transform: uppercase;
    }

    :root[data-menue="senkrecht"] .kopf__abschnitt[hidden],
    :root[data-menue="senkrecht"] .kopf__nav a[hidden] { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Marke
   ══════════════════════════════════════════════════════════════════════════ */
.kopf__marke { gap: 10px; }
.marke__zeichen { flex: none; display: block; }
.marke__wort {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
    line-height: 1;
}
.marke__wort > span { color: var(--marke-pfeil); }
.marke__wort--dunkel { color: var(--navy); font-size: 22px; }

.anmelde-marke {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 8px 0 22px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Erfassen: der Knopf im Menü

   Waagerecht ein kompakter Knopf neben der Marke, senkrecht eine volle
   Zeile unter ihr — beides derselbe Knopf, das Stylesheet ordnet.
   ══════════════════════════════════════════════════════════════════════════ */
.kopf__erfassen {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    border: 0;
    border-radius: var(--radius);
    /* Nicht die Marke selbst, sondern die Marke, so weit von der Leiste
       weggeschoben, dass man sie darauf als Flaeche sieht — sonst faellt
       der Knopf bei einem Haus mit EINER Farbe mit seinem Untergrund
       zusammen. Gerechnet im Layout (Erscheinungsbild::ausrechnen);
       hier steht nur der Rueckfall ohne Mandantenfarben. */
    background: var(--knopf-leiste, var(--brand-500));
    color: var(--knopf-leiste-schrift, #fff);
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12);
    transition: background 0.12s, transform 0.08s;
}
.kopf__erfassen:hover {
    background: var(--knopf-leiste-tief, var(--brand-600));
    color: var(--knopf-leiste-schrift-tief, #fff);
}
.kopf__erfassen { text-decoration: none; }
.kopf__erfassen:active { transform: translateY(1px); }
.kopf__erfassen .kopf__zeichen { width: 16px; height: 16px; opacity: 1; }

@media (min-width: 900px) {
    :root[data-menue="senkrecht"] .kopf__erfassen {
        width: 100%;
        justify-content: center;
        padding: 10px 12px;
        margin: 0 0 14px;
        font-size: 14px;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   Erfassen: der Dialog
   ══════════════════════════════════════════════════════════════════════════ */
.erfassen-dialog {
    width: min(760px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    padding: 0;
    border: 0;
    border-radius: calc(var(--radius) + 6px);
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 24px 64px rgba(0, 21, 45, 0.28);
    display: none;
    flex-direction: column;
}
.erfassen-dialog[open] { display: flex; }
.erfassen-dialog::backdrop { background: rgba(0, 21, 45, 0.55); backdrop-filter: blur(2px); }

.erfassen-dialog__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}
.erfassen-dialog__kopf h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 17px;
    font-weight: 650;
    color: var(--navy);
}
.erfassen-dialog__kopf .kopf__zeichen { width: 20px; height: 20px; opacity: 1; color: var(--teal-ink); }
.erfassen-dialog__schliessen {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.erfassen-dialog__schliessen:hover { background: var(--surface-2); color: var(--text); }
.erfassen-dialog__schliessen svg { width: 18px; height: 18px; }

.erfassen-dialog__leib {
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.erfassen-dialog__fuss {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    background: var(--bg);
    position: relative;
}
.erfassen-dialog__zaehler { margin-right: auto; color: var(--text-3); font-size: 13px; }

.fortschritt {
    position: absolute;
    left: 0; right: 0; top: -1px;
    height: 3px;
    background: var(--border);
}
.fortschritt__balken {
    height: 100%;
    width: 0;
    background: var(--teal);
    transition: width 0.15s linear;
}

/* Die Ablagefläche */
.ablage {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 28px 20px 22px;
    border: 2px dashed var(--border-2);
    border-radius: calc(var(--radius) + 4px);
    background: var(--bg);
    color: var(--text-2);
    transition: border-color 0.12s, background 0.12s;
}
.ablage--darueber { border-color: var(--teal); background: #eef8f8; }
.ablage__zeichen { width: 44px; height: 44px; color: var(--teal-ink); margin-bottom: 4px; }
.ablage__text { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); }
.ablage__oder { margin: 0; font-size: 12.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; }
.ablage__knopf { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; }
.ablage__knopf svg { width: 16px; height: 16px; }
.ablage__hinweis { margin: 8px 0 0; font-size: 12.5px; color: var(--text-3); }

/* Sobald Kacheln da sind, tritt die Ablage zurück. */
.ablage:not(.ablage--leer) { padding: 14px 20px; flex-direction: row; justify-content: center; gap: 14px; }
.ablage:not(.ablage--leer) .ablage__zeichen { width: 22px; height: 22px; margin: 0; }
.ablage:not(.ablage--leer) .ablage__text { font-size: 13.5px; }
.ablage:not(.ablage--leer) .ablage__oder,
.ablage:not(.ablage--leer) .ablage__hinweis { display: none; }
.ablage:not(.ablage--leer) .ablage__knopf { margin: 0; padding: 6px 12px; font-size: 13px; }

/* Die Kacheln */
.kacheln {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}
.kacheln:empty { display: none; }

.kachel {
    position: relative;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) + 2px);
    background: var(--surface);
    overflow: hidden;
    transition: border-color 0.12s, opacity 0.12s;
}
.kachel__bild {
    height: 110px;
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.kachel__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kachel__bild--blatt {
    background:
        linear-gradient(180deg, transparent 0 26px, var(--border) 26px 27px, transparent 27px 34px, var(--border) 34px 35px, transparent 35px 42px, var(--border) 42px 43px, transparent 43px),
        var(--surface-2);
}
.kachel__bild--blatt span {
    padding: 4px 9px;
    border-radius: 3px;
    background: var(--navy);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
}
.kachel__text { padding: 8px 10px 9px; min-width: 0; }
.kachel__name {
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kachel__zeile {
    font-size: 12px;
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}
.kachel__entfernen {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 21, 45, 0.72);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.12s, background 0.12s;
}
.kachel:hover .kachel__entfernen,
.kachel__entfernen:focus-visible { opacity: 1; }
.kachel__entfernen:hover { background: var(--rot); }
.kachel__entfernen svg { width: 14px; height: 14px; }

.kachel--laeuft { opacity: 0.6; }
.kachel--angenommen { border-color: var(--brand-500); }
.kachel--angenommen .kachel__zeile { color: var(--brand-600); font-weight: 600; }
.kachel--abgewiesen { border-color: var(--rot); }
.kachel--abgewiesen .kachel__zeile { color: var(--rot); }
.kachel--abgewiesen .kachel__bild { filter: grayscale(1); opacity: 0.6; }

.kachel--angenommen::after,
.kachel--abgewiesen::after {
    content: "";
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px;
}
.kachel--angenommen::after {
    background-color: var(--brand-500);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E");
}
.kachel--abgewiesen::after {
    background-color: var(--rot);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v7M12 17.5v.5'/%3E%3C/svg%3E");
}

/* ══════════════════════════════════════════════════════════════════════════
   KI-Anbieter: eine aufklappbare Karte je Anbieter
   ══════════════════════════════════════════════════════════════════════════ */
.ki__liste { display: flex; flex-direction: column; gap: 12px; max-width: 900px; }
details.ki > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
details.ki > summary::-webkit-details-marker { display: none; }
details.ki > summary::before {
    content: "";
    width: 7px; height: 7px;
    border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3);
    transform: rotate(-45deg);
    margin-right: 6px; flex: none;
    transition: transform 0.15s;
}
details.ki[open] > summary::before { transform: rotate(45deg); }
.ki--aktiv { border-color: var(--brand-500); }
.ki__name { display: flex; align-items: center; gap: 8px; flex: 1; }
.ki__stand { font-weight: 400; font-size: 13px; color: var(--text-3); }
.ki__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 16px; }
.ki__raster .feld { margin: 0; }
.ki__raster .feld:first-child { grid-column: 1 / -1; }
.ki__herkunft { font-size: 10.5px; padding: 1px 6px; vertical-align: 1px; }
.ki__kaestchen { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; margin-top: 6px; cursor: pointer; }
.ki__kaestchen input { margin-top: 3px; flex: none; }
.ki__datenschutz { margin-top: 14px; padding: 10px 12px; border-radius: var(--radius); background: var(--bg); font-size: 13.5px; }
.ki__fuss { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.ki__aktiv { margin: 0; font-weight: 600; }
.ki__knoepfe { display: flex; gap: 8px; }
.ki__ergebnis { margin-top: 12px; }

/* ══════════════════════════════════════════════════════════════════════════
   Vom Webauftritt übernehmen
   ══════════════════════════════════════════════════════════════════════════ */
.website__suche { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 10px; }
.farbwahl__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.farbwahl {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border); border-radius: var(--radius);
    cursor: pointer;
}
.farbwahl:has(input:checked) { border-color: var(--teal); background: #f2fafa; }
.farbwahl--leer { opacity: 0.55; cursor: default; }
.farbwahl input[type="checkbox"] { flex: none; }
.farbwahl__probe { width: 44px; height: 44px; border-radius: 6px; flex: none; border: 1px solid rgba(0, 0, 0, 0.08); }
.farbwahl__probe--schrift { display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 600; background: var(--surface-2); color: var(--navy); }
.farbwahl__probe--logo { background: var(--surface-2); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.farbwahl__probe--logo img { max-width: 100%; max-height: 100%; }
.farbwahl__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 13px; }
.farbwahl__titel { font-weight: 600; }
.farbwahl__punkt { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: -1px; border: 1px solid rgba(0, 0, 0, 0.1); }
.farbreihe { display: flex; gap: 6px; flex-wrap: wrap; }
.farbreihe__probe { width: 26px; height: 26px; border-radius: 5px; border: 1px solid rgba(0, 0, 0, 0.08); }

/* ══════════════════════════════════════════════════════════════════════════
   Ablagebaum als Diagramm

   Kästen von oben nach unten, verbunden durch Linien aus Rahmen an
   Pseudoelementen — kein Bild, keine Zeichenfläche. Jeder Knoten bleibt
   damit ein gewöhnliches Element: anklickbar, mit der Tastatur erreichbar,
   vorlesbar, ziehbar.

   Die Linien entstehen in zwei Stufen. Jede Ebene (ul) zeichnet die
   Senkrechte, die vom Elternkasten herunterkommt. Jeder Knoten (li)
   zeichnet die Hälfte der Querlinie zu seinen Geschwistern und die
   Senkrechte hinunter zum eigenen Kasten. Das erste und das letzte Kind
   lassen ihre äussere Hälfte weg, sonst stünde die Querlinie über den Rand
   hinaus.
   ══════════════════════════════════════════════════════════════════════════ */

.baum {
    --knoten-breite: 212px;
    --knoten-schrift: 13px;
    --linie: 2px solid var(--border-2);
    --sprosse: 26px;
    position: relative;
}
.baum--klein { --knoten-breite: 168px; --knoten-schrift: 12px; --sprosse: 20px; }
.baum--gross { --knoten-breite: 260px; --knoten-schrift: 14px; --sprosse: 32px; }
.baum--wartet { opacity: 0.5; pointer-events: none; }

/* Breite Strukturen rollen waagerecht — die Alternative wäre, sie zu
   stauchen, bis niemand mehr die Namen liest. */
.baum__flaeche {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 6px 4px 20px;
}

/* Ein zentrierter Flex-Inhalt, der breiter ist als sein Rahmen, quillt nach
   BEIDEN Seiten über — und was links übersteht, erreicht kein Rollbalken,
   denn der rollt nur nach rechts. Deshalb wächst die oberste Ebene mit
   ihrem Inhalt (max-content) und bleibt nur so lange zentriert, wie sie
   hineinpasst (min-width). */
.baum__flaeche > .baum__ebene {
    width: max-content;
    min-width: 100%;
}

.baum__ebene {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    list-style: none;
    margin: 0;
    padding: var(--sprosse) 0 0;
    position: relative;
}
.baum__ebene--wurzel { padding-top: 4px; }

/* Die Senkrechte vom Elternkasten herunter zur Querlinie. */
.baum__ebene:not(.baum__ebene--wurzel)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    height: var(--sprosse);
    border-left: var(--linie);
}

.knoten {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--sprosse) 10px 0;
}
.knoten::before,
.knoten::after {
    content: "";
    position: absolute;
    top: 0;
    width: 50%;
    height: var(--sprosse);
    border-top: var(--linie);
}
.knoten::before { right: 50%; }
.knoten::after { left: 50%; border-left: var(--linie); }

/* Einzelkind: keine Querlinie nötig, die Senkrechte der Ebene reicht. */
.knoten:only-child { padding-top: 0; }
.knoten:only-child::before,
.knoten:only-child::after { display: none; }

/* Aussen keine Querlinie, statt dessen die Ecke. */
.knoten:first-child::before,
.knoten:last-child::after { border-top: 0; }
.knoten:last-child::before { border-right: var(--linie); border-radius: 0 7px 0 0; }
.knoten:first-child::after { border-radius: 7px 0 0 0; }

/* Über der obersten Ebene hängt nichts. */
.baum__ebene--wurzel > .knoten { padding-top: 0; }
.baum__ebene--wurzel > .knoten::before,
.baum__ebene--wurzel > .knoten::after { display: none; }

.knoten--zu > .baum__ebene { display: none; }
.knoten--gezogen > .knoten__karte { opacity: 0.35; }

/* ── Der Kasten ──────────────────────────────────────────────────────── */

.knoten__karte {
    position: relative;
    width: var(--knoten-breite);
    padding: 9px 11px 10px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--art-farbe, var(--border-2));
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(0, 21, 45, 0.07);
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: var(--knoten-schrift);
    cursor: grab;
}
.knoten__karte:hover { box-shadow: 0 3px 10px rgba(0, 21, 45, 0.12); }
.knoten__karte:active { cursor: grabbing; }
.knoten__karte:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

.knoten__karte--gesellschaft { --art-farbe: var(--navy); }
.knoten__karte--fonds { --art-farbe: var(--teal); }
.knoten__karte--spv { --art-farbe: #6b4fc9; }
.knoten__karte--objekt { --art-farbe: var(--brand-500); }
.knoten__karte--abteilung { --art-farbe: #c07c2a; }
.knoten__karte--ordner { --art-farbe: var(--border-2); }

.knoten__kopf { display: flex; align-items: flex-start; gap: 9px; min-width: 0; }
.knoten__art {
    width: 26px; height: 26px; flex: none;
    border-radius: 7px;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--art-farbe) 13%, var(--surface));
    color: var(--art-farbe);
}
.knoten__art .kopf__zeichen { width: 15px; height: 15px; opacity: 1; }

.knoten__titel { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.knoten__name {
    font-weight: 650;
    color: var(--text);
    line-height: 1.25;
    /* Zwei Zeilen, dann Auslassung: Ein Kasten, der mit dem Namen wächst,
       verzieht die ganze Ebene. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.knoten__unter { font-size: 11.5px; color: var(--text-3); }
.knoten--still .knoten__name { color: var(--text-3); text-decoration: line-through; }

.knoten__fuss {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
    font-size: 11.5px; color: var(--text-3);
    padding-top: 6px;
    border-top: 1px dashed var(--border);
}
.knoten__postfach { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); min-width: 0; }
.knoten__postfach .kopf__zeichen { width: 12px; height: 12px; opacity: 0.7; flex: none; }

.knoten__aktionen {
    position: absolute;
    top: 6px; right: 6px;
    display: flex; gap: 3px;
    opacity: 0;
    transition: opacity 0.12s;
}
.knoten__karte:hover .knoten__aktionen,
.knoten__karte:focus-within .knoten__aktionen { opacity: 1; }
.knoten__knopf {
    width: 24px; height: 24px;
    border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface-2);
    color: var(--text-2);
    text-decoration: none;
    cursor: pointer;
}
.knoten__knopf:hover { background: var(--navy); color: #fff; }
.knoten__knopf svg { width: 13px; height: 13px; }

/* Der Klappknopf sitzt auf der Verbindungslinie — dort, wo der Zweig
   ansetzt, den er verbirgt. */
.knoten__klapp {
    position: absolute;
    left: 50%; bottom: -12px;
    transform: translateX(-50%);
    min-width: 24px; height: 24px;
    padding: 0 6px;
    border: 1px solid var(--border-2);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text-2);
    font: inherit;
    font-size: 11px;
    font-weight: 650;
    line-height: 1;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    z-index: 2;
}
.knoten__klapp:hover { border-color: var(--teal); color: var(--teal-ink); }
.knoten__klapp-zeichen { width: 9px; height: 9px; position: relative; }
.knoten__klapp-zeichen::before,
.knoten__klapp-zeichen::after {
    content: "";
    position: absolute;
    left: 0; top: 4px;
    width: 9px; height: 1.8px;
    background: currentColor;
    border-radius: 1px;
}
/* Zugeklappt wird aus dem Minus ein Plus, und die Zahl der verborgenen
   Knoten tritt daneben. */
.knoten--zu > .knoten__karte .knoten__klapp-zeichen::after { transform: rotate(90deg); }
.knoten__klapp-zahl { display: none; margin-left: 5px; }
.knoten--zu > .knoten__karte .knoten__klapp-zahl { display: inline; }
.knoten--zu > .knoten__karte .knoten__klapp { border-color: var(--teal); color: var(--teal-ink); background: #eef8f8; }

/* ── Ablageziele beim Ziehen ─────────────────────────────────────────── */

.knoten__karte.ziel--hinein {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(0, 161, 163, 0.22);
}
.knoten__karte.ziel--davor::before,
.knoten__karte.ziel--danach::before {
    content: "";
    position: absolute;
    top: -4px; bottom: -4px;
    width: 4px;
    border-radius: 2px;
    background: var(--teal);
}
.knoten__karte.ziel--davor::before { left: -9px; }
.knoten__karte.ziel--danach::before { right: -9px; }

.baum__wurzel {
    margin: 4px 4px 2px;
    padding: 10px 14px;
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    color: var(--text-3);
    font-size: 13px;
    display: flex; align-items: center; gap: 10px;
}
.baum__wurzel .kopf__zeichen { width: 16px; height: 16px; opacity: 0.6; }
.baum__wurzel--ziel { border-color: var(--teal); background: #e6f5f5; color: var(--teal-ink); }

/* ── Leiste über dem Baum ────────────────────────────────────────────── */

.baum-leiste { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.baum-leiste__gruppe { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.baum-leiste__gruppe button {
    border: 0; background: var(--surface); color: var(--text-2);
    font: inherit; font-size: 12.5px; padding: 5px 11px; cursor: pointer;
}
.baum-leiste__gruppe button + button { border-left: 1px solid var(--border); }
.baum-leiste__gruppe button:hover { background: var(--surface-2); }
.baum-leiste__gruppe button[aria-pressed="true"] { background: var(--navy); color: #fff; }

@media (max-width: 700px) {
    .knoten__aktionen { opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Dialog (allgemein) und das Knotenformular darin
   ══════════════════════════════════════════════════════════════════════════ */
.dialog {
    width: min(960px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    padding: 0;
    border: 0;
    border-radius: calc(var(--radius) + 6px);
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 24px 64px rgba(0, 21, 45, 0.28);
    display: none;
    flex-direction: column;
}
.dialog[open] { display: flex; }
.dialog::backdrop { background: rgba(0, 21, 45, 0.55); backdrop-filter: blur(2px); }
.dialog__kopf {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px; border-bottom: 1px solid var(--border);
}
.dialog__kopf h2 { margin: 0; font-size: 17px; font-weight: 650; color: var(--navy); }
.dialog__schliessen {
    width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent;
    color: var(--text-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.dialog__schliessen:hover { background: var(--surface-2); color: var(--text); }
.dialog__schliessen svg { width: 18px; height: 18px; }
.dialog__leib { padding: 18px 20px 20px; overflow-y: auto; }

.knoten-formular__raster { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 28px; }
@media (max-width: 760px) { .knoten-formular__raster { grid-template-columns: 1fr; } }
.knoten-formular__titel { margin: 0 0 12px; font-size: 13px; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-2); }
.knoten-formular .feld { margin-bottom: 12px; }
.feld--zweier { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.knoten-formular__fuss {
    display: flex; align-items: center; gap: 8px;
    margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--border);
}

/* Fliesstext bekommt seine Lesebreite selbst — eine Zeile über die ganze
   Breite eines 34-Zoll-Schirms liest niemand zu Ende. */
.lead { max-width: 96ch; }
.inhalt > .hinweis { max-width: 110ch; }

/* ══════════════════════════════════════════════════════════════════════════
   Benutzerverwaltung
   ══════════════════════════════════════════════════════════════════════════ */
.benutzer-filter { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.benutzer-filter__suche { flex: 1 1 260px; min-width: 200px; }
.benutzer-filter .eingabe { margin: 0; }
.benutzer-filter select { width: auto; min-width: 150px; }

.benutzer-name { display: flex; align-items: flex-start; gap: 10px; }
.benutzer-kuerzel {
    width: 30px; height: 30px; flex: none;
    border-radius: 50%;
    background: var(--navy); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em;
}
.benutzer-mail { font-size: 12.5px; color: var(--text-3); text-decoration: none; }
.benutzer-mail:hover { text-decoration: underline; }

.karte--warnung { border-color: var(--gelb); }
.karte--warnung .karte__kopf { background: #fdf6e7; color: #7a5310; }
.passwort-anzeige {
    margin: 0;
    padding: 14px 18px;
    border: 1px dashed var(--border-2);
    border-radius: var(--radius);
    background: var(--surface-2);
    font-size: 22px;
    letter-spacing: 0.12em;
    user-select: all;
    word-break: break-all;
}

/* Rollen- und Abteilungswahl: Kästchen mit Erklärung, keine nackte Liste.
   Wer Rechte vergibt, soll lesen können, was er vergibt. */
.rollenwahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.rollenwahl__feld,
.abteilungswahl__feld {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
}
.rollenwahl__feld:has(input:checked),
.abteilungswahl__feld:has(input:checked) { border-color: var(--teal); background: #f2fafa; }
.rollenwahl__feld input,
.abteilungswahl__feld input { margin-top: 3px; flex: none; }
.rollenwahl__feld span,
.abteilungswahl__feld span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rollenwahl__feld .hinweis,
.abteilungswahl__feld .hinweis { margin: 0; font-size: 12px; }

.abteilungswahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }

.abteilung-neu { display: grid; grid-template-columns: 2fr 1fr 2fr 1.4fr auto; gap: 12px; align-items: end; }
@media (max-width: 900px) { .abteilung-neu { grid-template-columns: 1fr; } }
.eingabe--zeile { margin: 0; padding: 5px 8px; font-size: 13px; }
.zeile--still { opacity: 0.6; }

/* ══════════════════════════════════════════════════════════════════════════
   Benutzerformular: zwei Spalten, rechts die Zuständigkeit
   ══════════════════════════════════════════════════════════════════════════ */
.benutzer-spalten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); gap: 20px; align-items: start; }
@media (max-width: 1100px) { .benutzer-spalten { grid-template-columns: 1fr; } }
/* Der Baum bleibt beim Blättern stehen — man hakt ihn an, während man links liest. */
.benutzer-spalten__rechts { position: sticky; top: 16px; }
.benutzer-spalten .karte { margin-bottom: 16px; }

.zustaendigkeit { max-height: min(62vh, 620px); overflow-y: auto; }
.zustaendigkeit__leiste {
    display: flex; align-items: center; gap: 8px;
    padding: 0 0 10px; margin-bottom: 6px;
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; background: var(--surface); z-index: 1;
}
.zustaendigkeit__suche { flex: 1; min-width: 0; }
.zustaendigkeit__suche input {
    width: 100%;
    padding: 5px 9px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    outline: 0;
}
.zustaendigkeit__suche input:focus { border-color: var(--teal); }
.zustaendigkeit__suche input::-webkit-search-cancel-button { -webkit-appearance: none; }
.zustaendigkeit__zahl { font-size: 12.5px; color: var(--text-3); padding: 6px 2px 2px; }
.zustaendigkeit__leer { padding: 14px 2px; font-size: 13px; color: var(--text-3); }

.zweig__zeile {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 6px 5px calc(6px + var(--tiefe, 0) * 18px);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 13.5px;
}
.zweig__zeile:hover { background: var(--surface-2); }
.zweig__zeile input { flex: none; }
.zweig__art { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--border-2); }
.zweig__art--gesellschaft { background: var(--navy); }
.zweig__art--fonds { background: var(--teal); }
.zweig__art--spv { background: #6b4fc9; }
.zweig__art--objekt { background: var(--brand-500); }
.zweig__art--abteilung { background: #c07c2a; }
.zweig__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zweig__kuerzel { font-size: 11.5px; }
.zweig__geerbt {
    margin-left: auto; flex: none;
    font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--teal-ink);
}
.zweig--geerbt > .zweig__zeile { color: var(--text-3); cursor: default; }
.zweig--geerbt > .zweig__zeile:hover { background: transparent; }

/* Mitglieder einer Abteilung: dieselbe Kästchenliste wie die Rollenwahl,
   nur mit dem Namenskürzel davor — man sucht Menschen, nicht Zeilen. */
.mitgliederwahl { display: flex; flex-direction: column; gap: 6px; max-height: min(58vh, 560px); overflow-y: auto; }
.mitgliederwahl__feld {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
}
.mitgliederwahl__feld:has(input:checked) { border-color: var(--teal); background: #f2fafa; }
.mitgliederwahl__feld input { flex: none; }
.mitgliederwahl__feld .benutzer-kuerzel { width: 26px; height: 26px; font-size: 10.5px; }
.mitgliederwahl__text { display: flex; flex-direction: column; min-width: 0; font-size: 13px; }
.mitgliederwahl__text .hinweis { margin: 0; font-size: 11.5px; }

/* ══════════════════════════════════════════════════════════════════════════
   Mandantenwechsler in der Kopfleiste

   Erscheint nur, wer zu mehr als einem Mandanten gehört. Ein <details>,
   kein Skript: Das Auf- und Zuklappen kann der Browser, und jeder Eintrag
   ist ein eigenes Formular — damit funktioniert der Wechsel auch ohne
   JavaScript und trägt seinen CSRF-Wert mit.
   ══════════════════════════════════════════════════════════════════════════ */
.mandantenwahl { position: relative; }
.mandantenwahl > summary {
    list-style: none;
    display: flex; align-items: center; gap: 7px;
    padding: 5px 10px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}
.mandantenwahl > summary::-webkit-details-marker { display: none; }
.mandantenwahl > summary:hover { background: rgba(255, 255, 255, 0.18); }
.mandantenwahl .kopf__zeichen { width: 14px; height: 14px; opacity: 0.85; }
.mandantenwahl__aktuell { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.mandantenwahl__pfeil {
    width: 6px; height: 6px; flex: none;
    border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
}
.mandantenwahl[open] > summary { background: rgba(255, 255, 255, 0.22); }

.mandantenwahl__liste {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 40;
    min-width: 220px;
    padding: 5px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 10px 30px rgba(0, 21, 45, 0.22);
}
.mandantenwahl__liste form { margin: 0; }
.mandantenwahl__eintrag {
    display: block;
    width: 100%;
    padding: 7px 10px;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 13.5px;
    text-align: left;
    cursor: pointer;
}
.mandantenwahl__eintrag:hover { background: var(--surface-2); }
.mandantenwahl__eintrag--aktiv { font-weight: 650; color: var(--teal-ink); }

@media (max-width: 900px) {
    .mandantenwahl__aktuell { display: none; }
}

/* Mitgliedschaften je Mandant im Plattformformular. */
.mandantenrollen { display: flex; flex-direction: column; gap: 6px; }
.mandantenrollen__zeile {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.mandantenrollen__zeile--aktiv { border-color: var(--teal); background: #f2fafa; }
.mandantenrollen__name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.mandantenrollen__zeile select { width: auto; min-width: 130px; }

/* ══════════════════════════════════════════════════════════════════════════
   Durchsuchbare Auswahl (Select2)

   Select2 liegt im Haus (assets/main/fremd/) und bringt sein eigenes
   Aussehen mit: graue Rahmen, blaue Markierung, 28 Pixel hoch. Das passt
   nicht zu den uebrigen Feldern. Geaendert wird nicht die fremde Datei —
   sie soll bei einem Fassungswechsel austauschbar bleiben —, sondern hier.

   Das echte <select> bleibt im Dokument, traegt weiter seinen Namen und
   bleibt fuer Vorleseprogramme lesbar; Select2 nimmt es nur aus dem Blick.
   Ohne JavaScript steht es sichtbar da und alles bleibt beim Alten.
   ══════════════════════════════════════════════════════════════════════════ */
/* So breit wie ein <select> im selben Haus: in Formularen ueber die volle
   Breite des Feldes. Wo es anders sein soll, steht es weiter unten. */
.select2-container {
    display: block;
    width: 100%;
    min-width: 0;
}

/* Der geschlossene Zustand — dieselben Masse wie .eingabe daneben. */
.select2-container--default .select2-selection--single {
    /* `relative`, weil das Pfeilchen weiter unten als ::after darin haengt. */
    position: relative;
    height: auto;
    min-height: var(--eingabe-h, 34px);
    padding: 5px 28px 5px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}
.select2-container--default .select2-selection--single:hover { border-color: var(--border-2); }
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--teal);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0;
    color: var(--text);
    font: inherit;
    font-size: 14px;
    line-height: 22px;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--text-3);
}

/* Das Pfeilchen: dieselbe gedrehte Ecke wie ueberall im Haus, nicht das
   ausgefuellte Dreieck von Select2. */
.select2-container--default .select2-selection--single .select2-selection__arrow { display: none; }
.select2-container--default .select2-selection--single::after {
    content: "";
    position: absolute;
    right: 11px;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -4px;
    border-right: 1.6px solid var(--text-3);
    border-bottom: 1.6px solid var(--text-3);
    transform: rotate(45deg);
    pointer-events: none;
}

/* Das Klappfeld. */
.select2-dropdown {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 10px 30px rgba(0, 21, 45, 0.2);
}
.select2-container--open .select2-dropdown--below { margin-top: 4px; }
.select2-container--open .select2-dropdown--above { margin-top: -4px; }

.select2-search--dropdown { padding: 6px 6px 0; }
.select2-container--default .select2-search--dropdown .select2-search__field {
    padding: 6px 9px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 13.5px;
    outline: 0;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--teal);
}
.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button { -webkit-appearance: none; }

.select2-results { padding: 6px; }
.select2-container--default .select2-results > .select2-results__options { max-height: 260px; }
.select2-container--default .select2-results__option {
    padding: 7px 10px;
    border-radius: var(--radius);
    color: var(--text);
    font-size: 13.5px;
}

/* Markiert (Tastatur oder Maus) traegt den Grauton des Hauses, nicht Blau.
   Gewaehlt traegt kein Feld, sondern Gewicht und Teal — sonst sieht die
   Liste aus, als waeren zwei Eintraege gleichzeitig markiert. */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
    background: var(--surface-2);
    color: var(--text);
    /* Der Strich links ist der Tastaturzeiger. Der graue Grund allein ist so
       hell, dass man beim Tippen nicht sieht, was Enter treffen wuerde. */
    box-shadow: inset 2px 0 0 var(--teal);
}
.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option[data-selected=true] {
    background: transparent;
    font-weight: 650;
    color: var(--teal-ink);
}
.select2-container--default .select2-results__message {
    padding: 10px;
    color: var(--text-3);
    font-size: 13px;
}

/* Eine Auswahl mit `style="max-width:…"` am <select>: das Mass wandert beim
   Aufbau auf den Behaelter (siehe auswahl.js). Breite bleibt 100 %, gekappt
   durch das Mass — genau wie zuvor beim <select>. */

/* In den Filterzeilen richten sich die Felder nach ihrem Inhalt und stehen
   nebeneinander. Eine Auswahl, die dort auf volle Breite ginge, schoebe
   alles andere in die naechste Zeile. */
.benutzer-filter .select2-container {
    display: inline-block;
    width: auto;
    min-width: 150px;
    max-width: 100%;
}

/* In der Filterzeile des Posteingangs sitzt die Auswahl in einer schmalen
   Leiste. Das Zeichen der Zeile liegt dort absolut ueber dem Feld — der
   Text braucht denselben linken Abstand, sonst schoebe er sich darunter. */
.filter__postfach .select2-container { flex: 1; min-width: 0; }
/* Das Zeichen liegt absolut ueber dem Feld. Select2 stellt sich als
   positioniertes Element daneben und wuerde es sonst allein deshalb
   verdecken, weil es spaeter im Dokument steht. */
.filter__postfach .kopf__zeichen { z-index: 1; }
.filter__postfach .select2-container--default .select2-selection--single {
    padding-left: 32px;
    border-color: var(--border-2);
}
.filter__postfach .select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: 13.5px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Dokumentation: der Ablauf als Kette von Schritten

   Senkrecht und nicht als Diagramm mit Verzweigungen: Ein Postweg ist eine
   Kette. Was sich verzweigt (Einschreiben anders als Standardbrief), ist ein
   eigener Ablauf — das trennt sauberer, als es Linien je könnten.
   ══════════════════════════════════════════════════════════════════════════ */
.ablauf-leiste { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 22px 0 10px; }
.ablauf-leiste__titel { margin: 0; font-size: 17px; font-weight: 650; color: var(--navy); }
.ablauf-leiste__zahl { margin-right: auto; font-size: 13px; color: var(--text-3); }

.ablauf { position: relative; }
.ablauf--wartet { opacity: 0.5; pointer-events: none; }

.ablauf__schritt {
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    padding: 0 0 14px 0;
    /* Zeigefinger, nicht Greifhand: Ein Klick oeffnet den Schritt, das ist
       der haeufigere Griff. Ziehen geht weiterhin, und waehrend des Zugs
       wechselt der Zeiger. */
    cursor: pointer;
}
.ablauf__schritt:active { cursor: grabbing; }
.ablauf__schritt--gezogen { opacity: 0.4; }

/* Die Linie von einem Schritt zum nächsten — sie endet am letzten. */
.ablauf__schritt::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 30px;
    bottom: -2px;
    border-left: 2px solid var(--border);
}
.ablauf__schritt:last-child::before { display: none; }

.ablauf__nummer {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
    position: relative; z-index: 1;
}

.ablauf__karte {
    border: 1px solid var(--border);
    border-left: 4px solid var(--art-farbe, var(--border-2));
    border-radius: var(--radius);
    background: var(--surface);
    padding: 11px 13px 12px;
}
.ablauf__karte--annahme { --art-farbe: var(--navy); }
.ablauf__karte--leerung { --art-farbe: var(--teal); }
.ablauf__karte--uebergabe { --art-farbe: #b7791f; }
.ablauf__karte--zaehlung { --art-farbe: #6b4fc9; }
.ablauf__karte--oeffnung { --art-farbe: #0f8a8c; }
.ablauf__karte--erfassung { --art-farbe: var(--brand-500); }
.ablauf__karte--transport { --art-farbe: #3b6fb6; }
.ablauf__karte--pruefung { --art-farbe: var(--rot); }
.ablauf__karte--ablage { --art-farbe: var(--text-3); }
.ablauf__karte--sonstiges { --art-farbe: var(--border-2); }

.ablauf__kopf { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.ablauf__art {
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--art-farbe);
}
.ablauf__titel { font-size: 15px; }
/* Die Karte ist das Ziel. Sie sagt es beim Ueberfahren mit dem Rand, nicht
   mit einem Zeichen, das erst dann erscheint. */
.ablauf__schritt > .ablauf__karte { transition: box-shadow 0.12s, border-color 0.12s; }
.ablauf__schritt:hover > .ablauf__karte {
    border-color: var(--border-2);
    box-shadow: 0 3px 10px rgba(0, 21, 45, 0.12);
}
.ablauf__schritt:hover .ablauf__titel { color: var(--teal-ink); }
.ablauf__schritt:focus { outline: 0; }
.ablauf__schritt:focus-visible > .ablauf__karte {
    outline: 2px solid var(--teal);
    outline-offset: 1px;
}

.ablauf__text { margin: 7px 0 0; font-size: 13.5px; color: var(--text-2); }

.ablauf__felder {
    display: flex; flex-wrap: wrap; gap: 5px 18px;
    margin-top: 9px;
    font-size: 12.5px; color: var(--text-2);
}
.ablauf__marke {
    display: inline-block;
    min-width: 52px;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--text-3);
}

.ablauf__luecke {
    margin-top: 9px;
    padding: 6px 9px;
    border-radius: var(--radius);
    background: #fdf3e3;
    color: #8a5a12;
    font-size: 12.5px;
}

/* Ablageziele beim Ziehen */
.ablauf__schritt--davor > .ablauf__karte { box-shadow: 0 -3px 0 var(--teal); }
.ablauf__schritt--danach > .ablauf__karte { box-shadow: 0 3px 0 var(--teal); }

/* Gedruckt wird das hier oft — für die Verfahrensdokumentation im Ordner.
   Dann stört alles, was man nicht lesen kann: Menü, Knöpfe, Formulare. */
.druckkopf { display: none; }

@media print {
    .kopf, .leiste, .rahmen, .fuss,
    .ablauf-leiste .knopf, .ablauf-kopf, .knopf, dialog, .meldung,
    /* Bedienhinweise gelten dem Bildschirm; auf Papier kann man nichts ziehen. */
    .inhalt .hinweis, .loeschbereich, .ablauf__terminversand { display: none !important; }

    /* Der Kopf des Blattes. Auf dem Bildschirm stuende er doppelt — dort
       traegt ihn schon die Leiste ganz oben. */
    .druckkopf { display: block; margin: 0 0 18px; }
    .druckkopf h1 { margin: 0 0 4px; font-size: 19px; }
    .druckkopf__zweck { margin: 0 0 3px; font-size: 13px; }
    .druckkopf__zeile { margin: 0; font-size: 11.5px; color: #555; }

    /* Die Ueberschrift der Kette braucht auf Papier keine Zaehlung mehr —
       die Nummern stehen an den Schritten. */
    .ablauf-leiste__zahl { display: none; }
    .inhalt { padding: 0; max-width: none; }
    .karte { border: 0; box-shadow: none; }
    .ablauf__schritt { break-inside: avoid; cursor: default; }
    a[href]::after { content: ""; }
}

/* ── Spaltenfilter ───────────────────────────────────── */

/* Die Filterzeile gehört zum Kopf und sieht auch so aus: eine zweite Zeile im
   selben Grau, nur ohne Versalien. Stünde sie über der Tabelle, müsste man
   raten, welches Feld zu welcher Spalte gehört. */
.filterzeile td {
    background: var(--surface-2);
    border-bottom: 1px solid var(--border-2);
    padding: 5px 8px 7px;
    text-transform: none;
}

.filterfeld {
    width: 100%;
    min-width: 60px;
    box-sizing: border-box;
    padding: 4px 7px;
    font: inherit;
    font-size: 12.5px;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.filterfeld::placeholder { color: var(--text-3); }

.filterfeld:focus {
    outline: 2px solid var(--teal);
    outline-offset: -1px;
    border-color: var(--teal);
}

/* Ein gefülltes Feld bleibt sichtbar, auch wenn der Blick woanders ist —
   sonst sucht man später den Grund für die kurze Liste. */
.filterfeld:not(:placeholder-shown) {
    border-color: var(--teal);
    background: var(--surface);
}

/* Die Meldung, wenn nichts übrig bleibt: eine Zeile in der Tabelle und kein
   Kasten daneben, damit sie auch beim seitlichen Rollen dort steht, wo die
   Zeilen wären. */
.filterzeile__leer {
    color: var(--text-3);
    font-style: italic;
    text-align: center;
    padding: 18px 12px;
}

/* Die letzte SICHTBARE Zeile trägt keinen Strich; die Leermeldung dahinter
   zählt nur, wenn sie zu sehen ist. */
tbody tr:has(+ tr[data-filter-leer][hidden]) td { border-bottom: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   Der Schritt in zwei Spalten

   Links steht, was geschieht; rechts, wann. Das trennt zwei Fragen, die
   verschieden gelesen werden: Den Ablauf liest man einmal von oben nach
   unten, die Fristen prueft man Zeile fuer Zeile in der rechten Spalte.

   Sie war einmal schmal, und das kam sie teuer zu stehen: Wort ueber Wert
   brauchte zwei Zeilen je Angabe, vier Angaben also acht — die Karte wurde
   hoch, und in der Liste stand ein Schritt schnell so hoch wie drei. Jetzt
   ist die Spalte breit genug, dass Zeichen, Wort und Wert nebeneinander
   Platz haben. Eine Zeile je Angabe, halbe Hoehe. Der Platz dafuer kam von
   links, wo ohnehin keine Zeile ihn brauchte.
   ══════════════════════════════════════════════════════════════════════════ */
.ablauf__karte {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 236px;
    gap: 0 16px;
}
@media (max-width: 860px) {
    .ablauf__karte { grid-template-columns: minmax(0, 1fr) 200px; }
}
@media (max-width: 720px) {
    .ablauf__karte { grid-template-columns: minmax(0, 1fr); }
    .ablauf__zeit { border-left: 0 !important; border-top: 1px solid var(--border); margin-top: 10px; padding: 10px 0 0 !important; }
}

.ablauf__zeit {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-left: 16px;
    border-left: 1px solid var(--border);
    font-size: 12.5px;
}

/* Zeichen, Wort, Wert. Der Wert ganz rechts und rechtsbuendig: So stehen
   die Uhrzeiten mehrerer Schritte untereinander auf einer Kante, und beim
   Pruefen springt das Auge eine Spalte hinunter statt im Zickzack. */
.ablauf__zeitzeile {
    display: grid;
    grid-template-columns: 15px auto minmax(0, 1fr);
    align-items: center;
    gap: 0 7px;
    min-height: 19px;
}
.ablauf__zeitzeile span {
    font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text-3);
}
.ablauf__zeitzeile b { font-weight: 650; color: var(--text); text-align: right; }

/* Das Zeichen traegt die Farbe der Zeile, nicht die des Textes: blasser als
   das Wort, damit es fuehrt und nicht ruft. */
.ablauf__zeitzeichen {
    width: 15px; height: 15px;
    color: var(--text-3);
    flex: none;
}

/* Eine Frist ist keine Uhrzeit wie jede andere — sie ist die, die reissen
   kann. Also faellt sie auch ins Auge, samt ihrem Zeichen. */
.ablauf__zeitzeile--frist b { color: var(--rot); }
.ablauf__zeitzeile--frist .ablauf__zeitzeichen,
.ablauf__zeitzeile--frist span { color: var(--rot); opacity: 0.85; }

.ablauf__zeitleer { font-size: 12px; color: var(--text-3); font-style: italic; }
.ablauf__terminversand { margin-top: 6px; }

/* ══════════════════════════════════════════════════════════════════════════
   Zwei Blicke auf dieselbe Kette

   Die Liste ist zum Arbeiten: Sie zeigt jeden Schritt ganz, mit Text,
   Zustaendigen und Nachweis. Sie wird aber lang — zwanzig Schritte sind
   zwanzig Bildschirmhoehen, und wer wissen will, wie der Weg im Ganzen
   verlaeuft, scrollt statt zu sehen.

   Die Schlange ist zum Ueberblicken: dieselben Schritte als Kacheln, zeilen-
   weise hin und zurueck, mit Pfeilen dazwischen. Sie zeigt nur, was auf eine
   Kachel passt — Nummer, Art, Titel, Zeiten. Alles Weitere steht einen Klick
   entfernt im Dialog, und die Liste steht einen Klick daneben.

   Gedruckt wird immer die Liste: Auf Papier zaehlt der Wortlaut, nicht der
   Ueberblick — und die Pfeile sind Hintergrundbilder, die kein Drucker von
   selbst mitnimmt. Deshalb steht alles Folgende in `@media screen`.
   ══════════════════════════════════════════════════════════════════════════ */

.ansichtwahl {
    display: inline-flex;
    border: 1px solid var(--border-2);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
}
.ansichtwahl__knopf {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px;
    border: 0;
    background: transparent;
    font: inherit; font-size: 13px;
    color: var(--text-2);
    cursor: pointer;
}
.ansichtwahl__knopf + .ansichtwahl__knopf { border-left: 1px solid var(--border); }
.ansichtwahl__knopf svg { width: 15px; height: 15px; flex: none; }
.ansichtwahl__knopf:hover { background: var(--surface-2); color: var(--text); }
.ansichtwahl__knopf:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }

/* Der gewaehlte Blick ist gedrueckt und bleibt es — `aria-pressed` sagt es
   dem Vorleseprogramm, die Farbe dem Auge. Zwei Wahrheiten, eine Quelle. */
.ansichtwahl__knopf[aria-pressed="true"] {
    background: var(--navy);
    color: #fff;
}

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

@media screen {
    .ablauf--schlange {
        /* Die Spaltenzahl rechnet das Skript aus der Breite aus und setzt sie
           hier ein; drei gilt, solange noch nichts gerechnet wurde. */
        display: grid;
        grid-template-columns: repeat(var(--schlange-spalten, 3), minmax(0, 1fr));
        gap: 38px 34px;
        align-items: stretch;
        /* Platz fuer die Marke „Start", die ueber der ersten Kachel haengt. */
        padding-top: 14px;
    }

    .ablauf--schlange .ablauf__schritt {
        display: block;
        padding: 0;
        height: 100%;
    }
    .ablauf--schlange .ablauf__karte {
        display: block;
        height: 100%;
        padding: 10px 12px 11px;
    }

    /* Die Nummer rueckt in die Ecke der Kachel: Eine eigene Spalte fuer sie
       kostete hier ein Siebtel der Breite, und die fehlt dem Titel. Der Ring
       in Papierfarbe trennt sie vom Rand, ueber dem sie sitzt. */
    .ablauf--schlange .ablauf__nummer {
        position: absolute;
        top: -9px; left: -8px;
        width: 24px; height: 24px;
        font-size: 11.5px;
        box-shadow: 0 0 0 3px var(--surface);
        z-index: 2;
    }

    /* Was auf der Kachel keinen Platz hat. Es ist nicht fort — ein Klick
       oeffnet den Schritt, und die Liste zeigt wieder alles. */
    .ablauf--schlange .ablauf__text,
    .ablauf--schlange .ablauf__felder,
    .ablauf--schlange .ablauf__terminversand { display: none; }

    .ablauf--schlange .ablauf__kopf { display: block; }
    .ablauf--schlange .ablauf__art { display: block; margin-bottom: 2px; font-size: 9.5px; }
    .ablauf--schlange .ablauf__titel { font-size: 13.5px; line-height: 1.3; }

    /* „Offen" bleibt: Es ist der einzige Hinweis, der eine Pruefung angeht.
       Er wird nur auf eine Zeile gekuerzt — der ganze Text steht im `title`. */
    .ablauf--schlange .ablauf__luecke {
        margin-top: 7px;
        padding: 3px 7px;
        font-size: 11.5px;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    /* Die Zeiten wandern unter den Titel und legen sich nebeneinander. Das
       Wort dazu faellt weg — dafuer steht das Zeichen davor. Es faellt nur
       fuer das Auge weg: Fuer das Vorleseprogramm bleibt es stehen. */
    .ablauf--schlange .ablauf__zeit {
        flex-direction: row; flex-wrap: wrap;
        gap: 3px 13px;
        margin-top: 8px;
        padding: 7px 0 0;
        border-left: 0;
        border-top: 1px solid var(--border);
    }
    .ablauf--schlange .ablauf__zeitzeile {
        display: inline-flex; align-items: center; gap: 5px;
        min-height: 0;
    }
    .ablauf--schlange .ablauf__zeitzeile span {
        position: absolute;
        width: 1px; height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .ablauf--schlange .ablauf__zeitzeile b { text-align: left; font-size: 12px; }

    /* ── Die Pfeile ──────────────────────────────────────────────────────
       Einer je Kachel, im Abstand zur naechsten: nach rechts in den Zeilen,
       die vorwaerts laufen, nach links in denen, die zurueck laufen, und
       nach unten am Ende jeder Zeile. Die letzte Kachel bekommt keinen —
       dort hoert der Weg auf.

       Gezeichnet als ein Bild statt aus Raendern: Schaft und Spitze bleiben
       so in einem Stueck, und Drehen genuegt fuer die drei Richtungen.

       Die Richtung ist eine eigene Klasse und nicht dieselbe wie die der
       Zeile: Die letzte Kachel einer rueckwaerts laufenden Zeile zeigt nach
       unten, gehoert aber weiter zu ihrer Zeile. Wer keine Richtung traegt,
       bekommt keinen Pfeil — das ist die letzte Kachel der Kette. */
    .ablauf--schlange .ablauf__schritt--rechts::after,
    .ablauf--schlange .ablauf__schritt--links::after,
    .ablauf--schlange .ablauf__schritt--runter::after {
        content: "";
        position: absolute;
        width: 30px; height: 12px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 12'%3E%3Cpath d='M1.5 6h29M26 1.8 30.5 6 26 10.2' fill='none' stroke='%2393a6b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
        pointer-events: none;
    }
    .ablauf--schlange .ablauf__schritt--rechts::after {
        left: 100%; top: 50%;
        margin: -6px 0 0 2px;
    }
    .ablauf--schlange .ablauf__schritt--links::after {
        right: 100%; top: 50%;
        margin: -6px 2px 0 0;
        transform: scaleX(-1);
    }
    .ablauf--schlange .ablauf__schritt--runter::after {
        left: 50%; top: 100%;
        margin: 13px 0 0 -15px;
        transform: rotate(90deg);
    }

    /* ── Anfang und Ende ────────────────────────────────────────────────
       In der Liste sagt die Reihenfolge von oben nach unten, wo die Kette
       beginnt; in der Schlange muss es jemand sagen.

       Die Marke haengt rechts oben und nicht in der Mitte: In der Mitte
       kaeme sie dem Pfeil in die Quere, der von oben in die Kachel laeuft —
       und die linke Ecke gehoert der Nummer. */
    .ablauf--schlange .ablauf__schritt::before {
        display: none;
        content: "";
        position: absolute;
        left: auto; right: -2px;
        bottom: 100%; top: auto;
        margin: 0 0 5px;
        padding: 1px 9px 2px;
        border: 0;
        border-radius: 999px;
        font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
        white-space: nowrap;
        z-index: 2;
    }
    .ablauf--schlange .ablauf__schritt--start::before {
        display: block;
        content: "Start";
        background: var(--brand-500);
        color: #fff;
    }
    .ablauf--schlange .ablauf__schritt--ende::before {
        display: block;
        content: "Ende";
        background: var(--surface-2);
        color: var(--text-2);
        border: 1px solid var(--border-2);
    }

    /* Beim Ziehen liegt das Ziel hier neben der Kachel und nicht darueber —
       und in den Zeilen, die zurueck laufen, seitenverkehrt. */
    .ablauf--schlange .ablauf__schritt--davor > .ablauf__karte { box-shadow: -3px 0 0 var(--teal); }
    .ablauf--schlange .ablauf__schritt--danach > .ablauf__karte { box-shadow: 3px 0 0 var(--teal); }
    .ablauf--schlange .ablauf__schritt--rueck.ablauf__schritt--davor > .ablauf__karte { box-shadow: 3px 0 0 var(--teal); }
    .ablauf--schlange .ablauf__schritt--rueck.ablauf__schritt--danach > .ablauf__karte { box-shadow: -3px 0 0 var(--teal); }
}

/* Mengen: Sorte und Anzahl nebeneinander, statt einer Zeile Text, in der
   niemand mehr sieht, was zusammengehoert. */
.mengen { display: flex; flex-direction: column; gap: 5px; }
.mengen__kopf,
.mengen__zeile { display: grid; grid-template-columns: minmax(0, 1fr) 92px; gap: 8px; }
.mengen__kopf span {
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--text-3);
}

/* Der Schieber fuer die Dauer. */
.schieber { display: flex; align-items: center; gap: 12px; }
.schieber input[type="range"] { flex: 1; min-width: 0; accent-color: var(--teal); }
.schieber output {
    min-width: 92px;
    font-size: 13px; font-weight: 650;
    color: var(--text-2);
    text-align: right;
}

/* Der Schritt-Dialog traegt drei Spalten: was, wer, wann. */
#schritt-dialog { width: min(1120px, calc(100vw - 32px)); }
.knoten-formular__raster--drei { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 1000px) { .knoten-formular__raster--drei { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .knoten-formular__raster--drei { grid-template-columns: 1fr; } }

/* Der Probeversand steht abgesetzt unter dem Formular: Er ist etwas anderes
   als Speichern — hier verlaesst wirklich Post das Haus. */
.probeform {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed var(--border);
}
.probeform label {
    display: block;
    font-size: 13px; font-weight: 500;
    color: var(--text-2);
    margin-bottom: 4px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Zeichen in Zeilen und Kaesten

   Ein Zeichen vor einem Namen soll den Namen tragen und nicht ueberragen.
   Deshalb an der Schriftgroesse gemessen (em) und nicht in Pixeln: In einer
   Tabelle mit 12,5 Pixeln wird es kleiner, in einer Ueberschrift groesser,
   ohne dass irgendwo eine zweite Regel dafuer stehen muesste.
   ══════════════════════════════════════════════════════════════════════════ */
.zeichen { width: 1.15em; height: 1.15em; flex: none; }
.zeichen--inline { vertical-align: -0.2em; margin-right: 5px; color: var(--teal-ink); }
.zeichen--marke { vertical-align: -0.15em; margin-right: 3px; width: 1em; height: 1em; }

.rollenzeile { display: inline-flex; align-items: center; gap: 0; }
.rollenzeile__bild { width: 1.15em; height: 1.15em; margin-right: 6px; vertical-align: -0.2em; }

/* ── Zeichenwahl ──────────────────────────────────────────────────────────

   Ein Knopf mit dem gewaehlten Zeichen; dahinter ein Fach mit Suchfeld und
   Raster. Bleibt das Skript aus, steht statt des Knopfes die alte Reihe da
   (`__ohneskript`) — dieselben Felder wie frueher, nur unter anderem Namen.
   ────────────────────────────────────────────────────────────────────── */

.zeichenwahl { position: relative; display: inline-block; }

.zeichenwahl__knopf {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 160px;
    padding: 7px 11px;
    border: 1px solid var(--border-2);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    cursor: pointer;
}

.zeichenwahl__knopf:hover,
.zeichenwahl__knopf[aria-expanded="true"] { border-color: var(--teal); }

/* Der Platz fuer das Zeichen bleibt gleich gross, ob eines darin steht oder
   nicht — sonst huepft der Knopf bei jeder Wahl. */
.zeichenwahl__jetzt {
    width: 22px; height: 22px; flex: none;
    display: flex; align-items: center; justify-content: center;
    color: var(--teal-ink);
}

.zeichenwahl__jetzt svg { width: 20px; height: 20px; }
.zeichenwahl__name { flex: 1; text-align: left; color: var(--text-2); }
.zeichenwahl__pfeil { color: var(--text-3); font-size: 11px; }

.zeichenwahl__fach {
    position: absolute;
    z-index: 40;
    top: calc(100% + 6px);
    left: 0;
    width: 336px;
    max-width: 92vw;
    padding: 10px;
    border: 1px solid var(--border-2);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 12px 32px rgba(16, 32, 47, 0.16);
}

.zeichenwahl__suche { margin-bottom: 8px; }

.zeichenwahl__feld {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--text);
    font: inherit;
}

.zeichenwahl__feld:focus { outline: 2px solid var(--teal); outline-offset: 1px; }

/* Feste Hoehe mit eigenem Rollbalken: Das Fach darf nicht mit der Zahl der
   Treffer wachsen, sonst schoebe eine leere Suche die halbe Seite weg. */
.zeichenwahl__raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: 4px;
    max-height: 260px;
    overflow-y: auto;
    padding-right: 2px;
}

.zeichenwahl__leermeldung { margin: 10px 2px 2px; color: var(--text-3); font-size: 13px; }

/* Ein Feld — im Fach als Knopf, in der Reihe ohne Skript als Beschriftung um
   einen Radioknopf. Beide sehen gleich aus. */
.zeichenwahl__feldchen {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text-2);
    font: inherit;
    cursor: pointer;
}

.zeichenwahl__raster .zeichenwahl__feldchen {
    width: 100%; height: auto; aspect-ratio: 1;
    border-color: transparent;
    background: none;
}

.zeichenwahl__feldchen:hover { border-color: var(--border-2); color: var(--text); }
.zeichenwahl__raster .zeichenwahl__feldchen:hover { background: var(--surface-2); }

.zeichenwahl__feldchen input {
    /* Nicht `display:none`: Ein Radioknopf, den es nicht gibt, laesst sich
       auch nicht mit der Tastatur erreichen. */
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    margin: 0;
}

.zeichenwahl__feldchen:has(input:checked),
.zeichenwahl__feldchen[aria-pressed="true"] {
    border-color: var(--teal);
    box-shadow: inset 0 0 0 1px var(--teal);
    color: var(--teal-ink);
}

.zeichenwahl__feldchen:has(input:focus-visible),
.zeichenwahl__feldchen:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

.zeichenwahl__bild { width: 20px; height: 20px; }
.zeichenwahl__feldchen svg { width: 20px; height: 20px; }
.zeichenwahl__feldchen--leer { flex-direction: column; gap: 0; font-size: 11px; line-height: 1; }
.zeichenwahl__wort { font-size: 9.5px; color: var(--text-3); }

/* Die Reihe ohne Skript. Das Skript ersetzt sie beim Start durch ein
   verstecktes Feld; wer keines hat, waehlt hier wie eh und je. */
.zeichenwahl__ohneskript { display: flex; flex-wrap: wrap; gap: 6px; }

/* ══════════════════════════════════════════════════════════════════════════
   Schalter

   Ein Kontrollkaestchen, anders gezeichnet. Das echte Feld bleibt im
   Dokument und traegt weiter seinen Namen — es sendet, was es senden soll,
   ist mit der Tastatur erreichbar und wird von Vorleseprogrammen als das
   angekuendigt, was es ist. Sichtbar sind Bahn und Knopf.

   Das Wort daneben wechselt beim Umschalten nicht mit; es steht so, wie die
   Seite geladen wurde. Das ist Absicht: Es benennt den GESPEICHERTEN
   Zustand, und der aendert sich erst beim Speichern.
   ══════════════════════════════════════════════════════════════════════════ */
.schalter {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-left: auto;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}
.schalter input {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    margin: 0;
}
.schalter__bahn {
    position: relative;
    width: 34px; height: 19px;
    border-radius: 10px;
    background: var(--border-2);
    transition: background 0.15s;
    flex: none;
}
.schalter__knopf {
    position: absolute;
    top: 2.5px; left: 2.5px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 21, 45, 0.35);
    transition: transform 0.15s;
}
.schalter input:checked + .schalter__bahn { background: var(--brand-500); }
.schalter input:checked + .schalter__bahn .schalter__knopf { transform: translateX(15px); }
.schalter input:focus-visible + .schalter__bahn { outline: 2px solid var(--teal); outline-offset: 2px; }
.schalter__wort { color: var(--text-2); }

/* In der Kopfzeile einer Karte sitzt er rechts und traegt deren Farbe. */
.karte__kopf .schalter { color: inherit; }
.karte__kopf .schalter__wort { color: inherit; opacity: 0.85; }


/* ══════════════════════════════════════════════════════════════════════════
   Rollbalken

   Der Standardbalken ist grau und breit und gehoert zum Betriebssystem, nicht
   zum Haus. Hier traegt er die Farben der Anwendung: heller Grund, Griff im
   Navy des Hauses, im Menue umgekehrt hell auf dunkel.

   `scrollbar-width: thin` und `scrollbar-color` sind der Standard und gelten
   in Firefox; die `::-webkit-`-Regeln daneben sind fuer die uebrigen. Beide
   stehen mit Absicht da — es gibt keinen Weg, der ueberall gilt.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
    scrollbar-width: thin;
    scrollbar-color: var(--border-2) transparent;
}

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--border-2);
    border: 3px solid var(--bg);
    border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }
::-webkit-scrollbar-corner { background: transparent; }

/* Im Menue liegt dunkler Grund; dort waere ein heller Griff unsichtbar. */
.kopf__nav {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}
.kopf__nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.28);
    border: 3px solid var(--navy);
}
.kopf__nav::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.45); }

/* In Kaesten mit eigenem Rollbereich (Listen, Klappfelder, Vorschauen)
   sitzt der Griff auf hellem Grund und braucht denselben Rand wie oben. */
.tabellenrahmen::-webkit-scrollbar-thumb,
.select2-results__options::-webkit-scrollbar-thumb,
.dialog__leib::-webkit-scrollbar-thumb,
.zweispalt__liste::-webkit-scrollbar-thumb {
    border-color: var(--surface);
}


/* ══════════════════════════════════════════════════════════════════════════
   Der Rollbalken des Menues zeigt sich nur, wenn man dort ist

   Verborgen wird der GRIFF, nicht die Bahn: Wuerde die Bahn verschwinden,
   spraenge das Menue bei jedem Ueberfahren um elf Pixel — und in einem
   Menue, dessen Punkte dabei wandern, trifft man nichts mehr.

   Der Rand des Griffs bleibt in der Farbe des Menues stehen; er ist es, der
   den schmalen Griff von der Bahn abhebt, und er darf nicht mitwandern.
   ══════════════════════════════════════════════════════════════════════════ */
.kopf__nav { scrollbar-color: transparent transparent; }
.kopf__nav:hover,
.kopf__nav:focus-within { scrollbar-color: rgba(255, 255, 255, 0.28) transparent; }

.kopf__nav::-webkit-scrollbar-thumb { background: transparent; }
.kopf__nav:hover::-webkit-scrollbar-thumb,
.kopf__nav:focus-within::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.28); }
.kopf__nav:hover::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.45); }



/* ══════════════════════════════════════════════════════════════════════════
   Kopfleiste auf kleinen Schirmen

   Nebeneinander geht nicht mehr auf: Das Menue schrumpft auf null, sein
   Inhalt laeuft ueber, und Marke, Seitentitel und Knoepfe liegen
   uebereinander. Also untereinander — Kopfzeile oben, Menue darunter als
   eine Reihe, die man seitlich schiebt.

   Die Reihenfolge im Dokument bleibt, wie sie ist; `order` sorgt dafuer,
   dass die Kopfzeile mit dem Konto oben steht. Wer mit der Tastatur
   hindurchgeht, kommt trotzdem zuerst zur Marke und zum Menue — das ist die
   richtige Reihenfolge zum Bedienen, auch wenn sie nicht die des Auges ist.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
    .rahmen {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        height: auto;
        padding: 0;
    }

    .rahmen > .kopf {
        order: 2;
        gap: 10px;
        padding: 0 10px 8px;
        overflow: hidden;
    }

    .rahmen > .leiste {
        order: 1;
        gap: 8px;
        padding: 8px 10px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    /* Die Marke steht schon in der Kopfzeile daneben — zweimal dasselbe
       Zeichen auf 375 Pixeln ist eines zu viel. */
    .rahmen > .kopf .kopf__marke { display: none; }

    .kopf__nav {
        gap: 4px;
        padding-bottom: 2px;
        -webkit-overflow-scrolling: touch;
    }
    .kopf__nav a { font-size: 13px; padding: 6px 9px; }

    /* Der Seitentitel darf schrumpfen und abschneiden; die Knoepfe daneben
       duerfen es nicht — sie sind der Weg hinaus. */
    .leiste__seite { min-width: 0; overflow: hidden; }
    .leiste__seitentitel {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .leiste__seitenzusatz { display: none; }
    .leiste__umschalter { display: none; }

    .inhalt { padding-left: 12px; padding-right: 12px; }
    .seitenaktionen { flex-wrap: wrap; }
}

/* Ganz schmal: Auch der Name neben dem Kuerzel des Kontos faellt weg. */
@media (max-width: 420px) {
    .leiste__konto-name { display: none; }
    .rahmen > .leiste { gap: 6px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Meldungen als Einblendung

   Unten rechts, weil dort nichts steht, was man beim Arbeiten braucht: Der
   Blick liegt links oben, die Knoepfe liegen unten mittig bis rechts. Eine
   Meldung dort nimmt keinem Inhalt den Platz weg und schiebt nichts.

   Gruen fuer Gelungenes, Rot fuer Fehler — dieselben Farben wie ueberall
   sonst in der Anwendung, und nicht die zwei Toene, die eine
   Meldungsbibliothek mitbraechte.
   ══════════════════════════════════════════════════════════════════════════ */
.toaster {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 300;
    display: flex;
    flex-direction: column;
    gap: 9px;
    align-items: flex-end;
    max-width: min(420px, calc(100vw - 36px));
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 100%;
    padding: 11px 12px 11px 13px;
    border-radius: var(--radius);
    background: var(--brand-600);
    color: #fff;
    font-size: 13.5px;
    line-height: 1.45;
    box-shadow: 0 10px 30px rgba(0, 21, 45, 0.28);
    pointer-events: auto;

    /* Von unten herein und wieder hinaus. Kurz genug, dass es nicht
       aufhaelt, lang genug, dass man die Bewegung als Herkunft liest. */
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.18s, transform 0.18s;
}
.toast--da { opacity: 1; transform: none; }
.toast--fehler { background: var(--rot); }

.toast__zeichen { flex: none; width: 17px; height: 17px; margin-top: 1px; }
.toast__zeichen svg { width: 100%; height: 100%; display: block; }
.toast__wort { flex: 1; min-width: 0; overflow-wrap: anywhere; }

.toast__zu {
    flex: none;
    width: 20px; height: 20px;
    margin: -1px -3px 0 2px;
    padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
}
.toast__zu:hover { color: #fff; background: rgba(255, 255, 255, 0.16); }
.toast__zu svg { width: 13px; height: 13px; }

@media (max-width: 700px) {
    .toaster { right: 10px; left: 10px; bottom: 10px; max-width: none; align-items: stretch; }
}

/* Wer nicht mag, dass sich etwas bewegt, bekommt es ohne Bewegung. */
@media (prefers-reduced-motion: reduce) {
    .toast { transition: none; transform: none; }
}

@media print { .toaster { display: none !important; } }


/* Zeichen in den Reitern. Bei mehreren Reitern mit aehnlich langen Woertern
   findet das Auge den gesuchten sonst erst beim Lesen — mit dem Zeichen
   erkennt man ihn an der Form. Blass, solange der Reiter zu ist: Das Wort
   traegt die Aussage, das Zeichen hilft beim Finden. */
.ftabs__zeichen { width: 15px; height: 15px; flex: none; color: var(--text-3); }
.ftabs__blatt[aria-selected="true"] .ftabs__zeichen { color: var(--teal-ink); }

.reiter__blatt { display: inline-flex; align-items: center; gap: 7px; }
.reiter__zeichen { width: 15px; height: 15px; flex: none; color: var(--text-3); }
.reiter__blatt--aktiv .reiter__zeichen { color: var(--teal-ink); }

/* ── Farben eines Mandanten ───────────────────────────────────────────── */

/* Links wird eingestellt, rechts steht das Ergebnis. Zwei Spalten und nicht
   drei Reiter: Farben, Schrift und Logo sind EINE Entscheidung — man stellt
   sie gegeneinander ein, und wer dafuer blaettern muss, vergleicht nicht. */
.auftritt {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
    gap: 10px 28px;
    align-items: start;
}

/* Die Probe laeuft mit. Sonst stellt man weiter unten eine Fehlerfarbe ein
   und sieht nichts davon. */
.auftritt__haftend { position: sticky; top: 12px; }

@media (max-width: 1080px) {
    .auftritt { grid-template-columns: 1fr; }
    .auftritt__haftend { position: static; }
}

.farbsatz { margin: 0 0 22px; }
.farbsatz--letzt { margin-bottom: 0; padding-top: 16px; border-top: 1px solid var(--border); }
.auftritt__wahl .farbsatz:last-child { margin-bottom: 0; }

.farbsatz__titel {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-3);
}

/* Zwei Spalten, solange Platz ist. Farben werden im Vergleich gewaehlt und
   nicht einzeln — untereinander stehend haette man nie zwei nebeneinander. */
.farbgitter {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px 16px;
    margin-bottom: 8px;
}

.farbfeld label { display: block; margin-bottom: 4px; font-weight: 600; font-size: 13px; }

.farbfeld__zeile { display: flex; align-items: center; gap: 8px; }

/* Der Waehler traegt seinen eigenen Rahmen; die Browser zeichnen ihn
   unterschiedlich, deshalb hier einer fuer alle. */
.farbfeld__wahl {
    flex: none;
    width: 38px;
    height: 34px;
    padding: 2px;
    border: 1px solid var(--border-2);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
}

.farbfeld__wert { flex: 1; min-width: 0; }

/* Das × leert das Feld. Es steht nur da, wenn etwas zu leeren ist — ein
   Knopf, der nichts tun kann, ist eine Frage ohne Antwort. */
.farbfeld__weg {
    flex: none;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: none;
    color: var(--text-3);
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
}

.farbfeld__weg:hover { background: var(--surface-2); color: var(--rot); border-color: var(--border); }

/* ── Vorschau ─────────────────────────────────────────────────────────── */

/* Ein Ausschnitt der Anwendung, gefaerbt mit dem, was gerade in den Feldern
   steht. Eigene Variablennamen (--p-*) und nicht die echten: Wuerde die
   Probe --brand-500 setzen, faerbte sie ueber ihren eigenen Rand hinaus —
   die Kaskade endet nicht am Kasten. */
.farbprobe {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    /* Die eingestellte Grundgroesse, nicht eine feste: Wer am Regler zieht,
       soll sehen, was er einstellt. Die Probe wird dabei hoeher und
       niedriger — das ist keine Nebenwirkung, sondern die Auskunft. */
    font-size: var(--p-schrift, 15px);
    line-height: 1.45;
}

.farbprobe__leiste {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 9px 12px;
    background: var(--p-kopf, #002147);
    color: #fff;
}

.farbprobe__marke { font-weight: 700; letter-spacing: 0.01em; }
.farbprobe__menue { opacity: 0.72; }

/* Der aktive Punkt liegt auf der Leiste und ist damit derselbe Fall wie
   „Post erfassen": Er muss sich von ihr abheben, auch wenn Marke und
   Leiste dieselbe Hausfarbe tragen. */
.farbprobe__menue--an {
    opacity: 1;
    padding: 3px 8px;
    border-radius: var(--radius);
    background: var(--p-leistenknopf, var(--p-marke, #46b972));
    color: var(--p-leistenknopf-schrift, #fff);
}

.farbprobe__grund { padding: 14px; background: var(--p-bg, #f5f7f9); }

.farbprobe__karte {
    border: 1px solid var(--p-linie, #dbe2e9);
    border-radius: var(--radius);
    background: var(--p-flaeche, #fff);
    color: var(--p-text, #10202f);
    overflow: hidden;
}

.farbprobe__kopf {
    padding: 8px 12px;
    border-bottom: 1px solid var(--p-linie, #dbe2e9);
    background: var(--p-flaeche-2, #eef2f6);
    font-weight: 600;
}

.farbprobe__zeile {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 12px;
    border-bottom: 1px solid var(--p-linie, #dbe2e9);
}

.farbprobe__leise { color: var(--p-text-3, #6f8091); }
.farbprobe__warn { color: var(--p-warn, #b7791f); }
.farbprobe__fehl { color: var(--p-fehl, #b23a48); }

.farbprobe__fuss { display: flex; align-items: center; gap: 14px; padding: 11px 12px; }

.farbprobe__knopf {
    padding: 5px 12px;
    border-radius: var(--radius);
    background: var(--p-marke, #46b972);
    color: var(--p-knopfschrift, #fff);
    font-weight: 600;
}

.farbprobe__verweis { color: var(--p-akzent, #00777a); }

/* ── Logo ─────────────────────────────────────────────────────────────── */

.logoprobe {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    padding: 12px 16px;
    margin-bottom: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    /* Auf dem Grund der Kopfleiste, denn dort steht es spaeter. Ein helles
       Logo auf weissem Feld sieht aus wie ein leerer Kasten. */
    background: var(--navy);
}

.logoprobe img { max-height: 44px; max-width: 260px; display: block; }

/* ── Eingangsstempel ──────────────────────────────────────────────────── */

/* Die Vorschau ist ein PDF im Rahmen, kein Bild: Sie zeigt genau die Seite,
   die spaeter aufgedruckt wird. Das Seitenverhaeltnis ist das von A4 — ein
   Stempel oben rechts muss oben rechts erscheinen und nicht in der Mitte
   eines quadratischen Kastens. */
.stempelprobe {
    width: 100%;
    aspect-ratio: 210 / 297;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
}

.stempelwahl { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.stempelwahl .ki__kaestchen { margin: 0; }

/* Ein Formular, das man nicht immer braucht. <details> statt eines
   Skripts: Das Auf- und Zuklappen kann der Browser selbst, und ohne
   JavaScript steht es offen da statt gar nicht. */
.aufklapp > summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 13.5px;
    color: var(--teal-ink);
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.aufklapp > summary::-webkit-details-marker { display: none; }
.aufklapp > summary::before { content: "+"; font-size: 15px; line-height: 1; }
.aufklapp[open] > summary::before { content: "\2212"; }

/* ── „Vertretung für …" in der Kopfleiste ─────────────────────────────── */

.vertretungsmarke {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 10px;
    padding: 3px 9px;
    border-radius: 20px;
    background: var(--gelb);
    color: #fff;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: default;
}

.vertretungsmarke__zeit { opacity: 0.85; font-weight: 500; }

/* Das Blatt mit den Einzelheiten. Bei Ueberfahren und bei Tastaturfokus —
   nur mit der Maus erreichbar waere es fuer einen Teil der Leute gar nicht
   da. Es enthaelt nur Text; deshalb darf es verschwinden, sobald die Maus
   weggeht. */
.vertretungsmarke__blatt {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 40;
    display: none;
    min-width: 260px;
    padding: 10px 12px;
    border: 1px solid var(--border-2);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-weight: 400;
    font-size: 12.5px;
    white-space: normal;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
}

.vertretungsmarke:hover .vertretungsmarke__blatt,
.vertretungsmarke:focus .vertretungsmarke__blatt,
.vertretungsmarke:focus-within .vertretungsmarke__blatt { display: block; }

.vertretungsmarke__zeile {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 8px;
    padding: 2px 0;
}

.vertretungsmarke__zeile > span { color: var(--text-3); }

.vertretungsmarke__fuss {
    display: block;
    margin-top: 7px;
    padding-top: 7px;
    border-top: 1px solid var(--border);
    color: var(--text-3);
}

/* Auf schmalen Geraeten nur das Zeichen — der Seitentitel hat Vorrang. */
@media (max-width: 700px) {
    .vertretungsmarke__zeit { display: none; }
}

/* Ein Knopf, der wie ein Verweis aussieht. Fuer Handgriffe, die mitten in
   einem Satz stehen — „so erscheinen Sie in Listen · aus Vor- und
   Nachname". Ein richtiger Knopf risse den Satz auseinander. */
.knopfals {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    color: var(--teal-ink);
    text-decoration: underline;
    cursor: pointer;
}

/* ── Belegarten ───────────────────────────────────────────────────────── */

.belegarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }

.belegart {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: inherit;
    text-decoration: none;
}

.belegart:hover { border-color: var(--brand-500); }
.belegart--aus { opacity: 0.6; }
.belegart__kopf { display: flex; align-items: center; gap: 8px; }
.belegart__felder { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.belegart .hinweis { margin: 0; }

/* Die Feldliste ist eine Tabelle mit Eingabefeldern — schmal, damit fuenf
   Spalten nebeneinander passen. */
.belegfelder td { padding: 3px 4px; vertical-align: top; }
.belegfelder th { white-space: nowrap; }

/* Die gewaehlte Belegart am Schriftstueck. */
.zielwahl__feld--an { background: var(--brand-50, #e6f3ee); }
a.zielwahl__feld { text-decoration: none; color: inherit; }

/* Woher ein vorbelegter Wert kommt. Wer die Herkunft sieht, prueft; wer nur
   einen Wert sieht, klickt weiter. */
.fundherkunft { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ── Kontakt: Stammdaten und Akte ─────────────────────────────────────── */

/* Zwei Spalten im Stammblatt: Wer links, Wo und wie erreichbar rechts. Auf
   schmalen Schirmen untereinander — ein zweispaltiges Formular mit 300 Pixeln
   je Spalte ist keines mehr. */
.kontaktspalten { display: grid; gap: 0 24px; grid-template-columns: 1fr; }

@media (min-width: 900px) {
    .kontaktspalten { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Die Akte: Liste links, Blatt rechts. Dieselbe Aufteilung wie im
   Posteingang, nur kleiner — und mit demselben Umbruchpunkt. */
.kontaktakte { display: grid; gap: 16px; grid-template-columns: 1fr; }

@media (min-width: 1000px) {
    .kontaktakte { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); }
}

.kontaktakte__filter { width: 100%; margin-bottom: 10px; }
.kontaktakte__leer { margin: 12px 2px; }

/* Feste Hoehe mit eigenem Rollbalken: Die Liste darf das Blatt daneben nicht
   nach unten schieben, wenn sie lang ist. */
.kontaktakte__liste .kachelliste { max-height: 620px; overflow-y: auto; }

.kontaktakte__blatt { display: flex; flex-direction: column; min-width: 0; }

.kontaktakte__kopf {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-weight: 600;
}

.kontaktakte__kopf [data-blattlink] { margin-left: auto; }

.kontaktakte__rahmen {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 620px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    overflow: hidden;
}

.kontaktakte__rahmen iframe { width: 100%; height: 620px; border: 0; background: #fff; }

/* Das gerade angesehene Blatt in der Liste. */
.kachelliste__zeile--offen {
    border-color: var(--teal);
    box-shadow: inset 0 0 0 1px var(--teal);
}

/* ── Arten der Postfaecher ────────────────────────────────────────────── */

/* Zeichen, Name und Kuerzel in einer Zeile — das Zeichen genau so gross wie
   die Schrift und auf ihrer Linie, damit es die Zeilenhoehe nicht sprengt. */
.postfachname { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.postfachname__zeichen { width: 1.05em; height: 1.05em; flex: none; color: var(--text-3); }

/* Die Liste der Arten: dieselbe Kachel wie bei den Belegarten. */
.postfacharten { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }

.postfachart {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: inherit;
    text-decoration: none;
}

.postfachart:hover { border-color: var(--brand-500); }
.postfachart--aus { opacity: 0.55; }
.postfachart__zeichen { width: 20px; height: 20px; flex: none; color: var(--text-2); }
.postfachart__text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.postfachart .hinweis { margin: 0; }

/* Die Wahl der Art: Zeichen und Wort nebeneinander, das Gewaehlte gerahmt.
   Radioknoepfe tragen die Wahl, damit sie ohne Skript funktioniert. */
.artwahl { display: flex; flex-wrap: wrap; gap: 8px; }

.artwahl__feld {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px 7px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
}

.artwahl__feld input { position: absolute; opacity: 0; width: 0; height: 0; }
.artwahl__feld:hover { border-color: var(--border-2); }
.artwahl__zeichen { width: 17px; height: 17px; flex: none; color: var(--text-3); }

.artwahl__feld:has(input:checked) {
    border-color: var(--brand-500);
    box-shadow: inset 0 0 0 1px var(--brand-500);
}

.artwahl__feld:has(input:checked) .artwahl__zeichen { color: var(--brand-500); }
.artwahl__feld:has(input:focus-visible) { outline: 2px solid var(--brand-500); outline-offset: 2px; }

/* ── Geraete ──────────────────────────────────────────────────────────── */

/* Angabe und Wert nebeneinander. Ein Beschreibungsverzeichnis ist dafuer das
   richtige Element — Bezeichnung und Wert gehoeren zusammen, und ein
   Vorleseprogramm liest sie auch so vor. */
.paare {
    display: grid;
    grid-template-columns: minmax(120px, max-content) 1fr;
    gap: 6px 16px;
    margin: 0;
}

.paare dt { color: var(--text-2); }
.paare dd { margin: 0; }

/* Ein stillgelegtes Geraet bleibt sichtbar, tritt aber zurueck. */
.schluesselliste__zeile--aus { opacity: 0.55; }

/* ── Kontakte ─────────────────────────────────────────────────────────── */

.suchzeile { display: flex; gap: 8px; margin-bottom: 16px; max-width: 520px; }
.suchzeile .eingabe { flex: 1; }

/* Keine Unterstreichung in einer Zeile, die als Ganzes fuehrt.
   Ein unterstrichenes Wort verspricht, DAS sei das Ziel — und lud dazu ein,
   genau darauf zu zielen, obwohl die ganze Zeile trifft. Dass sie fuehrt,
   sagen Zeiger und Zeilenfarbe. */
.kontaktname { display: inline-flex; align-items: center; gap: 7px; color: inherit; text-decoration: none; }
.kontaktname__zeichen { width: 15px; height: 15px; flex: none; color: var(--text-3); }

/* Vorschlaege stehen neben dem Adressbuch und sehen anders aus als es: Sie
   sind noch keine Kontakte, und das soll man sehen, ohne zu lesen. */
.vorschlagsliste { list-style: none; margin: 0; padding: 0; }

.vorschlagsliste__zeile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.vorschlagsliste__zeile:last-child { border-bottom: 0; }
.vorschlagsliste__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.vorschlagsliste__text .hinweis { margin: 0; }
.vorschlagsliste__text a { color: inherit; text-decoration: none; }
.vorschlagsliste__griffe { display: flex; gap: 4px; flex: none; }

/* ── Musterwahl ───────────────────────────────────────────────────────── */

.musterwahl {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 6px;
    border-radius: var(--radius);
    cursor: pointer;
}

.musterwahl:hover { background: var(--surface-2); }
.musterwahl input { margin: 3px 0 0; flex: none; }
.musterwahl__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.musterwahl__name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; font-weight: 600; }
.musterwahl__text .hinweis { margin: 0; }

/* ── Raster zum Einfuegen aus einer Tabelle ───────────────────────────── */

.importdialog { width: min(920px, calc(100vw - 32px)); }

.rasterrahmen {
    max-height: 46vh;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.raster { width: 100%; border-collapse: collapse; table-layout: fixed; }

.raster th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 6px 8px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border-2);
    text-align: left;
    font-size: 12.5px;
    white-space: nowrap;
}

/* Die Spaltenueberschrift sagt, was hineingehoert — und darunter, ob es
   sein muss. Ein Raster ohne diese Auskunft ist ein Ratespiel. */
.raster th span { display: block; font-weight: 400; font-size: 11px; color: var(--text-3); }

.raster td { padding: 0; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); }
.raster td:last-child { border-right: 0; }

.raster__zelle {
    width: 100%;
    padding: 5px 8px;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 13px;
    color: var(--text);
}

/* Sichtbar, welche Zelle gerade dran ist — beim Einfuegen entscheidet sie
   darueber, wo die Daten landen. */
.raster__zelle:focus { outline: 2px solid var(--brand-500); outline-offset: -2px; background: var(--surface); }

/* ── Zustellen an ─────────────────────────────────────────────────────── */

/* Eine Liste mit Kaestchen, kein <select multiple>: Dort muss man beim
   zweiten Eintrag die Strg-Taste halten, sonst faellt der erste wieder
   heraus — und wer das nicht weiss, stellt an ein Postfach weniger zu, als
   er wollte, ohne es zu merken.

   Scrollbar ab einer Handvoll: Ein Haus mit dreissig Postfaechern soll die
   Karte nicht sprengen. */
.zielwahl {
    max-height: 190px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 4px;
    background: var(--surface);
}

.zielwahl__feld {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 7px;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 13.5px;
}

.zielwahl__feld:hover { background: var(--surface-2); }
.zielwahl__feld input { margin: 0; flex: none; }
.zielwahl__feld:has(input:checked) { background: var(--brand-50, #e6f3ee); }

.zielwahl__zeichen { width: 15px; height: 15px; flex: none; color: var(--text-3); }
.zielwahl__feld:has(input:checked) .zielwahl__zeichen { color: var(--brand-600); }
.zielwahl__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zielwahl__art { color: var(--text-3); font-size: 11.5px; flex: none; }

/* ── Bearbeitungsverlauf ──────────────────────────────────────────────── */

.wegkopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* Das Kaestchen rechts im Kartentitel: Es blendet aus, was die Anwendung
   selbst getan hat. An einem Tag, an dem eine Frage offen ist, interessiert
   nicht, wann die Vorschaubilder fertig waren. */
.wegfilter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 400;
    color: var(--text-3);
    cursor: pointer;
    white-space: nowrap;
}

.wegfilter input { margin: 0; }

/* Fuenf Eintraege hoch, dann scrollen. Ein Verlauf mit dreissig Zeilen
   schob bisher alles darunter aus dem Bild — und darunter stehen die
   Zustellungen, also das, womit man arbeitet. */
.karte__leib--weg {
    max-height: 260px;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

/* Die Einzelheiten zu einem Schritt. Wie bei der Vertretungsmarke: beim
   Ueberfahren UND bei Tastaturfokus, und nur Text darin. */
.weg__mehr { position: relative; display: inline-flex; margin-left: 5px; cursor: help; }

.weg__mehrzeichen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 1px solid var(--border-2);
    color: var(--text-3);
    font-size: 9px;
    font-weight: 700;
    font-style: italic;
    line-height: 1;
}

.weg__blatt {
    position: absolute;
    bottom: calc(100% + 6px);
    left: -8px;
    z-index: 40;
    display: none;
    width: max-content;
    max-width: 280px;
    padding: 7px 10px;
    border: 1px solid var(--border-2);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-size: 12px;
    font-weight: 400;
    white-space: normal;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
}

.weg__mehr:hover .weg__blatt,
.weg__mehr:focus .weg__blatt,
.weg__mehr:focus-within .weg__blatt { display: block; }

/* Was die Anwendung selbst tat — ausgeblendet, wenn der Filter greift. */
.weg--nurmenschen .weg__punkt[data-maschine] { display: none; }

/* ── Wer hinter einem Postfach wartet ─────────────────────────────────── */

/* Aufklappbar und nicht als schwebendes Feld: Ein Popover, das beim
   Wegbewegen der Maus verschwindet, kann man nicht lesen, wenn darin ein
   Knopf steckt. <details> bleibt offen, bis jemand es schliesst. */
.weg__leute { display: block; margin-top: 4px; }

.weg__leute > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    list-style: none;
    font-size: 12.5px;
    color: var(--teal-ink);
}

.weg__leute > summary::-webkit-details-marker { display: none; }
.weg__leute > summary::before { content: "\25B8"; font-size: 10px; }
.weg__leute[open] > summary::before { content: "\25BE"; }

.weg__liste {
    list-style: none;
    margin: 8px 0 0;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
}

.weg__liste li {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    padding: 3px 0;
    font-size: 13px;
}

.weg__name { font-weight: 600; }
.weg__rolle { color: var(--text-3); font-size: 12px; }

/* Wer nicht da ist, faellt auf. Ein Schriftstueck, das auf jemanden im
   Urlaub wartet, wartet vergeblich — und genau das ist die Auskunft, die
   diese Zeile geben soll. */
.weg__weg { color: var(--rot); font-size: 12px; }

.weg__stubs {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.weg__stubs .hinweis { margin: 0; flex: 1; min-width: 220px; }

/* ── Mein Konto ───────────────────────────────────────────────────────── */

/* Zwei Spalten je Reiter, solange Platz ist. Nicht drei: Auf einer Seite,
   auf der man etwas aendert, will man das Feld sehen und nicht suchen. */
.kontospalten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px 32px;
    align-items: start;
}

.schluesselliste { list-style: none; margin: 0; padding: 0; }

.schluesselliste__zeile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
}

.schluesselliste__zeile:last-child { border-bottom: 0; }
.schluesselliste__zeichen { width: 17px; height: 17px; flex: none; color: var(--teal-ink); }
.schluesselliste__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.schluesselliste__text .hinweis { margin: 0; }

/* Der Knopf auf der Anmeldeseite. Er steht unter dem Formular und traegt
   dieselbe Breite — nicht daneben: Es sind zwei Wege zum selben Ziel und
   nicht zwei Felder eines Weges. */
.passkeyweg { margin-top: 16px; }

.passkeyweg__trenner {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    color: var(--text-3);
    font-size: 12.5px;
}

.passkeyweg__trenner::before,
.passkeyweg__trenner::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}

.passkeyweg .knopf { width: 100%; justify-content: center; text-align: center; }

/* ── Abwesenheitsplan ─────────────────────────────────────────────────── */

/* Ein Gitter: links die Namen, oben die Tage, dazwischen Balken. Ohne
   Bibliothek — ein Balken ist „von Spalte x ueber y Spalten", und mehr
   braucht ein Belegungsplan nicht.

   Der Rahmen scrollt waagerecht, die Namensspalte bleibt stehen: Ein Plan,
   bei dem man beim Blaettern nach rechts nicht mehr weiss, wessen Zeile man
   liest, ist keiner. */
.planrahmen { overflow-x: auto; }

.plan {
    display: grid;
    grid-template-columns: 168px minmax(560px, 1fr);
    align-items: stretch;
    min-width: 100%;
}

.plan__ecke {
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border-2);
    border-right: 1px solid var(--border-2);
}

/* Kopfzeile und jede Spur teilen sich dieselbe Spalteneinteilung — nur so
   steht der Balken unter seinem Tag und nicht daneben. */
.plan__tage,
.plan__spur {
    display: grid;
    grid-template-columns: repeat(var(--tage), minmax(0, 1fr));
    grid-template-rows: auto;
}

.plan__tage {
    background: var(--surface-2);
    border-bottom: 1px solid var(--border-2);
}

.plan__tag {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 5px 0 6px;
    border-left: 1px solid var(--border);
    font-variant-numeric: tabular-nums;
}

.plan__tag:first-child { border-left: 0; }
.plan__tagzahl { font-size: 12px; font-weight: 600; color: var(--text-2); }
.plan__tagwort { font-size: 10px; color: var(--text-3); }
.plan__tag--frei { background: var(--bg); }
.plan__tag--frei .plan__tagzahl, .plan__tag--frei .plan__tagwort { color: var(--text-3); }

.plan__tag--heute { background: var(--brand-100, #c7e4d9); }
.plan__tag--heute .plan__tagzahl { color: var(--brand-ink, var(--brand-600)); font-weight: 700; }

/* Die Namensspalte. Klebt links und traegt denselben Untergrund wie der
   Kopf, damit sie beim Scrollen nicht durchscheinen laesst. */
.plan__wer {
    position: sticky;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    padding: 0 12px;
    min-height: 40px;
    background: var(--surface);
    border-right: 1px solid var(--border-2);
    border-bottom: 1px solid var(--border);
    font-size: 13.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.plan__wer a { color: inherit; text-decoration: none; }
.plan__wer a:hover { text-decoration: underline; }
.plan__wer--ich { font-weight: 650; }

.plan__spur {
    position: relative;
    min-height: 40px;
    border-bottom: 1px solid var(--border);
    align-items: center;
}

/* Wochenende und der heutige Tag liegen im selben Gitter wie die Balken —
   sie sind der Untergrund, auf dem man abliest. */
.plan__feld { grid-row: 1; align-self: stretch; }
.plan__feld--frei { background: var(--bg); }
.plan__feld--heute { background: var(--brand-50, #e6f3ee); }

.plan__balken {
    grid-row: 1;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    height: 24px;
    margin: 0 1px;
    padding: 0 7px;
    border-radius: 12px;
    background: var(--grund);
    color: #fff;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
}

/* Was aus dem Monat herauslaeuft, bekommt an dieser Seite eine gerade
   Kante: Der Balken hoert nicht auf, das Bild hoert auf. */
.plan__balken--offen-links { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 0; }
.plan__balken--offen-rechts { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: 0; }

/* Ohne Vertretung: schraffiert. Das ist der Fall, den jemand sehen soll,
   ohne ihn zu suchen — dann liegt in dieser Zeit Post ohne Zustaendigen. */
.plan__balken--ohne {
    background:
        repeating-linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.28) 0 5px,
            transparent 5px 10px
        ),
        var(--grund);
}

.plan__balkenzeichen { width: 13px; height: 13px; flex: none; }
.plan__balkenwort { overflow: hidden; text-overflow: ellipsis; }

.plankopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plankopf__blaettern { display: flex; gap: 6px; }

.planfuss { display: flex; align-items: center; gap: 6px 18px; flex-wrap: wrap; font-size: 12.5px; }
.planfuss__grund { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); }
.planfuss__farbe { width: 22px; height: 10px; border-radius: 5px; display: inline-block; }

.planfuss__farbe--ohne {
    background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.28) 0 5px, transparent 5px 10px),
        var(--text-3);
}

.planfuss__wort { margin-left: auto; color: var(--text-3); }

/* Wer heute einspringt — eine Zeile je laufender Abwesenheit, ueber dem Plan.
   Ohne Vertretung faellt auf: rotes Zeichen, kraeftige Schrift in der Folge. */
.vertretung { display: flex; flex-direction: column; gap: 10px; }
.vertretung__zeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.vertretung__zeichen { width: 17px; height: 17px; flex: none; align-self: center; color: var(--teal); }
.vertretung__zeile--ohne .vertretung__zeichen { color: var(--rot); }
.vertretung__satz { font-size: 14.5px; }
.vertretung__zusatz { font-size: 13px; color: var(--text-2); }
.vertretung__folge { font-size: 12.5px; color: var(--text-3); flex: 1 1 320px; }
.vertretung__zeile--ohne .vertretung__folge { color: var(--rot); }

/* Auf schmalen Geraeten wird die Namensspalte knapper, und die Tage duerfen
   enger stehen — der Rahmen scrollt ohnehin. */
@media (max-width: 720px) {
    .plan { grid-template-columns: 116px minmax(420px, 1fr); }
    .plan__tagwort { display: none; }
    .plan__balkenwort { display: none; }
}


/* ── Angaben, die man nur liest ───────────────────────────────────────── */

.angaben { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0 0 12px; }
.angaben dt { color: var(--text-3); font-size: 13px; }
.angaben dd { margin: 0; font-size: 13.5px; }

/* Der eigene Name oben rechts fuehrt jetzt irgendwohin — das soll man
   sehen, bevor man klickt. */
a.profil { text-decoration: none; color: inherit; border-radius: var(--radius); }
a.profil:hover { background: rgba(255, 255, 255, 0.12); }
:root[data-menue="senkrecht"] a.profil:hover { background: var(--surface-2); }

/* ── Wahl unter mehreren gefundenen Logos ─────────────────────────────── */

.logowahl {
    margin: 14px 0 0;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
}

.logowahl__frage { font-weight: 600; font-size: 13.5px; margin-bottom: 10px; }

.logowahl__feld {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 8px;
    border-radius: var(--radius);
    cursor: pointer;
}

.logowahl__feld:hover { background: var(--surface); }
.logowahl__feld input { flex: none; margin: 0; }

/* Karierter Grund: Ein weisses Logo auf weissem Feld waere ein leerer
   Kasten, und gerade Wortmarken sind oft weiss oder durchsichtig. */
.logowahl__bild {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 48px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background:
        linear-gradient(45deg, var(--surface-2) 25%, transparent 25%, transparent 75%, var(--surface-2) 75%),
        linear-gradient(45deg, var(--surface-2) 25%, transparent 25%, transparent 75%, var(--surface-2) 75%),
        var(--surface);
    background-size: 10px 10px;
    background-position: 0 0, 5px 5px;
}

.logowahl__bild img { max-width: 100%; max-height: 100%; display: block; }
.logowahl__text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.logowahl__text .hinweis { margin: 0; }

/* ── Sprachen der Texterkennung ───────────────────────────────────────── */

/* Die Flagge ist keine Verzierung, sondern das, woran man die Zeile
   erkennt, bevor man sie liest. Feste Groesse und ein Rand aus der
   Zeichnung selbst — sonst haette eine Flagge mit weissem Streifen
   (Polen, Niederlande) auf hellem Grund keine Form. */
.flagge, .sprachwahl__flagge {
    width: 20px;
    height: 14px;
    flex: none;
    border-radius: 1px;
    vertical-align: -2px;
}

/* Zum Anklicken statt zum Tippen. Ein Gitter und keine Liste: Vierzehn
   Sprachen untereinander waeren eine Rolle, nebeneinander sind sie eine
   Wahl. */
.sprachwahl {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
    gap: 2px 12px;
    max-width: 760px;
}

.sprachwahl__feld {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 13.5px;
}

.sprachwahl__feld:hover { background: var(--surface-2); }
.sprachwahl__feld input { margin: 0; flex: none; }
.sprachwahl__name { flex: 1; min-width: 0; }

/* Das Kuerzel steht dabei, weil es das ist, was tesseract sieht — und weil
   es in Fehlermeldungen und im Verlauf auftaucht. */
.sprachwahl__kuerzel { color: var(--text-3); font-size: 12px; }

/* Die Zeile „Es gilt gerade": dieselben Flaggen, nur nebeneinander. */
.sprachzeile { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; vertical-align: -2px; }
.sprachzeile__eine { display: inline-flex; align-items: center; gap: 5px; }

/* Ein Verfahren, dem noch etwas fehlt, sieht man das an. Nicht abgeschaltet:
   Waehlen darf man es, das Speichern sagt dann, was fehlt — und der Hinweis
   im Feld sagt es schon vorher. */
.verfahrenwahl__feld--fehlt { opacity: 0.82; }
.verfahrenwahl__feld--fehlt:hover { opacity: 1; }

/* ── Wahl des Texterkennungsverfahrens ────────────────────────────────── */

/* Zwei grosse Felder statt eines Auswahlmenüs: Die Wahl ist eine Abwägung
   mit Folgen, und ihre Begründung gehört daneben — nicht in einen Hinweis
   unter einem Klappfeld, den man erst öffnet, wenn man schon gewählt hat. */
.verfahrenwahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.verfahrenwahl__feld {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
}
.verfahrenwahl__feld:has(input:checked) { border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); }
.verfahrenwahl__feld input { margin-top: 3px; flex: none; width: auto; }
.verfahrenwahl__feld > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.verfahrenwahl__name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 650; font-size: 14px; }
.verfahrenwahl__feld .hinweis { margin: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   Reiter innerhalb einer Karte

   Nicht `.reiter` — das sind die Seitenreiter oben (Postausgang, KI). Hier
   geht es um Ansichten EINES Gegenstands, und sie sitzen in der Karte statt
   über ihr.
   ══════════════════════════════════════════════════════════════════════════ */
.ftabs {
    display: flex;
    gap: 2px;
    padding: 0 10px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
    overflow-x: auto;
}
.ftabs__blatt {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    border: 0;
    background: transparent;
    color: var(--text-2);
    font: inherit;
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}
.ftabs__blatt:hover { color: var(--text); }
.ftabs__blatt:focus-visible { outline: 2px solid var(--teal); outline-offset: -3px; }

/* Der offene Reiter trägt seinen Strich unten — er zeigt auf den Inhalt,
   der darunter beginnt. */
.ftabs__blatt[aria-selected="true"] {
    color: var(--navy);
    font-weight: 700;
    background: var(--surface);
}
.ftabs__blatt[aria-selected="true"]::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: var(--teal);
}
.ftabs__zahl {
    margin-left: 5px;
    padding: 1px 6px;
    border-radius: 9px;
    background: var(--surface);
    color: var(--text-3);
    font-size: 11px; font-weight: 650;
    font-variant-numeric: tabular-nums;
}
.ftabs__blatt[aria-selected="true"] .ftabs__zahl { background: var(--surface-2); color: var(--text-2); }

/* Das Dokument füllt den Reiter. Feste Höhe statt `aspect-ratio`: Ein PDF
   hat kein Seitenverhältnis, das der Browser vorher kennt. */
.dokumentbild {
    width: 100%;
    height: 640px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
}

/* ── Kopfdaten als Wörterbuch ─────────────────────────────────────────── */
.kopfdaten { width: 100%; font-size: 13.5px; }
.kopfdaten th {
    width: 170px;
    padding: 5px 12px 5px 0;
    border: 0;
    text-align: left;
    font-weight: 500;
    color: var(--text-3);
    vertical-align: top;
    white-space: nowrap;
}
.kopfdaten td { padding: 5px 0; border: 0; vertical-align: top; }
.kopfdaten tr + tr th,
.kopfdaten tr + tr td { border-top: 1px solid var(--border); }

.kopfdaten__titel {
    margin: 18px 0 8px;
    font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--text-3);
}
.merkmale { display: flex; flex-wrap: wrap; gap: 6px; }

/* ── Seitenbilder ─────────────────────────────────────────────────────── */

/* Ein Raster statt einer Zeile mit Rollbalken: Im Reiter ist Platz, und
   zwölf Seiten waagerecht durchzuschieben war nie eine gute Art, ein
   Schreiben zu überfliegen. */
.seitenbilder {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
}
.seitenbild { margin: 0; text-align: center; }
.seitenbild img {
    width: 100%;
    height: auto;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: #fff;
    display: block;
}
.seitenbild figcaption { font-size: 12px; color: var(--text-3); margin-top: 5px; }

.erkanntertext {
    white-space: pre-wrap;
    font-size: 13px;
    line-height: 1.55;
    max-height: 620px;
    overflow: auto;
    margin: 0;
    padding: 12px;
    background: var(--surface-2);
    border-radius: var(--radius);
}

/* ══════════════════════════════════════════════════════════════════════════
   Der Weg der Post

   Eine senkrechte Zeitleiste: Kreis, Faden zum nächsten Punkt, rechts die
   Uhrzeit. Der Faden ist das Entscheidende — er macht aus einer Liste eine
   Abfolge, und genau das ist der Weg eines Schriftstücks durchs Haus.

   Ganz unten stehen die hohlen Kreise: was noch aussteht. Sie haben kein
   Datum, weil sie keines haben können.
   ══════════════════════════════════════════════════════════════════════════ */
.weg { list-style: none; margin: 0; padding: 0; }

.weg__punkt {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 0 0 16px 22px;
}
.weg__punkt:last-child { padding-bottom: 0; }

/* Der Kreis. */
.weg__marke {
    position: absolute;
    left: 0; top: 3px;
    width: 11px; height: 11px;
    border-radius: 50%;
    background: var(--teal);
    box-shadow: 0 0 0 3px var(--surface);
}

/* Der Faden zum nächsten Punkt — nicht am letzten. */
.weg__punkt:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 5px; top: 14px; bottom: -3px;
    width: 1px;
    background: var(--border-2);
}

.weg__inhalt { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.weg__was { font-size: 13.5px; font-weight: 600; color: var(--text); }
.weg__wer { font-size: 12px; color: var(--text-3); }

.weg__wann {
    flex: none;
    display: flex; flex-direction: column; align-items: flex-end;
    font-size: 11.5px; color: var(--text-3);
    font-variant-numeric: tabular-nums;
    line-height: 1.35;
}
.weg__uhr { color: var(--border-2); }

/* Die Farben sagen, wer gehandelt hat: die Maschine blass, der Mensch
   kräftig, ein Rückweg rot. */
.weg__punkt--erfasst .weg__marke { background: var(--navy); }
.weg__punkt--maschine .weg__marke { background: var(--border-2); }
.weg__punkt--zugestellt .weg__marke { background: var(--teal); }
.weg__punkt--gesehen .weg__marke { background: var(--teal); }
.weg__punkt--uebernommen .weg__marke { background: var(--brand-500); }
.weg__punkt--erledigt .weg__marke { background: var(--brand-600); }
.weg__punkt--zurueck .weg__marke { background: var(--rot); }

/* Offen: hohl, damit man auf einen Blick sieht, dass es noch nicht
   geschehen ist. */
.weg__punkt--offen .weg__marke {
    background: var(--surface);
    border: 2px dashed var(--gelb);
    width: 11px; height: 11px;
    box-sizing: border-box;
}
.weg__punkt--offen .weg__was { color: var(--gelb); }

/* ══════════════════════════════════════════════════════════════════════════
   Reiter

   Verweise, keine umgeschalteten Bereiche: Jeder Reiter hat seine eigene
   Adresse. Der Gewinn liegt in der Ordnung — nicht darin, einen
   Seitenwechsel zu vermeiden.
   ══════════════════════════════════════════════════════════════════════════ */
.reiter {
    display: flex;
    gap: 2px;
    margin: 0 0 18px;
    border-bottom: 1px solid var(--border);
}
.reiter__blatt {
    padding: 8px 14px 9px;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: var(--radius) var(--radius) 0 0;
    margin-bottom: -1px;
    color: var(--text-2);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
}
.reiter__blatt:hover { color: var(--text); background: var(--surface-2); }
.reiter__blatt--aktiv {
    background: var(--surface);
    border-color: var(--border);
    border-bottom: 1px solid var(--surface);
    color: var(--navy);
    font-weight: 650;
}
.reiter__blatt:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }

@media (max-width: 700px) {
    .reiter { overflow-x: auto; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Postfach-Maske: drei Karten nebeneinander

   Vorher standen Bezeichnung und Verhalten untereinander in einer schmalen
   Spalte, daneben die Empfängerliste — und unter ihr eine leere Fläche von
   einer halben Bildschirmhöhe. Nebeneinander passt alles ohne Blättern ins
   Bild, und die drei Fragen stehen als drei Karten da: was es ist, wie es
   sich verhält, wer dahintersteht.
   ══════════════════════════════════════════════════════════════════════════ */
.postfach-spalten {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.95fr);
    gap: 20px;
    align-items: start;
    margin-bottom: 18px;
}
.postfach-spalten .karte { margin-bottom: 0; }

/* Zu zweit: Die Empfänger legen sich unter die beiden anderen und nehmen
   die ganze Breite — als halbe Spalte neben einer Lücke sähen sie aus wie
   ein Versehen. */
@media (max-width: 1240px) {
    .postfach-spalten { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .postfach-spalten > :nth-child(3) { grid-column: 1 / -1; }
}
/* Unter etwa 950 px bliebe von zwei Spalten je rund 300 px uebrig — zu
   wenig fuer einen Schieber samt Beschriftung daneben. Dann lieber
   untereinander. */
@media (max-width: 950px) {
    .postfach-spalten { grid-template-columns: 1fr; }
    .postfach-spalten > :nth-child(3) { grid-column: auto; }
}

/* In einer schmalen Spalte braucht die Beschriftung des Schiebers weniger
   Platz als im Schritt-Dialog, sonst bleibt für den Regler nichts übrig. */
.postfach-spalten .schieber { gap: 10px; }
.postfach-spalten .schieber output { min-width: 76px; font-size: 12.5px; }

/* Ein Hinweis, der auf einen Fehler zuläuft: sichtbar anders als die
   erklärenden Hinweise darüber, aber keine Fehlermeldung — gespeichert wurde
   ja noch nichts. */
.hinweis--warnung {
    color: var(--rot);
    font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════════════
   Kleine Helfer für Tabellen

   Vorher standen diese drei Dinge als `style="..."` in jeder zweiten Zelle.
   Das liest sich nicht nur schlecht — es heisst auch, dass ein Farbwechsel
   im Erscheinungsbild an dreissig Stellen nachgezogen werden müsste.
   ══════════════════════════════════════════════════════════════════════════ */
.matt { color: var(--text-3); }
.warn { color: var(--rot); }
.ziffern { font-variant-numeric: tabular-nums; }
.rechts { text-align: right; font-variant-numeric: tabular-nums; }

/* Eine Fehlermeldung ist Beiwerk, solange man sie nicht liest: klein, grau,
   und sie darf die Tabelle nicht auseinanderziehen. */
.fehlertext {
    max-width: 340px;
    font-size: 12.5px;
    color: var(--text-3);
    line-height: 1.4;
}

/* ══════════════════════════════════════════════════════════════════════════
   Der Stand der Warteschlange

   Fünf Kacheln, jede zugleich ein Filter. Vorher waren es fünf nackte Zahlen
   nebeneinander in einer Karte — man las sie, und dann suchte man, wo man
   sie anklickt. Die Kachel ist beides in einem.

   Die Farbe steckt in einer Variablen je Zustand, damit Zeichenfeld, Zahl
   und Rand aus derselben Quelle kommen und nicht auseinanderlaufen.
   ══════════════════════════════════════════════════════════════════════════ */
.stand {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}
@media (max-width: 1100px) { .stand { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .stand { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.stand__kachel {
    --stand-farbe: var(--text-3);
    --stand-grund: var(--surface-2);

    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--stand-farbe);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.stand__kachel:hover { border-color: var(--border-2); border-left-color: var(--stand-farbe); }
.stand__kachel:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* Die gewählte Kachel trägt ihre Farbe voll — sie ist der Filter, unter dem
   die Liste darunter steht, und das muss man sehen, ohne zu suchen. */
.stand__kachel--hier {
    border-color: var(--stand-farbe);
    box-shadow: inset 0 0 0 1px var(--stand-farbe);
}

.stand__zeichen {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; flex: none;
    border-radius: 50%;
    background: var(--stand-grund);
    color: var(--stand-farbe);
}
.stand__bild { width: 18px; height: 18px; }

.stand__text { display: flex; flex-direction: column; min-width: 0; }
.stand__zahl {
    font-size: 24px; font-weight: 700; line-height: 1.05;
    font-variant-numeric: tabular-nums;
    color: var(--stand-farbe);
}
.stand__wort {
    font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--text-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.stand__kachel--ruhig { --stand-farbe: var(--text-2); --stand-grund: var(--surface-2); }
.stand__kachel--teal { --stand-farbe: var(--teal-ink); --stand-grund: #e2f4f4; }
.stand__kachel--gruen { --stand-farbe: var(--brand-600); --stand-grund: #e6f5ec; }
.stand__kachel--rot { --stand-farbe: var(--rot); --stand-grund: #fbeaec; }
.stand__kachel--grau { --stand-farbe: var(--text-3); --stand-grund: var(--surface-2); }

/* Eine Null ist keine Nachricht. Sie bleibt lesbar, drängt sich aber nicht
   neben eine Zahl, die etwas bedeutet. */
.stand__kachel:not(.stand__kachel--hier) .stand__zahl:first-letter { opacity: 1; }

/* ── Lebenszeichen eines Workers ─────────────────────────────────────────
   Ein Punkt statt eines Wortes: Die Spalte daneben sagt ohnehin, wann er
   sich zuletzt gemeldet hat. */
.puls {
    display: inline-block;
    width: 8px; height: 8px;
    margin-right: 7px;
    border-radius: 50%;
    vertical-align: 0.5px;
}
.puls--lebt { background: var(--brand-500); box-shadow: 0 0 0 3px rgba(70, 185, 114, 0.18); }
.puls--still { background: var(--rot); box-shadow: 0 0 0 3px rgba(178, 58, 72, 0.15); }

/* ── Art einer Aufgabe: Zeichen und Wort ─────────────────────────────── */
.artzeile { display: inline-flex; align-items: center; gap: 7px; }
.artzeile__bild { width: 16px; height: 16px; flex: none; color: var(--text-3); }

/* ══════════════════════════════════════════════════════════════════════════
   Blätterbalken

   Steht im Fuss einer Karte, mit dem Ausschnitt links und den Seiten rechts.
   Bei einer einzigen Seite bleibt nur die Stückzahl übrig — sie beantwortet
   die Frage, die der Balken sonst beantwortet: Ist das alles?
   ══════════════════════════════════════════════════════════════════════════ */
.karte__fuss {
    padding: 10px 16px;
    border-top: 1px solid var(--border);
    background: var(--surface);
    border-radius: 0 0 var(--radius) var(--radius);
}
.karte__zusatz {
    margin-left: 8px;
    font-size: 12px; font-weight: 600;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
}

.blaettern {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
}
.blaettern--einzeln { justify-content: flex-start; }
.blaettern__stand {
    font-size: 12.5px; color: var(--text-3);
    font-variant-numeric: tabular-nums;
}
.blaettern__stand strong { color: var(--text-2); font-weight: 650; }

.blaettern__seiten { display: flex; align-items: center; gap: 4px; }
.blaettern__blatt,
.blaettern__pfeil {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 30px; height: 30px;
    padding: 0 7px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: 13px; font-variant-numeric: tabular-nums;
    color: var(--text-2);
    text-decoration: none;
}
.blaettern__blatt:hover,
.blaettern__pfeil:hover { background: var(--surface-2); color: var(--text); }
.blaettern__blatt:focus-visible,
.blaettern__pfeil:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }

.blaettern__blatt--hier {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
    font-weight: 650;
}
.blaettern__blatt--hier:hover { background: var(--navy); color: #fff; }

/* Ein Pfeil am Rand des Bestands verschwindet nicht, er wird still: Springt
   er weg, verrutschen beim Blättern alle Zahlen um eine Stelle. */
.blaettern__pfeil--aus { color: var(--border-2); cursor: default; }
.blaettern__zeichen { width: 15px; height: 15px; }
.blaettern__luecke { padding: 0 2px; color: var(--text-3); font-size: 13px; }

@media (max-width: 560px) {
    .blaettern { justify-content: center; }
    .blaettern__stand { width: 100%; text-align: center; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Ansichten aus dem Baukasten

   Ein paar Seiten kommen nicht aus dieser Anwendung, sondern aus dem
   gemeinsamen Baukasten `ts/yii3-kit` — die Stammdaten des Mandanten unter
   /tenants/{id} etwa. Sie sprechen dessen Vokabular: `card` statt `karte`,
   `input` statt `eingabe`, `btn` statt `knopf`.

   Ein Teil davon war hier schon abgedeckt (`.input`, `.hint`, `.btn`,
   `.form-group label`), der Rest nicht — und deshalb stand die Seite ohne
   Karte, ohne Rahmen und ohne Kopf da, mitten in einer Anwendung, in der
   alles andere eine Karte hat.

   Umgeschrieben wird hier, nicht dort: Der Baukasten gehört auch einer
   zweiten Anwendung, die anders aussieht. Was hier steht, ist die
   Übersetzung seines Vokabulars in dieses Haus — sie kostet den Baukasten
   nichts und kann ihm auch nichts kaputtmachen.
   ══════════════════════════════════════════════════════════════════════════ */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 18px;
}
.card__body { padding: 16px; }
.card__body > :first-child { margin-top: 0; }
.card__body > :last-child { margin-bottom: 0; }

/* Der Kopf einer Baukasten-Seite. Er wiederholt nicht, was oben in der
   Leiste steht — dort steht, WO man ist, hier WAS man bearbeitet. Deshalb
   kleiner als eine Überschrift, aber deutlich genug, um den Namen des
   Mandanten zu tragen. */
.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0 0 18px;
}
.page-head h1 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--navy);
}
.page-head__back { margin-bottom: 4px; }
.page-head__back a {
    font-size: 12.5px;
    color: var(--text-3);
    text-decoration: none;
}
.page-head__back a:hover { color: var(--teal-ink); text-decoration: underline; }
.page-head__actions { display: flex; gap: 8px; align-items: center; }

.form-group { margin-bottom: 14px; }

/* Zwischenüberschriften im Formular („Corporate Design"). */
.card__body h3 {
    margin: 22px 0 4px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--navy);
}
.card__body hr { border: 0; border-top: 1px solid var(--border); margin: 22px 0 0; }

.alert {
    padding: 11px 15px;
    border-radius: var(--radius);
    border: 1px solid var(--border-2);
    background: var(--surface-2);
    font-size: 14px;
    margin-bottom: 16px;
}
.alert-error {
    border-color: var(--rot);
    background: #fbeaec;
    color: var(--rot);
}

/* Farbwähler und Hexfeld gehören zusammen — nebeneinander, das Feld nimmt
   den Rest der Zeile. */
.color-field { display: flex; align-items: center; gap: 10px; }
.color-field input[type="color"] {
    flex: none;
    width: 40px; height: 36px;
    padding: 2px;
    border: 1px solid var(--border-2);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
}
.color-field .input { flex: 1; min-width: 0; font-family: var(--schrift-fest); }

.logo-preview {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
}
.logo-preview img { max-height: 44px; max-width: 200px; }

/* Ein Kästchen mit Text daneben steht in einer Zeile und nicht als Block —
   `.form-group label` macht sonst jedes Label zu einer eigenen Zeile, und
   der Haken stünde über seinem Wort. */
.checkbox {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    margin: 0 !important;
    font-size: 13px;
    cursor: pointer;
}
.checkbox input { width: auto; }

/* Eine Dateiwahl ist kein Textfeld: Ohne diese Zeile bekäme sie die
   Innenabstände eines Eingabefelds und stünde schief darin. */
input[type="file"].input { padding: 7px 9px; font-size: 13px; }

.btn-ghost {
    background: transparent;
    border-color: var(--border-2);
    color: var(--teal-ink);
}
.btn-ghost:hover { background: var(--surface-2); }

.muted, .sub { color: var(--text-3); }
.sub { font-size: 12.5px; }
.empty { padding: 26px 16px; text-align: center; color: var(--text-3); }
.row-acts { display: flex; gap: 6px; justify-content: flex-end; }
.iact {
    display: inline-flex; align-items: center;
    padding: 4px 9px;
    border: 1px solid var(--border-2);
    border-radius: var(--radius);
    font-size: 12.5px;
    color: var(--text-2);
    text-decoration: none;
}
.iact:hover { background: var(--surface-2); }
.iact--danger { color: var(--rot); border-color: var(--rot); }
.iact--danger:hover { background: #fbeaec; }

/* Die Maske des Baukastens ist eine einzige Spalte — bei dreizehn Feldern
   ein Bildschirm und ein halber, und jedes Textfeld tausend Pixel breit
   fuer eine Hexzahl mit sieben Zeichen.

   Zwei Spalten, sobald Platz ist. Was keine Frage ist, sondern eine Ansage
   — Zwischenueberschriften, Hinweise, Trennlinien, der Knopf —, nimmt die
   ganze Breite: Ein Absatz, der eine Ueberschrift erklaert, gehoert unter
   sie und nicht neben das erste Feld.

   Ueber die Auszeichnung des Baukastens wird dabei nichts vorausgesetzt
   ausser dem, was ohnehin dasteht: `.form-group` ist ein Feld, alles andere
   ist es nicht. Kommt dort eines hinzu, ordnet es sich von selbst ein. */
@media (min-width: 900px) {
    .card__body form {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 22px;
        align-items: start;
    }

    .card__body form > :not(.form-group) { grid-column: 1 / -1; }

    /* Ein Knopf im Raster waere sonst so breit wie seine Spalte. */
    .card__body form > button { justify-self: start; margin-top: 8px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Übersicht

   Kacheln in Spalten, nicht in einem Raster mit Breiten. Der Unterschied ist
   keine Geschmacksfrage: In einem Raster hängt die Stelle einer Kachel von
   der Breite ihrer Vorgängerinnen ab, und wer eine verbreitert, schiebt drei
   andere um. In Spalten ist jede Kachel eine Stelle in einer Liste — das
   lässt sich ziehen, mit Pfeiltasten bewegen und in einem Satz merken.

   Die Spaltenzahl steht als `--uebersicht-spalten` am Behälter; das Skript
   setzt sie um, ohne die Kacheln neu zu bauen.

   ALLE Regeln für die Kacheln stehen unter `.uebersicht`. Der Grund ist
   handfest: `.kachel` heisst auch die Dateikachel beim Erfassen, und weil
   dieser Abschnitt weiter unten in der Datei steht, färbte er bisher auf
   jene ab — die Dateikacheln bekamen einen Griff-Zeiger, den sie nicht
   brauchen.
   ══════════════════════════════════════════════════════════════════════════ */

.uebersicht-leiste { display: flex; justify-content: flex-end; margin-bottom: 12px; }

/* `align-items: stretch` ist hier die ganze Aussage: Kacheln, die sich eine
   Rasterzeile teilen, werden gleich hoch. Genau das kann eine Anordnung in
   getrennten Spaltenkästen nicht — dort fliesst jede Spalte für sich, und
   die Unterkanten stehen überall. */
.uebersicht {
    display: grid;
    grid-template-columns: repeat(var(--uebersicht-spalten, 2), minmax(0, 1fr));
    /* Eine Zeile ist ein FESTES Mass, keine Mindesthöhe.

       Das ist die Bedingung dafür, dass der Griff an der Unterkante in
       beide Richtungen etwas tut. Mit `minmax(…, auto)` wuchs jede Kachel
       mit ihrem Inhalt: „höher" ging, „flacher" nie — unter die Höhe des
       Inhalts kam man nicht.

       Jetzt ist die Kachel so hoch, wie sie gestellt ist. Was nicht
       hineinpasst, rollt in ihr (siehe `.kachel__leib`). */
    --uebersicht-zeile: 180px;
    grid-auto-rows: var(--uebersicht-zeile);
    gap: 18px;
    align-items: stretch;
}

/* Über wie viele Spalten eine Kachel geht. Vier Regeln statt einer mit
   `attr()`: `attr()` taugt in `grid-column` bis heute nichts.

   `grid-column-end` und nicht `grid-column`, weil daneben der Anfang stehen
   darf — die Kurzschreibweise setzte ihn jedes Mal zurück. */
.uebersicht > [data-breite="2"] { grid-column-end: span 2; }
.uebersicht > [data-breite="3"] { grid-column-end: span 3; }
.uebersicht > [data-breite="4"] { grid-column-end: span 4; }

/* Über wie viele Zeilen sie geht. Dieselbe Schreibweise wie bei der
   Breite und aus demselben Grund getrennt vom Anfang. */
.uebersicht > [data-hoehe="2"] { grid-row-end: span 2; }
.uebersicht > [data-hoehe="3"] { grid-row-end: span 3; }
.uebersicht > [data-hoehe="4"] { grid-row-end: span 4; }

/* Wo eine Kachel ANFÄNGT, wenn sie nicht einfach mitfliessen soll.
   Ohne Angabe rückt jede an die vorige heran — eine Reihe ohne Lücken.
   Mit Angabe bleibt links davon frei, was frei bleiben soll: Das Raster
   packt „sparse" und geht nie zurück, also überlebt die Lücke.

   Das ist der Unterschied zwischen einer Liste, die umbricht, und einer
   Fläche, auf der man etwas hinlegt. */
.uebersicht > [data-spalte="1"] { grid-column-start: 1; }
.uebersicht > [data-spalte="2"] { grid-column-start: 2; }
.uebersicht > [data-spalte="3"] { grid-column-start: 3; }
.uebersicht > [data-spalte="4"] { grid-column-start: 4; }

/* Eine zugeklappte Kachel soll ihre Zeile nicht ausfüllen — sonst stünde ein
   handhoher leerer Rahmen neben einer hohen Nachbarin. */
.uebersicht .kachel--zu { align-self: start; }

/* Während des Ziehens hält der Behälter den Zeiger fest — ohne das rollt ein
   Finger die Seite, statt die Kachel zu bewegen. */
.uebersicht--zieht,
.uebersicht--weitet,
.uebersicht--hoeht { touch-action: none; user-select: none; }

/* ── Die Kachel ───────────────────────────────────────────────────────── */

.uebersicht .kachel {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 3px solid var(--kachel-farbe, var(--navy));
    border-radius: var(--radius);
    min-width: 0;
}

/* Der Rumpf nimmt, was die Zeile hergibt, und gibt es weiter: Er ist selbst
   eine Spalte, damit ein Inhalt, der wachsen will, auch wachsen kann.

   Ohne das Weitergeben hing das Tagesdiagramm mit seinen festen 140 Pixeln
   oben in einer Kachel, die auf Zeilenhöhe gestreckt war — und seine
   Grundlinie stand irgendwo in der Mitte statt unten. Ein Balkendiagramm,
   dessen Null nicht auf dem Boden steht, ist kein Balkendiagramm. */
.uebersicht .kachel__leib {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* `min-height: 0` ist hier keine Feinheit, sondern die Voraussetzung:
       Ein Flex-Kind schrumpft ohne diese Zeile nicht unter seinen Inhalt,
       und `overflow` bliebe wirkungslos. */
    min-height: 0;
    overflow: auto;
}

.uebersicht .kachel__kopf {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 10px 10px 6px;
    border-bottom: 1px solid var(--border);
    border-radius: 0 0 0 0;
    cursor: grab;
    touch-action: none;   /* sonst rollt das Ziehen die Seite */
    user-select: none;
}
.uebersicht .kachel--zu .kachel__kopf { border-bottom: 0; }
.uebersicht .kachel__kopf:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }

.uebersicht .kachel__kopf h2 {
    margin: 0;
    flex: 1;
    min-width: 0;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Das Punktemuster zeigt, dass man anfassen darf. Der Griff ist trotzdem der
   ganze Kopf — acht Pixel trifft man mit dem Finger nicht. */
.uebersicht .kachel__punkte { display: inline-flex; flex: none; color: var(--border-2); }
.uebersicht .kachel__punkte svg { width: 14px; height: 14px; }
.uebersicht .kachel__kopf:hover .kachel__punkte { color: var(--text-3); }

.uebersicht .kachel__zeichen { width: 17px; height: 17px; flex: none; color: var(--kachel-farbe, var(--navy)); }

.uebersicht .kachel__werkzeug { display: inline-flex; gap: 2px; flex: none; }
.uebersicht .kachel__knopf {
    width: 26px; height: 26px;
    display: grid; place-items: center;
    padding: 0;
    border: 0; background: transparent; color: var(--text-3);
    border-radius: var(--radius);
    cursor: pointer;
}
.uebersicht .kachel__knopf svg { width: 14px; height: 14px; }
.uebersicht .kachel__knopf:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.uebersicht .kachel--zu [data-zuklappen] svg { transform: rotate(180deg); }

.uebersicht .kachel__leib { padding: 13px 14px; }
.uebersicht .kachel--zu .kachel__leib { display: none; }

/* Beim Ziehen hängt die Kachel am Zeiger — `position` setzt das Skript. */
.uebersicht .kachel--zug {
    box-shadow: 0 12px 28px rgba(0, 33, 71, 0.18);
    opacity: 0.96;
    transform: rotate(-0.4deg);
    pointer-events: none;
    z-index: 60;
}
body.zieht-kachel { cursor: grabbing; }
body.zieht-kachel .kachel__kopf { cursor: grabbing; }

/* Der Platzhalter: die Lücke, in die die Kachel fällt. Er belegt dieselbe
   Breite wie sie — sonst spränge das Raster in dem Augenblick um, in dem
   man anfasst. */
.uebersicht__platz {
    border: 2px dashed var(--teal);
    border-radius: var(--radius);
    background: rgba(0, 161, 163, 0.06);
}
.uebersicht__platz[data-breite="2"] { grid-column-end: span 2; }
.uebersicht__platz[data-breite="3"] { grid-column-end: span 3; }
.uebersicht__platz[data-breite="4"] { grid-column-end: span 4; }
.uebersicht__platz[data-hoehe="2"] { grid-row-end: span 2; }
.uebersicht__platz[data-hoehe="3"] { grid-row-end: span 3; }
.uebersicht__platz[data-hoehe="4"] { grid-row-end: span 4; }
.uebersicht__platz[data-spalte="1"] { grid-column-start: 1; }
.uebersicht__platz[data-spalte="2"] { grid-column-start: 2; }
.uebersicht__platz[data-spalte="3"] { grid-column-start: 3; }
.uebersicht__platz[data-spalte="4"] { grid-column-start: 4; }

/* ── Der Breitengriff am rechten Rand ─────────────────────────────────── */

/* Blass, bis man in die Nähe kommt: Ein Griff, der immer sichtbar ist, sieht
   aus wie ein Rahmen, den jemand vergessen hat. */
.uebersicht .kachel__breite {
    position: absolute;
    top: 0; bottom: 0; right: -9px;
    width: 16px;
    cursor: col-resize;
    opacity: 0;
    transition: opacity 0.12s;
}
.uebersicht .kachel__breite::before {
    content: "";
    position: absolute;
    top: 12px; bottom: 12px; left: 6px;
    width: 3px;
    border-radius: 2px;
    background: var(--teal);
}
.uebersicht .kachel:hover .kachel__breite,
.uebersicht .kachel__breite:focus-visible { opacity: 0.8; }
.uebersicht .kachel__breite:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; opacity: 1; }

/* Derselbe Griff, um neunzig Grad gedreht. */
.uebersicht .kachel__hoehe {
    position: absolute;
    left: 0; right: 0; bottom: -9px;
    height: 16px;
    cursor: row-resize;
    opacity: 0;
    transition: opacity 0.12s;
}
.uebersicht .kachel__hoehe::before {
    content: "";
    position: absolute;
    left: 16px; right: 16px; top: 6px;
    height: 3px;
    border-radius: 2px;
    background: var(--teal);
}
.uebersicht .kachel:hover .kachel__hoehe,
.uebersicht .kachel__hoehe:focus-visible { opacity: 0.8; }
.uebersicht .kachel__hoehe:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; opacity: 1; }

body.weitet-kachel { cursor: col-resize; }
body.hoeht-kachel { cursor: row-resize; }

/* Solange gezogen wird, zeigt das Raster seine Spuren — ohne das zielt man
   auf einen weissen Grund und hofft. */
.uebersicht--zieht > .kachel,
.uebersicht--weitet > .kachel,
.uebersicht--hoeht > .kachel {
    outline: 1px dashed var(--border-2);
    outline-offset: 4px;
    border-radius: var(--radius);
}
.uebersicht--zieht > .kachel--zug { outline: 0; }

/* ── Inhalte der Kacheln ──────────────────────────────────────────────── */

/* Zahlenreihe. */
.zahlen { display: flex; flex-wrap: wrap; gap: 10px; }
.zahlen__feld {
    flex: 1 1 118px;
    display: flex; flex-direction: column; gap: 2px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--zahl-farbe, var(--border-2));
    border-radius: var(--radius);
    background: var(--surface-2);
    color: inherit;
    text-decoration: none;
}
.zahlen__wert {
    font-size: 26px; font-weight: 700; line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--zahl-farbe, var(--navy));
}
.zahlen__wort {
    font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--text-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.zahlen--klein .zahlen__wert { font-size: 20px; }
.zahlen__feld--warnung { background: #fdf3e3; border-color: var(--gelb); }
.zahlen__feld--warnung .zahlen__wert { color: #8a5a12; }

/* Tagesdiagramm. Reine Kaesten mit Hoehen in Prozent — kein Bild, kein
   Fremdcode, und es faerbt sich mit dem Erscheinungsbild des Mandanten. */
/* Keine feste Höhe, sondern die des Rumpfs: Die Grundlinie liegt damit
   immer unten an der Kachel, egal wie hoch ihre Zeile ist. `min-height`
   hält sie lesbar, wenn die Zeile flach ausfällt. */
.saeulen {
    display: flex; align-items: flex-end; gap: 5px;
    flex: 1;
    min-height: 130px;
}
.saeulen__tag {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    height: 100%;
    min-width: 0;
}
.saeulen__zahl { font-size: 11px; font-weight: 650; color: var(--text-2); margin-bottom: 3px; }
.saeulen__balken {
    width: 100%;
    max-width: 30px;
    border-radius: 3px 3px 0 0;
    background: var(--brand-500);
    min-height: 2px;
}
.saeulen__tag--frei .saeulen__balken { background: var(--border-2); }
.saeulen__wort { margin-top: 5px; font-size: 10px; color: var(--text-3); white-space: nowrap; }

/* Listen in Kacheln. */
.kachelliste { list-style: none; margin: 0; padding: 0; }
.kachelliste li + li { border-top: 1px solid var(--border); }
.kachelliste a {
    display: flex; flex-direction: column; gap: 2px;
    padding: 8px 2px;
    color: inherit; text-decoration: none;
}

/* Zeile mit Vorschaubild: Bild links, Text daneben.

   Mit dem `a` davor, weil `.kachelliste a` daruebersteht und die Richtung
   auf `column` setzt — eine Klasse allein verliert gegen Klasse plus
   Element, und das Bild sass dann oben statt vorn. */
.kachelliste a.kachelliste__zeile { flex-direction: row; align-items: center; gap: 10px; }
.kachelliste__haupt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }

/* Kleiner als im Posteingang — dort trägt die Zeile das Bild, hier nur ein
   Merkzeichen neben zwei Zeilen Text. */
.miniatur--klein { width: 30px; height: 39px; }
.miniatur--klein .miniatur__art { font-size: 8px; }
.kachelliste__kopf { display: flex; align-items: center; gap: 7px; font-size: 13.5px; min-width: 0; }
.kachelliste__kopf strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kachelliste__zusatz { font-size: 12px; color: var(--text-3); }
.kachelliste__name { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }

.kachelliste--zahlen a { flex-direction: row; align-items: center; justify-content: space-between; font-size: 13.5px; }
.kachelliste__zahl {
    min-width: 26px;
    padding: 1px 7px;
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--text-3);
    font-size: 12px; font-weight: 650; text-align: center;
    font-variant-numeric: tabular-nums;
}
.kachelliste__zahl--voll { background: var(--navy); color: #fff; }

/* ── Ringdiagramm: Anteile der Postfächer ─────────────────────────────── */

/* Ein einziger Kreis, so oft gezeichnet, wie es Stücke gibt: Jedes ist ein
   Strichmuster auf demselben Umfang (`stroke-dasharray`), um seinen Anteil
   weitergedreht (`stroke-dashoffset`). Kein Bogen, keine Bibliothek, keine
   Rundungsfuge zwischen zwei Pfaden.

   Der Radius 15,9155 ist gewählt, weil sein Umfang genau 100 ergibt — dann
   ist der Anteil in Prozent zugleich die Strichlänge. */
.ring { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ring__bild { width: 132px; height: 132px; flex: none; }
.ring__grund { fill: none; stroke: var(--surface-2); stroke-width: 5; }
.ring__stueck { fill: none; stroke-width: 5; transition: stroke-width 0.12s; }
.ring__stueck:hover { stroke-width: 6; }
.ring__mitte {
    font-size: 6.5px; font-weight: 700; fill: var(--navy);
    font-variant-numeric: tabular-nums;
}
.ring__wort { font-size: 2.6px; fill: var(--text-3); letter-spacing: 0.06em; text-transform: uppercase; }

.ring__liste { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 150px; }
.ring__liste li + li { border-top: 1px solid var(--border); }
.ring__liste a,
.ring__still {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 2px;
    font-size: 13px; color: inherit; text-decoration: none;
}
.ring__punkt { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.ring__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ring__zahl { font-weight: 650; font-variant-numeric: tabular-nums; color: var(--text-2); }

/* ── Wochentage: liegende Balken ──────────────────────────────────────── */

/* Liegend und nicht stehend: Sieben Beschriftungen nebeneinander wären
   sieben schräge Wörter, untereinander sind es sieben lesbare. */
.wochentage { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wochentage__zeile { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.wochentage__wort {
    width: 24px; flex: none;
    font-weight: 650; color: var(--text-2);
}
.wochentage__bahn {
    flex: 1;
    height: 14px;
    border-radius: 3px;
    background: var(--surface-2);
    overflow: hidden;
}
.wochentage__balken {
    display: block; height: 100%;
    border-radius: 3px;
    background: var(--brand-500);
    min-width: 2px;
}
.wochentage__zahl {
    width: 42px; flex: none; text-align: right;
    font-weight: 650; font-variant-numeric: tabular-nums; color: var(--text-2);
}
/* Samstag und Sonntag blasser — sie gehören dazu, sind aber nicht die Frage. */
.wochentage__zeile--frei .wochentage__balken { background: var(--border-2); }
.wochentage__zeile--frei .wochentage__wort,
.wochentage__zeile--frei .wochentage__zahl { color: var(--text-3); }

/* ── Auf meinem Tisch: zwei Häufchen ──────────────────────────────────── */

/* Eine Zwischenüberschrift, kein Titel: Die Kachel heisst schon, wie sie
   heisst. Hier steht nur, welches der beiden Häufchen folgt. */
.tisch__marke {
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--text-3);
    margin: 12px 2px 2px;
}
.tisch__marke:first-child { margin-top: 0; }

/* Die Zeit rechts in der Zeile — wie lange etwas schon liegt. */
.kachelliste__zeit {
    flex: none;
    font-size: 11.5px;
    color: var(--text-3);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Wie weit die Frist überschritten ist. Rot, weil es das Einzige auf der
   Übersicht ist, das eine Handlung verlangt. */
.ueberzug {
    flex: none;
    font-size: 11.5px; font-weight: 650;
    color: var(--rot);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ── Fristen: das Abreisskalenderblatt ────────────────────────────────── */

/* Ein Datum als Zahl unter Zahl statt „14.10." in einer Zeile: In einer
   Liste von Fristen sucht das Auge den Tag, und der steht so an derselben
   Stelle wie in der Zeile darüber. */
.frist__tag {
    flex: none;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 34px; height: 38px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}
.frist__zahl { font-size: 15px; font-weight: 700; color: var(--navy); }
.frist__monat { font-size: 10px; color: var(--text-3); }
.frist__tag--rot { border-color: var(--rot); background: #fbeaec; }
.frist__tag--rot .frist__zahl { color: var(--rot); }
.frist__tag--gelb { border-color: var(--gelb); background: #fdf3e3; }
.frist__tag--gelb .frist__zahl { color: #8a5a12; }

/* ── Zuletzt geschehen ────────────────────────────────────────────────── */

/* Eine Zeitleiste mit einem Faden: Der senkrechte Strich zwischen den
   Punkten macht aus einer Liste eine Abfolge — und genau das ist ein
   Verlauf. */
.verlaufliste { list-style: none; margin: 0; padding: 0; }
.verlaufliste__zeile {
    position: relative;
    display: flex; align-items: flex-start; gap: 10px;
    padding: 5px 0 5px 2px;
}
.verlaufliste__punkt {
    flex: none;
    width: 8px; height: 8px;
    margin-top: 5px;
    border-radius: 50%;
    background: var(--border-2);
}
.verlaufliste__zeile:first-child .verlaufliste__punkt { background: var(--teal); }
.verlaufliste__zeile:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 5.5px; top: 16px; bottom: -2px;
    width: 1px;
    background: var(--border);
}
.verlaufliste__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.verlaufliste__was { font-size: 13px; }
.verlaufliste__wer { font-size: 11.5px; color: var(--text-3); }

/* ── „Ansicht anpassen" ───────────────────────────────────────────────── */

.ansichtwahl { padding: 16px; margin-bottom: 18px; }
.ansichtwahl__reihe { display: flex; gap: 28px; flex-wrap: wrap; }
.ansichtwahl__block { flex: 1; min-width: 260px; }
.ansichtwahl__block--schmal { flex: 0 0 250px; }
.ansichtwahl__titel {
    font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--text-3); margin-bottom: 10px;
}
.ansichtwahl__liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 18px; }
.ansichtwahl__feld { display: flex; gap: 9px; align-items: flex-start; cursor: pointer; padding: 4px 0; }
.ansichtwahl__feld input { margin-top: 3px; flex: none; width: auto; }
.ansichtwahl__feld > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ansichtwahl__name { font-size: 13.5px; font-weight: 500; }
.ansichtwahl__feld .hinweis { margin: 0; }

.ansichtwahl__spalten { display: inline-flex; gap: 6px; }
.ansichtwahl__zahl {
    width: 36px; height: 34px;
    border: 1px solid var(--border-2); border-radius: var(--radius);
    background: var(--surface); color: var(--text-2);
    font: inherit; font-weight: 700; cursor: pointer;
}
.ansichtwahl__zahl:hover { border-color: var(--teal); }
.ansichtwahl__zahl.ist-gewaehlt { background: var(--navy); border-color: var(--navy); color: #fff; }
.ansichtwahl__fuss { display: flex; gap: 8px; margin-top: 12px; }

/* Für Vorleseprogramme, nicht für Augen. */
.nur-vorlesen {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── Kein Aufleuchten ─────────────────────────────────────────────────── */

/* Eine Übersicht wird gelesen, nicht bedient. Wer den Blick über sechs
   Kacheln führt, will Zahlen sehen und nicht, wie unter dem Zeiger
   nacheinander alles die Farbe wechselt. Die Wege bleiben: Der Zeiger wird
   zur Hand, und was anwählbar ist, zeigt seinen Rahmen. */
.uebersicht .kachel:hover,
.uebersicht .zahlen__feld:hover,
.uebersicht .kachelliste a:hover {
    background: var(--surface);
    border-color: var(--border);
}
.uebersicht .zahlen__feld:hover { background: var(--surface-2); }
.uebersicht .kachel__knopf:hover { background: var(--surface-2); color: var(--text); }
.uebersicht .kachelliste a:hover .kachelliste__kopf strong { color: inherit; }

/* ── Schmales Fenster ─────────────────────────────────────────────────── */

/* Unter 1000 px ist selbst zwei Spalten zu eng für Zahlen mit Beschriftung —
   die Kacheln stehen dann untereinander, in der gewählten Reihenfolge. Das
   Ziehen läuft weiter: `einsortieren()` rechnet dann senkrecht. */
@media (max-width: 1000px) {
    .uebersicht { grid-template-columns: 1fr; }
    /* Wer sich am Bildschirm eine Kachel über zwei Spalten eingerichtet hat,
       bekommt am Telefon nicht zwei Spalten von 90 Pixeln, sondern eine, die
       lesbar ist. */
    .uebersicht > [data-breite],
    .uebersicht > [data-spalte] { grid-column: auto; }
    /* Auch die Höhe nicht: Eine Kachel über zwei Zeilen wäre am Telefon
       eine Kachel mit einer leeren unteren Hälfte. */
    .uebersicht > [data-hoehe] { grid-row: auto; }
    .uebersicht { grid-auto-rows: auto; }
    .uebersicht .kachel__leib { overflow: visible; }
    .uebersicht .kachel__breite,
    .uebersicht .kachel__hoehe { display: none; }
}

@media print {
    .uebersicht-leiste,
    .ansichtwahl,
    .uebersicht .kachel__werkzeug,
    .uebersicht .kachel__breite,
    .uebersicht .kachel__hoehe,
    .uebersicht .kachel__punkte { display: none !important; }
    .uebersicht { grid-template-columns: 1fr 1fr; }
    .uebersicht .kachel--zu .kachel__leib { display: block; }
}