/* ================================================================
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;
}
/* ── 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, .mt-kontext-reset-btn {
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);
}
.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-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,
.mt-kontext-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,
#org-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%); }
}