/* ========================================================================== 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 sind seit dem 16.09.2026 der Segmentschalter des Hauses (.cal-seg in 02-bausteine.css) in der Leiste über der Karte – wie über dem Postfach. Hier steht nur, was der Schalter dort nicht braucht. ========================================================================== */ .lp-head { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; } .lp-head-note { color: var(--brand-faint); font-size: var(--fs-3); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } /* Zehn Tage sind breiter als die schmale Spalte: Der Schalter rollt seitlich, und kein Reiter wird dabei zusammengedrückt (Heute steht rechts außen, das Skript in users.php rollt beim Laden dorthin). */ .lp-tage { max-width: 100%; overflow-x: auto; scrollbar-width: thin; } .lp-tage a { flex: 0 0 auto; } /* 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); } /* ========================================================================== 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 var(--t-lang) var(--ease-out) var(--t-fast) 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 var(--t-lang) 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 var(--t-slow) var(--ease-out) var(--t-lang) 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.
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; } /* -------------------------------------------------------------------------- Das Benutzerfenster (users.php, 19.09.2026) -------------------------------------------------------------------------- Anlegen und Bearbeiten stehen seit dem 19.09.2026 im Hausfenster (.bd-overlay/.bd-dialog aus 04-arbeitsflaechen.css) statt auf einer eigenen Seite. Hier stehen nur die paar Werte, die ein Formular im Fenster von einem Formular auf einer Seite unterscheiden – die Regeln darüber (Modulsperre, Kacheln) gelten unverändert weiter, deshalb trägt die
dort dieselbe Klasse `uf-modulsperre` und dieselben Kennungen. DIE POLSTERUNG: .bd-dialog-body ist mit 1rem für eine Kartenansicht gedacht; ein Bogen mit zwei Spalten, Bildwähler und Kachelraster braucht denselben Rand wie die .wizard-card, sonst kleben die Felder an der Kante. -------------------------------------------------------------------------- */ .bn-fenster .bd-dialog-body { padding: var(--sp-6) var(--sp-6) var(--sp-5); } /* Enger als auf der Seite (132px): Im Fenster stehen die Kacheln in 860px statt in der vollen Arbeitsfläche, und drei Reihen sind besser zu überblicken als sechs. */ .bn-fenster .mod-kacheln { grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); } /* Die Knopfzeile schließt den Bogen ab und liegt an der unteren Kante des Fensters – die Linie darüber genügt, ein zusätzlicher Abstand nach unten ließe sie schweben. */ .bn-fenster .form-aktionen { margin-bottom: 0; } /* DER ABSTAND NACH UNTEN GEHÖRT AN DEN DIALOG, nicht an den Schleier: Wird das Fenster höher als das Bild, rollt .bd-overlay – und ein Flex-Container gibt seine untere Polsterung beim Rollen nicht her. Ohne diese Zeile endet der Bogen mit „Speichern" hart an der Bildkante. Oben besorgt das die Polsterung des Schleiers (4vh), die beim Rollen zu Beginn ja sichtbar ist. */ .bn-fenster .bd-dialog { margin-bottom: 4vh; } /* ========================================================================== 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); } /* ========================================================================== 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 var(--t-slow) var(--ease-out); } .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; } } /* ========================================================================== Die Ampel der Anbindungen (.ab-ampel) -------------------------------------------------------------------------- SEIT DEM 19.09.2026 HIER STATT IM