/* =========================================================================== VTX · Gestaltung (A-Q.16) =========================================================================== ⛔ EINE DATEI FÜR DAS GANZE WERKZEUG. Keine Stile in den Seiten. Wer eine Farbe ändern will, ändert sie hier — und zwar einmal. ⛔ SELBST GEHOSTET, KEIN CDN, KEIN BUILD-SCHRITT. Auch keine Web-Schrift von aussen: Die Schriftfolge nimmt, was das Betriebssystem mitbringt. Eine eingebundene Schrift wäre ein Aufruf zu einem fremden Server bei jedem Seitenaufruf, mit IP und Verweis-Adresse. Übernommen aus `designsystem/` (Bewerbermanagement, interne Anwendung der Fireboard GmbH) — dieselben Bausteine, damit beide Werkzeuge sich gleich anfühlen. =========================================================================== */ :root { --grund: #f7f7f6; /* Inhaltsfläche */ --karte: #ffffff; --rand: #e7e5e1; --rand-zart: #f0eeeb; --text: #1c1b1a; --text-leise: #6b6763; --text-still: #8a857f; /* Spaltenköpfe, Fusszeile */ --leiste: #1b1a19; /* Seitenleiste */ --leiste-hell: #2a2825; --leiste-text: #d6d2cc; --akzent: #e8590c; --akzent-hell: #fdf0e8; --gut-grund: #e9f5ee; --gut-rand: #bfdfcb; --gut-text: #1f6f3d; --warn-grund: #fdf3e3; --warn-rand: #f0dcae; --warn-text: #7a4c00; --weg-grund: #fbeceb; --weg-rand: #f0c6c2; --weg-text: #8c1d18; --still-grund: #f0efed; --still-rand:#e0ddd8; --still-text:#5f5b57; /* ⛔ DIE DREI FARBEN DER KAUFABSICHTEN, aus VT5/VT6 übernommen (A-2.3/2.4). Im Altsystem sind es FLÄCHEN mit weissem Zeichen darin; bei uns ist das Zeichen freistehend und trägt die Farbe selbst (Sebastian, 31.08.2026: „die Glocke farbig auf weiß … dann bekommen wir alle als Symbol eingefärbt"). ⚠️ DESHALB IST DAS GRÜN NACHGEDUNKELT: `rgb(199,224,59)` ist als Fläche gedacht; als Strich auf Weiss trägt es 1,4:1 und wäre eine Andeutung statt einer Angabe. ⭐ Der FARBTON bleibt derselbe (Buntton 69°), nur die Helligkeit sinkt — 3,8:1 auf Weiss. ⭐ Orangerot steht dagegen UNVERÄNDERT so da wie im Altsystem: Es ist die Alarmfarbe, und die soll schreien. */ --ka-laeuft: #7a8b18; /* rgb(199,224,59) nachgedunkelt — läuft */ --ka-gewonnen: #7a8b18; /* bestellt (VT6:8448 zeichnet es grün) */ --ka-mahnt: #ff4400; /* rgb(255,68,0) — überfällig, unverändert */ /* ⛔ DIE MARKER DER LANDKARTE — jede Farbe genau einmal. ⚠️ Sie wird an ZWEI Stellen gebraucht: am Punkt im Knopf (`background`) und am Kreis auf der Karte (`fill`). Zweimal hingeschrieben liefen Legende und Karte auseinander, sobald jemand eine der beiden ändert — und beide sähen für sich richtig aus. */ --mk-wehr: #d92d20; /* öffentliche Feuerwehr UND Werkfeuerwehr */ --mk-rand: #1f1d1b; /* trennt den Punkt vom Kartengrund */ --mk-berater: #f59f00; /* ⛔ DIE KACHELN SIND HINTERGRUND UND WERDEN ZURÜCKGENOMMEN. ⚠️ Beim Hineinzoomen bringt basemap.de jede Straße und jeden Ortsnamen mit — in dieser Dichte gehen die Punkte unter, um die es geht. ⭐ Eine Zahl an EINER Stelle, damit sie sich nachjustieren lässt, ohne zu suchen. */ --karte-staerke: .5; /* ⛔ DIE VIER ZUSTÄNDE EINES ARBEITSPLATZES (A-4.1). ⚠️ Sie kommen aus dem Altsystem und sind nachgedunkelt, aus demselben Grund wie bei den Kaufabsichten: `rgb(199,224,59)` und `rgb(255,211,6)` sind als FLÄCHE mit weissem Zeichen gedacht; als Strich auf Weiss trügen sie 1,4 : 1 und wären eine Andeutung statt einer Angabe. Der Buntton bleibt. ⛔ `liz-nie` UND `liz-defekt` TEILEN SICH DIE FARBE NICHT ZUFÄLLIG: Beide heissen „hier läuft nichts". Unterschieden werden sie durch das Zeichen und das Wort, nicht durch einen zweiten Rotton, den niemand auseinanderhält. */ --liz-aktiv: #7a8b18; /* rgb(199,224,59) nachgedunkelt */ --liz-schlaeft: #a07a00; /* rgb(255,211,6) nachgedunkelt */ --liz-tot: #ff4400; /* rgb(255,68,0), unverändert */ --leiste-breit: 250px; --radius: 8px; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--text); background: var(--grund); } a { color: var(--akzent); text-decoration: none; } a:hover { text-decoration: underline; } code, .zahl-fest { font-family: ui-monospace, Consolas, "Courier New", monospace; } /* ── Aufbau ────────────────────────────────────────────────────────────── Zwei Spalten. Die Leiste steht, der Inhalt rollt. */ .huelle { display: flex; min-height: 100vh; } .leiste { width: var(--leiste-breit); flex: 0 0 var(--leiste-breit); background: var(--leiste); color: var(--leiste-text); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; } .inhalt { flex: 1 1 auto; min-width: 0; padding: 26px 30px 40px; } /* ── Kopf der Leiste ─────────────────────────────────────────────────── */ .marke { display: flex; align-items: center; gap: 11px; padding: 18px 18px 20px; } /* ⚠️ 12px WAREN FÜR DREI ZEICHEN GERECHNET („VTx"). Seit dem 30.08.2026 sind es zwei („VC", Sebastian) — in derselben Grösse säsen sie verloren in einem Quadrat, das für mehr gebaut wurde. ⭐ Deshalb wächst die Schrift mit dem kürzeren Kürzel, statt das Quadrat zu schrumpfen: Das Quadrat ist die Marke, nicht die Schrift darin. */ .marke .zeichen { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 7px; background: var(--akzent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; letter-spacing: .02em; } .marke .name { color: #fff; font-weight: 600; font-size: 15px; line-height: 1.2; } .marke .haus { color: #8a857f; font-size: 12px; } /* ── Menü ────────────────────────────────────────────────────────────── */ .menue { list-style: none; margin: 0; padding: 0 10px; flex: 1 1 auto; overflow-y: auto; } .menue li { margin: 1px 0; } /* ⛔ DIE ZEILENHÖHE BLEIBT, WIE SIE WAR (Sebastian, 01.09.2026): *„im ausgeklappten Zustand nur kleine Symbole verwenden, die die Zeilenhöhe heute beibehalten."* ⚠️ Deshalb 15 px — das passt in den Zeilenkasten einer 14-px-Zeile und drückt ihn nicht auseinander. Gemessen bleibt die Zeile bei 9 px Innenabstand oben und unten. ⭐ `flex` statt `block`, damit Zeichen und Wort auf EINER Grundlinie sitzen; `align-items: center` und nicht `baseline` — ein Zeichen hat keine. */ .menue a { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 6px; color: var(--leiste-text); font-size: 14px; text-decoration: none; } /* ⚠️ Feste Breite, damit die Wörter UNTEREINANDER fluchten — auch dort, wo ein Zeichen schmaler zeichnet als das andere. */ .menue .menuezeichen { flex: 0 0 15px; width: 15px; height: 15px; display: inline-flex; align-items: center; justify-content: center; } .menue .menuezeichen .zeichen-svg { width: 15px; height: 15px; } /* ⛔ Das Wort nimmt den Rest — sonst schöbe „noch leer" es aus der Zeile. */ .menue .menuewort { flex: 1 1 auto; min-width: 0; } /* ⚠️ Das Zeichen ist im aktiven Punkt so kräftig wie die Aufschrift, sonst trüge die Zeile zwei verschiedene Aussagen über denselben Zustand. */ .menue a.hier .menuezeichen { color: var(--akzent); } .menue a:hover { background: var(--leiste-hell); color: #fff; text-decoration: none; } .menue a.hier { background: var(--leiste-hell); color: var(--akzent); font-weight: 600; } /* ⚠️ Ein Bereich, der noch nichts kann, sagt es — statt leer zu wirken. */ /* ⚠️ `float: right` TRUG IN DER FLEXZEILE NICHT MEHR (01.09.2026): In einem Flex-Container ist `float` wirkungslos — die Marke wäre an das Wort gerutscht. ⭐ `margin-left: auto` schiebt sie stattdessen an die rechte Kante, dieselbe Lösung wie beim „Weiter"-Knopf der Blätterung. */ .menue a .leer { margin-left: auto; font-size: 11px; color: #6b6763; font-weight: 400; } /* ⛔ DER FUSS DER NAVIGATION (Sebastian, 01.09.2026): Die Hilfe steht unten, über dem Benutzerblock — sie ist keine Arbeitsmenge, sondern eine Erklärung, und zwischen Gebieten und Kündigungen sah sie aus wie eine. ⚠️ `flex: 0 0 auto` gegen `flex: 1 1 auto` der Hauptliste: Die obere Liste nimmt den Platz und scrollt, diese bleibt so hoch wie ihr Inhalt und steht damit immer unmittelbar über dem Benutzer. ⭐ Eine feine Linie trennt sie von der Navigation, KEINE vom Benutzer — dessen Block bringt seine eigene mit. */ .menue.fussmenue { flex: 0 0 auto; overflow: visible; padding-top: 8px; margin-top: 4px; border-top: 1px solid #2a2825; } /* ── Fuss der Leiste: wer angemeldet ist ─────────────────────────────── */ .wer { border-top: 1px solid #2a2825; padding: 14px 16px 16px; } .wer .zeile { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .wer .kreis { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; background: var(--leiste-hell); color: var(--leiste-text); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; } .wer .name { color: #fff; font-size: 13px; font-weight: 600; line-height: 1.25; } .wer .rolle { color: #6b6763; font-size: 11px; } .wer form { margin: 0; } .wer button { width: 100%; font: inherit; font-size: 13px; padding: 7px 10px; border: 1px solid #34322e; border-radius: 6px; background: transparent; color: var(--leiste-text); cursor: pointer; } .wer button:hover { background: var(--leiste-hell); color: #fff; } /* ── Seitenkopf ──────────────────────────────────────────────────────── */ .titel { font-size: 23px; font-weight: 600; margin: 0 0 3px; letter-spacing: -.01em; } /* Das Abzeichen neben der Überschrift sitzt auf der Grundlinie, nicht darüber. ⚠️ Es steht seit dem 29.08.2026 VOR dem Namen — der Abstand gehört also nach rechts. `margin-left` war ein Rest aus der Zeit davor. */ .titel .ebenenzeichen { vertical-align: 5px; margin-right: 5px; } /* Die Präzisierung hinter dem Namen: klein und still, damit sie den Namen nicht zerteilt. Sie ist eine Fussnote, keine zweite Überschrift. */ .titel .titelzusatz { font-size: 15px; font-weight: 400; color: var(--text-leise); letter-spacing: 0; } .unterzeile { color: var(--text-leise); font-size: 14px; margin: 0 0 22px; } /* Breadcrumb — Gebiete, und alles andere, was einen Weg hat. */ .pfad { font-size: 13px; color: var(--text-leise); margin: 0 0 10px; } .pfad a { color: var(--text-leise); } .pfad a:hover { color: var(--akzent); } .pfad .teiler { margin: 0 7px; color: #c9c5bf; } /* ── Kennzahlenkarten ────────────────────────────────────────────────── */ .zahlen { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 20px; } .zahl { flex: 1 1 170px; background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius); padding: 15px 17px 14px; } .zahl .label { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-still); margin-bottom: 7px; } .zahl .wert { font-size: 30px; font-weight: 600; line-height: 1.05; font-variant-numeric: tabular-nums; } .zahl .dazu { font-size: 12px; color: var(--text-leise); margin-top: 6px; } /* ⚠️ Ein Schlüssel ist kein Betrag: gleiche Zeichenbreiten, kleiner gesetzt — man liest ihn Stelle für Stelle, nicht als Grösse. */ .zahl .wert.schluessel { font-family: ui-monospace, Consolas, "Courier New", monospace; font-size: 20px; letter-spacing: .02em; word-break: break-all; } .zahl.betont .wert { color: var(--akzent); } .zahl.mahnt .wert { color: var(--weg-text); } /* ⛔ EINE KENNZAHL IST EIN EINSTIEG, KEINE ANZEIGE (A-Q.16). Jede Kachel führt in ihre Liste, mit dem Filter, den sie zählt — und weil Filter in der Adresse stehen, ist eine Kachel nichts weiter als ein Verweis. */ a.zahl { display: block; color: inherit; text-decoration: none; transition: border-color .12s, background .12s; } a.zahl:hover { border-color: var(--akzent); background: var(--akzent-hell); text-decoration: none; } a.zahl:hover .label { color: var(--akzent); } a.zahl .dazu::after { content: " ›"; font-weight: 600; } /* ⛔ EINE KACHEL OHNE ZAHL ZEIGT KEINE ZAHL — sie zeigt einen Strich. Eine erfundene oder geschätzte Zahl wäre schlimmer als gar keine: Sie sieht aus wie eine Aussage. Der Weg dorthin steht trotzdem schon offen. */ .zahl.ungezaehlt .wert { color: #b8b3ac; font-weight: 500; } /* ── Kachelgruppen ────────────────────────────────────────────────────── ⛔ KACHELN WERDEN IN KATEGORIEN GEFÜHRT (Sebastian, 28.08.2026). Eine Reihe gemischter Kacheln liest sich als Aufzählung; eine benannte Gruppe liest sich als Bereich — und genau das ist sie, denn alle Kacheln einer Gruppe führen in dieselbe Unterseite. */ .kachelgruppe { margin: 0 0 26px; } .kachelgruppe .gruppenkopf { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--rand); padding-bottom: 7px; margin-bottom: 13px; } .gruppe { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-still); margin: 0; } .kachelgruppe .gruppenkopf a { font-size: 13px; } /* ── Karten ──────────────────────────────────────────────────────────── */ .karte { background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius); margin: 0 0 18px; } /* ── Eine Karte, die zuklappt ────────────────────────────────────────────── ⛔ NEU AM 30.08.2026 (Sebastian, mit Verweis auf VT5/VT6): *„da jetzt mehr und mehr Informationen auf die Accountseite kommen."* ⚠️ In VT6 beginnt jeder Bereich am Account ZUGEKLAPPT. Hier bleiben die tragenden Bereiche offen — zuklappen kann man sie. ⭐ `
` und kein JavaScript: Es funktioniert auch ohne. */ details.karte.klappbar > summary.kopf { cursor: pointer; list-style: none; } details.karte.klappbar > summary.kopf::-webkit-details-marker { display: none; } /* ⚠️ Das Zeichen sitzt VOR der Überschrift und dreht sich — es gehört zum Bereich, nicht zu einer Taste am Rand. */ details.karte.klappbar > summary.kopf h2::before { content: "›"; display: inline-block; width: 14px; color: var(--text-still); font-weight: 400; transition: transform .12s; } details.karte.klappbar[open] > summary.kopf h2::before { transform: rotate(90deg); } details.karte.klappbar > summary.kopf:hover h2::before { color: var(--akzent); } /* ⚠️ Zugeklappt trägt der Kopf keine Trennlinie — sonst schwebt sie unter der Karte, ohne etwas zu trennen. */ details.karte.klappbar:not([open]) > summary.kopf { border-bottom: 0; } /* ⭐ Der Sammelknopf steht rechts und ist zurückgenommen: Er ist eine Hilfe, keine Hauptsache. */ .klappzu { margin-left: auto; font-size: 12px; padding: 4px 10px; } /* ⛔ WAS IN DER KOPFZEILE STEHT, IST DAS EINZIGE, WAS MAN ZUGEKLAPPT SIEHT. ⭐ Deshalb tragen die Bereichsköpfe seit dem 31.08.2026 die Zahl, wegen der man sie öffnet: der Jahreswert bei den Verträgen, die offenen Posten bei den Belegen (Sebastian). ⚠️ Die Warnfarbe kommt zur Angabe HINZU — „überfällig" steht als Wort daneben und trägt die Aussage auch ohne sie. */ .offenposten { color: var(--text-leise); } .offenposten strong { color: var(--text); } .offenposten.mahnt, .offenposten.mahnt strong { color: var(--weg-text); } /* ⛔ `hidden` MUSS GEWINNEN, und das tut es von allein NICHT. ⚠️ Der Browser setzt `[hidden] { display: none }` in seiner eigenen Vorlage — jede Regel aus DIESER Datei schlägt sie, auch `.knopf { display: inline-block }`. ⭐ Gefunden am 30.08.2026 im gerenderten Bild: Der Sammelknopf stand da, obwohl er `hidden` trug — also genau der Knopf, der ohne JavaScript nichts tut und deshalb nicht dastehen soll. */ [hidden] { display: none !important; } .karte > .kopf, details.karte.klappbar > summary.kopf { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--rand-zart); } .karte > .kopf h2, details.karte.klappbar > summary.kopf h2 { font-size: 15px; font-weight: 600; margin: 0; } /* ⛔ ENTFERNT AM 29.08.2026 (nachts): die gestapelte Überschrift `.gestapelt` mit ihrer stillen Zeile `.kopfunter`. Sie hat einen halben Tag gehalten. ⚠️ Der Grund ihres Verschwindens ist derselbe wie der ihres Entstehens — NICHTS ZWEIMAL SAGEN (Sebastian): Die Zahl steht in der Hierarchiezeile, die Ebene sagen die Arten selbst. Übrig bleibt eine Zeile, und die ist die Überschrift. Kein Bauteil bleibt hier ohne Benutzer stehen. */ .karte > .kopf .rechts, details.karte.klappbar > summary.kopf .rechts { font-size: 13px; } .karte > .rumpf { padding: 16px 18px; } .karte > .fuss { padding: 10px 18px; border-top: 1px solid var(--rand-zart); font-size: 12px; color: var(--text-leise); background: #fbfbfa; border-radius: 0 0 var(--radius) var(--radius); } /* ── Die Sektion eines Lexware-Kundenkontos ──────────────────────────────── ⛔ NEU AM 01.09.2026 (Sebastian): *„Ich möchte also pro Kundenkonto eine Sektion mit ihren Verträgen und Belegen."* ⚠️ Vorher lagen die Belege zweier Lexware-Kunden in EINER Liste, unterschieden nur durch ein stilles „Kd. 11398" am Ende der Zeile — die Trennung war da, aber sie trennte nichts. ⛔ DIE KOPFZEILE IST KEINE KARTE, SONDERN EIN BAND DARÜBER. ⚠️ Eine dritte Rahmenebene (Konto → Verträge → Positionen) hätte drei ineinander gezeichnete Kästen ergeben; das Band trennt, ohne zu umschliessen. ⭐ Und es ist der Platz für die Lexware-Stammdaten, die später dazukommen. ⚠️ `.kontonummer` und nicht `.nr`: `.nr` ist seit dem 30.08.2026 die Artikelnummer in `.posten-kind` — geprüft mit `pruefe-klassennamen.php`, dem Werkzeug, das genau aus einem solchen Zusammenstoss entstanden ist. */ /* ⛔ EINGERÜCKT GEGEN DEN SEKTIONSREITER (Sebastian, 01.09.2026): *„ich würde die Kundenkonto etwas einrücken vom Sektionsreiter ‚Lexware-Kundenkonten'."* ⚠️ Vorher standen Reiter und Konten in derselben Flucht — die Karten sahen aus, als stünden sie NEBEN dem Kopf, nicht darunter. ⭐ Die Einrückung sagt die Zugehörigkeit, ohne dass ein Rahmen sie umschliessen muss. ⚠️ `padding-left` und nicht `margin-left`: So bleibt die rechte Kante bündig mit dem Kopf darüber, und die Beträge fluchten weiter mit allem anderen auf der Seite. */ /* ⛔ `.lizkonto` UND `.prtkonto` STEHEN IN DENSELBEN REGELN UND NICHT IN EIGENEN (05.09.2026). Ein Lizenzserver-Konto und ein Portalkonto sind dieselbe Bauform wie ein Kundenkonto: ein Band über seinen Karten. ⚠️ Eine zweite Regelgruppe mit denselben Werten liefe auseinander, sobald jemand eine von beiden anfasst — und beide sähen für sich richtig aus. ⭐ Verschieden ist nur der INHALT des Bandes. ⛔ UND SIE HEISSEN TROTZDEM VERSCHIEDEN. ⚠️ Das Portalkonto trug einen Tag lang `.lizkonto` mit — gleiche Gestaltung, gleicher Name. Prompt zählten die Proben des Lizenzteils die Portalsektionen mit und wurden rot, ohne dass am Lizenzserver etwas geschehen wäre. ⭐ Zwei Dinge, die gleich AUSSEHEN, dürfen denselben Regelblock teilen — denselben NAMEN nicht: Am Namen unterscheidet man sie, in der Anzeige wie in der Probe. ⚠️ `.prtkonto` und nicht `.prt-konto`: Es ist das dritte Glied der Familie `kundenkonto`/`lizkonto`, kein Bauteil der Portalliste (`.prt-zeile`). */ .kundenkonto, .lizkonto, .prtkonto { margin: 0 0 26px; padding-left: 22px; } .kundenkonto > .kontokopf, .lizkonto > .kontokopf, .prtkonto > .kontokopf { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 0 2px 8px; } .kundenkonto > .kontokopf h3, .lizkonto > .kontokopf h3, .prtkonto > .kontokopf h3 { font-size: 13px; font-weight: 600; margin: 0; text-transform: uppercase; letter-spacing: .06em; color: var(--text-still); } /* ⚠️ Die Nummer trägt die volle Textfarbe und Ziffern gleicher Breite — sie ist die Kennung, an der zwei Sektionen untereinander fluchten. */ .kundenkonto > .kontokopf h3 .kontonummer, .lizkonto > .kontokopf h3 .kontonummer, .prtkonto > .kontokopf h3 .kontonummer { color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: 0; } .kundenkonto > .kontokopf .rechts, .lizkonto > .kontokopf .rechts, .prtkonto > .kontokopf .rechts { font-size: 12px; } .kundenkonto > .kontokopf .neben, .lizkonto > .kontokopf .neben, .prtkonto > .kontokopf .neben { color: var(--text-leise); } /* ⚠️ INNERHALB einer Sektion stehen die Karten dichter — sie gehören zusammen. Der grössere Abstand steht ZWISCHEN den Sektionen (oben, 26 px). */ .kundenkonto .karte, .lizkonto .karte, .prtkonto .karte { margin-bottom: 10px; } .kundenkonto .karte:last-child, .lizkonto .karte:last-child, .prtkonto .karte:last-child { margin-bottom: 0; } /* ── Ein Arbeitsplatz und seine Module ───────────────────────────────────── ⛔ DIE KOPFZEILE TRÄGT FÜNF DINGE IN EINER ZEILE: Zustandszeichen, Name, sieben Modulkacheln, Stand, Klapppfeil. ⚠️ Sie muss auch dann lesbar bleiben, wenn der Name lang ist — deshalb ist er das EINZIGE, was schrumpft, und er wird gekappt statt umzubrechen. ⛔ `min-width: 0` AM NAMEN, sonst greift die Kappung nicht: Ein Flex-Element wird nie schmaler als sein längster Inhalt, solange `min-width` auf `auto` steht — die Bauregel dazu ist am 01.09.2026 an der Postenliste entstanden. */ .liz-liste { padding: 4px 0; } details.liz-ap { border-top: 1px solid var(--rand-zart); } details.liz-ap:first-child { border-top: 0; } summary.liz-apkopf { display: flex; align-items: center; gap: 12px; padding: 7px 18px; cursor: pointer; list-style: none; } summary.liz-apkopf::-webkit-details-marker { display: none; } summary.liz-apkopf:hover { background: var(--grund); } .liz-apname { flex: 1 1 auto; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ⛔ DIE VIER WERTE STEHEN IN EINEM EIGENEN RASTER MIT FESTEN SPALTEN, damit sie über die Arbeitsplätze hinweg FLUCHTEN. ⚠️ Jede Zeile ist ihr eigenes Raster — `auto`, `max-content` oder eine Flexzeile richten deshalb NICHTS aus: Sie messen je Zeile neu, und dann steht die Fassung des einen Platzes dort, wo beim nächsten der Status steht. ⭐ Deshalb `px` und `em`, und deshalb bleibt eine leere Zelle eine Zelle. ⚠️ 172px sind die sieben Kacheln (7 × 22 + 6 × 2 = 166) plus Luft; wer die Kachelbreite ändert, ändert diese Zahl mit. */ .liz-apwerte { flex: 0 0 auto; display: grid; align-items: center; grid-template-columns: 172px 13.5em 9em 9.5em; column-gap: 12px; row-gap: 2px; } .liz-apzustand { font-size: 12px; } .liz-apgesehen, .liz-apversion { font-size: 12px; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ⚠️ Auf schmalen Bildschirmen rutschen Datum und Fassung in eine zweite Zeile — UND FLUCHTEN DORT WEITER, weil das Raster dasselbe bleibt. */ @media (max-width: 1180px) { .liz-apwerte { grid-template-columns: 172px 13.5em; } } /* ⛔ DAS ZUSTANDSZEICHEN TRÄGT DIE FARBE SELBST — freistehend auf Weiss, wie die Glocke der Kaufabsichten. ⚠️ Eine Fläche mit weissem Zeichen wäre die Form des Altsystems; sie ist in einer 15-px-Zeile ein Klotz. */ .liz-puls { flex: 0 0 auto; display: inline-flex; } .liz-puls .zeichen-svg { width: 17px; height: 17px; } .liz-puls.liz-aktiv { color: var(--liz-aktiv); } .liz-puls.liz-schlaeft { color: var(--liz-schlaeft); } .liz-puls.liz-nie, .liz-puls.liz-defekt { color: var(--liz-tot); } /* ⛔ DIE MODULKACHELN SIND FLÄCHEN, und hier ist das richtig: Sie tragen zwei Buchstaben und sollen als REIHE lesbar sein — sieben freistehende Zeichen nebeneinander ergäben ein Muster, keine Angabe. ⭐ Dieselbe Form wie im Altsystem, nur in unserer Grösse. */ .liz-module { flex: 0 0 auto; display: inline-flex; gap: 2px; } .liz-m { display: inline-block; min-width: 22px; padding: 1px 3px; font-size: 10px; line-height: 14px; text-align: center; font-weight: 600; letter-spacing: .04em; border: 1px solid transparent; border-radius: 3px; } /* ⚠️ „nicht gebucht" ist STILL und trotzdem sichtbar: Der Rahmen sagt, dass die Kachel da ist; die Farbe sagt, dass nichts darin läuft. ⛔ Ohne Rahmen verschwände sie ganz, und dann fehlten in der Reihe Plätze. */ .liz-m-aus { color: #b6b2ad; border-color: var(--rand); background: #fff; } .liz-m-an { color: #2c3406; border-color: var(--liz-aktiv); background: #eef2d8; } .liz-m-ab { color: #fff; border-color: var(--liz-tot); background: var(--liz-tot); } /* ⛔ MAGENTA WIE IM ALTSYSTEM — ein Zustand ausserhalb von 0/1/2 ist ein Befund, und er soll auffallen statt still durchzurutschen. */ .liz-m-hae { color: #fff; border-color: #d6009c; background: #d6009c; } .liz-apinhalt { padding: 4px 18px 16px 45px; font-size: 13px; display: flex; flex-wrap: wrap; gap: 12px 34px; align-items: flex-start; } .liz-block h4 { margin: 0 0 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-still); } .liz-block .kennung { font-variant-numeric: tabular-nums; font-size: 12px; } /* ⛔ DER AUSGANG EINES ARBEITSPLATZES steht am Fuss des aufgeklappten Bereichs, abgesetzt durch eine Linie — er ist eine Handlung, keine Angabe. ⚠️ `flex-basis: 100%` bricht ihn im Block darüber auf eine eigene Zeile: Der Block ist ein `flex-wrap`-Behälter, und ohne das setzte sich der Fuss neben die Lizenztabelle. */ .liz-apfuss { flex: 0 0 100%; display: flex; align-items: center; gap: 12px; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--rand-zart); font-size: 12px; } .liz-apfuss .knopf { margin-left: auto; } /* ⚠️ Steht ein Name davor, gehört der Knopf trotzdem nach rechts — deshalb `margin-left:auto` am Knopf und nicht `space-between` am Behälter: Ohne Namen gäbe es sonst nichts, wovon er sich absetzen könnte. */ .liz-verwaist { display: flex; align-items: center; gap: 12px; padding: 3px 0; } .liz-verwaist .kennung { font-variant-numeric: tabular-nums; font-size: 12px; } .liz-verwaist .knopf { margin-left: auto; } /* ⚠️ Die Lizenztabelle steht in ihrem eigenen Rollbereich — die vier Spalten sind schmal, aber ein Modulname ist lang, und die Seite selbst darf nie waagerecht rollen. */ .liz-lizenzen { border-collapse: collapse; font-size: 12px; } .liz-lizenzen th { text-align: left; font-weight: 600; color: var(--text-still); padding: 2px 14px 3px 0; border-bottom: 1px solid var(--rand-zart); } .liz-lizenzen td { padding: 2px 14px 2px 0; } .liz-lizenzen td:nth-child(4), .liz-lizenzen td:nth-child(5) { font-variant-numeric: tabular-nums; } /* ⛔ DIE KACHEL TRÄGT DIE FARBE, DIE ZEILE NICHT. ⚠️ HIER STAND `.liz-lizenzen tr.liz-m-ab td { … }` — und die Klasse hing an der ``. Die BLOSSE Regel `.liz-m-ab` (für die Kachel) griff damit ebenfalls und färbte die ganze Zeile orangerot über vier Spalten; die Rücknahme auf den `td` half nicht, weil sie die `` selbst nicht erreicht. ⛔ Ein Klassenname aus einem anderen Bauteil wirkt auch dort, wo er nicht gemeint war — das ist die Kehrseite des EINEN Namensraums, und `pruefe-klassennamen.php` weist die blossen Namen genau deshalb aus. ⭐ Die Zeile eines nicht gebuchten Moduls bleibt STEHEN und wird nur still: Sie auszulassen hiesse, dass eine kurze Tabelle „wenig Module" bedeutet — und dann sähe ein Kunde mit zwei Modulen aus wie ein Datenfehler. */ .liz-lizenzen td.liz-mzelle { padding-right: 8px; } .liz-lizenzen tr:has(.liz-m-aus) td:not(.liz-mzelle) { color: var(--text-leise); } /* ⭐ DIE BLÄTTERUNG — die Richtung des Weges ist die Richtung im Bild (Sebastian, 01.09.2026: „der Weiter Button gehört hier auf die Rechte Seite"). ⛔ `margin-left:auto` statt `justify-content:space-between`: Auf der LETZTEN Seite gibt es kein „Weiter" mehr, und space-between schöbe dann die Seitenangabe nach rechts. So steht sie in allen drei Fällen an derselben Kante — links, hinter dem Zurück-Knopf, wenn es einen gibt. ⚠️ `.fuss` allein wird an neun Stellen für Verschiedenes benutzt; deshalb hängt das hier an der ZWEITEN Klasse und nicht an `.fuss`. */ .blaetterung { display: flex; align-items: center; gap: 10px; } .blaetterung > .weiter { margin-left: auto; } /* ── Tabellen ────────────────────────────────────────────────────────── */ .tab-rahmen { overflow-x: auto; } table.tab { width: 100%; border-collapse: collapse; } table.tab th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-still); padding: 11px 18px; border-bottom: 1px solid var(--rand-zart); white-space: nowrap; } table.tab td { padding: 9px 18px; border-bottom: 1px solid var(--rand-zart); vertical-align: top; } /* ── Die Postenliste: Verträge und Belege ──────────────────────────────── ⛔ ENTWURF VON SEBASTIAN, 30.08.2026 — nach drei Anläufen von mir, die er der Reihe nach zerlegt hat. Seine Diagnose der letzten Fassung: 1. „Hauptdaten und Positionen konkurrieren optisch miteinander." 2. „Beträge, Anzahl und Datum wechseln ihre visuelle Position." 3. „Im aufgeklappten Zustand fehlt eine klare Parent–Child-Hierarchie." ⭐ DIE LÖSUNG HAT VIER TEILE, und jeder beantwortet einen Punkt: 1 · VIER FESTE SPALTEN, für Verträge und Belege DIESELBEN Achsen. Der Betrag steht immer an derselben waagerechten Stelle — nur so lassen sich zwei Verträge oder zwei Rechnungen mit einem Blick vergleichen. 2 · DER AUFGEKLAPPTE BEREICH BENUTZT DAS RASTER NICHT. ⛔ Sebastian ausdrücklich: *„Die Vertragspositionen sollen nicht künstlich wieder in das Vier-Spalten-Raster der Hauptzeile gepresst werden."* Er läuft über die volle Breite, auf eigener Fläche und eingerückt. 3 · DER PFEIL SITZT AM OBJEKT, nicht hinter dem Betrag. ⚠️ *„Nicht ganz rechts hinter dem Betrag, weil der Pfeil dort leicht wie eine Aktion zum Betrag oder ein Kontextmenü wirkt."* 4 · TYP-ICON UND ZUSTAND SIND ZWEI VERSCHIEDENE ANGABEN — „Was ist das?" gegen „In welchem Zustand ist es?". ⛔ Der Zustand wird NIE allein über Farbe codiert: Zeichen + Wort, Farbe nur unterstützend. ⛔ `
` UND KEIN JAVASCRIPT — beliebig viele gleichzeitig offen, alle standardmäßig zu, keine Nachladerei. ⚠️ Ein Accordion, das beim Öffnen das vorige schliesst, wäre genau das Gegenteil dessen, wofür man aufklappt: *„die Rechnungen von 2024 und 2025 gleichzeitig öffnen, um deren Positionen miteinander zu vergleichen."* */ /* ⛔ NICHT GLEICHMÄSSIG (Sebastian, 30.08.2026): *„Die erste Spalte braucht bewusst viel Raum, weil dort Name, Nummer und Dokumentidentität sitzen."* 52 % · 15 % · 17 % · 16 % — in `fr`, damit es mitwächst. */ .postenliste { --spalten: 52fr 15fr 17fr 16fr; } /* ⭐ FÜNF ACHSEN — die Liste über ALLE Kaufabsichten (A-2.4, Sebastian 01.09.2026). ⛔ Die erste Spalte darf hier deutlich schmaler sein als in den Listen des Aktenbestands: Dort trägt sie Name, Nummer und Identität des Dokuments, hier nur ein Zeichen, eine Pille und die Angebotsnummer. ⚠️ Der ACCOUNT bekommt dafür den meisten Raum — er trägt drei Zeilen, und Gebietsnamen sind lang („Verwaltungsgemeinschaft Schöllkrippen (VGem)"). */ .postenliste.mit-vorgang { --spalten: 20fr 12fr 20fr 17fr 21fr 10fr; } /* ⛔ HIER STAND `.ka-kampagne` — die einzeilige Kappung des Kampagnennamens (01.09.2026, vormittags). ⚠️ Am selben Tag ist die Kampagne aus der Liste gefallen (Sebastian: „irrelevant, so lange ich sie nicht filtere"), und damit ihr letzter Benutzer. ⛔ Ein Bauteil ohne Benutzer bleibt nicht stehen — sonst sieht es beim naechsten Lesen aus wie ein Angebot. ⭐ WAS BLEIBT, IST `min-width: 0` weiter unten: Die Kappung scheiterte nicht an der Ellipse, sondern daran, dass eine Rasterzelle nie schmaler wird als ihr Inhalt. Diese Erkenntnis gilt fuer JEDE lange Zelle, nicht nur fuer Kampagnennamen. */ /* ⭐ Die ZWEITE Zeile der Kennungsspalte — „zuletzt geaendert". Sie gehoert zum Objekt, nicht zum Vorgang. ⛔ ZWEI STELLEN, EINE ZAHL: Die 20 px sind der Pfeil (9) plus die Luecke der Kennungszeile (11) — nur so beginnt sie an derselben Kante wie die Pille darueber (Sebastian, 01.09.2026: „linksbuendig uebereinander"). Aendert sich eines von beiden in `.posten .kennung`, muss diese Zahl mitgehen. */ .posten .kennungzusatz { display: block; padding-left: 20px; margin-top: 3px; color: var(--text-leise); font-size: 13px; } /* ⛔ OHNE DIES KAPPT NICHTS. Eine Rasterzelle hat `min-width: auto` und wird damit NIE schmaler als ihr laengster Inhalt — der Kampagnenname schob die Kontaktspalte nach rechts, obwohl `.ka-kampagne` sauber auf `ellipsis` stand (Sebastian, 01.09.2026: „laeuft noch zu lang und schiebt Kontakt nach rechts"). ⭐ Erst `min-width: 0` laesst die Spalte ihre `fr`-Breite annehmen; dann greift die Kappung. ⚠️ Bewusst NUR fuer diese Liste: Die vier Listen des Aktenbestands sind unveraendert, und was dort heute richtig steht, wird nicht auf Verdacht angefasst. */ .postenliste.mit-vorgang .postenkopf > span, .postenliste.mit-vorgang .posten > summary > span, .postenliste.ka-vorgang .postenkopf > span, .postenliste.ka-vorgang .posten > summary > span { min-width: 0; } /* ⛔ IN DIESER LISTE STEHEN DIE ANGABEN UNTEREINANDER, NICHT NEBENEINANDER. Bei vier Achsen ist eine Zeile mit Trennern richtig — bei fünf sind die Spalten zu schmal, und dieselben Angaben brächen unkontrolliert um. ⚠️ Es ist eine Regel der LISTE, nicht der Zelle: Deshalb hängt sie am Behälter und nicht an einer zweiten Klasse in jeder Zelle. */ /* ⭐ `ka-vorgang` IST DIE KAUFABSICHTSLISTE AM ACCOUNT (01.09.2026). Sie hat VIER Achsen, nicht sechs — die Spalte ist also breit genug fuer eine Zeile mit Trennern. ⛔ Sie bekommt die Spaltenform trotzdem, und zwar aus einem anderen Grund: Vier Angaben mit `·` liefen dort UM und brachen mitten im Wort („ohne geplante / Kontaktaufnahme"). ⚠️ Ein Umbruch, den der Text nicht vorgesehen hat, liest sich wie eine Trennung, die keine ist. */ .postenliste.mit-vorgang .posten .womit, .postenliste.ka-vorgang .posten .womit { flex-direction: column; align-items: flex-start; gap: 3px; } /* ⛔ WAS FEHLT, IST ROT — und zwar im ruhigen Rot, nicht im Mahnrot (Sebastian, 01.09.2026: „Kaufabsichten ohne Abschlussdaten sind ja die offenen Vertriebsaufgaben, unbedingt rot markieren!"). ⚠️ `--ka-mahnt` bleibt allein dem ÜBERFÄLLIG — zwei Rots für zwei verschiedene Aussagen in derselben Zeile wären keines von beiden. ⭐ Die Klasse stand vorher schon im Markup („ohne Gebiet"), war aber NIRGENDS gestaltet — sie hat nichts getan. */ /* ⚠️ Die Regel dazu steht WEITER UNTEN, direkt hinter `.posten .womit .neben` — siehe die Begründung dort. Hier stand sie bis zum 01.09.2026 und hat NICHTS getan. */ .postenkopf, .posten > summary, .postenfuss { display: grid; grid-template-columns: var(--spalten); gap: 0 20px; align-items: baseline; padding: 10px 18px; } .postenkopf { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-still); border-bottom: 1px solid var(--rand-zart); } .posten { border-bottom: 1px solid var(--rand-zart); } .postenliste > .posten:last-of-type { border-bottom: 0; } /* ⭐ DIE GANZE ZEILE IST DER KLICKBEREICH (Sebastian). */ .posten > summary { cursor: pointer; list-style: none; } .posten > summary::-webkit-details-marker { display: none; } .posten > summary:hover { background: #fbfbfa; } .posten.leer > summary { cursor: default; } .posten.leer > summary:hover { background: transparent; } /* ── Spalte 1: Typ-Icon · Pfeil · Nummer, darunter die Einordnung ───────── */ /* ⛔ SIE HIESS BIS ZUM 30.08.2026 `.wer` — UND DAS WAR EIN ECHTER FEHLER, den Sebastian als „komischer Streifen" gesehen hat. ⚠️ `.wer` ist seit dem ersten Tag die BENUTZERZEILE in der dunklen Leiste (Zeile 112) und trägt `border-top: 1px solid #2a2825` — eine dunkle Linie, gedacht für dunklen Grund. Auf der weissen Karte zog sie einen schwarzen Strich über die Breite der ersten Spalte, und die Polsterung von 14/16 px kam gratis dazu. ⛔ DIE LEHRE, DIE TEURER IST ALS DER FEHLER: In EINER Gestaltungsdatei sind Klassennamen ein globaler Namensraum. Ein Name wie `.wer` oder `.titel` ist nicht frei, nur weil er an dieser Stelle passt. ⭐ Namen, die nach einem BAUTEIL klingen, gehören dem Bauteil — neue bekommen ein Präfix. */ /* ⛔ EIN VERTRAG SOLL WIE EIN VERTRAG AUSSEHEN, nicht wie eine Tabellenzeile. Sebastian, 30.08.2026: *„Im alten System hatte man dagegen sofort das Gefühl: Das hier ist ein Vertrag. Genau diese Objekthaftigkeit würde ich zurückholen."* ⭐ Das Mittel ist ein QUADRATISCHES FELD um das Zeichen — 34 px, ruhiger Grund, feiner Rand. ⚠️ Ein nacktes Zeichen in der Zeile war zu wenig: Es las sich als Aufzählungspunkt, nicht als Dokument. */ .posten .kennung { display: flex; align-items: center; gap: 11px; min-width: 0; } .posten .kennung .nummer { font-weight: 600; font-size: 15px; } .posten .objektfeld { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--rand); background: var(--karte); display: flex; align-items: center; justify-content: center; color: var(--text-leise); } .posten .objektfeld .zeichen-svg { width: 17px; height: 17px; } /* ⚠️ Beendetes und Storniertes tritt zurück — auch im Objektfeld. */ .posten.aus .objektfeld { background: transparent; color: var(--text-still); } /* ⛔ HIER STAND ZWEI STUNDEN LANG DAS GEFAERBTE QUADRAT (01.09.2026) — vier Regeln fuer `.objektfeld.ja/.offen/.mahnt/.aus`. ⚠️ Sie sind gefallen, weil die Antwort eine andere war: *„Zeichen nach vorne, aber deutlicher und größer, so wie in Kaufabsichten"* (Sebastian). ⭐ Also nicht ein buntes Kästchen, sondern die FREISTEHENDE Bauform, die es seit dem 31.08.2026 schon gibt — 48 px, ohne Kasten, mit Farbe. ⚠️ `.posten.aus .objektfeld` bleibt: Das Quadrat traegt jetzt nur noch die Kuendigungen, und dort ist die stille Zeile weiter richtig. ⚠️ Das Zustandswort „Offen" behaelt seine Farbe — es war als einziges der fuenf Zustaende farblos und las sich dadurch wie eine Nebenbemerkung, obwohl es eine offene Forderung ist. */ .zustand.offen .zeichen, .zustand.offen .wort { color: var(--warn-text); } /* ── Das FREISTEHENDE Zeichen: Kaufabsichten ──────────────────────────── ⛔ 48 PX ÜBER BEIDE TEXTZEILEN, OHNE KASTEN (Sebastian, 31.08.2026: „alleinstehend, zeilenführend, über zwei Inhaltszeilen") — dieselbe Bau- form und dieselbe Grösse wie das Sektorzeichen in der Accountliste. ⚠️ Es steht NEBEN dem Textblock, nicht in der Kennungszeile: Nur so kann es beide Zeilen überspannen statt die erste in die Höhe zu ziehen. ⛔ UND DIE ZEILE RICHTET SICH DANN MITTIG AUS, nicht an der Grundlinie — sonst hinge ein 48-px-Zeichen an der Oberkante und risse die Zeile auf. */ .posten.zeichenfuehrend > summary { align-items: center; } .posten .kennungsspalte.mitzeichen { display: flex; align-items: center; gap: 14px; min-width: 0; } .posten .kennungsspalte.mitzeichen .kennungstext { min-width: 0; } /* ⛔ HIER STAND `.artzeile` — die Pille als EIGENE Zeile über der Nummer (31.08.2026). ⚠️ Sie ist am 01.09.2026 gefallen, weil sie die Kennungsspalte als einzige DREIZEILIG machte: Die Pille steht jetzt VOR der Nummer, in derselben Zeile (Sebastian). Die Regel ist mit ihrem Bauteil weg — ein Bauteil ohne Benutzer bleibt nicht stehen. ⭐ Die Einrückung lebt weiter, nur an der dritten Zeile: siehe `.kennungzusatz`. */ /* ⚠️ Stiller als eine Zustandspille: Die Art ist eine EINORDNUNG, keine Meldung — sie darf die Farbe des Zeichens nicht überschreien. ⭐ `belegart` KOMMT SEIT DEM 01.09.2026 DAZU. Sie hatte bis dahin gar keine eigene Regel und lief auf der Grundpille mit 12 px — das ging, solange sie in Spalte 3 unter ihresgleichen stand. ⛔ Jetzt steht sie neben einer 15-px-Überschrift („Rechnung [aus Abo]"), und dort ist dieselbe Zurück- nahme nötig wie bei `art`: Die Marke qualifiziert die Überschrift, sie tritt nicht neben sie. */ .pille.art, .pille.belegart { background: var(--grund); border-color: var(--rand); color: var(--text-leise); font-weight: 600; font-size: 11px; padding: 2px 9px; } .posten .zeichenfrei { flex: 0 0 auto; display: inline-flex; } .posten .zeichenfrei .zeichen-svg { width: 48px; height: 48px; } /* ⛔ DREI AUSSAGEN, NICHT ACHT: läuft · gewonnen · überfällig · erloschen. Welcher Zustand welche trägt, entscheidet `ka_farbe()` — nicht diese Datei. ⚠️ `gewonnen` trägt heute denselben Ton wie `laeuft`; getrennt benannt, damit es sich trennen lässt, ohne hier zu suchen. */ .posten .zeichenfrei.laeuft { color: var(--ka-laeuft); } .posten .zeichenfrei.gewonnen { color: var(--ka-gewonnen); } .posten .zeichenfrei.mahnt { color: var(--ka-mahnt); } .posten .zeichenfrei.aus { color: var(--text-still); } /* ⛔ ZWEI TOENE MEHR SEIT DEM 01.09.2026, weil die Belege dieselbe Bauform bekommen haben (Sebastian: *„Zeichen nach vorne, aber deutlicher und größer, so wie in Kaufabsichten"*). ⚠️ `offen` gibt es bei den Kaufabsichten nicht: Dort ist ein Vorgang entweder im Plan oder ueberfaellig. Eine Rechnung dagegen kann ausstehen, ohne dass die Frist um ist — VT5 malte JEDE unbezahlte gelb (index.php:10919), weil es die Mahnstufe nicht kannte. ⭐ Wir trennen: Gelb heisst „steht aus", Rot „die Frist ist um". ⚠️ `neutral` ist KEIN Zustand, sondern das Fehlen eines — Angebot, Auftragsbestaetigung und Lieferschein werden nicht bezahlt. ⛔ Es ist HELLER als `aus`: „hat keinen Zahlungsstand" ist nicht dasselbe wie „erledigt", und zwei Grautoene sind billiger als ein falsches Wort. */ .posten .zeichenfrei.offen { color: var(--warn-text); } .posten .zeichenfrei.neutral { color: var(--text-leise); } /* ⚠️ Das Icon ist ein visueller ANKER, kein Schmuck: Es macht eine lange Liste scannbar, ohne dass man Wörter lesen muss. Es sitzt an der Grundlinie der Nummer, nicht zentriert — sonst tanzt es bei zweizeiligen Zellen. */ .posten .pfeil { flex: 0 0 auto; color: var(--text-still); font-size: 11px; width: 9px; } .posten.leer .pfeil { visibility: hidden; } /* ⚠️ Die zweite Zeile flieht mit der NUMMER, nicht mit dem Feld — sonst entsteht eine zweite Kante, die nichts bedeutet. */ .posten .dazu { display: block; color: var(--text-leise); font-size: 12px; margin-top: 1px; padding-left: 54px; } /* ── Spalte 2: der Zustand — Zeichen UND Wort ───────────────────────────── */ .zustand { display: block; font-size: 13px; } .zustand .zeichen { display: inline-block; width: 12px; font-weight: 700; } .zustand .wort { font-weight: 600; } .zustand .wann { color: var(--text-leise); } /* ⛔ IN DER KAUFABSICHTENZEILE STEHT DAS WANN AUF EIGENER ZEILE (Sebastian, 31.08.2026: „da darfs gerne zweizeilig sein, so dass der Status in einer Zeile alleine steht"). ⭐ Der Zustand ist dort die Aussage, das Datum seine Fussnote — nebeneinander liest sich beides als ein Satz. ⚠️ NUR DORT: Verträge, Belege und Kündigungen behalten die eine Zeile. Ihre Zustandsspalte ist schmaler beschriftet („Laufend seit …"), und die Aktenbestandsliste ist die, deren Höhe wir bewusst klein halten. */ .posten.zeichenfuehrend .zustand .wann { display: block; margin-top: 2px; } /* ⛔ FARBE NUR UNTERSTÜTZEND (Sebastian): „Farbe allein ist als Information zu schwach und hinsichtlich Accessibility problematisch." Das Zeichen und das Wort tragen die Aussage auch in Graustufen. */ .zustand.ja .zeichen, .zustand.ja .wort { color: var(--gut-text); } .zustand.mahnt .zeichen, .zustand.mahnt .wort { color: var(--weg-text); } .zustand.aus { color: var(--text-still); } .zustand.aus .wort { font-weight: 600; } /* ── Spalte 3: Umfang bzw. Art und Bezug ────────────────────────────────── */ .posten .womit { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px; } .posten .womit .neben { color: var(--text-leise); font-size: 13px; } /* ⛔ WAS FEHLT ODER ZU ALT IST, IST ROT — und diese Regel muss HINTER `.posten .womit .neben` stehen und SPEZIFISCHER sein als sie. ⚠️ SIE HAT EINEN HALBEN TAG LANG NICHTS GETAN. Sie stand oben bei der Postenliste, also VOR dieser Zeile, und `.posten .womit .fehlt` hat dieselbe Spezifität wie `.posten .womit .neben` (drei Klassen) — bei Gleichstand gewinnt die spätere Regel. Ein Element mit `class="neben fehlt"` blieb damit grau. ⛔ Das Markup war die ganze Zeit richtig; nur das Bild war es nicht (Sebastian, 01.09.2026: „ich sehe immer noch keinen Warnhinweis"). ⭐ DESHALB BEIDES: die spätere Stelle UND `.neben.fehlt` mit vier Klassen. Eine der beiden Absicherungen allein wäre wieder von einer Umstellung abhängig. ⚠️ `--weg-text` und nicht `--ka-mahnt`: Das Mahnrot gehört allein dem überfälligen Vorgang. Zwei Rots für zwei Aussagen in einer Zeile wären keines von beiden. */ .posten .womit .neben.fehlt, .posten .womit .fehlt, .karte .neben.fehlt { color: var(--weg-text); } /* ── Spalte 4: der Betrag — die eine Blickachse ─────────────────────────── */ .posten .betrag, .postenkopf .betrag, .postenfuss .betrag { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .posten .betrag .wert { font-weight: 600; } .posten .betrag .je { display: block; color: var(--text-still); font-size: 11px; } /* ⚠️ Ein Betrag, der nicht in die Summe darunter eingeht, ist still — sonst addiert das Auge etwas mit, was die Fusszeile nicht addiert. */ .posten .betrag.still .wert { font-weight: 400; color: var(--text-still); } /* ── Der aufgeklappte Bereich ─────────────────────────────────────────────── ⛔ ER BENUTZT DAS RASTER NICHT (Sebastian). Volle Breite, eigene Fläche, eingerückt und mit einer senkrechten Linie am linken Rand — damit bei mehreren offenen Belegen auf einen Blick klar bleibt, welche Positionen zu welchem Dokument gehören. */ /* ── DIE KLAMMER ─────────────────────────────────────────────────────────── ⛔ DER WICHTIGSTE PUNKT (Sebastian, 30.08.2026): *„Das Detail hängt optisch etwas frei unter der Zeile … Ich würde Parent und Child viel stärker verbinden."* ⭐ DREI MITTEL ZUSAMMEN, und keines davon laut: 1. eine senkrechte Linie, die unter dem OBJEKTFELD ansetzt und bis zum Ende der Positionen läuft — sie ist die Klammer; 2. eine leicht abgesetzte Fläche über Kopf UND Detail, damit beides EIN Block ist und nicht zwei; 3. die Überschrift, die sagt, wovon die Rede ist. ⚠️ Die Linie sitzt mittig unter dem Objektfeld: Sie sieht dadurch aus, als käme sie aus dem Dokument heraus — und genau das soll sie sagen. ⛔ Entscheidend wird das erst, wenn MEHRERE offen sind. */ .posten[open], .posten[open] > summary { background: var(--grund); } .posten-kinder { padding: 0 18px 14px 18px; } /* ⚠️ NICHT `.titel` UND NICHT `.inhalt` — beide sind vergeben: `.titel` ist die Seitenüberschrift (23 px), `.inhalt` die Hauptspalte der Seite MIT `padding: 26px 30px 40px`. ⛔ Der zweite hätte hier eine 40-px-Fussfläche in jeden aufgeklappten Beleg gezogen — derselbe Fehler wie `.wer`, nur unauffälliger, weil er nur Luft erzeugt und keine Linie. */ .posten-kinder > .ueberschrift { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-still); margin: 0 0 6px 51px; } /* ⛔ DER AUFGEKLAPPTE BEREICH IST SCHMALER ALS DIE ZEILE (Sebastian, 01.09.2026): *„die Mengen und Einzelpositionspreise näher zu den Einzelpositionen nach links, sonst muss das Auge soweit wandern."* ⚠️ Vorher lief das Detailraster ueber die volle Breite: „1 ×" und „150 €" standen ganz rechts, dreissig Zentimeter neben ihrer Position. Das ist bei der HAUPTZEILE richtig — dort fluchten die Betraege ueber die ganze Liste, und genau dafuer ist sie gebaut. Bei den Positionen gibt es nichts zu vergleichen: Man liest EINE Position und ihren Preis. ⭐ Deshalb wird der BEHAELTER begrenzt und nicht das Raster geaendert. Die drei Spalten muessen untereinander fluchten (jede Positionszeile ist ihr eigenes Grid); `max-content` in der ersten Spalte haette sie gegeneinander verschoben — jede Zeile waere anders breit. */ .posten-kinder > .positionen { border-left: 2px solid var(--rand); margin-left: 16px; padding-left: 33px; max-width: 820px; } /* ⛔ DER TEXT ÜBER DEN POSITIONEN — heute der Grund einer Kündigung und ihre Herkunft. ⚠️ Er steht INNERHALB derselben Klammer wie die Positionen, sonst zerfällt der aufgeklappte Bereich in zwei Blöcke, die nichts miteinander zu tun zu haben scheinen. */ .posten-kinder > .vortext { border-left: 2px solid var(--rand); margin-left: 16px; padding: 0 0 8px 33px; } .posten-kinder > .vortext p { margin: 0 0 4px 0; font-size: 13px; } .posten-kinder > .vortext .grund { color: var(--text); } /* ⛔ EINZEILIG. ⚠️ Der Kündigungsgrund ist ein Satz, die Spalte ist 16 % breit: Ohne diese Regel zog er die Zeile auf drei Zeilen Höhe und brach das Vier-Spalten-Raster, das für alle Bereiche gilt. ⭐ Der volle Text steht im aufgeklappten Bereich — hier steht nur, dass es einen gibt. */ .posten .womit .grundkurz { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ⛔ EIN ANDERES RASTER ALS DIE HAUPTZEILE, und das ist Absicht (Sebastian): *„Das Detailraster ist ein anderes Raster … Das muss nicht mit den vier Hauptspalten fluchten."* ⚠️ Es dorthin zu zwingen wäre genau der Fehler, gegen den Punkt 1 seiner Diagnose ging: Dann konkurriert das Detail mit dem Kopf, statt ihm zu dienen. Beschreibung flexibel · Menge 80 · Betrag 110. */ .posten-kind { display: grid; grid-template-columns: minmax(0, 1fr) 80px 110px; gap: 0 16px; align-items: baseline; padding: 4px 0; font-size: 13px; color: var(--text-leise); } .posten-kind + .posten-kind { border-top: 1px solid var(--rand-zart); } .posten-kind .nr { color: var(--text-still); font-variant-numeric: tabular-nums; margin-right: 9px; } .posten-kind .menge, .posten-kind .betrag { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .posten-kind.summe { border-top: 1px solid var(--rand); margin-top: 3px; padding-top: 7px; color: var(--text); font-weight: 600; } .postenfuss { border-top: 1px solid var(--rand); background: #fbfbfa; font-weight: 600; border-radius: 0 0 var(--radius) var(--radius); } /* ⛔ SCHMAL WIRD NICHTS WEGGELASSEN, nur umgestapelt: Zustand und Art rutschen unter die Nummer, der BETRAG bleibt rechts. ⚠️ Die eine Flucht, auf die es ankommt, überlebt damit auch das Telefon. */ @media (max-width: 900px) { .postenliste { --spalten: minmax(0, 1fr) 110px; } .postenkopf > .zustandsspalte, .postenkopf > .womitspalte { display: none; } .posten > summary > .betrag, .postenfuss > .betrag { grid-column: 2; grid-row: 1; } .posten > summary > .zustandsspalte, .posten > summary > .womitspalte { grid-column: 1; padding-left: 31px; } } /* ── Das vierspaltige Raster für Angaben ───────────────────────────────── ⛔ ES ERSETZT DIE ANGABENTABELLE MIT BESCHRIFTUNGSSPALTE. Sebastian, 30.08.2026: *„400px für Name und Typ des Accounts + ein paar Infos zum Gebiet, viel zu groß."* ⚠️ Drei Angaben in drei Tabellenzeilen sind drei mal 50 px plus eine 190-px-Spalte, die nichts trägt ausser Wörtern. ⭐ Dasselbe Raster wie bei den Gebieten — vier Spalten, und jede Angabe ist ein kleiner Block: Beschriftung oben klein, Wert darunter. */ /* ── Der Kopf aus VIER KACHELN ─────────────────────────────────────────── ⛔ ENTWURF SEBASTIAN, 30.08.2026: *„Wir orientieren uns an der Vier-Kachel- Optik der Gebietsnavigation."* ⭐ Account und Gebiet tragen denselben Kopf — man lernt ihn einmal. ⚠️ Die Kacheln sind dieselben `.zahl`-Flächen wie in der Gebietsnavigation; nur der INHALT der ersten ist ein anderer. ⛔ Eine zweite Kachelart wäre genau die Doppelung, gegen die dieser Umbau ging. ⚠️ `.wert` ist dort 30 px gross — für eine ZAHL. Ein NAME in 30 px bricht um und sprengt die Kachel; deshalb `.wert.name`. */ .kopfkacheln .wert.name { font-size: 19px; line-height: 1.25; font-variant-numeric: normal; } /* ⛔ DIE NADEL FÜHRT AUF DIE KARTE, an genau diesen Account. ⚠️ Sie steht IN der Namenszeile, nicht darunter: Eine Zeile, die nur manchmal da ist, verschiebt alles unter ihr — und die Nadel gibt es nur, wo die Karte den Account auch zeigen kann. ⭐ STILL, BIS MAN HINSIEHT: Sie ist eine Abkürzung, keine Aussage über den Account, und darf die Kachel nicht anführen. */ /* ── Das ⋮ in der vierten Kopfkachel (`A-1.1`, `A-5.5`) ──────────────────── ⛔ ES SITZT RECHTS OBEN IN DER KACHEL, nicht in der Textflucht. ⚠️ `.zahl` ist keine Flexzeile wie eine Listenzeile — das ⋮ bekommt deshalb hier seine Lage, während Aussehen und Klappblatt aus `.zeilenmenue` kommen. ⭐ Die Kachel wird dafür zum Bezugsrahmen; ohne `position: relative` hinge das Menüblatt am nächsten positionierten Vorfahren, und das ist die Seite. ⚠️ Die Breitenvorgabe aus `.zeilenmenue` (1.9em, für die Flucht in einer Zeile) wird zurückgenommen — hier steht es frei. */ .kopfkacheln .zahl { position: relative; } .kopfkacheln .zeilenmenue { position: absolute; top: 10px; right: 10px; width: auto; } /* ⚠️ Die Kachel trägt rechts oben nichts anderes; der Platz ist frei. Damit der Text nicht darunterläuft, endet er vorher. */ .kopfkacheln .zahl > .wert.name { padding-right: 26px; } .kopfkacheln .kartennadel { display: inline-flex; margin-left: 7px; vertical-align: -2px; color: var(--text-still); text-decoration: none; } .kopfkacheln .kartennadel:hover, .kopfkacheln .kartennadel:focus-visible { color: var(--akzent); } .kopfkacheln .kartennadel .zeichen-svg { width: 15px; height: 15px; } .kopfkacheln .wer-kachel { display: flex; align-items: center; } .kopfkacheln .wer-name { display: flex; align-items: center; gap: 13px; min-width: 0; } /* ⛔ DER ZEICHENKASTEN IM KOPF MUSS QUADRATISCH SEIN (Sebastian, 31.08.2026): *„das Geo-Symbol muss noch quadratisch, dann matcht das langsam mit der Optik."* ⚠️ Er war es nicht, und der Grund war eine stille Falle: `flex: 0 0 40px` setzt die BASIS auf 40 px, die Regel darüber setzt `height: 76px` — in einem Flexbehälter schlägt die Basis die Breite, also stand dort ein 40×76-Hochkant-Kasten mit einem 64-px-Zeichen darin, das oben und unten herausragte. ⭐ DIE EINFACHSTE BERICHTIGUNG IST, DIE ÜBERSCHREIBUNG WEGZULASSEN: Dann gilt wieder `.titelzeichen` selbst — 76×76 mit einem 64-px-Zeichen, und das ist genau die Grösse, die Sebastian am 31.08.2026 für den Accountkopf bestellt hat (*„im Kopfbereich eines Accounts würde ich die Symbole gerne 64x64 setzen"*). ⚠️ Eine Regel weniger, und beide Köpfe tragen dasselbe Quadrat. */ /* ⚠️ In der ersten Kachel steht die Einordnung ÜBER dem Namen — wie in der zweiten. ⛔ Die Beschriftung sitzt dort ohne den Abstand, den sie in einer Kennzahlkachel hat: Sie gehört zum Namen, nicht zur Kachel. */ .kopfkacheln .wer-name .label { margin-bottom: 2px; } .kopfkacheln .wer-name .dazu { margin-top: 3px; } .kopfkacheln .fehlt { color: var(--weg-text); } /* ⚠️ Zwei Zeilen in der Fussangabe einer Kachel: Kundennummern und Accountnummer. ⛔ Nebeneinander trennte derselbe Punkt die Nummern voneinander UND von der Accountnummer (Sebastian, 31.08.2026). */ .kopfkacheln .dazu > div + div { margin-top: 2px; } /* ⛔ DIE ERSTE KACHEL IST KEINE KACHEL (Sebastian, 30.08.2026): *„es soll quasi aussehen, als stehe der Inhalt auf dem Hintergrund."* ⭐ Sie trägt die IDENTITÄT der Seite und steht damit auf derselben Ebene wie die Überschrift, die sie ersetzt hat — eine Fläche daruntergelegt machte aus dem Namen eine Kennzahl unter Kennzahlen. ⚠️ Das ZEICHEN behält seinen eigenen Kasten: Es ist das einzige Bild im Kopf und braucht seine Kante, sonst schwimmt es. */ .kopfkacheln .zahl.blank { background: transparent; border-color: transparent; padding-left: 0; } /* ⚠️ ZWEI ZAHLEN IN EINER KACHEL (Sebastian, 30.08.2026) — und beide bleiben ein Weg in ihre Liste. ⛔ Die KACHEL ist deshalb kein Verweis mehr: Ein Klick daneben hätte in die falsche der beiden Listen geführt. */ .kopfkacheln .wert.zweizahl { display: flex; align-items: baseline; gap: 9px; } .kopfkacheln .wert.zweizahl a { color: inherit; text-decoration: none; } .kopfkacheln .wert.zweizahl a:hover { color: var(--akzent); text-decoration: underline; } /* ⛔ HIER STAND `.zweizahl a.betont` — die zweite Zahl in Akzentfarbe. ⚠️ ENTFERNT AM 01.09.2026 (Sebastian): *„bitte das orange als Akzentfarbe raus, sowohl in der zweiten Kachel, als auch beim Button Untergebiete."* ⭐ Sie hob eine der beiden Zahlen hervor, ohne dass es dafuer einen Grund gab: Beide sind Wege in ihre Liste, keine ist die wichtigere. ⛔ Orange bleibt dem vorbehalten, was WIRKLICH auffallen soll — sonst wird es zur Grundfarbe und hoert auf, etwas zu sagen. */ .kopfkacheln .wert.zweizahl a.ungezaehlt { color: #b8b3ac; font-weight: 500; } .kopfkacheln .wert.zweizahl .teiler { color: #c9c5bf; font-weight: 400; font-size: 20px; } /* ⛔ AN DIE KANTEN GESPREIZT (Sebastian, 31.08.2026): links, was auf dieser Ebene liegt — rechts, was mit allen Untergebieten zusammenkommt. ⭐ DAS IST DIE ACHSE DER GANZEN SEITE, nicht eine Ausrichtung: An genau diesen beiden Kanten stehen unten in jeder Gebietszeile die zwei Knöpfe (siehe `.minikacheln`). Wer einmal weiss, was links und was rechts bedeutet, liest 26 Zeilen ohne Beschriftung. ⚠️ Die Beschriftung geht MIT — sonst zeigte der Text nach links und die Zahl, zu der er gehört, nach rechts. */ .kopfkacheln .gespreizt { display: flex; justify-content: space-between; gap: 12px; } .kopfkacheln .dazu.gespreizt > span:last-child { text-align: right; } /* ⛔ ZWEIZEILIG IN KACHEL 1: OBEN DIE PILLE, UNTEN DER NAME (Sebastian, 31.08.2026). ⚠️ Nebeneinander schob das Abzeichen den Namen je nach Ebenenwort verschieden weit nach rechts — „STADTKREIS" ist breiter als „STAAT" —, und der Name begann auf jeder Gebietsseite woanders. ⭐ Damit steht Kachel 1 wie am Account: kleine Einordnung, darunter der Name. */ .kopfkacheln .einordnung { margin-bottom: 5px; } /* ⭐ DAS ZEICHEN DES MARKTES IM QUADRAT VOR DEM NAMEN — dieselbe Bauform wie das Objektfeld einer Belegzeile, nur grösser. ⛔ Es beantwortet die Frage VOR dem ersten Satz am Telefon: „mit wem spreche ich?" */ .titel.mitzeichen { display: flex; align-items: center; gap: 12px; } /* ⛔ 64 PIXEL IM ACCOUNTKOPF (Sebastian, 31.08.2026): *„im Kopfbereich eines Accounts würde ich die Symbole gerne 64x64 setzen."* ⚠️ Das Feld ist entsprechend grösser — es ist das einzige Bild im Kopf und trägt die Identität der Seite. */ .titelzeichen { flex: 0 0 76px; width: 76px; height: 76px; border-radius: 18px; border: 1px solid var(--rand); background: var(--karte); display: flex; align-items: center; justify-content: center; color: var(--text-leise); } /* ⛔ DAS GRUNDMASS DES ZEICHENVORRATS — eingezogen am 31.08.2026, aus einem Fehler auf dem Bildschirm. `crm_zeichen()` liefert ein `` OHNE `width` und `height`; ein solches SVG nimmt die volle Breite seines Behälters. ⚠️ Solange jede Stelle ihre eigene Grössenregel mitbrachte, fiel das nicht auf. Der erste Ort ohne eigene Regel — die Vorgangsspalte der Kaufabsichten (A-2.3) — bekam Fahne und Telefonhörer BILDSCHIRMFÜLLEND. ⭐ `1em` ist das richtige Grundmass: Ein Zeichen im Fliesstext ist so gross wie der Text daneben. Alle bisherigen Regeln sind spezifischer und gewinnen weiterhin — geprüft, nicht angenommen. ⛔ Ein Vorrat, dessen Bauteile ohne Regel kaputtgehen, ist eine Falle für den Nächsten. Die Regel gehört an den Vorrat, nicht an jeden Aufrufer. */ .zeichen-svg { width: 1em; height: 1em; flex: 0 0 auto; vertical-align: -.13em; } .titelzeichen .zeichen-svg { width: 64px; height: 64px; } /* ⛔ DIE ABLAGE IST KEIN BAUTEIL. Sie hält die Zeichnungen, auf die die Zeilen verweisen, und darf keinen Platz einnehmen — auch nicht einen halben Zeilenabstand. */ .zeichenablage { position: absolute; width: 0; height: 0; overflow: hidden; } /* ⛔ 48 PIXEL IN DER LISTE, ÜBER ALLE ZEILEN DER ZELLE (Sebastian, 31.08.2026). ⚠️ Vorher stand es 15 px gross vor dem Namen und war Beiwerk; jetzt ist es die erste Angabe der Zeile. */ .accountzelle { display: flex; align-items: center; gap: 12px; min-width: 0; } .accountzelle .accounttext { min-width: 0; } .sektorzeichen { flex: 0 0 auto; color: var(--text-still); display: inline-flex; } .sektorzeichen.gross .zeichen-svg { width: 48px; height: 48px; } /* ⛔ DIE PILLENZEILE — und seit dem 01.09.2026 stehen NUR Pillen darin (Sebastian: *„In Liste Accounts ein Zeilenumbruch nach den Pillen [Kunde] [Key Account]"*). ⚠️ Hier stand seit dem 31.08.2026 auch die Einordnung, ausdrücklich um die dritte Zeile zu sparen. ⭐ Die Rechnung hat sich geändert, nicht die Regel: Damals war es EINE Pille, heute steht die Key-Account-Pille mit NAMEN daneben — und die Zeile las sich als ein Fluss aus drei Aussagen. */ .einordnungszeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; } /* ⚠️ Die Einordnung steht jetzt als eigene Zeile darunter. `.einordnung` ist sonst ein Inline-Element (im `.zweizeiler` steht es NEBEN dem Wert) — deshalb wird es nur HIER, als direktes Kind des Accounttexts, zum Block. */ .accounttext > .einordnung { display: block; } /* ⚠️ DER TYP STEHT IM VERWEIS und trägt deshalb dessen Farbe — er ist Teil desselben anklickbaren Dings, nicht eine zweite Angabe daneben. ⛔ Nicht `.einordnung`: Die ist grau und würde den Verweis mitten im Wort aufbrechen. ⭐ Was ihn trotzdem zurücknimmt, ist das Gewicht: Der Name trägt, der Typ ordnet ein. */ .accounttext .haupt .typ { font-weight: 400; } .accounttext .haupt .typ.fehlt { color: var(--weg-text); } /* ⛔ ZWEI ANGABEN IN EINER ZEILE: klein die Einordnung, gross der Wert. ⚠️ `.n` dreht die Reihenfolge nicht um — in den Zahlenspalten steht die Einordnung ebenfalls zuerst, damit der Betrag rechts am Rand fluchtet. */ /* ⛔ DER ZAHLENSTAPEL — Betrag oben, Einordnung darunter (Sebastian, 01.09.2026): *„in Spalte LTR 1. Zeile Summe, 2. Zeile Seit xxxx · n J."* ⚠️ NICHT `.zweizeiler` mit gedrehter Richtung: Der Zweizeiler ist trotz seines Namens EINE Zeile („klein die Einordnung, gross der Wert") und wird an einem Dutzend Stellen so gelesen. Zwei Bauformen, zwei Namen. ⚠️ Und NICHT `.gestapelt` — der Name war bis zum 29.08.2026 vergeben und ist mit seinem Bauteil gefallen; ihn wiederzuverwenden hiesse, dass eine alte Regel unbemerkt greifen könnte. ⭐ Rechtsbündig, weil er nur in Zahlenspalten steht: Die Beträge müssen über alle Zeilen hinweg an derselben Kante fluchten. */ .zahlenstapel { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; min-width: 0; } /* ⚠️ `table.tab .einordnung + .haupt` greift hier NICHT — dort steht die Einordnung VOR dem Wert, hier dahinter. Ohne diese Zeile fiele der Betrag auf die Grundschrift zurueck und waere kleiner als in den Nachbarspalten. */ .zahlenstapel .haupt { font-size: 14px; } .zweizeiler { display: flex; align-items: baseline; gap: 8px; min-width: 0; } .zweizeiler.n { justify-content: flex-end; } .zweizeiler .einordnung, .zweizeiler .haupt { display: inline; } /* ⛔ DA, ABER NICHT ZU SEHEN. Für Angaben, die ein Zeichen trägt: Wer vorlesen lässt oder im Text sucht, findet sie — der Blick wird nicht belastet. ⚠️ NICHT `display:none` und nicht `visibility:hidden`: Beides nimmt den Text auch aus der Vorlesereihenfolge, und dann ist er wirklich weg. */ .nurvorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .raster4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 22px; } .raster4 > div { min-width: 0; } .raster4 .beschriftung { display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-still); margin-bottom: 3px; } .raster4 .wert { font-size: 14px; } .raster4 .neben { color: var(--text-leise); font-size: 12px; } @media (max-width: 1100px) { .raster4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .raster4 { grid-template-columns: minmax(0, 1fr); } } table.tab tr:last-child td { border-bottom: 0; } table.tab td.n, table.tab th.n { text-align: right; font-variant-numeric: tabular-nums; } table.tab .haupt { font-weight: 600; } /* ── Sortierbare Spaltenüberschriften ──────────────────────────────────── ⛔ Sie sehen aus wie die Überschrift, nicht wie ein Knopf — bis man darüberfährt. Eine Tabelle voller Knöpfe liest sich nicht mehr. ⚠️ Das Richtungszeichen steht NUR an der aktiven Spalte: Ein Pfeil an jeder Überschrift sagt nichts mehr darüber, wonach gerade geordnet ist. */ table.tab th a { color: inherit; text-decoration: none; } table.tab th a:hover { color: var(--akzent); text-decoration: none; } table.tab th .richtung { color: var(--akzent); font-size: 10px; } table.tab th .teiler { color: #c9c5bf; margin: 0 2px; font-weight: 400; } table.tab .neben { color: var(--text-leise); font-size: 13px; } /* ⛔ DIE EINORDNUNG STEHT ÜBER DEM NAMEN, nicht darunter: erst wofuer man es haelt, dann welches es ist. Klein und still — sie ordnet ein, sie ist nicht die Aussage der Zeile. */ table.tab .einordnung { color: var(--text-still); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 2px; } table.tab .einordnung + .haupt { font-size: 14px; } /* ⛔ Eine Luecke oder ein kaputter Verweis faerbt sich — sonst liest man in einer Liste von hundert Zeilen darueber hinweg. */ table.tab .einordnung.fehlt { color: var(--weg-text); } /* ⛔ DASSELBE FUER EINE VERSTRICHENE FRIST (03.09.2026, Wiedervorlagenliste). * ⚠️ `.mahnt` ist in dieser Datei NUR gebunden vergeben — am `` stuende * die Klasse da und taete nichts. ⭐ Drei Auszeichnungen schlagen zwei: Die * Reihenfolge in der Datei entscheidet hier NICHT. */ table.tab .einordnung.mahnt { color: var(--weg-text); } /* Beschriftungsspalte einer Angabentabelle — links, nicht als Kopfzeile. */ table.tab th.feldname { width: 190px; vertical-align: top; padding-top: 15px; } /* Der Gebietspfad: Staat › Bundesland › Kreis › Gemeinde, jede Stufe ein Weg. */ .kette { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; } .kette .teiler { color: #c9c5bf; } /* Ein Schlagwort, das zugleich ein Verweis ist. */ a.tagverweis { text-decoration: none; } a.tagverweis:hover .tag { border-color: var(--akzent); } .leerlauf { padding: 34px 18px; text-align: center; color: var(--text-leise); } /* ── Herleitung: zugeklappt, aber nicht versteckt ────────────────────── */ /* ⛔ Zugeklappt wird die HERLEITUNG, nie ein Befund. Wo eine Auswahl leer ist, steht der Block offen — sonst liest man aus „nichts zu sehen" Entwarnung. */ details.herleitung { border-top: 1px solid var(--rand-zart); } details.herleitung > summary { cursor: pointer; padding: 11px 18px; font-size: 13px; color: var(--text-leise); list-style: none; display: flex; align-items: center; gap: 7px; } details.herleitung > summary:hover { color: var(--akzent); } details.herleitung > summary::-webkit-details-marker { display: none; } details.herleitung > summary::before { content: "›"; font-weight: 600; } details.herleitung[open] > summary::before { content: "⌄"; } details.herleitung[open] > summary { border-bottom: 1px solid var(--rand-zart); } /* ⭐ Das Erfassungsformular einer Pflegeliste ist eine Karte, keine Herleitung — es trägt deshalb keine Trennlinie oben und eine kräftigere Überschrift. ⛔ Zugeklappt ist es ein Angebot, kein Hinweis. */ details.erfassen { border-top: 0; } details.erfassen > summary { font-size: 15px; font-weight: 600; color: var(--text); padding: 0 0 8px; } details.erfassen[open] > summary { border-bottom: 0; margin-bottom: 6px; } /* ⛔ EINE ZEILE IM RUMPFABSTAND, ABER OHNE RUMPF — für Text, der zwischen dem Formular und einer randlosen Tabelle steht. ⚠️ Ohne sie klebt die Zählzeile links an der Kartenkante, während alles darüber eingerückt ist, und der Bruch fällt genau auf dem schmalen Bildschirm auf. */ .rumpf-zeile { padding: 0 18px 14px; margin: 0; } /* ⚠️ Die Vorschau auf eine wirkende Kündigung — sie steht UNTER dem ACV und ist bewusst leise: Sie ist noch nicht wahr, sie wird es. */ .einordnung.minus { color: #8c1d18; } /* ⛔ HIER STAND `.hierarchie` — die Zeile unter den vier Kacheln, die „woher, wo, wohin" sagte. ⚠️ GEFALLEN AM 01.09.2026 (Sebastian): *„Wir haben die übergeordnete Navigation sogar dreimal drin … die Zeile ist unsinnig doppelt."* ⭐ Jeder ihrer drei Teile stand woanders schon, und dort genauer: der Weg nach oben in der Brotkrume und im Knopf der Titelleiste, der Name in der ersten Kachel, die Zahl der Untergebiete in der Überschrift der Liste — die nennt zusätzlich, WORAUS sie besteht. ⭐ Eine Zeile, die nur noch andere Stellen zitiert, ist kein Wegweiser mehr. Kein Bauteil bleibt hier ohne Benutzer stehen. */ /* ── Ebenenzeichen ─────────────────────────────────────────────────────── ⛔ DAS WORT, KEIN KÜRZEL (Sebastian, 29.08.2026). Ein Kürzel müsste man lernen; ein Wort liest man. Die FARBE gibt die schnelle Orientierung — sie trennt Staat, Land, Kreis, Stadtkreis, Gemeindeverband und Gemeinde. ⚠️ Die Farbe ist NIE die einzige Information: Das Wort steht daneben, und wo die Kurzform vereinfacht, steht das Bestandswort darunter. */ .ebenenzeichen { display: inline-block; text-align: center; white-space: nowrap; padding: 1px 7px; margin-right: 9px; border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: .06em; background: var(--still-grund); border: 1px solid var(--still-rand); color: var(--still-text); vertical-align: 2px; } .ebenenzeichen.r-staat { background: #2f2b28; border-color: #2f2b28; color: #fff; } .ebenenzeichen.r-land { background: #dfe7f5; border-color: #c3d2ea; color: #2b4a7d; } .ebenenzeichen.r-kreis { background: #e2eddf; border-color: #c6dcc0; color: #2f5d29; } .ebenenzeichen.r-kreisstadt { background: #fdeacd; border-color: #f2d19a; color: #7a5210; } .ebenenzeichen.r-verband { background: #efe6f3; border-color: #dcc9e4; color: #5a3a68; } .ebenenzeichen.r-gemeinde { background: #f5f2ee; border-color: #e0d8ce; color: #6b5a45; } .ebenenzeichen.r-platzhalter { background: #f3f2f0; border-color: #e2e0dd; color: #9a948c; } /* ── Eine Tabelle, die Navigation IST ──────────────────────────────────── ⛔ Sie sieht sonst aus wie eine Auswertung. Der Pfeil und die Zeile, die auf Berührung reagiert, sagen: Ein Klick macht dieses Gebiet zum Fokus. */ /* ⛔ DIE RECHTE KANTE SAGT, OB ES WEITERGEHT (Sebastian, 29.08.2026): orange, wo ein Untergebiet folgt — grau, wo der Baum endet. ⭐ Rechts, weil das die Richtung ist, in die es geht; und als Kante, damit sie nicht mit dem Ebenenzeichen links konkurriert. ⚠️ Sie sitzt auf der letzten ZELLE, nicht auf der Zeile: Ein `box-shadow` auf einem `tr` wird nicht überall gezeichnet. */ /* ⛔ HIER STAND DIE GANZE MECHANIK DER KLICKBAREN ZEILE — und sie ist am 31.08.2026 (nachts) auf einen Schlag verschwunden. Es waren vier Stücke: die orange KANTE (`box-shadow` auf der Zelle, orange wo es tiefer geht), der ZEILEN-HOVER, der FLÄCHIGE Verweis (`::after` mit `inset: 0` über die ganze Zeile) und die ÜBERLAGERUNG der Knöpfe darüber (`position` plus `z-index`, damit sie den flächigen Verweis durchstossen). ⚠️ Sebastian an der Kreisebene von Bayern, 96 Zeilen: *„hier weiß man gar nicht wo man hinklicken soll."* ⛔ Der Grund war der unsichtbare Weg: Der WICHTIGSTE Weg der Seite — eine Ebene tiefer — hatte keine Gestalt, und die Kante war sein einziger Hinweis, ein Strich ohne Beschriftung. ⭐ SEIT ES DAFÜR EINEN KNOPF GIBT, braucht keines der vier Stücke mehr zu existieren: *„Dann sparen wir uns den [alle Accounts] und die orangene Kante, und die Standardaktion."* ⚠️ Auch `tr class="offen"` ist weg — die Marke gab es NUR, damit CSS Kante und Hover setzen konnte. ⭐ Das ist der grösste Rückbau dieses Tages, und er hat die drei kniffligsten Stellen der Seite mitgenommen. */ /* ── Minikacheln in einer Navigationszeile ─────────────────────────────── ⛔ Sie folgen direkt auf Name, Ebene und Einwohner (Sebastian, 29.08.2026) und tragen einen EIGENEN Hover: Ein Klick auf sie führt in die Accountliste, ein Klick daneben eine Ebene tiefer. Zwei Ziele in einer Zeile müssen sich unterscheiden lassen. */ /* ⭐ Links das Gebiet, RECHTS seine Zahlen (Sebastian, 29.08.2026). Untereinander war die Zeile drei Zeilen hoch — eine Liste aus 53 Kreisen liess sich so nicht mehr überfliegen. */ /* ── Zwei grosse Flächen unter den vier Kennzahlen ─────────────────────── ⛔ DIE ZUORDNUNG TRÄGT INHALTLICH (Sebastian, 29.08.2026): Links, unter den beiden ACCOUNT-Karten, steht die Liste, über die man zu Accounts kommt — die beiden Kacheln darüber tragen die Navigation. Rechts, unter EINWOHNER und GEBIETSSCHLÜSSEL, steht, was das Gebiet beschreibt. ⭐ Gleiche Spaltenbreiten und gleicher Abstand wie oben: Die Kanten stehen in einer Flucht, und der Aufbau erklärt sich dadurch von selbst. ⚠️ AM 31.08.2026 EINMAL ENTFERNT UND AM SELBEN TAG ZURÜCKGEHOLT. Ich hatte die rechte Spalte nach der Kompaktheitsregel eingerissen, weil ihre Karte nur zwei Zahlen trug. ⛔ Sebastian: *„selbst wenn wir noch keinen Inhalt dafür haben, dann stell den Behälter schon an seinen Platz, zeichne ihn weiß fertig — nicht einfach wegnehmen."* ⭐ DIE REGEL GILT DEM INHALT, NICHT DEM RESERVIERTEN PLATZ. */ .gebietsraster { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; } /* ⚠️ DER UMBRUCH LIEGT SEIT DEM 31.08.2026 BEI 1360 STATT 1100 PIXELN, und der Grund ist gerechnet: Die beiden gleich langen Knöpfe brauchen zusammen 310 px, und sie leben zwischen den Kanten von Kachel 2 — die ist (B−42)/4 breit. Unter rund 1.360 px Fensterbreite passen sie dort nicht mehr nebeneinander, die Zeile bräche um und wäre 104 statt 62 px hoch. ⛔ Dann ist die einspaltige Anordnung das kleinere Übel: Die Liste bekommt die volle Breite, die Knöpfe bleiben in EINER Zeile, und der Steckbrief rückt darunter. */ @media (max-width: 1360px) { .gebietsraster { grid-template-columns: 1fr; } } /* ⛔ ZWEI KARTEN IN EINER RASTERZELLE (Sebastian, 06.09.2026): *„führe beide untereinander"*. ⚠️ Ohne diesen Behälter reiht sich jede neue Karte als eigene Zelle ein — und schiebt die folgende in die nächste Zeile, also unter die Gebietsliste. ⭐ Der Abstand ist derselbe wie der des Rasters: Zwei Abstände nebeneinander, die verschieden sind, sieht man sofort. */ .gebietsspalte { display: grid; gap: 14px; align-content: start; } /* ⛔ DIE ZAHLEN STEHEN IN EINER FLUCHT, nicht am rechten Rand (Sebastian, 29.08.2026): Bei 53 Untergebieten wandern sonst Auge und Maus für jede Zeile einmal quer über den Bildschirm. ⭐ Die feste Breite des linken Blocks IST die Flucht — sie liegt dort, wo oben die zweite Kennzahlkarte beginnt. */ .gebietszeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px 0; } /* ⛔ DIE FLUCHT IST NICHT MEHR FREI GEWÄHLT, SIE IST DIE KANTE VON KACHEL 2 (Sebastian, 31.08.2026): *„Der erste Button wird ausgerichtet an der linken Kante der 2. Kachel des Kopfbereichs. Und der Button [Alle Accounts] wird an der rechten Kante der 2. Kachel ausgerichtet."* ⭐ WARUM DAS MIT EINEM PROZENTWERT AUFGEHT: Der Kopf trägt vier gleich breite Kacheln mit 14 px Abstand, die Liste steht in der linken Hälfte des zweispaltigen Rasters. Kachel 2 beginnt bei (B−42)/4 + 14, die Karte ist (B−14)/2 breit — das Verhältnis liegt über den ganzen Bereich zwischen 50,9 % und 51,5 %. ⚠️ Eine feste Pixelbreite stimmte nur bei genau einer Fensterbreite. ⚠️ Ohne Raster (unter 1100 px) trägt die Karte die volle Breite; dann liegt dieselbe Kante bei rund 25 %. */ /* ⚠️ DER ABSTAND ZUM ERSTEN KNOPF LIEGT INNEN, nicht als Spaltenabstand der Zeile: Ein `gap` käme ZUR Flucht hinzu und schöbe den Knopf um genau seine Breite aus der Kante von Kachel 2. ⛔ Genau das ist beim ersten Anlauf passiert — 19 px daneben, und im Bild kaum zu sehen. */ .gebietsinfo { flex: 0 0 51.1%; min-width: 0; padding-right: 18px; } /* ⚠️ Ein zu langer Name wird abgeschnitten, nicht umgebrochen: Sonst wird eine Zeile hoch und die nächste nicht, und die Liste verliert ihren Takt. */ .gebietsname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ⛔ DIE BEIDEN KNÖPFE STEHEN AN DEN KANTEN VON KACHEL 2 (Sebastian, 31.08.2026) — der linke an ihrer linken, der rechte an ihrer rechten. ⭐ `space-between` ist dafür genau richtig: Steht nur EIN Knopf da (gleiche Zählung, oder gar keine Accounts), bleibt er links in seiner Flucht, statt in die Mitte zu rutschen. */ /* ⚠️ Der SPALTENabstand ist klein, weil `space-between` die beiden Knöpfe ohnehin auseinanderdrückt — er ist nur die Untergrenze, und die entscheidet, ob zwei gleich lange Knöpfe noch NEBENeinander passen. */ .minikacheln { display: flex; flex: 1 1 auto; flex-wrap: wrap; justify-content: space-between; gap: 7px 4px; } /* ⛔ ALLE KNÖPFE GLEICH LANG (Sebastian, 31.08.2026): *„jetzt wärs noch ruhiger, wenn die Buttons alle gleichlang sind (orientiert an einem 4stelligen Accountanzahl)."* ⭐ Die Unruhe kam nicht von den Zahlen, sondern von den KANTEN: 113 px bei zweistelligen, 160 px bei vierstelligen Zahlen — in 26 Zeilen ein Zickzack an vier Stellen. ⚠️ `min-width` und nicht `width`: Eine fünfstellige Zahl (Deutschland als Ganzes) darf den Knopf wachsen lassen, statt abgeschnitten zu werden. Lieber ein Knopf aus der Reihe als eine Zahl, die fehlt. */ /* ⛔ AUF ZWEI STELLEN BEMESSEN, NICHT AUF VIER (Sebastian, 01.09.2026 — und am Vortag war es umgekehrt): *„die Buttons mit [n Accounts] im Gegensatz zu gestern die Breite nicht auf 4-stellig optimieren, sondern auf 2-stellig."* ⭐ Der Grund liegt im Bild: Seit die Zeilen nur noch die Accounts DIESER Ebene zeigen, sind vierstellige Zahlen die Ausnahme — auf Kreisebene steht dort einstellig bis zweistellig. Eine Breite fuer 1.863 lieferte 26 Zeilen lang Luft. ⚠️ `min-width` bleibt: Eine groessere Zahl laesst den Knopf wachsen, statt abgeschnitten zu werden. Lieber ein Knopf aus der Reihe als eine Zahl, die fehlt. */ .minikachel { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 116px; padding: 4px 7px; border-radius: 6px; border: 1px solid var(--rand); background: var(--karte); font-size: 12px; color: var(--text-leise); text-decoration: none; white-space: nowrap; } /* ⛔ UND DIE ZAHLEN STEHEN UNTEREINANDER. ⚠️ Gleich lange Knöpfe allein genügen nicht: Ohne festes Zahlenfeld wandert „1.173" gegen „24" in der Mitte hin und her, und die Spalte flimmert weiter. ⭐ Rechtsbündig im festen Feld, mit gleichen Ziffernbreiten — dann endet jede Zahl an derselben Stelle, und „Accounts" beginnt an derselben. */ .minikachel .wert { font-size: 15px; font-weight: 600; color: var(--text); min-width: 20px; text-align: right; font-variant-numeric: tabular-nums; } /* ⛔ DAS ZEICHEN SAGT, WELCHE ART VON ZIEL DAHINTER LIEGT (Sebastian, 31.08.2026): `liste` führt in die Accountliste, `sprung` direkt auf den einen Account. ⚠️ Es steht VOR der Zahl und ist leiser als sie — es ist die Art des Weges, nicht die Aussage. */ .minikachel .zeichen-svg { width: 13px; height: 13px; flex: 0 0 13px; color: var(--text-still); } a.minikachel:hover .zeichen-svg { color: var(--akzent); } a.minikachel:hover { border-color: var(--akzent); background: var(--akzent-hell); text-decoration: none; } a.minikachel:hover .wert, a.minikachel:hover { color: var(--akzent); } .minikachel.betont .wert { color: var(--akzent); } /* ⛔ DER WEG NACH UNTEN TRUG DIE HAUSFARBE — und das war am 01.09.2026 vorbei (Sebastian): *„bitte das orange als Akzentfarbe raus … als auch beim Button Untergebiete."* ⭐ Der Unterschied zur Accountflaeche steht ohnehin im Bild: ein anderes Zeichen, ein anderes Wort, keine Zahl. ⚠️ Ihn ZUSAETZLICH einzufaerben verbrauchte eine Farbe, die anderswo etwas bedeuten soll. */ /* ⛔ DER WEG NACH OBEN STEHT IN DER TITELLEISTE, ÜBER DER SPALTE DER WEGE NACH UNTEN (Sebastian, 01.09.2026). ⚠️ Die Titelleiste ist ein `flex` mit `space-between`; damit die Flucht stimmt, traegt sie DIESELBE Bauform wie eine Gebietszeile — und die muss dort die volle Breite bekommen. */ .karte > .kopf > .gebietszeile { flex: 1 1 auto; min-width: 0; } .karte > .kopf > .gebietszeile h2 { font-size: 15px; font-weight: 600; margin: 0; } /* ⚠️ EIN PLATZHALTER, DER NICHTS IST — nur eine Breite. ⛔ Ohne ihn schoebe `space-between` die Accountflaeche eines Blattgebiets nach links, und die rechte Flucht waere dahin. */ /* ⛔ HIER STAND `.minikachel.platz` — ein leerer Behelf, der in einer Zeile ohne Navigationsknopf die rechte Flucht hielt. ⚠️ Seit dem 06.09.2026 trägt JEDE Gebietszeile den Knopf „Gebiet öffnen", also gibt es die Lücke nicht mehr, die er gefüllt hat. ⭐ Eine Regel ohne Benutzer bleibt nicht stehen: Beim nächsten Lesen sieht sie aus wie ein Angebot. */ /* ⚠️ Eine Fläche ohne Ziel sieht auch nicht wie eine aus. */ .minikachel.leer { border-style: dashed; color: var(--text-still); } /* ⛔ HIER STAND `a.gebietsverweis` — der Verweis auf dem Gebietsnamen. ⚠️ Er ist am 31.08.2026 (nachts) mit der Zeilenaktion gefallen: Der Name wäre der vierte Weg in einer Zeile und führte dahin, wo der Knopf „Untergebiete" schon hinführt. ⭐ Kein Bauteil bleibt hier ohne Benutzer stehen. */ /* ⛔ DIE BEIDEN UMBRUCHSTUFEN STEHEN HIER UNTEN, HINTER `.minikacheln` — nicht oben bei `.gebietsinfo`. ⚠️ Sonst schlägt die spätere Grundregel gleicher Spezifität die Ausnahme, und die Achse hielt nur im breiten Fenster. Genau das ist beim ersten Anlauf passiert. */ /* ⚠️ OHNE RASTER TRÄGT DIE KARTE DIE VOLLE BREITE — dann liegen BEIDE Kanten von Kachel 2 mitten in der Zeile, und der rechte Knopf braucht eine Grenze, sonst wandert er an den Kartenrand und die Achse zerfällt. */ @media (max-width: 1360px) { .gebietsinfo { flex: 0 0 24.4%; } /* ⚠️ `min-width: max-content` ist hier die Notbremse: Zwei Knöpfe, die zusammen breiter sind als eine Kachel, würden sonst UMBRECHEN und die Zeile doppelt so hoch machen. ⛔ Lieber ein paar Pixel über die Kante hinaus als eine Zeile, die springt. */ .minikacheln { flex: 0 0 auto; width: 24.8%; min-width: max-content; } } /* ⚠️ Ganz schmal bricht die Zeile ohnehin um — und der Kopf bricht seine Kacheln mit. Dann gibt es keine Flucht mehr zu halten. */ @media (max-width: 860px) { .gebietsinfo { flex: 1 1 100%; padding-right: 0; } .minikacheln { flex: 1 1 auto; justify-content: flex-start; } } /* ── Abzeichen ───────────────────────────────────────────────────────── */ .pille { display: inline-block; padding: 3px 10px; border-radius: 11px; font-size: 12px; font-weight: 500; white-space: nowrap; background: var(--still-grund); border: 1px solid var(--still-rand); color: var(--still-text); } /* ⛔ WELCHE DATENBANK — die Pille im Fuss (07.09.2026). ⚠️ Sie nimmt die bestehenden drei Farben und erfindet keine vierte: Gruen ist hier NICHT „gut", sondern „hier darfst du dich irren"; Rot ist NICHT „kaputt", sondern „hier zaehlt jeder Klick". ⭐ Deshalb eigene Klassennamen statt `.gut`/`.weg` — die Bedeutung ist eine andere, auch wenn die Farbe dieselbe ist. */ .pille.db-entwicklung { background: var(--gut-grund); border-color: var(--gut-rand); color: var(--gut-text); } .pille.db-produktiv { background: var(--weg-grund); border-color: var(--weg-rand); color: var(--weg-text); } .pille.gut { background: var(--gut-grund); border-color: var(--gut-rand); color: var(--gut-text); } .pille.warn { background: var(--warn-grund); border-color: var(--warn-rand); color: var(--warn-text); } .pille.weg { background: var(--weg-grund); border-color: var(--weg-rand); color: var(--weg-text); } /* ⭐ DIE ZUSTANDSPILLE der Accountliste (A-2.16) — sie ERBT von `.pille`. ⛔ SIE WAR ERST EIN FARBIGER PUNKT. Sebastian am 30.08.2026: *„Das kann man aber sehr schwer auseinanderhalten."* — bei neun Pixeln ist Dunkelgrün gegen Dunkelrot keine Unterscheidung, schon gar nicht am Rand des Blickfelds. ⭐ EINE BESCHRIFTETE PILLE IST IHRE EIGENE LEGENDE: kein Nachschlagen, kein Tooltip, keine Farbunterscheidung nötig. Die Farbe trägt dann nur noch die Dringlichkeit, nicht die Aussage. ⚠️ UND SIE DEFINIERT `.pille` NICHT NEU. Beim ersten Anlauf stand hier ein zweiter Grundblock — die spätere Regel hätte die frühere still überschrieben. Dieselbe Regel wie überall: ein Mechanismus, eine Stelle. ⛔ Nur vier der sechs Zustände erscheinen; `Z1` und `Z2` sind die Normalfälle und stehen bereits in den Zahlenspalten. */ .pille.z-teil { background: var(--warn-grund); border-color: var(--warn-rand); color: var(--warn-text); } .pille.z-weg { background: var(--weg-grund); border-color: var(--weg-rand); color: var(--weg-text); } /* ⚠️ Zwischen „teilweise" und „weg" — sonst sähen `Z4` und `Z5` gleich aus, und das ist der Unterschied zwischen „wir wissen es" und „wir wissen es nicht". */ .pille.z-gek { background: #fbeee7; border-color: #edc9b5; color: #a3441a; } /* ⛔ `z-umzug` liegt NICHT auf der Dringlichkeitsreihe: Ein Wechsel ist kein Verlust, und ein Warnton wäre eine falsche Aussage. Deshalb Blau. */ .pille.z-umzug { background: #eef3f8; border-color: #cbdae8; color: #3f6086; } /* ⚠️ In einer Tabellenzeile ist die Grundpille zu gross — sie steht dort neben einem Namen, nicht allein in einer Fläche. */ table.tab .pille { padding: 1px 8px 2px; font-size: 11px; font-weight: 600; cursor: help; } /* ⚠️ Eigene Zeile ÜBER dem Accounttyp — der Zustand steht damit als Erstes in der Zeile. Der knappe Abstand hält die Zelle trotz dritter Zeile ruhig. */ table.tab .zustandszeile { margin-bottom: 3px; } /* ⛔ DIE ART EINES VERTRAGS ALS PILLE — Abo-RG gegen Abo-AG (Sebastian, 30.08.2026). ⚠️ Sie ist eine EINORDNUNG, kein Befund: Keine der beiden Arten ist gut oder schlecht, also bekommt sie auch keine der Farben, die im Werkzeug etwas bedeuten. Stiller Grund, dunkle Schrift, fertig. ⭐ Warum überhaupt eine Pille und nicht Text: Sie ersetzt das Präfix der Vorlagennummer, das der Anwender bisher lesen musste — und eine Pille erkennt man am Rand, ohne sie zu lesen. */ .pille.vertragsart { background: var(--grund); border-color: var(--rand); color: var(--text-leise); font-weight: 600; } /* ── Schlagwörter: Kategorie und Wert nebeneinander ──────────────────── */ /* ⛔ ZWEI TEILE, WEIL EIN SCHLAGWORT OHNE SEINE KATEGORIE NICHT ZU DEUTEN IST (Fallstrick 34). So zeigt es auch VT6 — `KEY MDO`, nicht der lange Text. ⚠️ Die FARBEN stehen NICHT hier, sondern im Bestand: Sie kommen aus account_tag_categories.backgroundcolor und account_tags.backroundcolor und werden je Abzeichen gesetzt. Hier steht nur, was ohne Farbangabe gilt — und das ist der Normalfall, denn foregroundcolor ist im Bestand fast überall NULL. */ .tag { display: inline-flex; margin: 0 4px 4px 0; overflow: hidden; font-size: 11px; font-weight: 600; line-height: 1.7; border: 1px solid rgba(0,0,0,.14); border-radius: 4px; } .tag > span { padding: 0 6px; color: #1c1a17; white-space: nowrap; background: var(--still-grund); } .tag > .k { border-right: 1px solid rgba(0,0,0,.14); } td.schlagwoerter { max-width: 320px; } /* ── Umschalter und Knöpfe ───────────────────────────────────────────── */ .schalter { display: flex; flex-wrap: wrap; gap: 8px; } .schalter a, .schalter button { font: inherit; font-size: 13px; padding: 7px 14px; border-radius: 16px; border: 1px solid var(--rand); background: var(--karte); color: var(--text); cursor: pointer; text-decoration: none; } .schalter a:hover, .schalter button:hover { background: #f3f2f0; text-decoration: none; } .schalter .hier, .schalter a.hier:hover { background: var(--akzent); border-color: var(--akzent); color: #fff; } .knopf { font: inherit; font-size: 14px; font-weight: 600; padding: 9px 17px; border: 0; border-radius: 6px; background: var(--akzent); color: #fff; cursor: pointer; text-decoration: none; display: inline-block; } .knopf:hover { background: #d24f0a; text-decoration: none; } .knopf.zart { background: var(--karte); color: var(--text); border: 1px solid var(--rand); font-weight: 500; } .knopf.zart:hover { background: #f3f2f0; } /* ── Formulare ───────────────────────────────────────────────────────── */ .feld { margin-bottom: 14px; } label.beschriftung { display: block; font-size: 13px; font-weight: 600; color: #3d3a36; margin: 0 0 5px; } input:not([type=hidden]):not([type=checkbox]):not([type=radio]), select, textarea { width: 100%; font: inherit; padding: 8px 11px; border: 1px solid #d3cfc9; border-radius: 6px; background: var(--karte); color: var(--text); } input:focus, select:focus, textarea:focus { outline: 2px solid var(--akzent); outline-offset: -1px; border-color: var(--akzent); } /* ── Filterleiste ──────────────────────────────────────── */ /* ⛔ EIN RASTER, KEIN UMBRUCH. Mit `flex-wrap` bestimmt der laengste Eintrag einer Auswahl, wie breit sie sein will — und eine einzige lange Typbezeichnung schiebt die ganze Zeile auseinander. Feste Spalten gleicher Breite haengen dagegen an der KARTE, nicht am Inhalt. ⚠️ `minmax(0, 1fr)` statt `1fr`: Ein Rasterfeld darf sonst nicht kleiner werden als sein Inhalt, und genau das war der Umbruch. */ .filter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 16px; } .filter .feld { margin-bottom: 0; min-width: 0; } /* ⛔ ABGESCHNITTEN WIRD NUR DIE ANZEIGE. Die Auswahlliste selbst zeigt den vollen Text — sonst waeren zwei Typen, die sich erst hinten unterscheiden, nicht auseinanderzuhalten (Sebastian, 29.08.2026). */ .filter select, .filter input { text-overflow: ellipsis; } /* ⛔ EIN GESETZTER FILTER WIRD HERVORGEHOBEN (Sebastian, 01.09.2026): *„grundsaetzlich sollten alle gesetzten Filter hervorgehoben werden."* ⚠️ Bei zehn Feldern sieht man einer Leiste sonst nicht an, warum die Liste kurz ist — und eine gefilterte Liste, die aussieht wie der volle Bestand, ist derselbe Fehler wie ein verschluckter Filter. ⭐ Die Marke sitzt am FELD, nicht am Eingabeelement: So wechselt auch die Beschriftung die Farbe, und das sieht man im Augenwinkel, ohne zu lesen. ⚠️ Und nicht nur die Farbe — der Punkt vor der Beschriftung traegt es mit: Farbe allein ist keine Auszeichnung (dieselbe Regel wie bei den Zustandspillen). */ /* ⚠️ KEIN `>` — DIE BESCHRIFTUNG IST NICHT MEHR IMMER EIN DIREKTES KIND. ⛔ Beim Gebietsfeld steht sie seit dem 01.09.2026 in einer Kopfzeile zusammen mit dem Ankreuzfeld; der Nachfahrenselektor traf sie danach nicht mehr, und ausgerechnet das Feld mit dem meisten Erklärungsbedarf blieb unmarkiert. Im Bild gesehen, nicht im Quelltext. */ .filter .feld.gesetzt .beschriftung { color: var(--akzent); } .filter .feld.gesetzt .beschriftung::before { content: "● "; font-size: 10px; vertical-align: 1px; } .filter .feld.gesetzt input:not([type=checkbox]), .filter .feld.gesetzt select { border-color: var(--akzent); background: var(--akzent-hell); } /* ⛔ UND SOFORT, NICHT ERST NACH DEM ABSCHICKEN (Sebastian, 01.09.2026: *„der Filter Typ färbt nicht orange, wenn etwas ausgewählt ist"*). ⚠️ ER HATTE ZWEI HAEKCHEN GESETZT UND NOCH NICHT GEFILTERT. Die Marke oben kommt vom Server und kann das gar nicht wissen — sie beschreibt, was ANGEWENDET ist, nicht, was angekreuzt ist. ⭐ `:has()` schliesst die Luecke OHNE JAVASCRIPT: Ein Feld, in dem ein Haekchen steht, faerbt sich sofort. ⚠️ Die ZAHL („2 gewaehlt") bleibt serverseitig — sie sagt weiterhin, was wirklich gefiltert wird, und das ist der Unterschied, den man sehen koennen muss. ⚠️ Wo `:has()` fehlt, bleibt es beim alten Verhalten: Die Regel wird dann ignoriert, nichts bricht. */ .filter .feld:has(.auswahlliste input:checked) > .feldkopf > .beschriftung { color: var(--akzent); } .filter .feld:has(.auswahlliste input:checked) > .feldkopf > .beschriftung::before { content: "● "; font-size: 10px; vertical-align: 1px; } .filter .feld:has(.auswahlliste input:checked) .auswahl > summary { border-color: var(--akzent); background: var(--akzent-hell); } /* ⛔ DAS × LEERT DIE GANZE AUSWAHL (Sebastian, 01.09.2026). ⚠️ ES STEHT IMMER IM MARKUP, aber nur dann im Bild, wenn es etwas zu leeren gibt — entweder ANGEWENDET (`.gesetzt` ohne `.nurwahl`, vom Server) oder bloss ANGEKREUZT (`:has()`, sofort). ⛔ Vorher hing es allein am Server: Das Feld war durch `:has()` schon orange, das Kreuz fehlte noch — zwei Anzeigen desselben Zustands, die auseinanderliefen. */ .filter .ankreuz.nurwahl { display: none; } .filter .feld:has(.auswahlliste input:checked) > .feldkopf > .ankreuz.nurwahl { display: flex; } .filter .leeren { margin-left: 5px; padding: 0 4px; border-radius: 4px; font-size: 14px; line-height: 1; text-decoration: none; } .filter .leeren:hover { background: var(--akzent); color: #fff; } /* ⛔ DAS ANKREUZFELD STEHT ÜBER DEM EINGABEFELD, RECHTSBÜNDIG (Sebastian, 01.09.2026) — auf der Hoehe der Beschriftung, nicht darunter. ⭐ Es gehoert zur BESCHRIFTUNG, nicht zum Wert: Es sagt, WIE der Schluessel darunter gelesen wird. ⚠️ Unter dem Feld stand es zwischen dem Wert und dem Namen dazu und trennte zwei Angaben, die zusammengehoeren. */ /* ⭐ DAS GEBIETSFELD — EINGABE LINKS, DIE ZWEI ANGABEN DANEBEN (Sebastian, 02.09.2026: „so dass sie exakt die Höhe des Filterfeldes einnehmen"). ⛔ Vorher war das Feld DREIZEILIG — Kopf, Eingabe, Hinweis — und damit höher als jedes andere in der Leiste; die ganze Zeile richtete sich danach aus. ⚠️ `align-items: stretch` und `justify-content: space-between`: Die beiden kleinen Zeilen verteilen sich auf die Höhe des Eingabefeldes, statt an seiner Oberkante zu kleben. */ /* ⛔ EIGENER NAME, UND ZWAR AUS EINEM GRUND: `.gebietszeile` GIBT ES SCHON — weiter oben, für eine Zeile der GEBIETSNAVIGATION. Meine Regel war zwar spezifischer, erbte aber deren `flex-wrap: wrap`, und genau daran brach das Feld um: Eingabe oben, Ankreuzfeld darunter (Sebastian, 02.09.2026: „ich möchte Checkbox und Fehlermeldung NEBEN das Eingabefeld"). ⚠️ EINE SPEZIFISCHERE REGEL ÜBERSCHREIBT NUR, WAS SIE SELBST NENNT. Alles andere erbt weiter — hier das Umbrechen, das ich nie gesetzt habe. ⭐ `pruefe-klassennamen.php` hat den Doppelnamen NICHT gemeldet, weil er qualifiziert war (`.filter .gebietszeile`) und damit als gebunden zählt. Das ist eine Lücke des Werkzeugs und steht im BACKLOG. */ .filter .gebietsfeldzeile { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 10px; } /* ⛔ NICHT SCHRUMPFEN. `flex: 0 1` mit `min-width: 0` liess das Feld auf „1…" zusammenfallen, sobald daneben etwas stand (Sebastian, 02.09.2026). ⚠️ `min-width: 0` war aus der Kaufabsichtenliste uebernommen — dort loest es die Kappung langer Zellen. Hier gab es nichts zu kappen, und es hat nur Schaden angerichtet. ⭐ Eine Regel wandert nicht mit, weil sie anderswo geholfen hat. */ .filter .gebietsfeldzeile > input { flex: 0 0 200px; } /* ⛔ FESTE BREITE, DAMIT NICHTS SPRINGT (Sebastian, 02.09.2026): „gib dem Schlagwort soviel Platz nach rechts, dass die Fehlerausgabe reinpasst, ohne dass die Felder nach rechts schieben." ⚠️ Mit `auto` war das Feld schmal, solange keine Meldung stand, und wurde breiter, sobald eine kam — Schlagwort und Zustand rutschten dann mit. ⭐ 150 px ist die Breite von „steht nicht im Gebietsstamm" bei 12 px; sie ist dieselbe Zahl, auf die `ACC_GEBIETSNAME_MAX` den Gebietsnamen kappt. */ .filter .gebietsdazu { flex: 0 0 150px; display: flex; flex-direction: column; justify-content: space-between; font-size: 12px; line-height: 1.25; white-space: nowrap; } /* ⛔ Die leere Zeile hält den Platz, damit das Feld beim Tippen nicht springt. ⚠️ Deshalb `min-height` statt gar nichts — ein leeres `span` ist 0 hoch. */ .filter .gebietsdazu > .neben { min-height: 15px; } /* ⚠️ Das Ankreuzfeld ist hier kleiner als in einem `.feldkopf` — es steht neben dem Feld, nicht über ihm, und teilt sich die Höhe mit der Ansage. */ .filter .gebietsdazu > .ankreuz { margin: 0; font-size: 12px; } .filter .feldkopf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .filter .feldkopf > .beschriftung { margin-bottom: 5px; } .filter .ankreuz { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; font-size: 12px; color: var(--text-leise); cursor: pointer; white-space: nowrap; } .filter .ankreuz.gesetzt { color: var(--akzent); font-weight: 600; } .filter .ankreuz input { width: auto; } /* ⛔ EINE AUSWAHLLISTE MIT ANKREUZFELDERN (Sebastian, 01.09.2026) — fuer Typ und Schlagwort, weil man dort MEHRERE Werte braucht. ⭐ `
` und kein JavaScript, dieselbe Bauform wie die klappbaren Karten am Account: Zugeklappt steht da, WAS gewaehlt ist; aufgeklappt die Liste. ⚠️ Ein `

" + notiz)` an — dasselbe Bild. ⛔ Das Alttool hat diesen * Text also nie sauber gezeigt; hier sind wir nicht gleich, sondern besser, * und das ist ausdrücklich erlaubt (Fallstrick 31 als Auflage). * ⭐ `pre-wrap` UND NICHT `pre`: Die Umbrüche bleiben, aber lange Zeilen laufen * weiter um. `pre` erzwänge einen waagerechten Rollbalken über die ganze * Karte. */ .vtext { margin: 5px 0 0 calc(6.5em + 10px); overflow-wrap: anywhere; white-space: pre-wrap; } /* ⚠️ EIGENER NAME STATT `.mehr`: Ein bloss vergebener Allerweltsname wirkt * überall — das nächste Bauteil, das „mehr" heissen will, erbt ihn. */ .vmehr { display: inline-block; padding: 4px 0; } /* ── Nachträge zum Gesprächsverlauf, 02.09.2026 ──────────────────────────── */ /* ⛔ DIE ZAHL AM REITER IST DIE DER OFFENEN WIEDERVORLAGEN — sie steht still * neben der Aufschrift, nicht als Pille: Eine Pille wäre ein Zustand, das * hier ist eine Menge. */ .ansichten .ansicht .zaehler { color: var(--text-leise); font-weight: 500; } .ansichten .ansicht.hier .zaehler { color: var(--text-leise); } /* ⛔ EIN ✕ JE GESETZTEM FILTER. ⚠️ `.weglink` und NICHT `.weg` — der blosse * Name gehört der Verbotspille (`.pille.weg`); dieselbe Falle wie am * 01.09.2026, deshalb hier gar nicht erst. */ /* ⛔ `.vgesetzt`, NICHT `.gesetzt`: Der blosse Name ist an ZEHN Stellen an * die Filterleiste gebunden (`.filter .feld.gesetzt`) — eine bloss * vergebene Regel hätte jedes gesetzte Filterfeld zum Flex-Behälter * gemacht. ⚠️ Dritter Fall dieser Art an einem Tag, nach `.wer` und * `.mehr`; gefunden hat alle drei `scripts/pruefe-klassennamen.php`. */ .vgesetzt { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .vgesetzt .pille { display: inline-flex; align-items: center; gap: 6px; } .weglink { color: var(--text-leise); text-decoration: none; line-height: 1; padding: 0 1px; font-size: .95em; } .weglink:hover { color: var(--warn-text); text-decoration: none; } /* ⛔ DER NAME IM TELEFONBUCH FÜHRT IN DEN VERLAUF — er sieht deshalb wie ein * Verweis aus, aber erst beim Darüberfahren: In einer Liste aus vierzig * Namen wäre durchgehend Farbe ein Flimmern. */ .mensch-kopf a.was { color: inherit; text-decoration: none; } .mensch-kopf a.was:hover { color: var(--akzent); text-decoration: underline; } /* ⚠️ Der Hinweis am Kontakt im Strang ist ein `title` — dass es einen gibt, * muss man sehen können, sonst zeigt niemand darauf. */ .vwer[title] { text-decoration: underline dotted var(--rand); text-underline-offset: 3px; } /* ── Anklickbare Kontaktwege, 02.09.2026 ─────────────────────────────────── */ /* ⛔ EIN WEG, DER FÜHRT, SIEHT AUS WIE EINER — und einer, der nicht führt, * sieht aus wie Text. ⚠️ Der Unterschied ist die halbe Aussage: Eine * Webseite in der Mailspalte, ein Fax, eine gesperrte Adresse tragen * bewusst keinen Verweis (`kn_ziel()`). */ a.wegwert { color: var(--text); text-decoration: none; } a.wegwert:hover { color: var(--akzent); text-decoration: underline; } /* ⛔ EIN ZEICHEN JE HINTERLEGTEM WEG, nicht eines je Art: Wer drei Nummern * hat, bekommt drei Hörer. ⚠️ Sie stehen dicht beieinander und dürfen die * Zeile nicht auseinanderziehen. */ .erreichbarkeit { display: inline-flex; align-items: center; gap: 5px; } .erreichbar { display: inline-flex; color: var(--text-leise); text-decoration: none; padding: 2px; border-radius: 4px; } .erreichbar:hover { color: var(--akzent); background: var(--akzent-hell); text-decoration: none; } /* ⛔ DER PRIMÄRE WEG WIRD IM VORHANDENEN ZEICHEN HERVORGEHOBEN — keine eigene * Pille (Sebastian, 04.09.2026). ⚠️ NICHT NUR DIE FARBE: Wer sie nicht * unterscheidet, sieht drei gleiche Hörer. Deshalb trägt der Hinweistext am * Zeichen die Auszeichnung mit, und in der Liste steht der Wert fett. */ .erreichbar.primaer { color: var(--akzent); } .wegwert.primaer, a.wegwert.primaer { font-weight: 600; } /* ⚠️ HIER STANDEN ZWEI REGELN FÜR `.mensch-kopf .text` UND `.dazu` — dieselben * Selektoren wie 600 Zeilen weiter oben, gleiche Spezifität, also gewann * die spätere. ⛔ `display: flex; flex-direction: column` machte JEDES Kind * zu einer eigenen Zeile in voller Breite; die Pille „Primär" stand deshalb * unter dem Namen und dehnte sich über die Karte, obwohl `.was` schon * `inline` war. ⭐ Beide Regeln stehen jetzt oben, an EINER Stelle. */ /* ── Das Suchfeld in der Hauptnavigation, 02.09.2026 ─────────────────────── */ /* ⛔ ES STEHT ÜBER DEM ERSTEN MENÜPUNKT und gehört optisch zur Leiste, nicht * zum Inhalt: dunkler Grund, helle Schrift. ⚠️ Ein weisses Feld dort sähe * aus, als läge der Inhalt in der Navigation. */ .suchfeld { display: flex; align-items: center; gap: 7px; margin: 0 12px 10px; padding: 7px 10px; border-radius: 6px; background: var(--leiste-hell); border: 1px solid transparent; } /* ⭐ DAS FELD FÄRBT SICH BEIM TIPPEN — es ist der einzige Ort in der Leiste, * an dem etwas eingegeben wird, und das darf man sehen. */ .suchfeld:focus-within { border-color: var(--akzent); } .suchzeichen { display: flex; flex: 0 0 auto; color: #6b6763; } .suchfeld:focus-within .suchzeichen { color: var(--akzent); } /* ⛔ OHNE EIGENEN RAHMEN UND OHNE EIGENEN GRUND: Das Kästchen ist das Feld * drumherum. ⚠️ `min-width: 0`, sonst wird das Eingabefeld nie schmaler als * seine Vorgabebreite und sprengt die Leiste (Bauregel vom 01.09.2026). * * ⛔ DER LANGE SELEKTOR IST NOTWENDIG, NICHT SCHÖN — und er ist der DRITTE Fall * der Bauregel „Eine Regel, die im Markup steht, WIRKT deshalb noch nicht" * (02.09.2026, im Bild gesehen: das Feld stand WEISS in der dunklen Leiste). * ⚠️ DIE URSACHE IST SPEZIFITÄT, nicht Reihenfolge. Die Formularregel weiter * oben lautet: * input:not([type=hidden]):not([type=checkbox]):not([type=radio]) * ⭐ Jedes `:not()` zählt mit der Spezifität seines Arguments — drei * Attributselektoren ergeben (0,3,1). Ein blosses `.suchfeld input` hat * (0,1,1) und verliert, egal wie weit unten es steht. * ⭐ `.leiste .suchfeld input.suchwort` ist (0,3,1) — GLEICH stark, und bei * Gleichstand gewinnt die spätere Regel in der Datei. * ⛔ KEIN `!important`: Es versteckt die Ursache, und die nächste Regel müsste * dann noch lauter werden (`CLAUDE.md`). */ .leiste .suchfeld input.suchwort { width: auto; flex: 1 1 auto; min-width: 0; font: inherit; font-size: 13px; color: #fff; padding: 0; border: 0; border-radius: 0; background: transparent; outline: none; } /* ⚠️ Auch der Fokusrahmen kommt von oben (`input:focus`) — hier trägt ihn das * Kästchen, nicht das Feld. */ .leiste .suchfeld input.suchwort:focus { outline: none; border-color: transparent; } .suchfeld input::placeholder { color: #6b6763; } /* ⛔ EINE FEINE LINIE ZWISCHEN SUCHFELD UND MENÜ (Sebastian, 03.09.2026): * *„zwischen Suchfeld und HNP Startseite ein leichten Strich wie über bzw. * unter dem HNP Hilfe setzen."* * ⭐ DIESELBE LINIE WIE ÜBER DER HILFE — gleicher Ton, gleiche Abstände. Zwei * Trenner in einer Leiste, die verschieden aussehen, liest man als zwei * verschiedene Aussagen. * ⚠️ `:not(.fussmenue)`, damit die untere Liste ihre eigene Regel behält: Sie * setzt dieselben drei Werte selbst, und zwei Regeln für dasselbe Merkmal * an derselben Stelle sind genau die Falle aus der Bauregel vom 01.09.2026. * ⛔ Ohne die Einschränkung stünden beide auf (0,2,0) — und dann entschiede * die Reihenfolge in der Datei, nicht die Absicht. */ .menue:not(.fussmenue) { padding-top: 8px; margin-top: 4px; border-top: 1px solid #2a2825; } /* ═══════════════════════════════════════════════════════════════════════════ * 39 · TREFFERZEILEN DER SUCHE (A-5.3) * ═══════════════════════════════════════════════════════════════════════════ * * ⛔ JEDER BEREICH TRÄGT DIE ZEILENFORM SEINER EIGENEN LISTE (Sebastian, * 03.09.2026). Deshalb steht hier KEINE neue Optik, sondern nur das, was * die vorhandenen Klassen ausserhalb ihrer Heimat brauchen: * * · den Rahmen der Zeile — Abstand, Trennlinie, das Zeichen links * · die Regeln, die in `stil.css` an `table.tab` hängen und deshalb * ausserhalb einer Tabelle NICHT greifen * * ⛔ DER ZWEITE PUNKT IST DER GANZE GRUND, WARUM ES DIESEN ABSCHNITT GIBT — und * er ist der vierte Fall der Bauregel „Eine Regel, die im Markup steht, * WIRKT deshalb noch nicht": `.haupt` ist NUR in `table.tab` fett, * `.einordnung` NUR dort klein und still, `.neben` NUR dort grau. Die Klasse * im Markup zu haben, hätte nichts bewirkt — der Name stünde in * Grundschrift, und die Gebietszeile wäre so gross wie er. * ⚠️ NICHT die Tabellenregeln lockern: Eine Regel, die überall gilt, trifft * irgendwann etwas, das sie nicht treffen soll. Dieselbe Entscheidung wie * bei `.relevanz .objektfeld`, das auch neben `.posten .objektfeld` steht. */ .trefferliste { padding: 4px 0; } /* ⚠️ `align-items: center`, nicht `baseline`: Links steht ein 48-px-Zeichen und * rechts ein Block aus zwei bis vier Zeilen — an einer Grundlinie * ausgerichtet hinge das Zeichen an der ersten davon. */ .treffer { display: flex; align-items: center; gap: 12px; padding: 12px 18px; min-width: 0; } .treffer + .treffer { border-top: 1px solid var(--rand-zart); } /* ⛔ `min-width: 0` AN BEIDEN TEXTBLÖCKEN. ⚠️ Ein Flex-Kind wird sonst nie * schmaler als sein längster Inhalt, und die Kappung am Gebietsnamen greift * nicht (Bauregel vom 01.09.2026, erster Fall). */ .treffer .accounttext, .treffer .treffertext { flex: 1 1 auto; min-width: 0; } .treffertext { display: flex; flex-direction: column; gap: 1px; } /* ⚠️ DIE ZWILLINGSREGEL ZU `.accounttext .haupt .typ`. ⛔ Die Kontaktzeile * trägt seit dem 03.09.2026 dieselbe Bauform — Funktion und Name zusammen in * EINEM Verweis (Sebastian: *„Der Titel kann auf eine Zeile wie der * Contact.name"*). ⭐ Was den Vorsatz zurücknimmt, ist das Gewicht: Der Name * trägt, die Funktion ordnet ein. ⚠️ NICHT die Accountregel lockern — * `.haupt .typ` ohne Elternteil träfe irgendwann etwas anderes. */ .treffertext .haupt .typ { font-weight: 400; } /* ⛔ DAS GENERISCHE ZEICHEN FÜR GEBIET UND MENSCH — GENAU SO GROSS WIE DAS * SEKTORZEICHEN AM ACCOUNT (Sebastian, 03.09.2026: *„ein gleichgrosses * Personensymbol wie bei Accounts und Gebiet"*). * ⚠️ EIGENER NAME UND NICHT `.sektorzeichen`: Das Sektorzeichen SAGT etwas — * mit wem man spricht. Diese beiden sagen nur, WAS für ein Ding die Zeile * ist. Zwei Aussagen unter einem Namen wären beim nächsten Umbau eine. * ⭐ Die Masse stehen trotzdem in EINER Regel neben denen des Sektorzeichens, * damit sie nicht auseinanderlaufen können. */ .objektzeichen { flex: 0 0 auto; color: var(--text-still); display: inline-flex; } .objektzeichen .zeichen-svg { width: 48px; height: 48px; } /* ── Was sonst an `table.tab` hängt ──────────────────────────────────────── */ .treffer .haupt { font-weight: 600; } .treffer .neben { color: var(--text-leise); font-size: 13px; } /* ⚠️ In der Accountliste steht die Einordnung als DRITTE Zeile unter dem Namen; * die Werte sind trotzdem dieselben wie in der Tabelle — sonst sähe * derselbe Account in zwei Listen verschieden aus. */ .treffer .einordnung { color: var(--text-still); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 2px; } .treffer .einordnung.fehlt { color: var(--weg-text); } /* ⚠️ Ohne `cursor: help` — in der Tabelle trägt die Pille einen `title`, hier * nicht. Ein Hilfezeiger ohne Hilfe dahinter ist ein Versprechen. */ .treffer .pille { padding: 1px 8px 2px; font-size: 11px; font-weight: 600; } /* ⚠️ Dieselben Werte wie `.mensch-kopf .dazu`/`.was` — die Kontaktzeile ist * dort zu Hause. */ .treffer .dazu { font-size: .82rem; color: var(--text-leise); line-height: 1.2; } .treffer .was { display: block; font-weight: 600; } /* ═══════════════════════════════════════════════════════════════════════════ * 40 · DAS SPRUNGVERZEICHNIS DER HILFE (A-Q.14) * ═══════════════════════════════════════════════════════════════════════════ * * ⛔ EINE EINZIGE KLASSE FÜR DIE GANZE SEITE. Alles andere an `hilfe.php` * steht in Karten, Tabellen und Pillen, die es schon gibt — eine * Nachschlageseite, die eigene Optik mitbringt, sieht aus wie ein anderes * Programm und ist genau dann am wenigsten hilfreich. * * ⚠️ SIE IST EIN RASTER, KEINE LISTE MIT PUNKTEN: Elf Abschnitte untereinander * ergäben eine Spalte, die länger ist als der erste Abschnitt — man müsste * am Inhaltsverzeichnis vorbeiscrollen, um zum Inhalt zu kommen. */ .hilfeinhalt { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px 16px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } .hilfeinhalt a { display: block; padding: 3px 0; font-size: 14px; } /* ═══════════════════════════════════════════════════════════════════════════ * 41 · DIE LANDKARTE (A-4.x) * ═══════════════════════════════════════════════════════════════════════════ * * ⛔ ZWEI DARSTELLUNGEN, EIN SATZ FARBEN. Die Kartenkomponente zeichnet SVG- * Pfade in ihre eigenen Ebenen, die serverseitige Fassung ein eigenes * `` — beide tragen dieselben Klassen `kr kr-besetzt` · `kr kr-bekannt` * · `kr kr-leer`. ⚠️ Zwei Farbsätze liefen auseinander, sobald einer * angefasst wird, und niemand sähe es, weil man immer nur einen ansieht. * * ⛔ DIE DREI ZUSTÄNDE UNTERSCHEIDEN SICH NICHT MEHR ÜBER EINEN GRAUWERT. * ⚠️ Genau daran ist die erste Fassung gescheitert (Sebastian, 04.09.2026): * *„Die Unterscheidung der zwei Grauen Flächen ist sehr schwer."* Zwischen * `#f4f2ef` und `#e6e2dc` liegen drei Prozent Helligkeit — auf 401 kleinen * Flächen ist das keine Aussage, sondern ein Rauschen. * * ⭐ JETZT TRENNT SIE DIE ART DER MARKIERUNG, nicht ihre Stärke: * * | Zustand | wie er aussieht | * |---|---| * | `kr-besetzt` | **gefüllt** orange — die eine Aussage, auf die es ankommt | * | `kr-bekannt` | **umrandet** orange, fast ungefüllt — jemand ist da, kauft aber nicht | * | `kr-leer` | nur eine stille Trennlinie — die Karte darunter bleibt sichtbar | * * ⛔ UND DAS ÜBERFAHREN ÄNDERT DIE FARBE NICHT MEHR. ⚠️ Der zweite Befund vom * selben Tag: *„auch die Farbe vom Hover ist fast die der Einfärbung."* * Ein dunkleres Orange über einem Orange sagt zwei Dinge gleichzeitig, und * man weiss nicht, welches gerade gemeint ist. ⭐ Der Hinweis ist deshalb * ein dunkler RAND: Er kann mit keinem Zustand verwechselt werden, weil ihn * kein Zustand trägt. * * ⚠️ DIE FÜLLUNG DER LEEREN FLÄCHEN IST NICHT `none`. Eine Fläche ohne `fill` * ist im SVG in ihrem Inneren NICHT anklickbar — nur ihr Rand. ⛔ Deshalb * steht dort eine Farbe mit `fill-opacity: 0`: unsichtbar, aber vorhanden. */ /* ── Der Kopf: eine Zeile, die später die Filter trägt ───────────────────── ⛔ KEIN `.karte`-RAHMEN UM DIE KARTE. Rahmen, Radius und zweimal Polsterung kosteten rund ein Drittel der Fläche — an dem einen Bauteil, das von Fläche lebt. */ .kartenkopf { display: flex; align-items: baseline; gap: 12px; margin: 0 0 8px; } .kartenkopf h2 { margin: 0; font-size: 15px; } .kartenkopf .rechts { margin-left: auto; } /* ⛔ DIE AUSWAHL IST EINE REIHE ECHTER VERWEISE, KEIN AUSWAHLFELD. ⚠️ Ein Auswahlfeld, das ein Skript auswertet, gäbe es ohne Skript nicht — und die Sicht stünde nicht in der Adresse. */ .kartenwahlleiste { display: inline-flex; gap: 4px; } /* ⛔ DIE DEFINITION HÄNGT AN DER ZAHL, STEHT ABER NICHT DAUERND DA. ⚠️ Sie ist lang; ausgeschrieben schob sie die Auswahl an den Rand. ⭐ `
` braucht dafür kein Skript, und der Kasten legt sich ÜBER die Karte statt die Zeile zu verschieben — sonst springt beim Aufklappen alles darunter. */ .kartendef { position: relative; display: inline-block; } .kartendef > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--rand); color: var(--text-still); font-size: 11px; font-style: italic; font-weight: 700; line-height: 1; } .kartendef > summary::-webkit-details-marker { display: none; } .kartendef > summary:hover { border-color: var(--text-still); color: var(--text); } .kartendef[open] > summary { border-color: var(--text-still); color: var(--text); } .kd-kasten { position: absolute; top: 22px; right: 0; z-index: 950; display: block; width: max-content; max-width: 340px; padding: 8px 10px; background: var(--karte); border: 1px solid var(--rand); border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); font-size: 12px; font-weight: 400; color: var(--text-still); white-space: normal; } .kwl-knopf { display: inline-block; padding: 2px 10px; border: 1px solid var(--rand); border-radius: 999px; font-size: 12px; line-height: 1.6; color: var(--text-still); text-decoration: none; background: var(--karte); } .kwl-knopf:hover { border-color: var(--text-still); color: var(--text); } .kwl-knopf.an { background: #e8590c; border-color: #e8590c; color: #ffffff; font-weight: 600; } /* ⚠️ Die letzte eingeschaltete Ebene lässt sich nicht abschalten — sie steht ohne Verweis da und darf deshalb auch nicht wie einer aussehen. */ .kwl-knopf.fest { cursor: default; } /* ⚠️ Ein schmaler Abstand trennt Flächen von Markern — fünf gleich aussehende Knöpfe in einer Reihe sagen nicht, dass es zwei Sorten sind. */ .kwl-trenner { width: 10px; } /* ⛔ DER PUNKT IM KNOPF IST DIE LEGENDE. ⚠️ Drei weitere Zeilen unter der Karte hätten dasselbe gesagt und mehr Platz gekostet. ⚠️ HIER STAND DER UMWEG ÜBER DAS SKRIPT: `karte.js` las die Farbe hier mit `getComputedStyle` ab, weil eine Zeichenfläche kein CSS kennt. ⭐ Seit die Marker einzelne Elemente sind, greift CSS direkt; geteilt wird jetzt die Variable, nicht der Messwert. */ .mkpunkt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; background: var(--mk-wehr); border: 0 solid transparent; } /* ⛔ DIE FARBE SAGT DIE GRUPPE, DER RAND HEBT AB. ⚠️ Zuerst trug der Rand die Unterscheidung Werkfeuerwehr gegen öffentliche; seit auch der Berater einen hat, trägt sie die FARBE — rot gegen orange —, und der Rand trennt den Punkt vom Kartengrund. ⭐ Die öffentliche Feuerwehr braucht ihn nicht: Sie ist mit Abstand die grösste Gruppe, und ein Rand an tausend Punkten macht aus der Karte ein Raster. */ .mk-oeff { background: var(--mk-wehr); border: 1px solid var(--mk-rand); } .mk-werk { background: var(--mk-wehr); border: 2px solid var(--mk-rand); } .mk-berater { background: var(--mk-berater); border: 2px solid var(--mk-rand); } .kwl-knopf.an .mkpunkt { box-shadow: 0 0 0 1px #ffffff; } /* ── Die Kartenkomponente ────────────────────────────────────────────────── ⚠️ SIE BRAUCHT EINE FESTE HÖHE. Leaflet misst seinen Behälter beim Anlegen; ein Element, das seine Höhe aus dem Inhalt bezöge, wäre in diesem Moment null Pixel hoch, und die Karte bliebe unsichtbar — ohne Fehlermeldung. ⛔ DER BEREICH IST DER BEZUGSPUNKT für das Auswahlfeld darüber — deshalb `relative`, und deshalb ist er kein Rahmen: kein Rand, keine Polsterung. */ .kartenbereich { position: relative; } .kartenfeld { height: min(78vh, 900px); min-height: 380px; background: var(--karte); border: 1px solid var(--rand-zart); border-radius: 6px; /* ⛔ Die Karte liegt in einer eigenen Schicht — sonst schiebt sich ihr Bedienfeld unter die Kopfzeile der Seite. */ z-index: 0; } /* ⛔ DIE KACHELN SIND HINTERGRUND UND WERDEN ZURÜCKGENOMMEN. ⚠️ Beim Hineinzoomen bringt basemap.de jede Straße und jeden Ortsnamen mit; in dieser Dichte gehen die Punkte unter, um die es geht. ⭐ Nur die KACHELEBENE — Flächen, Grenzen und Marker liegen darüber und bleiben in voller Stärke. ⚠️ ES IST OPAZITÄT, KEIN FILTER: Sie mischt gegen den weissen Grund des Kartenfelds, ist damit vorhersehbar und kostet nichts. Ein `filter` erzwänge auf jeder Zoomstufe eine neue Schicht. */ .kartenfeld .leaflet-tile-pane { opacity: var(--karte-staerke); } /* ⛔ DER LADEHINWEIS LIEGT ÜBER DER KARTE. ⚠️ Unter ihr stand er ausserhalb des Blicks — man wartet auf die Punkte und sieht dabei die Karte an, nicht die Zeile darunter. ⭐ OBEN MITTE, nicht in einer Ecke: Er ist keine Anmerkung, sondern die Antwort auf „warum passiert nichts". ⚠️ `z-index` über Leaflets Bedienfeldern (die liegen bei 800), aber unter dem Auswahlfeld (900) — beide können gleichzeitig dastehen. */ .kartenladen { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 850; background: var(--karte); border: 1px solid var(--rand); border-radius: 999px; padding: 5px 14px; font-size: 13px; color: var(--text-leise); box-shadow: 0 1px 4px rgb(0 0 0 / .10); } .kartenfehler, .kartenleer { margin-top: 8px; } /* ── Das Auswahlfeld ─────────────────────────────────────────────────────── ⛔ ES STEHT AN FESTER STELLE, nicht am Ort des Klicks. ⚠️ Eine Sprechblase deckt den Kreis zu, den sie beschreibt, springt bei jedem Klick woanders hin und bringt ihre eigene Optik mit. ⭐ Dies ist eine Karte des Werkzeugs, keine Blase der Bibliothek. ⚠️ `z-index` über Leaflets Bedienfeldern (die liegen bei 800). */ .kartenwahl { position: absolute; top: 10px; right: 10px; z-index: 900; width: min(300px, calc(100% - 20px)); display: grid; gap: 4px; padding: 10px 12px; background: var(--karte); border: 1px solid var(--rand); border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); font-size: 13px; } .kartenwahl .kw-name { font-size: 14px; padding-right: 18px; } .kartenwahl .kw-bez { color: var(--text-still); font-size: 12px; } .kartenwahl .kw-wer { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; } .kartenwahl .kw-wer li { line-height: 1.35; } /* ⛔ ZWEI ZUSTÄNDE, ZWEI ZEICHEN — dieselbe Aussage wie die Flächenfarbe, nur am Namen. Ein gefüllter Punkt heisst Kunde. */ .kartenwahl .kw-ja::before, .kartenwahl .kw-nein::before { content: '●'; margin-right: 6px; font-size: 10px; vertical-align: 1px; } .kartenwahl .kw-ja::before { color: #e8590c; } .kartenwahl .kw-nein::before { color: var(--rand); } .kartenwahl .kw-ziel { justify-self: start; margin-top: 4px; font-weight: 600; } .kartenwahl .kw-zu { position: absolute; top: 4px; right: 6px; border: 0; background: none; cursor: pointer; font-size: 16px; line-height: 1; color: var(--text-still); padding: 2px 4px; } .kartenwahl .kw-zu:hover { color: var(--text); } /* ── Die serverseitige Fassung ───────────────────────────────────────────── ⛔ KEIN `preserveAspectRatio: none`. Die Kachelfläche in `gebiete.php` darf gestaucht werden, sie ist keine Geografie. ⚠️ Eine gestauchte Landkarte ist eine FALSCHE Landkarte. */ .landkarte { width: 100%; height: auto; display: block; background: var(--karte); border: 1px solid var(--rand-zart); border-radius: 6px; } .landkarte a { cursor: pointer; } /* ── Die drei Zustände, für beide Fassungen ──────────────────────────────── ⚠️ `stroke-width` in Nutzereinheiten: Das serverseitige SVG skaliert mit der Spaltenbreite, und eine px-Linie würde dabei dicker. In der Karten- komponente ist die Einheit ohnehin der Bildschirmpunkt. */ .landkarte .kr, .leaflet-pane .kr { fill: #e8590c; stroke: #e8590c; transition: fill-opacity .08s, stroke-opacity .08s; } /* ⛔ LEER — die Fläche bleibt frei, DIE GRENZE NICHT. ⚠️ HIER STAND EIN GRAUES `#6b6560` BEI 40 %, und über den Kacheln verschwand es: eine Kreisgrenze, die man nicht sieht, ordnet keinen Marker ein (Sebastian, 04.09.2026: *„sonst erkenne ich sie nicht"*). ⭐ Sie erbt jetzt `stroke` aus `.kr` — dieselbe Farbe wie die gefüllten Flächen. ⛔ DER UNTERSCHIED IST DIE FÜLLUNG, NICHT DIE FARBE. ⚠️ Zwei Farben behaupteten zwei Sachen; es ist EIN Netz, in dem manche Felder gefüllt sind. ⭐ Die Linie bleibt dünner und etwas blasser als die der besetzten (1 gegen 1.2), damit die Aussage vorn liegt. */ .leaflet-pane .kr-leer { fill-opacity: 0; stroke-opacity: .85; stroke-width: 1; } /* ⛔ DIE SERVERSEITIGE FASSUNG BRAUCHT DAS NICHT — und darf es nicht haben. ⚠️ Dort liegt KEINE Karte darunter: Die leere Fläche ist beige gefüllt und damit ohnehin sichtbar, und die Trennlinien sind WEISS, weil sonst benachbarte gefüllte Kreise ineinander liefen. ⭐ Ein oranges Netz wäre hier kein Gewinn, sondern ein Bruch — dieselbe Absicht, andere Mittel, weil der Hintergrund ein anderer ist. */ .landkarte .kr-leer { fill: #f4f2ef; fill-opacity: 1; stroke: #ffffff; stroke-opacity: 1; stroke-width: 1.1; } /* ⛔ BEKANNT, ABER KEIN KUNDE — der Kreis ist gezeichnet, nicht ausgefüllt. */ .landkarte .kr-bekannt, .leaflet-pane .kr-bekannt { fill-opacity: .10; stroke-opacity: .90; stroke-width: 1.8; } /* ⛔ KUNDE — DIE EINZIGE GEFÜLLTE FLÄCHE, und ihre STÄRKE sagt, auf welcher Ebene. ⭐ Zwei Töne derselben Farbe statt zweier Farben: Die Karte trägt damit EINE Aussage („hier ist jemand Kunde") in zwei Dichten, statt zwei Aussagen, die man auseinanderhalten muss. ⚠️ DIE ÜBERLAGERUNG IST EINE EIGENE REGEL, keine Summe: `.kr-ukb.kr-kommunal` ist dunkler als beide einzeln — und sie steht NACH ihnen, sonst gewinnt bei gleicher Spezifität die spätere. */ .landkarte .kr-besetzt, .leaflet-pane .kr-besetzt { fill-opacity: .55; stroke-opacity: 1; stroke-width: 1.2; } .landkarte .kr-kommunal, .leaflet-pane .kr-kommunal { fill-opacity: .28; } .landkarte .kr-ukb, .leaflet-pane .kr-ukb { fill-opacity: .55; } .landkarte .kr-ukb.kr-kommunal, .leaflet-pane .kr-ukb.kr-kommunal { fill-opacity: .80; } /* ⚠️ Ohne Karte darunter trägt die Füllung allein; halbdurchsichtig sähe sie dort blass aus — die Abstufung bleibt, der Sockel ist höher. */ .landkarte .kr-besetzt { stroke: #ffffff; stroke-width: 1.1; } .landkarte .kr-kommunal { fill-opacity: .45; } .landkarte .kr-ukb { fill-opacity: .80; } .landkarte .kr-ukb.kr-kommunal { fill-opacity: 1; } /* ⛔ DER HINWEIS BEIM ÜBERFAHREN IST EIN RAND, KEINE FARBE. */ .landkarte a:hover .kr, .landkarte a:focus-visible .kr, .leaflet-pane .kr:hover { stroke: var(--text); stroke-opacity: 1; stroke-width: 2.4; } /* ⛔ DER GEWÄHLTE KREIS — eine eigene Ebene über der Fläche, ohne Füllung. ⚠️ Sie fängt keine Klicks (`interactive: false` im Skript); ohne das wäre der Kreis darunter nach dem ersten Klick nicht mehr erreichbar. */ .leaflet-pane .kr-gewaehlt { fill-opacity: 0; stroke: var(--text); stroke-opacity: 1; stroke-width: 2.6; } /* ⛔ KEIN FOKUSRAHMEN UM DIE FLÄCHE. ⚠️ Der Browser zeichnet ihn nach einem Klick um die BOUNDING BOX des Pfades — ein schwarzes Rechteck quer über die Karte, das aussieht wie ein Fehler und keiner ist. ⭐ Die Auswahl zeigt der hervorgehobene Umriss, und der folgt der Form. */ .leaflet-pane .kr:focus { outline: none; } /* ⛔ OHNE RASTER VERSCHWINDET DER KREIS, DER NICHTS SAGT — und zwar wirklich, nicht nur optisch: `pointer-events: none` nimmt ihm auch den Klick und das Überfahren. ⚠️ Unsichtbar allein wäre schlimmer als sichtbar — man klickte auf die Kachelkarte und bekäme ein Auswahlfeld über einen Kreis, den man nicht sieht. ⛔ ES TRIFFT NUR `kr-leer`. ⚠️ `kr-bekannt` sagt „hier ist jemand, aber kein Kunde" — das ist eine Aussage der gewählten Ebene und bleibt stehen, auch ohne Raster. ⭐ Ist KEINE Ebene gewählt, ist ohnehin jede Fläche `kr-leer`; dieselbe Regel räumt damit die ganze Karte, ohne einen zweiten Fall. ⚠️ Die Klasse hängt am CONTAINER, weil das Raster nichts über den einzelnen Kreis sagt — sonst trüge jede der 401 Flächen ein Wort für eine Entscheidung, die für alle zugleich gilt. */ .kartenfeld:not(.mit-raster) .kr-leer, .landkarte:not(.mit-raster) .kr-leer { fill-opacity: 0; stroke-opacity: 0; pointer-events: none; } /* ⚠️ Ein Kreis ohne Gebiet im Baum ist NICHT verlinkt — er darf trotzdem nicht wie ein Loch aussehen, sondern trägt seinen Vermerk im Titel. */ .landkarte .kr.ohnegebiet { stroke-dasharray: 3 3; } /* ── Die Marker auf der Karte ────────────────────────────────────────────── ⛔ SIE LIEGEN IN EINER EIGENEN EBENE ÜBER DEN FLÄCHEN und sind trotzdem keine Sperre: Bei einzelnen Elementen fängt nur der Kreis selbst den Klick, alles daneben fällt auf die Fläche darunter durch. ⚠️ MIT EINER ZEICHENFLÄCHE GING DAS NICHT. Sie ist EIN Element über der ganzen Karte — oben liegend hätte sie jeden Klick geschluckt, auch den zwischen zwei Punkten, und die Kreise wären unerreichbar geworden. ⚠️ DER PREIS IST BENANNT: rund tausend Elemente statt einer Fläche. Wird das Zoomen zäh, ist der Rückweg die Zeichenfläche — und mit ihr der Verlust des Klicks auf die Fläche. ⭐ DIE FARBEN KOMMEN AUS DENSELBEN VARIABLEN WIE DIE PUNKTE IN DEN KNÖPFEN. */ /* ⛔ JEDER PUNKT BEKOMMT EINEN RAND. ⚠️ Ohne ihn verschwimmt er mit dem, was unter ihm liegt — auf den zurückgenommenen Kacheln, in einer gefärbten Fläche und erst recht dort, wo tausend Punkte dicht beieinander stehen. ⛔ ABER NICHT ALLE GLEICH DICK, und das ist keine Feinheit: Öffentliche und Werkfeuerwehr tragen DIESELBE Farbe. ⚠️ Bekämen beide denselben Rand, wären sie nicht mehr zu unterscheiden — der dickere Rand IST das Merkmal der Werkfeuerwehr. ⭐ Der Berater trägt seinen dicken Rand, weil Orange auf hellem Grund den schwächsten Kontrast von dreien hat. */ .leaflet-pane .kmk { stroke: var(--mk-rand); stroke-width: 1; } .leaflet-pane .kmk-oeff { fill: var(--mk-wehr); } /* ⛔ DER RAND WIE IM KNOPF — die Legende und die Karte zeigen dieselbe Gestalt. */ .leaflet-pane .kmk-werk { fill: var(--mk-wehr); stroke: var(--mk-rand); stroke-width: 2; } .leaflet-pane .kmk-berater { fill: var(--mk-berater); stroke: var(--mk-rand); stroke-width: 2; } /* ⛔ EIN PUNKT AUS DER POSTLEITZAHL MEINT EIN GEBIET, KEIN HAUS. ⚠️ Dieselbe Darstellung für beides wäre eine stille Falschaussage — die Entsprechung zum `≈` der Umkreissuche. */ .leaflet-pane .kmk { fill-opacity: .9; } .leaflet-pane .kmk-ungenau { fill-opacity: .45; } /* ⛔ DER GESUCHTE ACCOUNT IST EINE ZIELSCHEIBE, KEIN MARKER. ⚠️ Er sagt etwas anderes: nicht „hier sitzt ein Kunde dieser Art", sondern „das ist der, den Du sehen wolltest". ⚠️ HIER STAND DIE AKZENTFARBE — und die ist Orange, also fast die des Beraters und die der Kreisgrenzen. ⛔ Ein vierter Farbton in einer Karte, die schon drei trägt, ist kein Unterschied, sondern Rauschen. ⭐ WEISS MIT SCHWARZEM RING trägt in jeder Umgebung: Es ist die einzige Gestalt auf dieser Karte, die KEINE Farbe behauptet. */ .leaflet-pane .kmk-gesucht { fill: #ffffff; fill-opacity: 1; stroke: var(--mk-rand); stroke-width: 3; } /* ⛔ UND DER PUNKT IN DER MITTE MACHT DIE ZIELSCHEIBE. ⚠️ Ein weisser Ring allein sähe aus wie ein Loch in der Karte. */ .leaflet-pane .kmk-gesuchtkern { fill: var(--mk-rand); fill-opacity: 1; stroke-width: 0; } /* ⛔ DER GEWÄHLTE MARKER, wie die gewählte Fläche: ein Rand, keine Farbe. */ .leaflet-pane .kmk-gewaehlt { stroke: var(--text); stroke-opacity: 1; stroke-width: 3; } .leaflet-pane .kmk:focus { outline: none; } /* ── Die Legende ─────────────────────────────────────────────────────────── ⛔ SIE ZEIGT DIESELBEN DREI ZUSTÄNDE, mit denselben Mitteln: gefüllt, umrandet, still. ⚠️ Eine Legende, die drei Grautöne zeigt, während die Karte Ränder benutzt, erklärt eine andere Karte. */ .legende.kartenlegende .feld { background: transparent; border: 1px solid #6b6560; opacity: .55; } .legende.kartenlegende .feld.kr-bekannt { background: rgba(232, 89, 12, .10); border: 2px solid #e8590c; opacity: 1; } /* ⛔ DIE LEGENDE ZEIGT DIESELBEN DICHTEN WIE DIE KARTE. ⚠️ Eine Legende mit einem Vollton neben einer halbdurchsichtigen Fläche erklärt eine andere Karte. */ .legende.kartenlegende .feld.kr-besetzt { background: #e8590c; border: 1px solid #e8590c; opacity: .55; } .legende.kartenlegende .feld.kr-besetzt.kr-kommunal { opacity: .28; } .legende.kartenlegende .feld.kr-besetzt.kr-ukb { opacity: .55; } .legende.kartenlegende .feld.kr-besetzt.kr-ukb.kr-kommunal { opacity: 1; } .legende.kartenlegende span { display: inline-flex; align-items: center; gap: 5px; } /* ⛔ DIE QUELLENANGABE IST BEDINGUNG DER NUTZUNG (dl-de/by-2-0 für die Flächen, CC BY 4.0 für die Kacheln), keine Höflichkeit — sie steht deshalb sichtbar und nicht in einem `title`. ⚠️ Das BKG verlangt für die Kacheln ausdrücklich VERLINKTE Nennungen; ein Verweis, der wie Fliesstext aussieht, erfüllt das nicht. */ /* ⛔ DER BEFUND FÜR DIE DATENPFLEGE — gezählt, nicht gezeichnet. ⚠️ Er steht unter der Legende und nicht auf der Karte: Ein Kunde, der falsch eingeordnet ist, gehört korrigiert, nicht abgebildet. */ .kartenbefund { margin: 6px 0 0; font-size: 12px; color: var(--weg-text); } .kartenquelle { margin: 8px 0 0; font-size: 11px; color: var(--text-still); } .kartenquelle a { color: var(--text-still); text-decoration: underline; } .kartenquelle strong { color: var(--weg-text); font-weight: 600; } /* ── Produkte und Lizenzen laut Belegen — das SOLL (A-3.1, A-4.1) ────────── ⛔ EINE LISTE, KEINE TABELLE: Drei Angaben je Zeile — Name, Stand, Menge — und die Menge steht rechtsbündig, weil man sie untereinander liest. ⚠️ DIE ZAHLENSPALTE HAT EINE FESTE BREITE. Ohne sie wandert sie mit der Länge des längsten Namens, und zwei Gruppen untereinander stünden auf verschiedenen Achsen. */ .prod-liste { padding: 4px 0 8px; } .prod-gruppe + .prod-gruppe { margin-top: 14px; } .prod-kopf { display: flex; align-items: baseline; gap: 10px; padding: 6px 18px 4px; border-bottom: 1px solid var(--rand-zart); } .prod-kopf h3 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-still); } .prod-summe { margin-left: auto; font-size: 14px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; } /* ⛔ NUR WO SIE ETWAS SAGT — die Regel steht in PHP, hier nur ihr Aussehen. */ .prod-unter { padding: 8px 18px 2px; font-size: 12px; color: var(--text-leise); } .prod-zeile { display: flex; align-items: baseline; gap: 10px; padding: 4px 18px; } .prod-zeile:hover { background: var(--rand-zart); } /* ⛔ `min-width: 0` LÄSST DIE ZELLE ÜBERHAUPT ERST SCHMALER WERDEN — ohne sie greift die Kappung nicht, und ein langer Name schiebt die Zahl heraus. */ .prod-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .prod-wann { flex: 0 0 auto; font-size: 12px; } .prod-menge { flex: 0 0 4.5em; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; } /* ⛔ EIN NEGATIVER STAND IST EIN PFLEGEFEHLER, kein Rechenergebnis. */ .prod-menge.mahnt { color: var(--weg-text); } @media (max-width: 700px) { .prod-wann { display: none; } } /* ── Das Portalkonto — Module, Zahlen, Notizen ───────────────────────────── ⛔ SIE HABEN EINEN TAG LANG GEFEHLT (06.09.2026). Die Karte war gebaut, das Markup trug `prt-liste`, `prt-zeile` und sechs weitere — und in dieser Datei stand keine einzige Regel dazu. ⚠️ Die Karte stand am Bildschirm als unformatierter Fliesstext da, und KEINE Probe hat es gesehen: `pruefe-klassennamen.php` beantwortet „ist der Name belegt", nicht „hat der Name eine Regel". ⭐ Seither prüft `gegenprobe-account.php`, dass jede Klasse aus der Präfixfamilie im Markup hier eine Regel hat. ⭐ SIE STEHEN IN DENSELBEN MASSEN WIE `.prod-*` — beide sind Listen in einer Karte, und zwei Bauteile derselben Art an verschiedenen Achsen sähen aus wie ein Fehler. ⚠️ Eigene Namen behalten sie trotzdem: gleiche Masse, verschiedene Sache. */ .prt-liste { padding: 4px 0 8px; } .prt-zeile { display: flex; align-items: baseline; gap: 10px; padding: 4px 18px; } .prt-zeile:hover { background: var(--rand-zart); } /* ⛔ `min-width: 0` LÄSST DIE ZELLE ÜBERHAUPT ERST SCHMALER WERDEN — ohne sie greift die Kappung nicht, und ein langer Modulname schiebt die Laufzeit heraus. Dieselbe Falle wie bei `.prod-name`. */ .prt-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ⚠️ Ein Modul ohne Titel trägt seinen technischen Namen in Klammern — er ist eine Lücke im Portal, keine bei uns, und wird deshalb still gesetzt statt gemahnt. */ .prt-name.fehlt { color: var(--text-still); font-style: italic; } .prt-lauf { flex: 0 0 auto; font-size: 12px; font-variant-numeric: tabular-nums; } /* ⛔ ZWEI SPALTEN, NICHT DREI: „was" und „wert". ⚠️ Die Zahlen des Kontos sind keine Menge über der Zeit, sondern ein Stand — sie brauchen kein Datum. */ .prt-zahlen { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 18px; padding: 6px 18px 10px; } .prt-zahl { display: flex; align-items: baseline; gap: 10px; } /* ⛔ DER FUND AUS DEM PORTAL WIRD ABGESETZT, damit man sieht, dass er NICHT von uns kommt. ⚠️ Stünde er wie ein eigenes Feld da, sähe die Maske aus, als sei schon verknüpft — vorgeschlagen ist aber nur vorgeschlagen. */ .prt-fund { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-left: 3px solid var(--akzent); background: var(--rand-zart); } .prt-fund strong { font-weight: 600; } .prt-was { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-still); font-size: 12px; } .prt-wert { flex: 0 0 auto; font-weight: 600; font-variant-numeric: tabular-nums; } /* ── Frühere Bestellungen — die Notizen aus dem Altsystem ────────────────── ⛔ DAS DATUM HAT EINE FESTE BREITE, damit die Notizen untereinander an derselben Stelle beginnen. ⚠️ Ohne sie richtete sich die Textkante nach dem längsten Datum der Liste, und eine Zeile ohne Datum („—") verschöbe alles daneben. ⛔ `pre-wrap` UND NICHT `nl2br()`: Der Freitext trägt eigene Zeilenumbrüche, und die gehören in die Gestaltung, nicht als `

` in die Daten. ⚠️ `overflow-wrap` fängt den Fall, für den es keine Kappung gibt — eine Notiz ist ganz zu lesen oder gar nicht, also wird sie umgebrochen und nicht abgeschnitten. Gemessen: 76 Zeichen im Schnitt, 873 im längsten. */ .alt-liste { padding: 4px 0 8px; } .alt-zeile { display: flex; align-items: baseline; gap: 12px; padding: 5px 18px; } .alt-zeile:hover { background: var(--rand-zart); } .alt-wann { flex: 0 0 6.5em; font-size: 12px; color: var(--text-still); font-variant-numeric: tabular-nums; } .alt-notiz { flex: 1 1 auto; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; } @media (max-width: 700px) { .prt-lauf { font-size: 11px; } .alt-zeile { flex-direction: column; gap: 2px; } .alt-wann { flex: 0 0 auto; } }