:root { color-scheme: dark; /* Geräteweise Anzeige-Skalierung: nur clientseitig, pro Browser/Gerät in localStorage gepflegt (Karte „Darstellung auf diesem Gerät“ unter /stammdaten/design). Der Bootstrap in base.html setzt die Werte vor dem ersten Rendern auf , display-scale.js pflegt sie live. Defaults sind neutral (1) – ohne gespeicherte Werte ändert sich nichts. Weil die gesamte Oberfläche rem-basiert ist, skaliert die Wurzel-Schriftgröße (--ui-font-scale) den gesamten Text; --ui-edge-scale wirkt ausschließlich auf den Abstand des Inhalts zum Fensterrand (.app-main/.app-header), --ui-radius-scale auf die Ecken-Rundung (Skala 0 = eckig). */ --ui-font-scale: 1; --ui-edge-scale: 1; --ui-radius-scale: 1; --ui-card-gap-scale: 1; --ui-text-inset-scale: 1; /* Typografie-Rollen (geräteweise regelbar, Standard = keine Änderung): Größe je Rolle als Skala (Standard 1), Schwere je Tier als Wert (Standard = bisheriger Wert). Jede font-size ist mit ihrer Rollen-Skala multipliziert, jede font-weight durch ihr Tier ersetzt. */ --ui-fs-title: 1; --ui-fs-heading: 1; --ui-fs-body: 1; --ui-fs-secondary: 1; --ui-fs-small: 1; --ui-fw-strong: 700; --ui-fw-semibold: 600; --ui-fw-medium: 500; --ui-fw-normal: 400; font-size: calc(100% * var(--ui-font-scale)); /* Farben: dunkles Grundschema, auf ausdrücklichen Wunsch etwas heller/moderner und kontrastreicher abgestuft als die reine Fable-Screenshot-Vorlage (größerer Abstand zwischen Seite/Karte/Rahmen für klarere Ebenen), weiterhin bewusst kein helles/grelles Theme. */ --color-bg: #121316; --color-surface: #1c1e23; --color-surface-raised: #262930; --color-border: #34373f; --color-border-strong: #494d57; --color-text: #f3f4f6; --color-text-muted: #a7abb4; --color-text-faint: #767a84; --color-accent: #6ea8fe; --color-accent-strong: #4c8dff; --color-accent-contrast: #06121f; --color-success-bg: #163524; --color-success-text: #7ee2a8; /* Getönte Flächen für Warnung (heute fällig) und Akzent (diese Woche), analog zu success/danger; genutzt von den KPI-Karten (.kpi-card-*). */ --color-warning-bg: #3a2b12; --color-warning-text: #ffc46f; --color-accent-bg: #142639; --color-danger-bg: #34191b; --color-danger-border: #7a3b3b; --color-danger-text: #ff8383; /* Kräftiger, durchgehender Hintergrund für gefährliche Icon-Buttons (Löschen/Entfernen), siehe .icon-button-danger. */ --color-danger-solid: #b3392f; --color-danger-solid-hover: #95271f; /* Abstände (feste Basiswerte; die geräteweise Regelung wirkt nur auf den Fensterrand, siehe --ui-edge-scale an .app-main/.app-header) */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2.25rem; /* Abstand zwischen Karten: projektweit EIN Token (Basis 0,75rem), über den Regler „Kartenabstand“ der Darstellung skalierbar (--ui-card-gap-scale, 0 = Karten bündig). */ --card-gap: calc(0.75rem * var(--ui-card-gap-scale)); /* Abstand Karte → Überschrift des NÄCHSTEN Blocks: doppelter Karten- abstand, damit die Überschrift optisch zu ihrem Block darunter gruppiert (skaliert mit demselben Regler; 0 = bündig). */ --card-gap-section: calc(var(--card-gap) * 2); /* Seitlicher Einzug freistehender Texte gegenüber den Kartenrändern (Basis 0,75rem = Karten-Innenabstand), über den Regler „Text-Einzug“ der Darstellung skalierbar (0 = bündig mit den Karten). */ --text-inset: calc(0.75rem * var(--ui-text-inset-scale)); /* Radien & Schatten (Radius × --ui-radius-scale; Skala 0 = eckige Ecken) */ --radius-sm: calc(0.375rem * var(--ui-radius-scale)); --radius-md: calc(0.625rem * var(--ui-radius-scale)); --radius-lg: calc(0.875rem * var(--ui-radius-scale)); --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.28); /* Einheitliche optische Höhe aller einzeiligen Eingabe-Controls (Textboxen, Selects, Datumsfelder, Combobox-Suchfelder, Filter): Padding-basierte Höhen fallen je Control-Typ unterschiedlich aus (Datum ≠ Select ≠ Text) – eine feste Höhe zentriert die Inhalte und lässt alle Felder gleich hoch wirken (docs/13). Bewusste Ausnahmen: Textareas (mehrzeilig), Badge-Selects (.colored-select), kompakte Kartenkopf-Selects (1.9rem, Icon-Button-Höhe) und die flachen Felder des Eigenschaften-Rastereditors (Fakten-Optik). */ --control-height: 2.75rem; /* Typografie */ --font-sans: -apple-system, "Segoe UI", system-ui, sans-serif; } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; padding: 0; background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); /* Geerbter Fließtext folgt der Rolle „Fließtext“ (PO 2026-07-20). Ohne diese Basis blieb jeder Text OHNE eigene font-size (Absätze, .section-note, Hinweistexte) auf der Browser-Vorgabe von 16 px stehen und ignorierte die Skalierung – am deutlichsten auf textlastigen Seiten wie den Auflösungsprofilen. Bei Skala 1 ergibt sich unverändert 1rem. */ font-size: calc(1rem * var(--ui-fs-body)); line-height: 1.5; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-weight: var(--ui-fw-semibold); letter-spacing: -0.01em; color: var(--color-text); } h2 { font-size: calc(1.5rem * var(--ui-fs-title)); /* Seitentitel → nachfolgender Inhalt (oft Karten): Kartenabstand. */ margin: 0 0 var(--card-gap); } h3 { font-size: calc(1.05rem * var(--ui-fs-heading)); margin: 0; } .heading-select { font: inherit; font-weight: var(--ui-fw-strong); color: var(--color-text); background-color: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); padding: 0.1rem 0.5rem; } .heading-select:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(110, 168, 254, 0.2); } a { color: var(--color-accent); } :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); } /* Nur für Screenreader: entfernt visuell doppelte Hinweise (z. B. Suchfeld-Label neben identischem Placeholder), behält die zugängliche Beschriftung aber bei. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .app-header { display: flex; align-items: flex-end; gap: var(--space-3); padding: calc(var(--space-4) * var(--ui-edge-scale)) calc(var(--space-6) * var(--ui-edge-scale)) 0; border-bottom: 1px solid var(--color-border); background-color: var(--color-surface); } .app-header .app-nav { flex: 1; min-width: 0; } /* Neu-laden-Button rechts in der Kopfzeile, auf Höhe der Haupt-Reiter. Das ⟳-Symbol größer als das Grund-Icon (PO 2026-07-22): Es ist der am häufigsten genutzte Kopf-Knopf und darf sichtbarer sein. Nur die Glyphe wächst, die 36×36-Fläche bleibt gleich, damit alle drei Knöpfe gleich groß sind. */ .app-refresh-button { align-self: center; } /* Meldeknopf rechts in der Kopfzeile. Als
gebaut, damit das Feld ohne eigenes JavaScript auf- und zuklappt; das Feld selbst schwebt über der Seite, damit es die Kopfzeilenhöhe nicht verändert. */ .todo-add { align-self: center; position: relative; } /* Abmelde-Knopf in der Kopfzeile (PO 2026-07-21): Die Kopfzeile richtet ihre Kinder unten aus (align-items: flex-end, damit die Reiter an der Unterkante andocken). Neu-laden- und Meldeknopf heben sich mit align-self: center heraus; der Abmelde-Knopf steckt aber im umschließenden
, das diese Zentrierung nicht erbte und dadurch 1–2 px tiefer saß. Das Formular bekommt deshalb dieselbe Zentrierung und legt sich als schmale Flex-Box eng um seinen Knopf, sodass alle drei Symbol-Knöpfe auf gleicher Höhe und gleich groß stehen. */ .app-logout { align-self: center; display: flex; } .todo-add > summary { list-style: none; cursor: pointer; } .todo-add > summary::-webkit-details-marker { display: none; } .todo-add[open] > summary { border-color: var(--color-accent); color: var(--color-accent); } .todo-add-panel { position: absolute; top: calc(100% + var(--space-1)); right: 0; z-index: 30; width: min(24rem, calc(100vw - 2 * var(--space-3))); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background-color: var(--color-surface); box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.18); } .todo-add-panel textarea { width: 100%; } /* Verlauf der laufenden Arbeit, aufklappbar am Ticket (PO 2026-07-21). Der Kasten bekommt eine feste Höhe und scrollt: Ein Lauf erzeugt hunderte Zeilen, die sonst die ganze Tabelle auseinanderzögen. */ .ticket-verlauf { margin-top: var(--space-2); } /* Vertikal kompakt gehalten (PO 2026-07-22): Der Fortschritt sitzt eng unter dem Tickettext und soll die Zeile so wenig wie möglich auseinanderziehen – knapper Abstand, kleine Schrift. */ .ticket-verlauf { margin-top: var(--space-1); } .ticket-verlauf > summary { cursor: pointer; color: var(--color-text-muted); font-size: calc(0.75rem * var(--ui-fs-small)); line-height: 1.2; } .ticket-verlauf > summary:hover { color: var(--color-text); } .ticket-verlauf-text { max-height: 12rem; margin: var(--space-1) 0 0; padding: var(--space-1) var(--space-2); overflow: auto; border-radius: var(--radius-sm); background-color: var(--color-surface-raised); color: var(--color-text-muted); font-size: calc(0.72rem * var(--ui-fs-small)); /* Enge Zeilen: Der Fortschritt sind knappe Stichworte, keine Fließtexte. */ line-height: 1.35; /* Die Zeilen sind bereits gekürzt; lange Pfade dürfen umbrechen, statt den Kasten in die Breite zu ziehen. */ white-space: pre-wrap; overflow-wrap: anywhere; } /* Tickettabellen vertikal kompakt (PO 2026-07-22): NUR die beiden Ticketlisten, nicht die Tabellen im übrigen Projekt. Zwei Ursachen für den Leerraum in einer Zeile: 1. Die Zellen tragen projektweit das großzügige Grundpolster (--space-3); hier genügt --space-2. 2. Der Tickettext steht als data-multiline-Zelle oben (vertical-align: top), während die 36-px-Aktionsknöpfe die Zeilenhöhe vorgeben – bei einzeiligem Text blieb darunter eine leere Fläche. Mittig ausgerichtet sitzt der Text auf Knopfhöhe, der Leerraum verschwindet. Der aufgeklappte Fortschritt fließt weiterhin darunter. */ #todo-open-table th, #todo-open-table td, #todo-done-table th, #todo-done-table td { padding-top: var(--space-2); padding-bottom: var(--space-2); } #todo-open-table td[data-multiline], #todo-done-table td[data-multiline] { vertical-align: middle; } /* Abschnitt „Erledigt“ der Ticketliste: ein- und ausklappbar (PO 2026-07-21). Der Kartenkopf bleibt optisch der eines Abschnitts, bekommt aber ein Dreieck und einen Zeiger, damit er als anklickbar zu erkennen ist. */ .todo-erledigt > summary { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; list-style: none; } .todo-erledigt > summary::-webkit-details-marker { display: none; } .todo-erledigt > summary::before { content: "▸"; color: var(--color-text-muted); transition: transform 0.15s ease-in-out; } .todo-erledigt[open] > summary::before { transform: rotate(90deg); } @media (prefers-reduced-motion: reduce) { .todo-erledigt > summary::before { transition: none; } } /* Ticket, an dem Claude Code gerade arbeitet (PO 2026-07-21): Die Zeile blinkt langsam. Bewusst langsam und über die Hintergrundfarbe statt über die Deckkraft – ein schnelles Blinken oder verschwindender Text machte die Zeile unlesbar, während man sie liest. `prefers-reduced-motion` schaltet die Bewegung ab; damit die Zeile trotzdem erkennbar bleibt, behält sie dann dauerhaft die hervorgehobene Farbe. */ /* Nicht mehr die ganze Zeile blinkt, sondern das Fortschritt-Feld (PO 2026-07-22, Ticket 15): Es lädt zum Ausklappen ein, und prominenter als das frühere dezente Hintergrund-Pulsieren. Zugleich löst das Ticket 16 – das frühere Blinken saß auf den Tabellenzellen, die beim Ändern der Spaltenbreite umgebaut werden (data-table.js wickelt überlaufenden Zellinhalt ein), wodurch die Animation abbrach. Das Fortschritt-Feld ist davon unberührt. Prominent über Akzentfarbe UND einem leichten Puls der Fläche; bewusst nicht über die Deckkraft, damit die Beschriftung lesbar bleibt. */ @keyframes ticket-fortschritt-blink { 0%, 100% { background-color: var(--color-surface-raised); color: var(--color-text-muted); box-shadow: 0 0 0 1px var(--color-border-strong); } 50% { background-color: var(--color-accent); color: var(--color-accent-contrast); box-shadow: 0 0 0 1px var(--color-accent); } } /* Das Feld als klar abgegrenzte, klickbare Fläche – damit das Pulsieren als „hier ausklappen“ lesbar ist, nicht als diffuses Flackern. */ .list-table tbody tr[data-in-arbeit] .ticket-verlauf > summary { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0.1rem 0.5rem; border-radius: 999px; font-weight: var(--ui-fw-semibold); /* Dauer bewusst ein ganzzahliger Teiler des Nachlade-Intervalls der Liste (5 s / 4 = 1,25 s; hx-trigger every 5s in todo/partials/list.html): Das Selbstnachladen ERSETZT das Feld im DOM, wodurch die Animation neu startet. Nur wenn die Dauer die 5 s glatt teilt, steht die alte Animation beim Austausch genau auf Phase 0 – der Neustart landet nahtlos, statt mitten im Zyklus zurückzuspringen (das frühere Flackern, Ticket 20). Wird das Intervall geändert, muss diese Dauer mitgeführt werden. */ animation: ticket-fortschritt-blink 1.25s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .list-table tbody tr[data-in-arbeit] .ticket-verlauf > summary { animation: none; background-color: var(--color-accent); color: var(--color-accent-contrast); } } /* Zurückhaltend gehalten (PO 2026-07-21): Der Weg zur Liste ist der Nebenweg, das Melden die Hauptsache – ein Akzent-Knopf zog hier zu viel Aufmerksamkeit. */ .todo-add-list-link { color: var(--color-text-muted); font-size: calc(0.85rem * var(--ui-fs-secondary)); text-decoration: none; } .todo-add-list-link:hover { color: var(--color-text); text-decoration: underline; } .todo-add-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-2); } /* Kurze, selbst verschwindende Bestätigung nach dem Hintergrund-Absenden eines Tickets (Ticket 65): Die Seite wechselt bewusst nicht, darum signalisiert ein dezenter Einblender oben rechts, dass das Ticket angekommen ist. */ .todo-toast { position: fixed; top: calc(var(--space-4) + 3rem); right: var(--space-4); z-index: 60; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background-color: var(--color-surface-raised); color: var(--color-text); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); font-size: calc(0.9rem * var(--ui-fs-secondary)); opacity: 1; transition: opacity 0.3s ease, transform 0.3s ease; } .todo-toast-leaving { opacity: 0; transform: translateY(-6px); } /* Dieselbe Designsprache wie die Objektklassen-Reiter (.object-class-tab*): flach an der Kopfzeilen-Unterkante andockende Reiter statt einfacher Textlinks, damit sich Hauptnavigation und Objektklassen-Reiter wie dieselbe Komponentenfamilie anfühlen. */ .app-nav { display: flex; align-items: flex-end; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; min-height: 2.45rem; gap: var(--space-1); } /* Generische Drag-Affordanz/Einfüge-Trennstrich für jede per data-reorderable-list aktivierte Reitergruppe (Hauptnavigation, Objektklassen-, Objekttyp-Reiter, künftige Gruppen). Der Trennstrich nutzt Pseudo-Elemente statt border-left/-right, damit er unabhängig davon sichtbar bleibt, ob eine Komponente (z. B. .object-class-tab) selbst ein `border`-Shorthand setzt; die zweifache Attributselektor-Spezifität bei Cursor/ Dragging stellt sicher, dass sie unabhängig von der Stylesheet-Reihenfolge über komponentenspezifische Einzelklassen-Regeln (z. B. `cursor: pointer`) gewinnt. */ [data-reorder-item] { position: relative; } [data-reorder-item][data-reorder-ready="true"] { cursor: grab; } [data-reorder-item].reorder-item-dragging { cursor: grabbing; } .reorder-item-dragging { opacity: 0.5; } [data-reorder-item]::before, [data-reorder-item]::after { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background-color: var(--color-accent); opacity: 0; pointer-events: none; } [data-reorder-item]::before { left: 0; } [data-reorder-item]::after { right: 0; } .reorder-item-drop-before::before { opacity: 1; } .reorder-item-drop-after::after { opacity: 1; } /* Vertikale Listen (data-reorder-axis="y", z. B. die Objektakte-Karten): Drop-Indikatoren liegen als waagerechte Linien über bzw. unter dem Element statt links/rechts daneben. */ [data-reorder-axis="y"] > [data-reorder-item]::before, [data-reorder-axis="y"] > [data-reorder-item]::after { left: 0; right: 0; width: auto; height: 2px; } [data-reorder-axis="y"] > [data-reorder-item]::before { top: 0; bottom: auto; } [data-reorder-axis="y"] > [data-reorder-item]::after { top: auto; bottom: 0; } /* Tabellenzeilen als data-reorder-item (z. B. die Ereignisse eines Vorgangs): Pseudoelemente auf werden von der Tabellen-Layoutfixierung als anonyme zusätzliche Zelle eingefügt und verschieben alle Spalten – deshalb hier keine ::before/::after. Der Drop-Indikator liegt stattdessen als durchgehende Linie (Innenschatten) auf den Zellen der Zielzeile: oberhalb bei drop-before, unterhalb bei drop-after – exakt an der künftigen Einfügeposition. */ tr[data-reorder-item]::before, tr[data-reorder-item]::after { content: none; } tr[data-reorder-item].reorder-item-drop-before > th, tr[data-reorder-item].reorder-item-drop-before > td { box-shadow: inset 0 2px 0 var(--color-accent); } tr[data-reorder-item].reorder-item-drop-after > th, tr[data-reorder-item].reorder-item-drop-after > td { box-shadow: inset 0 -2px 0 var(--color-accent); } /* Bei Listen mit dediziertem Drag-Handle (data-reorder-handle) zeigt nur der Handle den Greif-Cursor, nicht das gesamte Element; reorderable-list.js markiert den Handle beim Initialisieren mit data-reorder-handle-ready. */ [data-reorder-handle] > [data-reorder-item][data-reorder-ready="true"] { cursor: auto; } [data-reorder-handle-ready] { cursor: grab; /* Touch/Pen: Auf dem Griff zieht die Geste (Pointer-Pfad in reorderable-list.js) statt zu scrollen; ohne touch-action:none würde iOS die Berührung als Scrollen werten und keine pointermove liefern. Tippen auf Buttons/Selects im Griff bleibt möglich. */ touch-action: none; } .page-links a { color: var(--color-text-muted); text-decoration: none; font-size: calc(0.9rem * var(--ui-fs-secondary)); font-weight: var(--ui-fw-medium); transition: color 0.15s ease; } .page-links a:hover { color: var(--color-accent); text-decoration: none; } .app-nav a { display: inline-flex; align-items: center; flex-shrink: 0; padding: var(--space-2) var(--space-4); color: var(--color-text-muted); text-decoration: none; font-weight: var(--ui-fw-medium); font-size: calc(0.9rem * var(--ui-fs-secondary)); white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease; } .app-nav a:hover { color: var(--color-text); text-decoration: none; } .app-nav a.app-nav-active { color: var(--color-text); background-color: var(--color-surface-raised); border-bottom-color: var(--color-accent); border-top-left-radius: var(--radius-sm); border-top-right-radius: var(--radius-sm); } /* Rücksprung-/Einstiegslinks („Zu den …“, „Zurück zu …“) werden global nicht mehr angezeigt (PO-Entscheidung; deckt sich mit dem Navigations-Grundsatz in docs/13, „redundante globale Rücksprünge auf jeder Fachseite werden vermieden“). `.page-links` ist projektweit ausschließlich für diese Links reserviert, deshalb genügt eine zentrale Ausblendung – auch für künftige Seiten. Das Markup bleibt in den Templates bestehen, ohne Wirkung. */ .page-links { display: none; } /* Einheitlicher Objektpfad: als Seiten-Breadcrumb oberhalb einer Überschrift (letzter Eintrag unverlinkt, aktuelle Seite) und als kompakte, vollständig klickbare Pfad-Darstellung innerhalb von Tabellenzellen (link_last). */ .breadcrumbs { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; font-size: calc(0.82rem * var(--ui-fs-secondary)); color: var(--color-text-muted); } .breadcrumbs a { color: var(--color-text-muted); text-decoration: none; } .breadcrumbs a:hover { color: var(--color-accent); text-decoration: none; } /* Spalte „Offene Störung“ der Objekttabellen: dezenter Warn-Ton, damit eine offene Störung auf einen Blick auffällt (ADR-040). */ .open-fault-link { color: var(--color-danger-text); } /* Mehrere offene Störungen je Objekt (Rollup): untereinander gestapelt, damit lange Titel lesbar bleiben. */ .open-fault-list { display: flex; flex-direction: column; gap: var(--space-1); } /* Karte „Verknüpfte Objekte“ (ADR-045): Abschnitte Übergeordnet / Unterobjekte / Beziehungen unter einer Kartenüberschrift. */ .linked-objects-subheading { margin: var(--space-4) 0 var(--space-2); color: var(--color-text-muted); font-size: calc(0.8rem * var(--ui-fs-small)); font-weight: var(--ui-fw-semibold); text-transform: uppercase; letter-spacing: 0.04em; } .linked-objects-subheading:first-of-type { margin-top: 0; } /* Beziehungen-Karte der Objektakte (ADR-044): je Beziehung eine Zeile „Typ-Bezeichnung · Objekt · Entfernen“; darunter die Schnellanlage. */ .relation-list { display: flex; flex-direction: column; } .relation-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-1) 0; } .relation-row + .relation-row { border-top: 1px solid var(--color-border); } .relation-type-label { color: var(--color-text-muted); font-size: calc(0.9rem * var(--ui-fs-secondary)); } .relation-object-link { flex: 1; min-width: 0; } .relation-create-form { display: flex; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-3); } .relation-create-form .combobox { flex: 1; min-width: 0; } /* Breadcrumb als Aktentitel (Objektakte + Vorgangsakte-Präfix, PO 2026-07-08): erbt die Titelgröße; Vorfahren/Objekt-Segmente gedämpft, der eigentliche Titel (Objektname bzw. „ · Vorgangstitel“) in Titel-Optik. */ .akte-hero h2 .breadcrumbs { font-size: inherit; font-weight: inherit; color: var(--color-text-muted); } /* Im einzeiligen, herunterskalierenden Vorgangstitel bleibt die Kette in einer Zeile (fit-single-line.js skaliert, statt umzubrechen). */ .object-name-heading .breadcrumbs { flex-wrap: nowrap; } .breadcrumb-current { color: var(--color-text); font-weight: var(--ui-fw-semibold); } .breadcrumb-separator { color: var(--color-text-faint); } .page-breadcrumbs { display: block; margin-bottom: var(--space-3); } .app-main { padding: calc(var(--space-6) * var(--ui-edge-scale)); max-width: 160rem; margin: 0 auto; } /* Hinweis, wenn eine htmx-Anfrage am Netz oder am Server gescheitert ist (connection-guard.js). Ohne ihn bliebe ein gescheiterter Klick vollkommen stumm. Bewusst unten mittig, nicht blockierend, blendet sich selbst aus. */ .connection-hint { position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); z-index: 99998; display: flex; align-items: center; gap: var(--space-2); max-width: min(38rem, calc(100vw - 2rem)); padding: 0.7rem 1rem; border: 1px solid var(--color-danger-border); border-radius: var(--radius-lg); background: var(--color-danger-bg); color: var(--color-danger-text); box-shadow: var(--shadow-card); font-size: calc(0.9rem * var(--ui-fs-secondary)); } .connection-hint[hidden] { display: none; } /* Schalter „Scrollleisten“ der Darstellung (ui-scale:scrollbar = 0, Klasse aus Bootstrap/display-scale.js): blendet NUR die vertikalen Scrollleisten aus (width: 0); horizontale bleiben als schlanke, thematisierte Leiste erhalten (das ::-webkit-scrollbar-Styling ersetzt die native Darstellung, daher bekommt die horizontale Leiste hier ein eigenes Aussehen). Gescrollt wird weiterhin normal per Rad, Trackpad oder Touch. */ html.ui-scrollbar-hidden::-webkit-scrollbar, html.ui-scrollbar-hidden *::-webkit-scrollbar { width: 0; height: 0.5rem; background: transparent; } html.ui-scrollbar-hidden::-webkit-scrollbar-thumb, html.ui-scrollbar-hidden *::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 0.25rem; } html.ui-scrollbar-hidden::-webkit-scrollbar-track, html.ui-scrollbar-hidden *::-webkit-scrollbar-track { background: transparent; } /* Firefox kennt ::-webkit-scrollbar nicht und kann Scrollleisten nur je Element ganz aus-/einblenden (scrollbar-width, keine Achsen-Steuerung): Dort werden alle Leisten ausgeblendet, nur horizontale Scroller (Tabellen-Wrapper) behalten eine schmale Leiste. WebKit-Browser (Safari) überspringt diesen Block – dort gilt die Nur-vertikal-Regel oben. */ @supports not selector(::-webkit-scrollbar) { html.ui-scrollbar-hidden, html.ui-scrollbar-hidden * { scrollbar-width: none; } html.ui-scrollbar-hidden .list-table-wrapper { scrollbar-width: thin; } } .section-note { color: var(--color-text-muted); font-style: italic; margin: 0 0 var(--card-gap); } /* Freistehende Texte zwischen/über den Karten (Seitentitel, Rücksprung- Links, Hinweise, Gruppen-/Blockköpfe) rücken um --text-inset ein: Sie halten damit etwas mehr Abstand zum Rand als die Kartenränder (Regler „Text-Einzug“, 100 % = Karten-Innenabstand). Bewusst über Direktkind-Selektoren, damit dieselben Klassen INNERHALB von Karten (dort liefert das Kartenpolster den Abstand) nicht doppelt einrücken. */ .app-main > h2, .object-akte-page > h2, .app-main > .page-links, .object-akte-page > .page-links, .app-main > .section-note, .object-akte-page > .section-note, .project-history-heading { padding-inline: var(--text-inset); } .project-history { /* Blocküberschrift folgt auf die Karten darüber → Sektionsabstand. */ margin-top: var(--card-gap-section); } .project-history-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--card-gap); } .project-history-heading p { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: calc(0.9rem * var(--ui-fs-secondary)); } .project-history-source { color: var(--color-text-faint); font-size: calc(0.78rem * var(--ui-fs-small)); white-space: nowrap; } .project-history-grid { display: grid; gap: var(--card-gap); } .project-history-card { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background-color: var(--color-surface); box-shadow: var(--shadow-card); } .project-history-card-current { border-color: var(--color-accent-strong); box-shadow: 0 0 0 1px rgba(110, 168, 254, 0.15), var(--shadow-card); } .project-history-card summary { padding: var(--space-4) var(--space-5); cursor: pointer; list-style: none; } .project-history-card summary::-webkit-details-marker { display: none; } .project-history-title, .project-history-title > span:first-child { display: flex; align-items: center; gap: var(--space-2); } .project-history-title { justify-content: space-between; } .project-history-title strong { color: var(--color-text); } .project-history-title > span:first-child > span { color: var(--color-text-muted); } .project-current-badge { padding: 0.15rem 0.55rem; border-radius: 999px; background-color: rgba(110, 168, 254, 0.14); color: var(--color-accent); font-size: calc(0.72rem * var(--ui-fs-small)); font-weight: var(--ui-fw-semibold); white-space: nowrap; } .project-progress-row { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); color: var(--color-text-muted); font-size: calc(0.82rem * var(--ui-fs-secondary)); } .project-progress-row strong { color: var(--color-text); } .project-progress { height: 0.4rem; margin-top: var(--space-2); overflow: hidden; border-radius: 999px; background-color: var(--color-surface-raised); } .project-progress span { display: block; height: 100%; border-radius: inherit; background-color: var(--color-accent-strong); } .project-status-counts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-3); color: var(--color-text-faint); font-size: calc(0.78rem * var(--ui-fs-small)); } .project-status-counts .status-completed { color: var(--color-success-text); } .project-status-counts .status-blocked { color: var(--color-danger-text); } .project-task-list { border-top: 1px solid var(--color-border); } .project-task { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--color-border); font-size: calc(0.82rem * var(--ui-fs-secondary)); } .project-task:last-child { border-bottom: 0; } .project-task > div:first-child { display: flex; gap: var(--space-2); } .project-task > div:first-child span { color: var(--color-text-muted); } .project-task-meta { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); color: var(--color-text-faint); text-align: right; } .project-task-status { padding: 0.1rem 0.45rem; border: 1px solid var(--color-border-strong); border-radius: 999px; font-weight: var(--ui-fw-semibold); white-space: nowrap; } .project-task-status.status-erledigt { color: var(--color-success-text); } .project-task-status.status-blockiert { color: var(--color-danger-text); } .project-task-status.status-in-arbeit { color: var(--color-accent); } @media (max-width: 40rem) { .project-history-heading { align-items: flex-start; flex-direction: column; gap: var(--space-2); } .project-history-title, .project-history-title > span:first-child, .project-task { align-items: flex-start; flex-direction: column; } .project-task-meta { justify-content: flex-start; text-align: left; } } .page-intro h2 { margin-top: var(--space-3); margin-bottom: var(--space-2); } .page-intro p { color: var(--color-text-muted); margin: 0; max-width: 42rem; } /* Thematische Gruppen der Einstellungs-Übersicht: Sektionsabstand zwischen den Gruppen-Karten. */ .settings-group { margin-bottom: var(--card-gap-section); } .settings-group:last-of-type { margin-bottom: 0; } /* Einstellungsbereich: Seitenleiste + Inhalt auf allen /stammdaten-Seiten (base.html). Die Leiste erlaubt den direkten Wechsel zwischen den Bereichen ohne Rücksprung zur Übersicht. */ .settings-layout { display: flex; align-items: flex-start; gap: var(--card-gap-section); } .settings-content { flex: 1; min-width: 0; } .settings-sidebar { flex: 0 0 auto; width: 13.5rem; position: sticky; top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-3); background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); } .settings-sidebar-group { display: flex; flex-direction: column; } .settings-sidebar-group-title { padding: 0 var(--space-2) var(--space-1); color: var(--color-text-faint); font-size: calc(0.72rem * var(--ui-fs-small)); font-weight: var(--ui-fw-semibold); text-transform: uppercase; letter-spacing: 0.04em; } .settings-sidebar-link { display: block; padding: 0.35rem var(--space-2); border-radius: var(--radius-sm); color: var(--color-text-muted); font-size: calc(0.9rem * var(--ui-fs-secondary)); text-decoration: none; } .settings-sidebar-link:hover, .settings-sidebar-link:focus-visible { color: var(--color-text); background-color: var(--color-surface-muted); } .settings-sidebar-active { color: var(--color-accent); background-color: var(--color-surface-muted); font-weight: var(--ui-fw-semibold); } /* Schmale Bildschirme: Leiste wird zur horizontalen, umbrechenden Chip-Zeile oberhalb des Inhalts; Gruppentitel entfallen. */ @media (max-width: 48rem) { .settings-layout { flex-direction: column; /* In Spaltenrichtung steuert align-items die WAAGERECHTE Achse. Das `align-items: flex-start` der Grundregel (dort für die Zeilen- Anordnung gedacht) ließ die Kinder hier auf ihre Inhaltsbreite wachsen: Eine Tabelle mit `min-width: 46rem` schob damit die ganze Seite über den Bildschirmrand hinaus, statt in ihrem eigenen Wrapper (`.list-table-wrapper`, overflow-x: auto) zu scrollen. `stretch` bindet die Kinder wieder an die Containerbreite. */ align-items: stretch; gap: var(--card-gap); } .settings-sidebar { position: static; width: 100%; flex-direction: row; flex-wrap: wrap; gap: var(--space-1); } .settings-sidebar-group { display: contents; } .settings-sidebar-group-title { display: none; } .settings-sidebar-link { border: 1px solid var(--color-border); border-radius: 999px; padding: 0.25rem 0.7rem; font-size: calc(0.82rem * var(--ui-fs-small)); } .settings-sidebar-active { border-color: var(--color-accent); } } /* Kompakte Einstellungs-Übersicht: je Gruppe eine Karte mit einzeiligen Bereichszeilen (Titel · Kurzbeschreibung · Anzahl) statt großer Karten. */ .settings-index-list { display: flex; flex-direction: column; } .settings-index-row { display: flex; align-items: baseline; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: inherit; text-decoration: none; } .settings-index-row + .settings-index-row { border-top: 1px solid var(--color-border); } a.settings-index-row:hover, a.settings-index-row:focus-visible { background-color: var(--color-surface-muted); } .settings-index-row h3 { margin: 0; flex-shrink: 0; font-size: calc(0.95rem * var(--ui-fs-secondary)); } .settings-index-description { flex: 1; min-width: 0; color: var(--color-text-muted); font-size: calc(0.85rem * var(--ui-fs-secondary)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .settings-index-count { flex-shrink: 0; color: var(--color-text-muted); font-size: calc(0.85rem * var(--ui-fs-secondary)); } .settings-index-count strong { color: var(--color-text); } /* Sehr schmale Bildschirme: Kurzbeschreibung ausblenden, Titel + Anzahl bleiben. */ @media (max-width: 40rem) { .settings-index-description { display: none; } } .status-badge { flex-shrink: 0; padding: 0.15rem 0.5rem; border: 1px solid var(--color-border-strong); border-radius: 999px; color: var(--color-text-faint); font-size: calc(0.72rem * var(--ui-fs-small)); font-weight: var(--ui-fw-semibold); } .button-link { display: inline-block; padding: 0.5rem 0.9rem; border-radius: var(--radius-sm); background-color: var(--color-accent-strong); color: var(--color-accent-contrast); font-size: calc(0.85rem * var(--ui-fs-secondary)); font-weight: var(--ui-fw-semibold); text-decoration: none; } .button-link:hover { background-color: var(--color-accent); text-decoration: none; } .badge { margin-left: var(--space-2); padding: 0.15rem 0.55rem; border-radius: 999px; background-color: var(--color-surface-raised); border: 1px solid var(--color-border-strong); color: var(--color-text-muted); font-size: calc(0.75rem * var(--ui-fs-small)); font-weight: var(--ui-fw-medium); } /* Farbige Darstellung von Vorgangstyp/-status/-priorität: ein einziger, projektweit wiederverwendbarer Badge (siehe app/templates/partials/macros.html, Makro colored_badge) statt separater Klassen je Fachbereich. Dezenter Badge mit der gepflegten Farbe als Rahmen/Text, Hintergrund bleibt bewusst nur ein transparenter Farbschimmer, damit der Text lesbar bleibt (siehe docs/13_design_system.md, Grundsatz „lesbar statt bunt“). */ .colored-badge { display: inline-flex; align-items: center; margin-left: var(--space-2); padding: 0.1rem 0.5rem; border-radius: 999px; border: 1px solid var(--badge-color, var(--color-border-strong)); background-color: color-mix(in srgb, var(--badge-color, var(--color-border-strong)) 16%, transparent); color: var(--badge-color, var(--color-text-muted)); font-size: calc(0.75rem * var(--ui-fs-small)); font-weight: var(--ui-fw-medium); white-space: nowrap; text-decoration: none; } .inline-badge-button { font: inherit; margin-left: 0; cursor: text; } .inline-master-data-name, .inline-master-data-description { width: 100%; min-width: 10rem; } .inline-color-input { width: 2.75rem; height: 2rem; padding: 0.1rem; cursor: pointer; } /* Standardstatus-Select je Vorgangstyp (Ticket 76): kompaktes natives Feld in der Stammdaten-Liste, breit genug für die Statusnamen. */ .inline-master-data-select { min-width: 10rem; cursor: pointer; } /* Editierbare Badge-Variante (siehe app/static/js/colored-select.js): das und Datumsfelder rendern in Safari mit einer größeren System-Schrift, als per font-size angegeben ist, und wirken dadurch deutlich größer als der normale Zelltext (PO-Meldung 2026-07-28, Ticket 57; in Chrome/Firefox stimmt die Größe bereits). Nur in Safari verkleinern: `@supports (background: -webkit-named-image(i))` trifft ausschließlich Safari, sodass Chrome/Firefox unberührt bleiben. */ @supports (background: -webkit-named-image(i)) { .list-table td select, .list-table td input[type="date"]:not([type="checkbox"]):not([type="color"]) { font-size: calc(0.78rem * var(--ui-fs-secondary)); } } .event-reference-control { display: flex; align-items: center; gap: var(--space-2); } .event-reference-control select { flex: 1 1 auto; } .list-value-with-action { display: inline-flex; align-items: center; gap: 0.15rem; } /* Kleine Entfernen-Buttons (×) in Listenwerten/Chips: wie alle Löschen-/ Entfernen-Aktionen dauerhaft mit rotem Hintergrund und weißem ✕, nicht erst bei Hover (docs/13_design_system.md, „Buttons“). */ .inline-remove-button { display: inline-flex; align-items: center; justify-content: center; width: 1.1rem; height: 1.1rem; padding: 0; border: 0; border-radius: var(--radius-sm); background-color: var(--color-danger-solid); color: #fff; font: inherit; font-size: calc(0.75rem * var(--ui-fs-small)); line-height: 1; cursor: pointer; } .inline-remove-button:hover { background-color: var(--color-danger-solid-hover); color: #fff; } .work-order-event-input input[type="time"] { margin-top: var(--space-2); } .work-order-event-input textarea { /* Kompakter Start (PO 2026-07-22, Ticket 25): rund eineinhalb Zeilen als Minimum – kurze Meldungen sind dann nicht unnötig hoch. Für längeren Text wächst das Feld über table-textarea-autogrow.js in der Höhe mit. */ min-height: 2.4rem; resize: vertical; } .form-actions { display: flex; align-items: center; gap: var(--space-4); /* Einheitlicher Standardabstand der Aktionsleiste zur darüberliegenden Karte (kollabiert mit deren margin-bottom, wo vorhanden). */ margin-top: var(--space-4); /* Folgt auf die Aktionsleiste eine Karte (z. B. „Gespeicherte Farbschemata“ unter dem Farb-Formular), gilt der Kartenabstand. */ margin-bottom: var(--card-gap); } /* In Dialogen ist die Aktionsleiste die Fußzeile – kein Nachlauf-Abstand. */ .app-modal .form-actions { margin-bottom: 0; } /* "Abbrechen" ist ein reiner Link, soll aber dieselbe Höhe/Innenabstände wie der primäre "Speichern"-Button haben (gleiche Aktionsleiste, sekundär statt primär). .button-danger ("Löschen") behält ihre eigene, rote Gestaltung. */ .form-actions a:not(.button-danger) { display: inline-flex; align-items: center; font-family: inherit; font-size: calc(0.9rem * var(--ui-fs-secondary)); font-weight: var(--ui-fw-semibold); text-decoration: none; border-radius: var(--radius-sm); padding: 0.55rem 1.1rem; border: 1px solid var(--color-border-strong); color: var(--color-text-muted); transition: color 0.15s ease, border-color 0.15s ease; } .form-actions a:not(.button-danger):hover { color: var(--color-text); border-color: var(--color-accent); text-decoration: none; } .button-secondary { background: transparent; border: 1px solid var(--color-border-strong); color: var(--color-text-muted); } .button-secondary:hover { background: transparent; border-color: var(--color-accent); color: var(--color-text); } /* Buttons */ button { font-family: inherit; font-size: calc(0.9rem * var(--ui-fs-secondary)); font-weight: var(--ui-fw-semibold); cursor: pointer; border-radius: var(--radius-sm); padding: 0.55rem 1.1rem; border: 1px solid transparent; transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.05s ease; } button[type="submit"] { background-color: var(--color-accent-strong); color: var(--color-accent-contrast); } button[type="submit"]:hover { background-color: var(--color-accent); } button[type="button"] { background-color: transparent; color: var(--color-text-muted); border-color: var(--color-border-strong); } button[type="button"]:hover { color: var(--color-text); border-color: var(--color-accent); } button:active { transform: translateY(1px); } .button-danger { display: inline-block; font-family: inherit; font-size: calc(0.9rem * var(--ui-fs-secondary)); font-weight: var(--ui-fw-semibold); cursor: pointer; border-radius: var(--radius-sm); padding: 0.55rem 1.1rem; border: 1px solid var(--color-danger-border); /* Dauerhafter Warnhintergrund, nicht erst bei Hover (docs/13, „Buttons“). */ background-color: var(--color-danger-solid); color: #fff; text-decoration: none; transition: background-color 0.15s ease, border-color 0.15s ease; } .button-danger:hover { background-color: var(--color-danger-solid-hover); color: #fff; text-decoration: none; } /* Wiederverwendbare Listen und Tabellen */ .list-toolbar { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--card-gap); max-width: 28rem; } .list-toolbar label, .list-toolbar-search label { color: var(--color-text-muted); font-size: calc(0.875rem * var(--ui-fs-secondary)); font-weight: var(--ui-fw-medium); } .list-toolbar-with-action { flex-direction: row; align-items: flex-end; justify-content: space-between; /* Primäraktion (+) und Spaltenmenü/Einstellungen bleiben immer in einer Zeile mit der Suchleiste – auch auf schmalen/mobilen Bildschirmen; die Suche schrumpft stattdessen (flex-shrink + min-width: 0). */ flex-wrap: nowrap; gap: var(--space-3); max-width: none; } .list-toolbar-search { display: flex; flex-direction: column; gap: var(--space-2); flex: 1 1 20rem; min-width: 0; max-width: 28rem; } /* Rechte Aktionsgruppe der Toolbar (Primäraktion + Spaltenmenü): ein eigener Flex-Container, damit justify-content: space-between auf .list-toolbar-with-action nur den EINEN Abstand zwischen Suche/Filter (links) und dieser Gruppe (rechts) spreizt, statt Lücken zwischen den einzelnen Aktions-Buttons auseinanderzuziehen. Der Spaltenmenü-Button wird von data-table.js automatisch hier eingehängt (siehe setupColumnMenu), sodass jede Tabellen-Toolbar davon profitiert. */ .list-toolbar-actions { display: flex; align-items: center; flex-shrink: 0; gap: var(--space-2); } /* Eigenständige, rechtsbündige Aktionsgruppe für Tabellen ohne Toolbar oder Kartenkopf: stellt die Tabelleneinstellungen (⚙) direkt oben rechts über der Tabelle bereit (automatisch von data-table.js erzeugt). */ .data-table-standalone-actions { justify-content: flex-end; margin-bottom: var(--space-2); } .data-table-column-menu-container { position: relative; flex-shrink: 0; } /* Einheitliche quadratische Icon-Buttons der rechten Toolbar-Aktionsgruppe (reines „+“-Icon und Spaltenmenü ⚙): gleiche Höhe, Breite, Rundung und Hover wie .icon-button, aber größer skaliert, damit beide als zusammengehörige Buttongruppe wirken. Als zusammengesetzter Selektor (.icon-button.list-toolbar-icon-button) formuliert, damit die größere Breite/Höhe unabhängig von der Regelreihenfolge im Stylesheet zuverlässig die Basisgröße aus .icon-button überschreibt (gleiche Spezifität würde sonst je nach Quellreihenfolge zur kleineren Basisgröße führen). */ .icon-button.list-toolbar-icon-button { width: var(--control-height); height: var(--control-height); font-size: calc(1.1rem * var(--ui-fs-heading)); } .data-table-column-menu { position: absolute; top: calc(100% + var(--space-2)); right: 0; z-index: 20; /* Breit genug für Checkbox + editierbare Überschrift in einer Zeile. */ min-width: 18rem; max-height: 20rem; overflow-y: auto; padding: var(--space-2); background-color: var(--color-surface-raised); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-card); } .data-table-column-menu-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius-sm); cursor: grab; } .data-table-column-menu-row:hover { background-color: var(--color-surface); } .data-table-column-menu-row label { display: flex; align-items: center; gap: var(--space-2); font-size: calc(0.85rem * var(--ui-fs-secondary)); color: var(--color-text); cursor: pointer; } .data-table-column-menu-row input[type="checkbox"] { accent-color: var(--color-accent); } /* Editierbare Spaltenüberschrift im Spaltenmenü: dezentes Textfeld, das erst bei Fokus/Hover als Eingabe erkennbar wird, damit die Menüzeile ruhig bleibt. */ .data-table-column-menu-name { flex: 1 1 auto; min-width: 0; padding: 0.25rem 0.4rem; border: 1px solid transparent; border-radius: var(--radius-sm); background-color: transparent; color: var(--color-text); font: inherit; font-size: calc(0.85rem * var(--ui-fs-secondary)); } .data-table-column-menu-row:hover .data-table-column-menu-name, .data-table-column-menu-name:focus { border-color: var(--color-border-strong); background-color: var(--color-surface); } /* Zurücksetzen auf die Standardüberschrift: kompakter Icon-Button passend zur Höhe des Textfelds der Menüzeile. */ .data-table-column-menu-reset { width: 1.75rem; height: 1.75rem; font-size: calc(0.85rem * var(--ui-fs-secondary)); } .data-table-column-menu-name:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(110, 168, 254, 0.2); } /* Pflichtspalte (nicht ausblendbar): ausgegraut statt eines „Pflicht“-Texts – nur der Einblenden-Schalter, die Überschrift bleibt normal editierbar. */ .data-table-column-menu-row-required > label { opacity: 0.45; } .data-table-column-menu-row-dragging { opacity: 0.5; cursor: grabbing; } .data-table-column-menu-row-drop-before { box-shadow: inset 0 2px 0 var(--color-accent); } .data-table-column-menu-row-drop-after { box-shadow: inset 0 -2px 0 var(--color-accent); } .list-filter { width: 100%; height: var(--control-height); padding: 0 0.75rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background-color: var(--color-surface); color: var(--color-text); font: inherit; } /* Zustandsfilter-Selects (data-list-state-filter) sind sonst unstyled Browser-Controls und weichen dadurch in Höhe/Optik von .list-filter ab; dieselbe Höhe/Optik wie das Suchfeld, wenn beide nebeneinander stehen. */ .list-toolbar select { min-width: 12rem; height: var(--control-height); padding: 0 0.75rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background-color: var(--color-surface); color: var(--color-text); font: inherit; } .list-toolbar select:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(110, 168, 254, 0.2); } .list-filter:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(110, 168, 254, 0.2); } .list-table-wrapper { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background-color: var(--color-surface); box-shadow: var(--shadow-card); } /* Listeninhalte oben statt mittig (PO 2026-07-22, Ticket 19): global über den Schalter „Listeninhalte“ in den Anzeige-Einstellungen (Klasse ui-list-align-top am ). Standard bleibt mittig; oben rückt Text, Badges und Buttons an die Oberkante – wie beim Beschreibungstext. !important, weil einzelne Tabellen ihre Zellen gezielt mittig stellen (z. B. die Tickettabellen); der globale Schalter soll diese Einzelregeln überstimmen. */ .ui-list-align-top .list-table th, .ui-list-align-top .list-table td { vertical-align: top !important; } /* Aktionsknöpfe sind eine Flex-Gruppe – dort greift vertical-align nicht, also die Knöpfe selbst an den oberen Rand. */ .ui-list-align-top .list-row-actions { align-items: flex-start; } .list-table { width: 100%; min-width: 46rem; /* separate statt collapse: Beim Resizing wird die Spaltenbreite exakt aus der Zeigerposition berechnet (siehe data-table.js); border-collapse verschiebt den gerenderten Trennstrich abhängig vom Browser um bis zu einem Pixel gegenüber getBoundingClientRect(), wodurch der sichtbare Trenner nicht exakt unter dem Mauszeiger läge. */ border-collapse: separate; border-spacing: 0; font-size: calc(0.9rem * var(--ui-fs-secondary)); } .list-table[data-table] { table-layout: fixed; width: auto; min-width: 0; } /* Schalter „Nicht breiter als der Bildschirm“ (Ticket 21): Im Fit-Modus müssen auch Formularfelder in Zellen (Filterzeile, Inline-Eingaben) mit ihrer Spalte schrumpfen – sonst behalten Selects/Inputs ihre Mindest-Inhaltsbreite und ragen aus schmal geklammerten Spalten heraus, wodurch trotz gepasster Tabellenbreite doch ein Scrollbalken entstünde. Die Klammerung der reinen Textinhalte übernimmt bereits die Inhaltsskalierung in data-table.js. */ .list-table[data-table].data-table-fit td input:not([type="checkbox"]):not([type="color"]), .list-table[data-table].data-table-fit td select, .list-table[data-table].data-table-fit td textarea { min-width: 0; max-width: 100%; width: 100%; } /* Überbreite Inhalte skaliert die Inhaltsskalierung (data-table.js) per transform herunter – das verkleinert aber die LAYOUT-Breite nicht. In den Mehrzeilen-Zellen (overflow: visible) bläht diese unsichtbare Layout-Breite die scrollbare Fläche auf, sodass trotz optisch passender Tabelle ein Scrollbalken entstünde. Im Fit-Modus clippen daher alle Zellen ihren horizontalen Überhang; sichtbar bleibt alles, weil es bereits herunter- skaliert in die Spalte passt. */ .list-table[data-table].data-table-fit td, .list-table[data-table].data-table-fit th { overflow: hidden; } .list-table th, .list-table td { min-width: 3.5rem; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); overflow: hidden; text-overflow: ellipsis; text-align: left; vertical-align: middle; } /* Interaktive Tabellen schneiden überbreiten Inhalt NICHT mit „…“ ab, sondern skalieren ihn herunter (fitCellContents in data-table.js) – der Grundsatz „niemals abschneiden“ (docs/13). Das „…“ aus der Basisregel oben blitzte trotzdem manchmal neben skalierten Badges auf: im kurzen Moment, bevor die Skalierung greift, und in Safari auch bei bereits skaliertem Inhalt (die Layout-Breite bleibt beim transform erhalten). Darum hier hart auf `clip` – ohne JS-Timing-Lücke (PO 2026-07-22, Ticket 26). */ .list-table[data-table] th, .list-table[data-table] td { text-overflow: clip; } /* Vorgänge, deren „Letzter Fortschritt“ in der Zukunft liegt (data-future): kräftiger Trennstrich als Grenze zwischen Vergangenheit und Zukunft, analog zum Trenner der Ereignisliste (ADR-025). Der Strich erscheint NUR bei Sortierung nach genau dieser Spalte (data-sorted-by="last-progress", gesetzt von data-table.js; Richtung egal – PO 2026-07-21). Sonst stünden die künftigen Vorgänge verstreut in der Liste und der Strich träfe mitten hinein, statt zu trennen: In der Standardsortierung nach Vorgangsnummer folgen unter einem künftigen Vorgang ohne Weiteres wieder vergangene. Er sitzt per CSS an der TATSÄCHLICHEN Grenze statt als eigene Trennzeile im Markup (so wie es die Ereignisliste macht), und zwar richtungsunabhängig: Aufsteigend stehen die künftigen Zeilen am Ende – dann trägt die erste von ihnen den Strich oben. Absteigend stehen sie am Anfang – dann trägt die letzte von ihnen den Strich unten. Ein Strich pauschal oben an jeder künftigen Zeile säße absteigend direkt unter dem Tabellenkopf und würde nichts trennen. So entsteht in beiden Richtungen genau EIN Strich, auch nach dem Umsortieren (data-table.js hängt die Zeilen im DOM um). */ .list-table[data-sorted-by="last-progress"] tbody tr:not([data-future]) + tr[data-future] > * { border-top: 3px solid var(--color-border-strong); } .list-table[data-sorted-by="last-progress"] tbody tr[data-future]:has(+ tr:not([data-future])) > * { border-bottom: 3px solid var(--color-border-strong); } /* Mehrzeilige Textzellen (data-multiline): Zeilenumbrüche und Leerzeilen langer Texte bleiben erhalten (pre-line) und werden nicht per Ellipse abgeschnitten – global für alle Listen nutzbar. */ .list-table td[data-multiline] { white-space: pre-line; overflow: visible; text-overflow: clip; vertical-align: top; } /* Ereignisbeschreibung in der Vorgangs-Ereignistabelle (PO 2026-07-27): optionaler Titel als fette erste Zeile, darunter der Beschreibungstext. Die Zelle wird auf ~10 Zeilen begrenzt; ist der Inhalt höher, blendet event-description.js einen „mehr anzeigen“-Schalter ein. */ .event-desc { white-space: pre-line; line-height: 1.5; max-height: calc(10 * 1.5em); overflow: hidden; } .event-desc.is-expanded { max-height: none; } .event-desc-title { display: block; font-weight: var(--ui-fw-strong); } .event-desc-more { display: inline-block; margin-top: var(--space-1); padding: 0; border: none; background: none; color: var(--color-accent); font: inherit; cursor: pointer; } .event-desc-more:hover { text-decoration: underline; } /* Titel-Eingabefeld über der Beschreibungs-Textarea (Schnellerfassung + Bearbeiten-Zeile): steht als eigene Box oberhalb, fett als Titel-Hinweis. */ .event-title-input { display: block; width: 100%; margin-bottom: var(--space-1); font-weight: var(--ui-fw-strong); } /* Badges in Tabellenzellen: kein zusätzlicher linker Außenabstand (der stammt aus Badge-Verwendungen neben Überschriften) – der freie Raum vor/hinter einem Badge entspricht damit exakt dem normalen Zellen-Padding. Mehrere Badges in derselben Zelle behalten einen kleinen Abstand zueinander. */ .list-table .colored-badge { margin-left: 0; } .list-table .colored-badge + .colored-badge { margin-left: var(--space-1); } /* Auf Spaltenbreite herunterskalierte Zellinhalte (fitCellContents in data-table.js): Inhalte, die trotz Umbruchmöglichkeit breiter als ihre Spalte bleiben (Badges, Datumsangaben, lange Wörter), werden vollständig, aber verkleinert dargestellt statt mit „…“ abgeschnitten. */ .data-table-cell-fit { display: inline-block; max-width: none; vertical-align: middle; transform-origin: left center; white-space: inherit; } .list-table thead th { position: relative; background-color: var(--color-surface-raised); color: var(--color-text-muted); font-size: calc(0.78rem * var(--ui-fs-small)); font-weight: var(--ui-fw-semibold); letter-spacing: 0.03em; text-transform: uppercase; text-align: left !important; white-space: nowrap; border-right: 1px solid var(--color-border); touch-action: none; overflow: visible; } /* Greifzone des Spaltentrenners breiter (PO 2026-07-23, Ticket 32): Der 8-px- Griff wurde knapp verfehlt, dann startete das Umsortieren der Spalte, an der man klickte. 14 px, mittig auf dem Trenner (right: -7px), decken beide Seiten der Grenze ab und sind zuverlässig zu treffen. Der Griff liegt über der Kopfzelle (z-index) und unterbindet beim Anfassen deren Umsortier-Drag. */ .data-table-resize-handle { position: absolute; z-index: 2; top: 0; width: 14px; height: 100%; cursor: col-resize; } .data-table-resize-handle-right { right: -7px; } .list-table thead th:last-child { border-right: 0; } /* Der rechte Resize-Griff der letzten Spalte ragt sonst über den Tabellenrand (Ticket 21: Scrollbalken im Fit-Modus). Er wird generell bündig an die Innenkante gerückt statt entfernt – so bleibt er greifbar (Ticket 27), ragt in keinem Modus über und erzeugt keinen Überlauf. */ .list-table[data-table] thead th:last-child .data-table-resize-handle-right { right: 0; } /* Headerloser Modus: entfernt ausschließlich die optische Kopfzeile (Hintergrund, Großschrift, Beschriftung) einer Tabelle, ohne ihre Struktur zu verändern. Der Spaltentrenner (Rahmen zwischen den Kopfzellen) und der unsichtbar darüberliegende Resize-Hitbereich (data-table-resize-handle) bleiben unverändert erhalten, sodass Spaltenbreiten weiterhin per Ziehen angepasst werden können; Reihenfolge, Sichtbarkeit und Persistenz laufen komplett über die bestehende, unveränderte JavaScript-Logik, die nur die Tabellenstruktur kennt und keine Kenntnis vom headerlosen Modus benötigt. Aktivierung generisch über das Attribut data-table-headerless am jeweiligen table-Element, ohne Sonderlösung je Tabelle. */ .list-table[data-table-headerless] thead th { height: 0.5rem; padding: 0; background-color: transparent; color: transparent; font-size: 0; letter-spacing: normal; text-transform: none; } .list-table[data-table-headerless] .data-table-header-label, .list-table[data-table-headerless] .data-table-sort-button { display: none; } .list-table tbody th { color: var(--color-text); font-weight: var(--ui-fw-semibold); } .list-table tbody tr:last-child th, .list-table tbody tr:last-child td { border-bottom: 0; } .list-table tbody tr:hover { background-color: rgba(110, 168, 254, 0.06); } .list-table [hidden] { display: none; } .data-table-sort-button, .data-table-header-label { display: block; width: 100%; /* Nicht abschneiden: überbreite Überschriften werden von fitCellContents (data-table.js) per transform: scale() auf die Spaltenbreite herunterskaliert. Bei overflow: hidden würde der Text vor dem Skalieren mit „…“ beschnitten und bliebe abgeschnitten – daher sichtbar lassen. */ overflow: visible; white-space: nowrap; transform-origin: left center; } .data-table-sort-button { padding: 0; border: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; text-transform: inherit; white-space: inherit; } .data-table-sort-button:hover { color: var(--color-text); } .list-table th[aria-sort="ascending"] .data-table-sort-button::after { content: "↑"; margin-left: var(--space-2); color: var(--color-accent); font-size: calc(0.75rem * var(--ui-fs-small)); } .list-table th[aria-sort="descending"] .data-table-sort-button::after { content: "↓"; margin-left: var(--space-2); color: var(--color-accent); font-size: calc(0.75rem * var(--ui-fs-small)); } .data-table-resizing { user-select: none; } .data-table-column-dragging { opacity: 0.5; } .data-table-column-target-before { box-shadow: inset 3px 0 0 var(--color-accent); } .data-table-column-target-after { box-shadow: inset -3px 0 0 var(--color-accent); } .list-table-number { text-align: right !important; white-space: nowrap; } .list-table-actions { width: 1%; } .list-table[data-table] .list-table-actions { width: 8rem; } .list-values { display: flex; flex-wrap: wrap; gap: var(--space-1); } .list-value { padding: 0.15rem 0.5rem; border: 1px solid var(--color-border-strong); border-radius: 999px; color: var(--color-text-muted); font-size: calc(0.78rem * var(--ui-fs-small)); white-space: nowrap; } .list-empty-value { color: var(--color-text-faint); } .list-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } /* Rechtsbündige Aktionsgruppe am Zeilenende (z. B. Speichern/Abbrechen der Inline-Eingabezeile in der Vorgänge-Tabelle der Objektakte). */ .list-row-actions-end { justify-content: flex-end; } .list-row-actions form { margin: 0; } .list-empty-message { padding: var(--space-4); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); background-color: var(--color-surface); color: var(--color-text-muted); } .list-empty-message-with-action { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); } /* Objektakte */ .object-details { max-width: 28rem; } .object-details dt { color: var(--color-text-faint); font-size: calc(0.8rem * var(--ui-fs-secondary)); font-weight: var(--ui-fw-medium); text-transform: uppercase; letter-spacing: 0.03em; margin-top: var(--space-3); } .object-details dt:first-child { margin-top: 0; } .object-details dd { margin: var(--space-1) 0 0; font-size: calc(0.98rem * var(--ui-fs-body)); } button.button-danger { border-color: var(--color-danger-border); background-color: var(--color-danger-solid); color: #fff; } button.button-danger:hover { border-color: var(--color-danger-border); background-color: var(--color-danger-solid-hover); color: #fff; } /* Generischer Desktop-Dialog. Fachliche Inhalte werden serverseitig als Partial eingesetzt; die Hülle bleibt für Objekte, Vorgänge und spätere Bereiche identisch. */ .app-modal { width: min(68rem, calc(100vw - 2rem)); max-width: none; max-height: calc(100vh - 2rem); padding: 0; overflow: hidden; border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface-raised); color: var(--color-text); box-shadow: var(--shadow-card); } .app-modal::backdrop { background: rgba(4, 8, 15, 0.72); } .app-modal-panel { display: flex; flex-direction: column; max-height: calc(100vh - 2rem); } .app-modal-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); } .app-modal-header h2 { min-width: 0; margin: 0; font-size: calc(1.05rem * var(--ui-fs-heading)); overflow-wrap: anywhere; } .app-modal-close { width: 2rem; height: 2rem; } .app-modal-body { min-height: 0; overflow: auto; padding: var(--space-4); } .app-modal-body .object-akte-grid { margin-bottom: var(--card-gap); } .app-modal-body .form-actions { position: sticky; bottom: calc(var(--space-4) * -1); margin: 0 calc(var(--space-4) * -1) calc(var(--space-4) * -1); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border); background: var(--color-surface-raised); } /* Zweispaltige Dialog-Layouts (Dokument bearbeiten/hochladen): dort liegt die Aktionsleiste innerhalb der linken Rasterspalte – die Seiten-Überhänge des einspaltigen Standards würden mit ihrer Kante und dem erhöhten Hintergrund die Ränder der Nachbarkarte kreuzen (optisches Artefakt am Dialogfuß). Auch die Trennlinie oben entfällt: Sie läge sonst als freischwebende horizontale Linie unter der letzten Karte der Spalte; der Hintergrund bleibt (deckungsgleich mit dem Modal-Hintergrund) als Abdeckung beim Scrollen. */ .app-modal-body .object-akte-grid .form-actions { margin-left: 0; margin-right: 0; border-top: none; } .icon-button { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; /* Feste quadratische Fläche für ALLE reinen Symbol-Buttons: