/** * sections/einstellungen/einstellungen.css — SettingsShell (Settings-Framework §4). * * Self-scoped `.einst-*`/`.setx-*` unter `.einst-wrap` bzw. im Settings-Drawer-Body. * NUR Layout/Formsprache der Settings-Fläche — die Bausteine kommen aus den globalen * SSOTs (`.app-switch`, `.app-drawer-input`, CustomSelect, `.lod-surface`, `.app-cta-btn`, * `.lod-info-banner`). Akzent durchgängig Darkblue/Brand — nie der orange Tertiär-Accent. * Formsprache (Spec 2026-07-26): Satz-Formulare, Gruppen-Header, Katalog-Zeilen mit * Icon-Chip in Art-Farbe, Kennzahlen-Karten, Drawer-Editor (.setx-*). Vier Breakpoints. */ /* Links Navigations-KARTE, rechts die Sektions-KARTEN auf dem grauen Hintergrund. Bis 2026-07-29 lag dort EINE große weiße Pane und die Sektionen als weiße Karten DARIN — weiß auf weiß mit einer Kante dazwischen. Diese Hülle war der Grund, warum der leere Platz nicht wegzubekommen war: eine Pane über die volle Bildschirmbreite verspricht 1844px Inhalt, und ein Formular hat nun einmal ein Lesemaß. Im Browser bei 2248px gemessen standen 676px Weiß INNERHALB der Sektionskarte. Wer die Karte deckelt, verschiebt das Loch nur eine Ebene nach oben in die Pane; wer die Pane deckelt, nimmt den Tabellen-Sektionen ihre Breite (5 von 16 Bereichen mischen Formular- und Tabellen-Sektionen). Also: keine Hülle. Die Karte ist die Fläche, und sie ist so breit wie ihr Inhalt. */ /* ── Wurzel der Fläche: hier stehen die Maße ────────────────────────────────── Die Tokens hängen an der SECTION-Wurzel und nicht an `.einst-wrap`, weil die Toolbar (Suchfeld + Treffer-Panel) ein Geschwister der Inhalts-Pane ist und dasselbe Maß braucht. Läge `--einst-karte` weiter unten, könnte `--einst-flaeche` es nicht ableiten — und eine zweite, handgepflegte Zahl ist genau das, was hier schon zweimal auseinandergelaufen ist. */ .einst-root { /* ── EINE BREITE FÜR DIE GANZE FLÄCHE ──────────────────────────────────────── `--einst-karte` gilt für JEDE Sektionskarte, die Kopfzeile und das Skeleton — ohne Ausnahme, egal ob Feldzeilen, Tabelle, Karten-Raster, Rich-Text-Editor oder Panel darin liegen. Es gibt keine zweite Zahl. WARUM KEINE INHALTS-ABHÄNGIGEN MASSE (zwei Anläufe, beide verworfen): Erst bekam jede Karte das Maß ihres eigenen Inhalts (Formular 800 · Editor 1140 · Tabelle volle Breite), dann eines je Bereich. Pro Karte ist das begründbar, in der SPALTE ist es eine Treppe: in „Allgemein" endeten die Karten bei 823 / 2130 / 2130 / 2130px, in „Anfragen & SLA" wechselte es zwischen Formular und Antwort-Vorlagen hin und her. ZUGEKLAPPT bleiben davon nur verschieden lange Köpfe ohne jeden sichtbaren Grund. Kyle 29.07.: „EINE BREITE FÜR DIE GESAMTE SETTINGS STRUKTUR." Der Preis ist bewusst bezahlt: ein Panel (Rechtevergabe, Artikel-Preise) hat hier weniger Platz als über die volle Bildschirmbreite. Einheitlichkeit der Fläche wiegt mehr als das Optimum einer einzelnen Sektion. 1116px = 1082px Zeilenmaß (`--set-mass`, settings-row.css) + 2×16px Innenluft + 2px Rahmen. Die Zeile FÜLLT diese Breite, es bleibt also kein Weiß in der Karte. Tabellen tragen es ohne Not: derselbe Wochenplan rendert im Standort-Drawer auf 590px einwandfrei. ── WARUM 1116 UND NICHT 800 (2026-07-29, 2) ──────────────────────────────── Kyle-Vorgabe: „Den Settings bereich so groß machen wie er jetzt grade + Menüleiste links an der Seite ist" — 800 (alte Karte) + 16 (Spalten-Abstand) + 300 (Menüleiste) = 1116. Die Menüleiste bleibt LINKS DANEBEN (Muster Projektaufnahme: `nav | main`, beide im selben Grid, Nav sticky). ★ DIE ZEILE WÄCHST MIT. Das ist keine Nebenwirkung, sondern die Bedingung: eine breitere Karte über einem unveränderten Zeilenmaß hätte 340px Weiß INNEN — derselbe Fehler, den die 800px behoben haben, nur eine Ebene tiefer. Die Beziehung der beiden Zahlen ist deshalb gate-geprüft (siehe dort). */ --einst-karte: 1116px; --einst-nav: 300px; /* ── DER DECKEL DER FLÄCHE — ABGELEITET, NICHT GEWÄHLT ─────────────────────── Bis 2026-07-29 hatte die Fläche KEIN Maximum. Das war kein falscher Wert, sondern ein fehlender: jeder andere Tab (Board, Firmen-Tabelle, Dashboards) will die volle Breite, `lod-section-panel` ist deshalb ungedeckelt — und die Einstellungen haben das geerbt, obwohl ihr Inhalt ein natürliches Lesemaximum hat. Folge, im Browser über alle 16 Bereiche gemessen: Nav + Karte sind konstant 1116px, jeder weitere Pixel Fensterbreite wurde zu Weiß NEBEN der Karte — 76px bei 1280, 626px bei 1830, 1356px bei 2560 (63% der Inhaltsspalte). Unter ~1400px ist davon nichts zu sehen; deshalb haben drei Anläufe an der Kartenbreite das Problem nie berührt. `calc()` statt einer Zahl, damit es keine zweite Wahrheit gibt: der Deckel IST Nav + Spalten-Abstand + Karte. Rest-Weiß in der Inhaltsspalte ist dadurch 0 by construction, nicht „klein gehalten" — und wer `--einst-karte` ändert, ändert den Deckel automatisch mit. Geprüft wird beides: statisch, dass der Deckel abgeleitet bleibt (settings-breiten-vertrag.js), und live, dass kein Weiß entsteht (check:settings-live). Preis, bewusst bezahlt: die Einstellungen sind der einzige Bereich mit Seitenrändern. Vertretbar, weil Konfiguration Lesen und Formular ist und kein Arbeitswerkzeug — aber es ist eine sichtbare Ausnahme. */ /* Spalten-Abstand als EIGENES Token, und die Flaechen-Rechnung liest genau dieses. Vorher stand `--space-4` an beiden Stellen: wer den Abstand aendert und die Rechnung vergisst, bekommt Rest-Weiss in der Inhaltsspalte — die Drift ist im Browser sichtbar, im Quelltext nicht. 20px statt 16px (Kyle 30.07.: „berührt seine Seitenleiste"): gemessen berührte nichts (16px Luecke ueber fuenf Breiten), aber zwei grosse WEISSE Flaechen auf Grau brauchen mehr Luft als zwei Elemente innerhalb einer Karte — und genau `--space-4` ist der Abstand, den die Karte INNEN verwendet. Gleicher Abstand innen und aussen laesst die Trennung verschwinden. */ --einst-spalten-luecke: var(--space-5); --einst-flaeche: calc(var(--einst-nav) + var(--einst-spalten-luecke) + var(--einst-karte)); } .einst-wrap { max-width: none; margin: 0; padding: 0 0 var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); min-height: 100%; } /* ── Such-Treffer-Panel (unter der Section-Toolbar, links verankert) ─────────── Anker ist die ZONE, nicht die Toolbar: die Toolbar trägt jetzt (konventionsgemäß) `lod-section-toolbar app-page-toolbar` auf einem Element, und PageToolbar schreibt deren `innerHTML` — ein Kind darin würde beim Aufbau überschrieben. */ .einst-toolbarzone { position: relative; flex-shrink: 0; } /* Lade-Skeleton in der Form der Fläche (Nav + Pane), damit beim Erscheinen der Daten nichts springt. Vorher: 3s leere Fläche (gemessen). */ .einst-sk { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--space-4); align-items: start; } .einst-sk-nav { padding: var(--space-4); } /* Bahnen und Deckel wie die echte Karte (240 / 412, Deckel `--einst-karte`) — sonst springt beim Erscheinen der Daten genau das, was das Skeleton verhindern soll: eine bildschirmbreite Platzhalter-Fläche, die auf 740px zusammenfällt. */ .einst-sk-pane { padding: var(--space-4); min-height: 60vh; max-width: var(--einst-karte); } .einst-sk-kopf { padding-bottom: var(--space-4); border-bottom: 1px solid var(--lod-gray-100); margin-bottom: var(--space-3); } .einst-sk-row { display: grid; grid-template-columns: 240px minmax(0, 412px); gap: var(--space-3); padding: var(--space-3) 0; } /* 999, nicht 1199: das ECHTE Layout kollabiert bei ≤999 auf eine Spalte (unten). Mit 1199 zeigte das Skeleton im Band 1000–1199 eine Spalte, die Daten kamen zweispaltig an — genau der Sprung, den das Skeleton verhindern soll. */ @media (max-width: 999px) { .einst-sk { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 599px) { .einst-sk-row { grid-template-columns: minmax(0, 1fr); } } .einst-search-panel { /* Folgt der ZENTRIERTEN Toolbar, nicht dem Fensterrand: `max()` klammert von selbst — sobald die Toolbar breiter ist als der Deckel, wird der calc-Term kleiner als die Innenluft und die Innenluft gewinnt. Ohne das öffnete das Treffer-Panel am linken Bildschirmrand, während das Suchfeld mittig steht. */ position: absolute; top: 100%; z-index: 40; left: max(var(--space-4), calc((100% - var(--einst-flaeche)) / 2 + var(--space-4))); min-width: min(380px, 88vw); max-width: min(520px, 92vw); max-height: 360px; overflow-y: auto; background: var(--color-surface); border: 1px solid var(--lod-border); border-radius: var(--radius-md); box-shadow: var(--shadow-8); padding: var(--space-1); } .einst-search-panel[hidden] { display: none; } .einst-search-hit { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; padding: var(--space-2) var(--space-2-5); border: none; background: none; cursor: pointer; border-radius: var(--radius-sm); } .einst-search-hit:hover { background: var(--lod-gray-50); } .einst-search-pfad { font-size: var(--fs-badge, 11px); color: var(--lod-gray-500); } .einst-search-label { font-size: var(--fs-body, 14px); font-weight: var(--fw-medium); color: var(--color-text); } .einst-search-leer { padding: var(--space-3); font-size: var(--fs-meta, 12px); color: var(--color-text-muted); } .einst-banner-box { display: flex; align-items: flex-start; gap: var(--space-2); margin-top: 0; } .einst-banner-box .ui-ico { flex-shrink: 0; margin-top: 1px; } /* ── Zwei-Spalten-IA ─────────────────────────────────────────────────────────── */ .einst-layout { display: grid; grid-template-columns: var(--einst-nav) minmax(0, 1fr); gap: var(--einst-spalten-luecke); align-items: start; flex: 1; /* Zentriert im Deckel — nicht linksbündig. Linksbündig steht der ganze Block im linken Drittel eines breiten Fensters und der Rest ist ein graues Feld: das liest sich als kaputtes Layout, nicht als Rand. */ width: 100%; max-width: var(--einst-flaeche); margin-inline: auto; } /* Die Toolbar bleibt die STANDARD-Toolbar: volle Breite, linksbündig, Trennlinie über den ganzen Bereich — wie in jedem anderen Tab. Ihren Inhalt auf `--einst-flaeche` zu deckeln wurde versucht und verworfen: `PageToolbar` schreibt den Host-`innerHTML` und baut darin eigene Cluster, ein Deckel auf `> *` traf damit nicht das Suchfeld (im Browser gemessen: Feld bei x=107, Inhaltsspalte bei x=701). An den Interna eines SSOT-Moduls vorbeizustylen wäre der falsche Hebel — die gemeinsame linke Kante von Suchfeld und Inhalt gehört an das LAYOUT, nicht an die Toolbar. */ /* Navigations-KARTE (weiße Fläche wie der Projektaufnahme-Stepper). */ .einst-nav { display: flex; flex-direction: column; gap: var(--space-1); /* `top: 0`, NICHT --space-2: der Scroll-Container beginnt oben bündig, die Karte ist also schon im Ruhezustand „geklebt" — ein Sticky-Offset schob sie dauerhaft 8px unter die Oberkante der Inhalts-Pane (im Browser gemessen: Nav 170px, Pane 162px). Sichtbar war das als schiefe Kante zwischen den beiden Spalten. */ position: sticky; top: 0; padding: var(--space-4) var(--space-3) var(--space-5); } /* Raster-Navigation (Tablet/Mobile, ≤999): Gruppen-Kapitälchen sind für die vertikale Liste gemacht — im Raster stehen sie mitten zwischen den Einträgen (und „MODULE" trug dort sogar eine Trennlinie über sich). ★ 999, nicht 1199: die Nav ist bis 1000px die VERTIKALE Spalte (das Layout kollabiert erst bei ≤999). Mit 1199 verlor die vertikale Liste im Band 1000–1199 grundlos ihre Kapitel — 19 Bereiche als flache Liste, genau auf Notebook-Breite, während die Begründung dieser Regel nur fürs Raster trägt. */ @media (max-width: 999px) { .einst-nav-group { display: none; } } .einst-nav-group { font-size: var(--fs-badge, 11px); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps, .08em); text-transform: uppercase; color: var(--lod-gray-500); padding: var(--space-2) var(--space-4) var(--space-1); } .einst-nav-group:not(:first-child) { margin-top: var(--space-4); border-top: 1px solid var(--lod-gray-100); padding-top: var(--space-4); } .einst-nav-item { min-height: 40px; } .einst-nav-item { display: flex; align-items: center; gap: var(--space-3); width: 100%; text-align: left; cursor: pointer; padding: var(--space-2-5) var(--space-4); background: transparent; border: none; border-left: 3px solid transparent; border-radius: var(--radius-md); font-size: var(--fs-body, 14px); font-weight: var(--fw-medium); color: var(--lod-gray-700); transition: background var(--duration-fast) var(--ease-soft), color var(--duration-fast) var(--ease-soft); } .einst-nav-ico { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; flex-shrink: 0; } .einst-nav-ico img { width: 20px; height: 20px; opacity: .7; } .einst-nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .einst-nav-dirty { flex-shrink: 0; width: 6px; height: 6px; border-radius: var(--radius-circular); background: var(--brand-default); } /* „Hier fehlt noch eine Pflichtangabe" — bewusst eine ZAHL und kein zweiter Punkt: neben dem 6px-Punkt daneben waere ein zweiter Punkt nicht unterscheidbar, und beide Marken verloeren ihre Aussage. Ton ist WARNUNG, nicht Fehler: ein frisch bereitgestellter Mandant ist kein Ausfall, er ist neu (dieselbe Abwaegung wie beim `.set-row-fehlt` an der Zeile, das bewusst ohne Kasten und ohne Symbol auskommt). */ .einst-nav-fehlt { flex-shrink: 0; min-width: 16px; height: 16px; padding: 0 var(--space-1); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-circular); background: var(--status-warning-bg); color: var(--status-warning-fg); font-size: var(--fs-caption); font-weight: 600; line-height: 1; } /* Auf dem gefuellten aktiven Eintrag traegt der Warnton zu wenig Kontrast — dort dieselbe Umkehrung wie beim Punkt daneben. */ .einst-nav-item.is-active .einst-nav-fehlt { background: #fff; color: var(--lod-darkblue); } .einst-nav-item:hover { background: var(--lod-gray-50); color: var(--lod-darkblue); } .einst-nav-item:hover .einst-nav-ico img { opacity: .9; } .einst-nav-item:focus-visible { outline: none; box-shadow: var(--lod-shadow-focus); } /* Aktiver Bereich = Darkblue gefüllt mit weißer Schrift (App-Konvention, wie der aktive ViewSwitcher-Tab) — kein blasser Tint. */ .einst-nav-item.is-active { background: var(--lod-darkblue); border-left-color: var(--lod-darkblue); color: #fff; font-weight: var(--fw-semibold); box-shadow: 0 1px 2px rgba(15, 46, 72, 0.18); } .einst-nav-item.is-active:hover { background: var(--lod-darkblue); color: #fff; filter: brightness(1.1); } .einst-nav-item.is-active .einst-nav-ico img { opacity: 1; filter: brightness(0) invert(1); } .einst-nav-item.is-active .einst-nav-dirty { background: #fff; } .einst-content { min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); } /* ── Breadcrumbs + Intro + Sub-Tabs ──────────────────────────────────────────── */ .einst-crumbs { display: flex; align-items: center; gap: var(--space-1-5); font-size: var(--fs-meta, 12px); color: var(--lod-gray-500); } .einst-crumbs a { color: var(--lod-gray-500); text-decoration: none; } .einst-crumbs a:hover { color: var(--lod-darkblue); text-decoration: underline; } .einst-crumb-sep { color: var(--lod-gray-300); } .einst-crumb-cur { color: var(--color-text); font-weight: var(--fw-medium); } /* OBEN ausgerichtet, nicht mittig. Mittig hing das Bereichs-Symbol an der Mitte des TEXTBLOCKS: sobald der Untertitel zweizeilig wurde, rutschte es nach unten und sprang beim Wechsel auf einen Bereich mit kürzerem Untertitel wieder hoch (Kyle 29.07.: „springt hier einfach das Icon hin und her"). Oben ausgerichtet steht es auf der Höhe der Überschrift — unabhängig davon, wie viele Zeilen darunter folgen. Das kleine Offset bringt es auf die Mittellinie der ERSTEN Zeile. */ /* ── Der Seitenkopf ist eine KARTE, keine Beschriftung des Hintergrunds ──────── Titel, Untertitel und „Änderungsverlauf" standen bis 2026-07-29 (5. Meldung!) direkt auf dem grauen Seitengrund — ohne Fläche, ohne Kante: „das steht einfach auf dem grauen Hintergrund". Vier Reparatur-Anläufe davor haben jeweils die SEKTIONS-Köpfe angefasst und diesen Kopf nie. Er trägt jetzt dieselbe Fläche wie jede Sektionskarte (Surface-Primitive-Tokens) und dieselbe Breite (`--einst-karte`, Regel weiter unten) — die Fläche beginnt damit oben mit einer Karte, nicht mit loser Schrift. */ .einst-intro { display: flex; align-items: flex-start; gap: var(--space-3); background: var(--surface-bg); border: var(--surface-border); border-radius: var(--surface-radius); box-shadow: var(--surface-shadow); padding: var(--space-4); } .einst-intro > .einst-card-icon { margin-top: 1px; } .einst-intro .einst-verlauf-btn { margin-top: 2px; } .einst-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius-md); background: var(--lod-darkblue-50); } .einst-card-icon img { width: 22px; height: 22px; } .einst-card-titles { min-width: 0; } .einst-card-title { margin: 0; font-size: var(--fs-section, 16px); font-weight: var(--fw-semibold); color: var(--color-text); line-height: 1.25; } /* Untertitel auf DERSELBEN Stufe wie die Erklärung (13/400): zwei Größen für „erklärender Text" waren eine Stufe zu viel. */ .einst-card-thema { margin: 2px 0 0; font-size: var(--fs-body, 14px); font-weight: var(--fw-regular, 400); color: var(--color-text-muted); } /* ── Die Reiter-Zeile einer Settings-Seite ────────────────────────────────── Sie gehoert zur KOPF-KARTE, nicht zum Inhalt: „Erscheinungsbild" ist eine Sicht auf dieselbe Seite, kein eigener Gegenstand. Deshalb sitzt sie auf derselben Flaeche und schliesst oben an die Karte an (dort kein Radius, kein doppelter Rahmen) — statt als dritte Insel zwischen zwei Karten auf dem grauen Grund zu schweben. ★ Gemeldet 2026-07-30 („Toolbar / Bereichswechsler sind einfach auf dem grauen Hintergrund"). Die Zeile trug nur `display:flex` — als es die Reiter noch nicht gab, war das folgenlos; mit ihnen fehlte der Flaeche jede Zugehoerigkeit. Ein Reiter, der auf nichts sitzt, sieht aus wie ein vergessenes Element. */ .einst-subtabs { display: flex; align-items: center; background: var(--surface-bg); border: var(--surface-border); border-top: 0; border-radius: 0 0 var(--surface-radius) var(--surface-radius); box-shadow: var(--surface-shadow); padding: var(--space-2) var(--space-4); /* Der negative Rand zieht sie an die Karte darueber; deren Radius unten faellt weg, sonst blitzt der graue Grund in der Fuge durch. */ /* Nimmt den Stapel-Abstand des Pane EXAKT zurueck — dasselbe Token, keine zweite Zahl. Vorher `--space-3` gegen einen `--space-4`-Stapel: 4px Fuge (im Browser gemessen). */ margin-top: calc(-1 * var(--einst-stapel)); max-width: var(--einst-karte); overflow-x: auto; } /* Die Kopf-Karte gibt ihren unteren Radius ab, wenn Reiter folgen — sonst waeren es zwei gerundete Kanten uebereinander mit einer sichtbaren Naht. */ .einst-intro:has(+ .einst-subtabs) { border-radius: var(--surface-radius) var(--surface-radius) 0 0; } /* ── SUB-REITER: Scrollen ist hier RICHTIG, der 10px-Anschnitt war es nicht ──── Anders als die Bereichs-Navigation darüber ist das ein SEGMENTED CONTROL (`ViewSwitcher`, ein 36px-Track mit gemeinsamer Fläche). Umbrechen zerstört seine Gestalt — zwei Zeilen mit geteiltem Track lesen sich als kaputt. Er darf also scrollen, und die Andeutung ist die angeschnittene Pille (Header-Vertrag: ein Fade über Pills löscht genau diesen Hinweis). ★ Gemessen 2026-08-01 war der Anschnitt aber im TABLET-Band unbrauchbar: 680px Inhalt in 670px sichtbarer Breite — **10px verdeckt**. Das ist keine erkennbare Scroll-Kante, das liest sich als Rendering-Fehler (genau das zeigt Kyles Screenshot bei ~760px: die letzte Pille „Themen" hängt angeschnitten am Rand). Bei 600px sind es 170px und der Anschnitt trägt wieder. Die Innenluft der Mobil-Regel greift deshalb schon ab 999px: 16px je Seite weniger lassen die Leiste im 760px-Band vollständig hineinpassen (680 → 664 < 670), und darunter scrollt sie mit einem Anschnitt, den man als solchen erkennt. Das ist bewusst KEIN fester Deckel auf die Anzahl der Reiter — bei sieben Reitern scrollt sie wieder, und dann ist es richtig so. */ @media (max-width: 999px) { .einst-subtabs { padding: var(--space-2); } } /* ── Die Pane ist nur noch Anordnung, keine Fläche ────────────────────────── Kein Hintergrund, kein Rahmen, keine Polsterung: die Sektionskarten liegen direkt auf dem grauen App-Hintergrund (Klassen `lod-surface lod-surface--raised` stehen deshalb an der Sektion, nicht mehr hier). */ .einst-pane { display: flex; flex-direction: column; /* Eigenes Token, weil der negative Rand der Sub-Reiter GENAU diesen Wert zuruecknehmen muss (siehe `.einst-subtabs`). Als zwei Literale liefen sie auseinander — und genau das war der Fall: Stapel 16px gegen Rueckzug 12px liess 4px grauen Grund in der Fuge zwischen Kopf-Karte und Reitern stehen, obwohl beide EINE Flaeche sein sollen. */ --einst-stapel: var(--space-4); gap: var(--einst-stapel); min-height: 70vh; } /* Kopfzeile des Bereichs: KEINE Trennlinie mehr — sie trennte innerhalb der weißen Pane, und der graue Zwischenraum tut das jetzt selbst. Dieselbe Breite wie jede Karte, damit der „Änderungsverlauf"-Knopf auf der Kante sitzt, die auch alles darunter hat (vorher stand er rechtsbündig am Bildschirmrand, bis zu 900px neben allem Sichtbaren). */ .einst-pane .einst-intro { max-width: var(--einst-karte); } .einst-cards { display: flex; flex-direction: column; gap: var(--space-3); } .einst-card-sec-title { margin: 0 0 var(--space-2); font-size: var(--fs-section, 16px); font-weight: var(--fw-semibold); color: var(--color-text); } .einst-fields { display: flex; flex-direction: column; } /* ── Setting-Zeile: NICHT hier ────────────────────────────────────────────── Zeile, Gruppen-Überschrift und die Erklärung am ⓘ gehören dem SSOT-Modul `LoD.SettingsRow` (web/js/components/settings/settings-row.js + web/styles/components/settings/settings-row.css). Vorher stand das Zeilen-Layout hier — und ein zweites Mal für den Drawer (`.setx-row`) weiter unten. Beide Kopien sind gewachsen und auseinandergelaufen (zwei Definitionen von `.einst-row--stapel`, zwei Hilfe-Optiken, zwei Control-Kanten). Wer die Zeile ändern will, ändert das Modul; hier stehen nur noch Dinge, die es NICHT kennt: der „Gespeichert"-Haken, die Feld-Fehlerzeile und die Flächen-Hülle. */ .einst-saved { display: inline-flex; } .einst-saved .ui-ico img { width: 16px; height: 16px; } /* Feld-Fehler unter der Zeile (Paar-Validierung Erinnerung/Eskalation). Läuft über den `unten`-Slot der Zeile und darf deshalb beide Bahnen überspannen. */ .einst-row-error { grid-column: 1 / -1; font-size: var(--fs-meta, 12px); color: var(--status-danger-fg); padding-top: var(--space-1); } /* Mehrzeiler brauchen Höhe — sonst öffnet ein OOF-Fließtext in drei Zeilen. */ .app-scope .set-row--stapel .einst-textarea { min-height: 132px; } /* ── Feldtyp `farbe`: Tupfer + Hex-Feld ───────────────────────────────────── Der Tupfer ist ein HELFER, nicht der Wert (ein `` kann „nicht gesetzt" nicht darstellen und würde still Schwarz behaupten). Er steht deshalb VOR dem Feld und nimmt keine eigene Bahn ein — die rechte Feldkante bleibt die der übrigen Zeilen (Breiten-Vertrag). */ /* Die Farbe ist EIN Feld aus zwei Teilen und nimmt deshalb die Feld-Bahn ihrer Karte ein (`--set-feld`, settings-row.css § Kurzfeld-Stufen) — vorher stand der Wrapper ausserhalb der Bahn und das Hexfeld behielt sein eigenes Maass, egal was die Karte sagte. `max-width: 100%` haelt ihn im Drawer, wo die Bahn schmaler ist als die Stufe. */ .einst-farbe { display: flex; align-items: center; gap: var(--space-2); min-width: 0; grid-column: 1; width: var(--set-feld, 100%); max-width: 100%; } .einst-farbe-tupfer { flex: 0 0 auto; width: 32px; height: 32px; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: none; cursor: pointer; } .einst-farbe-tupfer:disabled { cursor: default; opacity: .6; } /* Chromium/WebKit malen den Farbklecks in einen eigenen Kasten mit Innenluft — ohne diese zwei Regeln bleibt ein weißer Rand und der Tupfer sieht kaputt aus. */ .einst-farbe-tupfer::-webkit-color-swatch-wrapper { padding: 2px; } .einst-farbe-tupfer::-webkit-color-swatch { border: none; border-radius: 3px; } /* Hex ist ein technischer Wert: gleiche Zeichenbreite, damit die Spalte nicht zappelt, während getippt wird. Die Bahn ist schmal — sieben Zeichen brauchen keine 240px, aber der Mindestwert des Zeilen-Vertrags bleibt gewahrt. */ .einst-farbe-hex { flex: 1 1 auto; min-width: 0; max-width: 132px; font-family: var(--font-mono, ui-monospace, monospace); } /* ── Feldtyp `bild`: Vorschau + zwei Knöpfe ───────────────────────────────── Die Vorschau steht LINKS und in fester Höhe: ein Logo kommt in jedem Seitenverhältnis, und ohne Deckel schiebt ein hohes Bild die ganze Zeile auseinander. Karo-Grund, weil ein transparentes PNG sonst auf Weiß unsichtbar ist und man nicht sieht, ob der Freistellungs-Rand stimmt. */ .einst-bild { display: flex; align-items: center; gap: var(--space-2); min-width: 0; flex-wrap: wrap; } .einst-bild-vorschau { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; /* 200×72 statt 88×40 (2026-07-30): das Logo geht auf JEDES Angebot, in jede Mail-Fußzeile und auf jeden Vertrag — in 88px war nicht zu erkennen, ob es das richtige ist, geschweige denn ob der Freistellungs-Rand stimmt. Die Höhe bleibt gedeckelt (ein hohes Bild würde sonst die Zeile auseinanderschieben), und weil die Marke-Karte jetzt kurze Feld-Bahnen hat, kostet die Breite hier nichts. */ width: 200px; height: 72px; padding: var(--space-1-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); background-color: var(--color-surface); background-image: linear-gradient(45deg, var(--lod-gray-100) 25%, transparent 25%, transparent 75%, var(--lod-gray-100) 75%), linear-gradient(45deg, var(--lod-gray-100) 25%, transparent 25%, transparent 75%, var(--lod-gray-100) 75%); background-size: 10px 10px; background-position: 0 0, 5px 5px; } .einst-bild-vorschau img { max-width: 100%; max-height: 100%; object-fit: contain; } /* ── Gesperrte Zeile: der GRUND steht da, nicht nur ein graues Feld ────────── Ein `title` am gesperrten Control wäre stumm (`pointer-events` bei disabled) — deshalb eine echte Zeile im `unten`-Slot, wie der Feld-Fehler darüber. */ .einst-row-gesperrt { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-1); font-size: var(--fs-meta, 12px); color: var(--color-text-muted); padding-top: var(--space-1); } .einst-row-gesperrt .ui-ico img { width: 14px; height: 14px; opacity: .7; } /* ── Rich-Text OHNE Schreibrecht: Lese-Ansicht statt Editor ────────────────── Kein montierter Editor (er lädt zum Tippen ein und verwirft die Arbeit still), sondern der gerenderte Inhalt in einem ruhigen Rahmen. Höhe wächst mit dem Inhalt, deckelt aber — eine 4500-Zeichen-Signatur soll die Seite nicht sprengen. */ .einst-html-lesen { max-height: 320px; overflow-y: auto; padding: var(--space-2) var(--space-3); border: 1px solid var(--lod-gray-100); border-radius: var(--radius-md); background: var(--lod-gray-50, #f6f7f9); font-size: var(--fs-body, 14px); color: var(--color-text); } .einst-html-lesen.is-leer { color: var(--color-text-muted); font-style: italic; } .einst-html-lesen img { max-width: 100%; height: auto; } /* ── Änderungsverlauf (Nachweis-Drawer) ───────────────────────────────────── Ein Block je Ereignis (Zeitpunkt + Person), darin eine Zeile je geändertem Schlüssel mit Vorher → Nachher. Kein Grid: die Wertlängen sind sehr unterschiedlich (Schalter „an" neben einer gekürzten Signatur), starre Spalten hätten überall Löcher oder Abschnitte. */ .einst-verlauf { display: flex; flex-direction: column; gap: var(--space-3); } .einst-verlauf-block { padding: var(--space-3); border-radius: var(--radius-md); } .einst-verlauf-kopf { display: flex; align-items: baseline; gap: var(--space-2); padding-bottom: var(--space-2); margin-bottom: var(--space-2); border-bottom: 1px solid var(--lod-gray-100); } .einst-verlauf-wann { font-size: var(--fs-meta, 12px); color: var(--color-text-muted); } .einst-verlauf-wer { font-size: var(--fs-body, 14px); font-weight: var(--fw-semibold); color: var(--color-text); } /* Betroffene Person/Rolle (nur Rechte-Protokoll) — Meta-Ton, damit der Handelnde die Zeile anführt. */ .einst-verlauf-betrifft { font-size: var(--fs-meta, 12px); color: var(--color-text-muted); } .einst-verlauf-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); } .einst-verlauf-zeile { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-2); font-size: var(--fs-body, 14px); } .einst-verlauf-zeile .ui-ico img { width: 14px; height: 14px; opacity: .55; } .einst-verlauf-feld { flex: 1 1 100%; font-weight: var(--fw-medium, 500); color: var(--color-text); } .einst-verlauf-wert { max-width: 100%; overflow-wrap: anywhere; padding: 2px var(--space-1); border-radius: var(--radius-sm); background: var(--lod-gray-50, #f6f7f9); color: var(--color-text-muted); } .einst-verlauf-nach { color: var(--color-text); } /* Kritische Schlüssel (Außenwirkung, Genehmigung) tragen im Verlauf eine Kante — beim Durchsehen soll auffallen, WELCHE Änderung Gewicht hatte. */ .einst-verlauf-zeile.is-kritisch .einst-verlauf-feld { border-left: 2px solid var(--status-warning-fg); padding-left: var(--space-2); } /* Katalog-Detail: WELCHE Zeile, WELCHES Feld. Eigene Bahn unter der Wert-Zeile (`flex: 1 1 100%` in der umgebenden `flex-wrap`-Zeile), damit „2 Einträge → 2 Einträge" nicht mehr die ganze Auskunft ist. Bewusst leiser als die Wertfelder — es ist die Begründung der Zeile, nicht ihr Kopf. */ .einst-verlauf-detail { flex: 1 1 100%; display: flex; flex-direction: column; gap: 2px; margin-top: var(--space-1); } .einst-verlauf-detail-zeile { font-size: var(--fs-meta, 12px); color: var(--color-text-muted); overflow-wrap: anywhere; padding-left: var(--space-2); border-left: 2px solid var(--lod-gray-200, #e5e7eb); } .einst-verlauf-detail-art { font-weight: var(--fw-semibold); } .einst-verlauf-detail-namen { color: var(--color-text); } /* Die Feldnamen sind die eigentliche Auskunft und stehen abgesetzt hinter dem Zeilennamen. */ .einst-verlauf-detail-felder { margin-left: var(--space-1); font-family: var(--font-mono, ui-monospace, monospace); } /* Token-Namen aus tokens.css, nicht erfunden: `--status-ok-fg`/`--status-err-fg` gibt es nicht — der erste Entwurf hatte sie, und `check:css-tokens` hat beide als neues Fremd-Vokabular gemeldet. Die Familie heisst `success`/`danger` (im Bestand 63× bzw. 65×). */ .einst-verlauf-detail-zeile.is-neu { border-left-color: var(--status-success-fg); } .einst-verlauf-detail-zeile.is-weg { border-left-color: var(--status-danger-fg); } .einst-verlauf-detail-zeile.is-mehr { border-left-color: transparent; font-style: italic; } /* Verlauf-Knopf im Intro: rechts, außerhalb der Titel-Spalte. */ .einst-intro .einst-verlauf-btn { margin-left: auto; flex-shrink: 0; } /* Tablet/Mobile: der Knopf verliert seine Beschriftung nicht (er ist die einzige Tür zum Nachweis), rutscht aber unter den Titel, sobald die Zeile zu eng wird. */ @media (max-width: 999px) { .einst-intro { flex-wrap: wrap; } .einst-intro .einst-verlauf-btn { margin-left: 52px; } } @media (max-width: 599px) { .einst-intro .einst-verlauf-btn { margin-left: 0; } .einst-verlauf-block { padding: var(--space-2); } } /* ── Katalog: Zeilen (Abwesenheitsarten) ─────────────────────────────────────── */ .einst-liste { display: flex; flex-direction: column; gap: var(--space-2); } .einst-liste-actions { flex-shrink: 0; } .einst-liste-loading, .einst-liste-empty { font-size: var(--fs-meta, 12px); color: var(--color-text-muted); padding: var(--space-2) 0; } .einst-liste-rows { display: flex; flex-direction: column; } /* ── MATRIX: Kreuztabelle über bestehende Feld-Schlüssel ────────────────────── Die zugesagten Reaktionszeiten sind eine 3×2-Tabelle und standen als zwei Sektionen mit je drei Formularzeilen da. Bahnen: Zeilen-Beschriftung fest (wie `--set-label`, damit sie mit den Formularzeilen der Nachbarsektionen fluchtet), danach eine gleich breite Spur je Spalte. `--einst-matrix-cols` setzt der Renderer aus der Spaltenzahl — eine dritte Spalte braucht damit keine CSS-Änderung. */ .einst-matrix { display: flex; flex-direction: column; padding: var(--space-1) 0 var(--space-2); } .einst-matrix-zeile { display: grid; /* Erste Spur = ⓘ-Bahn, exakt wie in jeder Formularzeile (`--set-info`). Die Label-Spur schrumpft um Bahn + Gap, damit die ZELLEN an derselben x-Position bleiben wie vorher — und die Zeilen-Labels an derselben wie die der set-rows. */ grid-template-columns: var(--set-info, 20px) minmax(0, calc(var(--set-label, 240px) - var(--set-info, 20px) - var(--space-3, 12px))) repeat(var(--einst-matrix-cols, 2), minmax(0, 1fr)); gap: var(--space-3); align-items: center; padding: var(--space-2) 0; } .einst-matrix-info { display: flex; align-items: center; justify-content: center; min-width: 0; } .einst-matrix-zeile + .einst-matrix-zeile { border-top: 1px solid var(--color-border-light); } /* Kopfzeile im selben Stil wie die Katalog-Spaltenköpfe — EIN Uppercase-Stil auf der Fläche, nicht ein zweiter (derselbe Grund wie bei `.einst-kat-head`). */ .einst-matrix-kopf { padding-bottom: var(--space-1-5); border-bottom: 1px solid var(--lod-gray-200); font-size: var(--fs-badge, 11px); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps, .08em); text-transform: uppercase; color: var(--lod-gray-500); } .einst-matrix-kopf .einst-matrix-sp { display: flex; align-items: center; gap: var(--space-1); } .einst-matrix-zl { display: flex; align-items: center; gap: var(--space-1); min-width: 0; font-size: var(--fs-meta, 12px); font-weight: var(--fw-medium); color: var(--color-text); } .einst-matrix-zelle { display: flex; align-items: center; gap: var(--space-2); min-width: 0; } /* Das Zahlenfeld füllt seine Spur — dieselbe Regel wie `--set-feld: 100%` in der Formularzeile, damit die rechten Feldkanten einer Spalte auf einer Linie liegen. */ .einst-matrix-zelle .einst-input { flex: 1; min-width: 0; } .einst-matrix-einheit { flex-shrink: 0; font-size: var(--fs-meta, 12px); color: var(--color-text-muted); } /* Fehlendes Feld: sichtbar, nicht leer. Eine leere Zelle sähe wie „nicht gesetzt" aus und die Zeile wäre still um eine Angabe kürzer. Die eigentliche Absicherung ist der Gate-Block (`check:settings`) — das hier ist die zweite Naht. */ .einst-matrix-zelle.is-fehlt { color: var(--status-danger-fg); font-weight: var(--fw-semibold); } @media (max-width: 599px) { /* Mobil ist eine Kreuztabelle nicht bedienbar: gestapelt je Spalte, Beschriftung oben. Die ⓘ-Bahn entfällt mit — als eigene Grid-Zeile wäre sie ein 20px-Waisenkind über dem Label; die Erklärung der Dringlichkeiten bleibt über das Sektions-ⓘ. */ .einst-matrix-zeile { grid-template-columns: minmax(0, 1fr); gap: var(--space-1-5); } .einst-matrix-kopf, .einst-matrix-info { display: none; } } /* ── Skalierung der Zeilen-Liste: Suche · Gruppen · Fenstern ────────────────── Anlass: `allgemein.mail.texte` rendert 65 Zeilen als eine flache, alphabetisch sortierte Liste — im Browser gemessen 3475px hohe Sektionskarte, ohne Suche, ohne Gruppierung, ohne Fenstern. Breite hätte das nicht behoben (1180px statt 800px kaufen eine Spalte, aber dieselben 65 Zeilen); Gruppieren macht daraus 12 Überschriften mit Zähler. Schwellen und Begründung: `SUCHE_AB`/`FENSTER` in sections/einstellungen-katalog.js. */ .einst-kat-werkzeug { display: flex; align-items: center; gap: var(--space-3); padding: 0 0 var(--space-2-5); } .einst-kat-suche { display: flex; align-items: center; gap: var(--space-2); flex: 1; min-width: 0; padding: 0 var(--space-2-5); height: 32px; background: #fff; border: 1px solid var(--lod-gray-200, #dfe3e8); border-radius: var(--radius-md); } .einst-kat-suche:focus-within { border-color: var(--brand-default); box-shadow: var(--lod-shadow-focus); } .einst-kat-suche .ui-ico img { opacity: .5; } /* Das Eingabefeld selbst trägt KEINEN Rahmen — der sitzt am Label, damit Symbol und Feld eine Fläche bilden. `.app-scope input` setzt sonst eigene Kanten. */ .app-scope .einst-kat-sucheingabe { flex: 1; min-width: 0; height: 100%; border: none; background: none; outline: none; padding: 0; font-size: var(--fs-body, 14px); color: var(--color-text); } .einst-kat-treffer { flex-shrink: 0; font-size: var(--fs-meta, 12px); color: var(--color-text-muted); } .einst-kat-keintreffer { margin: 0; padding: var(--space-4) 0; text-align: center; font-size: var(--fs-body, 14px); color: var(--color-text-muted); } .einst-kat-mehr { margin-top: var(--space-2); align-self: flex-start; } .einst-kat-gruppen { display: flex; flex-direction: column; } .einst-kat-gruppe:not(:first-child) { margin-top: var(--space-2); } /* Gruppen-Kopf ist bewusst LEISER als ein Sektionskopf (12px/600 gegen 14px/600): er ordnet innerhalb einer Karte und darf nicht mit deren Überschrift konkurrieren. */ /* Gruppen-Zeile als ECHTE Listenzeile, nicht als Mikro-Text mit Chip daneben: 40px hoch, Name in Zeilen-Größe (13px), der Zähler an der RECHTEN Kante — bei „> Anfrage 5" mit einem Kilometer Leere dahinter wirkte die Liste unfertig (Kyle: „sehr billig, wie die E-Mail-Texte-Darstellung"). Name und Zähler spannen die Zeile auf, der Rest ist bewusst Klickfläche. */ .einst-kat-gruppe-kopf { display: flex; align-items: center; gap: var(--space-2-5); width: 100%; min-height: 40px; padding: var(--space-2) var(--space-2-5); background: none; border: 0; /* `--color-border-light`, NICHT `--lod-gray-150`: letzteres existiert nicht (es steht in dieser Datei fünfmal als Altbestand mit Fallback und ist deshalb in `check:css-tokens` gepinnt). Ein sechstes Vorkommen hätte die Zahl erhöht und das Gate rot gefärbt — zu Recht: die Regel läuft am Design-System vorbei und bleibt bei jeder Token-Änderung stumm zurück. */ border-bottom: 1px solid var(--color-border-light); cursor: pointer; text-align: left; color: inherit; font: inherit; } .einst-kat-gruppe-kopf:hover { background: var(--lod-gray-50, #f7f8fa); } .einst-kat-gruppe-kopf:focus-visible { outline: none; box-shadow: var(--lod-shadow-focus); border-radius: var(--radius-sm); } .einst-kat-gruppe-chev { flex-shrink: 0; width: 16px; height: 16px; transition: transform var(--duration-fast, .15s) var(--ease-soft, ease); } .einst-kat-gruppe-chev img { width: 14px; height: 14px; opacity: .55; } .einst-kat-gruppe.is-zu .einst-kat-gruppe-chev { transform: rotate(-90deg); } .einst-kat-gruppe-name { font-size: var(--fs-body, 13px); font-weight: var(--fw-semibold); color: var(--color-text); } .einst-kat-gruppe-zahl { margin-left: auto; flex-shrink: 0; min-width: 22px; padding: 1px var(--space-1-5); border-radius: var(--radius-pill, 999px); background: var(--lod-gray-100, #eef0f3); color: var(--color-text-muted); font-size: var(--fs-badge, 11px); font-weight: var(--fw-semibold); text-align: center; } .einst-kat-gruppe.is-zu .einst-kat-gruppe-rows { display: none; } /* Katalog-Tabelle: Kopfzeile + Zeilen teilen EIN Spaltenraster, damit Name, Konto, Regeln und Aktionen untereinander stehen (vorher freies Flex-Fließen — wirkte unsortiert). Die Konto-Spalte existiert nur bei Katalogen mit Konto-Zuordnung (.has-konto), sonst fällt sie ganz weg. */ /* ── DIE LETZTEN ZWEI SPUREN SIND FEST, NICHT `auto` ───────────────────────── `.einst-kat-head` und `.einst-kat-row` sind GETRENNTE Grid-Container (kein `display: table`, kein Subgrid) — ein `auto`-Track bemisst sich also je Container an dessen EIGENEM Inhalt. Gemessen am 30.07.: im Kopf trug die Schalter-Spalte das Wort „Aktiv" (45px) und die Aktions-Spalte war LEER (0px), in der Zeile ein 52px breiter Schalter und ein 32px-Stift. Ergebnis: die Überschrift „AKTIV" stand 52px neben ihrem Schalter und dafür 6px über dem STIFT — sie beschriftete die falsche Spalte. Kein Fehler, den CSS meldet, und in JEDER Katalog-Tabelle derselbe. 52px = Schalter 44 + `padding-right: var(--space-2)`; 32px = Icon-Knopf `btn-sm`. */ .einst-kat-table { display: flex; flex-direction: column; --einst-kat-sw: 52px; --einst-kat-akt: 32px; --einst-kat-cols: minmax(0, 1fr) var(--einst-kat-sw) var(--einst-kat-akt); } .einst-kat-table.has-regeln { --einst-kat-cols: minmax(0, 1fr) minmax(0, 1.4fr) var(--einst-kat-sw) var(--einst-kat-akt); } .einst-kat-table.has-konto { --einst-kat-cols: minmax(0, 1fr) 150px var(--einst-kat-sw) var(--einst-kat-akt); } .einst-kat-table.has-konto.has-regeln { --einst-kat-cols: minmax(0, 1fr) 150px minmax(0, 1.2fr) var(--einst-kat-sw) var(--einst-kat-akt); } /* Kopf und Zeile brauchen NICHT NUR dieselben Spuren, sondern auch dieselbe Luecke. Die Zeile trug `gap: var(--space-3)`, der Kopf keine — bei vier Spalten schob das die Zeilen-Spuren um 12px gegen die Kopf-Spuren, und die Ueberschrift stand neben ihrer Spalte (gemessen: Kopf-Schalter 1548-1600, Zeilen-Schalter 1536-1588, gleiche rechte Aussenkante). Der `gap` gehoert deshalb in die GETEILTE Regel, nicht in eine der beiden. Dasselbe gilt fuer die waagerechte Innenluft. */ .einst-kat-head, .einst-kat-row { display: grid; grid-template-columns: var(--einst-kat-cols); align-items: center; gap: var(--space-3); } /* Tabellenkopf-Stil: EINE Definition für Katalog- UND Wochenplan-Tabelle. Vorher 11px/600 mit .04em hier und 11px/700 mit --ls-caps dort — zwei Uppercase-Stile auf derselben Fläche. */ .einst-kat-head { padding: 0 var(--space-2-5) var(--space-1-5); font-size: var(--fs-badge, 11px); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps, .08em); text-transform: uppercase; color: var(--lod-gray-500); border-bottom: 1px solid var(--lod-gray-200); } .einst-kat-c-art { display: flex; align-items: center; gap: var(--space-3); min-width: 0; } .einst-kat-c-konto, .einst-kat-c-regeln { min-width: 0; display: flex; align-items: center; gap: var(--space-1-5); } /* Schalter-Spalte ZENTRIERT, Aktions-Spalte rechts. Rechtsbuendig waren Kopf und Zeile um 16px versetzt: ein 45px-Wort und eine 44px-Pille haben in einer 52px-Spur verschiedene Mitten, sobald beide an derselben Kante kleben. Zentriert stimmt es per Konstruktion — unabhaengig davon, wie lang die Ueberschrift ist. */ .einst-kat-c-sw { display: flex; align-items: center; justify-content: center; } .einst-kat-c-akt { display: flex; align-items: center; justify-content: flex-end; } .einst-kat-leer { font-size: var(--fs-body, 14px); font-weight: var(--fw-regular, 400); color: var(--lod-gray-400); } .einst-kat-row { min-height: 52px; padding: var(--space-2) var(--space-2-5); cursor: pointer; border-radius: var(--radius-md); } .einst-kat-row + .einst-kat-row { border-top: 1px solid var(--lod-gray-100); } .einst-kat-row:hover { background: var(--lod-gray-50); } .einst-kat-row:focus-visible { outline: none; box-shadow: var(--lod-shadow-focus); } .einst-kat-row.is-inaktiv { opacity: .6; } .einst-kat-row.is-inaktiv .einst-kat-name { color: var(--lod-gray-500); } /* Nur-Lesen-Zeile (Übersichten): zeigt einen abgeleiteten Zustand, den man hier nicht bearbeiten kann — deshalb kein Zeiger-Cursor und kein Hover-Echo, die beide eine Klickfläche versprechen würden. */ .einst-kat-row.is-nurlesen { cursor: default; } .einst-kat-row.is-nurlesen:hover { background: transparent; } /* Icon-Chip: Fläche = Art-Farbe @12%, Symbol via mask in der Art-Farbe. */ .einst-kat-chip { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: var(--radius-md); background: color-mix(in srgb, var(--art-farbe, var(--lod-gray-400)) 14%, transparent); } .einst-kat-ico { display: inline-block; width: 18px; height: 18px; background-color: var(--art-farbe, var(--lod-gray-500)); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .einst-kat-chip--preview { width: 40px; height: 40px; } .einst-kat-chip--preview .einst-kat-ico { width: 22px; height: 22px; } .einst-kat-chip--drawer { width: 28px; height: 28px; } .einst-kat-name { /* 500, nicht 600: die Feld-Labels der Fläche sind 500. Zwei Gewichte auf derselben Größe nimmt niemand bewusst wahr, sie erzeugen aber Unruhe. */ font-size: var(--fs-body, 14px); font-weight: var(--fw-medium, 500); color: var(--color-text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .einst-kat-badges { display: flex; align-items: center; gap: var(--space-1-5); min-width: 0; overflow: hidden; } .einst-kat-schnell { flex-shrink: 0; } .einst-kat-edit { flex-shrink: 0; } .einst-row-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 var(--space-2); /* 12/600 wie der Knopf — die frühere 11/600-Stufe unterschied sich nur um 1px von der Untertitel-Stufe und las sich nicht als eigene Ebene. */ font-size: var(--fs-meta, 12px); font-weight: var(--fw-semibold); background: var(--lod-gray-100); color: var(--lod-gray-700); border-radius: var(--radius-pill-sm); white-space: nowrap; } .einst-row-badge--konto { background: var(--lod-darkblue-50); color: var(--lod-darkblue); } .einst-row-badge--off { background: var(--status-danger-soft, #fdecea); color: var(--lod-danger); } .einst-row-badge[style*="--typ-farbe"] { background: color-mix(in srgb, var(--typ-farbe) 14%, #fff); color: var(--typ-farbe); } /* ── Katalog: Kennzahlen-Karten (Anspruchskonten) ────────────────────────────── */ /* `auto-fit`, NICHT `auto-fill`: der Unterschied ist genau der Fall „weniger Karten als Spalten". `auto-fill` legt drei 350px-Spuren an, egal wie viele Karten es gibt — mit EINER Karte (Standorte: nur der Firmensitz; Anspruchskonten: nur „Urlaub", beides am 30.07. gemessen) steht sie in der ersten Spur und rechts daneben bleiben 732px leer. `auto-fit` klappt die leeren Spuren zusammen, die Karte füllt die Reihe. Ab drei Karten verhalten sich beide identisch. */ .einst-konto-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-4); } .einst-konto-card { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); text-align: left; } .einst-konto-card.is-inaktiv { opacity: .65; } .einst-konto-head { display: flex; align-items: center; gap: var(--space-2); } /* 14px, nicht 16px: 16px ist die Ebene des SEITENTITELS („Allgemein"). Ein Kartentitel darf nicht genauso laut sein wie die Seite, in der er steht. */ .einst-konto-name { font-size: var(--fs-card-title, 14px); font-weight: var(--fw-semibold); color: var(--color-text); flex: 1; min-width: 0; } .einst-konto-kpis { display: flex; gap: var(--space-5); } .einst-konto-kpi { display: flex; flex-direction: column; gap: 2px; } .einst-konto-kpi-wert { font-size: 22px; font-weight: var(--fw-semibold); color: var(--color-text); font-variant-numeric: tabular-nums; } /* ── STAMMDATEN-ZEILEN (Label → Wert) ──────────────────────────────────────── Die Gegenform zur Kachel: eine Kachel BETONT eine Zahl, ein kategorialer Wert („Bayern") und eine Lücke („—") haben nichts zu betonen. Vorher war auch das eine Kachel und nur die Schriftgröße wurde zurückgenommen — der Kommentar dazu sagte selbst, ein Textwert in einer Zahlen-Kachel sehe „wie ein Fehler" aus. Genau so war die Standort-Karte gebaut: „Bayern" groß über der Beschriftung „FEIERTAGE". Das Label steht LINKS in fester Bahn, damit mehrere Zeilen eine Kante haben; der Wert folgt, statt darunter zu stehen — eine Karte mit drei Angaben soll drei Zeilen hoch sein, nicht sechs. `data-text` ist damit weg (die Form ersetzt den Behelf). */ .einst-konto-zeilen { display: flex; flex-direction: column; gap: var(--space-1-5); } .einst-konto-zeile { display: flex; align-items: baseline; gap: var(--space-3); min-width: 0; } .einst-konto-zeile-label { flex: 0 0 auto; min-width: 148px; font-size: var(--fs-badge, 11px); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps, .08em); text-transform: uppercase; color: var(--lod-gray-500); } .einst-konto-zeile-wert { flex: 1 1 auto; min-width: 0; font-size: var(--fs-card-title, 14px); color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .einst-konto-kpi-label { font-size: var(--fs-badge, 11px); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps, .08em); text-transform: uppercase; color: var(--lod-gray-500); } .einst-konto-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); border-top: 1px solid var(--lod-gray-100); padding-top: var(--space-3); margin-top: auto; } /* Trennlinie und `margin-top: auto` gehören zum Fuß, der LINKS etwas trägt — bei den Anspruchskonten die „bucht hierauf"-Chips. Eine Standort-Karte hat dort nichts: der Fuß bestand aus einer Linie, einem leeren Drittel und dem Stift rechts (im Bild gesehen). `:has(:empty)` ist die Bedingung, weil genau dieser Span die Chips trägt — eine Klasse vom Renderer wäre eine zweite Stelle, an der man es vergessen kann. */ .einst-konto-foot:has(.einst-konto-arten:empty) { border-top: 0; padding-top: 0; margin-top: var(--space-1); } .einst-konto-arten { display: flex; flex-wrap: wrap; gap: var(--space-1-5); min-width: 0; } .einst-konto-arten-leer { font-size: var(--fs-meta, 12px); color: var(--color-text-muted); } /* ── Drawer-Editor (.setx) ───────────────────────────────────────────────────── */ .setx { display: flex; flex-direction: column; padding: var(--space-1) var(--space-1) var(--space-3); } /* Zeilen im Drawer baut `LoD.SettingsRow` in der `drawer`-Variante — inklusive Container-Query an der Drawer-Breite (dort stand sie vorher). Hier bleiben nur die Dinge, die die Zeile nicht kennt: Feld-Fehler und die Sonder-Controls. */ .setx-row-fehler { grid-column: 1 / -1; padding-top: 2px; font-size: var(--fs-meta, 12px); line-height: 1.4; color: var(--status-danger-fg, #b42318); } .app-scope .setx-textarea { width: 100%; min-height: 92px; resize: vertical; font-size: var(--fs-body, 14px); line-height: 1.55; } .einst-cell-label { font-size: var(--fs-body, 14px); font-weight: var(--fw-medium, 500); color: var(--color-text); } .setx-swatch--custom { font-size: var(--fs-body, 14px); font-weight: var(--fw-semibold); } .setx-konto-hint { grid-column: 1 / -1; padding: var(--space-1) 0 var(--space-2); } /* Hinweis unter einem Feld, dessen mitgelieferter Wert NUR aus Platzhaltern besteht. Bewusst neutral getönt und nicht als Warnung: es ist kein Fehler, dort etwas einzutragen — es hat nur eine Folge, die man kennen muss (fester Betreff für alle Mails der Vorlage statt eines je Mail gebildeten). */ .setx-ph-hinweis { grid-column: 1 / -1; padding-top: 2px; font-size: var(--fs-meta, 12px); line-height: 1.45; color: var(--color-text-muted); } /* Verweis statt Editor im Firmensitz-Drawer (die Woche gehört der Sektion darüber). Bewusst ein ruhiger Satz und KEIN Warn-Banner: es ist kein Fehlerzustand, sondern die normale Ordnung — nur die Alt-Zeile darunter ist ein Hinweis, weil dort etwas Gespeichertes wirkungslos geworden ist. */ .setx-firmensitz-woche { margin: 0; font-size: var(--fs-meta, 12px); line-height: 1.5; color: var(--color-text-muted); } .setx-firmensitz-woche-alt { display: block; margin-top: var(--space-1); color: var(--status-warning-fg); } .setx-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--lod-border); } .setx-footer-actions { display: inline-flex; gap: var(--space-2); } /* Erscheinung: Live-Preview + beschriftete Farb-/Symbol-Blöcke. */ .setx-appearance { display: flex; align-items: flex-start; gap: var(--space-5); padding: var(--space-3) 0; } .setx-appearance-preview { display: flex; flex-direction: column; align-items: center; gap: var(--space-1-5); flex-shrink: 0; } .setx-appearance-hint { font-size: var(--fs-badge, 11px); color: var(--lod-gray-500); } .setx-appearance-ctl { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; flex: 1; } .setx-appearance-symlabel { margin-top: var(--space-2); } .setx-satz-hint { display: block; line-height: 1.5; margin-top: 2px; } .setx-swatches { display: flex; flex-wrap: wrap; gap: var(--space-1-5); align-items: center; } .setx-swatch img { pointer-events: none; filter: brightness(0) invert(1); } .setx-swatch--custom img { filter: none; opacity: .75; } .setx-swatch { width: 24px; height: 24px; border-radius: var(--radius-circular); border: 2px solid transparent; cursor: pointer; padding: 0; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); } .setx-swatch:hover { transform: scale(1.1); } .setx-swatch.is-sel { border-color: var(--brand-default); box-shadow: 0 0 0 2px var(--brand-light); } .setx-swatch--custom { display: inline-flex; align-items: center; justify-content: center; background: var(--lod-gray-100); color: var(--lod-gray-600); font-weight: var(--fw-bold); position: relative; overflow: hidden; } .setx-swatch--custom .einst-color { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; padding: 0; border: none; } .einst-icon-grid { display: grid; grid-template-columns: repeat(auto-fill, 34px); gap: var(--space-1); padding: var(--space-2); background: var(--lod-gray-50); border: 1px solid var(--lod-border); border-radius: var(--radius-md); } .einst-icon-grid[hidden] { display: none; } .einst-icon-opt { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; } .einst-icon-opt:hover { background: var(--color-surface); border-color: var(--lod-border); } .einst-icon-opt.is-sel { background: var(--lod-darkblue); border-color: var(--lod-darkblue); box-shadow: 0 0 0 2px var(--brand-light); } .einst-icon-opt.is-sel img { filter: brightness(0) invert(1); } /* Nativer Farb-Input (Fallback „eigene Farbe"). */ .einst-color { width: 40px; height: 28px; padding: 2px; cursor: pointer; border: 1px solid var(--lod-gray-200); border-radius: var(--radius-md); background: var(--color-surface); } .einst-color::-webkit-color-swatch-wrapper { padding: 0; } .einst-color::-webkit-color-swatch { border: none; border-radius: var(--radius-sm); } /* ── Responsive (Notebook 1000–1399 · Tablet 600–999 · Mobile <600) ──────────── */ @media (max-width: 1399px) { .einst-konto-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } /* Konto-Spalte schmaler, Regeln dürfen zuerst schrumpfen. */ .einst-kat-table.has-konto { --einst-kat-cols: minmax(0, 1fr) 120px var(--einst-kat-sw) var(--einst-kat-akt); } .einst-kat-table.has-konto.has-regeln { --einst-kat-cols: minmax(0, 1fr) 120px minmax(0, 1fr) auto auto; } } @media (max-width: 999px) { .einst-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); } /* Tablet: Regeln-Spalte weicht, Konto + Name bleiben lesbar. */ .einst-kat-table { --einst-kat-cols: minmax(0, 1fr) auto auto; } .einst-kat-table.has-konto, .einst-kat-table.has-konto.has-regeln { --einst-kat-cols: minmax(0, 1fr) 120px auto auto; } .einst-kat-table.has-regeln { --einst-kat-cols: minmax(0, 1fr) auto auto; } .einst-kat-c-regeln { display: none; } /* ── BEREICHS-NAVIGATION: RASTER STATT SCROLLER (2026-08-01) ────────────── Hier stand eine waagerechte Leiste mit `overflow-x: auto`. Im Browser gemessen (Kyle-Meldung „Responsive Menü geht gar nicht", Screenshot bei ~760px): Inhalt **3095px** in 670px sichtbarer Breite — **2425px verdeckt**, also 12 von 17 Bereichen unerreichbar ohne Wischen, und der Schnitt fiel mitten in „KI-". ★ EIN FADE WÄRE HIER DIE FALSCHE ANTWORT, und das ist im Repo schon entschieden: der Header-Vertrag (`check:header-live`) meldet eine Fade-Kante ÜBER Pills ausdrücklich als Verstoß — sie löscht die angeschnittene Pille und damit den einzigen Hinweis, dass es weitergeht. Für Pills ist der sichtbare Anschnitt die Andeutung. Nur trägt ein Anschnitt bei 2425px verdecktem Inhalt nichts mehr: eine Liste von 17 Zielen ist keine Reiterleiste, und Scrollen über viereinhalb Bildschirmbreiten ist das falsche Steuerelement, nicht die falsche Verzierung. Das Raster zeigt ALLES ohne Geste. `auto-fill` statt fester Spaltenzahl, damit es von 999px bis 380px dieselbe Regel bleibt (bei 670px drei Spalten, bei 346px eine) — eine Spaltenzahl je Breakpoint wäre die nächste Zahl, die beim 18. Bereich nicht mehr stimmt. Der Preis ist Bauhöhe; sie ist vertretbar, weil man die Bereichsliste einmal benutzt und danach in der Fläche arbeitet. Die BORDER-Behandlung der alten Leiste (`border-bottom` als Aktiv-Marke) fällt mit ihr weg: im Raster ist ein Eintrag wieder eine Menü-Zeile, und dafür gilt die Desktop-Behandlung (gefüllte Fläche + linke Kante) aus der Basis-Regel. */ .einst-nav { position: static; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-1) var(--space-2); overflow: visible; } /* Kein `.einst-nav-group`-Padding hier: das Element ist ab 1199px `display:none` (Regel oben) und wird in diesem Band nicht zurückgesetzt — eine Regel darauf wirkt nie. */ .einst-search-panel { left: 0; right: 0; width: auto; max-width: none; } /* Kein Deckel unter 1000px: der Bildschirm ist hier ohnehin schmaler als 800px oder nur knapp darüber, ein Deckel würde nur eine leere Spalte am rechten Rand erzeugen. Die Fläche bleibt dabei einheitlich — alles nimmt dieselbe Breite. Gilt auch für den Flächen-Deckel selbst: die Nav-Spalte ist hier eine waagerechte Leiste, `--einst-flaeche` (Nav + Karte) beschreibt das Layout dann nicht mehr. */ .einst-sec, .einst-pane .einst-intro { max-width: none; } .einst-layout, .einst-root .app-page-toolbar { max-width: none; margin-inline: 0; } } /* Touch-Maße der ZEILE (Control-Höhen, ⓘ-Trefferfläche) stehen im Zeilen-Modul — sonst hätte eine Zeile in einem anderen Kontext andere Finger-Maße. */ @media (max-width: 599px) { .einst-wrap { padding: var(--space-4) 0 var(--space-6); } .einst-input { width: 100%; max-width: none; } .einst-sec-toggle { min-height: 44px; } .app-scope .einst-reset { min-width: 40px; min-height: 40px; } .einst-kat-badges { display: none; } /* Mobile: Chip+Name+Switch reichen — Details im Drawer */ /* Mobile: nur noch Name + Aktiv + Bearbeiten; Konto steht im Drawer. */ .einst-kat-table, .einst-kat-table.has-konto, .einst-kat-table.has-regeln, .einst-kat-table.has-konto.has-regeln { --einst-kat-cols: minmax(0, 1fr) auto auto; } .einst-kat-c-konto { display: none; } .einst-kat-head { display: none; } /* Spaltenköpfe ohne Spalten sind nur Rauschen */ .einst-konto-grid { grid-template-columns: minmax(0, 1fr); } .setx-input { width: 100%; max-width: none; } } /* ── Sektions-Blöcke mit Klapp-Kopf ────────────────────────────────────────── Jede Sektion ist ein umrandeter Block mit getöntem Kopf: Titel + Kurztext + optionale Primär-Aktion. Der ganze Kopf ist die Klappfläche (Hover sichtbar). Zustand pro Nutzer in LoD.prefs; Startzustand aus dem Deskriptor (Feld zugeklappt). */ /* Fläche, Rahmen und Radius kommen aus `.lod-surface` (Flächen-SSOT, panel.css) — die Klasse setzt die Shell. Hier stand das dreifach von Hand (#fff, gray-150, radius-lg); auf dem grauen Hintergrund braucht die Karte zusätzlich die Ruhe-Elevation, und die gehört dem Primitive, nicht dieser Datei. */ .einst-sec { overflow: hidden; } /* ── Kartenbreite: EINE für alle ───────────────────────────────────────────── Keine Klasse, keine Ableitung aus Feldtypen, keine Ausnahme — sonst sieht der Wechsel von „Lizenzen" nach „Anfragen & SLA" anders aus, und genau das darf nicht sein. Begründung und Vorgeschichte bei `--einst-karte` in `.einst-wrap`. */ .einst-sec { max-width: var(--einst-karte); } /* ── KEINE TÖNUNG IM KOPF — Struktur aus Typografie + EINER echten Linie ─────── Bis 2026-07-29 (2) trug der Kopf `--lod-gray-50` (#F7F8FA). Damit standen auf der Fläche DREI Grautöne übereinander: der graue Seitenhintergrund, die weiße Karte und ein Kopf, der farblich genau dazwischen liegt — er las sich als Loch in der Karte (Kyle: „das muss ordentlicher, Grau auf Grau ist billig"). ★ Die Tönung zu entfernen hat den Kopf ZUERST ZERLEGT, nicht verbessert — das ist die Lehre dieser Zeilen: die getönte Bande hatte drei Layout-Schwächen KASCHIERT, die auf Weiß einzeln sichtbar wurden (Kyles Screenshots, 29.07.): · das ⓘ hing 46px vom Titel entfernt in seiner eigenen linken Bahn, · der Chevron-Kreis (weiß + Rahmen) wurde auf Weiß zum leeren Umriss, · die Ersatz-Trennlinie (#f0f0f0) war zu schwach, der Kopf wirkte „mager". Deshalb gehören diese vier Entscheidungen ZUSAMMEN und keine darf einzeln zurückgedreht werden: keine Tönung + ⓘ am Titel + Chevron als bloßes Zeichen rechts + eine SICHTBARE Linie (`--color-border`, nicht `-light`). */ .einst-sec-head { /* `flex-start`: die Klappfläche hat zwei Zeilen — `center` würde Knöpfe und Schalter zwischen Titel und Beschreibung setzen. Die 28px-Titel-Zeile trägt `.einst-sec-kopfzeile` als `min-height`, damit alle Oberkanten fluchten. RECHTS 48px statt 16px: der Eck-Slot des Sektions-ⓘ (unten) liegt ABSOLUT in der Karten-Ecke — das Padding reserviert seinen Platz, damit Chevron, Schalter und „+ Neu" nie darunterrutschen. 48 = 16 Rand + 20 ⓘ + 12 Abstand; konstant für JEDE Karte (jede Sektion trägt ein ⓘ), also bleibt auch die Chevron-Spalte über alle Karten auf EINER Kante. */ display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) calc(var(--space-4) + 32px) var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); } /* ── Sektions-ⓘ: FESTER ANKER OBEN RECHTS (Kyle 02.08.) ────────────────────── „Immer rechts oben in der Sektion — und darf sich nicht durch Mehrzeiligkeit verschieben." Ein Flex-Kind im Kopf kann das nicht leisten: es wandert mit der Titel-LÄNGE (x) und mit jeder `thema`-Zeile (Kopf-Höhe). Der Slot ist deshalb an der KARTE verankert, nicht im Textfluss — eine Ecke, eine Spalte, egal wie der Kopf umbricht. `height: 28px` + `align-items: center` zentriert das ⓘ optisch auf der 28px-Titel-Zeile (deren Oberkante = Kopf-Padding = 12px). */ .einst-sec { position: relative; } .einst-sec-infoslot { position: absolute; top: var(--space-3); right: var(--space-4); height: 28px; display: inline-flex; align-items: center; } .einst-sec.is-zu .einst-sec-head { border-bottom-color: transparent; } /* ── Sektions-Schalter im Kopf ──────────────────────────────────────────────── Der Schalter, der die ganze Sektion an- und abschaltet, sitzt RECHTS IM KOPF — nicht als erste Zeile im Inhalt (als getönte Zeile war er „ein hässlicher grauer Balken", Kyle 27.07.). Die Position sagt „ich gelte für alles darunter". Er liegt NEBEN der Klappfläche — sonst würde jeder Klick auf den Schalter die Sektion zuklappen. Sein ⓘ bleibt bei IHM (es erklärt den Schalter, nicht die Sektion) und ist als direktes Kind des Kopfes gegen Stauchung gesichert. */ .einst-sec-switch { flex-shrink: 0; margin-left: auto; } .einst-sec-head > .set-row-info { flex-shrink: 0; } /* Ausgeschaltete Sektion: Kopf bleibt voll lesbar (dort schaltet man wieder ein), der Titel wird gedämpft — sonst verspricht die Karte Wirkung, die sie nicht hat. */ .einst-sec--aus .einst-card-sec-title, .einst-sec--aus .einst-sec-thema { color: var(--color-text-muted); } /* Statt einer leeren Karte: ein Satz. Alle Felder sind `hidden`, wenn der Schalter aus ist — ohne diesen Satz stand dort nur weiße Fläche (sah nach Ladefehler aus). */ .einst-sec-aus { margin: 0; padding: var(--space-3) 0; font-size: var(--fs-body, 14px); color: var(--color-text-muted); } /* In der AUSGESCHALTETEN Sektion verschwinden auch die Gruppen-Überschriften. Die Felder sind `hidden`, die Eyebrow-Zeilen (`.set-gruppe`) aber nicht — übrig blieb ein verwaistes „FENSTER" über dem Ausgeschaltet-Satz, und der sektionsweite Hinweis las sich als Kind eines Gruppen-Titels (Hierarchie invertiert; Befund der unabhängigen Sicht-Prüfung an der Ruhezeit-Karte). Eine Überschrift über null sichtbaren Feldern ist keine Information. */ .einst-sec--aus .einst-fields .set-gruppe { display: none; } /* ── Klappfläche: ZWEI Zeilen ──────────────────────────────────────────────── Zeile 1 trägt Chevron + Titel + Zähler, Zeile 2 das vollständige `thema`. Vorher lagen beide in EINER Flex-Zeile — mit zwei Folgen gleichzeitig: der Titel ohne `flex-shrink: 0` wurde geschrumpft und umgebrochen (7 Sektionen gemessen), und das `thema` war per Ellipse trotzdem abgeschnitten (10 Sektionen, schlimmster Fall 452 von 1158px = 61% unlesbar). Der Kopf wird dadurch höher; das ist gewollt. */ .einst-sec-toggle { display: flex; flex-direction: column; align-items: stretch; gap: 2px; flex: 1; min-width: 0; padding: 0; background: none; border: 0; cursor: pointer; text-align: left; color: inherit; font: inherit; } /* Titel-Zeile: Titel · Zähler · Modul-Marke dicht beieinander (8px). Das Sektions-ⓘ liegt NICHT mehr hier, sondern im Eck-Slot `.einst-sec-infoslot` (oben rechts an der Karte, Begründung dort) — in der Zeile wanderte seine x-Position mit der Titel-Länge, Karte für Karte anders. */ .einst-sec-kopfzeile { display: flex; align-items: center; gap: var(--space-2); min-width: 0; min-height: 28px; } /* Die MODUL-MARKE am Sektionskopf hat hier bewusst KEINE eigene Regel: sie ist dieselbe Sache wie an der Gruppen-Überschrift und trägt deshalb dieselbe Klasse `.set-modul-marke` (settings-row.css). Ein zweiter Block hier sähe am Tag der Kopie identisch aus und liefe danach auseinander — das Muster, gegen das `check:css-doppel` gebaut ist. Erscheint nur, wenn AUSNAHMSLOS jedes Feld der Sektion dasselbe Modul liest (abgeleitet in `_einstSekMarke`). */ .einst-sec-toggle:focus-visible { outline: none; box-shadow: var(--lod-shadow-focus); border-radius: var(--radius-sm); } /* ── Chevron: ein ZEICHEN, kein Knopf-im-Kreis — und IMMER das letzte Kopf-Element. Die Kreis-Fassung (weißer Grund + Rahmen) funktionierte nur auf der getönten Bande; auf dem weißen Kopf blieb ein leerer Umriss, der wie ein vergessenes Radio-Element aussah (Kyles Screenshot: „Oder das mit den Chevrons"). Links vor dem Titel brauchte er zudem bei jeder nicht klappbaren Sektion einen unsichtbaren Platzhalter — das Loch im Kopf. Er sitzt als DIREKTES KIND des Kopfes hinter allen Aktionen (nicht in der Titel-Zeile): dort verdrängten ihn Sektions-Schalter samt ⓘ um ~90px nach links, und die Auf/Zu-Zeichen zweier übereinander liegender Karten standen nicht auf einer Spalte (Befund der unabhängigen Sicht-Prüfung). Die 28px-Höhe zentriert ihn auf der Titel-Zeile des flex-start-Kopfes; klickbar ist er zusätzlich zum Kopf (Binder in einstellungen.js), die Tastatur läuft über die Klappfläche. */ .einst-sec-chev { flex-shrink: 0; width: 20px; height: 28px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform var(--duration-fast, .15s) var(--ease-soft, ease); } .einst-sec-chev img { width: 16px; height: 16px; opacity: .45; transition: opacity var(--duration-fast, .15s) var(--ease-soft, ease); } .einst-sec.is-zu .einst-sec-chev { transform: rotate(-90deg); } .einst-sec-head:hover .einst-sec-chev img { opacity: .85; } /* Der Titel bricht NIE und gibt NIE nach — er ist die Beschriftung der Karte. Nachgeben darf nur der Zähler-Chip, und der ist ohnehin einstellig. 15px ist die bewusste Stufe ZWISCHEN den Tokens: `--fs-section` (16px) trägt der Bereichs-Titel im Seitenkopf, `--fs-card-title` (14px) war dem Feld-Label (13px) zu nah — genau das „mager", das der Kopf nach dem Ende der Tönung hatte. Die Hierarchie liest sich jetzt 16 → 15 → 13. */ .einst-sec-head .einst-card-sec-title { margin: 0; font-size: 15px; font-weight: var(--fw-semibold); letter-spacing: -.01em; flex-shrink: 0; white-space: nowrap; } /* Zeile 2: das `thema`, vollständig und umbrechend, bündig unter dem Titel (die Einrückung um den früheren Chevron-Slot ist mit ihm verschwunden — EINE linke Kante im Kopf). Lesemaß gedeckelt: über die ganze Kartenbreite wären das ~110 Zeichen pro Zeile, deutlich über dem Lesbaren. */ .einst-sec-thema { font-size: var(--fs-meta, 12px); font-weight: var(--fw-regular, 400); color: var(--color-text-muted); line-height: 1.45; min-width: 0; max-width: 62ch; } /* Zähler-Chip am Sektionstitel: wie viele Einträge steckt die Liste — sichtbar ohne Aufklappen oder Scrollen. Neutral getönt, damit er die Überschrift begleitet und nicht mit den Status-Badges der Zeilen konkurriert. */ .einst-sec-count { flex-shrink: 0; margin-left: calc(var(--space-1) * -1); min-width: 22px; padding: 1px var(--space-1-5); border-radius: var(--radius-pill, 999px); background: var(--lod-gray-100, #eef0f3); color: var(--color-text-muted); font-size: var(--fs-caption, 12px); font-weight: var(--fw-semibold); text-align: center; } .einst-sec-neu { flex-shrink: 0; } /* Nicht klappbare Sektion (nur eine Tabelle): gleiche Optik, aber kein Cursor, kein Hover, kein Chevron — der Kopf ist reine Überschrift. */ .einst-sec-toggle--fix { cursor: default; background: none; border: none; } .einst-sec-toggle--fix:hover { background: none; } .einst-sec--fix .einst-fields { display: block; } /* Inhalt: eigene Innenluft, damit die erste Zeile nicht am Kopf klebt. */ .einst-sec .einst-fields { padding: var(--space-2) var(--space-4) var(--space-3); } /* ── Lesemaß der Formularzeilen: NICHT hier ────────────────────────────────── Der Deckel steht im Zeilen-Modul (`--set-mass` in settings-row.css), weil die Zeile ihre natürliche Breite selbst kennt — sie ist die Summe ihrer Bahnen. Hier stand er als `max-width: 1100px` auf `.einst-fields > .set-row`, mit zwei Folgen: die Zahl existierte zweimal (Bahnen dort, Deckel hier) und griff nur bei DIREKTEN Kindern — Zeilen in einem Panel-Host (Abrechnungsarten) liefen ungedeckelt durch. */ .einst-sec.is-zu .einst-fields { display: none; } /* ── Einheitliche Zeilen-Typografie ───────────────────────────────────────────── Kyle: „zig unterschiedliche Schriftarten". Drei Ebenen, sauber gestaffelt: Sektionskopf 14px/600 → Zeilen-Label 13px/500 → Hilfetext 12px/400. Label- und Satz-Zeilen teilen Größe, Farbe und Zeilenhöhe; nur die Anordnung unterscheidet sich (Label links/Control rechts vs. Control im Lesefluss). */ /* Zeilen-Label und die Erklärung am ⓘ tragen ihre Typo im Zeilen-Modul. Hier bleibt der frei stehende Hinweistext, den Tabellen und Sonderflächen benutzen (Kopf einer Katalog-Liste, Konto-Hinweis, Wochenplan-Fehler). Vermessen (Kyle: „Mini Text mit 3410230 Umbrüchen"): `max-width: 78ch` auf 12px brach einen Ein-Zeiler in drei Zeilen um, während rechts 600px leer blieben. Untergeordnet bleibt er über Gewicht und Farbe, nicht über Winzigkeit. */ .einst-row-hilfe { font-size: var(--fs-body, 14px); font-weight: var(--fw-regular, 400); color: var(--color-text-secondary); line-height: 1.5; max-width: 88ch; } .app-scope .einst-textarea { width: 100%; min-height: 92px; resize: vertical; font-size: var(--fs-body, 14px); line-height: 1.55; } /* ── Wochenplan-Tabelle (Feld-Typ 'wochenplan') ────────────────────────────── Sieben Zeilen Mo–So mit Arbeitstag-Schalter und den Zeiten DIREKT in der Zeile. Kyle-Feedback 2026-07-26: Zeiten hinter einem Stift pro Tag zu verstecken war falsch — die Woche muss auf einen Blick lesbar und sofort editierbar sein. Ein Grid mit fixen Spalten sorgt dafür, dass alle Felder gleich groß sind (auch im Standort-Drawer, weil dort dieselbe Komponente rendert). */ .einst-wplan-table { display: flex; flex-direction: column; border: 1px solid var(--lod-border-light); border-radius: var(--radius-md, 8px); overflow: hidden; } .einst-wplan-head, .einst-wplan-row { display: grid; grid-template-columns: minmax(120px, 1.4fr) 92px repeat(4, minmax(96px, 1fr)); align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); } .einst-wplan-head { background: var(--lod-gray-50, #f7f8fa); border-bottom: 1px solid var(--lod-border-light); font-size: var(--fs-badge, 11px); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps, .08em); text-transform: uppercase; color: var(--lod-gray-500); } .einst-wplan-row + .einst-wplan-row { border-top: 1px solid var(--lod-gray-100, #eef0f3); } .einst-wplan-row:hover { background: var(--lod-gray-50); } /* Erste Spalte im KOPF trug 13px/500/uppercase, die uebrigen 11px/700/uppercase — zwei Uppercase-Stile in einer Tabellenzeile. Der Kopf-Stil kommt jetzt komplett aus `.einst-wplan-head`; hier bleibt nur die ZEILEN-Zelle. */ .einst-wplan-row .einst-wplan-c-tag { font-size: var(--fs-body, 14px); font-weight: var(--fw-medium, 500); color: var(--color-text); text-transform: none; letter-spacing: normal; } .einst-wplan-row.is-aus .einst-wplan-c-tag { color: var(--color-text-muted); } .einst-wplan-dot { width: 6px; height: 6px; border-radius: var(--radius-circular, 50%); background: var(--brand-default); flex-shrink: 0; } /* Zeit-Eingaben: gleiche Breite in jeder Spalte, kompakt und mittig. */ .app-scope .einst-wplan-zeit { width: 100%; min-width: 0; text-align: center; font-variant-numeric: tabular-nums; } .einst-wplan-row.is-aus .einst-wplan-zeit { opacity: .45; } .einst-wplan-fuss { margin: var(--space-2) 0 0; font-size: var(--fs-meta, 12px); color: var(--color-text-muted); } .einst-wplan-loading { padding: var(--space-3); font-size: var(--fs-meta, 12px); color: var(--color-text-muted); } /* Notebook/Tablet: Pausen-Spalten dürfen schmaler werden, bevor umgebrochen wird. */ @media (max-width: 1399px) { .einst-wplan-head, .einst-wplan-row { grid-template-columns: minmax(100px, 1.2fr) 84px repeat(4, minmax(84px, 1fr)); gap: var(--space-2); } } @media (max-width: 999px) { /* Tablet: zwei Zeilen je Tag — Kopfzeile entfällt, Felder tragen aria-label. */ .einst-wplan-head { display: none; } .einst-wplan-row { grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-areas: 'tag tag sw sw' 'von bis pv pb'; row-gap: var(--space-2); } .einst-wplan-c-tag { grid-area: tag; } .einst-wplan-c-sw { grid-area: sw; justify-self: end; } } /* ── Zwei gemessene Ursachen (Playwright, 2026-07-26) ──────────────────────── 1) Der LEERE Banner-Div zählte als Flex-Item und erzeugte über den Wrap-Gap 16px Extra-Luft ZUSÄTZLICH zur Scroll-Polsterung → Abstand oben war 32px statt der üblichen 16px. Leeren Banner ausblenden statt Gaps zu frisieren. 2) Die Nav-Items sind