/* ==========================================================================
   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); }
.um-ziel.is-alert .um-balken,
.um-bahn-gross.is-alert .um-balken { background: var(--brand-accent); }

/* 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); }

/* --- Die Kachel auf der Startseite --------------------------------------- */

/* Dieselben Bausteine wie die Spartenkacheln, nur in einer Spalte von 4 Spuren:
   Zeile statt Fläche, Bahn darunter, Chips im Fuß. Die Ampel sitzt wie bei
   .um-ziel als schmale Marke links – eine gefärbte Fläche wäre in einer
   Karte, die neben acht anderen steht, ein Farbkasten (siehe den Abschnitt
   „Startseite" in 04-arbeitsflaechen.css).

   WARUM DAS HIER STEHT UND NICHT DORT: Was IN einer Karte der Startseite
   steht, gehört dem Modul, auf das sie verweist – die Terminliste dem
   Kalender, die Aufgabenzeilen dem Board, diese Zeilen dem Umsatz. */
.um-db {
    list-style: none;
    margin: 0;
    padding: 0;
}
.um-db-zeile {
    padding: var(--sp-3) 0 0.55rem 0.6rem;
    border-top: 1px solid var(--brand-border);
    box-shadow: inset 3px 0 0 var(--brand-line-strong);
}
.um-db-zeile:first-child { border-top: 0; }
.um-db-zeile.is-gut { box-shadow: inset 3px 0 0 var(--btn-green); }
.um-db-zeile.is-alert { box-shadow: inset 3px 0 0 var(--brand-accent); }

.um-db-kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: 0.35rem;
}
.um-db-name {
    font-size: var(--fs-3);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--brand-quiet);
}

/* Die Zielerreichung steht neben dem Namen und nicht als dritter Chip im Fuß:
   In einer Karte von vier Spuren brechen drei Chips auf zwei Reihen um, und
   jede Zeile wäre damit über 100px hoch. Sie trägt den Ton der Ampel –
   dieselbe Stelle wie .um-ziel-zeg im Modul. */
.um-db-anteil {
    margin-left: 0.4rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    color: var(--brand-faint);
}
.um-db-zeile.is-gut .um-db-anteil { color: var(--btn-green); }
.um-db-zeile.is-alert .um-db-anteil { color: var(--btn-red-text); }

/* Der Betrag bleibt schwarz, auch wenn die Zeile im Rückstand ist. Fünf rote
   Zahlen untereinander wären keine Ampel mehr, sondern ein Alarmzustand –
   der Ton sitzt links an der Marke und in der Bahn. */
.um-db-wert {
    font-size: var(--fs-8);
    font-weight: 700;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.um-db-wert small {
    margin-left: 0.3em;
    font-size: var(--fs-3);
    font-weight: 600;
    color: var(--brand-faint);
}

/* Die Bahn ist schmaler als im Modul: In der Karte liegen fünf davon
   übereinander, und der Balken soll die Zeile nicht anführen. */
.um-db-zeile .um-bahn { height: 5px; }
.um-db-zeile.is-gut .um-balken { background: var(--btn-green); }
.um-db-zeile.is-alert .um-balken { background: var(--brand-accent); }

.um-db-fuss {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    margin-top: 0.4rem;
}
.um-db-fuss .um-chip { font-size: var(--fs-3); }

/* Der Satz, der die Marke auf der Bahn erklärt. */
.um-db-fussnote {
    margin-top: 0.6rem;
    padding-top: var(--sp-3);
    border-top: 1px dashed var(--brand-border);
    font-size: var(--fs-3);
    color: var(--brand-faint);
}

/* --- 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 die Module können" – reine Auskunft über der Matrix, kein Formular.
   Deshalb keine Hover-Reaktion und kein Zeigefinger: Wo nichts zu klicken ist,
   darf auch nichts danach aussehen. Ruhiger als die Kacheln im Benutzer-
   formular, die ja Schalter sind – flache Fläche, kein Rahmenwechsel. */
.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); }

/* Knopf eines gesperrten Moduls – den sieht nur der Superuser. Gestrichelt und
   blass, damit auf einen Blick klar ist: hier kommt sonst niemand hinein. */
.site-navbar .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);
    color: var(--brand-surface);
    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); }
.ki-schritte li.is-fertig .ki-schritt-nr { background: var(--btn-green); }

/* 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);
}