/* ==========================================================================
   Verwaltung: Benutzer, Umsatz, Module, Gesellschaft, Präsentation
   --------------------------------------------------------------------------
   Was der Administrator und der Superuser sehen, plus die
   Präsentationsansicht für Beamer und Drucker.

   TEIL 6 VON 9 von assets/css/style.css.

   ACHTUNG, REIHENFOLGE: CSS ist kaskadierend. Diese Dateien werden in
   includes/header.php in genau dieser Nummerierung eingebunden, und die
   Nummer im Dateinamen IST die Reihenfolge. Wer eine Datei dazwischen
   schiebt oder die Einbindung umsortiert, ändert stillschweigend, welche
   Regel bei gleicher Spezifität gewinnt.
   ========================================================================== */

/* ==========================================================================
   Anmeldeprotokoll (users.php): ein Reiter je Tag der letzten Tage.
   Die Reiter sitzen im Kartenkopf und „stehen" auf der Tabelle darunter.
   ========================================================================== */
.lp-head {
    display: flex;
    align-items: flex-end;
    gap: var(--sp-3);
    flex-wrap: wrap;
    padding-bottom: 0;
}
.lp-head-note {
    color: var(--brand-faint);
    font-size: var(--fs-3);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding-bottom: 0.6rem;
}
.lp-tabs {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    margin-left: auto;
    margin-bottom: -1px;      /* deckt die Trennlinie des Kartenkopfs ab */
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
}
.lp-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    min-width: 56px;
    padding: 0.3rem var(--sp-3) 0.34rem;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: var(--r-ctl) var(--r-ctl) 0 0;
    background: transparent;
    color: var(--brand-quiet);
    font-family: 'Plus Jakarta Sans', sans-serif;
    line-height: 1.25;
    cursor: pointer;
    transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.lp-tab:hover { background: var(--blau-hell); color: var(--btn-leucht-tief); }
.lp-tab[aria-selected="true"] {
    background: var(--brand-surface);
    border-color: var(--card-header-border);
    color: var(--brand-text);
    /* deckt die Linie des Kartenkopfs ab – der Reiter „steht" auf der Tabelle */
    box-shadow: 0 1px 0 0 var(--brand-surface);
}
.lp-tab-wd {
    font-size: var(--fs-2);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand-faint);
}
.lp-tab-day {
    font-size: var(--fs-5);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.lp-tab-n {
    font-size: var(--fs-2);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--brand-faint);
}
.lp-tab-n.has-fehl { color: var(--btn-red-text); }        /* Rot: hier ging etwas schief */
.lp-tab.is-leer .lp-tab-day { font-weight: 600; color: var(--brand-faint); }
.lp-tab.is-heute .lp-tab-wd { color: var(--brand-accent); }
.lp-tab[aria-selected="true"] .lp-tab-wd { color: var(--btn-leucht-tief); }
.lp-tab.is-heute[aria-selected="true"] .lp-tab-wd { color: var(--brand-accent); }

/* Ein Panel je Tag – nur das gewählte ist sichtbar */
.lp-panel { display: none; }
.lp-panel.is-active { display: block; }
.lp-panel-head {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: var(--sp-3) 0.9rem;
    border-bottom: 1px solid var(--brand-border);
    /* bewusst ohne eigene Fläche: der aktive Reiter geht in die Karte über */
}
.lp-panel-tag {
    font-size: var(--fs-5);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.lp-panel-zahl {
    font-size: var(--fs-3);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--brand-quiet);
}
.lp-panel-zahl.is-fehl { color: var(--btn-red-text); }
.lp-zeit { font-variant-numeric: tabular-nums; }

/* Viele Anmeldungen an einem Tag rollen in der Karte, nicht auf der Seite */
.lp-liste {
    max-height: 26rem;
    overflow-y: auto;
}
.lp-liste > .table > thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--brand-surface);
}

@media (max-width: 575.98px) {
    .lp-tabs { margin-left: 0; width: 100%; }
}

/* ==========================================================================
   Umsatzentwicklung (umsatz.php) – Präfix .um-

   Look B bleibt Look B: flach, dicht, kühl-neutral. Was diese Seite dazunimmt,
   ist Struktur statt Dekoration – Kacheln mit klarer Hierarchie (Name, große
   Zahl, Verlauf, Balken, Chips), ein Raster mit ruhigen Gruppen, und Farbe nur
   dort, wo sie eine Aussage trägt: grün auf/über Soll, rot im Rückstand.

   Mitbenutzt: .kpi-grid/.kpi (Kennzahlenkacheln),
   .ld-monate (Säulen), .ld-card-note. Aus dem Kalender: .cal-panel-toggle als
   Klappknopf und .cal-seg für die Reiter.
   ========================================================================== */

.um-jahrwahl .form-select {
    height: var(--h-ctl);
    width: auto;
    min-width: 5.5rem;
}

/* --- Kartenkopf mit Klappknopf ------------------------------------------- */

/* .um-kopf ist in .card-header aufgegangen. */
.um-kopf-titel {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    font-weight: 700;
}
.card-header .cal-panel-toggle { margin-left: 0; }

/* Kartenfuß mit eigener Klasse statt Bootstraps `d-flex`: die Hilfsklasse setzt
   display mit !important und wäre beim Zuklappen nicht auszublenden. */
.um-kartenfuss {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-3) var(--sp-5);
    flex-wrap: wrap;
}
/* Der Knopf bleibt rechts, auch wenn der Erklärsatz daneben so lang wird,
   dass er ihn in die nächste Zeile schiebt. `space-between` gilt nur je
   Zeile – allein auf der zweiten stünde der Knopf sonst links, und zwei
   Kartenfüße untereinander hätten ihren Knopf an verschiedenen Enden. */
.um-kartenfuss > :last-child { margin-left: auto; }

/* Zugeklappt bleibt nur der Kopfstreifen stehen. Ohne JavaScript wird die
   Klasse nie gesetzt – dann ist alles offen, statt sich nicht mehr zu öffnen. */
.um-block.is-zu > .card > .card-body,
.um-block.is-zu > .card > .card-footer { display: none; }
.um-block.is-zu > .card > .card-header {
    border-bottom: 0;
    border-radius: var(--r-card);
}
.um-klapp-zu { display: none; }
.um-block.is-zu .um-klapp-auf { display: none; }
.um-block.is-zu .um-klapp-zu { display: inline; }

/* --- Kennzahlenkacheln: Fortschritt als feine Leiste am Fuß -------------- */

/* Vergütungskachel: die große Zahl ist der Monat, das Jahr steht klein darunter.
   Der Monatsname sitzt am Mikrolabel, damit die Zahl ohne Beiwerk auskommt. */
.um-kpi-monat {
    margin-left: 0.35rem;
    padding: 0.02rem 0.3rem;
    border-radius: var(--r-sm);
    background: var(--btn-gray-bg);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--brand-faint);
}
/* Die Zeile mit der Jahressumme steht bewusst kleiner als die übrigen
   Kachel-Fußzeilen – der Monatswert darüber ist die Zahl, um die es geht.
   Kleiner UND fett zugleich sähe gedrängt aus, deshalb trägt die Summe nur
   halbfett und den ruhigen Sekundärton. */
.um-kpi-note-klein { font-size: var(--fs-3); }
.um-kpi-jahr {
    font-weight: 600;
    color: var(--brand-quiet);
    font-variant-numeric: tabular-nums;
}

/* Währungszeichen hinter der Zahl: „123.921 €" statt „123.921€".
   Als eigene Klasse neben .kpi-zweit, damit die Kennzahlenkacheln der
   Leads-Seite unverändert bleiben. Der Abstand ist in em, wächst also mit der
   Schriftgröße mit, und erzeugt keine Umbruchstelle.

   UND ER NIMMT .kpi-zweit DIE FARBE WIEDER AB. Dort ist Grün richtig: Die
   Klasse trägt auf der Leads-Seite eine ABGELEITETE ZAHL – die Provision zur
   Beitragssumme –, und die darf grün sein. Hier steht darin kein Wert,
   sondern die Einheit. Vier Kacheln nebeneinander, und in jeder leuchtete das
   Eurozeichen grün, während die Zahl davor im Hausblaugrau stand; das sah
   nach einer Aussage aus, wo nur „Euro" gemeint war. Eine Einheit ist leise. */
.um-eur {
    margin-left: 0.2em;
    color: var(--brand-faint);
    font-weight: 600;
}

.um-kpi-leiste {
    display: block;
    height: 3px;
    margin-top: 0.55rem;
    border-radius: var(--r-pill);
    background: var(--btn-gray-bg);
    overflow: hidden;
}
.um-kpi-leiste > span {
    display: block;
    height: 100%;
    border-radius: var(--r-pill);
    background: var(--btn-blue);
}
.kpi.is-gut .um-kpi-leiste > span { background: var(--btn-green); }
.kpi.is-alert .um-kpi-leiste > span { background: var(--brand-accent); }

/* --- Spartenkacheln ------------------------------------------------------ */

.um-ziele {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
    gap: 0.85rem;
}

/* Jede Sparte ist eine eigene Fläche. Der Ton liegt als blasse Färbung auf der
   ganzen Kachel – dieselbe Tönung wie .kpi.is-gut/.is-alert direkt darüber. */
.um-ziel {
    position: relative;
    padding: 0.7rem 0.85rem 0.6rem;
    border: 1px solid var(--brand-border);
    border-radius: var(--r-card);
    background: var(--brand-surface);
    transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.um-ziel:hover { border-color: var(--brand-line-strong); }
.um-ziel.is-gut {
    border-color: var(--btn-green-border-light);
    background: var(--btn-green-bg-light);
}
.um-ziel.is-alert {
    border-color: var(--btn-red-border-light);
    background: var(--btn-red-bg-light);
}

.um-ziel-kopf {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-3);
}
.um-ziel-name {
    font-size: var(--fs-3);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--brand-quiet);
}
.um-ziel-zeg {
    font-size: var(--fs-5);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--brand-quiet);
    white-space: nowrap;
}
.um-ziel.is-gut .um-ziel-zeg { color: var(--btn-green); }
.um-ziel.is-alert .um-ziel-zeg { color: var(--btn-red-text); }

.um-rechnet {
    margin-left: 0.3rem;
    padding: 0.05rem 0.3rem;
    border: 1px solid var(--brand-border);
    border-radius: var(--r-sm);
    font-size: var(--fs-1);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--brand-faint);
    vertical-align: 1px;
}

/* Große Zahl links, Verlaufslinie rechts – die Linie füllt den Rest der Zeile. */
.um-ziel-mitte {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.6rem;
    margin: 0.1rem 0 var(--sp-3);
}
.um-ziel-zahl {
    font-size: var(--fs-9);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* 0.3em statt 0.2em wie bei .um-eur: em rechnet gegen die eigene, hier deutlich
   kleinere Schriftgröße – so sind beide Abstände optisch gleich breit. */
.um-ziel-zahl small {
    margin-left: 0.3em;
    font-size: var(--fs-3);
    font-weight: 600;
    color: var(--brand-faint);
}

.um-spark {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 130px;
    height: 30px;
    color: var(--btn-blue);
    opacity: 0.9;
    /* Beim Laden zeichnet sich die Kurve von links nach rechts – dieselbe
       Bewegung „von null zum Endstand" wie bei den Balken unten. Beide
       Keyframes stehen hinter der Zielbahn. */
    animation: umWisch 600ms var(--ease-out) 120ms backwards;
}
.um-ziel.is-gut .um-spark { color: var(--btn-green); }
.um-ziel.is-alert .um-spark { color: var(--brand-accent); }

/* --- Zielbahn ------------------------------------------------------------ */

.um-bahn {
    position: relative;
    height: 7px;
    border-radius: var(--r-pill);
    background: var(--btn-gray-bg);
}
.um-balken {
    display: block;
    height: 100%;
    border-radius: var(--r-pill);
    background: var(--btn-blue);
    /* Wächst beim Laden von null auf den Stand – auf der Umsatzseite wie in
       der Karte auf der Startseite. Der Keyframe nennt nur den Anfang, das
       Ende ist die Breite aus dem Inline-Stil. */
    animation: umBreiteAuf 480ms var(--ease-out) backwards;
}
@keyframes umBreiteAuf { from { width: 0; } }
@keyframes umWisch {
    /* inset statt Blende: die Kurve entsteht, sie taucht nicht auf. Das `to`
       muss dastehen – ohne Angabe endete die Animation bei `clip-path: none`,
       und dahin kann der Browser nicht übergehen. */
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
}
.um-ziel.is-gut .um-balken,
.um-bahn-gross.is-gut .um-balken { background: var(--btn-green); }
/* NICHT MEHR --brand-accent (10.09.2026). Die Hausfarbe ist je Gesellschaft
   einstellbar; ein Haus mit blaugrauer Marke bekam damit einen blaugrauen
   Rückstand. Dieselbe Umstellung wie bei --zeile-fehler am 09.09.2026, jetzt
   auf das feste Signalrot, das auch der Streifen auf der Startseite trägt. */
.um-ziel.is-alert .um-balken,
.um-bahn-gross.is-alert .um-balken { background: var(--btn-red-signal); }

/* Bahn ohne Ziel: bleibt als Platzhalter stehen, damit die Kacheln im Raster
   auf gleicher Höhe sitzen, sagt aber deutlich „hier ist nichts gesetzt". */
.um-bahn.is-leer {
    background: repeating-linear-gradient(90deg,
        var(--btn-gray-bg) 0 6px, transparent 6px 12px);
}

/* Die Soll-Linie ist eine Marke auf der Bahn, kein zweiter Balken – sie sagt,
   wo man nach den bisher gelaufenen Monaten stehen müsste. */
.um-soll {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2px;
    margin-left: -1px;
    border-radius: 1px;
    background: var(--brand-text);
    opacity: 0.5;
    /* Erst wächst der Balken, dann steht die Marke – gleichzeitig sähe es
       aus, als liefe der Balken gegen sie an. */
    animation: umMarkeEin 240ms var(--ease-out) 420ms backwards;
}
@keyframes umMarkeEin { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    /* Die Dauern kürzt 01-basis.css global auf 1ms; die Verzögerungen fasst
       sie nicht an – ohne diese Regel fehlten Kurve und Marke eine halbe
       Sekunde lang. */
    .um-spark,
    .um-soll { animation-delay: 0s; }
}

.um-bahn-gross { height: 14px; }
.um-bahn-marken {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-top: var(--sp-3);
    font-size: var(--fs-5);
    color: var(--brand-quiet);
    font-variant-numeric: tabular-nums;
}
.um-bahn-marken b { color: var(--brand-text); }
.um-bahn-marken small {
    font-size: var(--fs-3);
    color: var(--brand-faint);
}

/* --- Chips in der Kachel ------------------------------------------------- */

.um-ziel-fuss {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
    margin-top: var(--sp-3);
}
.um-chip {
    padding: 0.08rem 0.4rem;
    border-radius: var(--r-sm);
    background: var(--btn-gray-bg);
    font-size: var(--fs-3);
    color: var(--brand-quiet);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.um-chip.is-plus { background: var(--btn-green-bg-light); color: var(--btn-green); }
.um-chip.is-minus { background: var(--btn-red-bg-light); color: var(--btn-red-text); }
.um-plus { color: var(--btn-green); }
.um-minus { color: var(--btn-red-text); }

/* --- Der Streifen auf der Startseite -------------------------------------- */

/* FÜNF SPALTEN, NICHT FÜNF ZEILEN (10.09.2026). Vorher stand jede Kennzahl als
   eigene Zeile zu drei Etagen untereinander – großer Betrag, farbige Kante
   links, zwei Chips im Fuß. Über die ganze Breite gestapelt waren das rund
   470px am Fuß der Startseite, und die Breite, die der Streifen ohnehin hat,
   blieb dabei leer: Die Bahn lief über 1200px, der Inhalt drängte sich links.

   Jetzt stehen dieselben Kennzahlen nebeneinander, und aus dem Stapel wird ein
   flaches Band von rund 146px. Die Beträge dürfen groß bleiben, WEIL sie nicht
   mehr übereinanderstehen – fünf große Zahlen untereinander waren das
   eigentlich Massive, nicht ihre Größe.

   DAZWISCHEN LAGEN RINGE UND TACHOS, beide am selben Tag, beide wieder heraus
   (entwurf-umsatzringe.html hat sie aufgehoben). Der Ring teilte die Produktion
   in ihre Sparten, der Tacho bog die Bahn zum Halbkreis, dessen Skala das Jahr
   war. Beide waren hübscher anzusehen, beide waren höher – 294 und 248 Pixel
   gegen 146 –, und keiner von beiden las sich schneller: Auf der geraden Bahn
   liegen fünf Balken auf derselben Linie und lassen sich in einem Blick
   vergleichen; fünf Bögen muss man einzeln ablesen. DIE GERADE BAHN IST DIE
   EINGÄNGIGERE FORM, und das ist die Entscheidung.

   GETRENNT WIRD DURCH WEISSRAUM, und die Chips sind Text: Sie waren die
   einzigen umrandeten Flächen im Ruhezustand auf der ganzen Startseite
   (DESIGN.md, „was angefasst wird, bekommt Fläche" – ein Chip wird nicht
   angefasst).

   DER RÜCKSTAND HÄNGT NICHT AN DER HAUSFARBE. Er stand einmal auf
   --brand-accent; die ist je Gesellschaft einstellbar, und bei einer
   blaugrauen Hausfarbe war die Ampel keine mehr. Die Bahn trägt jetzt
   --btn-red-signal (fest, #e5342a) – DASSELBE ROT WIE DIE BAHNEN IM MODUL
   (.um-ziel, .um-bahn-gross), denn es ist dieselbe Bahn. Die Schrift darunter
   nimmt --btn-red-text: Ein Balken darf leuchten, Schrift braucht 4,5 : 1.

   WARUM DAS HIER STEHT UND NICHT IN 04-arbeitsflaechen.css: Was IN einer Karte
   der Startseite steht, gehört dem Modul, auf das sie verweist – die
   Terminliste dem Kalender, die Aufgabenzeilen dem Board, diese Felder dem
   Umsatz. */
.um-db {
    /* auto-fit statt fester fünf Spuren: Gezeigt wird nur, wozu es etwas zu
       sagen gibt (umsatzDashboardZeilen()) – bei einer Agentur ohne KV und
       ohne Bestand sind es drei Felder, und die sollen das Band füllen statt
       zwei leere Spuren stehen zu lassen. Unter 200px je Feld bricht die Reihe
       von selbst um; eine Medienabfrage braucht es dafür nicht.

       200 UND NICHT 170: Bei 170 standen auf einem 900px breiten Fenster vier
       Felder in der ersten Reihe und der Bestand allein in der zweiten. Mit
       200 sind es dort drei und zwei – eine Reihe, die halb leer ausläuft,
       sieht nach Versehen aus. */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--sp-5) var(--sp-7);
    list-style: none;
    margin: 0;
    padding: 0;
}
.um-db-feld { min-width: 0; }
.um-db-name {
    font-size: var(--fs-3);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--brand-quiet);
}

/* Der Betrag bleibt schwarz, auch wenn das Feld im Rückstand ist. Fünf rote
   Zahlen nebeneinander wären keine Ampel mehr, sondern ein Alarmzustand – der
   Ton sitzt in der Bahn und im Abstand darunter. Dieselbe Zurückhaltung wie
   bei den Spartenkacheln im Modul (.um-ziel). */
.um-db-wert {
    margin: 0.15rem 0 0.45rem;
    font-size: var(--fs-9);
    font-weight: 700;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.um-db-wert small {
    margin-left: 0.25em;
    font-size: var(--fs-4);
    font-weight: 500;
    color: var(--brand-faint);
}

/* Die Bahn ist schmaler als im Modul: Sie steht hier unter einer Zahl, die
   schon alles gesagt hat, und soll das Feld nicht anführen. */
.um-db-feld .um-bahn { height: 4px; }
.um-db-feld.is-gut .um-balken { background: var(--btn-green); }
.um-db-feld.is-alert .um-balken { background: var(--btn-red-signal); }

/* Der Fuß: Zielerreichung und Abstand zum Soll in einer Zeile, darunter leise
   der Vorjahresvergleich. Zwei Zeilen und keine Chips – als Chips brachen die
   drei Angaben in einer Spur von 200px auf drei Reihen um. */
.um-db-fuss {
    margin-top: 0.4rem;
    font-size: var(--fs-4);
    color: var(--brand-faint);
    font-variant-numeric: tabular-nums;
}
.um-db-fuss b { font-weight: 600; }
.um-db-delta { white-space: nowrap; }
.um-db-delta.is-plus { color: var(--btn-green); }
.um-db-delta.is-minus { color: var(--btn-red-text); }
.um-db-vj {
    margin-top: 0.15rem;
    font-size: var(--fs-3);
    color: var(--brand-faint);
    font-variant-numeric: tabular-nums;
    opacity: 0.85;
}

/* --- Ziel in der Kachel setzen ------------------------------------------- */

.um-ziel-setz {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.55rem -0.2rem -0.1rem;
    padding-top: var(--sp-3);
    border-top: 1px dashed var(--brand-border);
}
.um-ziel-setz > span {
    padding-left: 0.2rem;
    font-size: var(--fs-3);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brand-faint);
    white-space: nowrap;
}
.um-in-ziel {
    min-width: 0;
    text-align: right;
}

/* Bestandsziel im Fuß seiner eigenen Karte – dort steht es, seit es keinen
   eigenen Reiter „Ziele" mehr gibt. */
.um-bestandsziel {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}
.um-bestandsziel > span {
    font-size: var(--fs-3);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brand-quiet);
    white-space: nowrap;
}
.um-bestandsziel .form-control {
    width: 9rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Marke „aus 2025": das Ziel ist nicht gesetzt, sondern die Vorjahres-Vorgabe. */
.um-herkunft {
    margin-left: var(--sp-1);
    padding: 0.02rem 0.28rem;
    border-radius: var(--r-sm);
    background: var(--btn-gray-bg);
    font-size: var(--fs-2);
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--brand-faint);
    white-space: nowrap;
}

/* Ebenso in der Ziel-Zeile des Rasters: Vorgaben stehen blasser da. */
.um-fuss-quiet.is-vorgabe {
    color: var(--brand-faint);
    font-style: italic;
}
.um-in-ziel::placeholder {
    color: var(--brand-faint);
    font-size: var(--fs-5);
    letter-spacing: 0;
    text-transform: none;
}

/* --- Monatsraster -------------------------------------------------------- */

/* Breite Tabelle rollt in ihrem Kasten, nie die Seite. */
.um-raster-scroll { overflow-x: auto; }

.um-raster {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--fs-6);
}
.um-raster th,
.um-raster td {
    padding: 0.3rem 0.4rem;
    border-bottom: 1px solid var(--brand-border);
    text-align: right;
    vertical-align: middle;
    white-space: nowrap;
}
/* Dasselbe Band wie jede andere Tabellenkopfzeile im Haus (.table > thead th
   in 01-basis.css): Ton aus --card-header-bg, Beschriftung im dunklen
   Blaugrau. Sie trug bis zum 21.08.2026 das Sekundärgrau und war damit die
   einzige Kopfzeile der Anwendung, die blasser stand als ihre Nachbarn. */
.um-raster thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--card-header-bg);
    border-bottom: 1px solid var(--brand-line-strong);
    padding-top: var(--sp-3);
    padding-bottom: var(--sp-3);
    font-size: var(--fs-3);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--brand-titel);
}
.um-raster thead th small {
    display: block;
    font-size: var(--fs-1);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--brand-faint);
}

/* Feine Trennlinie vor jeder neuen Gruppe (Leben, Vergütung, Award) – ordnet
   zehn Zahlenspalten, ohne ein Gitter zu zeichnen. */
.um-raster .um-gruppe { border-left: 1px solid var(--brand-border); }

/* Zebra: jede zweite Zeile einen Hauch dunkler. Die klebende Monatsspalte
   braucht denselben Ton, sonst schwimmt sie beim Rollen sichtbar über der Zeile. */
.um-raster tbody tr:nth-of-type(even) > td { background: var(--brand-row); }
.um-raster tbody tr:nth-of-type(even) > .um-monat-sp { background: var(--brand-row); }

/* Die Monatsspalte bleibt beim Rollen stehen – ohne sie ist eine Zeile
   in der Mitte der Tabelle nicht mehr zuzuordnen. */
.um-monat-sp {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--brand-surface);
    text-align: left !important;
    font-weight: 600;
    min-width: 4.5rem;
}
.um-raster thead .um-monat-sp {
    z-index: 3;
    background: var(--card-header-bg);
}
/* Die Zeile unter dem Zeiger im hellen Blau des Hauses – derselbe Ton, den
   jede andere Tabelle über --bs-table-hover-bg bekommt. Sie lag auf
   --btn-blue-bg-light, also auf dem Träger der Gesellschaft: In einem roten
   Haus wurde die Zeile unter der Maus rosa. */
.um-raster tbody tr:hover > td,
.um-raster tbody tr:hover > .um-monat-sp { background: var(--blau-hauch); }

/* ==========================================================================
   DER LAUFENDE MONAT – eine Marke, keine Fläche (24.08.2026)

   Vorher lag über der ganzen Zeile ein Ton: `color-mix(--brand-chip-bg 45%,
   #fff)`. Der Kommentar daneben wusste schon, dass eine Akzentfläche über elf
   Spalten in Look B zu laut wäre, und antwortete darauf mit einer sehr
   blassen Fläche über elf Spalten – also mit demselben Mittel, nur leiser.
   Im Hellen las sich die Zeile dadurch wie eine Fehlermeldung; der laufende
   Monat ist aber nichts Schlimmes, sondern eine Ortsangabe.

   IM DUNKELN WAR ES SCHLICHT KAPUTT, und zwar auf die bekannte Art: Der eine
   Partner der Mischung war ein Token (--brand-chip-bg, dort ein tiefes
   Rotbraun), der andere ein festes #fff. Ergebnis war ein mattes Rosagrau –
   hell –, auf dem die helle Schrift der Zeile und die roten Monatsnamen
   standen. Genau der Fehler, vor dem der Kopf von includes/farbschema.php
   warnt.

   DIE ANTWORT KOMMT AUS DEM KALENDER. Für „hier stehst du gerade" gibt es
   dort längst eine Sprache: nicht die getönte Fläche, sondern die GEFÜLLTE
   ZIFFER (.cal-cell-today .cal-daynum). Der laufende Monat ist im Raster
   dasselbe wie heute im Kalender, also bekommt er dieselbe Marke – punktuell
   statt flächig, in beiden Fassungen tragfähig (--brand-accent auf
   --auf-marke ist ein geprüftes Paar, siehe pruef_farbschema.php), und die
   zehn Zahlenspalten bleiben in Ruhe.

   Die Rippe links bleibt: Die Monatsspalte klebt beim Rollen, also ist die
   Zeile auch dann noch zu finden, wenn man rechts außen bei „Notiz" steht.
   ========================================================================== */
.um-raster tbody tr.is-jetzt > .um-monat-sp {
    box-shadow: inset 3px 0 0 var(--brand-accent);
}
.um-jetzt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 21px;
    padding: 0 9px;
    border-radius: var(--r-pill);
    background: var(--cal-today);
    color: var(--auf-marke);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    line-height: 1;
}
.um-raster tbody tr.is-leer > .um-monat-sp { color: var(--brand-faint); }

/* Die gerechnete Spalte trägt einen eigenen Ton. Beim Überfahren zieht sie mit,
   sonst sähe die Zeile aus, als hätte sie ein Loch.
   Der Selektor ist absichtlich so lang: Die Zebra-Regel oben ist gleich
   spezifisch, und nur die spätere Stelle im Blatt entscheidet dann.

   DREI STUFEN AUS DER HELLBLAUEN FAMILIE, seit dem 21.08.2026 nicht mehr aus
   dem Träger der Gesellschaft gemischt: Der Träger ist seither zwei Stufen
   tiefer, und dieselben Mischungen ergaben plötzlich eine graue Spalte quer
   durch das Raster. Die Familie hat die Stufen schon fertig – --blau-hauch
   für die ruhende Spalte, --blau-hell für ihre Kopf- und Fußzeile und für
   die Zeile unter dem Zeiger. */
.um-raster tbody tr > .um-rechnet-sp { background: var(--blau-hauch); }
.um-raster thead .um-rechnet-sp { background: var(--blau-hell); }
.um-raster tbody tr:hover > .um-rechnet-sp { background: var(--blau-hell); }
.um-raster tfoot .um-rechnet-sp { background: var(--blau-hell); }

.um-wert {
    display: block;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.um-delta {
    display: block;
    margin-top: 1px;
    font-size: var(--fs-3);
    line-height: 1.1;
    color: var(--brand-faint);
    font-variant-numeric: tabular-nums;
}

/* Eingabefelder sitzen bündig in der Zelle – ein Raster, kein Formular.
   Die feine gepunktete Grundlinie sagt beim ersten Blick, dass hier getippt
   wird; sichtbar umrandet werden sie erst beim Überfahren. */
.um-in {
    width: 100%;
    min-width: 5.5rem;
    height: 28px;
    padding: 0 0.4rem;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--brand-text);
    font: inherit;
    font-variant-numeric: tabular-nums;
    text-align: right;
    transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.um-in:not(:hover):not(:focus) {
    border-bottom-color: var(--brand-border);
    border-bottom-style: dotted;
}
/* Die Fläche kommt aus dem Schleier, nicht aus --brand-surface: Im Dunkeln
   IST die Kartenfläche der Zeilenton (1,05 : 1), und das Feld antwortete
   deshalb nur mit seinem Rand. Siehe --schleier im :root von 01-basis.css. */
.um-in:hover {
    border-color: var(--brand-border);
    background: var(--schleier);
}
/* Derselbe Fokus wie an jedem anderen Eingabefeld der Anwendung (siehe
   .form-control:focus in 01-basis.css): Rahmen und Ring im Leuchtblau. Hier
   stand ein eigener Ring aus dem Träger der Gesellschaft – im roten Haus war
   das getippte Feld rot umrandet und damit von einem falsch ausgefüllten
   nicht zu unterscheiden. */
.um-in:focus {
    outline: none;
    border-color: var(--focus-col);
    background: var(--schleier);
    box-shadow: var(--focus-ring);
}
.um-in-text {
    min-width: 9rem;
    text-align: left;
}
.um-notiz-sp { text-align: left !important; }

/* Fußzeilen des Rasters: Stand / Ziel / ZEG – die alte Zeile 18 der Tabelle. */
.um-raster tfoot th,
.um-raster tfoot td {
    border-bottom: none;
    background: var(--card-header-bg);
    font-variant-numeric: tabular-nums;
}
.um-raster tfoot tr:first-child th,
.um-raster tfoot tr:first-child td { border-top: 2px solid var(--brand-line-strong); }
.um-raster tfoot .um-monat-sp {
    background: var(--card-header-bg);
    font-size: var(--fs-3);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--brand-quiet);
}
.um-fuss-stand td { font-weight: 700; }
.um-fuss-quiet { color: var(--brand-quiet); }
.um-fuss-zeg { font-weight: 700; color: var(--brand-quiet); }
.um-fuss-zeg.is-gut { color: var(--btn-green); }
.um-fuss-zeg.is-alert { color: var(--btn-red-text); }
.um-fuss-hinweis {
    font-size: var(--fs-3);
    font-weight: 400;
    color: var(--brand-faint);
}

/* --- Vergleich und Bestandsliste ---------------------------------------- */

.um-vergleich td,
.um-liste td { padding-top: 0.45rem; padding-bottom: 0.45rem; }
.um-liste form { display: inline; }
.um-vergleich tbody tr:nth-of-type(even) > td,
.um-liste tbody tr:nth-of-type(even) > td { background: var(--brand-row); }

.um-spalten {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: var(--sp-6) var(--sp-7);
}
.um-spalte-block .ld-monate { height: 110px; margin-top: 0.4rem; }

@media (max-width: 575.98px) {
    .um-jahrwahl { width: 100%; }
    .um-jahrwahl .form-select { width: 100%; }
    .um-ziele { grid-template-columns: 1fr; }
    .card-header .ld-card-note { width: 100%; }
}

/* ==========================================================================
   Modulverwaltung (module.php) und Assistent
   ==========================================================================
   .mod-liste/.mod-zeile war einmal die Schalterliste der Modulverwaltung. Die
   Schalter sind weg (siehe modulAktiv()); die Bausteine tragen heute die
   Stufen- und Handlungswahl in assistent_einrichten.php – dieselbe Form, immer
   noch mit Schalter, deshalb bleiben sie unverändert stehen.

   Eine Zeile ist als Ganzes das Label: Der Klick irgendwo darauf schaltet um,
   nicht nur der auf das Kästchen. Der aktive Zustand färbt die Zeile leicht
   blaugrau und setzt eine schmale Marke an den linken Rand – dasselbe Mittel
   wie bei den Board-Spalten, damit „an" auf einen Blick lesbar ist.

   Der Zustand hängt an :has(input:checked), NICHT an einer vom Server
   gesetzten Klasse – sonst täte ein Klick sichtbar nichts, bis gespeichert
   ist. Genau diese Falle war im Karten-Dialog des Boards schon einmal als
   „die Labels funktionieren nicht" gemeldet worden. */
.mod-liste {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.mod-zeile {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 0.9rem;
    margin: 0;
    border: 1px solid var(--brand-border);
    border-radius: var(--r-ctl);
    background: var(--brand-surface);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.mod-zeile:hover { background: var(--brand-row); border-color: var(--brand-line-strong); }

.mod-zeile:has(input:checked) {
    background: var(--blau-hell);
    border-color: var(--blau-rand);
    box-shadow: inset 3px 0 0 0 var(--btn-leucht-dark);
}

.mod-icon {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--brand-quiet);
}
.mod-zeile:has(input:checked) .mod-icon { color: var(--btn-leucht-dark); }

.mod-text { flex: 1 1 auto; min-width: 0; }
.mod-titel { display: block; font-weight: 600; }
.mod-info {
    display: block;
    font-size: var(--fs-6);
    color: var(--brand-quiet);
    line-height: 1.35;
}

.mod-schalter { flex: 0 0 auto; }
.mod-schalter .form-check-input { margin: 0; width: 1.15rem; height: 1.15rem; }

/* „Was dieses Haus benutzt" – die Kacheln über der Matrix (module.php).
   Beschreibung UND Schalter in einem: Man stellt nicht einen Namen, sondern
   das, was das Modul tut.

   ZWEI FASSUNGEN DERSELBEN KACHEL. Die nackte (ohne .is-wahl) ist reine
   Auskunft – kein Zeigefinger, keine Hover-Reaktion: Wo nichts zu klicken ist,
   darf auch nichts danach aussehen. Sie steht so in modul_gesperrt.php und
   trägt hier ein .is-aus, wenn die Lizenz das Modul nicht nennt. */
.mod-erklaer {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: var(--sp-3);
}
.mod-erklaer-kachel {
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--brand-border);
    border-radius: var(--r-ctl);
    background: var(--brand-row);
}
.mod-erklaer-kopf {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 600;
    margin-bottom: 0.15rem;
}
.mod-erklaer-icon { display: inline-flex; color: var(--btn-blue); }
.mod-erklaer-text {
    font-size: var(--fs-5);
    line-height: 1.4;
    color: var(--brand-quiet);
}

/* Nicht lizenziert (lizenz.php). Zurückgenommen, aber lesbar – die Kachel
   erklärt ja gerade, was der Kunde dazukaufen könnte. Deshalb bleibt der Text
   in seiner normalen Farbe und nur Fläche, Rahmen und Zeichen treten zurück;
   eine durchgehend blasse Kachel liest sich wie ein Fehler. */
.mod-erklaer-kachel.is-aus {
    border-style: dashed;
    background: transparent;
}
.mod-erklaer-kachel.is-aus .mod-erklaer-kopf { color: var(--brand-quiet); }
.mod-erklaer-kachel.is-aus .mod-erklaer-icon { color: var(--brand-quiet); }

/* Die stellbare Fassung (27.08.2026): ein Häkchen rechts im Kopf, angehakt
   heißt „in Gebrauch". Das Mittel ist dasselbe wie bei .mod-zeile im
   Benutzerformular – heller Grund, blauer Rand und eine schmale Marke am
   linken Rand –, damit „an" im ganzen Haus gleich aussieht.

   DER ZUSTAND HÄNGT AN :has(input:checked), NICHT an einer vom Server
   gesetzten Klasse. Sonst täte ein Klick sichtbar nichts, bis gespeichert ist;
   genau diese Falle war im Karten-Dialog des Boards schon einmal als „die
   Labels funktionieren nicht" gemeldet worden. */
.mod-erklaer-kachel.is-wahl {
    display: block;
    margin: 0;
    cursor: pointer;
    transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.mod-erklaer-kachel.is-wahl:hover {
    background: var(--brand-surface);
    border-color: var(--brand-line-strong);
}
.mod-erklaer-kachel.is-wahl:has(input:checked) {
    background: var(--blau-hell);
    border-color: var(--blau-rand);
    box-shadow: inset 3px 0 0 0 var(--btn-leucht-dark);
}
.mod-erklaer-kachel.is-wahl:has(input:checked) .mod-erklaer-icon { color: var(--btn-leucht-dark); }

/* Der Name nimmt den Platz, das Kästchen sitzt rechts außen – so stehen alle
   Häkchen einer Reihe auf einer Linie, egal wie lang das Wort ist. */
.mod-erklaer-name { flex: 1 1 auto; min-width: 0; }
.mod-erklaer-schalter { flex: 0 0 auto; margin: 0; width: 1.15rem; height: 1.15rem; }

/* Eine tote Spalte der Matrix darunter: nicht gekauft oder abgewählt. Blass,
   aber lesbar – der Kopf sagt im title, welches von beidem. */
.mod-matrix th.mx-kopf-aus { color: var(--brand-faint); }

/* Knopf eines gesperrten Moduls – den sieht nur der Superuser. Gestrichelt und
   blass, damit auf einen Blick klar ist: hier kommt sonst niemand hinein. */
.site-leiste .nav-gesperrt {
    border-style: dashed;
    color: var(--brand-faint);
    opacity: 0.75;
}

/* ==========================================================================
   Assistent (assistent.php)

   Nur drei Bausteine – Kennzahlen, Karten, Abzeichen und Reiter kommen aus
   den gemeinsamen Familien (.kpi-grid, .wizard-card, .badge-soft-*, .cal-seg).
   Was hier steht, gibt es sonst nirgends: der Sperrhinweis, das Schritt-
   Protokoll und der aufklappbare Wortlaut.
   ========================================================================== */

/* „Diese Absicht geht immer an einen Menschen" – blaugrau, nicht rot: Es ist
   kein Fehler, sondern die Regel, die greift. Rot bleibt der Ausnahme
   vorbehalten (Look B). */
.as-hinweis {
    padding: var(--sp-3) 0.7rem;
    border-radius: var(--r-ctl);
    background: var(--btn-blue-bg-light);
    border: 1px solid var(--btn-blue-border-light);
    font-size: var(--fs-5);
    color: var(--brand-quiet);
}

/* Was tatsächlich passiert ist. Bewusst als Liste mit Punkten statt als Fließ-
   text: Die Zeilen werden überflogen, nicht gelesen. */
.as-schritte {
    margin: 0 0 0.2rem;
    padding-left: 1.1rem;
    font-size: var(--fs-5);
    color: var(--brand-quiet);
    line-height: 1.5;
}
.as-schritte li::marker { color: var(--btn-blue); }

/* Der Wortlaut liegt zugeklappt darunter – im Alltag will man ihn nicht sehen,
   im Zweifel aber sofort. <details> statt JavaScript: Das kann der Browser. */
.as-entwurf > summary {
    cursor: pointer;
    font-size: var(--fs-4);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--brand-faint);
    list-style: none;
}
.as-entwurf > summary::-webkit-details-marker { display: none; }
.as-entwurf > summary::before {
    content: "▸ ";
    display: inline-block;
    transition: transform var(--t-fast) var(--ease-out);
}
.as-entwurf[open] > summary::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
    .as-entwurf > summary::before { transition: none; }
}
.as-entwurf > summary:hover { color: var(--btn-blue); }
.as-entwurf pre {
    margin: var(--sp-3) 0 0;
    padding: 0.7rem 0.9rem;
    max-height: 22rem;
    overflow: auto;
    background: var(--card-header-bg);
    border: 1px solid var(--brand-border);
    border-radius: var(--r-ctl);
    font-size: var(--fs-5);
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

/* --------------------------------------------------------------------------
   Modulverwaltung, zweiter Teil: Freischaltung nur lesen, Freigabe-Matrix
   --------------------------------------------------------------------------
   Der Administrator sieht die Schalter der Installation, darf sie aber nicht
   stellen (.is-fest). Freigeschaltete Zeilen bleiben blaugrau – das ist die
   Auskunft, die er braucht; die gesperrten stehen blass und ohne Zeigefinger
   da, damit auf einen Blick klar ist: hier ist nichts zu holen. */
.mod-zeile.is-fest { cursor: default; }
.mod-zeile.is-fest:hover { background: var(--brand-surface); border-color: var(--brand-border); }
.mod-zeile.is-fest:has(input:checked):hover {
    background: var(--blau-hell);
    border-color: var(--blau-rand);
}
.mod-zeile.is-fest:not(:has(input:checked)) {
    background: var(--brand-row);
    color: var(--brand-faint);
    border-style: dashed;
}
.mod-zeile.is-fest:not(:has(input:checked)) .mod-titel,
.mod-zeile.is-fest:not(:has(input:checked)) .mod-info,
.mod-zeile.is-fest:not(:has(input:checked)) .mod-icon { color: var(--brand-faint); }

/* Die Matrix kann breiter werden als die Spur – sie scrollt in sich, die
   Seite selbst bekommt nie eine waagerechte Bildlaufleiste. */
.mx-scroll { overflow-x: auto; }

.mod-matrix th { white-space: nowrap; }
.mod-matrix td:not(:first-child),
.mod-matrix th:not(:first-child) { width: 1%; padding-left: 0.75rem; padding-right: 0.75rem; }
.mod-matrix tbody tr:nth-of-type(even) > td { background: var(--brand-row); }

.mx-kopf {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    color: var(--brand-quiet);
}
.mx-kopf-text {
    font-size: var(--fs-3);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Spalte eines nicht freigeschalteten Moduls – über Kopf und alle Zellen. */
.mod-matrix .is-zu { background: var(--brand-row); }
.mod-matrix .is-zu .mx-kopf { color: var(--brand-faint); }
.mod-matrix .is-zu .form-check-input { opacity: 0.35; }

/* Was nicht zu stellen ist, bleibt lesbar und tritt zurück. Seit dem
   20.08.2026 gibt es dafür nur noch einen Grund: ein Modul, das die Lizenz
   nicht nennt – der Titel am Kästchen sagt es. Die Zeile eines Administrators
   steht nicht mehr abgeschaltet da, sondern hat wie die des Superusers Punkte
   statt Häkchen. */
.mod-matrix .form-check-input:disabled { opacity: 0.4; }

/* Superuser und Administrator haben keine Häkchen, sondern einen Punkt: Sie
   haben alles, was die Lizenz hergibt (der Superuser auch darüber hinaus).
   Wo die Lizenz nichts hergibt, steht gar nichts – siehe module.php. */
.mx-immer { color: var(--btn-blue); font-size: var(--fs-7); }
.mod-matrix .is-zu .mx-immer { color: var(--brand-faint); }

/* Modulfreigabe im Benutzerformular – dieselbe Aussage wie die Matrix in
   module.php, nur als Kachelreihe, weil hier nur ein Benutzer gemeint ist. */
.mod-kacheln {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: var(--sp-3);
}

.mod-kachel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.7rem var(--sp-3);
    margin: 0;
    border: 1px solid var(--brand-border);
    border-radius: var(--r-ctl);
    background: var(--brand-surface);
    color: var(--brand-quiet);
    cursor: pointer;
    text-align: center;
    transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.mod-kachel:hover { background: var(--brand-row); border-color: var(--brand-line-strong); }

/* Das Kästchen selbst steht oben rechts nicht extra – die Kachel IST der
   Zustand. Sichtbar bleibt es trotzdem, damit Tastatur und Beschriftung
   weiter funktionieren. */
.mod-kachel .form-check-input { margin: 0 0 0.15rem 0; }

.mod-kachel:has(input:checked) {
    background: var(--blau-hell);
    border-color: var(--blau-rand);
    color: var(--btn-leucht-tief);
}
.mod-kachel-titel { font-size: var(--fs-6); font-weight: 600; }

/* Nicht lizenziert: gestrichelt, blass, kein Zeigefinger. */
.mod-kachel.is-zu {
    background: var(--brand-row);
    border-style: dashed;
    color: var(--brand-faint);
    cursor: not-allowed;
}
.mod-kachel.is-zu:hover { background: var(--brand-row); border-color: var(--brand-border); }

/* Zwei Fälle, in denen die Kacheln zurücktreten, beide ohne JavaScript am
   Kästchen abgelesen: „Administrator" und „Superuser". Beide haben alles, was
   die Lizenz hergibt – Häkchen gibt es nur für Mitarbeiter. Die Sperrklasse
   trägt das Formular seit dem 20.08.2026 immer; vorher hing sie daran, ob der
   Angemeldete selbst Superuser war. */
form.uf-modulsperre:has(#is_admin:checked) .mod-kacheln,
form:has(#ist_superuser:checked) .mod-kacheln { opacity: 0.4; pointer-events: none; }
form.uf-modulsperre:has(#is_admin:checked) #modul-hinweis,
form:has(#ist_superuser:checked) #modul-hinweis { display: none; }

.mod-adminnote, .mod-supernote { display: none; }
form.uf-modulsperre:has(#is_admin:checked) .mod-adminnote { display: block; }
form:has(#ist_superuser:checked) .mod-supernote { display: block; }

/* ==========================================================================
   Gesellschaft – Auswahl und Farbvorschau (gesellschaft.php, install/index.php)
   ==========================================================================
   Die Muster zeigen dieselben Tokens, die der Stilblock im Seitenkopf setzt.
   Deshalb steht hier keine einzige Farbe: Die Felder bekommen ihren Ton am
   Element (aus gesellschaftVorschauHtml() bzw. dem Skript), alles andere
   fließt aus den Tokens – die Vorschau färbt sich also mit.
   ========================================================================== */
.ges-muster {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    /* Platz für die Beschriftung, die unter den Feldern hängt. */
    margin: 0 0 var(--sp-7);
}
.ges-muster-feld {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 68px;
    height: 46px;
    border-radius: var(--r-sm);
    border: 1px solid rgba(26, 36, 48, 0.10);
    transition: background-color var(--t-base) var(--ease-out);
}
/* Die Beschriftung liegt unter dem Feld, nicht darauf: Auf dunklen Akzenten
   wäre sie sonst mal lesbar, mal nicht. */
.ges-muster-wort {
    position: absolute;
    top: calc(100% + 3px);
    font-size: var(--fs-2);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--brand-faint);
    white-space: nowrap;
}


.ges-marke-zeile {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: 0.9rem;
}
/* Das bisher hochgeladene Logo über dem Dateifeld – im selben Plättchen wie in
   der Kopfleiste, daneben das Häkchen zum Entfernen. */
.ges-marke-schau {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: var(--sp-3);
}
.ges-marke-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}
.ges-marke {
    font-weight: 700;
    font-size: var(--fs-8);
}
/* Die zweite Zeile wie in der Kopfleiste: klein, ruhig, ohne Fettung. */
.ges-marke-sub {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: var(--fs-3);
    color: var(--brand-quiet);
}
.ges-probe-chip {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 0.6rem;
    border-radius: var(--r-pill);
    background: var(--brand-chip-bg);
    color: var(--brand-accent);
    font-size: var(--fs-5);
    font-weight: 600;
}

/* HIER STAND DIE PRÄSENTATIONSANSICHT (company_presentation.php, .pres-*):
   größere Schrift, weißer Grund, keine Kopfleiste – die Firmenakte für Beamer
   und Drucker. Sie ist am 10.08.2026 mit dem Firmenbereich gegangen. */

/* Der eigene Name in der Kopfleiste führt ins Profil. Er soll dabei so ruhig
   bleiben wie vorher als Text – erst der Mauszeiger verrät den Link. */
.nav-eigener-name {
    color: var(--brand-quiet);
    text-decoration: none;
}
.nav-eigener-name:hover { color: var(--brand-text); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Handy abgleichen (sync_einrichten.php)

   Wenig Eigenes mit Absicht: Die Seite lebt von den Karten und den
   Kennzahlenkacheln, die es schon gibt. Neu sind nur die drei Stellen, an
   denen etwas ABGETIPPT wird - und die müssen sich gut lesen lassen.
   -------------------------------------------------------------------------- */

/* Das Gerätepasswort steht genau einmal da. Groß, mit Sperrung und in
   Ziffernbreite, damit sich l/1 und 0/O nicht ins Gehege kommen - die
   Zeichenauswahl in DAV_PASSWORT_ZEICHEN lässt sie zwar weg, aber wer das
   abtippt, soll es trotzdem nicht raten müssen. */
.sync-passwort {
    margin: 0 0 .5rem;
}

.sync-passwort code,
.sync-adresse code {
    display: inline-block;
    padding: .5rem .75rem;
    border: 1px solid var(--brand-border);
    border-radius: var(--r-ctl);
    background: var(--brand-faint);
    color: var(--brand-text);
    font-variant-numeric: tabular-nums;
    /* Umbrechen erlaubt: Die Serveradresse ist auf schmalen Schirmen länger
       als die Karte, und ein waagerechter Rollbalken mitten im Text ist das
       Letzte, was man beim Abtippen gebrauchen kann. */
    word-break: break-all;
}

.sync-passwort code {
    font-size: var(--fs-10);
    letter-spacing: .06em;
    font-weight: 600;
    color: var(--btn-blue-dark);
    border-color: var(--btn-blue-border-light);
    background: var(--btn-blue-bg-light);
}

/* Eine Zeile je Gerät bzw. je weggewischtem Kontakt: links der Text, rechts
   der Knopf. Dieselbe Anmutung wie die Zeilen im Postfach. */
.sync-geraet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .7rem var(--sp-5);
    border-bottom: 1px solid var(--brand-border);
}

.sync-geraet:last-child {
    border-bottom: 0;
}

.sync-geraet-text {
    min-width: 0;
}

.sync-geraet-text strong {
    display: block;
    /* Ein Gerätename wie "iPhone von Marc (privat, altes)" darf die Zeile
       nicht aufreißen. */
    overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Kontakte übernehmen (kontakt_import.php)

   Der Sichtungsschritt ist eine dichte Tabelle mit Bedienelementen in jeder
   Zeile - bei 500 Kontakten zählt jeder Pixel Höhe. Deshalb kleinere
   Schrift, engere Zeilen und ein klebender Tabellenkopf, damit man beim
   Scrollen noch weiß, welche Spalte was ist.
   -------------------------------------------------------------------------- */

.ki-schritte {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    list-style: none;
    margin: 0 0 1.1rem;
    padding: 0;
    font-size: var(--fs-5);
}
.ki-schritte li {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .3rem .7rem .3rem .35rem;
    border: 1px solid var(--brand-border);
    border-radius: var(--r-pill);
    color: var(--brand-quiet);
    background: var(--brand-surface);
}
.ki-schritt-nr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: var(--r-pill);
    background: var(--brand-faint);
    /* WEISS UND FEST, NICHT --brand-surface (27.08.2026). Die Ziffer sass auf
       der Kartenfläche, und die kehrt sich mit dem Schema um: Im Dunkeln stand
       damit die dunkle Fläche als Schrift auf dem grauen und dem blauen
       Plättchen – auf --btn-leucht-dark waren das 3,8 : 1, und die „1" im
       laufenden Schritt war kaum noch zu finden. Genau der Fehler, vor dem der
       Kopf von includes/farbschema.php warnt: eine Hälfte des Paares am Token,
       die andere fest. Die drei Plättchenfarben sind fest (grau, Leuchtblau,
       Grün), also ist die Ziffer darauf es auch. Im Hellen ändert sich damit
       kein Pixel – dort war --brand-surface ohnehin Weiss. */
    color: #fff;
    font-size: var(--fs-3);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.ki-schritte li.is-jetzt {
    border-color: var(--blau-rand);
    background: var(--blau-hell);
    color: var(--btn-leucht-tief);
    font-weight: 600;
}
.ki-schritte li.is-jetzt .ki-schritt-nr { background: var(--btn-leucht-dark); }
.ki-schritte li.is-fertig { color: var(--brand-text); }
/* Das Grün ist die eine der drei Flächen, die sich SEHR WOHL umkehrt (im
   Hellen #1e7e34, im Dunkeln #4ade80) – auf dem hellen Grün wäre Weiss 1,8 : 1.
   Dafür gibt es --auf-marke: die Tinte auf einer gefüllten Markenfläche, im
   Hellen Weiss, im Dunkeln der Seitengrund. */
.ki-schritte li.is-fertig .ki-schritt-nr { background: var(--btn-green); color: var(--auf-marke); }

/* Spaltenzuordnung: eine Kachel je Spalte der Datei. Die zwei Beispielwerte
   darin sind das eigentlich Nützliche - eine Spalte namens "Feld7" erkennt
   man nur an ihrem Inhalt. */
.ki-spalten {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .7rem;
}
.ki-spalte {
    padding: .6rem .7rem .7rem;
    border: 1px solid var(--brand-border);
    border-radius: var(--r-card);
    background: var(--brand-surface);
}
.ki-spalte-kopf {
    font-weight: 600;
    font-size: var(--fs-6);
    overflow-wrap: anywhere;
}
.ki-spalte-beispiel {
    margin: .1rem 0 .45rem;
    font-size: var(--fs-4);
    color: var(--brand-faint);
    overflow-wrap: anywhere;
}

.ki-werkzeuge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
}
.ki-werkzeug-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

/* Die Tabelle rollt in ihrem eigenen Kasten, nicht die Seite. */
.ki-tabelle-huelle {
    overflow-x: auto;
    max-height: 70vh;
    overflow-y: auto;
}
.ki-tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-6);
}
.ki-tabelle th,
.ki-tabelle td {
    padding: .4rem .6rem;
    border-bottom: 1px solid var(--brand-border);
    vertical-align: top;
    text-align: left;
}
.ki-tabelle thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--brand-bg);
    font-size: var(--fs-3);
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--brand-faint);
    white-space: nowrap;
}
.ki-sp-haken { width: 2.2rem; }
.ki-sp-art   { width: 10.5rem; }
.ki-sp-firma { width: 15rem; }
.ki-tabelle .form-select-sm,
.ki-tabelle .form-control-sm { font-size: var(--fs-5); }
.ki-haken { margin-top: .35rem; }
.ki-klein {
    font-size: var(--fs-5);
    color: var(--brand-quiet);
    overflow-wrap: anywhere;
}

/* Eine Zeile ohne Namen kann nicht angelegt werden - sie steht da, damit man
   sieht, dass sie da ist, und nicht, damit man sie anfasst. */
.ki-tabelle tr.is-leer { opacity: .55; }
.ki-tabelle tr.is-bekannt { background: var(--btn-orange-bg-light); }

.ki-marke {
    display: inline-block;
    padding: .05rem .4rem;
    border-radius: var(--r-sm);
    font-size: var(--fs-3);
    font-weight: 700;
    letter-spacing: .03em;
}
.ki-marke.is-da     { background: var(--btn-green-bg-light);  color: var(--btn-green); }
.ki-marke.is-neu    { background: var(--btn-blue-bg-light);   color: var(--btn-blue-dark); }
.ki-marke.is-bekannt{ background: var(--btn-orange-bg-light); color: var(--btn-orange-text); }

.ki-abschluss {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: var(--sp-7);
}

@media (max-width: 720px) {
    /* Auf dem Telefon ist das Sortieren ohnehin keine Freude - aber es soll
       wenigstens lesbar bleiben statt waagerecht auszubrechen. */
    .ki-sp-art, .ki-sp-firma { width: auto; }
    .ki-tabelle { font-size: var(--fs-5); }
}

/* Herkunft einer Rufnummer im Sichtungsschritt. Leise, aber lesbar: Sie sagt,
   welche der beiden Festnetznummern gemeint ist - und das entscheidet, welche
   ins Feld kommt und welche in die Notizen. */
.ki-nummernart {
    font-size: var(--fs-3);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--brand-faint);
}
.ki-nummer-rest {
    margin-top: .1rem;
    color: var(--btn-orange-text);
}

/* ==========================================================================
   BRANCHENANSICHT – der Schalter des Superusers (27.08.2026)
   (includes/branchenansicht.php, branche_aktion.php)
   --------------------------------------------------------------------------
   Dieselbe Anwendung wird als AgenturOrbit, MaklerOrbit und Praxisorbit
   verkauft. Der Superuser stellt die Oberfläche zwischen den dreien um, ohne
   eine zweite Installation aufzusetzen; hier steht, wie man ihm ansieht, dass
   er umgestellt hat.

   DAS MENÜ SELBST HAT KEINE EIGENEN REGELN. Es trägt .fs-wahl / .fs-menu /
   .fs-eintrag aus 01-basis.css – dieselben Klassen wie die Farbwahl, neben
   der es hängt. Zwei Aufklappmenüs, die nebeneinander sitzen und verschieden
   aussähen, wären zwei Bauteile für dieselbe Sache. Was hier steht, ist
   allein das Band und die Marke am Knopf.

   WARUM BLAU UND NICHT ORANGE: Orange gehört dem Band der Testumgebung
   (11-demo.css), und beide können gleichzeitig dastehen – der Superuser
   schaut sich die Praxisfassung gern in der Vorführung an. Zwei orange
   Bänder übereinander wären ein Balken. Das Leuchtblau des Hauses sagt hier
   „eingeschaltet", nicht „Achtung": Umgestellt ist nur die Sprache der
   Oberfläche, kaputt ist nichts.
   ========================================================================== */

.ba-band {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.35rem 0.6rem;
    padding: 0.5rem var(--sp-6);
    border-bottom: 1px solid var(--blau-rand);
    background: var(--blau-hell);
    color: var(--btn-leucht-tief);
    font-size: var(--fs-5);
    line-height: 1.5;
}

/* Das Wort trägt die Aussage und steht deshalb als Marke da – in Versalien
   wie die Mikrolabels der übrigen Oberfläche, damit es nicht wie ein zweiter
   Satz aussieht. Aufgebaut wie .demo-band-marke; wer die eine ändert, sieht
   hier nach.

   BEIDE HÄLFTEN DES FARBPAARES AUS TOKENS, und das ist hier keine
   Ordnungsliebe: Hier stand zuerst --btn-leucht (#00a2ef) mit festem Weiß
   darauf. Das Leuchtblau ist die eine Farbe, die sich zwischen hell und
   dunkel NICHT bewegt – das Paar wäre also stabil gewesen, aber stabil
   falsch: Weiß darauf sind 2,8 : 1. --btn-leucht-tief ist im Hellen das
   tiefe Blau und im Dunkeln das helle, --auf-marke geht jedes Mal die
   Gegenrichtung mit. Genau die Bauweise, an der .demo-band-marke daneben
   hängt. */
.ba-band-marke {
    flex: none;
    padding: 0.1rem 0.45rem;
    border-radius: var(--r-pill);
    background: var(--btn-leucht-tief);
    color: var(--auf-marke);
    font-size: var(--fs-2);
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.ba-band-text { flex: 1 1 20rem; }
.ba-band-text strong { font-weight: 700; }

/* Der Rückweg steht IM Band und nicht nur im Menü: Wer das Band liest, ist
   in dem Augenblick fertig mit dem Hineinsehen – und soll nicht erst oben
   rechts den Knopf suchen müssen, über den er hergekommen ist. */
.ba-band-form { flex: none; margin: 0; }
.ba-band-knopf {
    padding: 0.1rem 0.5rem;
    border: 1px solid var(--blau-rand);
    border-radius: var(--r-ctl);
    background: var(--brand-surface);
    color: var(--btn-leucht-tief);
    font: inherit;
    font-size: var(--fs-4);
    font-weight: 600;
    cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
    .ba-band-knopf:hover { background: var(--blau-hauch); }
}
.ba-band-knopf:focus-visible { outline: 2px solid var(--focus-col); outline-offset: 2px; }

/* Der Knopf in der Leiste, solange die Ansicht von der Lizenz abweicht. Er
   sieht aus wie ein gedrückter Knopf – dieselbe Tönung, die .ist-hier und
   das aufgeklappte Menü tragen. Ohne ihn wäre bei zugeklapptem Menü und
   weggescrolltem Band nicht zu sehen, dass überhaupt etwas umgestellt ist. */
.site-leiste .sl-werkzeuge .fs-wahl > .fs-knopf.ba-knopf-um {
    background-color: var(--blau-hell);
    border-color: var(--blau-rand);
    color: var(--btn-leucht-tief);
}

/* Schmale Schirme: Der Satz bekommt eine eigene Zeile, sonst bleibt für ihn
   zwischen Marke und Knopf eine Spalte von zwei Wörtern Breite. */
@media (max-width: 720px) {
    .ba-band { padding: 0.5rem var(--sp-4); }
    .ba-band-text { flex-basis: 100%; }
}

/* ==========================================================================
   Sicherung nach Plan – die leise Anzeige unten rechts
   (assets/js/sicherung-plan.js legt den Kasten selbst an)

   Warum global und nicht in install.css: Der Lauf beginnt auf irgendeiner
   Seite – der Startseite, dem Kalender, dem Postfach –, nicht auf der
   Wartungsseite. Die Anzeige muss deshalb überall da sein.

   Sie ist bewusst klein und ohne Ton: Wer gerade arbeitet, soll wissen, dass
   etwas läuft, aber nicht unterbrochen werden. Der Kasten liegt unter den
   Dialogen des Hauses (z-index 1100/1200) und über allem anderen.
   ========================================================================== */

.si-plan {
    position: fixed;
    right: var(--sp-4);
    bottom: var(--sp-4);
    z-index: 1030;
    width: min(22rem, calc(100vw - 2 * var(--sp-4)));
    padding: 0.6rem 0.75rem 0.7rem;
    border: 1px solid var(--brand-border);
    border-left: 3px solid var(--btn-blue);
    border-radius: var(--r-ctl);
    background: var(--brand-surface);
    box-shadow: var(--sh-2);
    font-size: var(--fs-5);
}
.si-plan.ist-fertig { border-left-color: var(--btn-green); }
.si-plan.ist-fehler { border-left-color: var(--brand-accent); }

/* Zugemacht heißt nur: nicht mehr im Weg. Der Lauf geht weiter. */
.si-plan.ist-weg { display: none; }

.si-plan-kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}
.si-plan-text { font-weight: 600; }
.si-plan-zu {
    flex: none;
    padding: 0 0.2rem;
    border: 0;
    background: none;
    color: var(--brand-faint);
    font-size: var(--fs-3);
    line-height: 1;
    cursor: pointer;
}
.si-plan-zu:hover { color: var(--brand-text); }
.si-plan-zu:focus-visible { outline: 2px solid var(--focus-col); outline-offset: 2px; }

.si-plan-balken {
    height: 5px;
    margin: 0.45rem 0 0.3rem;
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--brand-line-strong) 45%, var(--brand-surface));
    overflow: hidden;
}
.si-plan-balken i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: var(--r-pill);
    background: var(--btn-blue);
    transition: width 0.25s var(--ease-out, ease);
}
.si-plan.ist-fertig .si-plan-balken i { background: var(--btn-green); }
.si-plan.ist-fehler .si-plan-balken i { background: var(--brand-accent); }

.si-plan-klein {
    color: var(--brand-quiet);
    font-size: var(--fs-4);
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    .si-plan-balken i { transition: none; }
}