/* ================================================================
LifeOn Central â base.css
Reset, Native Elements, Custom Select, Utilities, Badges,
Buttons, Lightbox, Toasts, Icons, Detail Fields, Forms,
Timeline, Avatar, Read-only, Checkliste, Bearbeiter
================================================================ */
/* ── Screen-reader only (a11y) ─────────────────────────── */
.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;
}
/* ── Einzeilig kuerzen (Ellipse) ────────────────────────────────────────────
Das Dreigespann `nowrap` + `overflow:hidden` + `text-overflow:ellipsis` stand
am 2026-07-29 in 240 Regeln ueber 66 Praefix-Familien, ohne dass es dafuer eine
Utility gab — `.sr-only` daneben beweist, dass das Muster verstanden war, diese
eine wurde nur nie gebaut. Damit ist sie ab jetzt der Weg fuer NEUEN Code.
★ `min-width: 0` GEHOERT DAZU, sonst ist die Utility in genau dem haeufigsten
Fall wirkungslos: als Flex-Kind gilt `min-width: auto`, der Browser laesst das
Element nicht unter seine Textbreite schrumpfen und die Ellipse erscheint nie
(die Zeile laeuft stattdessen ueber oder drueckt Nachbarn weg). Genau deshalb
paart der Bestand das Dreigespann 82× mit `min-width` — es ist kein Beiwerk,
sondern Teil der Zusage, die der Name macht. Auf Nicht-Flex-Elementen ist die
Zeile ein No-Op (`min-width:auto` rechnet dort ohnehin zu 0).
★ WANN NICHT: an einer atomaren Subgrid-Zelle (Nummer, Datum, Zaehler). Dort
gilt der Gegen-Kontrakt `flex-shrink: 0` + `nowrap` OHNE Schrumpfen — eine
Zelle, die nachgibt, bricht den Zellen-Vertrag aus subgrid-list.css. Die
Utility ist fuer die EINE nachgebende Spalte (Titel, Name, Freitext).
★ Spezifitaet: (0,1,0), bewusst ohne `!important`. Sie greift nur, wenn die
flaecheneigene Regel diese drei Properties NICHT selbst setzt — beim Umstellen
also die Zeilen dort entfernen, nicht doppelt fuehren. Ein Breakpoint-Override
(`white-space: normal` im Mobile-Block, ≥ (0,2,0)) gewinnt weiterhin, was
richtig ist. Umgekehrt heisst das: eine Ellipse, die NUR unter einer Bedingung
gelten soll (`@media`/`@container`), gehoert NICHT in diese Utility — eine
Klasse im Markup wirkt immer. */
.truncate {
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ── Scrollbalken global ausblenden ──
Sehen in manchen Browsern unschoen aus. Scroll-Funktion bleibt erhalten -
Touch, Wheel, Tastatur, programmatisch alles unveraendert. Nur die visuelle
Scrollbar verschwindet. Gilt fuer alle scrollbaren Elemente im Dokument. */
html, body, *, *::before, *::after {
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ / Legacy Edge */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* ── Reset & Base ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
overflow: hidden;
height: 100%;
/* Verhindert Pull-to-Refresh Rubber-Banding auf iOS */
overscroll-behavior: none;
-webkit-overflow-scrolling: auto;
}
body {
font-family: var(--font-sans);
font-size: var(--font-size-base);
color: var(--color-text);
background: var(--color-bg);
line-height: var(--lh-base);
-webkit-font-smoothing: antialiased;
overflow: hidden;
height: 100%;
/* Verhindert Pull-to-Refresh auf body-Ebene */
overscroll-behavior: none;
-moz-osx-font-smoothing: grayscale;
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}
/* ── Fluent 2 Native Element Styling ────────────────────── */
/* Inputs — Fluent 2 underline pattern */
input[type="text"],
input[type="search"],
input[type="number"],
input[type="date"] {
height: 32px;
padding: 0 var(--space-3);
border: 1px solid var(--color-border);
border-bottom: 2px solid var(--color-border);
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
font-family: var(--font-sans);
font-size: var(--font-size-base);
color: var(--color-text);
background: var(--color-surface);
outline: none;
transition: background var(--duration-fast) var(--ease-default),
border-color var(--duration-fast) var(--ease-default),
box-shadow var(--duration-fast) var(--ease-default);
}
input[type="text"]:hover,
input[type="search"]:hover,
input[type="number"]:hover,
input[type="date"]:hover {
border-color: var(--color-border-hover);
border-bottom-color: var(--color-border-hover);
}
input[type="text"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="date"]:focus {
border-color: var(--color-border);
border-bottom-color: var(--brand-default);
border-bottom-width: 2px;
outline: none;
}
/* Date picker indicator */
input[type="date"]::-webkit-calendar-picker-indicator {
opacity: 0.5;
cursor: pointer;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
/* Text fields: underline-only focus — no outline ring */
input[type="text"]:focus-visible,
input[type="search"]:focus-visible,
input[type="number"]:focus-visible,
input[type="date"]:focus-visible {
outline: none;
box-shadow: none;
}
input[type="text"]:disabled,
input[type="search"]:disabled,
input[type="number"]:disabled,
input[type="date"]:disabled {
background: var(--color-bg);
border-color: var(--color-border-disabled);
border-bottom-color: var(--color-border-disabled);
color: var(--color-text-disabled);
cursor: not-allowed;
}
/* 2026-05-11: Native Browser-Clear-Button auf komplett
ausblenden. Chromium und WebKit rendern automatisch ein eigenes X rechts im
Eingabefeld — neben unserem custom-Clear-Icon entstehen sonst zwei X
nebeneinander. Auch das Edge-Legacy ::-ms-clear / ::-ms-reveal abdecken. */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
-webkit-appearance: none;
appearance: none;
display: none;
}
input[type="search"]::-ms-clear,
input[type="search"]::-ms-reveal {
display: none;
width: 0;
height: 0;
}
/* Globales Button-Disabled-Styling (E2.1.3). Reduziert Opacity, hebt Pointer-
Events auf, blockt Hover-Effekte. Greift auf allen Button-Klassen (.fk-buchen,
.btn-primary, etc.) — Original-Hintergrundfarbe bleibt, Farbigkeit wird nur
gedaempft. Damit wird "inaktiv" klar vom aktiven Zustand unterscheidbar. */
button:disabled,
button[disabled] {
opacity: 0.45;
cursor: not-allowed;
}
button:disabled:hover,
button[disabled]:hover {
filter: none;
}
input::placeholder {
color: var(--color-text-muted);
}
/* Select — Fluent 2 underline pattern */
select {
height: 32px;
padding: 0 var(--space-8) 0 var(--space-3);
border: 1px solid var(--color-border);
border-bottom: 2px solid var(--color-border);
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
font-family: var(--font-sans);
font-size: var(--font-size-base);
color: var(--color-text);
background: var(--color-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23616161' d='M2.22 4.47a.75.75 0 0 1 1.06 0L6 7.19l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L2.22 5.53a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E") no-repeat right var(--space-3) center;
appearance: none;
outline: none;
cursor: pointer;
transition: background var(--duration-fast) var(--ease-default),
border-color var(--duration-fast) var(--ease-default),
box-shadow var(--duration-fast) var(--ease-default);
}
select:hover { border-color: var(--color-border-hover); border-bottom-color: var(--color-border-hover); }
select:focus {
border-color: var(--color-border);
border-bottom-color: var(--brand-default);
outline: none;
}
/* Selects: underline-only focus — no outline ring */
select:focus-visible {
outline: none;
box-shadow: none;
}
select:disabled {
background-color: var(--color-bg);
border-color: var(--color-border-disabled);
border-bottom-color: var(--color-border-disabled);
color: var(--color-text-disabled);
cursor: not-allowed;
}
/* Option elements (limited browser styling) */
option {
font-family: var(--font-sans);
font-size: var(--font-size-base);
}
/* Placeholder options (first child with empty value) — muted text */
option:first-child { color: var(--color-text-tertiary); }
/* Custom Select (.cs-*) wurde wurde nach utils/custom-select.css
extrahiert. .cs-* Trigger + Options + Dauer-Grid leben jetzt zusammen mit
.app-cs-* Panel-Body-appended-Block. */
/* Textarea — Fluent 2 underline pattern */
textarea {
padding: var(--space-2) var(--space-3);
border: 1px solid var(--color-border);
border-bottom: 2px solid var(--color-border);
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
font-family: var(--font-sans);
font-size: var(--font-size-base);
color: var(--color-text);
background: var(--color-surface);
resize: vertical;
outline: none;
transition: background var(--duration-fast) var(--ease-default),
border-color var(--duration-fast) var(--ease-default),
box-shadow var(--duration-fast) var(--ease-default);
}
textarea:hover { border-color: var(--color-border-hover); border-bottom-color: var(--color-border-hover); }
textarea:focus {
border-color: var(--color-border);
border-bottom-color: var(--brand-default);
outline: none;
}
/* Textareas: underline-only focus — no outline ring */
textarea:focus-visible {
outline: none;
box-shadow: none;
}
/*
* App-specific text fields: underline-only focus override.
* Ensures the global button :focus-visible outline rule never leaks
* onto text-input classes that happen to share a selector list.
*/
/* Tote Klassen aus Compound entfernt 2026-05-06: .fk-desc / -bemerkung /
-kulanz-text / .tab-suchfeld / .anfr-notiz-textarea / .board-detail-desc /
.bm-title-input / .bm-textarea / .aufgabe-detail-textarea / .board-select /
.aufgabe-detail-field. .fk-dauer-sel / .zeit-select / .zeit-input /
.filter-dd leben weiter. */
.fk-dauer-sel:focus-visible,
.zeit-select:focus-visible,
.zeit-input:focus-visible,
.filter-dd:focus-visible {
outline: none;
box-shadow: none;
}
/* Checkbox (Fluent 2 custom) */
input[type="checkbox"] {
appearance: none;
width: 16px;
height: 16px;
border: 1px solid var(--color-text-muted);
border-radius: var(--radius-xs);
background: var(--color-surface);
cursor: pointer;
position: relative;
flex-shrink: 0;
transition: background var(--duration-fast), border-color var(--duration-fast);
}
input[type="checkbox"]:checked {
background: var(--brand-default);
border-color: var(--brand-default);
}
input[type="checkbox"]:checked::after {
content: '';
position: absolute;
top: 2px;
left: 5px;
width: 4px;
height: 8px;
border: 2px solid var(--brand-text-on);
border-top: none;
border-left: none;
transform: rotate(45deg);
}
input[type="checkbox"]:hover { border-color: var(--brand-default); }
input[type="checkbox"]:focus-visible { box-shadow: var(--focus-ring); }
/* Radio */
input[type="radio"] {
appearance: none;
width: 16px;
height: 16px;
border: 1px solid var(--color-text-muted);
border-radius: 50%;
background: var(--color-surface);
cursor: pointer;
position: relative;
flex-shrink: 0;
transition: border-color var(--duration-fast);
}
input[type="radio"]:checked {
border-color: var(--brand-default);
border-width: 5px;
}
input[type="radio"]:hover { border-color: var(--brand-default); }
input[type="radio"]:focus-visible { box-shadow: var(--focus-ring); }
/* Loading-Overlay wurde wurde nach components/app-shell/loading-overlay.css extrahiert. */
/* ── Utilities ──────────────────────────────────────────── */
.hidden { display: none !important; }
/* [hidden]-Attribut app-weit durchsetzen: Author-display-Regeln (z.B.
.app-filter-trigger-badge { display:inline-flex }) schlagen sonst das
UA-[hidden] und "versteckte" Elemente rendern trotzdem — die Toolbar-
Tier-Messung überspringt sie aber (toolbar-responsive.js), wodurch
Buttons überlappen. Ersetzt die verstreuten elementspezifischen
[hidden]-Flicken (drawer-tabs, assets, personal …). */
[hidden] { display: none !important; }
.bm-label {
font-size: var(--fs-badge);
font-weight: var(--fw-semibold);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* ── Badge System (Fluent 2 Badges) ─────────────────────── */
.badge, .aufgabe-status-badge {
display: inline-flex;
align-items: center;
white-space: nowrap;
font-size: var(--fs-badge);
font-weight: var(--fw-medium);
padding: var(--space-xxs) var(--space-2);
border-radius: var(--radius-circular);
}
/* Status Badges */
.badge-offen { background: var(--color-bg-subtle); color: var(--color-text-muted); }
.badge-aktiv { background: var(--status-info-bg); color: var(--status-info-fg); }
.badge-abgeschlossen { background: var(--status-success-bg); color: var(--status-success-fg); }
.badge-ueberfaellig { background: var(--status-danger-bg); color: var(--status-danger-fg); }
/* Herkunft Badges */
.badge-herkunft-projekt { background: var(--status-info-bg); color: var(--status-info-fg); }
.badge-herkunft-support { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.badge-herkunft-vertrieb { background: var(--status-success-bg); color: var(--status-success-fg); }
.badge-herkunft-intern { background: var(--color-bg); color: var(--color-text-muted); border: 1px solid var(--color-border); }
/* Planungsstatus-Badges — jeder Wert bekommt eine eigene Farbe */
.badge-ps-vorgeschlagen { background: var(--status-vorgeschlagen-bg); color: var(--status-vorgeschlagen-fg); }
.badge-ps-nicht-zugewiesen { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.badge-ps-zugewiesen { background: var(--status-info-bg); color: var(--status-info-fg); }
.badge-ps-in-bearbeitung { background: var(--brand-light); color: var(--brand-default); }
.badge-ps-in-review { background: var(--status-review-bg); color: var(--status-review-fg); }
.badge-ps-abgeschlossen { background: var(--status-success-bg); color: var(--status-success-fg); }
.badge-ps-zurueckgestellt { background: var(--status-zurueckgestellt-bg); color: var(--status-zurueckgestellt-fg); }
.badge-ps-keine-prio { background: var(--status-keine-prio-bg); color: var(--status-keine-prio-fg); }
.badge-ps-default { background: var(--color-bg-subtle); color: var(--color-text-secondary); }
/* Umsatz-Badge (Verkaufschancen) */
.badge-umsatz { background: var(--status-success-bg); color: var(--status-success-fg); font-variant-numeric: tabular-nums; }
/* Dauer-Info im Detail-Bereich */
.aufgabe-dauer-info {
display: flex;
gap: var(--space-2);
padding: var(--space-2) 0;
border-bottom: 1px solid var(--color-border);
margin-bottom: var(--space-2);
}
/* ── Buttons (Fluent 2 Variants) ────────────────────────── */
/* Shared button base. */
.btn, .btn-primary, .btn-secondary, .btn-sm,
.notif-mehr-btn, .topbar-btn,
.zeit-panel-close, .lightbox-close,
.fk-buchen, .fk-d365,
.fokus-remove {
font-family: var(--font-sans);
cursor: pointer;
transition: background var(--duration-fast) var(--ease-default),
border-color var(--duration-fast) var(--ease-default),
color var(--duration-fast) var(--ease-default),
box-shadow var(--duration-fast) var(--ease-default),
transform var(--duration-fast) var(--ease-default);
}
/* Micro-Interaction: Aktives Druecken */
.btn-primary:active, .btn-secondary:active, .btn-schule:active,
.fk-buchen:active { transform: scale(0.97); }
.btn:focus-visible, .btn-primary:focus-visible, .btn-danger:focus-visible,
.btn-schule:focus-visible, .btn-secondary:focus-visible,
.fk-buchen:focus-visible, .fk-d365:focus-visible,
.mitte-tab-btn:focus-visible,
.fokus-remove:focus-visible {
outline: 2px solid var(--brand-default);
outline-offset: 2px;
}
/* Primary — brand background, white text */
.btn {
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-sm);
border: none;
font-size: var(--font-size-base);
font-weight: var(--fw-semibold);
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
}
.btn-primary {
background: var(--brand-default);
color: var(--brand-text-on);
border: 1px solid transparent;
}
.btn-primary:hover { background: var(--brand-hover); }
.btn-primary:active { background: var(--brand-pressed); }
/* Danger — filled red, white text (same shape as primary) */
.btn-danger {
background: var(--status-danger-fg);
color: var(--brand-text-on);
border: 1px solid transparent;
}
.btn-danger:hover { background: var(--status-danger-border); }
.btn-danger:active { background: var(--status-danger-pressed); }
/* Schule — filled lila (passt zum Schule-Balken im Jahreskalender), weisser Text */
.btn-schule {
background: var(--status-review-fg);
color: var(--brand-text-on);
border: 1px solid transparent;
}
.btn-schule:hover { background: var(--status-review-fg); filter: brightness(1.1); }
.btn-schule:active { filter: brightness(0.9); }
/* Secondary — outline, neutral */
.btn-secondary {
background: var(--color-surface);
color: var(--color-text);
border: 1px solid var(--color-border-hover);
}
.btn-secondary:hover { background: var(--color-bg); border-color: var(--color-border-pressed); }
.btn-secondary:active { background: var(--color-bg-subtle); }
.btn-sm { padding: var(--space-1) var(--space-3); font-size: var(--font-size-sm); gap: var(--space-1-5); line-height: 1; }
.btn-sm .ui-ico { display: inline-flex; align-items: center; }
/* Subtle — no border, light hover */
.btn-action {
background: none;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: var(--space-xxs) var(--space-1-5);
display: inline-flex;
align-items: center;
}
.btn-action:hover { background: var(--brand-light); border-color: var(--brand-default); }
.btn-confirm-pending {
background: var(--status-danger-bg) !important;
border-color: var(--status-danger-fg) !important;
animation: confirmPulse var(--duration-slowest) var(--ease-soft) infinite alternate;
}
@keyframes confirmPulse { from { opacity: 0.7; } to { opacity: 1; } }
/* Lightbox wurde wurde nach components/popups/lightbox.css extrahiert. */
/* ── Icon System (Fluent UI SVG) ────────────────────────── */
.ui-ico {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
line-height: 1;
}
.ui-ico img {
display: block;
width: 20px;
height: 20px;
filter: invert(13%) sepia(15%) saturate(1200%) hue-rotate(190deg) brightness(95%);
}
.ui-ico.xs img { width: 12px; height: 12px; }
.ui-ico.sm img { width: 16px; height: 16px; }
.ui-ico.md img { width: 20px; height: 20px; }
.ui-ico.lg img { width: 24px; height: 24px; }
.ui-ico.on-dark img { filter: brightness(0) invert(1); }
/* Tab-Icon */
.tab-btn .ui-ico { margin-right: var(--space-1-5); }
.tab-btn .ui-ico img { filter: invert(40%) sepia(0%) saturate(0%); }
.tab-btn.active .ui-ico img { filter: invert(27%) sepia(89%) saturate(1500%) hue-rotate(210deg); }
/* ── Aufgabe Detail (expandable) ────────────────────────── */
.aufgabe-detail {
padding: var(--space-3) var(--space-4) var(--space-4);
border-top: 1px solid var(--color-border-light);
}
.aufgabe-detail-textarea {
width: 100%;
min-height: 60px;
resize: vertical;
border: 1px solid var(--color-border);
border-bottom: 2px solid var(--color-border-hover);
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
padding: var(--space-1-5) var(--space-2-5);
font-size: var(--font-size-sm);
font-family: var(--font-sans);
}
.aufgabe-detail-textarea:focus {
border-color: var(--color-border);
border-bottom-color: var(--brand-default);
outline: none;
}
.aufgabe-detail-fields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3) var(--space-5);
margin: var(--space-2) 0;
}
.aufgabe-detail-field { display: flex; flex-direction: column; gap: var(--space-1); position: relative; }
/* Konsistenter vertikaler Abstand zwischen Formular-Elementen in Lightbox-Formularen.
WICHTIG: Selektoren duerfen NICHT innerhalb von Grid-Containern
(.aufgabe-detail-fields, .neue-aufgabe-row) greifen — sonst verschiebt sich
das 2./3. Feld in einer Grid-Zeile nach unten. */
/* Section container */
.mt-section {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-4);
}
.mt-section-header {
display: flex;
align-items: center;
gap: var(--space-2);
margin-bottom: var(--space-4);
}
.mt-section-header--kalender { margin-top: var(--space-4); }
.mt-section-title { font-size: var(--fs-section); font-weight: var(--fw-semibold); flex: 1; }
.mt-section-count {
background: var(--brand-light);
color: var(--brand-default);
font-size: var(--font-size-sm);
font-weight: var(--fw-semibold);
padding: var(--space-xxs) var(--space-2-5);
border-radius: var(--radius-circular);
}
/* Mein-Tag Tages-/Wochen-Navigation (P47 2026-05-13) — Prev/Next-Pfeile + optionaler "Heute"-Reset im Section-Header. */
.mt-section-nav {
display: inline-flex;
align-items: center;
gap: var(--space-1);
margin-left: var(--space-2);
}
/* Praefix `.mt-section-nav` ist Pflicht (0,2,0): der globale Reset
`.app-scope button { border:none; background:none; padding:0 }` (0,1,1) schlaegt
sonst diese Ein-Klassen-Regel und die Pfeile stehen ohne Rahmen da (gemessen
28.07. mit `node scripts/audits/audit-button-reset.js`: 8 Knoepfe in Mein Tag
und Aufgaben). Alle Callsites (mt-zeit.js) rendern die Knoepfe innerhalb von
`.mt-section-nav` — bewusst diese Wrapper-Klasse und nicht `.app-scope`, damit
die Regel auch ausserhalb des Scopes gilt. */
.mt-section-nav .mt-nav-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
background: transparent;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
color: var(--color-text-muted);
cursor: pointer;
transition: background var(--duration-quick) var(--ease-soft), border-color var(--duration-quick) var(--ease-soft), color var(--duration-quick) var(--ease-soft);
}
.mt-section-nav .mt-nav-btn:hover { background: var(--color-surface-hover); border-color: var(--color-border-strong); color: var(--color-text); }
.mt-nav-btn:focus-visible { outline: 2px solid var(--brand-default); outline-offset: 1px; }
.mt-nav-btn img { width: 16px; height: 16px; opacity: 0.7; }
.mt-nav-btn:hover img { opacity: 1; }
.mt-nav-btn--reset {
width: 48px;
padding: 0 var(--space-2);
font-size: var(--font-size-xs);
font-weight: var(--fw-semibold);
color: var(--brand-default);
}
.mt-nav-btn--reset:hover { color: var(--brand-default); }
.mt-nav-btn.hidden { display: none; }
/* Heute-Reset: visibility statt display, damit Prev/Next-Pfeile NICHT springen,
wenn der Reset zwischen sichtbar (Nav vom Default abweichend) und ausgeblendet
(auf Default) wechselt. Spezifitaet identisch zu .mt-nav-btn.hidden, daher
MUSS diese Regel danach kommen. P47b 2026-05-13. */
.mt-nav-btn--reset.hidden { display: inline-flex; visibility: hidden; pointer-events: none; }
.mt-list { display: flex; flex-direction: column; gap: var(--space-3); }
.mt-loading, .mt-empty {
color: var(--color-text-muted);
font-size: var(--font-size-sm);
padding: var(--space-6);
text-align: center;
}
.mt-empty--fokus { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-8) var(--space-4); }
.mt-empty--fokus .ui-ico img { opacity: 0.2; width: 40px; height: 40px; }
.mt-empty-hint { font-size: var(--font-size-xs); color: var(--color-text-disabled); }
.mt-error {
color: var(--status-ueberfaellig);
font-size: var(--font-size-sm);
padding: var(--space-4);
text-align: center;
}
/* Avatar-System wurde wurde nach components/badges/avatar.css extrahiert. */
/* -- Responsive: Tablet (base components) ------------------ */
@media (max-width: 999px) {
.aufgabe-detail-fields { grid-template-columns: 1fr; }
.aufgabe-detail-fields--3col { grid-template-columns: 1fr; }
.neue-aufgabe-row { grid-template-columns: 1fr; }
.ro-fields-grid { grid-template-columns: 1fr; gap: var(--space-2); }
.mt-nav-btn { min-height: 36px; min-width: 36px; }
}
/* -- Responsive: Mobile (base components) ------------------- */
@media (max-width: 599px) {
.ro-fields-grid { grid-template-columns: 1fr; gap: var(--space-1-5); }
.neue-aufgabe-row--3col { grid-template-columns: 1fr; }
/* Globaler Overflow-Schutz + Overscroll-Contain fuer ALLE scrollbaren Container */
.bm-modal-body,
.bm-modal,
.tab-form-wrap,
.board-side-panel { overflow-x: hidden; overscroll-behavior: contain; }
/* Modals: kein Overscroll, kein Bouncing */
.bm-modal { overscroll-behavior: contain; }
/* Overscroll auf allen Tab-Panels und scrollbaren Listen verhindern */
.tab-content,
.mt-list,
.tab-karten-liste,
.anfragen-list,
.notif-dropdown-body,
.profile-dropdown,
.notif-dropdown { overscroll-behavior: contain; }
/* ── iOS-Zoom-Prevention + Konsistente Schriftgrößen auf Mobile ── */
/* Inputs: mind. 16px (iOS zoomt unter 16px) */
input, select, textarea { max-width: 100%; box-sizing: border-box; font-size: 16px !important; }
.cs-trigger { font-size: 16px !important; }
/* Labels in Formularen: 14px (passend zu 16px Inputs) */
.aufgabe-detail-field label,
.bm-field-label,
.field-lbl,
.zeit-label,
.fk-zeit-label,
.na-label { font-size: var(--font-size-base); }
/* Buttons: 14px (konsistent mit Labels) */
.fk-buchen,
.btn, .btn-primary, .btn-secondary,
.fk-buchen--cancel,
.fk-buchen--danger { font-size: var(--font-size-base); }
/* Filter-Chips font-size 2026-05-07 in spaeteren Mobile-Block (Z. ~1206)
konsolidiert — dort wird sm gesetzt, war hier base = redundanter
Override. Quick-Buttons bleiben hier. */
.quick-btn, .fk-qbtn, .chip-btn { font-size: var(--font-size-base); }
/* Inline-Zeitauswahl: nicht ueberlaufen */
.zeit-select-inline { max-width: calc(100% - 40px); }
/* Quick-Buttons: horizontal scrollbar statt Abschneiden */
.quick-btn-group { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; max-height: none; }
.quick-btn-group::-webkit-scrollbar { display: none; }
.quick-btn { flex-shrink: 0; }
/* Lightbox: Safe-Area fuer Notch */
.lightbox-viewer { padding-top: env(safe-area-inset-top, 0px); }
.lightbox-toolbar { padding-top: max(env(safe-area-inset-top, 0px), var(--space-2)); }
/* ── Formular-Abstände: konsistenter Spacing auf Mobile ── */
/* ALLE Feld-Container: einheitlicher Bottom-Margin (überschreibt inline margin-bottom:8px) */
.aufgabe-detail-field { margin-bottom: var(--space-3) !important; }
.bm-field { margin-bottom: var(--space-3) !important; }
/* Innerhalb von Grids: Gap regelt den Abstand, kein extra Margin */
.aufgabe-detail-fields > .aufgabe-detail-field { margin-bottom: 0 !important; }
.bm-fields-grid > .bm-field { margin-bottom: 0 !important; }
/* Direkte Kinder des Modal-Body */
.bm-modal-body > .aufgabe-detail-field,
.bm-modal-body > .neue-aufgabe-row,
.bm-modal-body > .aufgabe-detail-fields,
.bm-modal-body > .bm-fields-grid,
.bm-modal-body > .cl-section { margin-bottom: var(--space-3); }
/* Column-Groups (Grid-Container) */
.aufgabe-detail-fields,
.bm-fields-grid { margin-bottom: var(--space-3); }
/* Grid-Felder: ALLE auf 1-Spalte forcieren + vertikaler Gap */
.aufgabe-detail-fields { grid-template-columns: 1fr; gap: var(--space-3); }
.aufgabe-detail-fields--3col { grid-template-columns: 1fr; gap: var(--space-3); }
.neue-aufgabe-row { grid-template-columns: 1fr; }
.neue-aufgabe-row--3col { grid-template-columns: 1fr; }
.form-row-2col { grid-template-columns: 1fr; }
/* Inline-Felder in Tab-Formularen */
.tab-form-wrap .aufgabe-detail-field { margin-bottom: var(--space-2); }
.tab-form-wrap .aufgabe-detail-fields { gap: var(--space-2); }
/* Detail-Panel-Felder (Edit-Modus in Cards) */
.aufgabe-detail .aufgabe-detail-field { margin-bottom: var(--space-2); }
.aufgabe-detail .aufgabe-detail-fields { gap: var(--space-2); }
/* Footer: sticky am unteren Rand in ALLEN Formularen — kein neg. Margin (verhindert Overscroll) */
.aufgabe-detail-footer {
position: sticky;
bottom: 0;
background: var(--color-surface);
padding: var(--space-2) 0;
padding-bottom: calc(var(--space-1) + env(safe-area-inset-bottom, 0px));
border-top: 1px solid var(--color-border);
margin-top: var(--space-2);
z-index: 5;
}
.bm-modal .bm-modal-footer {
position: sticky;
bottom: 0;
background: var(--color-surface);
padding-bottom: calc(var(--space-1) + env(safe-area-inset-bottom, 0px));
z-index: 5;
}
/* Footer-Buttons in ALLEN Formularen: vertikal gestapelt, volle Breite */
.aufgabe-detail-footer,
.bm-modal-footer,
.form-actions,
.zeit-form-actions,
.zeit-panel-footer,
.anfr-notiz-actions {
flex-direction: column;
gap: var(--space-1-5);
}
.aufgabe-detail-footer .fk-buchen,
.aufgabe-detail-footer .fk-buchen--cancel,
.bm-modal-footer .fk-buchen,
.bm-modal-footer .fk-buchen--cancel,
.form-actions .fk-buchen,
.form-actions .fk-buchen--cancel,
.form-actions .btn-primary,
.form-actions .btn-secondary,
.zeit-form-actions .fk-buchen,
.zeit-panel-footer .fk-buchen,
.zeit-panel-footer .fk-buchen--cancel,
.zeit-panel-footer .btn-primary,
.zeit-panel-footer .btn-secondary {
width: 100%;
justify-content: center;
}
/* Auch generische Buttons in Footern: volle Breite */
.bm-modal-footer > button,
.bm-modal-footer > .fk-buchen { width: 100%; justify-content: center; }
/* ── Globale Konsistenz: Suchfelder + Filter-Chips ── */
/* Alle Suchfelder: volle Breite, einheitliche Höhe, 16px Schrift */
.tab-suchfeld,
.board-search,
.projekte-search {
width: 100%;
max-width: 100%;
min-height: 44px;
font-size: var(--font-size-md);
padding: var(--space-2) var(--space-3);
}
/* Alle Filter-Chips: einheitliche Größe und Touch-Targets */
.filter-chip,
.filter-btn,
.filter-btn-typ {
min-height: 36px;
font-size: var(--font-size-sm);
padding: var(--space-1) var(--space-2);
flex-shrink: 0;
}
/* Chip-Gruppen: horizontal scrollen */
.board-chip-group,
.tab-chip-zeile,
.aufgaben-filter-bar {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.board-chip-group::-webkit-scrollbar,
.tab-chip-zeile::-webkit-scrollbar,
.aufgaben-filter-bar::-webkit-scrollbar { display: none; }
}
/* ── Animationen & Optimistic UI ────────────────────────── */
/* Subtiler Fade-In: Tab-Wechsel, Panels (reine Opacity) */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* SSOT-Keyframes (Charakter B, Motion-Konsolidierung 2026-06-30):
- lod-fade-slide-in: Fade + dezenter Slide von oben — konsolidiert die frueheren
muc-fade / nrt-fade / mtk-legend-fade / lod-dt-bulkbar-in (−2/−4px → einheitlich −4px).
- lod-pop-in: Fade + Scale-Pop von unten — konsolidiert orgPkIn / admin-ai-bubble-in.
Dauer/Easing kommen weiterhin pro Konsument aus der animation:-Shorthand. */
@keyframes lod-fade-slide-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes lod-pop-in {
from { opacity: 0; transform: scale(0.96) translateY(4px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.animate-fade-scale-in {
animation: fadeIn var(--duration-fast) var(--ease-decelerate);
}
/* Subtiler Fade-In fuer zentrierte Modals (translate beibehalten) */
@keyframes modalFadeIn {
from { opacity: 0; transform: translate(-50%, -50%); }
to { opacity: 1; transform: translate(-50%, -50%); }
}
.bm-modal.animate-fade-scale-in {
animation: modalFadeIn var(--duration-normal) var(--ease-decelerate);
}
/* Button-States fuer Optimistic UI */
/* Shared Spin-Keyframe (SSOT fuer alle rotate(360deg)-Spinner).
Name lod-spin (nicht spin): Vendor suneditor.min.css definiert ein eigenes
@keyframes spin und laedt spaeter — ein generisches spin wuerde davon
ueberschrieben. */
@keyframes lod-spin {
to { transform: rotate(360deg); }
}
.btn-loading {
position: relative;
color: transparent !important;
pointer-events: none;
}
.btn-loading::after {
content: '';
position: absolute;
top: 50%; left: 50%;
width: 14px; height: 14px;
margin: -7px 0 0 -7px;
border: 2px solid var(--color-border);
border-top-color: var(--brand-default);
border-radius: 50%;
animation: lod-spin var(--duration-slow) var(--ease-linear) infinite;
}
.btn-loading.fk-buchen::after,
.btn-loading.btn-primary::after {
border-color: rgba(255,255,255,0.3);
border-top-color: var(--brand-text-on);
}
/* Icon-Buttons: das Icon waehrend des Spinners ausblenden, sonst ueberlagert
der Spinner das noch sichtbare ![]()
(color:transparent greift nur bei Text). */
.btn-loading .ui-ico { visibility: hidden; }
.btn-success {
background: var(--status-success-fg) !important;
color: var(--brand-text-on) !important;
border-color: var(--status-success-fg) !important;
transition: background var(--duration-normal) var(--ease-default);
}
.btn-error {
background: var(--status-danger-fg) !important;
color: var(--brand-text-on) !important;
border-color: var(--status-danger-fg) !important;
transition: background var(--duration-normal) var(--ease-default);
}
/* Ladebildschirm-Pulse */
.loading-progress-bar {
position: absolute;
top: 0; left: 0;
height: 2px;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.6) 50%, transparent 100%);
transition: width var(--duration-normal) var(--ease-default);
}
/* ── prefers-reduced-motion (a11y) ──────────────────── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
/* Loading-Spinner behalten (wichtige visuelle Rueckmeldung) */
.loading-ring,
.loading-dots span,
.loading-progress-bar {
animation-duration: 1s !important;
transition-duration: var(--duration-normal) !important;
}
}
/* ================================================================
Date-Picker (lod-dp-*) — Paket E2.1.6
Popup-Kalender-UI, Fluent-2-Stil. Genutzt via window.openDatePicker.
Positionierung kommt vom JS (position: fixed).
================================================================ */
.lod-dp {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-16, 0 8px 24px rgba(0,0,0,0.12));
padding: var(--space-2);
min-width: 280px;
font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
font-size: var(--font-size-sm);
color: var(--color-text);
}
.lod-dp-hd {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-1) var(--space-2);
margin-bottom: var(--space-1);
}
.lod-dp-title {
font-weight: var(--fw-semibold);
font-size: var(--font-size-sm);
}
/* Klickbarer Titel — zoomt Tag → Monat → Jahr heraus (Schnellsprung z.B. Geburtsjahr) */
.lod-dp-title--btn {
appearance: none;
border: 1px solid transparent;
background: transparent;
color: inherit;
font: inherit;
font-weight: var(--fw-semibold);
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-sm);
cursor: pointer;
}
.lod-dp-title--btn:hover { background: var(--color-bg-subtle); border-color: var(--color-border); }
.lod-dp-title--btn:focus-visible {
outline: 2px solid var(--brand-default);
outline-offset: 1px;
}
.lod-dp-nav {
appearance: none;
background: transparent;
border: 1px solid transparent;
width: 28px; height: 28px;
border-radius: var(--radius-sm);
cursor: pointer;
font-size: var(--font-size-md);
line-height: 1;
color: var(--color-text);
}
.lod-dp-nav:hover { background: var(--color-bg-subtle); border-color: var(--color-border); }
.lod-dp-wdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: var(--space-xxs);
padding: 0 var(--space-1);
margin-bottom: var(--space-xxs);
}
.lod-dp-wday {
text-align: center;
font-size: var(--font-size-xs, 11px);
color: var(--color-text-muted);
padding: var(--space-1) 0;
font-weight: var(--fw-semibold);
}
.lod-dp-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: var(--space-xxs);
padding: 0 var(--space-1) var(--space-1);
}
/* Monats-/Jahresuebersicht — 3 Spalten mit groesseren Zielen */
.lod-dp-grid--zoom {
grid-template-columns: repeat(3, 1fr);
gap: var(--space-1);
padding: var(--space-1);
}
.lod-dp-cell--zoom {
height: 40px;
font-weight: var(--fw-semibold);
}
.lod-dp-cell {
appearance: none;
background: transparent;
border: 1px solid transparent;
padding: 0;
height: 32px;
border-radius: var(--radius-sm);
cursor: pointer;
font: inherit;
color: var(--color-text);
text-align: center;
}
.lod-dp-cell:hover:not(:disabled) { background: var(--color-bg-subtle); }
.lod-dp-cell--other { color: var(--color-text-muted); }
.lod-dp-cell--today:not(.lod-dp-cell--selected) {
border-color: var(--brand-default);
color: var(--brand-default);
font-weight: var(--fw-semibold);
}
.lod-dp-cell--selected {
background: var(--brand-default);
color: var(--brand-text-on);
font-weight: var(--fw-semibold);
}
.lod-dp-cell--selected:hover { background: var(--brand-hover); }
.lod-dp-cell--disabled,
.lod-dp-cell:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.lod-dp-cell:focus-visible {
outline: 2px solid var(--brand-default);
outline-offset: 1px;
}
.lod-dp-ft {
display: flex;
justify-content: space-between;
gap: var(--space-2);
padding: var(--space-1-5) var(--space-1);
border-top: 1px solid var(--color-border-subtle);
margin-top: var(--space-1);
}
.lod-dp-today,
.lod-dp-clear {
appearance: none;
background: transparent;
border: none;
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-sm);
cursor: pointer;
font: inherit;
font-size: var(--font-size-xs);
}
.lod-dp-today { color: var(--brand-default); }
.lod-dp-clear { color: var(--color-text-muted); }
.lod-dp-today:hover,
.lod-dp-clear:hover { background: var(--color-bg-subtle); }
/* ================================================================
Avatar-Primitive Globale Komponente, gerendert durch components/badges/avatar.js
(window.Avatar.html). Die .app-scope-Variante in app.css ueberschreibt
die Defaults dort wo die V2-Layer aktiv ist (kleinere Default-Groesse).
Hier definieren wir die Basis-Geometrie, damit Avatare auch in
nicht-V2-Sections (admin-extern-zugaenge, gast-stammdaten, ...) korrekt
rund + zentriert dargestellt werden. Inline-Style aus avatar.js setzt
width/height/font-size/background pro Aufrufer.
================================================================ */
.avatar {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 50%;
font-weight: var(--fw-semibold);
color: var(--lod-white);
text-transform: uppercase;
letter-spacing: 0.02em;
line-height: 1;
user-select: none;
overflow: hidden;
vertical-align: middle;
}
.avatar.avatar--image {
/* Hintergrund transparent — Graph-Avatare sind oft PNG
mit Alpha-Kanal, der vorherige `var(--color-bg-subtle)` blitzte als grauer
Ring um runde Avatare durch. Bei Lade-Fehler setzt der onerror-Handler in
avatar.js die Initialen-Farbe nachtraeglich. */
background: transparent;
padding: 0;
}
.avatar.avatar--image > img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.avatar.empty {
background: var(--color-bg-subtle) !important;
color: var(--color-text-muted);
border: 1px dashed var(--color-border);
}
/* System/API-User-Avatar (z.B. "# LoD LifeOn Central API"). Dezent grau-blau,
damit Bot-Eintraege auf einen Blick von echten Personen unterscheidbar sind.
*/
.avatar.avatar--system {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--color-bg-subtle);
color: var(--lod-gray-600);
border: 1px solid var(--color-border);
}
/* iOS-Zoom-Fix (Mobile): font-size: 16px fuer Inputs ist via
`input, select, textarea { font-size: 16px !important }` Z. 1082 abgedeckt. */
/* ── Resume-Guard Overlay (Paket RESUME-GUARD) ─────────────
Eingeblendet waehrend Wake-Up nach App-Resume, wenn der erste Health-Ping
> SLOW_HEALTH_MS dauert. Kein Full-Screen-Block wie loading-overlay
(das bleibt fuer Initial-Boot), sondern kompaktes Card-Overlay oben,
damit UI sichtbar bleibt und User sieht "okay, System arbeitet". */
#resume-guard-overlay {
position: fixed;
top: calc(env(safe-area-inset-top, 0px) + 12px);
left: 50%;
transform: translateX(-50%) translateY(-120%);
z-index: var(--z-tooltip);
opacity: 0;
transition: transform var(--duration-relaxed) var(--ease-soft), opacity var(--duration-relaxed) var(--ease-soft);
pointer-events: none;
max-width: 92vw;
}
#resume-guard-overlay.visible {
transform: translateX(-50%) translateY(0);
opacity: 1;
pointer-events: auto;
}
.resume-guard-card {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4-5);
background: rgba(15, 27, 48, 0.95);
color: var(--lod-white);
border-radius: var(--radius-xl);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
min-width: 260px;
}
.resume-guard-spinner {
width: 18px;
height: 18px;
border: 2px solid rgba(255, 255, 255, 0.25);
border-top-color: #fff;
border-radius: 50%;
animation: lod-spin var(--duration-spinner) var(--ease-linear) infinite;
flex-shrink: 0;
}
.resume-guard-title {
font-size: var(--font-size-base);
font-weight: var(--fw-semibold);
line-height: 1.2;
}
.resume-guard-status {
font-size: var(--font-size-sm);
font-weight: var(--fw-regular);
color: rgba(255, 255, 255, 0.75);
margin-top: var(--space-xxs);
line-height: 1.3;
}
.resume-guard-card > div:nth-child(2),
.resume-guard-card > div:nth-child(3) {
display: block;
}
.resume-guard-card .resume-guard-title,
.resume-guard-card .resume-guard-status {
display: block;
}
/* Sackgassen-Ausgang: Retry-/Schliessen-Buttons erscheinen erst, wenn die
Wake-Up-Retry-Schleife erschoepft ist (resume-guard.js _showActions). */
.resume-guard-actions {
display: flex;
gap: var(--space-2);
margin-top: var(--space-1);
}
.resume-guard-actions[hidden] { display: none; }
.resume-guard-btn {
padding: var(--space-1) var(--space-2-5);
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.12);
color: var(--lod-white);
font: inherit;
font-size: var(--font-size-sm);
font-weight: var(--fw-semibold);
cursor: pointer;
}
.resume-guard-btn:hover { background: rgba(255, 255, 255, 0.22); }
.resume-guard-btn:focus-visible { outline: 2px solid var(--lod-white); outline-offset: 1px; }
.resume-guard-btn--ghost {
background: transparent;
font-weight: var(--fw-regular);
}
@media (prefers-reduced-motion: reduce) {
.resume-guard-spinner { animation-duration: 1.8s; }
#resume-guard-overlay { transition: opacity var(--duration-relaxed) var(--ease-soft); transform: translateX(-50%); }
#resume-guard-overlay.visible { transform: translateX(-50%); }
}